Upstream/harbor
1
0
Fork 0
mirror of https://github.com/goharbor/harbor.git synced 2024-12-18 14:47:38 +01:00
Code Issues Projects Releases Wiki Activity

update for repository tags of UI

Browse Source
This commit is contained in:
kunw 2016-05-05 18:35:52 +08:00
parent 4ff902fa43
commit 3b961dd5b2
14 changed files with 2821 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
static/ng/resources/css/repository.css
View File

@ -100,6 +100,11 @@
.input-group .form-control {
z-index: 1;
}
.well {
padding: 12px;
}
.popover{
max-width: 500px;
}

BIN
static/ng/resources/img/Harbor_Logo_rec.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 25 KiB

After

Width:  |  Height:  |  Size: 8.4 KiB

2
static/ng/resources/js/components/project-member/edit-project-member.directive.html
View File

@ -7,5 +7,5 @@
<a ng-show="vm.userId != vm.currentUserId" href="javascript:void(0);" ng-click="vm.cancelUpdate()" title="Cancel">
<span ng-if="vm.editMode" class="glyphicon glyphicon-repeat"></span>
</a>
<a ng-show="vm.userId != vm.currentUserId" href="javascript:void(0);" ng-click="vm.deleteProjectMember({projectId: vm.projectId, userId: vm.userId})" title="Delete"><span class="glyphicon glyphicon-trash"></span></a>
<a ng-show="vm.userId != vm.currentUserId && !vm.editMode" href="javascript:void(0);" ng-click="vm.deleteProjectMember({projectId: vm.projectId, userId: vm.userId})" title="Delete"><span class="glyphicon glyphicon-trash"></span></a>
</td>

10
static/ng/resources/js/components/repository/list-tag.directive.html
View File

@ -5,14 +5,16 @@
<th width="20%"><span class="glyphicon glyphicon-tags"></span> Tag</th>
<th width="30%">Image Details</th>
<th width="40%">Pull Command</th>
<th width="10%"></th>
<th width="10%">Operation</th>
</thead>
<tbody>
<tr ng-repeat="tag in vm.tags">
<td>//tag//</td>
<td><a href="#"><span class="glyphicon glyphicon-info-sign"></span></a></td>
<td>docker pull //vm.repoName//://tag//</td>
<td><a href="#">Copy</a></td>
<td><popup-details repo-name="//vm.repoName//" tag="//tag//"></popup-details></td>
<td>
<pull-command repo-name="//vm.repoName//" tag="//tag//"></pull-command>
</td>
<td><a href="javascript:void(0);"><span class="glyphicon glyphicon-trash"></span></a></td>
</tr>
</tbody>
</table>

4
static/ng/resources/js/components/repository/popup-details.directive.html Normal file
View File

@ -0,0 +1,4 @@
<a href="javascript:void(0);">
<span tabindex="0" class="glyphicon glyphicon-info-sign" role="button" data-trigger="focus" data-toggle="popover" data-placement="right">
</span>
</a>

84
static/ng/resources/js/components/repository/popup-details.directive.js Normal file
View File

@ -0,0 +1,84 @@
(function() {
'use strict';
angular
.module('harbor.repository')
.directive('popupDetails', popupDetails);
PopupDetailsController.$inject = ['ListManifestService', '$filter', 'dateLFilter'];
function PopupDetailsController(ListManifestService, $filter, dateLFilter) {
var vm = this;
vm.retrieve = retrieve;
function retrieve() {
ListManifestService(vm.repoName, vm.tag)
.success(getManifestSuccess)
.error(getManifestFailed);
}
function getManifestSuccess(data, status) {
console.log('Successful get manifest:' + data);
vm.manifest = data;
vm.manifest['Created'] = $filter('dateL')(vm.manifest['Created'], 'YYYY-MM-DD HH:mm:ss');
}
function getManifestFailed(data, status) {
console.log('Failed get manifest:' + data);
}
}
function popupDetails() {
var directive = {
'restrict': 'E',
'templateUrl': '/static/ng/resources/js/components/repository/popup-details.directive.html',
'scope': {
'repoName': '@',
'tag': '@'
},
'link': link,
'controller': PopupDetailsController,
'controllerAs': 'vm',
'bindToController': true
};
return directive;
function link(scope, element, attrs, ctrl) {
ctrl.retrieve();
scope.$watch('vm.manifest', function(current, origin) {
if(current) {
element.find('span').popover({
'content': generateContent,
'html': true
});
}
});
function generateContent() {
var content =
'<form class="form-horizontal">' +
'<div class="form-group">' +
'<label class="col-sm-3 control-label">Id</label>' +
'<div class="col-sm-9"><p class="form-control-static long-line">' + ctrl.manifest['Id'] + '</p></div></div>' +
'<div class="form-group"><label class="col-sm-3 control-label">Parent</label>' +
'<div class="col-sm-9"><p class="form-control-static long-line">' + ctrl.manifest['Parent'] + '</p></div></div>' +
'<div class="form-group"><label class="col-sm-3 control-label">Created</label>' +
'<div class="col-sm-9"><p class="form-control-static">' + ctrl.manifest['Created'] + '</p></div></div>' +
'<div class="form-group"><label class="col-sm-3 control-label">Duration Days</label>' +
'<div class="col-sm-9"><p class="form-control-static">' + (ctrl.manifest['Duration Days'] == '' ? 'N/A' : ctrl.manifest['Duration Days']) + ' days</p></div></div>' +
'<div class="form-group"><label class="col-sm-3 control-label">Author</label>' +
'<div class="col-sm-9"><p class="form-control-static">' + (ctrl.manifest['Author'] == '' ? 'N/A' : ctrl.manifest['Author']) + '</p></div></div>' +
'<div class="form-group"><label class="col-sm-3 control-label">Architecture</label>' +
'<div class="col-sm-9"><p class="form-control-static">' + (ctrl.manifest['Architecture'] == '' ? 'N/A' : ctrl.manifest['Architecture']) + '</p></div></div>' +
'<div class="form-group"><label class="col-sm-3 control-label">Docker Version</label>' +
'<div class="col-sm-9"><p class="form-control-static">' + (ctrl.manifest['Docker Version'] == '' ? 'N/A' : ctrl.manifest['Docker Version']) + '</p></div></div>' +
'<div class="form-group"><label class="col-sm-3 control-label">OS</label>' +
'<div class="col-sm-9"><p class="form-control-static">' + (ctrl.manifest['OS'] == '' ? 'N/A' : ctrl.manifest['OS']) + '</p></div></div>' +
'</form>';
return content;
}
}
}
})();

