Merge pull request #1261 from coreos-inc/new_clair_ui_exp

Add experiment to hide the new Clair UI

static/directives/old-image-security-view.html

@@ -0,0 +1,116 @@
+<div class="old-image-security-view-element">
+  <!-- Vulnerabilities -->
+  <div ng-show="view == 'vulnerabilities'">
+    <div class="resource-view" resource="securityResource" error-message="'Could not load security information for image'">
+        <div class="col-md-9">
+          <div class="filter-box floating" collection="securityVulnerabilities" filter-model="options.vulnFilter" filter-name="Vulnerabilities" ng-if="securityStatus == 'scanned' && securityVulnerabilities.length"></div>
+
+          <h3>Image Security</h3>
+          <div class="empty" ng-if="securityStatus == 'queued'">
+            <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.
+            </div>
+          </div>
+
+          <div class="empty" ng-if="securityStatus == 'failed'">
+            <div class="empty-primary-msg">This image could not be indexed</div>
+            <div class="empty-secondary-msg">
+              Our security scanner was unable to index this image.
+            </div>
+          </div>
+
+          <div class="empty" ng-if="securityStatus == 'scanned' && !securityVulnerabilities.length">
+            <div class="empty-primary-msg">This image contains no recognized security vulnerabilities</div>
+            <div class="empty-secondary-msg">
+              Quay currently indexes Debian, Red Hat and Ubuntu based images.
+            </div>
+          </div>
+
+          <div ng-if="securityStatus == 'scanned' && securityVulnerabilities.length">
+            <table class="co-table">
+              <thead>
+                <td>Vulnerability</td>
+                <td>Priority</td>
+                <td>Introduced by</td>
+                <td>Description</td>
+              </thead>
+
+              <tr ng-repeat="vulnerability in securityVulnerabilities | filter:options.vulnFilter | orderBy:'index'">
+                <td><a href="{{ vulnerability.link }}" target="_blank">{{ vulnerability.name }}</a></td>
+                <td style="white-space: nowrap;">
+                  <span class="vulnerability-priority-view" priority="vulnerability.severity"></span>
+                </td>
+                <td style="white-space: nowrap;">{{ vulnerability.feature.name }} {{ vulnerability.feature.version }}</td>
+                <td>{{ vulnerability.description }}</td>
+              </tr>
+            </table>
+
+            <div class="empty" ng-if="(securityVulnerabilities | filter:options.vulnFilter).length == 0"
+                 style="margin-top: 20px;">
+              <div class="empty-primary-msg">No matching vulnerabilities found</div>
+              <div class="empty-secondary-msg">
+                Please adjust your filter above.
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="level-col col-md-3 hidden-sm hidden-xs">
+          <h4>Priority Guide</h4>
+          <ul class="levels">
+            <li ng-repeat="level in VulnerabilityLevels | orderBy: 'index'">
+              <div class="vulnerability-priority-view" priority="level.title"></div>
+              <div class="description">
+                {{ level.description }}
+              </div>
+            </li>
+          </ul>
+        </div>
+      </div>
+  </div>
+
+  <!-- Packages -->
+  <div ng-show="view == 'packages'">
+     <div class="resource-view" resource="securityResource" error-message="'Could not load image packages'">
+        <div class="filter-box floating" collection="securityFeatures" filter-model="options.packageFilter" filter-name="Features" ng-if="securityStatus == 'scanned' && securityFeatures.length"></div>
+
+        <h3>Image Packages</h3>
+        <div class="empty" ng-if="securityStatus == 'queued'">
+          <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.
+          </div>
+        </div>
+
+        <div class="empty" ng-if="securityStatus == 'failed'">
+          <div class="empty-primary-msg">This image could not be indexed</div>
+          <div class="empty-secondary-msg">
+            Our security scanner was unable to index this image.
+          </div>
+        </div>
+
+        <table class="co-table" ng-if="securityStatus == 'scanned'">
+          <thead>
+            <td>Package Name</td>
+            <td>Package Version</td>
+            <td>Package OS</td>
+          </thead>
+
+          <tr ng-repeat="feature in securityFeatures | filter:options.packageFilter | orderBy:'name'">
+            <td>{{ feature.name }}</td>
+            <td>{{ feature.version }}</td>
+            <td>{{ feature.namespace }}</td>
+          </tr>
+        </table>
+
+        <div class="empty" ng-if="(securityFeatures | filter:options.packageFilter).length == 0"
+               style="margin-top: 20px;">
+            <div class="empty-primary-msg">No matching packages found</div>
+            <div class="empty-secondary-msg" ng-if="options.packageFilter">
+              Please adjust your filter above.
+            </div>
+          </div>
+      </div>
+  </div>
+</div>

static/js/app.js

@@ -163,6 +163,9 @@ quayApp.config(['$routeProvider', '$locationProvider', 'pages', function($routeP
     // Confirm Invite
     .route('/confirminvite', 'confirm-invite')
 
+    // Experiments
+    .route('/__exp/newseclayout', 'exp-new-sec-layout')
+
     // Default: Redirect to the landing page
     .otherwise({redirectTo: '/'});
 }]);

static/js/directives/ui/old-image-security-view.js

