New Quay Sec UI and fix some small bugs

Fixes #855

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

@@ -81,17 +81,17 @@
           style="min-width: 120px;">
         <a href="javascript:void(0)" ng-click="orderBy('last_modified_datetime')">Last Modified</a>
       </td>
+      <td class="hidden-xs"
+          ng-class="tablePredicateClass('security_scanned', options.predicate, options.reverse)"
+          style="min-width: 120px;"
+          quay-require="['SECURITY_SCANNER']">
+          Security Scan
+      </td>
       <td class="hidden-xs"
           ng-class="tablePredicateClass('size', options.predicate, options.reverse)"
           style="min-width: 62px;">
         <a href="javascript:void(0)" ng-click="orderBy('size')">Size</a>
       </td>
-      <td ng-class="tablePredicateClass('vuln_level', options.predicate, options.reverse)"
-          style="width: 60px;">
-        <a href="javascript:void(0)" ng-click="orderBy('vuln_level')">
-          <i class="fa fa-flag"></i>
-        </a>
-      </td>
       <td class="hidden-xs"
           ng-class="tablePredicateClass('image_id', options.predicate, options.reverse)"
           colspan="{{ imageTracks.length + 1 }}"
@@ -113,43 +113,51 @@
         <span am-time-ago="tag.last_modified" bo-if="tag.last_modified"></span>
         <span bo-if="!tag.last_modified">Unknown</span>
       </td>
-      <td class="hidden-xs" bo-text="tag.size | bytes"></td>
-      <td>
+      <td quay-require="['SECURITY_SCANNER']" class="security-scan-col">
         <span class="cor-loader-inline" ng-if="getTagVulnerabilities(tag).loading"></span>
         <span ng-if="!getTagVulnerabilities(tag).loading">
-          <i class="fa fa-flag-o" ng-if="!getTagVulnerabilities(tag).indexed"
-             data-title="Image is currently being checked for vulnerabilities"
-             bs-tooltip>
-          </i>
-          <i class="fa fa-flag None"
-             ng-if="getTagVulnerabilities(tag).indexed && !getTagVulnerabilities(tag).hasVulnerabilities"
-             data-title="Image has no vulnerabilities"
-             bs-tooltip>
-          </i>
-          <div class="dropdown vuln-dropdown" style="text-align: left;"
-               ng-if="getTagVulnerabilities(tag).indexed && getTagVulnerabilities(tag).hasVulnerabilities">
-            <i class="fa fa-flag"
-               data-title="Image has vulnerabilities"
-               data-toggle="dropdown"
-               ng-class="getTagVulnerabilities(tag).highestVulnerability.Priority"
-               bs-tooltip>
-            </i>
-            <ul class="dropdown-menu pull-right">
-              <li ng-repeat="vuln in getTagVulnerabilities(tag).vulnerabilities">
-                <a href="{{ vuln.Link }}" target="_new">
-                  <div class="vuln-name">
-                    <i class="fa fa-flag" bo-class="vuln.Priority"></i>
-                    {{ vuln.ID }}
-                  </div>
-                  <div class="vuln-description">
-                    {{ vuln.Description }}
-                  </div>
-                </a>
-              </li>
-            </ul>
-          </div>
+          <!-- Scanning -->
+          <span class="scanning" ng-if="!getTagVulnerabilities(tag).security_indexed"
+                data-title="The image for this tag is queued to be scanned for vulnerabilities"
+                bs-tooltip>Queued for scan</span>
+
+          <!-- No Vulns -->
+          <span class="no-vulns"
+                ng-if="getTagVulnerabilities(tag).security_indexed && !getTagVulnerabilities(tag).hasVulnerabilities"
+                data-title="The image for this tag has no vulnerabilities as found in our database"
+                bs-tooltip
+                bindonce>
+            <a bo-href-i="/repository/{{ repository.namespace }}/{{ repository.name }}/image/{{ tag.image_id }}?tab=security">
+              <i class="fa fa-check-circle"></i>
+              Passed
+            </a>
+          </span>
+
+          <!-- Vulns -->
+          <span ng-if="getTagVulnerabilities(tag).security_indexed && getTagVulnerabilities(tag).hasVulnerabilities"
+                ng-class="getTagVulnerabilities(tag).highestVulnerability.Priority"
+                class="has-vulns" bindonce>
+              <a class="vuln-link" bo-href-i="/repository/{{ repository.namespace }}/{{ repository.name }}/image/{{ tag.image_id }}?tab=security"
+                data-title="The image for this tag has {{ getTagVulnerabilities(tag).highestVulnerability.Count }} {{ getTagVulnerabilities(tag).highestVulnerability.Priority }} level vulnerabilities"
+                bs-tooltip>
+              <span class="highest-vuln">
+                <span class="vulnerability-priority-view" priority="getTagVulnerabilities(tag).highestVulnerability.Priority">
+                  {{ getTagVulnerabilities(tag).highestVulnerability.Count }}
+                </span>
+              </span>
+
+              <span ng-if="getTagVulnerabilities(tag).vulnerabilities.length - getTagVulnerabilities(tag).highestVulnerability.Count > 0"
+                    class="other-vulns">
+              + {{ getTagVulnerabilities(tag).vulnerabilities.length - getTagVulnerabilities(tag).highestVulnerability.Count }} others
+              </span>
+            </a>
+            <a bo-href-i="/repository/{{ repository.namespace }}/{{ repository.name }}/image/{{ tag.image_id }}?tab=security" style="display: inline-block; margin-left: 6px;">
+              More Info
+            </a>
+          </span>
         </span>
       </td>
+      <td class="hidden-xs" bo-text="tag.size | bytes"></td>
       <td class="hidden-xs image-id-col">
         <span class="image-link" repository="repository" image-id="tag.image_id"></span>
       </td>

static/directives/vulnerability-priority-view.html

@@ -0,0 +1,5 @@
+<span class="vulnerability-priority-view-element" ng-class="priority">
+  <i class="fa fa-exclamation-triangle"></i>
+  <span ng-transclude/>
+  {{ priority }}
+</span>