quay/static/directives/image-vulnerability-view.html

<div class="image-vulnerability-view-element">
  <!-- Not scanned -->
  <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>

  <!-- Unable to scan -->
  <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>

  <!-- Scanned -->
  <div ng-if="securityStatus == 'scanned'">
    <!-- Header -->
    <div class="security-header row">
      <div class="donut-col col-md-3">
        <div id="vulnDonutChart" style="position: relative;">
          <svg style="height:250px; width:250px"></svg>
          <span class="donut-icon">
            <i class="fa fa-bug"></i>
          </span>
        </div>
      </div>
      <div class="summary-col col-md-9">
        <ul class="summary-list" ng-if="priorityBreakdown.length">
          <li class="title-item">Quay Security Scanner has detected <strong>{{ securityVulnerabilities.length }}</strong> vulnerabilities.</li>

          <li ng-repeat="priority in priorityBreakdown">
            <i class="fa fa-exclamation-triangle" ng-style="{'color': priority.color}"></i> <strong>{{ priority.value }}</strong> {{ priority.label }}-level vulnerabilities.
          </li>
        </ul>

        <div ng-if="!priorityBreakdown.length">
          <li class="title-item">Quay Security Scanner has detected no vulnerabilities in this image.</li>
        </div>
      </div>
    </div>

    <!-- Filter -->
    <span class="co-filter-box">
      <span class="filter-message" ng-if="options.vulnFilter || options.fixableVulns">
        Showing {{ orderedVulnerabilities.entries.length }} of {{ securityVulnerabilities.length }} Vulnerabilities
      </span>
      <input class="form-control" type="text" ng-model="options.vulnFilter" placeholder="Filter Vulnerabilities...">
      <div class="filter-options">
        <label><input type="checkbox" ng-model="options.fixableVulns">Only display vulnerabilities with fixes</label>
      </div>
    </span>
    <h3>Image Vulnerabilities</h3>

    <!-- Table -->
    <table class="co-table">
     <thead>
      <td class="caret-col"></td>
      <td ng-class="tablePredicateClass('name', options.predicate, options.reverse)">
        <a href="javascript:void(0)" ng-click="orderBy('name')">CVE</a>
      </td>
      <td ng-class="tablePredicateClass('score', options.predicate, options.reverse)">
        <a href="javascript:void(0)" ng-click="orderBy('score')">CVSS / Severity</a>
      </td>
      <td class="hidden-xs" ng-class="tablePredicateClass('featureName', options.predicate, options.reverse)">
        <a href="javascript:void(0)" ng-click="orderBy('featureName')">Package</a>
      </td>
      <td class="hidden-xs">Current version</td>
      <td class="hidden-xs hidden-sm">Fixed in version</td>
      </td>
      <td class="hidden-xs hidden-sm hidden-md">Introduced in image</td>
      <td class="hidden-xs options-col"></td>
     </thead>
     <tbody ng-repeat="vuln in orderedVulnerabilities.visibleEntries" bindonce>
       <tr>
        <td class="caret-col">
          <span ng-click="toggleDetails(vuln)">
            <i class="fa"
               ng-class="vuln.expanded ? 'fa-caret-down' : 'fa-caret-right'"
               data-title="View Details" bs-tooltip></i>
          </span>
         </td>
         <td class="single-col nowrap-col">
            <a href="javascript:void(0)" bo-text="vuln.name" ng-click="toggleDetails(vuln)" class="expand-link"></a>
            <a href="{{ vuln.link }}" class="external-link hidden-xs hidden-sm hidden-md" target="_blank">
              <i class="fa fa-link"></i>
            </a>
         </td>
         <td class="single-col nowrap-col">
           <span bo-if="vuln.metadata.NVD.CVSSv2.Score">
              <span class="cvss-text" bo-text="vuln.metadata.NVD.CVSSv2.Score"></span>
              <span class="cvss"><span bo-style="{'width': (vuln.metadata.NVD.CVSSv2.Score * 10) + '%', 'background-color': getCVSSColor(vuln.metadata.NVD.CVSSv2.Score)}"></span>
              </span>
           </span>
           <span bo-if="!vuln.metadata.NVD.CVSSv2.Score">
              <span class="vulnerability-priority-view" priority="vuln.severity"></span>
           </span>
         </td>
         <td class="single-col hidden-xs"><span bo-text="vuln.featureName"></span></td>
         <td class="single-col hidden-xs hidden-sm"><span bo-text="vuln.introducedInVersion"></span></td>
         <td class="single-col hidden-xs">
            <span class="empty" bo-if="!vuln.fixedInVersion">(None)</span>
            <span class="fixed-in-version" bo-if="vuln.fixedInVersion" bo-text="vuln.fixedInVersion"></span>
         </td>
         <td class="double-col image-col hidden-xs hidden-sm hidden-md">
            <span data-title="{{ vuln.imageCommand }}" data-container="body" bs-tooltip>
              <span class="dockerfile-command" command="vuln.imageCommand"></span>
            </span>
            <a href="/repository/{{ repository.namespace }}/{{ repository.name }}/image/{{ vuln.imageId }}"><i class="fa fa-archive"></i></a>
         </td>
         <td></td>
        </tr>
        <tr ng-if="vuln.expanded">
          <td class="expansion-col" colspan="8">
            <div class="visible-xs" style="margin-bottom: 20px">
              <div class="subtitle">Summary</div>
              <table>
                <tr><td>Package:</td><td><span bo-text="vuln.featureName"></span></td></tr>
                <tr><td>Introduced in version:</td><td><span bo-text="vuln.introducedInVersion"></span></td></tr>
                <tr>
                  <td>Fixed in version:</td>
                  <td>
                    <span class="empty" bo-if="!vuln.fixedInVersion">(None)</span>
                    <span class="fixed-in-version" bo-if="vuln.fixedInVersion" bo-text="vuln.fixedInVersion"></span>
                  </td>
                </tr>
                <tr>
                  <td>Introduced in Image:</td>
                  <td><span class="image-link" repository="repository" image-id="vuln.imageId"></span></td>
                </tr>
              </table>
            </div>

            <div class="vectors" bo-if="vuln.metadata.NVD.CVSSv2.Vectors">
              <div class="subtitle">Vectors</div>
              <div class="nvd-vectors-display" vectors="{{ vuln.metadata.NVD.CVSSv2.Vectors }}"></div>
            </div>

            <div class="subtitle">Description</div>
            <span class="description" bo-text="vuln.description"></span>
          </td>
        </tr>
      </tbody>
    </table>
   <div class="empty" ng-if="securityVulnerabilities.length && !orderedVulnerabilities.entries.length"
        style="margin-top: 20px;">
    <div class="empty-primary-msg">No matching vulnerabilities found.</div>
    <div class="empty-secondary-msg">Try expanding your filtering terms.</div>
   </div>
 </div>
</div>