10
static/ng/resources/js/components/repository/pull-command.directive.html Normal file
View File

@ -0,0 +1,10 @@
<form class="form-inline">
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" id="//vm.repoName//-//vm.tag//" value="docker pull //vm.repoName//://vm.tag//" readonly="readonly" size="30">
<div class="input-group-addon">
<a href="javascript:void(0);" data-clipboard-target="//vm.repoName//-//vm.tag//"><span class="glyphicon glyphicon-duplicate" data-toggle="tooltip" data-placement="right" title="Copied!"></span></a>
</div>
</div>
</div>
</form>

55
static/ng/resources/js/components/repository/pull-command.directive.js Normal file
View File

@ -0,0 +1,55 @@
(function() {
'use strict';
angular
.module('harbor.repository')
.directive('pullCommand', pullCommand);
function PullCommandController() {
}
function pullCommand() {
var directive = {
'restrict': 'E',
'templateUrl': '/static/ng/resources/js/components/repository/pull-command.directive.html',
'scope': {
'repoName': '@',
'tag': '@'
},
'link': link,
'controller': PullCommandController,
'controllerAs': 'vm',
'bindToController': true
};
return directive;
function link(scope, element, attrs, ctrl) {
ZeroClipboard.config( { swfPath: "/static/ng/vendors/zc/v2.2.0/ZeroClipboard.swf" } );
var clip = new ZeroClipboard(element.find('a'));
element.find('span').tooltip({'trigger': 'click'});
clip.on("ready", function() {
console.log("Flash movie loaded and ready.");
this.on("aftercopy", function(event) {
console.log("Copied text to clipboard: " + event.data["text/plain"]);
element.find('span').tooltip('show');
setTimeout(function(){
element.find('span').tooltip('hide');
}, 1000);
});
});
clip.on("error", function(event) {
console.log('error[name="' + event.name + '"]: ' + event.message);
ZeroClipboard.destroy();
});
}
}
})();

24
static/ng/resources/js/services/repository/services.list-manifest.js Normal file
View File

@ -0,0 +1,24 @@
(function() {
'use strict';
angular
.module('harbor.services.repository')
.factory('ListManifestService', ListManifestService);
ListManifestService.$inject = ['$http', '$log'];
function ListManifestService($http, $log) {
return ListManifest;
function ListManifest(repoName, tag) {
return $http
.get('/api/repositories/manifests', {
'params': {
'repo_name': repoName,
'tag': tag
}
});
}
}
})();

2610
static/ng/vendors/zc/v2.2.0/ZeroClipboard.js vendored Normal file
View File

File diff suppressed because it is too large Load Diff

BIN
static/ng/vendors/zc/v2.2.0/ZeroClipboard.swf vendored Normal file
View File

Binary file not shown.

10
views/ng/project.htm
View File

