quay/static/partials/repo-view.html

<div id="tagContextMenu" class="dropdown clearfix" tabindex="-1">
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
    <li><a tabindex="-1" href="javascript:void(0)" ng-click="askDeleteTag(currentMenuTag)">Delete Tag</a></li>
  </ul>
</div>

<div class="resource-view" resource="repository" error-message="'No Repository Found'">
  <div class="container-fluid repo repo-view">
    <!-- Repo Header -->
    <div class="header">
      <h3>
        <span class="repo-circle no-background" repo="repo"></span>
        <span class="repo-breadcrumb" repo="repo"></span>
      </h3>

      <div class="repo-controls">
        <!-- Builds -->
        <div class="dropdown" data-placement="top" style="display: inline-block"
             bs-tooltip=""
             data-title="{{ runningBuilds.length ? 'Dockerfile Builds Running: ' + (runningBuilds.length) : 'Dockerfile Build' }}"
             quay-show="Features.BUILD_SUPPORT && (repo.can_write || buildHistory.length)">
          <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            <i class="fa fa-tasks fa-lg"></i>
            <span class="count" ng-class="runningBuilds.length ? 'visible' : ''"><span>{{ runningBuilds.length ? runningBuilds.length : '' }}</span></span>
            <b class="caret"></b>
          </button>
          <ul class="dropdown-menu">
            <li ng-show="repo.can_write"><a href="{{ '/repository/' + repo.namespace + '/' + repo.name + '/build' }}">
                <i class="fa fa-tasks"></i>Dockerfile Build History</a>
            </li>
            <li ng-show="repo.can_write">
              <a href="javascript:void(0)" ng-click="showNewBuildDialog()">
                <i class="fa fa-plus" style="margin-left: 1px; margin-right: 8px;"></i>New Dockerfile Build
              </a>
            </li>
            <li ng-show="repo.can_admin">
              <a href="/repository/{{ repo.namespace }}/{{ repo.name }}/admin?tab=trigger">
                <i class="fa fa-bolt" style="margin-left: 3px; margin-right: 10px;"></i>Build Triggers
              </a>
            </li>
            <li role="presentation" class="divider" ng-show="buildHistory && repo.can_write"></li>
            <li role="presentation" class="dropdown-header" ng-show="buildHistory.length">Recent Builds</li>
            <li ng-repeat="buildInfo in buildHistory">
              <div class="build-info" ng-class="repo.can_write ? 'clickable' : ''" ng-click="repo.can_write && showBuild(buildInfo)">
                <span class="build-status" build="buildInfo"></span>
              </div>
            </li>
          </ul>
        </div>

        <!-- Admin -->
        <a id="admin-cog" href="{{ '/repository/' + repo.namespace + '/' + repo.name + '/admin' }}"
           ng-show="repo.can_admin">
          <button class="btn btn-default" data-title="Repository Settings" bs-tooltip="tooltip" data-placement="top">
            <i class="fa fa-cog fa-lg"></i></button></a>

        <!-- Pull Command -->
        <span class="pull-command visible-md-inline">
          <div class="pull-container" ng-show="currentPullCommand">
            <button class="pull-selector dropdown-toggle" data-toggle="dropdown">
              <i class="fa" ng-class="currentPullCommand.icon"></i>
              {{ currentPullCommand.shortTitle }}
              <b class="caret"></b>
            </button>
            <ul class="dropdown-menu">
              <li ng-repeat="pullCommand in pullCommands">
                <a href="javascript:void(0)" ng-click="setCurrentPullCommand(pullCommand)"><i class="fa" ng-class="pullCommand.icon"></i>
                  {{ pullCommand.title }}
                  <sup ng-if="pullCommand.experimental">Experimental</sup>
                </a>
              </li>
            </ul>
            <div class="copy-box" hovering-message="true" value="currentPullCommand.command"></div>
          </div>
        </span>
      </div>
    </div>

    <!-- Description -->
    <div class="description markdown-input" content="repo.description" can-write="repo.can_write"
         content-changed="updateForDescription" field-title="'repository description'"></div>

    <!-- Empty messages -->
    <div ng-if="!currentTag.image_id && !currentImage">
      <!-- !building && !pushing -->
      <div class="repo-content" ng-show="!repo.is_building && !isPushing(images)">
        <div class="empty-message">
          This repository is empty
        </div>

        <div class="empty-description" ng-show="repo.can_write">
          <div class="panel-default">
            <div class="panel-heading">How to push a new image to this repository:</div>
            <div class="panel-body">
              First login to the registry (if you have not done so already):
              <pre class="command">sudo docker login {{ Config.getDomain() }}</pre>

              Tag an image to this repository:
              <pre class="command">sudo docker tag <i>0u123imageidgoeshere</i> {{ Config.getDomain() }}/{{repo.namespace}}/{{repo.name}}</pre>

              Push the image to this repository:
              <pre class="command">sudo docker push {{ Config.getDomain() }}/{{repo.namespace}}/{{repo.name}}</pre>
            </div>
          </div>
        </div>
      </div>

      <!-- building -->
      <div class="repo-content" ng-show="repo.is_building">
        <div class="empty-message">
          A build is currently processing. If this takes longer than an hour, please <a href="/contact">contact us</a>
        </div>
      </div>

      <!-- pushing -->
      <div class="repo-content" ng-show="!repo.is_building && isPushing(images)">
        <div class="empty-message">
          A push to this repository is in progress.
        </div>
      </div>
    </div>

    <!-- Content view -->
    <div class="repo-content" ng-show="currentTag.image_id || currentImage">
      <!-- Image History -->
      <div id="image-history">
        <div class="row">
          <!-- Tree View container -->
          <div  class="col-md-8">
            <div class="panel panel-default">
              <!-- Image history tree -->
              <div class="resource-view" resource="imageHistory">
                <div id="image-history-container" onresize="tree.notifyResized()"></div>
              </div>
            </div>
          </div>

          <!-- Side Panel -->
          <div class="col-md-4">
            <div id="side-panel" class="panel panel-default">
              <div class="panel-heading">
                <!-- Dropdown -->
                <div id="side-panel-dropdown" class="tag-dropdown dropdown" data-placement="top">
                  <i class="fa fa-tag current-context-icon" ng-show="currentTag"></i>
                  <i class="fa fa-archive current-context-icon" ng-show="!currentTag"></i>
                  <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">
                    <span class="current-context">
                      {{currentTag ? currentTag.name : currentImage.id.substr(0, 12)}}
                    </span>
                    <b class="caret"></b></a>
                  <ul class="dropdown-menu">
                    <li ng-repeat="tag in repo.tags">
                      <a href="javascript:void(0)" ng-click="setTag(tag.name, true)">
                        <i class="fa fa-tag"></i>{{tag.name}}
                      </a>
                    </li>
                    <li class="divider"></li>
                    <li ng-repeat="image in imageHistory.value">
                      <a href="javascript:void(0)" ng-click="setImage(image.id, true)">
                        {{image.id.substr(0, 12)}}
                      </a>
                    </li>
                  </ul>
                </div>
                <span class="right-tag-controls">
                  <i class="fa fa-tag" data-title="Tags" bs-tooltip="title">
                    <span class="tag-count">{{getTagCount(repo)}}</span>
                  </i>
                  <i class="fa fa-archive" data-title="Images" bs-tooltip="title">
                    <span class="tag-count">{{imageHistory.value.length}}</span>
                  </i>
                </span>
              </div>

              <div class="panel-body">
                <!-- Current Tag -->
                <div id="current-tag" ng-show="currentTag">
                  <dl class="dl-normal">
                    <dt>Last Modified</dt>
                    <dd ng-if="!findImageForTag(currentTag, images)">
                      <span class="quay-spinner"></span>
                    </dd>

                    <dd am-time-ago="parseDate(findImageForTag(currentTag, images).created)"
                        ng-if="findImageForTag(currentTag, images)">
                    </dd>

                    <dt>Total Compressed Size</dt>
                    <dd><span class="context-tooltip"
                              data-title="The amount of data sent between Docker and the registry when pushing/pulling"
                              bs-tooltip="tooltip.title" data-container="body">{{ getTotalSize(currentTag) | bytes }}</span>
                    </dd>
                  </dl>

                  <div class="tag-image-sizes">
                    <div class="tag-image-size" ng-repeat="image in getImagesForTagBySize(currentTag) | limitTo: 10">
                      <span class="size-limiter">
                        <span class="size-bar" style="{{ 'width:' + (image.size / getTotalSize(currentTag)) * 100 + '%' }}"
                              bs-tooltip="" data-title="{{ image.size | bytes }}"></span>
                      </span>
                      <span class="size-title">
                        <a class="image-size-link" href="javascript:void(0)" ng-click="setImage(image.id, true)"
                           data-image="{{ image.id.substr(0, 12) }}">
                          {{ image.id.substr(0, 12) }}
                        </a>
                      </span>
                    </div>
                  </div>

                  <div class="control-bar" ng-show="repo.can_admin">
                    <button class="btn btn-default" ng-click="askDeleteTag(currentTag.name)">
                      Delete Tag
                    </button>
                  </div>
                </div>

                <!-- Current Image -->
                <div id="current-image" ng-show="currentImage && !currentTag">
                  <div class="image-comment" ng-if="currentImage.comment">
                    <blockquote style="margin-top: 10px;">
                      <span class="markdown-view" content="currentImage.comment"></span>
                    </blockquote>
                  </div>

                  <div class="image-section">
                    <i class="fa fa-code section-icon" bs-tooltip="tooltip.title" data-title="Full Image ID"></i>
                    <span class="section-info">
                      <a class="image-link" href="{{'/repository/' + repo.namespace + '/' + repo.name + '/image/' + currentImage.id}}">{{ currentImage.id }}</a>
                    </span>
                  </div>

                  <div class="image-section">
                    <i class="fa fa-tag section-icon" bs-tooltip="tooltip.title" data-title="Current Tags"></i>
                    <span class="section-info section-info-with-dropdown">
                      <a class="label tag label-default" ng-repeat="tag in currentImage.tags"
                         href="/repository/{{ repo.namespace }}/{{ repo.name }}?tag={{ tag }}">
                        {{ tag }}
                      </a>
                      <span style="color: #ccc;" ng-if="!currentImage.tags.length">(No Tags)</span>


                      <div class="dropdown" data-placement="top" ng-if="repo.can_write || currentImage.tags">
                        <a href="javascript:void(0)" class="dropdown-button" data-toggle="dropdown" bs-tooltip="tooltip.title" data-title="Manage Tags"
                           data-container="body">
                          <b class="caret"></b>
                        </a>
                        <ul class="dropdown-menu pull-right">
                          <li ng-repeat="tag in currentImage.tags">
                            <a href="javascript:void(0)" ng-click="setTag(tag, true)">
                              <i class="fa fa-tag"></i>{{tag}}
                            </a>
                          </li>
                          <li class="divider" role="presentation" ng-if="repo.can_write && currentImage.tags"></li>
                          <li>
                            <a href="javascript:void(0)" ng-click="showAddTag(currentImage)" ng-if="repo.can_write">
                              <i class="fa fa-plus"></i>Add New Tag
                            </a>
                          </li>
                        </ul>
                      </div>
                    </span>
                  </div>

                  <div class="image-section" ng-if="currentImage.command && currentImage.command.length">
                    <i class="fa fa-terminal section-icon" bs-tooltip="tooltip.title" data-title="Image Command"></i>
                    <span class="section-info">
                      <span class="formatted-command trimmed"
                         data-html="true"
                         bs-tooltip="" data-title="{{ getTooltipCommand(currentImage) }}"
                         data-placement="top">{{ getFormattedCommand(currentImage) }}</span>
                    </span>
                  </div>

                  <div class="image-section">
                    <i class="fa fa-calendar section-icon" bs-tooltip="tooltip.title" data-title="Created"></i>
                    <span class="section-info">
                      <dd am-time-ago="parseDate(currentImage.created)"></dd>
                    </span>
                  </div>

                  <div class="image-section">
                    <i class="fa fa-cloud-upload section-icon" bs-tooltip="tooltip.title"
                       data-title="The amount of data sent between Docker and the registry when pushing/pulling"></i>
                    <span class="section-info">{{ currentImage.size | bytes }}</span>
		  </div>

                  <div class="image-section">
                    <i class="fa fa-map-marker section-icon" bs-tooltip="tooltip.title"
                       data-title="The geographic region(s) in which this image data is located"></i>
                    <span class="section-info">
		      <span class="location-view" location="location" ng-repeat="location in currentImage.locations"></span>
		    </span>
                  </div>

                  <!-- Image changes loading -->
                  <div class="resource-view" resource="currentImageChangeResource">
                    <div class="changes-container small-changes-container section-info"
                         ng-show="currentImageChanges.changed.length || currentImageChanges.added.length || currentImageChanges.removed.length">
                      <div class="changes-count-container image-section">
                        <i class="fa fa-code-fork section-icon" bs-tooltip="tooltip.title" data-title="File Changes"></i>
                        <div style="float: right; display: inline-block">
                          <span class="change-count added" ng-show="currentImageChanges.added.length > 0" data-title="Files Added"
                                bs-tooltip="tooltip.title" data-placement="top" data-container="body">
                            <i class="fa fa-plus-square"></i>
                            <b>{{currentImageChanges.added.length}}</b>
                          </span>
                          <span class="change-count removed" ng-show="currentImageChanges.removed.length > 0" data-title="Files Removed"
                                bs-tooltip="tooltip.title" data-placement="top" data-container="body">
                            <i class="fa fa-minus-square"></i>
                            <b>{{currentImageChanges.removed.length}}</b>
                          </span>
                          <span class="change-count changed" ng-show="currentImageChanges.changed.length > 0" data-title="Files Changed"
                                bs-tooltip="tooltip.title" data-placement="top" data-container="body">
                            <i class="fa fa-pencil-square"></i>
                            <b>{{currentImageChanges.changed.length}}</b>
                          </span>
                        </div>
                        <div id="collapseChanges" style="padding-top: 24px;">
                          <div class="well well-sm">
                            <div class="change added" ng-repeat="file in currentImageChanges.added | limitTo:2">
                              <i class="fa fa-plus-square"></i>
                              <span title="{{file}}">{{file}}</span>
                            </div>
                            <div class="change removed" ng-repeat="file in currentImageChanges.removed | limitTo:2">
                              <i class="fa fa-minus-square"></i>
                              <span title="{{file}}">{{file}}</span>
                            </div>
                            <div class="change changed" ng-repeat="file in currentImageChanges.changed | limitTo:2">
                              <i class="fa fa-pencil-square"></i>
                              <span title="{{file}}">{{file}}</span>
                            </div>
                          </div>
                          <div class="more-changes" ng-show="getMoreCount(currentImageChanges) > 0">
                            <a href="{{'/repository/' + repo.namespace + '/' + repo.name + '/image/' + currentImage.id}}">
                              And {{getMoreCount(currentImageChanges)}} more...
                            </a>
                          </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="dockerfile-build-dialog" show-now="buildDialogShowCounter" repository="repo"
     build-started="handleBuildStarted(build)">
