Update for lazy loading of repo manifest.

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

@@ -20,31 +20,15 @@
     .module('harbor.repository')
     .directive('popupDetails', popupDetails);
   
-  PopupDetailsController.$inject = ['ListManifestService', '$filter', 'dateLFilter'];
+  PopupDetailsController.$inject = [];
   
-  function PopupDetailsController(ListManifestService, $filter, dateLFilter) {
+  function PopupDetailsController() {
-    var vm = this;
        
-    vm.retrieve = retrieve;
-    
-    function retrieve() {
-      ListManifestService(vm.repoName, vm.tag)
-        .success(getManifestSuccess)
-        .error(getManifestFailed);
   }
   
-    function getManifestSuccess(data, status) {
+  popupDetails.$inject = ['ListManifestService', '$filter', 'dateLFilter'];
-	  console.log('Successful get manifest:' + data);
-	  vm.manifest = angular.fromJson(data.manifest.history[0].v1Compatibility);
-	  vm.manifest['created'] = $filter('dateL')(vm.manifest['created'], 'YYYY-MM-DD HH:mm:ss');
-    }
   
-    function getManifestFailed(data, status) {
+  function popupDetails(ListManifestService, $filter, dateLFilter) {
-      console.log('Failed to get manifest:' + data);
-    }
-  }
-  
-  function popupDetails() {
     var directive = {
       'restrict': 'E',
       'templateUrl': '/static/resources/js/components/repository/popup-details.directive.html',
@@ -62,10 +46,6 @@
     return directive;
     
     function link(scope, element, attrs, ctrl) {  
-      ctrl.retrieve();
-      scope.$watch('vm.manifest', function(current) {
-        if(current) {
-          
       element
         .popover({
           'template': '<div class="popover" role="tooltip"><div class="arrow"></div><div class="popover-title"></div><div class="popover-content"></div></div>',
@@ -73,7 +53,21 @@
           'content': generateContent,
           'html': true
         })
-            .on('shown.bs.popover', function(e){      
+        .on('show.bs.popover', function(e) {
+           var data = ListManifestService(ctrl.repoName, ctrl.tag)
+            .success(function(data) {
+              return data;
+            })
+            .error(function(data, status) {
+              console.log('Failed to get manifest of repo :' + ctrl.repoName);
+              return null;
+            });      
+           if(data) {
+             ctrl.manifest = angular.fromJson(data.responseJSON.manifest.history[0].v1Compatibility);
+             ctrl.manifest['created'] = $filter('dateL')(ctrl.manifest['created'], 'YYYY-MM-DD HH:mm:ss');
+           }
+        })
+        .on('inserted.bs.popover', function(e){      
           var self = jQuery(this);                 
           $('[type="text"]:input', self.parent())
             .on('click', function() {
@@ -83,8 +77,7 @@
             element.trigger('click');
           });
         });      
-        }
+  
-      });
       function generateContent() {
         var content =  '<form class="form-horizontal" width="100%">' +
           '<div class="form-group">' +

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

@@ -25,9 +25,12 @@
   function ListManifestService($http, $log) {
     return ListManifest;
     function ListManifest(repoName, tag) {
-      return $http
+      return $.ajax({
-        .get('/api/repositories/manifests', {
+        'url': '/api/repositories/manifests', 
-          'params': {
+        'method': 'GET',
+        'dataType': 'json',
+        'async': false,
+        'data': {
           'repo_name': repoName,
           'tag': tag,
           'version': 'v1'