@ -3,7 +3,12 @@
<div class="row extend-height">
<div class="col-xs-12 col-md-12 extend-height">
<div class="section">
<h4 class="page-header"><a href="#" ng-click="vm.togglePublicity({publicity: 0})">My Projects</a><span class="gutter">|</span><a href="#" class="title-color" ng-click="vm.togglePublicity({publicity: 1})">Public Projects</a></h4>
<h4 class="page-header">
<span ng-show="!vm.publicity">My Projects</span>
<a ng-show="vm.publicity" href="#" ng-click="vm.togglePublicity({publicity: 0})">My Projects</a>
<span class="gutter">|</span>
<span ng-show="vm.publicity">Public Projects</span>
<a ng-show="!vm.publicity" href="#" class="title-color" ng-click="vm.togglePublicity({publicity: 1})">Public Projects</a></h4>
<div class="search-pane">
<div class="form-inline">
<div class="input-group">
@ -12,7 +17,8 @@
<button class="btn btn-primary" type="button" ng-click="vm.searchProject()"><span class="glyphicon glyphicon-search"></span></button>
</span>
</div>
<button class="btn btn-success" type="button" ng-show="vm.showAddButton()" ng-click="vm.showAddProject()"><span class="glyphicon glyphicon-plus"></span>New Project</button>
<button ng-if="vm.isOpen" class="btn btn-default" disabled="disabled" type="button"><span class="glyphicon glyphicon-plus"></span>New Project</button>
<button ng-if="!vm.isOpen" class="btn btn-success" type="button" ng-show="vm.showAddButton()" ng-click="vm.showAddProject()"><span class="glyphicon glyphicon-plus"></span>New Project</button>
</div>
</div>
<div class="pane project-pane">

11
views/ng/repository.htm
View File

@ -3,14 +3,19 @@
<div class="row extend-height">
<div class="col-xs-12 col-md-12 extend-height">
<div class="section">
<h4 class="page-header">My Projects<span class="gutter">|</span><a href="#" class="title-color">Public Projects</a></h4>
<h4 class="page-header">
<span ng-show="!vm.publicity">My Projects</span>
<a ng-show="vm.publicity" href="#/repositories?project_id=//vm.selectedProject.ProjectId//" class="title-color" ng-click="vm.togglePublicity({publicity: false})">My Projects</a>
<span class="gutter">|</span>
<span ng-show="vm.publicity">Public Projects</span>
<a ng-show="!vm.publicity" href="#/repositories?project_id=//vm.selectedProject.ProjectId//" class="title-color" ng-click="vm.togglePublicity({publicity: true})">Public Projects</a></h4>
<div class="switch-pane">
<switch-pane-projects is-open="vm.open" selected-project="vm.selectedProject"></switch-pane-projects>
<span>
<navigation-details is-open="vm.open" selected-project="vm.selectedProject"></navigation-details>
<navigation-details is-open="vm.open" selected-project="vm.selectedProject" ng-show="vm.isProjectMember"></navigation-details>
</span>
</div>
<retrieve-projects is-open="vm.open" selected-project="vm.selectedProject"></retrieve-projects>
<retrieve-projects is-open="vm.open" selected-project="vm.selectedProject" is-project-member="vm.isProjectMember" publicity="vm.publicity"></retrieve-projects>
<!-- Tab panes -->
<div class="tab-content" ng-click="vm.closeRetrievePane()">
<ng-view></ng-view>

6
views/ng/sections/headerInclude.htm
View File

@ -10,6 +10,8 @@
<link rel="stylesheet" href="/static/ng/vendors/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css" />
<script src="/static/ng/vendors/spinner/spinner.min.js"></script>
<script src="/static/ng/vendors/zc/v2.2.0/ZeroClipboard.js"></script>
<!-- Latest compiled and minified CSS -->
<!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">-->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
@ -78,8 +80,10 @@
<script src="/static/ng/resources/js/services/repository/services.repository.module.js"></script>
<script src="/static/ng/resources/js/services/repository/services.list-repository.js"></script>
<script src="/static/ng/resources/js/services/repository/services.list-tag.js"></script>
<script src="/static/ng/resources/js/services/repository/services.list-manifest.js"></script>
<script src="/static/ng/resources/js/services/project-member/services.project-member.module.js"></script>
<script src="/static/ng/resources/js/services/project-member/services.current-project-member.js"></script>
<script src="/static/ng/resources/js/services/project-member/services.add-project-member.js"></script>
<script src="/static/ng/resources/js/services/project-member/services.list-project-member.js"></script>
<script src="/static/ng/resources/js/services/project-member/services.edit-project-member.js"></script>
@ -109,6 +113,8 @@
<script src="/static/ng/resources/js/components/repository/repository.module.js"></script>
<script src="/static/ng/resources/js/components/repository/list-repository.directive.js"></script>
<script src="/static/ng/resources/js/components/repository/list-tag.directive.js"></script>
<script src="/static/ng/resources/js/components/repository/popup-details.directive.js"></script>
<script src="/static/ng/resources/js/components/repository/pull-command.directive.js"></script>
<script src="/static/ng/resources/js/components/project-member/project-member.module.js"></script>
<script src="/static/ng/resources/js/components/project-member/project-member.config.js"></script>