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

Performance improvements for the repo API and the new repo UI

Browse source
This commit is contained in:
Joseph Schorr 2015-03-18 14:47:53 -04:00
parent bc6baae050
commit ab2331a486
9 changed files with 119 additions and 100 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,61 +1,64 @@
<div class="repo-panel-changes-element">
<!-- No Tags Selected -->
<div class="empty" ng-if="!selectedTags.length">
<div class="empty-primary-msg">No tags selected to view</div>
<div class="empty-secondary-msg">
Please select one or more tags in the <i class="fa fa-tags" style="margin-left: 4px; margin-right: 4px;"></i> Tags tab to visualize.
<div class="resource-view" resource="imagesResource"
error-message="'Could not load repository images'">
<!-- No Tags Selected -->
<div class="empty" ng-if="!selectedTags.length">
<div class="empty-primary-msg">No tags selected to view</div>
<div class="empty-secondary-msg">
Please select one or more tags in the <i class="fa fa-tags" style="margin-left: 4px; margin-right: 4px;"></i> Tags tab to visualize.
</div>
</div>
</div>
<!-- Tags Selected -->
<div ng-if="selectedTags.length > 0">
<h3 class="tab-header">
Visualize Tags:
<span class="visualized-tag" ng-repeat="tag in selectedTags">
<i class="fa fa-tag"></i>{{ tag }}
</span>
</h3>
<!-- Tags Selected -->
<div ng-if="selectedTags.length > 0">
<h3 class="tab-header">
Visualize Tags:
<span class="visualized-tag" ng-repeat="tag in selectedTags">
<i class="fa fa-tag"></i>{{ tag }}
</span>
</h3>
<div id="image-history row" class="resource-view" resource="imagesResource"
error-message="'Cannot load repository images'">
<div id="image-history row" class="resource-view" resource="imagesResource"
error-message="'Cannot load repository images'">
<!-- Tree View container -->
<div class="col-md-8">
<div class="panel panel-default">
<!-- Image history tree -->
<div id="image-history-container" onresize="tree.notifyResized()"></div>
</div>
</div>
<!-- Side Panel -->
<div class="col-md-4">
<div class="side-panel-title" ng-if="currentTag">
<i class="fa fa-tag"></i>{{ currentTag }}
</div>
<div class="side-panel-title" ng-if="currentImage">
<i class="fa fa-archive"></i>{{ currentImage.substr(0, 12) }}
</div>
<div class="side-panel">
<!-- Tag Info -->
<div class="tag-info-sidebar"
tracker="tracker"
tag="currentTag"
image-selected="setImage(image)"
delete-tag-requested="tagActionHandler.askDeleteTag(tag)"
ng-if="currentTag">
</div>
<!-- Image Info -->
<div class="image-info-sidebar"
tracker="tracker"
image="currentImage"
tag-selected="setTag(tag)"
add-tag-requested="tagActionHandler.askAddTag(image)"
ng-if="currentImage">
<!-- Tree View container -->
<div class="col-md-8">
<div class="panel panel-default">
<!-- Image history tree -->
<div id="image-history-container" onresize="tree.notifyResized()"></div>
</div>
</div>
</div>
<!-- Side Panel -->
<div class="col-md-4">
<div class="side-panel-title" ng-if="currentTag">
<i class="fa fa-tag"></i>{{ currentTag }}
</div>
<div class="side-panel-title" ng-if="currentImage">
<i class="fa fa-archive"></i>{{ currentImage.substr(0, 12) }}
</div>
<div class="side-panel">
<!-- Tag Info -->
<div class="tag-info-sidebar"
tracker="tracker"
tag="currentTag"
image-selected="setImage(image)"
delete-tag-requested="tagActionHandler.askDeleteTag(tag)"
ng-if="currentTag">
</div>
<!-- Image Info -->
<div class="image-info-sidebar"
tracker="tracker"
image="currentImage"
tag-selected="setTag(tag)"
add-tag-requested="tagActionHandler.askAddTag(image)"
ng-if="currentImage">
</div>
</div>
</div>
</div>
</div>
</div>

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

@ -1,7 +1,6 @@
<div class="repo-panel-tags-element">
<h3 class="tab-header">Repository Tags</h3>
<div class="resource-view" resource="imagesResource" error-message="'Could not load images'">
<div class="co-check-bar">
<span class="cor-checkable-menu" controller="checkedTags">
<div class="cor-checkable-menu-item" item-filter="allTagFilter">

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

