fix(registry): Performance issues with Registry Manager (#2648)

* fix(registry): fetch datatable details on page/filter/order state change instead of fetching all data on first load

* fix(registry): fetch tags datatable details on state change instead of fetching all data on first load

* fix(registry): add pagination support for tags + loading display on data load

* fix(registry): debounce on text filter to avoid querying transient matching values

* refactor(registry): rebase on latest develop

* feat(registries): background tags and optimisation -- need code cleanup and for-await-of to cancel on page leave

* refactor(registry-management): code cleanup

* feat(registry): most optimized version -- need fix for add/retag

* fix(registry): addTag working without page reload

* fix(registry): retag working without reload

* fix(registry): remove tag working without reload

* fix(registry): remove repository working with latest changes

* fix(registry): disable cache on firefox

* feat(registry): use jquery for all 'most used' manifests requests

* feat(registry): retag with progression + rewrite manifest REST service to jquery

* fix(registry): remove forgotten DI

* fix(registry): pagination on repository details

* refactor(registry): info message + hidding images count until fetch has been done

* fix(registry): fix selection reset deleting selectAll function and not resetting status

* fix(registry): resetSelection was trying to set value on a getter

* fix(registry): tags were dropped when too much tags were impacted by a tag removal

* fix(registry): firefox add tag + progression

* refactor(registry): rewording of elements

* style(registry): add space between buttons and texts in status elements

* fix(registry): cancelling a retag/delete action was not removing the status panel

* fix(registry): tags count of empty repositories

* feat(registry): reload page on action cancel to avoid desync

* feat(registry): uncancellable modal on long operations

* feat(registry): modal now closes on error + modal message improvement

* feat(registries): remove empty repositories from the list

* fix(registry): various bugfixes

* feat(registry): independant timer on async actions + modal fix

app/extensions/registry-management/rest/manifest.js

@@ -1,61 +0,0 @@
-angular.module('portainer.extensions.registrymanagement')
-.factory('RegistryManifests', ['$resource', 'API_ENDPOINT_REGISTRIES', function RegistryManifestsFactory($resource, API_ENDPOINT_REGISTRIES) {
-  'use strict';
-  return $resource(API_ENDPOINT_REGISTRIES + '/:id/v2/:repository/manifests/:tag', {}, {
-    get: {
-      method: 'GET',
-      params: {
-        id: '@id',
-        repository: '@repository',
-        tag: '@tag'
-      },
-      headers: {
-        'Cache-Control': 'no-cache'
-      },
-      transformResponse: function (data, headers) {
-        var response = angular.fromJson(data);
-        response.digest = headers('docker-content-digest');
-        return response;
-      }
-    },
-    getV2: {
-      method: 'GET',
-      params: {
-        id: '@id',
-        repository: '@repository',
-        tag: '@tag'
-      },
-      headers: {
-        'Accept': 'application/vnd.docker.distribution.manifest.v2+json',
-        'Cache-Control': 'no-cache'
-      },
-      transformResponse: function (data, headers) {
-        var response = angular.fromJson(data);
-        response.digest = headers('docker-content-digest');
-        return response;
-      }
-    },
-    put: {
-      method: 'PUT',
-      params: {
-        id: '@id',
-        repository: '@repository',
-        tag: '@tag'
-      },
-      headers: {
-        'Content-Type': 'application/vnd.docker.distribution.manifest.v2+json'
-      },
-      transformRequest: function (data) {
-        return angular.toJson(data, 3);
-      }
-    },
-    delete: {
-      method: 'DELETE',
-      params: {
-        id: '@id',
-        repository: '@repository',
-        tag: '@tag'
-      }
-    }
-  });
-}]);

app/extensions/registry-management/rest/manifestJquery.js

@@ -0,0 +1,89 @@
+/**
+ * This service has been created to request the docker registry API
+ * without triggering AngularJS digest cycles
+ * For more information, see https://github.com/portainer/portainer/pull/2648#issuecomment-505644913
+ */
+
+import $ from 'jquery';
+
+angular.module('portainer.extensions.registrymanagement')
+.factory('RegistryManifestsJquery', ['API_ENDPOINT_REGISTRIES',
+ function RegistryManifestsJqueryFactory(API_ENDPOINT_REGISTRIES) {
+  'use strict';
+
+  function buildUrl(params) {
+    return API_ENDPOINT_REGISTRIES + '/' + params.id + '/v2/' + params.repository + '/manifests/'+ params.tag;
+  }
+
+  function _get(params) {
+    return new Promise((resolve, reject) => {
+      $.ajax({
+        type: 'GET',
+        dataType: 'JSON',
+        url: buildUrl(params),
+        headers: {
+          'Cache-Control': 'no-cache',
+          'If-Modified-Since':'Mon, 26 Jul 1997 05:00:00 GMT'
+        },
+        success: (result) => resolve(result),
+        error: (error) => reject(error)
+      })
+    });
+  }
+
+  function _getV2(params) {
+    return new Promise((resolve, reject) => {
+      $.ajax({
+        type: 'GET',
+        dataType: 'JSON',
+        url: buildUrl(params),
+        headers: {
+          'Accept': 'application/vnd.docker.distribution.manifest.v2+json',
+          'Cache-Control': 'no-cache',
+          'If-Modified-Since':'Mon, 26 Jul 1997 05:00:00 GMT'
+        },
+        success: (result, status, request) => {
+          result.digest = request.getResponseHeader('Docker-Content-Digest');
+          resolve(result);
+        },
+        error: (error) => reject(error)
+      })
+    });
+  }
+
+  function _put(params, data) {
+    const transformRequest = (d) => {
+      return angular.toJson(d, 3);
+    }
+    return new Promise((resolve, reject) => {
+      $.ajax({
+        type: 'PUT',
+        url: buildUrl(params),
+        headers: {
+          'Content-Type': 'application/vnd.docker.distribution.manifest.v2+json'
+        },
+        data: transformRequest(data),
+        success: (result) => resolve(result),
+        error: (error) => reject(error)
+      });
+    })
+  }
+
+  function _delete(params) {
+    return new Promise((resolve, reject) => {
+      $.ajax({
+        type: 'DELETE',
+        url: buildUrl(params),
+        success: (result) => resolve(result),
+        error: (error) => reject(error)
+      });
+    })
+  }
+
+  return {
+    get: _get,
+    getV2: _getV2,
+    put: _put,
+    delete: _delete
+  }
+}]);

app/extensions/registry-management/rest/tags.js

@@ -1,10 +1,13 @@
+import linkGetResponse from './transform/linkGetResponse';
+
 angular.module('portainer.extensions.registrymanagement')
 .factory('RegistryTags', ['$resource', 'API_ENDPOINT_REGISTRIES', function RegistryTagsFactory($resource, API_ENDPOINT_REGISTRIES) {
   'use strict';
   return $resource(API_ENDPOINT_REGISTRIES + '/:id/v2/:repository/tags/list', {}, {
     get: {
       method: 'GET',
-      params: { id: '@id', repository: '@repository' }
+      params: { id: '@id', repository: '@repository' },
+      transformResponse: linkGetResponse
     }
   });
 }]);