Change security scanner column to be more informative

static/css/directives/repo-view/repo-panel-tags.css

@@ -43,7 +43,7 @@
 
 .repo-panel-tags-element .image-track-line.start {
   top: 18px;
-  height: 24px;
+  height: 25px;
   display: block;
 }
 
@@ -85,7 +85,7 @@
   cursor: pointer;
 }
 
-.repo-panel-tags-element .security-scan-col i.fa {
+.repo-panel-tags-element .security-scan-col .donut-chart {
   margin-right: 4px;
 }
 
@@ -110,7 +110,6 @@
 .repo-panel-tags-element .security-scan-col .has-vulns.Defcon1 .highest-vuln {
 }
 
-
 .repo-panel-tags-element .security-scan-col .has-vulns {
   font-size: 14px;
 }
@@ -119,8 +118,13 @@
   margin-right: 4px;
 }
 
-.repo-panel-tags-element .security-scan-col .has-vulns a {
+.repo-panel-tags-element .security-scan-col .has-vulns .dot {
-  color: ablack;
+  margin-left: 2px;
+  margin-right: 2px;
+  font-size: 150%;
+  line-height: 100%;
+  vertical-align: middle;
+  color: #aaa;
 }
 
 .repo-panel-tags-element .other-vulns {

static/directives/repo-view/repo-panel-tags.html

@@ -91,7 +91,7 @@
     </td>
     <td class="hidden-xs"
         ng-class="tablePredicateClass('security_scanned', options.predicate, options.reverse)"
-        style="width: 180px;"
+        style="width: 200px;"
         quay-require="['SECURITY_SCANNER']">
         Security Scan
     </td>
@@ -151,7 +151,7 @@
           <span class="failed-scan" ng-if="getTagVulnerabilities(tag).status == 'failed'"
                 data-title="The image for this tag could not be scanned for vulnerabilities"
                 bs-tooltip>
-            <i class="fa fa-question-circle"></i>
+            <span class="donut-chart" width="22" data="[{'index': 0, 'value': 1, 'color': '#eee'}]"></span>
             Unable to scan
           </span>
 
@@ -161,7 +161,7 @@
                 data-title="The image for this tag has an operating system or package manager unsupported by Quay Security Scanner"
                 bs-tooltip
                 bindonce>
-            <i class="fa fa-times-circle"></i>
+            <span class="donut-chart" width="22" data="[{'index': 0, 'value': 1, 'color': '#eee'}]"></span>
             Unsupported
           </span>
 
@@ -172,7 +172,7 @@
                 bs-tooltip
                 bindonce>
             <a bo-href-i="/repository/{{ repository.namespace }}/{{ repository.name }}/image/{{ tag.image_id }}?tab=vulnerabilities">
-              <i class="fa fa-check-circle"></i>
+              <span class="donut-chart" width="22" data="[{'index': 0, 'value': 1, 'color': '#2FC98E'}]"></span>
               Passed
             </a>
           </span>
@@ -186,16 +186,19 @@
                 data-title="This tag has {{ getTagVulnerabilities(tag).vulnerabilities.length }} vulnerabilities across {{ getTagVulnerabilities(tag).featuresInfo.brokenFeaturesCount }} packages"
                 bs-tooltip>
                 <!-- Donut -->
-                <span class="donut-chart" width="24" data="getTagVulnerabilities(tag).featuresInfo.severityBreakdown"></span>
+                <span class="donut-chart" width="22" data="getTagVulnerabilities(tag).vulnerabilitiesInfo.severityBreakdown"></span>
 
                 <!-- Messaging -->
-                <span ng-if="getTagVulnerabilities(tag).featuresInfo.fixableFeatureCount == 0">
+                <span class="highest-vuln">
-                {{ getTagVulnerabilities(tag).featuresInfo.brokenFeaturesCount }} vulnerable package<span ng-if="getTagVulnerabilities(tag).featuresInfo.brokenFeaturesCount != 1">s</span>
+                  <span class="vulnerability-priority-view" hide-icon="true" priority="getTagVulnerabilities(tag).highestVulnerability.Priority">
+                    {{ getTagVulnerabilities(tag).highestVulnerability.Count }}
                   </span>
-                <span ng-if="getTagVulnerabilities(tag).featuresInfo.fixableFeatureCount > 0">
-                {{ getTagVulnerabilities(tag).featuresInfo.fixableFeatureCount }} fixable package<span ng-if="getTagVulnerabilities(tag).featuresInfo.fixableFeatureCount != 1">s</span>
                 </span>
               </a>
+              <span class="dot" ng-if="getTagVulnerabilities(tag).vulnerabilitiesInfo.fixable.length">&middot;</span>
+              <a class="vuln-link" bo-href-i="/repository/{{ repository.namespace }}/{{ repository.name }}/image/{{ tag.image_id }}?tab=vulnerabilities&fixable=true" ng-if="getTagVulnerabilities(tag).vulnerabilitiesInfo.fixable.length">
+                {{ getTagVulnerabilities(tag).vulnerabilitiesInfo.fixable.length }} fixable
+              </a>
           </span>
         </span>
       </td>

static/directives/vulnerability-priority-view.html

@@ -1,5 +1,5 @@
 <span class="vulnerability-priority-view-element" ng-style="{'color': color}">
-  <i class="fa fa-exclamation-triangle"></i>
+  <i class="fa fa-exclamation-triangle" ng-show="hideIcon != 'true'"></i>
   <span ng-transclude/>
   {{ priority }}
 </span>

static/js/directives/repo-view/repo-panel-tags.js

@@ -230,6 +230,7 @@ angular.module('quay').directive('repoPanelTags', function () {
             imageData.vulnerabilities = vulnerabilities;
             imageData.highestVulnerability = highest;
             imageData.featuresInfo = VulnerabilityService.buildFeaturesInfo(null, resp);
+            imageData.vulnerabilitiesInfo = VulnerabilityService.buildVulnerabilitiesInfo(null, resp);
           }
         }, function() {
           imageData.loading = false;

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

@@ -13,10 +13,10 @@ angular.module('quay').directive('imageVulnerabilityView', function () {
       'image': '=image',
       'isEnabled': '=isEnabled'
     },
-    controller: function($scope, $element, Config, ApiService, VulnerabilityService, ViewArray, ImageMetadataService, TableService) {
+    controller: function($scope, $element, $routeParams, Config, ApiService, VulnerabilityService, ViewArray, ImageMetadataService, TableService) {
       $scope.options = {
         'filter': null,
-        'fixableVulns': false,
+        'fixableVulns': $routeParams['fixable'] == 'true',
         'predicate': 'score',
         'reverse': false,
       };

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

@@ -9,7 +9,8 @@ angular.module('quay').directive('vulnerabilityPriorityView', function () {
     transclude: true,
     restrict: 'C',
     scope: {
-      'priority': '=priority'
+      'priority': '=priority',
+      'hideIcon': '@hideIcon'
     },
     controller: function($scope, $element, VulnerabilityService) {
       $scope.color = '';