vbatts/quay
Archived
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

- UI improvements in prep for adding undo ability

Browse source 
- Move the tag history into its own directive and clean up the code
This commit is contained in:
Joseph Schorr 2015-04-15 18:39:05 -04:00
parent 20b399318e
commit 2a77bd2c92
6 changed files with 335 additions and 312 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

127
static/css/directives/repo-view/repo-panel-tags.css
View file

@ -69,130 +69,3 @@
color: #999;
cursor: pointer;
}
.repo-panel-tags-element .history-list {
margin: 10px;
border-left: 2px solid #eee;
}
.repo-panel-tags-element .history-entry {
position:relative;
margin-top: 20px;
padding-left: 26px;
transition: all 350ms ease-in-out;
}
.repo-panel-tags-element .history-entry .history-text {
transition: transform 350ms ease-in-out, opacity 350ms ease-in-out;
overflow: hidden;
height: 40px;
}
.repo-panel-tags-element .history-entry.filtered-mismatch {
margin-top: 10px;
}
.repo-panel-tags-element .history-entry.filtered-mismatch .history-text {
height: 18px;
opacity: 0;
}
.repo-panel-tags-element .history-entry.filtered-mismatch .history-icon {
opacity: 0.5;
transform: scale(0.5, 0.5);
}
.repo-panel-tags-element .history-entry .history-date-break {
font-size: 16px;
}
.repo-panel-tags-element .history-entry .history-date-break:before {
content: "";
position: absolute;
border-radius: 50%;
width: 12px;
height: 12px;
background: #ccc;
top: 4px;
left: -7px;
}
.repo-panel-tags-element .history-entry .history-icon {
border-radius: 50%;
width: 32px;
height: 32px;
line-height: 33px;
text-align: center;
font-size: 20px;
color: white;
background: #ccc;
position: absolute;
left: -17px;
top: -4px;
display: inline-block;
transition: all 350ms ease-in-out;
}
.repo-panel-tags-element .history-entry.move .history-icon:before {
content: "\f061";
font-family: FontAwesome;
}
.repo-panel-tags-element .history-entry.create .history-icon:before {
content: "\f02b";
font-family: FontAwesome;
}
.repo-panel-tags-element .history-entry.delete .history-icon:before {
content: "\f014";
font-family: FontAwesome;
}
.repo-panel-tags-element .history-entry.move .history-icon {
background-color: #1f77b4;
}
.repo-panel-tags-element .history-entry.create .history-icon {
background-color: #98df8a;
}
.repo-panel-tags-element .history-entry.delete .history-icon {
background-color: #ff9896;
}
.repo-panel-tags-element .history-entry .history-icon .fa-tag {
margin-right: 0px;
}
.repo-panel-tags-element .history-entry .tag-span {
display: inline-block;
border-radius: 4px;
padding: 2px;
background: #eee;
padding-right: 6px;
color: black;
cursor: pointer;
}
.repo-panel-tags-element .history-entry .tag-span.checked {
background: #F6FCFF;
}
.repo-panel-tags-element .history-entry .tag-span:before {
content: "\f02b";
font-family: FontAwesome;
margin-left: 4px;
margin-right: 4px;
}
.repo-panel-tags-element .history-entry .history-description {
color: #777;
}
.repo-panel-tags-element .history-entry .history-datetime {
font-size: 12px;
color: #ccc;
}

131
static/css/directives/ui/repo-tag-history.css Normal file
View file