@@ -0,0 +1,84 @@
+/**
+ * Old image security view until formally released.
+ */
+angular.module('quay').directive('oldImageSecurityView', function () {
+  var directiveDefinitionObject = {
+    priority: 0,
+    templateUrl: '/static/directives/old-image-security-view.html',
+    replace: false,
+    transclude: true,
+    restrict: 'C',
+    scope: {
+      'repository': '=repository',
+      'image': '=image',
+      'isEnabled': '=isEnabled',
+      'view': '@view'
+    },
+    controller: function($scope, $element, Config, ApiService, Features, VulnerabilityService, ImageMetadataService) {
+      var loadImageSecurity = function() {
+        if (!Features.SECURITY_SCANNER || $scope.securityResource) { return; }
+
+        $scope.VulnerabilityLevels = VulnerabilityService.getLevels();
+        $scope.options = {
+          'vulnFilter': '',
+          'packageFilter': ''
+        };
+
+        var params = {
+          'repository': $scope.repository.namespace + '/' + $scope.repository.name,
+          'imageid': $scope.image.id,
+          'vulnerabilities': true,
+        };
+
+        $scope.securityResource = ApiService.getRepoImageSecurityAsResource(params).get(function(resp) {
+          $scope.securityStatus = resp.status;
+          $scope.securityFeatures = [];
+          $scope.securityVulnerabilities = [];
+
+          if (resp.data && resp.data.Layer && resp.data.Layer.Features) {
+            resp.data.Layer.Features.forEach(function(feature) {
+              feature_obj = {
+                'name': feature.Name,
+                'namespace': feature.Namespace,
+                'version': feature.Version,
+                'addedBy': feature.AddedBy,
+              }
+              feature_vulnerabilities = []
+
+              if (feature.Vulnerabilities) {
+                feature.Vulnerabilities.forEach(function(vuln) {
+                  vuln_obj = {
+                    'name': vuln.Name,
+                    'namespace': vuln.Namespace,
+                    'description': vuln.Description,
+                    'link': vuln.Link,
+                    'severity': vuln.Severity,
+                    'metadata': vuln.Metadata,
+                    'feature': jQuery.extend({}, feature_obj),
+                    'fixedBy': vuln.FixedBy,
+                    'index': VulnerabilityService.LEVELS[vuln['Severity']]['index'],
+                  }
+
+                  feature_vulnerabilities.push(vuln_obj)
+                  $scope.securityVulnerabilities.push(vuln_obj);
+                });
+              }
+
+              feature_obj['vulnerabilities'] = feature_vulnerabilities
+              $scope.securityFeatures.push(feature_obj);
+            });
+          }
+
+          return resp;
+        });
+      };
+
+      $scope.$watch('isEnabled', function(isEnabled) {
+        if ($scope.isEnabled && $scope.repository && $scope.image) {
+          loadImageSecurity();
+        }
+      });
+    }
+  };
+  return directiveDefinitionObject;
+});

static/js/pages/exp-new-sec-layout.js

@@ -0,0 +1,19 @@
+(function() {
+  /**
+   * Experiment enable page: New layout
+   */
+  angular.module('quayPages').config(['pages', function(pages) {
+    pages.create('exp-new-sec-layout', 'exp-new-sec-layout.html', ExpCtrl, {
+      'newLayout': true
+    });
+  }]);
+
+  function ExpCtrl($scope, CookieService) {
+    $scope.isEnabled = CookieService.get('quay.exp-new-sec-layout') == 'true';
+
+    $scope.setEnabled = function(value) {
+      $scope.isEnabled = value;
+      CookieService.putPermanent('quay.exp-new-sec-layout', value.toString());
+    };
+  }
+}());

static/js/pages/image-view.js

@@ -10,13 +10,15 @@
     })
   }]);
 
-  function ImageViewCtrl($scope, $routeParams, $rootScope, $timeout, ApiService, ImageMetadataService, Features) {
+  function ImageViewCtrl($scope, $routeParams, $rootScope, $timeout, ApiService, ImageMetadataService, Features, CookieService) {
     var namespace = $routeParams.namespace;
     var name = $routeParams.name;
     var imageid = $routeParams.image;
 
     $scope.imageSecurityCounter = 0;
     $scope.imagePackageCounter = 0;
+    $scope.newUIExperiment = CookieService.get('quay.exp-new-sec-layout') == 'true';
+
     $scope.options = {
       'vulnFilter': ''
     };

static/partials/exp-new-sec-layout.html

@@ -0,0 +1,10 @@
+<div class="page-content">
+  <div class="cor-title">
+    <span class="cor-title-link"></span>
+    <span class="cor-title-content">Experiment: New Security Scanner Layout</span>
+  </div>
+  <div class="co-main-content-panel">
+    <button class="btn btn-success" ng-if="!isEnabled" ng-click="setEnabled(true)">Enable Experiment</button>
+    <button class="btn btn-failure" ng-if="isEnabled" ng-click="setEnabled(false)">Disable Experiment</button>
+  </div>
+</div>

static/partials/image-view.html

@@ -44,12 +44,16 @@
 
         <!-- Vulnerabilities -->
         <div id="vulnerabilities" class="tab-pane" quay-require="['SECURITY_SCANNER']">
-          <div class="image-vulnerability-view" repository="repository" image="image" is-enabled="imageSecurityCounter"></div>
+          <div class="image-vulnerability-view" repository="repository" image="image" is-enabled="imageSecurityCounter" ng-if="newUIExperiment"></div>
+
+          <div class="old-image-security-view" repository="repository" image="image" is-enabled="imageSecurityCounter" ng-if="!newUIExperiment" view="vulnerabilities"></div>
         </div>
 
         <!-- Features -->
         <div id="packages" class="tab-pane" quay-require="['SECURITY_SCANNER']">
-          <div class="image-feature-view" repository="repository" image="image" is-enabled="imagePackageCounter"></div>
+          <div class="image-feature-view" repository="repository" image="image" is-enabled="imagePackageCounter" ng-if="newUIExperiment"></div>
+
+          <div class="old-image-security-view" repository="repository" image="image" is-enabled="imagePackageCounter" ng-if="!newUIExperiment" view="packages"></div>
         </div>
      </div>
     </div>