From d18c8d0e8895995bc84bc8963aa4bbb41b30508b Mon Sep 17 00:00:00 2001
From: cong meng <mcpacino@gmail.com>
Date: Tue, 19 Oct 2021 14:54:53 +1300
Subject: [PATCH] fix(registry) EE-1861 improve registry selection (#5925)

* fix(registry) EE-1861 improve registry selection (#5899)

* fix(registry) EE-1861 hide anonymous dockerhub registry if user has an authenticated one

* fix(registry) EE-1861 pick up a best match dockerhub registry

* fix(registry) EE-1861 set the anonymous registry as default if it is shown

* fix(registry) EE-1861 refactor how to match registry

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

* 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>
---
 .../por-image-registry.controller.js          | 12 +++-
 .../imageRegistry/por-image-registry.html     |  2 +-
 .../views/images/edit/imageController.js      | 35 +++++++---
 app/portainer/services/api/registryService.js | 65 ++++++++++++++++---
 app/portainer/services/modalService.js        | 11 ++++
 .../services/registryModalService.js          | 39 +++++++++++
 6 files changed, 141 insertions(+), 23 deletions(-)
 create mode 100644 app/portainer/services/registryModalService.js

diff --git a/app/docker/components/imageRegistry/por-image-registry.controller.js b/app/docker/components/imageRegistry/por-image-registry.controller.js
index 055249917..3e07c77bc 100644
--- a/app/docker/components/imageRegistry/por-image-registry.controller.js
+++ b/app/docker/components/imageRegistry/por-image-registry.controller.js
@@ -77,13 +77,19 @@ class porImageRegistryController {
   async reloadRegistries() {
     return this.$async(async () => {
       try {
-        const registries = await this.EndpointService.registries(this.endpoint.Id, this.namespace);
-        this.registries = _.concat(this.defaultRegistry, registries);
+        let showDefaultRegistry = false;
+        this.registries = await this.EndpointService.registries(this.endpoint.Id, this.namespace);
+
+        // hide default(anonymous) dockerhub registry if user has an authenticated one
+        if (!this.registries.some((registry) => registry.Type === RegistryTypes.DOCKERHUB)) {
+          showDefaultRegistry = true;
+          this.registries.push(this.defaultRegistry);
+        }
 
         const id = this.model.Registry.Id;
         const registry = _.find(this.registries, { Id: id });
         if (!registry) {
-          this.model.Registry = this.defaultRegistry;
+          this.model.Registry = showDefaultRegistry ? this.defaultRegistry : this.registries[0];
         }
       } catch (err) {
         this.Notifications.error('Failure', err, 'Unable to retrieve registries');
diff --git a/app/docker/components/imageRegistry/por-image-registry.html b/app/docker/components/imageRegistry/por-image-registry.html
index 6fbcd0e21..b3a485ba1 100644
--- a/app/docker/components/imageRegistry/por-image-registry.html
+++ b/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"
diff --git a/app/docker/views/images/edit/imageController.js b/app/docker/views/images/edit/imageController.js
index e4ae295d6..8d7a467a6 100644
--- a/app/docker/views/images/edit/imageController.js
+++ b/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),
diff --git a/app/portainer/services/api/registryService.js b/app/portainer/services/api/registryService.js
index 34b8e882f..a68bf2555 100644
--- a/app/portainer/services/api/registryService.js
+++ b/app/portainer/services/api/registryService.js
@@ -22,6 +22,8 @@ angular.module('portainer.app').factory('RegistryService', [
       createRegistry,
       createGitlabRegistries,
       retrievePorRegistryModelFromRepository,
+      retrievePorRegistryModelFromRepositoryWithRegistries,
+      loadRegistriesForDropdown,
     };
 
     function registries() {
@@ -107,17 +109,45 @@ angular.module('portainer.app').factory('RegistryService', [
       return url;
     }
 
+    // findBestMatchRegistry finds out the best match registry for repository
+    // matching precedence:
+    // 1. registryId matched
+    // 2. both domain name and username matched (for dockerhub only)
+    // 3. only URL matched
+    // 4. pick up the first dockerhub registry
+    function findBestMatchRegistry(repository, registries, registryId) {
+      let match2, match3, match4;
+
+      for (const registry of registries) {
+        if (registry.Id == registryId) {
+          return registry;
+        }
+
+        if (registry.Type === RegistryTypes.DOCKERHUB) {
+          // try to match repository examples:
+          //   <USERNAME>/nginx:latest
+          //   docker.io/<USERNAME>/nginx:latest
+          if (repository.startsWith(registry.Username + '/') || repository.startsWith(getURL(registry) + '/' + registry.Username + '/')) {
+            match2 = registry;
+          }
+
+          // try to match repository examples:
+          //   portainer/portainer-ee:latest
+          //   <NON-USERNAME>/portainer-ee:latest
+          match4 = match4 || registry;
+        }
+
+        if (_.includes(repository, getURL(registry))) {
+          match3 = registry;
+        }
+      }
+
+      return match2 || match3 || match4;
+    }
+
     function retrievePorRegistryModelFromRepositoryWithRegistries(repository, registries, registryId) {
       const model = new PorImageRegistryModel();
-      const registry = registries.find((reg) => {
-        if (registryId) {
-          return reg.Id === registryId;
-        }
-        if (reg.Type === RegistryTypes.DOCKERHUB) {
-          return _.includes(repository, reg.Username);
-        }
-        return _.includes(repository, getURL(reg));
-      });
+      const registry = findBestMatchRegistry(repository, registries, registryId);
       if (registry) {
         const url = getURL(registry);
         let lastIndex = repository.lastIndexOf(url);
@@ -148,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 };
+        }
+      });
+    }
   },
 ]);
diff --git a/app/portainer/services/modalService.js b/app/portainer/services/modalService.js
index 9203d6248..e7d24ec38 100644
--- a/app/portainer/services/modalService.js
+++ b/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;
   },
 ]);
diff --git a/app/portainer/services/registryModalService.js b/app/portainer/services/registryModalService.js
new file mode 100644
index 000000000..6690cb771
--- /dev/null
+++ b/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;
+}