@ -0,0 +1,131 @@
.repo-tag-history-element .history-list {
margin: 10px;
border-left: 2px solid #eee;
margin-right: 150px;
}
.repo-tag-history-element .history-entry {
position:relative;
margin-top: 20px;
padding-left: 26px;
transition: all 350ms ease-in-out;
}
.repo-tag-history-element .history-entry .history-text {
transition: transform 350ms ease-in-out, opacity 350ms ease-in-out;
overflow: hidden;
height: 40px;
}
.repo-tag-history-element .history-entry.filtered-mismatch {
margin-top: 10px;
}
.repo-tag-history-element .history-entry.filtered-mismatch .history-text {
height: 18px;
opacity: 0;
}
.repo-tag-history-element .history-entry.filtered-mismatch .history-icon {
opacity: 0.5;
transform: scale(0.5, 0.5);
}
.repo-tag-history-element .history-entry.filtered-mismatch.current .history-icon {
background-color: #ccc !important;
}
.repo-tag-history-element .history-entry .history-date-break {
font-size: 16px;
}
.repo-tag-history-element .history-entry .history-date-break:before {
content: "";
position: absolute;
border-radius: 50%;
width: 12px;
height: 12px;
background: #ccc;
top: 4px;
left: -7px;
}
.repo-tag-history-element .history-entry .history-icon {
position: absolute;
left: -17px;
top: -4px;
border-radius: 50%;
width: 32px;
height: 32px;
line-height: 32px;
text-align: center;
font-size: 20px;
color: white;
background: #ccc;
display: inline-block;
transition: all 350ms ease-in-out;
}
.repo-tag-history-element .history-entry.move .history-icon:before {
content: "\f061";
font-family: FontAwesome;
}
.repo-tag-history-element .history-entry.create .history-icon:before {
content: "\f02b";
font-family: FontAwesome;
}
.repo-tag-history-element .history-entry.delete .history-icon:before {
content: "\f014";
font-family: FontAwesome;
}
.repo-tag-history-element .history-entry.current.move .history-icon {
background-color: #77BFF0;
}
.repo-tag-history-element .history-entry.current.create .history-icon {
background-color: #98df8a;
}
.repo-tag-history-element .history-entry.current.delete .history-icon {
background-color: #ff9896;
}
.repo-tag-history-element .history-entry .history-icon .fa-tag {
margin-right: 0px;
}
.repo-tag-history-element .history-entry .tag-span {
display: inline-block;
border-radius: 4px;
padding: 2px;
background: #eee;
padding-right: 6px;
color: black;
cursor: pointer;
}
.repo-tag-history-element .history-entry .tag-span.checked {
background: #F6FCFF;
}
.repo-tag-history-element .history-entry .tag-span:before {
content: "\f02b";
font-family: FontAwesome;
margin-left: 4px;
margin-right: 4px;
}
.repo-tag-history-element .history-entry .history-description {
color: #777;
}
.repo-tag-history-element .history-entry .history-datetime {
font-size: 12px;
color: #ccc;
}

45
static/directives/repo-tag-history.html Normal file
View file

@ -0,0 +1,45 @@
<div class="repo-tag-history-element">
<div class="cor-loader" ng-if="!historyEntries"></div>
<span class="co-filter-box" style="float:right">
<input class="form-control" type="text" ng-model="filter" placeholder="Filter History...">
</span>
<div class="history-list">
<div class="empty" ng-if="!historyEntries.length">
<div class="empty-primary-msg">This repository is empty.</div>
<div class="empty-secondary-msg">Push a tag or initiate a build to populate this repository.</div>
</div>
<div class="history-entry" ng-repeat="entry in historyEntries"
ng-class="getEntryClasses(entry, filter)">
<div class="history-date-break" ng-if="entry.date_break">
{{ entry.date | amDateFormat:'dddd, MMMM Do YYYY' }}
</div>
<div ng-if="!entry.date_break">
<div class="history-icon-container"><div class="history-icon"></div></div>
<div class="history-text">
<div class="history-description">
<span class="tag-span"
ng-click="showHistory(true, entry.tag_name)">{{ entry.tag_name }}</span>
<span ng-switch on="entry.action">
<span ng-switch-when="create">
was created pointing to image <span class="image-link" repository="repository" image-id="entry.docker_image_id"></span>
</span>
<span ng-switch-when="delete">
was deleted
</span>
<span ng-switch-when="move">
was moved to image
<span class="image-link" repository="repository" image-id="entry.docker_image_id"></span>
from image
<span class="image-link" repository="repository" image-id="entry.old_docker_image_id"></span>
</span>
</span>
</div>
<div class="history-datetime">{{ entry.time | amDateFormat:'dddd, MMMM Do YYYY, h:mm:ss a' }}</div>
</div>
</div>
</div>
</div>
</div>

54
static/directives/repo-view/repo-panel-tags.html
View file