@ -89,6 +89,10 @@ angular.module('quay').directive('repoPanelChanges', function () {
scope: {
'repository': '=repository',
'selectedTags': '=selectedTags',
'imagesResource': '=imagesResource',
'images': '=images',
'isEnabled': '=isEnabled'
},
controller: function($scope, $element, $timeout, ApiService, UtilService, ImageMetadataService) {
@ -99,13 +103,24 @@ angular.module('quay').directive('repoPanelChanges', function () {
$scope.currentImage = null;
$scope.currentTag = null;
if (!$scope.imagesResource) {
loadImages();
if (!$scope.tracker) {
updateImages();
}
};
var updateImages = function() {
if (!$scope.repository || !$scope.images) { return; }
$scope.tracker = new RepositoryImageTracker($scope.repository, $scope.images);
if ($scope.selectedTags && $scope.selectedTags.length) {
refreshTree();
}
};
$scope.$watch('selectedTags', update)
$scope.$watch('repository', update);
$scope.$watch('images', updateImages);
$scope.$watch('isEnabled', function(isEnabled) {
if (isEnabled) {
@ -147,23 +162,6 @@ angular.module('quay').directive('repoPanelChanges', function () {
}
};
var loadImages = function(opt_callback) {
var params = {
'repository': $scope.repository.namespace + '/' + $scope.repository.name
};
$scope.imagesResource = ApiService.listRepositoryImagesAsResource(params).get(function(resp) {
$scope.images = resp.images;
$scope.tracker = new RepositoryImageTracker($scope.repository, $scope.images);
if ($scope.selectedTags && $scope.selectedTags.length) {
refreshTree();
}
opt_callback && opt_callback();
});
};
$scope.setImage = function(image_id) {
$scope.currentTag = null;
$scope.currentImage = image_id;

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

@ -10,7 +10,9 @@ angular.module('quay').directive('repoPanelTags', function () {
restrict: 'C',
scope: {
'repository': '=repository',
'selectedTags': '=selectedTags'
'selectedTags': '=selectedTags',
'imagesResource': '=imagesResource',
'images': '=images',
},
controller: function($scope, $element, $filter, $location, ApiService, UIService) {
var orderBy = $filter('orderBy');
@ -24,16 +26,6 @@ angular.module('quay').directive('repoPanelTags', function () {
$scope.iterationState = {};
$scope.tagActionHandler = null;
var loadImages = function() {
var params = {
'repository': $scope.repository.namespace + '/' + $scope.repository.name
};
$scope.imagesResource = ApiService.listRepositoryImagesAsResource(params).get(function(resp) {
$scope.images = resp.images;
});
};
var setTagState = function() {
if (!$scope.repository || !$scope.selectedTags) { return; }
@ -124,9 +116,6 @@ angular.module('quay').directive('repoPanelTags', function () {
$scope.$watch('repository', function(repository) {
if (!repository) { return; }
// Load the repository's images.
loadImages();
// Process each of the tags.
setTagState();
});

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

@ -21,6 +21,8 @@
$scope.viewScope = {
'selectedTags': [],
'repository': null,
'images': null,
'imagesResource': null,
'builds': null,
'changesVisible': false
};
@ -70,6 +72,16 @@
});
};
var loadImages = function() {
var params = {
'repository': $scope.namespace + '/' + $scope.name
};
$scope.viewScope.imagesResource = ApiService.listRepositoryImagesAsResource(params).get(function(resp) {
$scope.viewScope.images = resp.images;
});
};
var loadRepositoryBuilds = function(callback) {
var params = {
'repository': $scope.namespace + '/' + $scope.name,
@ -86,8 +98,9 @@
}, errorHandler);
};
// Load the repository.
// Load the repository and images.
loadRepository();
loadImages();
$scope.setTags = function(tagNames) {
if (!tagNames) {

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

@ -59,6 +59,8 @@
<div id="tags" class="tab-pane">
<div class="repo-panel-tags"
repository="viewScope.repository"
images="viewScope.images"
images-resource="viewScope.imagesResource"
selected-tags="viewScope.selectedTags"></div>
</div>
@ -73,6 +75,8 @@
<div id="changes" class="tab-pane">
<div class="repo-panel-changes"
repository="viewScope.repository"
images="viewScope.images"
images-resource="viewScope.imagesResource"
selected-tags="viewScope.selectedTags"
is-enabled="viewScope.changesVisible"></div>
</div>