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="Changes" tab-target="#changes"
              tab-init="downloadChanges()">
          <i class="fa fa-code-fork"></i>
        </span>
        <span class="cor-tab" tab-title="Packages" tab-target="#packages"
              tab-init="downloadPackages()">
          <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>

        <!-- Changes -->
        <div id="changes" class="tab-pane">
          <div class="resource-view" resource="changesResource" error-message="'Could not load image changes'">
            <h3>Image File Changes</h3>
            <div class="empty" ng-if="!combinedChanges.length">
              <div class="empty-primary-msg">No file changes</div>
              <div class="empty-secondary-msg">
                There were no file system changes in this image layer.
              </div>
            </div>

            <div ng-show="combinedChanges.length">
              <div id="changes-tree-container" class="changes-container"
                   onresize="tree && tree.notifyResized()"></div>
            </div>
          </div>
        </div>

        <!-- Packages -->
        <div id="packages" class="tab-pane">
          <div class="resource-view" resource="packagesResource" error-message="'Could not load image packages'">
            <h3>Image Packages</h3>
            <div class="empty" ng-if="!packages.security_indexed">
              <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="packages.security_indexed && !packages.data.InstalledPackages.length">
              <div class="empty-primary-msg">This image contains no recognized packages</div>
              <div class="empty-secondary-msg">
                Quay currently indexes Debian, Red Hat and Ubuntu packages.
              </div>
            </div>

            <table class="table" ng-if="packages.security_indexed && packages.data.InstalledPackages.length">
              <thead>
                <th>Package Name</th>
                <th>Package Version</th>
                <th>OS</th>
              </thead>

              <tr ng-repeat="package in packages.data.InstalledPackages | orderBy:'Name'">
                <td>{{ package.Name }}</td>
                <td>{{ package.Version }}</td>
                <td>{{ package.OS }}</td>
              </tr>
            </table>
          </div>
        </div>
     </div>
    </div>
  </div>
</div>