@ -1,5 +1,5 @@
<div class="repo-panel-tags-element">
<div class="tab-header-controls">
<div class="tab-header-controls" ng-show="images">
<div class="btn-group btn-group-sm" ng-show="repository.can_write">
<button class="btn" ng-class="!showingHistory ? 'btn-primary active' : 'btn-default'" ng-click="showHistory(false)">
<i class="fa fa-tags"></i>Current Tags
@ -13,56 +13,8 @@
<h3 class="tab-header">Repository Tags</h3>
<!-- History view -->
<div ng-show="showingHistory">
<div ng-show="showingHistory">
<div class="cor-loader" ng-if="!tagHistoryData"></div>
</div>
<div style="height: 40px;">
<span class="co-filter-box" style="float:right">
<input class="form-control" type="text" ng-model="options.historyFilter" placeholder="Filter History...">
</span>
</div>
<div class="history-list">
<div class="empty" ng-if="!tagHistoryData.length">
<div class="empty-primary-msg">This repository is empty.</div>
<div class="empty-secondary-msg">Push a tag or initiate a build to populate this repository.</div>
</div>
<div class="history-entry" ng-repeat="entry in tagHistoryData"
ng-class="getEntryClasses(entry, options.historyFilter)">
<div class="history-date-break" ng-if="entry.date_break">
{{ entry.date | amDateFormat:'dddd, MMMM Do YYYY' }}
</div>
<div ng-if="!entry.date_break">
<div class="history-icon"></div>
<div class="history-text">
<div class="history-description">
<span class="tag-span"
ng-class="isChecked(entry.tag_name, checkedTags.checked) ? 'checked' : ''"
ng-click="showHistory(true, entry.tag_name)">{{ entry.tag_name }}</span>
<span ng-switch on="entry.action">
<span ng-switch-when="create">
was created pointing to image <span class="image-link" repository="repository" image-id="entry.docker_image_id"></span>
</span>
<span ng-switch-when="delete">
was deleted
</span>
<span ng-switch-when="move">
was moved to image
<span class="image-link" repository="repository" image-id="entry.docker_image_id"></span>
from image
<span class="image-link" repository="repository" image-id="entry.old_docker_image_id"></span>
</span>
</span>
</div>
<div class="history-datetime">{{ entry.time | amDateFormat:'dddd, MMMM Do YYYY, h:mm:ss a' }}</div>
</div>
</div>
</div>
</div>
</div>
<div class="repo-tag-history" repository="repository" filter="options.historyFilter"
is-enabled="showingHistory" ng-show="showingHistory"></div>
<!-- Normal View -->
<div class="resource-view" resource="imagesResource" error-message="'Could not load images'"

135
static/js/directives/repo-view/repo-panel-tags.js
View file

@ -119,136 +119,11 @@ angular.module('quay').directive('repoPanelTags', function () {
// Process each of the tags.
setTagState();
if ($scope.showingHistory) {
loadTimeline();
}
});
var loadTimeline = function() {
var params = {
'repository': $scope.repository.namespace + '/' + $scope.repository.name
};
ApiService.listRepoTags(null, params).then(function(resp) {
var tagData = [];
var currentTags = {};
resp.tags.forEach(function(tag) {
var tagName = tag.name;
var imageId = tag.docker_image_id;
var oldImageId = null;
if (tag.end_ts) {
var action = 'delete';
// If the end time matches the existing start time for this tag, then this is a move
// instead of a delete.
var currentTime = tag.end_ts * 1000;
if (currentTags[tagName] && currentTags[tagName].start_ts == tag.end_ts) {
action = 'move';
// Remove the create.
var index = tagData.indexOf(currentTags[tagName]);
var createEntry = tagData.splice(index, 1)[0];
imageId = createEntry.docker_image_id;
oldImageId = tag.docker_image_id;
}
// Add the delete/move.
tagData.push({
'tag_name': tagName,
'action': action,
'start_ts': tag.start_ts,
'end_ts': tag.end_ts,
'time': currentTime,
'docker_image_id': imageId,
'old_docker_image_id': oldImageId || ''
})
}
if (tag.start_ts) {
var currentTime = tag.start_ts * 1000;
var create = {
'tag_name': tagName,
'action': 'create',
'start_ts': tag.start_ts,
'end_ts': tag.end_ts,
'time': currentTime,
'docker_image_id': tag.docker_image_id,
'old_docker_image_id': ''
};
tagData.push(create);
currentTags[tagName] = create;
}
});
tagData.sort(function(a, b) {
return b.time - a.time;
});
for (var i = tagData.length - 1; i >= 1; --i) {
var current = tagData[i];
var next = tagData[i - 1];
if (new Date(current.time).getDate() != new Date(next.time).getDate()) {
tagData.splice(i, 0, {
'date_break': true,
'date': new Date(current.time)
});
i--;
}
}
if (tagData.length > 0) {
tagData.splice(0, 0, {
'date_break': true,
'date': new Date(tagData[0].time)
});
}
$scope.tagHistoryData = tagData;
});
};
$scope.getEntryClasses = function(entry, historyFilter) {
var classes = entry.action + ' ';
if (!historyFilter || !entry.action) {
return classes;
}
var parts = (historyFilter || '').split(',');
var isMatch = parts.some(function(part) {
if (part && entry.tag_name) {
isMatch = entry.tag_name.indexOf(part) >= 0;
isMatch = isMatch || entry.docker_image_id.indexOf(part) >= 0;
isMatch = isMatch || entry.old_docker_image_id.indexOf(part) >= 0;
return isMatch;
}
});
classes += isMatch ? 'filtered-match' : 'filtered-mismatch';
return classes;
};
$scope.showHistory = function(value, opt_tagname) {
if (opt_tagname) {
$scope.options.historyFilter = opt_tagname;
} else {
$scope.options.historyFilter = '';
}
if ($scope.showingHistory == value) {
return;
}
$scope.options.historyFilter = opt_tagname ? opt_tagname : '';
$scope.showingHistory = value;
if ($scope.showingHistory) {
loadTimeline();
}
};
$scope.toggleHistory = function() {
@ -349,14 +224,6 @@ angular.module('quay').directive('repoPanelTags', function () {
return names.join(',');
};
$scope.isChecked = function(tagName, checked) {
return checked.some(function(tag) {
if (tag.name == tagName) {
return true;
}
});
};
}
};
return directiveDefinitionObject;

