feat(app/docker): backport docker/components changes

app/docker/components/dockerSidebarContent/dockerSidebarContent.html

@@ -35,17 +35,20 @@
 <li class="sidebar-list" ng-if="$ctrl.standaloneManagement && $ctrl.adminAccess && !$ctrl.offlineMode">
   <a ui-sref="docker.events({endpointId: $ctrl.endpointId})" ui-sref-active="active">Events <span class="menu-icon fa fa-history fa-fw"></span></a>
 </li>
-<li class="sidebar-list" ng-if="$ctrl.swarmManagement">
-  <a ui-sref="docker.swarm({endpointId: $ctrl.endpointId})" ui-sref-active="active">Swarm <span class="menu-icon fa fa-object-group fa-fw"></span></a>
+<li class="sidebar-list">
+  <a ng-if="$ctrl.standaloneManagement" ui-sref="docker.host({endpointId: $ctrl.endpointId})" ui-sref-active="active">Host <span class="menu-icon fa fa-th fa-fw"></span></a>
+  <a ng-if="$ctrl.swarmManagement" ui-sref="docker.swarm({endpointId: $ctrl.endpointId})" ui-sref-active="active">Swarm <span class="menu-icon fa fa-object-group fa-fw"></span></a>
 
-  <div class="sidebar-sublist" ng-if="$ctrl.adminAccess && ['docker.featuresConfiguration', 'docker.swarm'].includes($ctrl.currentRouteName)">
+  <div
+    class="sidebar-sublist"
+    ng-if="$ctrl.adminAccess && ['docker.swarm', 'docker.host', 'docker.registries', 'docker.registries.access', 'docker.featuresConfiguration'].includes($ctrl.currentRouteName)"
+  >
     <a ui-sref="docker.featuresConfiguration({endpointId: $ctrl.endpointId})" ui-sref-active="active">Setup</a>
   </div>
-</li>
-<li class="sidebar-list" ng-if="$ctrl.standaloneManagement">
-  <a ui-sref="docker.host({endpointId: $ctrl.endpointId})" ui-sref-active="active">Host <span class="menu-icon fa fa-th fa-fw"></span></a>
-
-  <div class="sidebar-sublist" ng-if="$ctrl.adminAccess && ['docker.featuresConfiguration', 'docker.host'].includes($ctrl.currentRouteName)">
-    <a ui-sref="docker.featuresConfiguration({endpointId: $ctrl.endpointId})" ui-sref-active="active">Setup</a>
+  <div
+    class="sidebar-sublist"
+    ng-if="$ctrl.adminAccess && ['docker.swarm', 'docker.host', 'docker.registries', 'docker.registries.access', 'docker.featuresConfiguration'].includes($ctrl.currentRouteName)"
+  >
+    <a ui-sref="docker.registries({endpointId: $ctrl.endpointId})" ui-sref-active="active">Registries</a>
   </div>
 </li>

app/docker/components/imageRegistry/por-image-registry.controller.js

@@ -5,18 +5,21 @@ import { RegistryTypes } from '@/portainer/models/registryTypes';
 
 class porImageRegistryController {
   /* @ngInject */
-  constructor($async, $scope, ImageHelper, RegistryService, DockerHubService, ImageService, Notifications) {
+  constructor($async, $scope, ImageHelper, RegistryService, EndpointService, ImageService, Notifications) {
     this.$async = $async;
     this.$scope = $scope;
     this.ImageHelper = ImageHelper;
     this.RegistryService = RegistryService;
-    this.DockerHubService = DockerHubService;
+    this.EndpointService = EndpointService;
     this.ImageService = ImageService;
     this.Notifications = Notifications;
 
-    this.onInit = this.onInit.bind(this);
     this.onRegistryChange = this.onRegistryChange.bind(this);
 
+    this.registries = [];
+    this.images = [];
+    this.defaultRegistry = new DockerHubViewModel();
+
     this.$scope.$watch(() => this.model.Registry, this.onRegistryChange);
   }
 
@@ -40,7 +43,7 @@ class porImageRegistryController {
       const registryImages = _.filter(this.images, (image) => _.includes(image, url));
       images = _.map(registryImages, (image) => _.replace(image, new RegExp(url + '/?'), ''));
     } else {
-      const registries = _.filter(this.availableRegistries, (reg) => this.isKnownRegistry(reg));
+      const registries = _.filter(this.registries, (reg) => this.isKnownRegistry(reg));
       const registryImages = _.flatMap(registries, (registry) => _.filter(this.images, (image) => _.includes(image, registry.URL)));
       const imagesWithoutKnown = _.difference(this.images, registryImages);
       images = _.filter(imagesWithoutKnown, (image) => !this.ImageHelper.imageContainsURL(image));
@@ -63,29 +66,49 @@ class porImageRegistryController {
     return this.getRegistryURL(this.model.Registry) || 'docker.io';
   }
 
-  async onInit() {
-    try {
-      const [registries, dockerhub, images] = await Promise.all([
-        this.RegistryService.registries(),
-        this.DockerHubService.dockerhub(),
-        this.autoComplete ? this.ImageService.images() : [],
-      ]);
-      this.images = this.ImageService.getUniqueTagListFromImages(images);
-      this.availableRegistries = _.concat(dockerhub, registries);
+  async reloadRegistries() {
+    return this.$async(async () => {
+      try {
+        const registries = await this.EndpointService.registries(this.endpointId, this.namespace);
+        this.registries = _.concat(this.defaultRegistry, registries);
 
-      const id = this.model.Registry.Id;
-      if (!id) {
-        this.model.Registry = dockerhub;
-      } else {
-        this.model.Registry = _.find(this.availableRegistries, { Id: id });
+        const id = this.model.Registry.Id;
+        const registry = _.find(this.registries, { Id: id });
+        if (!registry) {
+          this.model.Registry = this.defaultRegistry;
+        }
+      } catch (err) {
+        this.Notifications.error('Failure', err, 'Unable to retrieve registries');
       }
-    } catch (err) {
-      this.Notifications.error('Failure', err, 'Unable to retrieve registries');
+    });
+  }
+
+  async loadImages() {
+    return this.$async(async () => {
+      try {
+        if (!this.autoComplete) {
+          this.images = [];
+          return;
+        }
+
+        const images = await this.ImageService.images();
+        this.images = this.ImageService.getUniqueTagListFromImages(images);
+      } catch (err) {
+        this.Notifications.error('Failure', err, 'Unable to retrieve images');
+      }
+    });
+  }
+
+  $onChanges({ namespace, endpointId }) {
+    if ((namespace || endpointId) && this.endpointId) {
+      this.reloadRegistries();
     }
   }
 
   $onInit() {
-    return this.$async(this.onInit);
+    return this.$async(async () => {
+      await this.loadImages();
+    });
   }
 }
 

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

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

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

@@ -12,6 +12,8 @@ angular.module('portainer.docker').component('porImageRegistry', {
     checkRateLimits: '<',
     onImageChange: '&',
     setValidity: '<',
+    endpointId: '<',
+    namespace: '<',
   },
   require: {
     form: '^form',