update for repository tags of UI

static/ng/resources/css/repository.css

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

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

@@ -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>

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

@@ -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><popup-details repo-name="//vm.repoName//" tag="//tag//"></popup-details></td>
-          <td>docker pull //vm.repoName//://tag//</td>
+          <td>
-          <td><a href="#">Copy</a></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>

static/ng/resources/js/components/repository/popup-details.directive.html

@@ -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>

static/ng/resources/js/components/repository/popup-details.directive.js

@@ -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;
+      }
+    }
+  }
+  
+})();

static/ng/resources/js/components/repository/pull-command.directive.html

@@ -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>     

static/ng/resources/js/components/repository/pull-command.directive.js

@@ -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();
+      });
+  
+    }
+    
+  }
+  
+})();

static/ng/resources/js/services/repository/services.list-manifest.js

@@ -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
+          }
+        });
+    }
+  }
+  
+})();

views/ng/project.htm

@@ -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">  

views/ng/repository.htm

@@ -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>

views/ng/sections/headerInclude.htm

@@ -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>