Make the Quay UI work for Clair 1.0
This commit is contained in:
Quentin Machu
parent
4bd5996bbf
commit
6a37f93718
3 changed files with 106 additions and 77 deletions
|
|
@ -156,41 +156,48 @@ angular.module('quay').directive('repoPanelTags', function () {
|
|||
var params = {
|
||||
'imageid': image_id,
|
||||
'repository': $scope.repository.namespace + '/' + $scope.repository.name,
|
||||
'vulnerabilities': true,
|
||||
};
|
||||
|
||||
ApiService.getRepoImageVulnerabilities(null, params).then(function(resp) {
|
||||
ApiService.getRepoImageSecurity(null, params).then(function(resp) {
|
||||
imageData.loading = false;
|
||||
imageData.status = resp['status'];
|
||||
|
||||
if (imageData.status == 'scanned') {
|
||||
var vulnerabilities = resp.data.Vulnerabilities;
|
||||
|
||||
imageData.hasVulnerabilities = !!vulnerabilities.length;
|
||||
imageData.vulnerabilities = vulnerabilities;
|
||||
|
||||
var vulnerabilities = [];
|
||||
var highest = {
|
||||
'Priority': 'Unknown',
|
||||
'Severity': 'Unknown',
|
||||
'Count': 0,
|
||||
'index': 100000
|
||||
};
|
||||
|
||||
resp.data.Vulnerabilities.forEach(function(v) {
|
||||
if (VulnerabilityService.LEVELS[v.Priority].index == 0) {
|
||||
$scope.defcon1[v.ID] = v;
|
||||
$scope.hasDefcon1 = true;
|
||||
}
|
||||
if (resp.data && resp.data.Layer && resp.data.Layer.Features) {
|
||||
resp.data.Layer.Features.forEach(function(feature) {
|
||||
if (feature.Vulnerabilities) {
|
||||
feature.Vulnerabilities.forEach(function(vuln) {
|
||||
if (VulnerabilityService.LEVELS[vuln.Severity].index == 0) {
|
||||
$scope.defcon1[vuln.ID] = v;
|
||||
$scope.hasDefcon1 = true;
|
||||
}
|
||||
|
||||
if (VulnerabilityService.LEVELS[v.Priority].index < highest.index) {
|
||||
highest = {
|
||||
'Priority': v.Priority,
|
||||
'Count': 1,
|
||||
'index': VulnerabilityService.LEVELS[v.Priority].index
|
||||
if (VulnerabilityService.LEVELS[vuln.Severity].index < highest.index) {
|
||||
highest = {
|
||||
'Priority': vuln.Severity,
|
||||
'Count': 1,
|
||||
'index': VulnerabilityService.LEVELS[vuln.Severity].index
|
||||
}
|
||||
} else if (VulnerabilityService.LEVELS[vuln.Severity].index == highest.index) {
|
||||
highest['Count']++;
|
||||
}
|
||||
|
||||
vulnerabilities.push(vuln);
|
||||
});
|
||||
}
|
||||
} else if (VulnerabilityService.LEVELS[v.Priority].index == highest.index) {
|
||||
highest['Count']++;
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
imageData.hasVulnerabilities = !!vulnerabilities.length;
|
||||
imageData.vulnerabilities = vulnerabilities;
|
||||
imageData.highestVulnerability = highest;
|
||||
}
|
||||
}, function() {
|
||||
|
|
@ -355,4 +362,3 @@ angular.module('quay').directive('repoPanelTags', function () {
|
|||
};
|
||||
return directiveDefinitionObject;
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -45,39 +45,53 @@
|
|||
loadImage();
|
||||
loadRepository();
|
||||
|
||||
$scope.downloadPackages = function() {
|
||||
if (!Features.SECURITY_SCANNER || $scope.packagesResource) { return; }
|
||||
|
||||
var params = {
|
||||
'repository': namespace + '/' + name,
|
||||
'imageid': imageid
|
||||
};
|
||||
|
||||
$scope.packagesResource = ApiService.getRepoImagePackagesAsResource(params).get(function(packages) {
|
||||
$scope.packages = packages;
|
||||
return packages;
|
||||
});
|
||||
};
|
||||
|
||||
$scope.loadImageVulnerabilities = function() {
|
||||
if (!Features.SECURITY_SCANNER || $scope.vulnerabilitiesResource) { return; }
|
||||
$scope.loadImageSecurity = function() {
|
||||
if (!Features.SECURITY_SCANNER || $scope.securityResource) { return; }
|
||||
|
||||
$scope.VulnerabilityLevels = VulnerabilityService.getLevels();
|
||||
|
||||
var params = {
|
||||
'repository': namespace + '/' + name,
|
||||
'imageid': imageid
|
||||
'imageid': imageid,
|
||||
'vulnerabilities': true,
|
||||
};
|
||||
|
||||
$scope.vulnerabilitiesResource = ApiService.getRepoImageVulnerabilitiesAsResource(params).get(function(resp) {
|
||||
$scope.vulnerabilityInfo = resp;
|
||||
$scope.vulnerabilities = [];
|
||||
$scope.securityResource = ApiService.getRepoImageSecurityAsResource(params).get(function(resp) {
|
||||
$scope.securityStatus = resp.status;
|
||||
$scope.securityFeatures = [];
|
||||
$scope.securityVulnerabilities = [];
|
||||
|
||||
if (resp.data && resp.data.Vulnerabilities) {
|
||||
resp.data.Vulnerabilities.forEach(function(vuln) {
|
||||
vuln_copy = jQuery.extend({}, vuln);
|
||||
vuln_copy['index'] = VulnerabilityService.LEVELS[vuln['Priority']]['index'];
|
||||
$scope.vulnerabilities.push(vuln_copy);
|
||||
if (resp.data && resp.data.Layer && resp.data.Layer.Features) {
|
||||
resp.data.Layer.Features.forEach(function(feature) {
|
||||
feature_obj = {
|
||||
'name': feature.Name,
|
||||
'namespace': feature.Namespace,
|
||||
'version': feature.Version,
|
||||
'addedBy': feature.AddedBy,
|
||||
}
|
||||
feature_vulnerabilities = []
|
||||
|
||||
if (feature.Vulnerabilities) {
|
||||
feature.Vulnerabilities.forEach(function(vuln) {
|
||||
vuln_obj = {
|
||||
'name': vuln.Name,
|
||||
'namespace': vuln.Namespace,
|
||||
'description': vuln.Description,
|
||||
'link': vuln.Link,
|
||||
'severity': vuln.Severity,
|
||||
'metadata': vuln.Metadata,
|
||||
'feature': jQuery.extend({}, feature_obj),
|
||||
'fixedBy': vuln.FixedBy,
|
||||
'index': VulnerabilityService.LEVELS[vuln['Severity']]['index'],
|
||||
}
|
||||
|
||||
feature_vulnerabilities.push(vuln_obj)
|
||||
$scope.securityVulnerabilities.push(vuln_obj);
|
||||
});
|
||||
}
|
||||
|
||||
feature_obj['vulnerabilities'] = feature_vulnerabilities
|
||||
$scope.securityFeatures.push(feature_obj);
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -94,4 +108,4 @@
|
|||
}, 100);
|
||||
};
|
||||
}
|
||||
})();
|
||||
})();
|
||||
|
|
|
|||
|
|
@ -21,13 +21,13 @@
|
|||
<span class="cor-tab" tab-active="true" tab-title="Layers" tab-target="#layers">
|
||||
<i class="fa ci-layers"></i>
|
||||
</span>
|
||||
<span class="cor-tab" tab-title="Security Scan" tab-target="#security"
|
||||
tab-init="loadImageVulnerabilities()"
|
||||
<span class="cor-tab" tab-title="Security Scan" tab-target="#vulnerabilities"
|
||||
tab-init="loadImageSecurity()"
|
||||
quay-show="Features.SECURITY_SCANNER">
|
||||
<i class="fa fa-bug"></i>
|
||||
</span>
|
||||
<span class="cor-tab" tab-title="Packages" tab-target="#packages"
|
||||
tab-init="downloadPackages()"
|
||||
tab-init="loadImageSecurity()"
|
||||
quay-show="Features.SECURITY_SCANNER">
|
||||
<i class="fa ci-package"></i>
|
||||
</span>
|
||||
|
|
@ -42,51 +42,58 @@
|
|||
ng-repeat="parent in reversedHistory"></div>
|
||||
</div>
|
||||
|
||||
<!-- Security -->
|
||||
<div id="security" class="tab-pane" quay-require="['SECURITY_SCANNER']">
|
||||
<div class="resource-view" resource="vulnerabilitiesResource" error-message="'Could not load security information for image'">
|
||||
<!-- Vulnerabilities -->
|
||||
<div id="vulnerabilities" class="tab-pane" quay-require="['SECURITY_SCANNER']">
|
||||
<div class="resource-view" resource="securityResource" error-message="'Could not load security information for image'">
|
||||
<div class="col-md-9">
|
||||
<div class="filter-box floating" collection="vulnerabilities" filter-model="options.vulnFilter" filter-name="Vulnerabilities" ng-if="vulnerabilityInfo.status == 'scanned' && vulnerabilities.length"></div>
|
||||
<div class="filter-box floating" collection="securityVulnerabilities" filter-model="options.vulnFilter" filter-name="Vulnerabilities" ng-if="securityStatus == 'scanned' && securityVulnerabilities.length"></div>
|
||||
|
||||
<h3>Image Security</h3>
|
||||
<div class="empty" ng-if="vulnerabilityInfo.status == 'queued'">
|
||||
<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>
|
||||
|
||||
<div class="empty" ng-if="vulnerabilityInfo.status == 'failed'">
|
||||
<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>
|
||||
|
||||
<div class="empty" ng-if="vulnerabilityInfo.status == 'scanned' && !vulnerabilities.length">
|
||||
<div class="empty" ng-if="securityStatus == 'scanned' && !securityVulnerabilities.length">
|
||||
<div class="empty-primary-msg">This image contains no recognized security vulnerabilities</div>
|
||||
<div class="empty-secondary-msg">
|
||||
Quay currently indexes Debian, Red Hat and Ubuntu packages.
|
||||
Quay currently indexes Debian, Red Hat and Ubuntu based images.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div ng-if="vulnerabilityInfo.status == 'scanned' && vulnerabilities.length">
|
||||
<div ng-if="securityStatus == 'scanned' && securityVulnerabilities.length">
|
||||
<table class="co-table">
|
||||
<thead>
|
||||
<td style="width: 200px;">Vulnerability</td>
|
||||
<td style="width: 200px;">Priority</td>
|
||||
<td style="width: 200px;">Introduced by</td>
|
||||
<td style="width: 200px;">Fixed by</td>
|
||||
<td>Description</td>
|
||||
</thead>
|
||||
|
||||
<tr ng-repeat="vulnerability in vulnerabilities | filter:options.vulnFilter | orderBy:'index'">
|
||||
<td><a href="{{ vulnerability.Link }}" target="_blank">{{ vulnerability.ID }}</a></td>
|
||||
<tr ng-repeat="vulnerability in securityVulnerabilities | filter:options.vulnFilter | orderBy:'index'">
|
||||
<td><a href="{{ vulnerability.link }}" target="_blank">{{ vulnerability.name }}</a></td>
|
||||
<td>
|
||||
<span class="vulnerability-priority-view" priority="vulnerability.Priority"></span>
|
||||
<td>{{ vulnerability.Description }}</td>
|
||||
<span class="vulnerability-priority-view" priority="vulnerability.severity"></span>
|
||||
</td>
|
||||
<td>{{ vulnerability.feature.name }} {{ vulnerability.feature.version }}</td>
|
||||
<td>
|
||||
<span ng-if="vulnerability.fixedBy">{{ vulnerability.feature.name }} {{ vulnerability.fixedBy }}</span>
|
||||
</td>
|
||||
<td>{{ vulnerability.description }}</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<div class="empty" ng-if="(vulnerabilities | filter:options.vulnFilter).length == 0"
|
||||
<div class="empty" ng-if="(securityVulnerabilities | filter:options.vulnFilter).length == 0"
|
||||
style="margin-top: 20px;">
|
||||
<div class="empty-primary-msg">No matching vulnerabilities found</div>
|
||||
<div class="empty-secondary-msg">
|
||||
|
|
@ -110,41 +117,43 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Packages -->
|
||||
<!-- Features -->
|
||||
<div id="packages" class="tab-pane" quay-require="['SECURITY_SCANNER']">
|
||||
<div class="resource-view" resource="packagesResource" error-message="'Could not load image packages'">
|
||||
<div class="filter-box floating" collection="packages.data.Packages" filter-model="options.packageFilter" filter-name="Packages" ng-if="packages.status == 'scanned' && packages.data.Packages.length"></div>
|
||||
<div class="resource-view" resource="securityResource" error-message="'Could not load image packages'">
|
||||
<div class="filter-box floating" collection="securityFeatures" filter-model="options.packageFilter" filter-name="Features" ng-if="securityStatus == 'scanned' && securityFeatures.length"></div>
|
||||
|
||||
<h3>Image Packages</h3>
|
||||
<div class="empty" ng-if="packages.status == 'queued'">
|
||||
<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>
|
||||
|
||||
<div class="empty" ng-if="packages.status == 'failed'">
|
||||
<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>
|
||||
|
||||
<table class="co-table" ng-if="packages.status == 'scanned'">
|
||||
<table class="co-table" ng-if="securityStatus == 'scanned'">
|
||||
<thead>
|
||||
<td>Package Name</td>
|
||||
<td>Package Version</td>
|
||||
<td>OS</td>
|
||||
<td>Package OS</td>
|
||||
<td>Number of vulnerabilities</td>
|
||||
</thead>
|
||||
|
||||
<tr ng-repeat="package in packages.data.Packages | filter:options.packageFilter | orderBy:'Name'">
|
||||
<td>{{ package.Name }}</td>
|
||||
<td>{{ package.Version }}</td>
|
||||
<td>{{ package.OS }}</td>
|
||||
<tr ng-repeat="feature in securityFeatures | filter:options.packageFilter | orderBy:'Name'">
|
||||
<td>{{ feature.name }}</td>
|
||||
<td>{{ feature.version }}</td>
|
||||
<td>{{ feature.namespace }}</td>
|
||||
<td>{{ feature.vulnerabilities.length }}</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<div class="empty" ng-if="(packages.data.Packages | filter:options.packageFilter).length == 0"
|
||||
<div class="empty" ng-if="(securityFeatures | filter:options.packageFilter).length == 0"
|
||||
style="margin-top: 20px;">
|
||||
<div class="empty-primary-msg">No matching packages found</div>
|
||||
<div class="empty-secondary-msg" ng-if="options.packageFilter">
|
||||
|
|
|
|||
Reference in a new issue