fix(registry) EE-1861 improve registry selection (#5921)

* fix(registry) EE-1861 fail to select registry with same name

* fix(registry) EE-1861 show registry modal when pull and push image

* fix(registry) EE-1861 cleanup code

Co-authored-by: Simon Meng <simon.meng@portainer.io>

app/docker/components/imageRegistry/por-image-registry.html

@@ -6,7 +6,7 @@
     </label>
     <div ng-class="$ctrl.inputClass">
       <select
-        ng-options="registry as registry.Name for registry in $ctrl.registries track by registry.Name"
+        ng-options="registry as registry.Name for registry in $ctrl.registries track by registry.Id"
         ng-model="$ctrl.model.Registry"
         id="image_registry"
         class="form-control"

app/docker/views/images/edit/imageController.js

@@ -17,6 +17,8 @@ angular.module('portainer.docker').controller('ImageController', [
   'FileSaver',
   'Blob',
   'endpoint',
+  'EndpointService',
+  'RegistryModalService',
   function (
     $async,
     $q,
@@ -32,7 +34,9 @@ angular.module('portainer.docker').controller('ImageController', [
     ModalService,
     FileSaver,
     Blob,
-    endpoint
+    endpoint,
+    EndpointService,
+    RegistryModalService
   ) {
     $scope.endpoint = endpoint;
     $scope.isAdmin = Authentication.isAdmin();
@@ -84,11 +88,13 @@ angular.module('portainer.docker').controller('ImageController', [
 
     async function pushTag(repository) {
       return $async(async () => {
-        $('#uploadResourceHint').show();
         try {
-          const registryModel = await RegistryService.retrievePorRegistryModelFromRepository(repository, endpoint.Id);
-          await ImageService.pushImage(registryModel);
-          Notifications.success('Image successfully pushed', repository);
+          const registryModel = await RegistryModalService.registryModal(repository, $scope.registries);
+          if (registryModel) {
+            $('#uploadResourceHint').show();
+            await ImageService.pushImage(registryModel);
+            Notifications.success('Image successfully pushed', repository);
+          }
         } catch (err) {
           Notifications.error('Failure', err, 'Unable to push image to repository');
         } finally {
@@ -100,11 +106,13 @@ angular.module('portainer.docker').controller('ImageController', [
     $scope.pullTag = pullTag;
     async function pullTag(repository) {
       return $async(async () => {
-        $('#downloadResourceHint').show();
         try {
-          const registryModel = await RegistryService.retrievePorRegistryModelFromRepository(repository, endpoint.Id);
-          await ImageService.pullImage(registryModel);
-          Notifications.success('Image successfully pulled', repository);
+          const registryModel = await RegistryModalService.registryModal(repository, $scope.registries);
+          if (registryModel) {
+            $('#downloadResourceHint').show();
+            await ImageService.pullImage(registryModel);
+            Notifications.success('Image successfully pulled', repository);
+          }
         } catch (err) {
           Notifications.error('Failure', err, 'Unable to pull image from repository');
         } finally {
@@ -171,8 +179,15 @@ angular.module('portainer.docker').controller('ImageController', [
       });
     };
 
-    function initView() {
+    async function initView() {
       HttpRequestHelper.setPortainerAgentTargetHeader($transition$.params().nodeName);
+
+      try {
+        $scope.registries = await RegistryService.loadRegistriesForDropdown(endpoint.Id);
+      } catch (err) {
+        this.Notifications.error('Failure', err, 'Unable to load registries');
+      }
+
       $q.all({
         image: ImageService.image($transition$.params().id),
         history: ImageService.history($transition$.params().id),

app/portainer/services/api/registryService.js

@@ -22,6 +22,8 @@ angular.module('portainer.app').factory('RegistryService', [
       createRegistry,
       createGitlabRegistries,
       retrievePorRegistryModelFromRepository,
+      retrievePorRegistryModelFromRepositoryWithRegistries,
+      loadRegistriesForDropdown,
     };
 
     function registries() {
@@ -114,7 +116,7 @@ angular.module('portainer.app').factory('RegistryService', [
     // 3. only URL matched
     // 4. pick up the first dockerhub registry
     function findBestMatchRegistry(repository, registries, registryId) {
-      let highMatch, lowMatch;
+      let match2, match3, match4;
 
       for (const registry of registries) {
         if (registry.Id == registryId) {
@@ -126,21 +128,21 @@ angular.module('portainer.app').factory('RegistryService', [
           //   <USERNAME>/nginx:latest
           //   docker.io/<USERNAME>/nginx:latest
           if (repository.startsWith(registry.Username + '/') || repository.startsWith(getURL(registry) + '/' + registry.Username + '/')) {
-            highMatch = registry;
+            match2 = registry;
           }
 
           // try to match repository examples:
           //   portainer/portainer-ee:latest
           //   <NON-USERNAME>/portainer-ee:latest
-          lowMatch = lowMatch || registry;
+          match4 = match4 || registry;
         }
 
         if (_.includes(repository, getURL(registry))) {
-          lowMatch = registry;
+          match3 = registry;
         }
       }
 
-      return highMatch || lowMatch;
+      return match2 || match3 || match4;
     }
 
     function retrievePorRegistryModelFromRepositoryWithRegistries(repository, registries, registryId) {
@@ -176,5 +178,22 @@ angular.module('portainer.app').factory('RegistryService', [
         }
       });
     }
+
+    function loadRegistriesForDropdown(endpointId, namespace) {
+      return $async(async () => {
+        try {
+          const registries = await EndpointService.registries(endpointId, namespace);
+
+          // hide default(anonymous) dockerhub registry if user has an authenticated one
+          if (!registries.some((registry) => registry.Type === RegistryTypes.DOCKERHUB)) {
+            registries.push(new DockerHubViewModel());
+          }
+
+          return registries;
+        } catch (err) {
+          throw { msg: 'Unable to retrieve the registries', err: err };
+        }
+      });
+    }
   },
 ]);

app/portainer/services/modalService.js

@@ -308,6 +308,17 @@ angular.module('portainer.app').factory('ModalService', [
       );
     };
 
+    service.selectRegistry = function (options) {
+      var box = bootbox.prompt({
+        title: 'Which registry do you want to use?',
+        inputType: 'select',
+        value: options.defaultValue,
+        inputOptions: options.options,
+        callback: options.callback,
+      });
+      applyBoxCSS(box);
+    };
+
     return service;
   },
 ]);

app/portainer/services/registryModalService.js

@@ -0,0 +1,39 @@
+import _ from 'lodash';
+
+angular.module('portainer.app').factory('RegistryModalService', ModalServiceFactory);
+
+function ModalServiceFactory($q, ModalService, RegistryService) {
+  const service = {};
+
+  function registries2Options(registries) {
+    return registries.map((r) => ({
+      text: r.Name,
+      value: String(r.Id),
+    }));
+  }
+
+  service.registryModal = async function (repository, registries) {
+    const deferred = $q.defer();
+
+    const options = registries2Options(registries);
+    const registryModel = RegistryService.retrievePorRegistryModelFromRepositoryWithRegistries(repository, registries);
+    const defaultValue = String(_.get(registryModel, 'Registry.Id', '0'));
+
+    ModalService.selectRegistry({
+      options,
+      defaultValue,
+      callback: (registryId) => {
+        if (registryId) {
+          const registryModel = RegistryService.retrievePorRegistryModelFromRepositoryWithRegistries(repository, registries, registryId);
+          deferred.resolve(registryModel);
+        } else {
+          deferred.resolve(null);
+        }
+      },
+    });
+
+    return deferred.promise;
+  };
+
+  return service;
+}