Implement new vulnerabilities and packages tabs.
Fixes https://github.com/coreos-inc/design/issues/268
This commit is contained in:
Joseph Schorr
parent
c7904db30d
commit
ae9140caae
16 changed files with 1547 additions and 171 deletions
148
static/directives/image-feature-view.html
Normal file
148
static/directives/image-feature-view.html
Normal file
|
|
@ -0,0 +1,148 @@
|
|||
<div class="image-feature-view-element">
|
||||
<!-- Not scanned -->
|
||||
<div class="empty" ng-if="securityStatus == 'queued'">
|
||||
<div class="empty-primary-msg">This image has not been indexed yet</div>
|
||||
<div class="empty-secondary-msg">
|
||||
Please try again in a few minutes.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Unable to scan -->
|
||||
<div class="empty" ng-if="securityStatus == 'failed'">
|
||||
<div class="empty-primary-msg">This image could not be indexed</div>
|
||||
<div class="empty-secondary-msg">
|
||||
Our security scanner was unable to index this image.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Scanned -->
|
||||
<div ng-if="securityStatus == 'scanned'">
|
||||
<!-- Header -->
|
||||
<div class="security-header row">
|
||||
<div class="donut-col col-md-3">
|
||||
<div id="featureDonutChart" style="position: relative;">
|
||||
<svg style="height:250px; width:250px"></svg>
|
||||
<span class="donut-icon">
|
||||
<i class="fa ci-package"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="summary-col col-md-9">
|
||||
<ul class="summary-list">
|
||||
<li class="title-item">Quay Security Scanner has resolved <strong>{{ securityFeatures.length }}</strong> packages.</li>
|
||||
<li ng-repeat="priority in featureBreakdown">
|
||||
<span ng-if="priority.label != 'None'">
|
||||
<i class="fa ci-package" ng-style="{'color': priority.color}"></i> <strong>{{ priority.value }}</strong> packages with {{ priority.label }}-level vulnerabilities.
|
||||
</span>
|
||||
<span ng-if="priority.label == 'None'" style="margin-top: 20px; display: inline-block;">
|
||||
<i class="fa ci-package" ng-style="{'color': priority.color}"></i> <strong>{{ priority.value }}</strong> packages with no vulnerabilities.
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Filter -->
|
||||
<span class="co-filter-box">
|
||||
<span class="filter-message" ng-if="options.featureFilter">
|
||||
Showing {{ orderedFeatures.entries.length }} of {{ securityFeatures.length }} packages
|
||||
</span>
|
||||
<input class="form-control" type="text" ng-model="options.featureFilter" placeholder="Filter Packages...">
|
||||
</span>
|
||||
<h3>Image Packages</h3>
|
||||
|
||||
<!-- Table -->
|
||||
<table class="co-table">
|
||||
<thead>
|
||||
<td ng-class="tablePredicateClass('name', options.predicate, options.reverse)">
|
||||
<a href="javascript:void(0)" ng-click="orderBy('name')">Package Name</a>
|
||||
</td>
|
||||
<td class="hidden-xs">
|
||||
Package Version
|
||||
</td>
|
||||
<td ng-class="tablePredicateClass('score', options.predicate, options.reverse)">
|
||||
<a href="javascript:void(0)" ng-click="orderBy('score')">Vulnerabilities</a>
|
||||
</td>
|
||||
<td class="hidden-xs hidden-sm hidden-md"
|
||||
ng-class="tablePredicateClass('leftoverScore', options.predicate, options.reverse)"
|
||||
data-title="Identified vulnerabilities remaining after the package is upgraded to the latest version"
|
||||
data-container="body" bs-tooltip>
|
||||
<a href="javascript:void(0)" ng-click="orderBy('leftoverScore')">Remaining after upgrade</a>
|
||||
</td>
|
||||
<td ng-class="tablePredicateClass('fixableScore', options.predicate, options.reverse)">
|
||||
<a href="javascript:void(0)" ng-click="orderBy('fixableScore')"
|
||||
data-title="Delta of the severity of vulnerabilities in the package before->after upgrading" data-container="body" bs-tooltip>Upgrade impact</a>
|
||||
</td>
|
||||
<td class="hidden-xs hidden-sm hidden-md">
|
||||
Introduced In Image
|
||||
</td>
|
||||
<td class="hidden-xs options-col"></td>
|
||||
</thead>
|
||||
<tbody ng-repeat="feature in orderedFeatures.visibleEntries" bindonce>
|
||||
<tr>
|
||||
<td class="single-col">
|
||||
<span bo-text="feature.name"></span>
|
||||
</td>
|
||||
<td class="single-col hidden-xs">
|
||||
<span bo-text="feature.version"></span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="no-vulns" bo-if="feature.vulnCount == 0">
|
||||
<i class="fa fa-check-circle"></i>None Detected
|
||||
</span>
|
||||
<span class="vuln-summary" bo-if="feature.vulnCount != 0">
|
||||
<span ng-style="{'color': feature.primarySeverity.color}">
|
||||
<i class="fa fa fa-exclamation-triangle"></i>
|
||||
{{ feature.primarySeverity.count }}
|
||||
{{ feature.primarySeverity.title }}
|
||||
</span>
|
||||
<span bo-if="feature.vulnCount - feature.primarySeverity.count > 0">
|
||||
+ {{ feature.vulnCount - feature.primarySeverity.count }} additional
|
||||
</span>
|
||||
</span>
|
||||
</td>
|
||||
<td class="hidden-xs hidden-sm hidden-md">
|
||||
<span class="empty" bo-if="feature.vulnCount == 0">
|
||||
(N/A)
|
||||
</span>
|
||||
<span class="no-vulns" bo-if="feature.vulnCount != 0 && feature.leftoverBreakdown.length == 0">
|
||||
<i class="fa fa-arrow-circle-right"></i>
|
||||
All identified vulnerabilities fixed
|
||||
</span>
|
||||
<span class="vuln-summary" bo-if="feature.vulnCount != 0 && feature.leftoverBreakdown.length != 0">
|
||||
<span ng-style="{'color': feature.primaryLeftover.color}">
|
||||
<i class="fa fa-arrow-circle-right"></i>
|
||||
{{ feature.primaryLeftover.count }}
|
||||
{{ feature.primaryLeftover.title }}
|
||||
</span>
|
||||
<span bo-if="feature.leftoverCount - feature.primaryLeftover.count > 0">
|
||||
+ {{ feature.leftoverCount - feature.primaryLeftover.count }} additional
|
||||
</span>
|
||||
</span>
|
||||
</td>
|
||||
<td class="impact-col">
|
||||
<span class="empty" bo-if="feature.vulnCount == 0">
|
||||
(N/A)
|
||||
</span>
|
||||
<span bo-if="feature.vulnCount > 0">
|
||||
<span class="strength-indicator" value="feature.fixableScore" maximum="highestFixableScore"
|
||||
log-base="2"></span>
|
||||
</span>
|
||||
</td>
|
||||
<td class="double-col image-col hidden-xs hidden-sm hidden-md">
|
||||
<span data-title="{{ feature.imageCommand }}" bs-tooltip>
|
||||
<span class="dockerfile-command" command="feature.imageCommand"></span>
|
||||
</span>
|
||||
<a href="/repository/{{ repository.namespace }}/{{ repository.name }}/image/{{ feature.imageId }}"><i class="fa fa-archive"></i></a>
|
||||
</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="empty" ng-if="securityFeatures.length && !orderedFeatures.entries.length"
|
||||
style="margin-top: 20px;">
|
||||
<div class="empty-primary-msg">No matching packages found.</div>
|
||||
<div class="empty-secondary-msg">Try expanding your filtering terms.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
153
static/directives/image-vulnerability-view.html
Normal file
153
static/directives/image-vulnerability-view.html
Normal file
|
|
@ -0,0 +1,153 @@
|
|||
<div class="image-vulnerability-view-element">
|
||||
<!-- Not scanned -->
|
||||
<div class="empty" ng-if="securityStatus == 'queued'">
|
||||
<div class="empty-primary-msg">This image has not been indexed yet</div>
|
||||
<div class="empty-secondary-msg">
|
||||
Please try again in a few minutes.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Unable to scan -->
|
||||
<div class="empty" ng-if="securityStatus == 'failed'">
|
||||
<div class="empty-primary-msg">This image could not be indexed</div>
|
||||
<div class="empty-secondary-msg">
|
||||
Our security scanner was unable to index this image.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Scanned -->
|
||||
<div ng-if="securityStatus == 'scanned'">
|
||||
<!-- Header -->
|
||||
<div class="security-header row">
|
||||
<div class="donut-col col-md-3">
|
||||
<div id="vulnDonutChart" style="position: relative;">
|
||||
<svg style="height:250px; width:250px"></svg>
|
||||
<span class="donut-icon">
|
||||
<i class="fa fa-bug"></i>
|
||||
</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>
|
||||
|
||||
<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>
|
||||
</ul>
|
||||
|
||||
<div ng-if="!priorityBreakdown.length">
|
||||
<li class="title-item">Quay Security Scanner has detected no vulnerabilities in this image.</li>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Filter -->
|
||||
<span class="co-filter-box">
|
||||
<span class="filter-message" ng-if="options.vulnFilter || options.fixableVulns">
|
||||
Showing {{ orderedVulnerabilities.entries.length }} of {{ securityVulnerabilities.length }} Vulnerabilities
|
||||
</span>
|
||||
<input class="form-control" type="text" ng-model="options.vulnFilter" placeholder="Filter Vulnerabilities...">
|
||||
<div class="filter-options">
|
||||
<label><input type="checkbox" ng-model="options.fixableVulns">Only display vulnerabilities with fixes</label>
|
||||
</div>
|
||||
</span>
|
||||
<h3>Image Vulnerabilities</h3>
|
||||
|
||||
<!-- Table -->
|
||||
<table class="co-table">
|
||||
<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>
|
||||
<td ng-class="tablePredicateClass('score', options.predicate, options.reverse)">
|
||||
<a href="javascript:void(0)" ng-click="orderBy('score')">CVSS / 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>
|
||||
<td class="hidden-xs">Current version</td>
|
||||
<td class="hidden-xs hidden-sm">Fixed in version</td>
|
||||
</td>
|
||||
<td class="hidden-xs hidden-sm hidden-md">Introduced in image</td>
|
||||
<td class="hidden-xs options-col"></td>
|
||||
</thead>
|
||||
<tbody ng-repeat="vuln in orderedVulnerabilities.visibleEntries" bindonce>
|
||||
<tr>
|
||||
<td class="caret-col">
|
||||
<span ng-click="toggleDetails(vuln)">
|
||||
<i class="fa"
|
||||
ng-class="vuln.expanded ? 'fa-caret-down' : 'fa-caret-right'"
|
||||
data-title="View Details" bs-tooltip></i>
|
||||
</span>
|
||||
</td>
|
||||
<td class="single-col nowrap-col">
|
||||
<a href="javascript:void(0)" bo-text="vuln.name" ng-click="toggleDetails(vuln)" class="expand-link"></a>
|
||||
<a href="{{ vuln.link }}" class="external-link hidden-xs hidden-sm hidden-md" target="_blank">
|
||||
<i class="fa fa-link"></i>
|
||||
</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>
|
||||
</span>
|
||||
<span bo-if="!vuln.metadata.NVD.CVSSv2.Score">
|
||||
<span class="vulnerability-priority-view" priority="vuln.severity"></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">
|
||||
<span class="empty" bo-if="!vuln.fixedInVersion">(None)</span>
|
||||
<span class="fixed-in-version" bo-if="vuln.fixedInVersion" bo-text="vuln.fixedInVersion"></span>
|
||||
</td>
|
||||
<td class="double-col image-col hidden-xs hidden-sm hidden-md">
|
||||
<span data-title="{{ vuln.imageCommand }}" bs-tooltip>
|
||||
<span class="dockerfile-command" command="vuln.imageCommand"></span>
|
||||
</span>
|
||||
<a href="/repository/{{ repository.namespace }}/{{ repository.name }}/image/{{ vuln.imageId }}"><i class="fa fa-archive"></i></a>
|
||||
</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr ng-if="vuln.expanded">
|
||||
<td class="expansion-col" colspan="8">
|
||||
<div class="visible-xs" style="margin-bottom: 20px">
|
||||
<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>Fixed in version:</td>
|
||||
<td>
|
||||
<span class="empty" bo-if="!vuln.fixedInVersion">(None)</span>
|
||||
<span class="fixed-in-version" bo-if="vuln.fixedInVersion" bo-text="vuln.fixedInVersion"></span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Introduced in Image:</td>
|
||||
<td><span class="image-link" repository="repository" image-id="vuln.imageId"></span></td>
|
||||
</tr>
|
||||
</table>
|
||||
</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>
|
||||
</div>
|
||||
|
||||
<div class="subtitle">Description</div>
|
||||
<span class="description" bo-text="vuln.description"></span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="empty" ng-if="securityVulnerabilities.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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
8
static/directives/nvd-vectors-display.html
Normal file
8
static/directives/nvd-vectors-display.html
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
<div class="nvd-vectors-display-element">
|
||||
<dl ng-repeat="vector in parsedVectors" bindonce>
|
||||
<dt bo-text="getVectorTitle(vector)" data-title="{{ getVectorDescription(vector) }}" data-container="body" bs-tooltip></dt>
|
||||
<dd bo-class="getVectorClasses(option, vector)" ng-repeat="option in getVectorOptions(vector)" data-container="body" data-title="{{ option.description }}" bs-tooltip>
|
||||
{{ option.title }}
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
|
|
@ -152,7 +152,7 @@
|
|||
data-title="The image for this tag has no vulnerabilities as found in our database"
|
||||
bs-tooltip
|
||||
bindonce>
|
||||
<a bo-href-i="/repository/{{ repository.namespace }}/{{ repository.name }}/image/{{ tag.image_id }}?tab=security">
|
||||
<a bo-href-i="/repository/{{ repository.namespace }}/{{ repository.name }}/image/{{ tag.image_id }}?tab=vulnerabilities">
|
||||
<i class="fa fa-check-circle"></i>
|
||||
Passed
|
||||
</a>
|
||||
|
|
@ -162,7 +162,7 @@
|
|||
<span ng-if="getTagVulnerabilities(tag).status == 'scanned' && getTagVulnerabilities(tag).hasVulnerabilities"
|
||||
ng-class="getTagVulnerabilities(tag).highestVulnerability.Priority"
|
||||
class="has-vulns" bindonce>
|
||||
<a class="vuln-link" bo-href-i="/repository/{{ repository.namespace }}/{{ repository.name }}/image/{{ tag.image_id }}?tab=security"
|
||||
<a class="vuln-link" bo-href-i="/repository/{{ repository.namespace }}/{{ repository.name }}/image/{{ tag.image_id }}?tab=vulnerabilities"
|
||||
data-title="The image for this tag has {{ getTagVulnerabilities(tag).highestVulnerability.Count }} {{ getTagVulnerabilities(tag).highestVulnerability.Priority }} level vulnerabilities"
|
||||
bs-tooltip>
|
||||
<span class="highest-vuln">
|
||||
|
|
@ -176,7 +176,7 @@
|
|||
+ {{ getTagVulnerabilities(tag).vulnerabilities.length - getTagVulnerabilities(tag).highestVulnerability.Count }} others
|
||||
</span>
|
||||
</a>
|
||||
<a bo-href-i="/repository/{{ repository.namespace }}/{{ repository.name }}/image/{{ tag.image_id }}?tab=security" style="display: inline-block; margin-left: 6px;">
|
||||
<a bo-href-i="/repository/{{ repository.namespace }}/{{ repository.name }}/image/{{ tag.image_id }}?tab=vulnerabilities" style="display: inline-block; margin-left: 6px;">
|
||||
More Info
|
||||
</a>
|
||||
</span>
|
||||
|
|
|
|||
Reference in a new issue