155
static/js/directives/ui/repo-tag-history.js Normal file
View file

@ -0,0 +1,155 @@
/**
* An element which displays its contents wrapped in an <a> tag, but only if the href is not null.
*/
angular.module('quay').directive('repoTagHistory', function () {
var directiveDefinitionObject = {
priority: 0,
templateUrl: '/static/directives/repo-tag-history.html',
replace: false,
transclude: true,
restrict: 'C',
scope: {
'repository': '=repository',
'filter': '=filter',
'isEnabled': '=isEnabled'
},
controller: function($scope, $element, ApiService) {
$scope.tagHistoryData = null;
$scope.tagHistoryLeaves = {};
var loadTimeline = function() {
if (!$scope.repository || !$scope.isEnabled) { return; }
var params = {
'repository': $scope.repository.namespace + '/' + $scope.repository.name
};
ApiService.listRepoTags(null, params).then(function(resp) {
processTags(resp.tags);
});
};
$scope.$watch('isEnabled', loadTimeline);
$scope.$watch('repository', loadTimeline);
var processTags = function(tags) {
var entries = [];
var tagEntries = {};
// For each tag, turn the tag into create, move, delete, restore, etc entries.
tags.forEach(function(tag) {
var tagName = tag.name;
var dockerImageId = tag.docker_image_id;
if (!tagEntries[tagName]) {
tagEntries[tagName] = [];
}
var removeEntry = function(entry) {
entries.splice(entries.indexOf(entry), 1);
tagEntries[entry.tag_name].splice(tagEntries[entry.tag_name].indexOf(entry), 1);
};
var addEntry = function(action, time, opt_docker_id, opt_old_docker_id) {
var entry = {
'tag_name': tagName,
'action': action,
'start_ts': tag.start_ts,
'end_ts': tag.end_ts,
'time': time * 1000, // JS expects ms, not s since epoch.
'docker_image_id': opt_docker_id || dockerImageId,
'old_docker_image_id': opt_old_docker_id || ''
};
tagEntries[tagName].push(entry);
entries.push(entry);
};
// If the tag has an end time, it was either deleted or moved.
if (tag.end_ts) {
// If a future entry exists with a start time equal to the end time for this tag,
// then the action was a move, rather than a delete and a create.
var currentEntries = tagEntries[tagName];
var futureEntry = currentEntries.length > 0 ? currentEntries[currentEntries.length - 1] : {};
if (futureEntry.start_ts == tag.end_ts) {
removeEntry(futureEntry);
addEntry('move', tag.end_ts, futureEntry.docker_image_id, dockerImageId);
} else {
addEntry('delete', tag.end_ts)
}
}
// If the tag has a start time, it was created.
if (tag.start_ts) {
addEntry('create', tag.start_ts);
}
});
// Sort the overall entries by datetime descending.
entries.sort(function(a, b) {
return b.time - a.time;
});
// Sort the tag entries by datetime descending.
Object.keys(tagEntries).forEach(function(name) {
var te = tagEntries[name];
te.sort(function(a, b) {
return b.time - a.time;
});
});
// Add date dividers in.
for (var i = entries.length - 1; i >= 1; --i) {
var current = entries[i];
var next = entries[i - 1];
if (new Date(current.time).getDate() != new Date(next.time).getDate()) {
entries.splice(i, 0, {
'date_break': true,
'date': new Date(current.time)
});
i--;
}
}
// Add the top-level date divider.
if (entries.length > 0) {
entries.splice(0, 0, {
'date_break': true,
'date': new Date(entries[0].time)
});
}
$scope.historyEntries = entries;
$scope.historyEntryMap = tagEntries;
};
$scope.getEntryClasses = function(entry, historyFilter) {
if (!entry.action) { return ''; }
var classes = entry.action + ' ';
if ($scope.historyEntryMap[entry.tag_name][0] == entry) {
classes += ' current ';
}
if (!historyFilter || !entry.action) {
return classes;
}
var parts = (historyFilter || '').split(',');
var isMatch = parts.some(function(part) {
if (part && entry.tag_name) {
isMatch = entry.tag_name.indexOf(part) >= 0;
isMatch = isMatch || entry.docker_image_id.indexOf(part) >= 0;
isMatch = isMatch || entry.old_docker_image_id.indexOf(part) >= 0;
return isMatch;
}
});
classes += isMatch ? 'filtered-match' : 'filtered-mismatch';
return classes;
};
}
};
return directiveDefinitionObject;
});