Add error message if security scan not found

This change ensures that the user gets an error message (and not a blank tab) if the security scan information could not be successfully loaded

Fixes https://www.pivotaltracker.com/story/show/136072509
This commit is contained in:
Joseph Schorr 2016-12-14 00:50:06 -05:00
parent 2a6632cff4
commit b83784f1e1
7 changed files with 59 additions and 9 deletions

View file

@ -1381,9 +1381,9 @@ a:focus {
}
.empty-icon {
color: #ddd;
font-size: 46px;
margin-bottom: 20px;
color: #aaa;
font-size: 60px;
margin-bottom: 0px;
text-align: center;
}

View file

@ -8,6 +8,10 @@
margin-left: -6px;
}
.image-feature-view-element > .empty {
margin-top: 20px;
}
.image-feature-view-element .no-vulns {
color: #2FC98E;
}

View file

@ -8,6 +8,10 @@
margin-left: -6px;
}
.image-vulnerability-view-element > .empty {
margin-top: 20px;
}
.image-vulnerability-view-element .security-header {
margin-top: -4px;
margin-bottom: 30px;

View file

@ -1,6 +1,20 @@
<div class="image-feature-view-element">
<!-- Unable to load -->
<div class="empty" ng-if="securityStatus == 'error'">
<div class="empty-icon">
<i class="fa fa-times-circle"></i>
</div>
<div class="empty-primary-msg">Could not load security scan information</div>
<div class="empty-secondary-msg">
Please try again in a few minutes. If this problem persists, please contact support.
</div>
</div>
<!-- Not scanned -->
<div class="empty" ng-if="securityStatus == 'queued'">
<div class="empty-icon">
<i class="fa fa-ellipsis-h"></i>
</div>
<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.
@ -9,6 +23,9 @@
<!-- Unable to scan -->
<div class="empty" ng-if="securityStatus == 'failed'">
<div class="empty-icon">
<i class="fa fa-times-circle"></i>
</div>
<div class="empty-primary-msg">This image could not be indexed</div>
<div class="empty-secondary-msg">
Quay security scanner was unable to index this image.
@ -17,7 +34,7 @@
<!-- Scanned and has no features -->
<div ng-if="securityStatus == 'scanned' && !featuresInfo.features.length">
<div class="empty" style="margin-top: 20px;">
<div class="empty">
<div class="empty-icon">
<i class="fa ci-package"></i>
</div>

View file

@ -1,6 +1,20 @@
<div class="image-vulnerability-view-element">
<!-- Unable to load -->
<div class="empty" ng-if="securityStatus == 'error'">
<div class="empty-icon">
<i class="fa fa-times-circle"></i>
</div>
<div class="empty-primary-msg">Could not load security scan information</div>
<div class="empty-secondary-msg">
Please try again in a few minutes. If this problem persists, please contact support.
</div>
</div>
<!-- Not scanned -->
<div class="empty" ng-if="securityStatus == 'queued'">
<div class="empty-icon">
<i class="fa fa-ellipsis-h"></i>
</div>
<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.
@ -9,6 +23,9 @@
<!-- Unable to scan -->
<div class="empty" ng-if="securityStatus == 'failed'">
<div class="empty-icon">
<i class="fa fa-times-circle"></i>
</div>
<div class="empty-primary-msg">This image could not be indexed</div>
<div class="empty-secondary-msg">
Quay security scanner was unable to index this image.
@ -17,7 +34,7 @@
<!-- Scanned and has no features -->
<div ng-if="securityStatus == 'scanned' && !vulnerabilitiesInfo.features.length">
<div class="empty" style="margin-top: 20px;">
<div class="empty">
<div class="empty-icon">
<i class="fa fa-bug"></i>
</div>

View file

@ -21,6 +21,7 @@ angular.module('quay').directive('imageFeatureView', function () {
};
$scope.TableService = TableService;
$scope.loading = false;
var buildOrderedFeatures = function() {
if (!$scope.featuresInfo) {
@ -64,17 +65,20 @@ angular.module('quay').directive('imageFeatureView', function () {
};
var loadImageVulnerabilities = function() {
if ($scope.securityResource) {
if ($scope.loading) {
return;
}
$scope.securityResource = VulnerabilityService.loadImageVulnerabilitiesAsResource($scope.repository, $scope.image.id, function(resp) {
$scope.loading = true;
VulnerabilityService.loadImageVulnerabilities($scope.repository, $scope.image.id, function(resp) {
$scope.securityStatus = resp.status;
$scope.featuresInfo = VulnerabilityService.buildFeaturesInfo($scope.image, resp);
buildOrderedFeatures();
buildChart();
return resp;
}, function() {
$scope.securityStatus = 'error';
});
};

View file

@ -22,6 +22,7 @@ angular.module('quay').directive('imageVulnerabilityView', function () {
};
$scope.TableService = TableService;
$scope.loading = false;
$scope.toggleDetails = function(vuln) {
vuln.expanded = !vuln.expanded;
@ -100,17 +101,20 @@ angular.module('quay').directive('imageVulnerabilityView', function () {
};
var loadImageVulnerabilities = function() {
if ($scope.securityResource) {
if ($scope.loading) {
return;
}
$scope.securityResource = VulnerabilityService.loadImageVulnerabilitiesAsResource($scope.repository, $scope.image.id, function(resp) {
$scope.loading = true;
VulnerabilityService.loadImageVulnerabilities($scope.repository, $scope.image.id, function(resp) {
$scope.securityStatus = resp.status;
$scope.vulnerabilitiesInfo = VulnerabilityService.buildVulnerabilitiesInfo($scope.image, resp);
buildOrderedVulnerabilities();
buildChart();
return resp;
}, function() {
$scope.securityStatus = 'error';
});
};