vbatts/quay
Archived
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Switch from an image view UI to a manifest view UI

Browse source 
We no longer allow viewing individual images, but instead only manifests. This will help with the transition to Clair V3 (which is manifest based) and, eventually, the the new data model (which will also be manifest based)
This commit is contained in:
Joseph Schorr 2018-03-28 16:03:18 -04:00
parent d41dcaae23
commit fc6eb71ab1
24 changed files with 312 additions and 260 deletions
Download patch file Download diff file Expand all files Collapse all files

36
static/css/directives/ui/image-view-layer.css
View file

@ -1,29 +1,7 @@
.image-view-layer-element {
position: relative;
padding: 10px;
padding-left: 170px;
}
.image-view-layer-element .image-id {
font-family: monospace;
position: absolute;
top: 10px;
left: 10px;
width: 110px;
text-align: right;
}
.image-view-layer-element .image-id a {
color: #aaa;
}
.image-view-layer-element.first .image-id {
font-weight: bold;
font-size: 110%;
}
.image-view-layer-element.first .image-id a {
color: black;
padding-left: 40px;
}
.image-view-layer-element .image-comment {
@ -47,7 +25,7 @@
position: absolute;
top: 0px;
bottom: 0px;
left: 140px;
left: 10px;
border-left: 2px solid #428bca;
width: 0px;
@ -64,7 +42,7 @@
.image-view-layer-element .image-layer-dot {
position: absolute;
top: 14px;
left: 135px;
left: 5px;
border: 2px solid #428bca;
border-radius: 50%;
width: 12px;
@ -79,14 +57,6 @@
}
@media (max-width: 767px) {
.image-view-layer-element {
margin-left: -140px;
}
.image-view-layer-element .image-id {
display: none;
}
.image-view-layer-element .dockerfile-command-element .label {
position: relative;
display: block;

46
static/css/directives/ui/image-feature-view.css → static/css/directives/ui/manifest-feature-view.css
View file

@ -1,4 +1,4 @@
.image-feature-view-element .donut-icon {
.manifest-feature-view-element .donut-icon {
position: absolute;
top: 60px;
left: 95px;
@ -8,26 +8,26 @@
margin-left: -6px;
}
.image-feature-view-element > .empty {
.manifest-feature-view-element > .empty {
margin-top: 20px;
}
.image-feature-view-element .no-vulns {
.manifest-feature-view-element .no-vulns {
color: #2FC98E;
}
.image-feature-view-element .no-vulns i.fa {
.manifest-feature-view-element .no-vulns i.fa {
margin-right: 6px;
}
.image-feature-view-element .security-header {
.manifest-feature-view-element .security-header {
margin-top: -4px;
margin-bottom: 30px;
padding-bottom: 30px;
border-bottom: 1px solid #eee;
}
.image-feature-view-element .donut-col {
.manifest-feature-view-element .donut-col {
padding-top: 20px;
text-align: center;
max-width: 250px;
@ -36,75 +36,75 @@
}
.image-feature-view-element #featureDonutChart {
.manifest-feature-view-element #featureDonutChart {
display: inline-block;
}
.image-feature-view-element .summary-col {
.manifest-feature-view-element .summary-col {
font-size: 18px;
display: inline-block;
vertical-align: top;
padding-top: 30px;
}
.image-feature-view-element .summary-col .title-item {
.manifest-feature-view-element .summary-col .title-item {
font-size: 24px;
margin-bottom: 30px;
}
.image-feature-view-element .summary-list {
.manifest-feature-view-element .summary-list {
text-align: left;
list-style: none;
}
.image-feature-view-element .summary-list i.fa {
.manifest-feature-view-element .summary-list i.fa {
margin-right: 10px;
}
.image-feature-view-element .summary-list .package-item strong {
.manifest-feature-view-element .summary-list .package-item strong {
text-align: right;
width: 40px;
display: inline-block;
margin-right: 6px;
}
.image-feature-view-element .co-table .empty {
.manifest-feature-view-element .co-table .empty {
color: #ddd;
}
.image-feature-view-element .co-table .single-col {
.manifest-feature-view-element .co-table .single-col {
width: 12.5%;
}
.image-feature-view-element .co-table .double-col {
.manifest-feature-view-element .co-table .double-col {
width: 25%;
}
.image-feature-view-element .co-table .impact-col {
.manifest-feature-view-element .co-table .impact-col {
text-align: center;
width: 130px;
}
.image-feature-view-element .co-table .image-col {
.manifest-feature-view-element .co-table .image-col {
white-space: nowrap;
}
.image-feature-view-element .co-table .image-col .fa {
.manifest-feature-view-element .co-table .image-col .fa {
margin-left: 6px;
opacity: 0.5;
}
@media (max-width: 767px) {
.image-feature-view-element .co-table .single-col {
.manifest-feature-view-element .co-table .single-col {
width: auto !important;
}
}
.image-feature-view-element .dockerfile-command {
.manifest-feature-view-element .dockerfile-command {
cursor: default;
}
.image-feature-view-element .dockerfile-command .command-title {
.manifest-feature-view-element .dockerfile-command .command-title {
font-size: 12px;
max-width: 297px;
overflow: hidden;
@ -114,11 +114,11 @@
vertical-align: middle;
}
.image-feature-view-element .vuln-summary i.fa {
.manifest-feature-view-element .vuln-summary i.fa {
margin-right: 6px;
}
.image-feature-view-element .defcon1 {
.manifest-feature-view-element .defcon1 {
background-color: #FB5151;
color: white;
}

2
static/css/directives/ui/manifest-link.css
View file

@ -6,7 +6,7 @@
.manifest-link a {
font-family: Consolas, "Lucida Console", Monaco, monospace;
font-size: 12px;
font-size: 10px;
text-decoration: none;
}

72
static/css/directives/ui/image-vulnerability-view.css → static/css/directives/ui/manifest-vulnerability-view.css
View file

@ -1,4 +1,4 @@
.image-vulnerability-view-element .donut-icon {
.manifest-vulnerability-view-element .donut-icon {
position: absolute;
top: 70px;
left: 95px;
@ -8,18 +8,18 @@
margin-left: -6px;
}
.image-vulnerability-view-element > .empty {
.manifest-vulnerability-view-element > .empty {
margin-top: 20px;
}
.image-vulnerability-view-element .security-header {
.manifest-vulnerability-view-element .security-header {
margin-top: -4px;
margin-bottom: 30px;
padding-bottom: 30px;
border-bottom: 1px solid #eee;
}
.image-vulnerability-view-element .donut-col {
.manifest-vulnerability-view-element .donut-col {
padding-top: 20px;
text-align: center;
max-width: 250px;
@ -27,48 +27,48 @@
vertical-align: top;
}
.image-vulnerability-view-element #vulnDonutChart {
.manifest-vulnerability-view-element #vulnDonutChart {
display: inline-block;
}
.image-vulnerability-view-element .summary-col {
.manifest-vulnerability-view-element .summary-col {
font-size: 18px;
display: inline-block;
vertical-align: top;
padding-top: 30px;
}
.image-vulnerability-view-element .summary-col .title-item {
.manifest-vulnerability-view-element .summary-col .title-item {
font-size: 24px;
margin-bottom: 6px;
}
.image-vulnerability-view-element .summary-col .subtitle-item {
.manifest-vulnerability-view-element .summary-col .subtitle-item {
font-size: 22px;
margin-bottom: 6px;
}
.image-vulnerability-view-element .summary-list {
.manifest-vulnerability-view-element .summary-list {
text-align: left;
list-style: none;
}
.image-vulnerability-view-element .summary-list i.fa {
.manifest-vulnerability-view-element .summary-list i.fa {
margin-right: 10px;
}
.image-vulnerability-view-element .summary-list li.severity-item strong {
.manifest-vulnerability-view-element .summary-list li.severity-item strong {
text-align: right;
width: 40px;
display: inline-block;
margin-right: 6px;
}
.image-vulnerability-view-element .dockerfile-command {
.manifest-vulnerability-view-element .dockerfile-command {
cursor: default;
}
.image-vulnerability-view-element .dockerfile-command .command-title {
.manifest-vulnerability-view-element .dockerfile-command .command-title {
font-size: 12px;
max-width: 297px;
overflow: hidden;
@ -78,53 +78,53 @@
vertical-align: middle;
}
.image-vulnerability-view-element .co-table .empty {
.manifest-vulnerability-view-element .co-table .empty {
color: #ddd;
}
.image-vulnerability-view-element .co-table .single-col {
.manifest-vulnerability-view-element .co-table .single-col {
width: 15%;
}
.image-vulnerability-view-element .co-table .double-col {
.manifest-vulnerability-view-element .co-table .double-col {
width: 30%;
}
.image-vulnerability-view-element .co-table .impact-col {
.manifest-vulnerability-view-element .co-table .impact-col {
text-align: center;
width: 130px;
}
.image-vulnerability-view-element .co-table .nowrap-col {
.manifest-vulnerability-view-element .co-table .nowrap-col {
white-space: nowrap;
}
.image-vulnerability-view-element .co-table .image-col {
.manifest-vulnerability-view-element .co-table .image-col {
white-space: nowrap;
}
.image-vulnerability-view-element .co-table .image-col .fa {
.manifest-vulnerability-view-element .co-table .image-col .fa {
margin-left: 6px;
opacity: 0.5;
}
@media (max-width: 767px) {
.image-vulnerability-view-element .co-table .single-col {
.manifest-vulnerability-view-element .co-table .single-col {
width: auto !important;
}
}
.image-vulnerability-view-element .fixed-in-version:before {
.manifest-vulnerability-view-element .fixed-in-version:before {
font-family: FontAwesome;
content: '\f0a9';
margin-right: 6px;
}
.image-vulnerability-view-element .fixed-in-version {
.manifest-vulnerability-view-element .fixed-in-version {
color: rgb(47, 201, 142);
}
.image-vulnerability-view-element .cvss-text {
.manifest-vulnerability-view-element .cvss-text {
display: inline-block;
width: 40px;
text-align: right;
@ -135,11 +135,11 @@
color: #ccc;
}
.image-vulnerability-view-element .vulnerability-priority-view {
.manifest-vulnerability-view-element .vulnerability-priority-view {
margin-left: 10px;
}
.image-vulnerability-view-element .cvss {
.manifest-vulnerability-view-element .cvss {
display: inline-block;
width: 100px;
height: 10px;
@ -148,7 +148,7 @@
position: relative;;
}
.image-vulnerability-view-element .cvss span {
.manifest-vulnerability-view-element .cvss span {
display: inline-block;
position: absolute;
top: 0px;
@ -156,12 +156,12 @@
bottom: 0px;
}
.image-vulnerability-view-element .expansion-col {
.manifest-vulnerability-view-element .expansion-col {
padding-top: 20px;
padding-bottom: 20px;
}
.image-vulnerability-view-element .subtitle {
.manifest-vulnerability-view-element .subtitle {
color: #999;
font-size: 90%;
text-transform: uppercase;
@ -172,37 +172,37 @@
}
.image-vulnerability-view-element .expand-link {
.manifest-vulnerability-view-element .expand-link {
color: black !important;
}
.image-vulnerability-view-element .external-link {
.manifest-vulnerability-view-element .external-link {
margin-left: 10px;
font-size: 12px;
}
.image-vulnerability-view-element .description {
.manifest-vulnerability-view-element .description {
display: inline-block;
max-width: 1000px;
}
.image-vulnerability-view-element .asterisk {
.manifest-vulnerability-view-element .asterisk {
vertical-align: super;
font-size: 9px;
margin-left: 2px;
}
.image-vulnerability-view-element .severity-note {
.manifest-vulnerability-view-element .severity-note {
margin-bottom: 10px;
}
.image-vulnerability-view-element .severity-note .vulnerability-priority-view {
.manifest-vulnerability-view-element .severity-note .vulnerability-priority-view {
margin: 0px;
margin-left: 2px;
margin-right: 2px;
}
.image-vulnerability-view-element .defcon1 {
.manifest-vulnerability-view-element .defcon1 {
background-color: #FB5151;
color: white;
}