quay/static/partials/view-repo.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 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=""
             title="{{ runningBuilds.length ? 'Dockerfile Builds Running: ' + (runningBuilds.length) : 'Dockerfile Build' }}"
             ng-show="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" 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" title="Pull repository" bs-tooltip="tooltip.title">
            <div class="input-group">
              <input id="pull-text" type="text" class="form-control" value="{{ 'docker pull quay.io/' + repo.namespace + '/' + repo.name }}" readonly>
              <span id="copyClipboard" class="input-group-addon" title="Copy to Clipboard" data-clipboard-target="pull-text">
                <i class="fa fa-copy"></i>
              </span>
            </div>
          </div>
          
          <div id="clipboardCopied" class="hovering" style="display: none">
            Copied to clipboard
          </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 message -->
    <div class="repo-content" ng-show="!currentTag.image && !currentImage && !repo.is_building">
      <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 Quay.io (if you have not done so already):
            <pre class="command">sudo docker login quay.io</pre>

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

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

    </div>

    <div class="repo-content" ng-show="!currentTag.image && 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>

    <!-- Content view -->
    <div class="repo-content" ng-show="currentTag.image || currentImage">
      <!-- Image History -->
      <div id="image-history" style="max-height: 10px;">
        <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" ng-show="currentTag"></i>
                  <i class="fa fa-archive" ng-show="!currentTag"></i>
                  <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">{{currentTag ? currentTag.name : currentImage.id.substr(0, 12)}} <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" title="Tags" bs-tooltip="title">
                    <span class="tag-count">{{getTagCount(repo)}}</span>
                  </i>
                  <i class="fa fa-archive" 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 am-time-ago="parseDate(currentTag.image.created)"></dd>
                    <dt>Total Compressed Size</dt>
                    <dd><span class="context-tooltip"
                              title="The amount of data sent between Docker and Quay.io 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="" title="{{ image.size | bytes }}"></span>
                      </span>
                      <span class="size-title"><a href="javascript:void(0)" ng-click="setImage(image.id, true)">{{ 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 ng-show="currentImage.comment">
                    <blockquote style="margin-top: 10px;">
                      <span class="markdown-view" content="currentImage.comment"></span>
                    </blockquote>
                  </div>

                  <dl class="dl-normal">
                    <dt>Created</dt>
                    <dd am-time-ago="parseDate(currentImage.created)"></dd>
                    <dt>Image ID</dt>
                    <dd><a href="{{'/repository/' + repo.namespace + '/' + repo.name + '/image/' + currentImage.id}}">{{ currentImage.id }}</a></dd>
                    <dt>Compressed Image Size</dt>
                    <dd><span class="context-tooltip"
                              title="The amount of data sent between Docker and Quay.io when pushing/pulling"
                              bs-tooltip="tooltip.title" data-container="body">{{ currentImage.size | bytes }}</span>
                    </dd>
                    <dt ng-show="currentImage.command && currentImage.command.length">Command</dt>
                    <dd ng-show="currentImage.command && currentImage.command.length" class="codetooltipcontainer">
                      <pre class="formatted-command trimmed"
                           data-html="true"
                           bs-tooltip="" title="{{ getTooltipCommand(currentImage) }}"
                           data-placement="top">{{ getFormattedCommand(currentImage) }}</pre>
                    </dd>
                  </dl>

                  <!-- Image changes loading -->
                  <div class="resource-view" resource="currentImageChangeResource">
                    <div class="changes-container small-changes-container"
                         ng-show="currentImageChanges.changed.length || currentImageChanges.added.length || currentImageChanges.removed.length">
                      <div class="changes-count-container accordion-toggle" data-toggle="collapse" data-parent="#accordion" data-target="#collapseChanges">
                        <span class="change-count added" ng-show="currentImageChanges.added.length > 0" title="Files Added"
                              bs-tooltip="tooltip.title" data-placement="top">
                          <i class="fa fa-plus-square"></i>
                          <b>{{currentImageChanges.added.length}}</b>
                        </span>
                        <span class="change-count removed" ng-show="currentImageChanges.removed.length > 0" title="Files Removed"
                              bs-tooltip="tooltip.title" data-placement="top">
                          <i class="fa fa-minus-square"></i>
                          <b>{{currentImageChanges.removed.length}}</b>
                        </span>
                        <span class="change-count changed" ng-show="currentImageChanges.changed.length > 0" title="Files Changed"
                              bs-tooltip="tooltip.title" data-placement="top">
                          <i class="fa fa-pencil-square"></i>
                          <b>{{currentImageChanges.changed.length}}</b>
                        </span>
                      </div>

                      <div id="collapseChanges" class="panel-collapse collapse in">
                        <div class="well well-sm">		     
                          <div class="change added" ng-repeat="file in currentImageChanges.added | limitTo:5">
                            <i class="fa fa-plus-square"></i>
                            <span title="{{file}}">{{file}}</span>
                          </div>
                          <div class="change removed" ng-repeat="file in currentImageChanges.removed | limitTo:5">
                            <i class="fa fa-minus-square"></i>
                            <span title="{{file}}">{{file}}</span>
                          </div>
                          <div class="change changed" ng-repeat="file in currentImageChanges.changed | limitTo:5">
                            <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="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">
        Are you sure you want to delete tag
        <span class="label tag" ng-class="tagToDelete == currentTag.name ? 'label-success' : 'label-default'">
          {{ tagToDelete  }}
        </span>?

        <div ng-show="tagSpecificImages(tagToDelete).length" style="margin-top: 20px">
          The following images and any other images not referenced by a tag will be deleted:
          <div class="image-listings">
            <div class="image-listing" ng-repeat="image in tagSpecificImages(tagToDelete) | limitTo:5"
                 ng-class="getImageListingClasses(image, tagToDelete)">
              <!--<i class="fa fa-archive"></i>-->
              <span class="image-listing-circle"></span>
              <span class="image-listing-line"></span>
              <span class="context-tooltip image-listing-id" bs-tooltip="" title="{{ getFirstTextLine(image.comment) }}"
                    data-html="true">
                {{ image.id.substr(0, 12) }}
              </span>
            </div>
          </div>
          <div class="more-changes" ng-show="tagSpecificImages(tagToDelete).length > 5">
            And {{ tagSpecificImages(tagToDelete).length - 5 }} more...
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <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 -->