quay/static/partials/image-view.html

<div class="resource-view image-view"
     resources="[repositoryResource, imageResource]"
     error-message="'Image not found'">
  <div class="page-content">
    <div class="cor-title">
      <span class="cor-title-link">
        <a class="back-link" href="/repository/{{ repository.namespace }}/{{ repository.name }}?tab=tags">
          <i class="fa fa-hdd-o" style="margin-right: 4px"></i>
          {{ repository.namespace }}/{{ repository.name }}
        </a>
      </span>
      <span class="cor-title-content">
        <i class="fa fa-archive fa-lg" style="margin-right: 10px"></i>
        {{ image.id.substr(0, 12) }}
      </span>
    </div>


    <div class="cor-tab-panel">
      <div class="cor-tabs">
        <span class="cor-tab" tab-active="true" tab-title="Layers" tab-target="#layers">
          <i class="fa ci-layers"></i>
        </span>
        <span class="cor-tab" tab-title="Security Scan" tab-target="#vulnerabilities"
              tab-init="loadImageSecurity()"
              quay-show="Features.SECURITY_SCANNER">
          <i class="fa fa-bug"></i>
        </span>
        <span class="cor-tab" tab-title="Packages" tab-target="#packages"
              tab-init="loadImageSecurity()"
              quay-show="Features.SECURITY_SCANNER">
          <i class="fa ci-package"></i>
        </span>
      </div> <!-- /cor-tabs -->

      <div class="cor-tab-content">
        <!-- Layers -->
        <div id="layers" class="tab-pane active">
          <h3>Image Layers</h3>
          <div class="image-view-layer" repository="repository" image="image" images="image.history"></div>
          <div class="image-view-layer" repository="repository" image="parent" images="image.history"
               ng-repeat="parent in reversedHistory"></div>
        </div>

        <!-- Vulnerabilities -->
        <div id="vulnerabilities" class="tab-pane" quay-require="['SECURITY_SCANNER']">
          <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 style="width: 200px;">Vulnerability</td>
                    <td style="width: 200px;">Priority</td>
                    <td style="width: 200px;">Introduced by</td>
                    <td style="width: 200px;">Fixed 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>
                      <span class="vulnerability-priority-view" priority="vulnerability.severity"></span>
                    </td>
                    <td>{{ vulnerability.feature.name }} {{ vulnerability.feature.version }}</td>
                    <td>
                      <span ng-if="vulnerability.fixedBy">{{ vulnerability.feature.name }} {{ vulnerability.fixedBy }}</span>
                    </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>

        <!-- Features -->
        <div id="packages" class="tab-pane" quay-require="['SECURITY_SCANNER']">
          <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>
                <td>Number of vulnerabilities</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>
                <td>{{ feature.vulnerabilities.length }}</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>
    </div>
  </div>
</div>