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

Have tags selected be handled universally throughout the entire repository view page.

Browse source
This commit is contained in:
Joseph Schorr 2015-03-12 12:22:47 -07:00
parent ea61a68bcb
commit 347bf31f2d
9 changed files with 154 additions and 85 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -11,33 +11,29 @@
position: relative;
}
.repo-panel-tags-element .image-track-dot:after {
content: "\f10c";
font-family: FontAwesome;
.repo-panel-tags-element .image-track-dot {
display: inline-block;
position: absolute;
top: 15px;
left: 0px;
width: 17px;
font-size: 11px;
text-align: center;
left: 2px;
width: 12px;
height: 12px;
background: white;
z-index: 300;
height: 13px;
border: 2px solid black;
border-radius: 50%;
}
.repo-panel-tags-element .image-track-line {
position: absolute;
top: 0px;
bottom: -11px;
bottom: -1px;
left: 7px;
width: 0px;
display: inline-block;
height: 100%;
border-left: 2px solid black;
display: none;

3
static/directives/repo-view/repo-panel-changes.html
View file

@ -60,5 +60,4 @@
</div>
<div class="tag-operations-dialog" repository="repository" images="images"
action-handler="tagActionHandler"
tag-changed="handleTagChanged(data)"></div>
action-handler="tagActionHandler" tag-changed="handleTagChanged(data)"></div>

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

@ -21,8 +21,9 @@
</span>
<span class="co-checked-actions" ng-if="checkedTags.checked.length">
<a ng-href="/repository/{{ repository.namespace }}/{{ repository.name }}?tab=changes&tags={{ getCheckedTagsString(checkedTags.checked) }}"
class="btn btn-default"><i class="fa fa-code-fork"></i> Visualize</a>
<a href="javascript:void(0)" class="btn btn-default" ng-click="setTab('changes')">
<i class="fa fa-code-fork"></i> Visualize
</a>
<button class="btn btn-default" ng-click="askDeleteMultipleTags(checkedTags.checked)">
<i class="fa fa-times"></i> Delete
</button>
@ -60,8 +61,9 @@
<td><span am-time-ago="tag.last_modified"></span></td>
<td>{{ tag.size | bytes }}</td>
<td class="image-id-col">{{ tag.image_id.substr(0, 12) }}</td>
<td class="image-track" ng-repeat="it in imageTracks" ng-style="{'color': it.color}">
<span class="image-track-dot" ng-if="it.image_id == tag.image_id"></span>
<td class="image-track" ng-repeat="it in imageTracks">
<span class="image-track-dot" ng-if="it.image_id == tag.image_id"
ng-style="{'borderColor': it.color}"></span>
<span class="image-track-line" ng-class="trackLineClass($parent.$index, it)"
ng-style="{'borderColor': it.color}"></span>
</td>

47
static/js/directives/repo-view/repo-panel-changes.js
View file

@ -87,33 +87,32 @@ angular.module('quay').directive('repoPanelChanges', function () {
transclude: false,
restrict: 'C',
scope: {
'repository': '=repository'
'repository': '=repository',
'selectedTags': '=selectedTags',
'isEnabled': '=isEnabled'
},
controller: function($scope, $element, $location, $timeout, ApiService, UtilService, ImageMetadataService) {
controller: function($scope, $element, $timeout, ApiService, UtilService, ImageMetadataService) {
var update = function() {
if (!$scope.repository) { return; }
var tagString = $location.search()['tags'] || '';
if (!tagString) {
$scope.selectedTags = [];
return;
}
if (!$scope.repository || !$scope.selectedTags) { return; }
$scope.currentImage = null;
$scope.currentImage = null;
$scope.selectedTags = tagString.split(',');
$scope.currentTag = null;
if (!$scope.imageResource) {
if (!$scope.imagesResource) {
loadImages();
} else {
refreshTree();
}
};
$scope.$on('$routeUpdate', update);
$scope.$watch('selectedTags', update)
$scope.$watch('repository', update);
$scope.$watch('isEnabled', function(isEnabled) {
if (isEnabled) {
refreshTree();
}
});
var refreshTree = function() {
if (!$scope.repository || !$scope.images) { return; }
@ -157,10 +156,6 @@ angular.module('quay').directive('repoPanelChanges', function () {
$scope.images = resp.images;
$scope.tracker = new RepositoryImageTracker($scope.repository, $scope.images);
$scope.selectedTags = $.grep($scope.selectedTags, function(tag) {
return !!$scope.tracker.lookupTag(tag);
});
if ($scope.selectedTags && $scope.selectedTags.length) {
refreshTree();
}
@ -193,26 +188,16 @@ angular.module('quay').directive('repoPanelChanges', function () {
$scope.tracker = new RepositoryImageTracker($scope.repository, $scope.images);
data.removed.map(function(tag) {
$scope.selectedTags = $.grep($scope.selectedTags, function(cTag) {
return cTag != tag;
});
if ($scope.selectedTags.length) {
$location.search('tags', $scope.selectedTags.join(','));
} else {
$location.search('tags', null);
}
$scope.currentImage = null;
$scope.currentTag = null;
});
data.added.map(function(tag) {
$scope.selectedTags.push(tag);
$location.search('tags', $scope.selectedTags.join(','));
$scope.currentTag = tag;
});
refreshTree();
};
}
};

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

@ -10,9 +10,9 @@ angular.module('quay').directive('repoPanelTags', function () {
restrict: 'C',
scope: {
'repository': '=repository',
'repositoryUpdated': '&repositoryUpdated'
'selectedTags': '=selectedTags'
},
controller: function($scope, $element, $filter, ApiService, UIService) {
controller: function($scope, $element, $filter, $location, ApiService, UIService) {
var orderBy = $filter('orderBy');
$scope.checkedTags = UIService.createCheckStateController([]);
@ -35,7 +35,7 @@ angular.module('quay').directive('repoPanelTags', function () {
};
var setTagState = function() {
if (!$scope.repository) { return; }
if (!$scope.repository || !$scope.selectedTags) { return; }
var tags = [];
var allTags = [];
@ -60,21 +60,29 @@ angular.module('quay').directive('repoPanelTags', function () {
}
// Sort the tags by the predicate and the reverse, and map the information.
var imageIDs = [];
var ordered = orderBy(tags, $scope.options.predicate, $scope.options.reverse);
var checked = [];
for (var i = 0; i < ordered.length; ++i) {
var tagInfo = ordered[i];
if (!imageMap[tagInfo.image_id]) {
imageMap[tagInfo.image_id] = [];
imageIDs.push(tagInfo.image_id)
}
imageMap[tagInfo.image_id].push(tagInfo);
if ($.inArray(tagInfo.name, $scope.selectedTags) >= 0) {
checked.push(tagInfo);
}
};
// Calculate the image tracks.
var colors = d3.scale.category10();
var index = 0;
for (var image_id in imageMap) {
imageIDs.sort().map(function(image_id) {
if (imageMap[image_id].length >= 2){
imageTracks.push({
'image_id': image_id,
@ -84,19 +92,34 @@ angular.module('quay').directive('repoPanelTags', function () {
});
++index;
}
}
});
$scope.imageMap = imageMap;
$scope.imageTracks = imageTracks;
$scope.tags = ordered;
$scope.checkedTags = UIService.createCheckStateController(ordered);
$scope.allTags = allTags;
$scope.iterationState = {};
$scope.checkedTags = UIService.createCheckStateController(ordered, checked);
$scope.checkedTags.listen(function(checked) {
$scope.selectedTags = checked.map(function(tag_info) {
return tag_info.name;
});
});
}
$scope.$watch('options.predicate', setTagState);
$scope.$watch('options.reverse', setTagState);
$scope.$watch('options.tagFilter', setTagState);
$scope.$watch('selectedTags', function(selectedTags) {
if (!selectedTags || !$scope.repository || !$scope.imageMap) { return; }
$scope.checkedTags.checked = selectedTags.map(function(tag) {
return $scope.repository.tags[tag];
});
}, true);
$scope.$watch('repository', function(repository) {
if (!repository) { return; }
@ -175,10 +198,8 @@ angular.module('quay').directive('repoPanelTags', function () {
return tag.image_id == image_id;
};
$scope.getCheckedTagsString = function(checked) {
return checked.map(function(tag_info) {
return tag_info.name;
}).join(',');
$scope.setTab = function(tab) {
$location.search('tab', tab);
};
}
};

12
static/js/directives/ui/tag-operations-dialog.js
View file

@ -30,9 +30,14 @@ angular.module('quay').directive('tagOperationsDialog', function () {
ApiService.listRepositoryImages(null, params).then(function(resp) {
$scope.images = resp.images;
$scope.tagChanged({
'data': { 'added': added, 'removed': removed }
});
// Note: We need the timeout here so that Angular can $digest the images change
// on the parent scope before the tagChanged callback occurs.
$timeout(function() {
$scope.tagChanged({
'data': { 'added': added, 'removed': removed }
});
}, 1);
})
});
};
@ -72,7 +77,6 @@ angular.module('quay').directive('tagOperationsDialog', function () {
ApiService.changeTagImage(data, params).then(function(resp) {
$element.find('#createOrMoveTagModal').modal('hide');
$scope.addingTag = false;
markChanged([tag], []);
}, errorHandler);
};

51
static/js/pages/repo-view.js
View file

@ -13,25 +13,56 @@
}, ['old-layout']);
}]);
function RepoViewCtrl($scope, $routeParams, ApiService, UserService, AngularPollChannel) {
function RepoViewCtrl($scope, $routeParams, $location, ApiService, UserService, AngularPollChannel) {
$scope.namespace = $routeParams.namespace;
$scope.name = $routeParams.name;
$scope.logsShown = 0;
$scope.viewScope = {
'selectedTags': [],
'repository': null,
'builds': null,
'changesVisible': false
};
var buildPollChannel = null;
// Make sure we track the current user.
UserService.updateUserIn($scope);
// Watch the selected tags and update the URL accordingly.
$scope.$watch('viewScope.selectedTags', function(selectedTags) {
if (!selectedTags || !$scope.viewScope.repository) { return; }
var tags = filterTags(selectedTags);
if (!tags.length) {
$location.search('tag', null);
return;
}
$location.search('tag', tags.join(','));
}, true);
// Watch the repository to filter any tags removed.
$scope.$watch('viewScope.repository', function(repository) {
if (!repository) { return; }
$scope.viewScope.selectedTags = filterTags($scope.viewScope.selectedTags);
});
var filterTags = function(tags) {
return (tags || []).filter(function(tag) {
return !!$scope.viewScope.repository.tags[tag];
});
};
var loadRepository = function() {
var params = {
'repository': $scope.namespace + '/' + $scope.name
};
$scope.repositoryResource = ApiService.getRepoAsResource(params).get(function(repo) {
$scope.repository = repo;
$scope.setTag($routeParams.tag);
$scope.viewScope.repository = repo;
$scope.setTags($routeParams.tag);
// Track builds.
buildPollChannel = AngularPollChannel.create($scope, loadRepositoryBuilds, 5000 /* 5s */);
@ -49,7 +80,7 @@
};
$scope.repositoryBuildsResource = ApiService.getRepoBuildsAsResource(params, /* background */true).get(function(resp) {
$scope.builds = resp.builds;
$scope.viewScope.builds = resp.builds;
callback(true);
}, errorHandler);
};
@ -57,14 +88,22 @@
// Load the repository.
loadRepository();
$scope.setTags = function(tagNames) {
if (!tagNames) {
$scope.viewScope.selectedTags = [];
return;
}
$scope.setTag = function(tagName) {
window.console.log('set tag')
$scope.viewScope.selectedTags = $.unique(tagNames.split(','));
};
$scope.showLogs = function() {
$scope.logsShown++;
};
$scope.handleChangesState = function(value) {
$scope.viewScope.changesVisible = value;
};
}
function OldRepoViewCtrl($scope, $sanitize, Restangular, ImageMetadataService, ApiService, $routeParams, $rootScope, $location, $timeout, Config, UtilService) {

23
static/js/services/ui-service.js
View file

@ -2,9 +2,14 @@
* Service which provides helper methods for performing some simple UI operations.
*/
angular.module('quay').factory('UIService', [function() {
var CheckStateController = function(items) {
var CheckStateController = function(items, opt_checked) {
this.items = items;
this.checked = [];
this.checked = opt_checked || [];
this.listeners_ = [];
};
CheckStateController.prototype.listen = function(callback) {
this.listeners_.push(callback);
};
CheckStateController.prototype.isChecked = function(item) {
@ -25,22 +30,32 @@ angular.module('quay').factory('UIService', [function() {
} else {
this.checked = this.items.slice();
}
this.callListeners_();
};
CheckStateController.prototype.checkByFilter = function(filter) {
this.checked = $.grep(this.items, filter);
this.callListeners_();
};
CheckStateController.prototype.checkItem = function(item) {
this.checked.push(item);
this.callListeners_();
};
CheckStateController.prototype.uncheckItem = function(item) {
this.checked = $.grep(this.checked, function(cItem) {
return cItem != item;
});
this.callListeners_();
};
CheckStateController.prototype.callListeners_ = function() {
var checked = this.checked;
this.listeners_.map(function(listener) {
listener(checked);
});
};
var uiService = {};
@ -73,8 +88,8 @@ angular.module('quay').factory('UIService', [function() {
}
};
uiService.createCheckStateController = function(items) {
return new CheckStateController(items);
uiService.createCheckStateController = function(items, opt_checked) {
return new CheckStateController(items, opt_checked);
};
return uiService;

30
static/partials/repo-view.html
View file

@ -5,9 +5,9 @@
<div class="cor-title">
<span class="cor-title-link"></span>
<span class="cor-title-content">
<span class="repo-circle no-background" repo="repository"></span>
<span class="repo-circle no-background" repo="viewScope.repository"></span>
{{ namespace }} / {{ name }}
<span class="repo-star" repository="repository" ng-if="!user.anonymous"></span>
<span class="repo-star" repository="viewScope.repository" ng-if="!user.anonymous"></span>
</span>
</div>
@ -25,18 +25,19 @@
<i class="fa fa-tasks"></i>
</span>
<span class="cor-tab" tab-title="Visualize" tab-target="#changes">
<span class="cor-tab" tab-title="Visualize" tab-target="#changes"
tab-shown="handleChangesState(true)" tab-hidden="handleChangesState(false)">
<i class="fa fa-code-fork"></i>
</span>
<!-- Admin Only Tabs -->
<span class="cor-tab" tab-title="Usage Logs" tab-target="#logs" tab-init="showLogs()"
ng-if="repository.can_admin">
ng-if="viewScope.repository.can_admin">
<i class="fa fa-bar-chart"></i>
</span>
<span class="cor-tab" tab-title="Settings" tab-target="#settings"
ng-if="repository.can_admin">
ng-if="viewScope.repository.can_admin">
<i class="fa fa-gear"></i>
</span>
</div> <!-- /cor-tabs -->
@ -44,12 +45,16 @@
<div class="cor-tab-content">
<!-- Information -->
<div id="info" class="tab-pane active">
<div class="repo-panel-info" repository="repository" builds="builds"></div>
<div class="repo-panel-info"
repository="viewScope.repository"
builds="viewScope.builds"></div>
</div>
<!-- Tags -->
<div id="tags" class="tab-pane">
<div class="repo-panel-tags" repository="repository"></div>
<div class="repo-panel-tags"
repository="viewScope.repository"
selected-tags="viewScope.selectedTags"></div>
</div>
<!-- Builds -->
@ -59,16 +64,19 @@
<!-- Changes -->
<div id="changes" class="tab-pane">
<div class="repo-panel-changes" repository="repository"></div>
<div class="repo-panel-changes"
repository="viewScope.repository"
selected-tags="viewScope.selectedTags"
is-enabled="viewScope.changesVisible"></div>
</div>
<!-- Usage Logs -->
<div id="logs" class="tab-pane" ng-if="repository.can_admin">
<div class="logs-view" repository="repository" makevisible="logsShown"></div>
<div id="logs" class="tab-pane" ng-if="viewScope.repository.can_admin">
<div class="logs-view" repository="viewScope.repository" makevisible="logsShown"></div>
</div>
<!-- Settings -->
<div id="settings" class="tab-pane" ng-if="repository.can_admin">
<div id="settings" class="tab-pane" ng-if="viewScope.repository.can_admin">
settings
</div>