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

<div class="image-feature-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 and has no features -->
  <div ng-if="securityStatus == 'scanned' && !securityFeatures.length">
    <div class="empty" style="margin-top: 20px;">
      <div class="empty-icon">
        <i class="fa ci-package"></i>
      </div>
      <div class="empty-primary-msg">Image is not supported by Quay Security Scanner</div>
      <div class="empty-secondary-msg">
        This image has an operating system or package manager unsupported by Quay Security Scanner.
      </div>
    </div>
  </div>

  <!-- Scanned -->
  <div ng-if="securityStatus == 'scanned' && securityFeatures.length">
    <!-- Header -->
    <div class="security-header row">
      <div class="donut-col col-md-3">
        <div id="featureDonutChart" style="position: relative;">
          <svg style="height:250px; width:250px"></svg>
          <span class="donut-icon">
            <i class="fa ci-package"></i>
          </span>
        </div>
      </div>
      <div class="summary-col col-md-9">
        <ul class="summary-list">
          <li class="title-item">Quay Security Scanner has resolved <strong>{{ securityFeatures.length }}</strong> packages.</li>
          <li ng-repeat="priority in featureBreakdown">
            <span ng-if="priority.label != 'None'">
              <i class="fa ci-package" ng-style="{'color': priority.color}"></i> <strong>{{ priority.value }}</strong> packages with {{ priority.label }}-level vulnerabilities.
            </span>
            <span ng-if="priority.label == 'None'" style="margin-top: 20px; display: inline-block;">
              <i class="fa ci-package" ng-style="{'color': priority.color}"></i> <strong>{{ priority.value }}</strong> packages with no vulnerabilities.
            </span>
          </li>
        </ul>
      </div>
    </div>

    <!-- Filter -->
    <span class="co-filter-box">
      <span class="filter-message" ng-if="options.featureFilter">
        Showing {{ orderedFeatures.entries.length }} of {{ securityFeatures.length }} packages
      </span>
      <input class="form-control" type="text" ng-model="options.featureFilter" placeholder="Filter Packages...">
    </span>
    <h3>Image Packages</h3>

    <!-- Table -->
    <table class="co-table">
     <thead>
      <td ng-class="tablePredicateClass('name', options.predicate, options.reverse)">
        <a href="javascript:void(0)" ng-click="orderBy('name')">Package Name</a>
      </td>
      <td class="hidden-xs">
        Package Version
      </td>
      <td ng-class="tablePredicateClass('score', options.predicate, options.reverse)">
        <a href="javascript:void(0)" ng-click="orderBy('score')">Vulnerabilities</a>
      </td>
      <td class="hidden-xs hidden-sm hidden-md"
          ng-class="tablePredicateClass('leftoverScore', options.predicate, options.reverse)"
          data-title="Identified vulnerabilities remaining after the package is upgraded to the latest version"
          data-container="body" bs-tooltip>
        <a href="javascript:void(0)" ng-click="orderBy('leftoverScore')">Remaining after upgrade</a>
      </td>
      <td ng-class="tablePredicateClass('fixableScore', options.predicate, options.reverse)">
        <a href="javascript:void(0)" ng-click="orderBy('fixableScore')"
           data-title="Delta of the severity of vulnerabilities in the package before->after upgrading" data-container="body" bs-tooltip>Upgrade impact</a>
      </td>
      <td class="hidden-xs hidden-sm hidden-md">
        Introduced In Image
      </td>
      <td class="hidden-xs options-col"></td>
     </thead>
     <tbody ng-repeat="feature in orderedFeatures.visibleEntries" bindonce>
       <tr>
         <td class="single-col">
          <span bo-text="feature.name"></span>
         </td>
         <td class="single-col hidden-xs">
          <span bo-text="feature.version"></span>
         </td>
         <td>
            <span class="no-vulns" bo-if="feature.vulnCount == 0">
              <i class="fa fa-check-circle"></i>None Detected
            </span>
            <span class="vuln-summary" bo-if="feature.vulnCount != 0">
              <span ng-style="{'color': feature.primarySeverity.color}">
                <i class="fa fa fa-exclamation-triangle"></i>
                {{ feature.primarySeverity.count }}
                {{ feature.primarySeverity.title }}
              </span>
              <span bo-if="feature.vulnCount - feature.primarySeverity.count > 0">
              + {{ feature.vulnCount - feature.primarySeverity.count }} additional
              </span>
            </span>
         </td>
         <td class="hidden-xs hidden-sm hidden-md">
            <span class="empty" bo-if="feature.vulnCount == 0">
              (N/A)
            </span>
            <span class="no-vulns" bo-if="feature.vulnCount != 0 && feature.leftoverBreakdown.length == 0">
                <i class="fa fa-arrow-circle-right"></i>
                All identified vulnerabilities fixed
            </span>
            <span class="vuln-summary" bo-if="feature.vulnCount != 0 && feature.leftoverBreakdown.length != 0">
              <span ng-style="{'color': feature.primaryLeftover.color}">
                <i class="fa fa-arrow-circle-right"></i>
                {{ feature.primaryLeftover.count }}
                {{ feature.primaryLeftover.title }}
              </span>
              <span bo-if="feature.leftoverCount - feature.primaryLeftover.count > 0">
              + {{ feature.leftoverCount - feature.primaryLeftover.count }} additional
              </span>
            </span>
         </td>
         <td class="impact-col">
           <span class="empty" bo-if="feature.vulnCount == 0">
             (N/A)
           </span>
           <span bo-if="feature.vulnCount > 0">
             <span class="strength-indicator" value="feature.fixableScore" maximum="highestFixableScore"
                 log-base="2"></span>
           </span>
         </td>
         <td class="double-col image-col hidden-xs hidden-sm hidden-md">
            <span data-title="{{ feature.imageCommand }}" bs-tooltip>
              <span class="dockerfile-command" command="feature.imageCommand"></span>
            </span>
            <a href="/repository/{{ repository.namespace }}/{{ repository.name }}/image/{{ feature.imageId }}"><i class="fa fa-archive"></i></a>
         </td>
         <td></td>
        </tr>
      </tbody>
    </table>
   <div class="empty" ng-if="securityFeatures.length && !orderedFeatures.entries.length"
        style="margin-top: 20px;">
    <div class="empty-primary-msg">No matching packages found.</div>
    <div class="empty-secondary-msg">Try expanding your filtering terms.</div>
   </div>
 </div>
</div>