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

<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 }}" ng-safenewtab>{{ 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>