Work in progress: new image view

This commit is contained in:
Joseph Schorr 2015-03-20 17:46:02 -04:00
parent 3959ea2ff9
commit 049148cb87
9 changed files with 325 additions and 92 deletions

View file

@ -1,82 +1,29 @@
<div class="resource-view" resource="image" error-message="'No image found'">
<div class="cor-container repo repo-image-view">
<div class="header">
<a href="{{ '/repository/' + repo.namespace + '/' + repo.name }}" class="back"><i class="fa fa-chevron-left"></i></a>
<h3>
<span class="repo-circle no-background" repo="repo"></span>
<span class="repo-breadcrumb" repo="repo" image="image.value"></span>
</h3>
<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-database fa-lg" style="margin-right: 10px"></i>
{{ image.id.substr(0, 12) }}
</span>
</div>
<!-- Comment -->
<blockquote ng-show="image.value.comment">
<span class="markdown-view" content="image.value.comment"></span>
</blockquote>
<!-- Information -->
<dl class="dl-normal">
<dt>Full Image ID</dt>
<dd>
<div class="copy-box" value="image.value.id"></div>
</dd>
<dt>Created</dt>
<dd am-time-ago="parseDate(image.value.created)"></dd>
<dt>Compressed Image 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">{{ image.value.size | bytes }}</span>
</dd>
<dt ng-show="image.value.command && image.value.command.length">Command</dt>
<dd ng-show="image.value.command && image.value.command.length">
<pre class="formatted-command">{{ getFormattedCommand(image.value) }}</pre>
</dd>
</dl>
<!-- Changes tabs -->
<div ng-show="combinedChanges.length > 0">
<b>File Changes:</b>
<br>
<br>
<ul class="nav nav-tabs">
<li class="active"><a href="javascript:void(0)" data-toggle="tab" data-target="#filterable">Filterable View</a></li>
<li><a href="javascript:void(0)" data-toggle="tab" data-target="#tree" ng-click="initializeTree()">Tree View</a></li>
</ul>
</div>
<!-- Changes tab content -->
<div class="tab-content" ng-show="combinedChanges.length > 0">
<!-- Filterable view -->
<div class="tab-pane active" id="filterable">
<div class="changes-container full-changes-container">
<div class="change-side-controls">
<div class="result-count">
Showing {{(combinedChanges | filter:search | limitTo:50).length}} of {{(combinedChanges | filter:search).length}} results
</div>
<div class="filter-input">
<input id="change-filter" class="form-control" placeholder="Filter Changes" type="text" ng-model="search.$">
</div>
</div>
<div style="height: 28px;"></div>
<div class="changes-list well well-sm">
<div ng-show="(combinedChanges | filter:search | limitTo:1).length == 0">
No matching changes
</div>
<div class="change" ng-repeat="change in combinedChanges | filter:search | limitTo:50">
<i ng-class="{'added': 'fa fa-plus-square', 'removed': 'fa fa-minus-square', 'changed': 'fa fa-pencil-square'}[change.kind]"></i>
<span data-title="{{change.file}}">
<span style="color: #888;">
<span ng-repeat="folder in getFolders(change.file) track by $index"><a href="javascript:void(0)" ng-click="setFolderFilter(getFolder(change.file), $index)">{{folder}}</a>/</span></span><span>{{getFilename(change.file)}}</span>
</span>
</div>
</div>
</div>
<div class="co-main-content-panel">
<div class="image-view-header">
<div class="image-id section"><i class="fa fa-code section-icon" bs-tooltip="tooltip.title" data-title="Full Image ID"></i> {{ image.id }}</div>
<div class="created section"><i class="fa fa-calendar section-icon" bs-tooltip="tooltip.title" data-title="Full Image ID"></i> {{ image.created | amDateFormat:'dddd, MMMM Do YYYY, h:mm:ss a' }}</div>
</div>
<!-- Tree view -->
<div class="tab-pane" id="tree">
<div id="changes-tree-container" class="changes-container" onresize="tree && tree.notifyResized()"></div>
</div>
<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>
</div>
</div>
</div>