fix(app): registry push-pull features overhaul (#3393)

* feat(registry): registry or direct url selector

* feat(app): push pull container creation

* feat(app): push pull container duplicate

* feat(app): push pull container details recreate

* feat(app): push pull container details commit

* feat(app): push pull images

* feat(app): push pull image tag

* feat(app): push pull image push

* feat(app): push pull image pull

* feat(app): push pull service creation

* feat(app): push pull templates create container

* feat(app): push pull templates create stacks

* feat(app): push pull template edit

* feat(app): push pull service details update

* fix(app): refactor registry selector + registry auto select

* feat(app): remove autocomplete on registry selector

* style(image-registry): reword simple/advanced mode

* Revert "feat(app): remove autocomplete on registry selector"

This reverts commit 97ec2ddd62.

* refactor(registry-selector): reverse registry and image fields

* feat(app): autocomplete on registry selector

* feat(registry-selector): change gitlab registry autocomplete

* feat(registry-selector): autocomplete for dockerhub

* feat(registry-selector): gitlab url based on locked value instead of name

* fix(registry-selector): gitlab registries URL are not modified anymore

* fix(registry-selector): change gitlab image autofill on duplicate

* fix(registry-selector): gitlab registries now only suggest their own images and not all from gitlab

* fix(registry-selector): psuh pull issues with gitlab registries

* fix(registry-selector): dockerhub registry selection on duplicate for dockerhub images

* fix(templates): registry retrieval for template

* feat(images): add autocomplete on image pull panel

* fix(registry-selector): add latest tag when no tag is specified

* fix(registry-selector): latest tag now applied for non gitlab registries

app/docker/views/services/create/createServiceController.js

@@ -1,5 +1,6 @@
 import _ from 'lodash-es';
 import { AccessControlFormData } from '../../../../portainer/components/accessControlForm/porAccessControlFormModel';
+import { PorImageRegistryModel } from 'Docker/models/porImageRegistry';
 
 require('./includes/update-restart.html')
 require('./includes/secret.html')
@@ -12,8 +13,7 @@ function ($q, $scope, $state, $timeout, Service, ServiceHelper, ConfigService, C
 
   $scope.formValues = {
     Name: '',
-    Image: '',
-    Registry: {},
+    RegistryModel: new PorImageRegistryModel(),
     Mode: 'replicated',
     Replicas: 1,
     Command: '',
@@ -160,8 +160,8 @@ function ($q, $scope, $state, $timeout, Service, ServiceHelper, ConfigService, C
   };
 
   function prepareImageConfig(config, input) {
-    var imageConfig = ImageHelper.createImageConfigForContainer(input.Image, input.Registry.URL);
-    config.TaskTemplate.ContainerSpec.Image = imageConfig.fromImage + ':' + imageConfig.tag;
+    var imageConfig = ImageHelper.createImageConfigForContainer(input.RegistryModel);
+    config.TaskTemplate.ContainerSpec.Image = imageConfig.fromImage;
   }
 
   function preparePortsConfig(config, input) {
@@ -427,9 +427,8 @@ function ($q, $scope, $state, $timeout, Service, ServiceHelper, ConfigService, C
   }
 
   function createNewService(config, accessControlData) {
-
-    var registry = $scope.formValues.Registry;
-    var authenticationDetails = registry.Authentication ? RegistryService.encodedCredentials(registry) : '';
+    const registryModel = $scope.formValues.RegistryModel;
+    var authenticationDetails = registryModel.Registry.Authentication ? RegistryService.encodedCredentials(registryModel.Registry) : '';
     HttpRequestHelper.setRegistryAuthenticationHeader(authenticationDetails);
 
     Service.create(config).$promise

app/docker/views/services/create/createservice.html

@@ -23,10 +23,9 @@
           </div>
           <!-- image-and-registry -->
           <por-image-registry
-            image="formValues.Image"
-            registry="formValues.Registry"
+            model="formValues.RegistryModel"
             auto-complete="true"
-            label-class="col-sm-1" input-class="col-sm-11 col-md-5"
+            label-class="col-sm-1" input-class="col-sm-11"
           ></por-image-registry>
           <!-- !image-and-registry -->
           <div class="col-sm-12 form-section-title">
@@ -126,7 +125,7 @@
           </div>
           <div class="form-group">
             <div class="col-sm-12">
-              <button type="button" class="btn btn-primary btn-sm" ng-disabled="state.actionInProgress || !formValues.Image" ng-click="create()" button-spinner="state.actionInProgress">
+              <button type="button" class="btn btn-primary btn-sm" ng-disabled="state.actionInProgress || !formValues.RegistryModel.Image" ng-click="create()" button-spinner="state.actionInProgress">
                 <span ng-hide="state.actionInProgress">Create the service</span>
                 <span ng-show="state.actionInProgress">Creating service...</span>
               </button>

app/docker/views/services/edit/includes/image.html

@@ -0,0 +1,32 @@
+<div id="service-container-image" authorization="DockerServiceUpdate">
+  <rd-widget>
+    <rd-widget-header icon="fa-clone" title-text="Change container image">
+    </rd-widget-header>
+    <rd-widget-body ng-if="!isUpdating">
+      <form class="form-horizontal">
+        <por-image-registry
+          model="formValues.RegistryModel"
+          auto-complete="true"
+          label-class="col-sm-1" input-class="col-sm-11"
+        ></por-image-registry>
+      </form>
+    </rd-widget-body>
+    <rd-widget-body ng-if="isUpdating">
+      <p>Image modification is disabled while service is updating.</p>
+    </rd-widget-body>
+    <rd-widget-footer authorization="DockerServiceUpdate">
+      <div class="btn-toolbar" role="toolbar">
+        <div class="btn-group" role="group">
+          <button type="button" class="btn btn-primary btn-sm" ng-disabled="!hasChanges(service, ['Image'])" ng-click="updateService(service)">Apply changes</button>
+          <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            <span class="caret"></span>
+          </button>
+          <ul class="dropdown-menu">
+            <li><a ng-click="cancelChanges(service, ['Image'])">Reset changes</a></li>
+            <li><a ng-click="cancelChanges(service)">Reset all changes</a></li>
+          </ul>
+        </div>
+      </div>
+    </rd-widget-footer>
+  </rd-widget>
+</div>

app/docker/views/services/edit/service.html

@@ -66,10 +66,7 @@
             </tr>
             <tr>
               <td>Image</td>
-              <td>
-                  <input type="text" class="form-control" uib-typeahead="image for image in availableImages | filter:$viewValue | limitTo:5"
-                    ng-model="service.Image" ng-change="updateServiceAttribute(service, 'Image')" id="image_name" disable-authorization="DockerServiceUpdate">
-              </td>
+              <td>{{ service.Image }}</td>
             </tr>
             <tr ng-if="applicationState.endpoint.type !== 4">
               <td colspan="{{webhookURL ? '1' : '2'}}">
@@ -118,12 +115,12 @@
         </p>
         <div class="btn-toolbar" role="toolbar">
           <div class="btn-group" role="group">
-            <button type="button" class="btn btn-primary" ng-disabled="!hasChanges(service, ['Mode', 'Replicas', 'Image', 'Name', 'Webhooks'])" ng-click="updateService(service)">Apply changes</button>
+            <button type="button" class="btn btn-primary" ng-disabled="!hasChanges(service, ['Mode', 'Replicas', 'Name', 'Webhooks'])" ng-click="updateService(service)">Apply changes</button>
             <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
               <span class="caret"></span>
             </button>
             <ul class="dropdown-menu">
-              <li><a ng-click="cancelChanges(service, ['Mode', 'Replicas', 'Image', 'Name'])">Reset changes</a></li>
+              <li><a ng-click="cancelChanges(service, ['Mode', 'Replicas', 'Name'])">Reset changes</a></li>
               <li><a ng-click="cancelChanges(service)">Reset all changes</a></li>
             </ul>
           </div>
@@ -138,6 +135,7 @@
       <rd-widget-body classes="no-padding">
         <ul class="nav nav-pills nav-stacked">
           <li><a href ng-click="goToItem('service-env-variables')">Environment variables</a></li>
+          <li><a href ng-click="goToItem('service-container-image')">Container image</a></li>
           <li><a href ng-click="goToItem('service-container-labels')">Container labels</a></li>
           <li><a href ng-click="goToItem('service-mounts')">Mounts</a></li>
           <li><a href ng-click="goToItem('service-network-specs')">Network &amp; published ports</a></li>
@@ -171,6 +169,7 @@
   <div class="col-lg-12 col-md-12 col-xs-12">
     <h3 id="container-specs">Container specification</h3>
     <div id="service-container-spec" class="padding-top" ng-include="'app/docker/views/services/edit/includes/container-specs.html'"></div>
+    <div id="service-container-image" class="padding-top" ng-include="'app/docker/views/services/edit/includes/image.html'"></div>
     <div id="service-env-variables" class="padding-top" ng-include="'app/docker/views/services/edit/includes/environmentvariables.html'"></div>
     <div id="service-container-labels" class="padding-top" ng-include="'app/docker/views/services/edit/includes/containerlabels.html'"></div>
     <div id="service-mounts" class="padding-top" ng-include="'app/docker/views/services/edit/includes/mounts.html'"></div>

app/docker/views/services/edit/serviceController.js

@@ -4,6 +4,7 @@ require('./includes/container-specs.html')
 require('./includes/containerlabels.html')
 require('./includes/environmentvariables.html')
 require('./includes/hosts.html')
+require('./includes/image.html')
 require('./includes/logging.html')
 require('./includes/mounts.html')
 require('./includes/networks.html')
@@ -16,6 +17,8 @@ require('./includes/servicelabels.html')
 require('./includes/tasks.html')
 require('./includes/updateconfig.html')
 
+import { PorImageRegistryModel } from 'Docker/models/porImageRegistry';
+
 angular.module('portainer.docker')
 .controller('ServiceController', ['$q', '$scope', '$transition$', '$state', '$location', '$timeout', '$anchorScroll', 'ServiceService', 'ConfigService', 'ConfigHelper', 'SecretService', 'ImageService', 'SecretHelper', 'Service', 'ServiceHelper', 'LabelHelper', 'TaskService', 'NodeService', 'ContainerService', 'TaskHelper', 'Notifications', 'ModalService', 'PluginService', 'Authentication', 'SettingsService', 'VolumeService', 'ImageHelper', 'WebhookService', 'EndpointProvider', 'clipboard','WebhookHelper',
 function ($q, $scope, $transition$, $state, $location, $timeout, $anchorScroll, ServiceService, ConfigService, ConfigHelper, SecretService, ImageService, SecretHelper, Service, ServiceHelper, LabelHelper, TaskService, NodeService, ContainerService, TaskHelper, Notifications, ModalService, PluginService, Authentication, SettingsService, VolumeService, ImageHelper, WebhookService, EndpointProvider, clipboard, WebhookHelper) {
@@ -26,6 +29,10 @@ function ($q, $scope, $transition$, $state, $location, $timeout, $anchorScroll,
     rollbackInProgress: false,
   };
 
+  $scope.formValues = {
+    RegistryModel: new PorImageRegistryModel()
+  };
+
   $scope.tasks = [];
   $scope.availableImages = [];
 
@@ -34,20 +41,6 @@ function ($q, $scope, $transition$, $state, $location, $timeout, $anchorScroll,
   var originalService = {};
   var previousServiceValues = [];
 
-  $scope.renameService = function renameService(service) {
-    updateServiceAttribute(service, 'Name', service.newServiceName || service.name);
-    service.EditName = false;
-  };
-  $scope.changeServiceImage = function changeServiceImage(service) {
-    updateServiceAttribute(service, 'Image', service.newServiceImage || service.image);
-    service.EditImage = false;
-  };
-  $scope.scaleService = function scaleService(service) {
-    var replicas = service.newServiceReplicas === null || isNaN(service.newServiceReplicas) ? service.Replicas : service.newServiceReplicas;
-    updateServiceAttribute(service, 'Replicas', replicas);
-    service.EditReplicas = false;
-  };
-
   $scope.goToItem = function(hash) {
       if ($location.hash() !== hash) {
         $location.hash(hash);
@@ -259,12 +252,17 @@ function ($q, $scope, $transition$, $state, $location, $timeout, $anchorScroll,
   $scope.cancelChanges = function cancelChanges(service, keys) {
     if (keys) { // clean out the keys only from the list of modified keys
       keys.forEach(function(key) {
-        var index = previousServiceValues.indexOf(key);
-        if (index >= 0) {
-          previousServiceValues.splice(index, 1);
+        if (key === 'Image') {
+          $scope.formValues.RegistryModel.Image = '';
+        } else {
+          var index = previousServiceValues.indexOf(key);
+          if (index >= 0) {
+            previousServiceValues.splice(index, 1);
+          }
         }
       });
     } else { // clean out all changes
+      $scope.formValues.RegistryModel.Image = '';
       keys = Object.keys(service);
       previousServiceValues = [];
     }
@@ -277,7 +275,11 @@ function ($q, $scope, $transition$, $state, $location, $timeout, $anchorScroll,
   $scope.hasChanges = function(service, elements) {
     var hasChanges = false;
     elements.forEach(function(key) {
-      hasChanges = hasChanges || (previousServiceValues.indexOf(key) >= 0);
+      if (key === 'Image') {
+        hasChanges = hasChanges || $scope.formValues.RegistryModel.Image ? true : false;
+      } else {
+        hasChanges = hasChanges || (previousServiceValues.indexOf(key) >= 0);
+      }
     });
     return hasChanges;
   };
@@ -288,7 +290,14 @@ function ($q, $scope, $transition$, $state, $location, $timeout, $anchorScroll,
     config.Labels = LabelHelper.fromKeyValueToLabelHash(service.ServiceLabels);
     config.TaskTemplate.ContainerSpec.Env = ServiceHelper.translateEnvironmentVariablesToEnv(service.EnvironmentVariables);
     config.TaskTemplate.ContainerSpec.Labels = LabelHelper.fromKeyValueToLabelHash(service.ServiceContainerLabels);
-    config.TaskTemplate.ContainerSpec.Image = service.Image;
+
+    if ($scope.hasChanges(service, ["Image"])) {
+      const image = ImageHelper.createImageConfigForContainer($scope.formValues.RegistryModel);
+      config.TaskTemplate.ContainerSpec.Image = image.fromImage;
+    } else {
+      config.TaskTemplate.ContainerSpec.Image = service.Image;
+    }
+
     config.TaskTemplate.ContainerSpec.Secrets = service.ServiceSecrets ? service.ServiceSecrets.map(SecretHelper.secretConfig) : [];
     config.TaskTemplate.ContainerSpec.Configs = service.ServiceConfigs ? service.ServiceConfigs.map(ConfigHelper.configConfig) : [];
     config.TaskTemplate.ContainerSpec.Hosts = service.Hosts ? ServiceHelper.translateHostnameIPToHostsEntries(service.Hosts) : [];
@@ -468,7 +477,7 @@ function ($q, $scope, $transition$, $state, $location, $timeout, $anchorScroll,
   function forceUpdateService(service, pullImage) {
     var config = ServiceHelper.serviceToConfig(service.Model);
     if (pullImage) {
-      config.TaskTemplate.ContainerSpec.Image = config.TaskTemplate.ContainerSpec.Image = ImageHelper.removeDigestFromRepository(config.TaskTemplate.ContainerSpec.Image);
+      config.TaskTemplate.ContainerSpec.Image = ImageHelper.removeDigestFromRepository(config.TaskTemplate.ContainerSpec.Image);
     }
 
     // As explained in https://github.com/docker/swarmkit/issues/2364 ForceUpdate can accept a random