From 685bdf6814a5f8089213bb749b459cd2b515dec6 Mon Sep 17 00:00:00 2001
From: Joseph Schorr <josephschorr@users.noreply.github.com>
Date: Wed, 15 Mar 2017 17:14:59 -0400
Subject: [PATCH] Change security scanner column to be more informative

---
 .../directives/repo-view/repo-panel-tags.css  | 14 +++++++----
 .../directives/repo-view/repo-panel-tags.html | 25 +++++++++++--------
 .../vulnerability-priority-view.html          |  2 +-
 .../directives/repo-view/repo-panel-tags.js   |  1 +
 .../directives/ui/image-vulnerability-view.js |  4 +--
 .../ui/vulnerability-priority-view.js         |  3 ++-
 6 files changed, 29 insertions(+), 20 deletions(-)

diff --git a/static/css/directives/repo-view/repo-panel-tags.css b/static/css/directives/repo-view/repo-panel-tags.css
index 7fcda37d5..455ab94fa 100644
--- a/static/css/directives/repo-view/repo-panel-tags.css
+++ b/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 {
-  color: ablack;
+.repo-panel-tags-element .security-scan-col .has-vulns .dot {
+  margin-left: 2px;
+  margin-right: 2px;
+  font-size: 150%;
+  line-height: 100%;
+  vertical-align: middle;
+  color: #aaa;
 }
 
 .repo-panel-tags-element .other-vulns {
diff --git a/static/directives/repo-view/repo-panel-tags.html b/static/directives/repo-view/repo-panel-tags.html
index 7320787e0..491314149 100644
--- a/static/directives/repo-view/repo-panel-tags.html
+++ b/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">
-                {{ getTagVulnerabilities(tag).featuresInfo.brokenFeaturesCount }} vulnerable package<span ng-if="getTagVulnerabilities(tag).featuresInfo.brokenFeaturesCount != 1">s</span>
+                <span class="highest-vuln">
+                  <span class="vulnerability-priority-view" hide-icon="true" priority="getTagVulnerabilities(tag).highestVulnerability.Priority">
+                    {{ getTagVulnerabilities(tag).highestVulnerability.Count }}
+                  </span>
                 </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>
+              </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>
diff --git a/static/directives/vulnerability-priority-view.html b/static/directives/vulnerability-priority-view.html
index a26a02ced..70e825d5d 100644
--- a/static/directives/vulnerability-priority-view.html
+++ b/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>
diff --git a/static/js/directives/repo-view/repo-panel-tags.js b/static/js/directives/repo-view/repo-panel-tags.js
index 4fca00844..159a61d9a 100644
--- a/static/js/directives/repo-view/repo-panel-tags.js
+++ b/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;
diff --git a/static/js/directives/ui/image-vulnerability-view.js b/static/js/directives/ui/image-vulnerability-view.js
index ca6f792aa..c8b693aa2 100644
--- a/static/js/directives/ui/image-vulnerability-view.js
+++ b/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,
       };
diff --git a/static/js/directives/ui/vulnerability-priority-view.js b/static/js/directives/ui/vulnerability-priority-view.js
index 38e1bc0b1..27e310f70 100644
--- a/static/js/directives/ui/vulnerability-priority-view.js
+++ b/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 = '';