Update Quay Sec UI as per feedback from design team

Fixes #1281
This commit is contained in:
Joseph Schorr 2016-03-09 15:28:21 -05:00
parent c75fcfbd5e
commit 821b09daaf
20 changed files with 656 additions and 564 deletions

View file

@ -16,7 +16,7 @@
</div>
<!-- Scanned and has no features -->
<div ng-if="securityStatus == 'scanned' && !securityFeatures.length">
<div ng-if="securityStatus == 'scanned' && !vulnerabilitiesInfo.features.length">
<div class="empty" style="margin-top: 20px;">
<div class="empty-icon">
<i class="fa fa-bug"></i>
@ -29,10 +29,10 @@
</div>
<!-- Scanned and has features -->
<div ng-if="securityStatus == 'scanned' && securityFeatures.length">
<div ng-if="securityStatus == 'scanned' && vulnerabilitiesInfo.features.length">
<!-- Header -->
<div class="security-header row">
<div class="donut-col col-md-3">
<div class="security-header">
<div class="donut-col">
<div id="vulnDonutChart" style="position: relative;">
<svg style="height:250px; width:250px"></svg>
<span class="donut-icon">
@ -40,51 +40,56 @@
</span>
</div>
</div>
<div class="summary-col col-md-9">
<ul class="summary-list" ng-if="priorityBreakdown.length">
<li class="title-item">Quay Security Scanner has detected <strong>{{ securityVulnerabilities.length }}</strong> vulnerabilities.</li>
<div class="summary-col">
<ul class="summary-list" ng-if="vulnerabilitiesInfo.severityBreakdown.length">
<li class="title-item">Quay Security Scanner has detected <strong>{{ vulnerabilitiesInfo.vulnerabilities.length }}</strong> vulnerabilities.</li>
<li class="subtitle-item" ng-if="vulnerabilitiesInfo.fixable.length">
Patches are available for <strong>{{ vulnerabilitiesInfo.fixable.length }}</strong> vulnerabilities.
</li>
<li ng-repeat="priority in priorityBreakdown">
<i class="fa fa-exclamation-triangle" ng-style="{'color': priority.color}"></i> <strong>{{ priority.value }}</strong> {{ priority.label }}-level vulnerabilities.
<li style="margin-bottom: 30px"></li>
<li class="severity-item" ng-repeat="severity in vulnerabilitiesInfo.severityBreakdown">
<i class="fa fa-exclamation-triangle" ng-style="{'color': severity.color}"></i> <strong>{{ severity.value }}</strong> {{ severity.label }}-level vulnerabilities.
</li>
</ul>
<div ng-if="!priorityBreakdown.length">
<div ng-if="!vulnerabilitiesInfo.severityBreakdown.length">
Quay Security Scanner has detected no vulnerabilities in this image.
</div>
</div>
</div>
<!-- Filter -->
<span class="co-filter-box" ng-show="priorityBreakdown.length">
<span class="filter-message" ng-if="options.vulnFilter || options.fixableVulns">
Showing {{ orderedVulnerabilities.entries.length }} of {{ securityVulnerabilities.length }} Vulnerabilities
<span class="co-filter-box with-options" ng-show="vulnerabilitiesInfo.vulnerabilities.length">
<span class="filter-message" ng-if="options.filter || options.fixableVulns">
Showing {{ orderedVulnerabilities.entries.length }} of {{ vulnerabilitiesInfo.vulnerabilities.length }} Vulnerabilities
</span>
<input class="form-control" type="text" ng-model="options.vulnFilter" placeholder="Filter Vulnerabilities...">
<input class="form-control" type="text" ng-model="options.filter" placeholder="Filter Vulnerabilities...">
<div class="filter-options">
<label><input type="checkbox" ng-model="options.fixableVulns">Only display vulnerabilities with fixes</label>
<label><input type="checkbox" ng-model="options.fixableVulns">Only show fixable</label>
</div>
</span>
<h3>Image Vulnerabilities</h3>
<!-- Table -->
<div class="empty" ng-if="!securityVulnerabilities.length"
<div class="empty" ng-if="!vulnerabilitiesInfo.vulnerabilities.length"
style="margin-top: 20px;">
<div class="empty-primary-msg">No vulnerabilities found.</div>
<div class="empty-secondary-msg">Quay Security Scanner has detected no vulnerabilities in this image.</div>
</div>
<table class="co-table" ng-show="priorityBreakdown.length">
<table class="co-table" ng-show="vulnerabilitiesInfo.vulnerabilities.length">
<thead>
<td class="caret-col"></td>
<td ng-class="tablePredicateClass('name', options.predicate, options.reverse)">
<a href="javascript:void(0)" ng-click="orderBy('name')">CVE</a>
<td ng-class="TableService.tablePredicateClass('name', options.predicate, options.reverse)">
<a href="javascript:void(0)" ng-click="TableService.orderBy('name', options)">CVE</a>
</td>
<td ng-class="tablePredicateClass('score', options.predicate, options.reverse)">
<a href="javascript:void(0)" ng-click="orderBy('score')">CVSS / Severity</a>
<td ng-class="TableService.tablePredicateClass('score', options.predicate, options.reverse)">
<a href="javascript:void(0)" ng-click="TableService.orderBy('score', options)">Severity</a>
</td>
<td class="hidden-xs" ng-class="tablePredicateClass('featureName', options.predicate, options.reverse)">
<a href="javascript:void(0)" ng-click="orderBy('featureName')">Package</a>
<td class="hidden-xs" ng-class="TableService.tablePredicateClass('featureName', options.predicate, options.reverse)">
<a href="javascript:void(0)" ng-click="TableService.orderBy('featureName', options)">Package</a>
</td>
<td class="hidden-xs">Current version</td>
<td class="hidden-xs hidden-sm">Fixed in version</td>
@ -108,17 +113,22 @@
</a>
</td>
<td class="single-col nowrap-col">
<span bo-if="vuln.metadata.NVD.CVSSv2.Score">
<span class="cvss-text" bo-text="vuln.metadata.NVD.CVSSv2.Score"></span>
<span class="cvss"><span bo-style="{'width': (vuln.metadata.NVD.CVSSv2.Score * 10) + '%', 'background-color': getCVSSColor(vuln.metadata.NVD.CVSSv2.Score)}"></span>
<span bo-if="vuln.cvssScore && !vuln.scoreDivergence">
<span class="cvss-text" bo-text="vuln.cvssScore"></span>
<span class="cvss"><span bo-style="{'width': (vuln.cvssScore * 10) + '%', 'background-color': vuln.cvssColor}"></span>
</span>
</span>
<span bo-if="!vuln.metadata.NVD.CVSSv2.Score">
<span bo-if="!vuln.cvssScore || vuln.scoreDivergence" data-title="{{ getSeverityTooltip(vuln) }}" data-container="body" bs-tooltip>
<span class="vulnerability-priority-view" priority="vuln.severity"></span>
<span class="asterisk" ng-if="vuln.scoreDivergence == 'adjusted-lower'" ng-style="{'color': vuln.severityInfo.color}">
<i class="fa fa-asterisk"></i>
</span>
</span>
</td>
<td class="single-col hidden-xs"><span bo-text="vuln.featureName"></span></td>
<td class="single-col hidden-xs hidden-sm"><span bo-text="vuln.introducedInVersion"></span></td>
<td class="single-col hidden-xs hidden-sm">
<span bo-text="vuln.introducedInVersion"></span>
</td>
<td class="single-col hidden-xs">
<span class="empty" bo-if="!vuln.fixedInVersion">(None)</span>
<span class="fixed-in-version" bo-if="vuln.fixedInVersion" bo-text="vuln.fixedInVersion"></span>
@ -137,7 +147,12 @@
<div class="subtitle">Summary</div>
<table>
<tr><td>Package:</td><td><span bo-text="vuln.featureName"></span></td></tr>
<tr><td>Introduced in version:</td><td><span bo-text="vuln.introducedInVersion"></span></td></tr>
<tr>
<td>Introduced in version:</td>
<td>
<span bo-text="vuln.introducedInVersion"></span>
</td>
</tr>
<tr>
<td>Fixed in version:</td>
<td>
@ -152,6 +167,15 @@
</table>
</div>
<div class="severity-note" bo-if="vuln.scoreDivergence">
<div class="subtitle">Severity note</div>
<span class="description">
Note that this vulnerability was originally given a CVSSv2 score of <strong bo-text="vuln.cvssScore"></strong> by NVD but was subsequently reclassified as
<span class="vulnerability-priority-view" priority="vuln.severity"></span>
by <span bo-text="getDistro(vuln)"></span>
</span>
</div>
<div class="vectors" bo-if="vuln.metadata.NVD.CVSSv2.Vectors">
<div class="subtitle">Vectors</div>
<div class="nvd-vectors-display" vectors="{{ vuln.metadata.NVD.CVSSv2.Vectors }}"></div>
@ -163,7 +187,7 @@
</tr>
</tbody>
</table>
<div class="empty" ng-if="securityVulnerabilities.length && !orderedVulnerabilities.entries.length"
<div class="empty" ng-if="vulnerabilitiesInfo.vulnerabilities.length && !orderedVulnerabilities.entries.length"
style="margin-top: 20px;">
<div class="empty-primary-msg">No matching vulnerabilities found.</div>
<div class="empty-secondary-msg">Try expanding your filtering terms.</div>