Remove unused (and broken) visualize tab
This commit is contained in:
Joseph Schorr
parent
fc700ef3f7
commit
49d980f685
5 changed files with 1 additions and 306 deletions
|
|
@ -1,64 +0,0 @@
|
||||||
<div class="repo-panel-changes-element">
|
|
||||||
<div class="cor-loader" ng-show="loading"></div>
|
|
||||||
<div ng-show="!loading">
|
|
||||||
<h3 class="tab-header">
|
|
||||||
Visualize Tags:
|
|
||||||
<span class="multiselect-dropdown" items="tagNames" selected-items="selectedTagsSlice"
|
|
||||||
item-name="tag" item-checked="updateState()">
|
|
||||||
<span class="tag-span">{{ item }}</span>
|
|
||||||
</span>
|
|
||||||
</h3>
|
|
||||||
|
|
||||||
<!-- No Tags Selected -->
|
|
||||||
<div class="empty" ng-if="!selectedTagsSlice.length">
|
|
||||||
<div class="empty-primary-msg">No tags selected to view</div>
|
|
||||||
<div class="empty-secondary-msg">
|
|
||||||
Please select one or more tags above.
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Tags Selected -->
|
|
||||||
<div ng-show="selectedTagsSlice.length > 0">
|
|
||||||
<!-- 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"
|
|
||||||
image-loader="imageLoader"
|
|
||||||
tag-selected="setTag(tag)"
|
|
||||||
add-tag-requested="tagActionHandler.askAddTag(image)"
|
|
||||||
ng-if="currentImage">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="tag-operations-dialog" repository="repository" image-loader="imageLoader"
|
|
||||||
action-handler="tagActionHandler" tag-changed="handleTagChanged(data)"></div>
|
|
||||||
|
|
@ -44,9 +44,6 @@
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
<span class="co-checked-actions" ng-if="checkedTags.checked.length">
|
<span class="co-checked-actions" ng-if="checkedTags.checked.length">
|
||||||
<a class="btn btn-default" ng-click="setTab('changes')">
|
|
||||||
<i class="fa fa-code-fork"></i><span class="text">Visualize</span>
|
|
||||||
</a>
|
|
||||||
<a class="btn btn-default"
|
<a class="btn btn-default"
|
||||||
ng-click="showHistory(true, getTagNames(checkedTags.checked))"
|
ng-click="showHistory(true, getTagNames(checkedTags.checked))"
|
||||||
ng-if="repository.can_write">
|
ng-if="repository.can_write">
|
||||||
|
|
|
||||||
|
|
@ -1,218 +0,0 @@
|
||||||
/**
|
|
||||||
* An element which displays the changes visualization panel for a repository view.
|
|
||||||
*/
|
|
||||||
angular.module('quay').directive('repoPanelChanges', function () {
|
|
||||||
var RepositoryImageTracker = function(repository, imageLoader) {
|
|
||||||
this.repository = repository;
|
|
||||||
this.imageLoader = imageLoader;
|
|
||||||
|
|
||||||
// Build a map of image ID -> image.
|
|
||||||
var images = imageLoader.images;
|
|
||||||
var imageIDMap = {};
|
|
||||||
|
|
||||||
images.forEach(function(image) {
|
|
||||||
imageIDMap[image.id] = image;
|
|
||||||
});
|
|
||||||
|
|
||||||
this.imageMap_ = imageIDMap;
|
|
||||||
};
|
|
||||||
|
|
||||||
RepositoryImageTracker.prototype.imageLink = function(image) {
|
|
||||||
return '/repository/' + this.repository.namespace + '/' +
|
|
||||||
this.repository.name + '/image/' + image;
|
|
||||||
};
|
|
||||||
|
|
||||||
RepositoryImageTracker.prototype.getImageForTag = function(tag) {
|
|
||||||
var tagData = this.lookupTag(tag);
|
|
||||||
if (!tagData) { return null; }
|
|
||||||
|
|
||||||
return this.imageMap_[tagData.image_id];
|
|
||||||
};
|
|
||||||
|
|
||||||
RepositoryImageTracker.prototype.lookupTag = function(tag) {
|
|
||||||
return this.repository.tags[tag];
|
|
||||||
};
|
|
||||||
|
|
||||||
RepositoryImageTracker.prototype.lookupImage = function(image) {
|
|
||||||
return this.imageMap_[image];
|
|
||||||
};
|
|
||||||
|
|
||||||
RepositoryImageTracker.prototype.forAllTagImages = function(tag, callback) {
|
|
||||||
var tagData = this.lookupTag(tag);
|
|
||||||
if (!tagData) { return; }
|
|
||||||
|
|
||||||
var tagImage = this.imageMap_[tagData.image_id];
|
|
||||||
if (!tagImage) { return; }
|
|
||||||
|
|
||||||
// Callback the tag's image itself.
|
|
||||||
callback(tagImage);
|
|
||||||
|
|
||||||
// Callback any parent images.
|
|
||||||
if (!tagImage.ancestors) { return; }
|
|
||||||
|
|
||||||
var ancestors = tagImage.ancestors.split('/');
|
|
||||||
for (var i = 0; i < ancestors.length; ++i) {
|
|
||||||
var image = this.imageMap_[ancestors[i]];
|
|
||||||
if (image) {
|
|
||||||
callback(image);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
RepositoryImageTracker.prototype.getTotalSize = function(tag) {
|
|
||||||
var size = 0;
|
|
||||||
this.forAllTagImages(tag, function(image) {
|
|
||||||
size += image.size;
|
|
||||||
});
|
|
||||||
return size;
|
|
||||||
};
|
|
||||||
|
|
||||||
RepositoryImageTracker.prototype.getImagesForTagBySize = function(tag) {
|
|
||||||
var images = [];
|
|
||||||
this.forAllTagImages(tag, function(image) {
|
|
||||||
images.push(image);
|
|
||||||
});
|
|
||||||
|
|
||||||
images.sort(function(a, b) {
|
|
||||||
return b.size - a.size;
|
|
||||||
});
|
|
||||||
|
|
||||||
return images;
|
|
||||||
};
|
|
||||||
|
|
||||||
///////////////////////////////////////////////////////////////////////////////////////
|
|
||||||
|
|
||||||
var directiveDefinitionObject = {
|
|
||||||
priority: 0,
|
|
||||||
templateUrl: '/static/directives/repo-view/repo-panel-changes.html',
|
|
||||||
replace: false,
|
|
||||||
transclude: false,
|
|
||||||
restrict: 'C',
|
|
||||||
scope: {
|
|
||||||
'repository': '=repository',
|
|
||||||
'selectedTags': '=selectedTags',
|
|
||||||
|
|
||||||
'imagesResource': '=imagesResource',
|
|
||||||
'imageLoader': '=imageLoader',
|
|
||||||
|
|
||||||
'isEnabled': '=isEnabled'
|
|
||||||
},
|
|
||||||
controller: function($scope, $element, $timeout, ApiService, UtilService, ImageMetadataService) {
|
|
||||||
$scope.tagNames = [];
|
|
||||||
$scope.loading = true;
|
|
||||||
|
|
||||||
$scope.$watch('selectedTags', function(selectedTags) {
|
|
||||||
if (!selectedTags) { return; }
|
|
||||||
$scope.selectedTagsSlice = selectedTags.slice(0, 10);
|
|
||||||
});
|
|
||||||
|
|
||||||
var update = function() {
|
|
||||||
if (!$scope.repository || !$scope.isEnabled) { return; }
|
|
||||||
|
|
||||||
$scope.tagNames = Object.keys($scope.repository.tags);
|
|
||||||
$scope.currentImage = null;
|
|
||||||
$scope.currentTag = null;
|
|
||||||
|
|
||||||
$scope.loading = true;
|
|
||||||
$scope.imageLoader.loadImages($scope.selectedTagsSlice, function() {
|
|
||||||
$scope.loading = false;
|
|
||||||
updateImages();
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
var updateImages = function() {
|
|
||||||
if (!$scope.repository || !$scope.imageLoader || !$scope.isEnabled) { return; }
|
|
||||||
|
|
||||||
$scope.tracker = new RepositoryImageTracker($scope.repository, $scope.imageLoader);
|
|
||||||
if ($scope.selectedTagsSlice && $scope.selectedTagsSlice.length) {
|
|
||||||
refreshTree();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
$scope.$watch('selectedTagsSlice', update)
|
|
||||||
$scope.$watch('repository', update);
|
|
||||||
$scope.$watch('isEnabled', update);
|
|
||||||
|
|
||||||
$scope.updateState = function() {
|
|
||||||
update();
|
|
||||||
};
|
|
||||||
|
|
||||||
var refreshTree = function() {
|
|
||||||
if (!$scope.repository || !$scope.imageLoader || !$scope.isEnabled) { return; }
|
|
||||||
if ($scope.selectedTagsSlice.length < 1) { return; }
|
|
||||||
|
|
||||||
$('#image-history-container').empty();
|
|
||||||
|
|
||||||
var getTagsForImage = function(image) {
|
|
||||||
return $scope.imageLoader.getTagsForImage(image);
|
|
||||||
};
|
|
||||||
|
|
||||||
var tree = new ImageHistoryTree(
|
|
||||||
$scope.repository.namespace,
|
|
||||||
$scope.repository.name,
|
|
||||||
$scope.imageLoader.images,
|
|
||||||
getTagsForImage,
|
|
||||||
UtilService.getFirstMarkdownLineAsText,
|
|
||||||
$scope.getTimeSince,
|
|
||||||
ImageMetadataService.getEscapedFormattedCommand,
|
|
||||||
function(tag) {
|
|
||||||
return $.inArray(tag, $scope.selectedTagsSlice) >= 0;
|
|
||||||
});
|
|
||||||
|
|
||||||
$scope.tree = tree.draw('image-history-container');
|
|
||||||
if ($scope.tree) {
|
|
||||||
// Give enough time for the UI to be drawn before we resize the tree.
|
|
||||||
$timeout(function() {
|
|
||||||
$scope.tree.notifyResized();
|
|
||||||
$scope.setTag($scope.selectedTagsSlice[0]);
|
|
||||||
}, 100);
|
|
||||||
|
|
||||||
// Listen for changes to the selected tag and image in the tree.
|
|
||||||
$($scope.tree).bind('tagChanged', function(e) {
|
|
||||||
$scope.$apply(function() { $scope.setTag(e.tag); });
|
|
||||||
});
|
|
||||||
|
|
||||||
$($scope.tree).bind('imageChanged', function(e) {
|
|
||||||
$scope.$apply(function() { $scope.setImage(e.image.id); });
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
$scope.setImage = function(image_id) {
|
|
||||||
$scope.currentTag = null;
|
|
||||||
$scope.currentImage = image_id;
|
|
||||||
$scope.tree.setImage(image_id);
|
|
||||||
};
|
|
||||||
|
|
||||||
$scope.setTag = function(tag) {
|
|
||||||
$scope.currentTag = tag;
|
|
||||||
$scope.currentImage = null;
|
|
||||||
$scope.tree.setTag(tag);
|
|
||||||
};
|
|
||||||
|
|
||||||
$scope.parseDate = function(dateString) {
|
|
||||||
return Date.parse(dateString);
|
|
||||||
};
|
|
||||||
|
|
||||||
$scope.getTimeSince = function(createdTime) {
|
|
||||||
return moment($scope.parseDate(createdTime)).fromNow();
|
|
||||||
};
|
|
||||||
|
|
||||||
$scope.handleTagChanged = function(data) {
|
|
||||||
data.removed.map(function(tag) {
|
|
||||||
$scope.currentImage = null;
|
|
||||||
$scope.currentTag = null;
|
|
||||||
});
|
|
||||||
|
|
||||||
data.added.map(function(tag) {
|
|
||||||
$scope.selectedTags.push(tag);
|
|
||||||
$scope.currentTag = tag;
|
|
||||||
});
|
|
||||||
|
|
||||||
update();
|
|
||||||
};
|
|
||||||
}
|
|
||||||
};
|
|
||||||
return directiveDefinitionObject;
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
@ -27,8 +27,7 @@
|
||||||
'selectedTags': [],
|
'selectedTags': [],
|
||||||
'repository': null,
|
'repository': null,
|
||||||
'imageLoader': imageLoader,
|
'imageLoader': imageLoader,
|
||||||
'builds': null,
|
'builds': null
|
||||||
'changesVisible': false
|
|
||||||
};
|
};
|
||||||
|
|
||||||
var buildPollChannel = null;
|
var buildPollChannel = null;
|
||||||
|
|
@ -147,10 +146,6 @@
|
||||||
}, 10);
|
}, 10);
|
||||||
};
|
};
|
||||||
|
|
||||||
$scope.handleChangesState = function(value) {
|
|
||||||
$scope.viewScope.changesVisible = value;
|
|
||||||
};
|
|
||||||
|
|
||||||
$scope.getImages = function(callback) {
|
$scope.getImages = function(callback) {
|
||||||
loadImages(callback);
|
loadImages(callback);
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -53,12 +53,6 @@
|
||||||
<i class="fa fa-tasks"></i>
|
<i class="fa fa-tasks"></i>
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
<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 -->
|
<!-- Admin Only Tabs -->
|
||||||
<span class="cor-tab" tab-title="Usage Logs" tab-target="#logs" tab-init="showLogs()"
|
<span class="cor-tab" tab-title="Usage Logs" tab-target="#logs" tab-init="showLogs()"
|
||||||
ng-show="viewScope.repository.can_admin">
|
ng-show="viewScope.repository.can_admin">
|
||||||
|
|
@ -98,15 +92,6 @@
|
||||||
is-enabled="buildsShown"></div>
|
is-enabled="buildsShown"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Changes -->
|
|
||||||
<div id="changes" class="tab-pane">
|
|
||||||
<div class="repo-panel-changes"
|
|
||||||
repository="viewScope.repository"
|
|
||||||
image-loader="viewScope.imageLoader"
|
|
||||||
selected-tags="viewScope.selectedTags"
|
|
||||||
is-enabled="viewScope.changesVisible"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Usage Logs -->
|
<!-- Usage Logs -->
|
||||||
<div id="logs" class="tab-pane" ng-if="viewScope.repository.can_admin">
|
<div id="logs" class="tab-pane" ng-if="viewScope.repository.can_admin">
|
||||||
<div class="logs-view" repository="viewScope.repository" makevisible="logsShown"></div>
|
<div class="logs-view" repository="viewScope.repository" makevisible="logsShown"></div>
|
||||||
|
|
|
||||||
Reference in a new issue