299 lines
15 KiB
HTML
299 lines
15 KiB
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="buildsInfo ? 'Dockerfile Builds Running: ' + (buildsInfo.length) : 'Dockerfile Build'"
|
|
ng-show="repo.can_write || buildsInfo.length">
|
|
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
|
|
<i class="fa fa-tasks fa-lg"></i>
|
|
<span class="count" ng-class="buildsInfo ? 'visible' : ''"><span>{{ buildsInfo ? buildsInfo.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 role="presentation" class="divider" ng-show="buildsInfo && repo.can_write"></li>
|
|
<li role="presentation" class="dropdown-header" ng-show="buildsInfo">Current Builds</li>
|
|
<li ng-repeat="buildInfo in buildsInfo">
|
|
<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.title" 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">
|
|
To push images to this repository:<br><br>
|
|
<pre>sudo docker tag <i>0u123imageidgoeshere</i> quay.io/{{repo.namespace}}/{{repo.name}}
|
|
sudo docker push quay.io/{{repo.namespace}}/{{repo.name}}</pre>
|
|
</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="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"
|
|
bs-tooltip="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">×</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 will also 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="getFirstTextLine(image.comment)">
|
|
{{ 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 -->
|
|
|