</div>

<!-- Modal message dialog -->
<div class="modal fade" id="addTagModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true" ng-show="!creatingTag">&times;</button>
        <h4 class="modal-title">{{ isAnotherImageTag(toTagImage, tagToCreate) ? 'Move' : 'Add' }} Tag to Image {{ toTagImage.id.substr(0, 12) }}</h4>
      </div>
      <form name="addTagForm" ng-submit="createOrMoveTag(toTagImage, tagToCreate, addTagForm.$invalid); addTagForm.$setPristine(); tagToCreate=''">
        <div class="modal-body">
          <input type="text" class="form-control" id="tagName" placeholder="Enter tag name"
                 ng-model="tagToCreate" ng-pattern="/^([a-z0-9_\.-]){3,30}$/" required
                 ng-disabled="creatingTag" autofocus>
          <div style="margin: 10px; margin-top: 20px;" ng-show="isOwnedTag(toTagImage, tagToCreate)">
            Note: <span class="label tag label-default">{{ tagToCreate }}</span> is already applied to this image.
          </div>
          <div style="margin: 10px; margin-top: 20px;" ng-show="isAnotherImageTag(toTagImage, tagToCreate)">
            Note: <span class="label tag label-default">{{ tagToCreate }}</span> is already applied to another image. This will <b>move</b> the tag.
          </div>
          <div class="tag-specific-images-view" tag="tagToCreate" repository="repo" images="images" image-cutoff="toTagImage"
               style="margin: 10px; margin-top: 20px; margin-bottom: -10px;" ng-show="isAnotherImageTag(toTagImage, tagToCreate)">
            This will also delete any unattach images and delete the following images:
          </div>
        </div>
        <div class="modal-footer">
          <button type="submit" class="btn btn-primary"
                  ng-disabled="!tagToCreate || addTagForm.$invalid || isOwnedTag(toTagImage, tagToCreate)"
                  ng-class="isAnotherImageTag(toTagImage, tagToCreate) ? 'btn-warning' : 'btn-primary'" ng-show="!creatingTag">
            {{ isAnotherImageTag(toTagImage, tagToCreate) ? 'Move Tag' : 'Create Tag' }}
          </button>
          <button class="btn btn-default" data-dismiss="modal" ng-show="!creatingTag">Cancel</button>
          <div class="quay-spinner" ng-show="creatingTag"></div>
        </div>
      </form>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<!-- Modal message dialog -->
<div class="modal fade" id="confirmdeleteTagModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Delete tag
          <span class="label tag" ng-class="tagToDelete == currentTag.name ? 'label-success' : 'label-default'">
            {{ tagToDelete  }}
          </span>?
        </h4>
      </div>
      <div class="modal-body" ng-show="deletingTag">
        <div class="quay-spinner"></div>
      </div>
      <div class="modal-body" ng-show="!deletingTag">
        Are you sure you want to delete tag
        <span class="label tag" ng-class="tagToDelete == currentTag.name ? 'label-success' : 'label-default'">
          {{ tagToDelete  }}
        </span>?

        <div class="tag-specific-images-view" tag="tagToDelete" repository="repo" images="images" style="margin-top: 20px">
          The following images and any other images not referenced by a tag will be deleted:
        </div>
      </div>
      <div class="modal-footer" ng-show="!deletingTag">
        <button type="button" class="btn btn-primary" ng-click="deleteTag(tagToDelete)">Delete Tag</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->