Update security scan col in repo view to use donut chart and better language

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

@@ -213,7 +213,8 @@ angular.module('quay').directive('repoPanelTags', function () {
                 highest = {
                   'Priority': vuln.Severity,
                   'Count': 1,
-                  'index': VulnerabilityService.LEVELS[vuln.Severity].index
+                  'index': VulnerabilityService.LEVELS[vuln.Severity].index,
+                  'Color': VulnerabilityService.LEVELS[vuln.Severity].color
                 }
               } else if (VulnerabilityService.LEVELS[vuln.Severity].index == highest.index) {
                 highest['Count']++;
@@ -226,6 +227,7 @@ angular.module('quay').directive('repoPanelTags', function () {
             imageData.hasVulnerabilities = !!vulnerabilities.length;
             imageData.vulnerabilities = vulnerabilities;
             imageData.highestVulnerability = highest;
+            imageData.featuresInfo = VulnerabilityService.buildFeaturesInfo(null, resp);
           }
         }, function() {
           imageData.loading = false;

static/js/directives/ui/donut-chart.js

@@ -0,0 +1,71 @@
+/**
+ * An element which displays a donut chart of data.
+ */
+angular.module('quay').directive('donutChart', function () {
+  var directiveDefinitionObject = {
+    priority: 0,
+    templateUrl: '/static/directives/donut-chart.html',
+    replace: false,
+    transclude: false,
+    restrict: 'C',
+    scope: {
+      'width': '@width',
+      'data': '=data',
+    },
+    controller: function($scope, $element) {
+      $scope.created = false;
+
+      // Based on: http://bl.ocks.org/erichoco/6694616
+      var chart = d3.select($element.find('.donut-chart-element')[0]);
+
+      var renderChart = function() {
+        if (!$scope.data || !$scope.data.length) {
+          return;
+        }
+
+        var $chart = $element.find('.donut-chart-element');
+        $chart.empty();
+
+        var width = $scope.width * 1;
+        var chart_m = width / 2 * 0.14;
+        var chart_r = width / 2 * 0.85;
+
+        var topG = chart.append('svg:svg')
+                            .attr('width', (chart_r + chart_m) * 2)
+                            .attr('height', (chart_r + chart_m) * 2)
+                            .append('svg:g')
+                                .attr('class', 'donut')
+                                .attr('transform', 'translate(' + (chart_r + chart_m) + ',' +
+                                                   (chart_r + chart_m) + ')');
+
+
+        var arc = d3.svg.arc()
+                        .innerRadius(chart_r * 0.6)
+                        .outerRadius(function(d, i) {
+                          return i == $scope.data.length - 1 ? chart_r * 1.2 : chart_r * 1;
+                        });
+
+        var pie = d3.layout.pie()
+                           .sort(null)
+                           .value(function(d) {
+                              return d.value;
+                           });
+
+        var reversed = $scope.data.slice(0).reverse();
+        var g = topG.selectAll(".arc")
+                    .data(pie(reversed))
+                    .enter().append("g")
+                      .attr("class", "arc");
+
+        g.append("path")
+            .attr("d", arc)
+            .style('stroke', '#fff')
+            .style("fill", function(d) { return d.data.color; });
+
+      };
+
+      $scope.$watch('data', renderChart);
+    }
+  };
+  return directiveDefinitionObject;
+});

static/js/services/vulnerability-service.js

@@ -279,6 +279,8 @@ angular.module('quay').factory('VulnerabilityService', ['Config', 'ApiService',
 
     return {
       'features': features,
+      'brokenFeaturesCount': features.length - totalCount,
+      'fixableFeatureCount': features.filter(function(f) { return f.fixableScore > 0 }).length,
       'severityBreakdown': severityBreakdown,
       'highestFixableScore': highestFixableScore
     }