Merge pull request #2235 from coreos-inc/clair-load-error-message

Add error message if security scan not found

static/css/core-ui.css

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

static/css/directives/ui/image-feature-view.css

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

static/css/directives/ui/image-vulnerability-view.css

@@ -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;

static/directives/image-feature-view.html

@@ -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>

static/directives/image-vulnerability-view.html

@@ -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>

static/js/directives/ui/image-feature-view.js

@@ -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';
         });
       };
 

static/js/directives/ui/image-vulnerability-view.js

@@ -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';
         });
       };