fix(services): pre fill service registry and image [EE-1769] (#5798)

fix(services): pre fill service registry and image [EE-1769]  (#5798)

app/azure/views/containerinstances/container-instance-details/containerInstanceDetailsController.js

@@ -21,7 +21,7 @@ class ContainerInstanceDetailsController {
       this.container = await this.ContainerGroupService.containerGroup(subscriptionId, resourceGroupId, containerGroupId);
       this.resourceGroup = await this.ResourceGroupService.resourceGroup(subscriptionId, resourceGroupId);
     } catch (err) {
-      this.Notifications.error('Failure', err, 'Unable to retrive container instance details');
+      this.Notifications.error('Failure', err, 'Unable to retrieve container instance details');
     }
     this.state.loading = false;
   }

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

@@ -15,12 +15,14 @@ class porImageRegistryController {
     this.Notifications = Notifications;
 
     this.onRegistryChange = this.onRegistryChange.bind(this);
+    this.onImageChange = this.onImageChange.bind(this);
 
     this.registries = [];
     this.images = [];
     this.defaultRegistry = new DockerHubViewModel();
 
     this.$scope.$watch(() => this.model.Registry, this.onRegistryChange);
+    this.$scope.$watch(() => this.model.Image, this.onImageChange);
   }
 
   isKnownRegistry(registry) {
@@ -62,6 +64,12 @@ class porImageRegistryController {
     }
   }
 
+  async onImageChange() {
+    if (!this.isDockerHubRegistry()) {
+      this.setValidity(true);
+    }
+  }
+
   displayedRegistryURL() {
     return this.getRegistryURL(this.model.Registry) || 'docker.io';
   }

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

@@ -24,7 +24,7 @@
           uib-typeahead="image for image in $ctrl.availableImages | filter:$viewValue | limitTo:5"
           ng-model="$ctrl.model.Image"
           name="image_name"
-          placeholder="e.g. myImage:myTag"
+          placeholder="e.g. my-image:my-tag"
           ng-change="$ctrl.onImageChange()"
           required
           data-cy="component-imageInput"
@@ -54,7 +54,7 @@
       </span>
       <label for="image_name" ng-class="$ctrl.labelClass" class="control-label text-left">Image </label>
       <div ng-class="$ctrl.inputClass">
-        <input type="text" class="form-control" ng-model="$ctrl.model.Image" name="image_name" placeholder="e.g. registry:port/myImage:myTag" required />
+        <input type="text" class="form-control" ng-model="$ctrl.model.Image" name="image_name" placeholder="e.g. registry:port/my-image:my-tag" required />
       </div>
     </div>
   </div>

app/docker/views/containers/create/createContainerController.js

@@ -580,7 +580,7 @@ angular.module('portainer.docker').controller('CreateContainerController', [
           $scope.formValues.RegistryModel = model;
         })
         .catch(function error(err) {
-          Notifications.error('Failure', err, 'Unable to retrive registry');
+          Notifications.error('Failure', err, 'Unable to retrieve registry');
         });
     }
 

app/docker/views/images/build/buildimage.html

@@ -49,7 +49,7 @@
                         <!-- name-input -->
                         <div class="input-group col-sm-5 input-group-sm">
                           <span class="input-group-addon">name</span>
-                          <input type="text" class="form-control" ng-model="item.Name" placeholder="e.g. myImage:myTag" auto-focus />
+                          <input type="text" class="form-control" ng-model="item.Name" placeholder="e.g. my-image:my-tag" auto-focus />
                           <span class="input-group-addon"
                             ><i ng-class="{ true: 'fa fa-check green-icon', false: 'fa fa-times red-icon' }[item.Name !== '']" aria-hidden="true"></i
                           ></span>

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

@@ -53,6 +53,7 @@ angular.module('portainer.docker').controller('ServiceController', [
   'clipboard',
   'WebhookHelper',
   'NetworkService',
+  'RegistryService',
   'endpoint',
   function (
     $q,
@@ -84,6 +85,7 @@ angular.module('portainer.docker').controller('ServiceController', [
     clipboard,
     WebhookHelper,
     NetworkService,
+    RegistryService,
     endpoint
   ) {
     $scope.endpoint = endpoint;
@@ -353,22 +355,22 @@ angular.module('portainer.docker').controller('ServiceController', [
       $('#copyNotification').fadeOut(2000);
     };
 
-    $scope.cancelChanges = function cancelChanges(service, keys) {
+    $scope.cancelChanges = async function cancelChanges(service, keys) {
       if (keys) {
         // clean out the keys only from the list of modified keys
-        keys.forEach(function (key) {
+        for (const key of keys) {
           if (key === 'Image') {
-            $scope.formValues.RegistryModel.Image = '';
+            $scope.formValues.RegistryModel = await RegistryService.retrievePorRegistryModelFromRepository(originalService.Image, endpoint.Id);
           } else {
             var index = previousServiceValues.indexOf(key);
             if (index >= 0) {
               previousServiceValues.splice(index, 1);
             }
           }
-        });
+        }
       } else {
         // clean out all changes
-        $scope.formValues.RegistryModel.Image = '';
+        $scope.formValues.RegistryModel = await RegistryService.retrievePorRegistryModelFromRepository(originalService.Image, endpoint.Id);
         keys = Object.keys(service);
         previousServiceValues = [];
       }
@@ -382,7 +384,9 @@ angular.module('portainer.docker').controller('ServiceController', [
       var hasChanges = false;
       elements.forEach(function (key) {
         if (key === 'Image') {
-          hasChanges = hasChanges || $scope.formValues.RegistryModel.Image ? true : false;
+          const originalImage = service ? service.Model.Spec.TaskTemplate.ContainerSpec.Image : null;
+          const currentImage = ImageHelper.createImageConfigForContainer($scope.formValues.RegistryModel).fromImage;
+          hasChanges = hasChanges || originalImage !== currentImage;
         } else {
           hasChanges = hasChanges || previousServiceValues.indexOf(key) >= 0;
         }
@@ -763,6 +767,11 @@ angular.module('portainer.docker').controller('ServiceController', [
             $scope.state.sliderMaxCpu = 32;
           }
 
+          const image = $scope.service.Model.Spec.TaskTemplate.ContainerSpec.Image;
+          RegistryService.retrievePorRegistryModelFromRepository(image, endpoint.Id).then((model) => {
+            $scope.formValues.RegistryModel = model;
+          });
+
           // Default values
           $scope.state.addSecret = { override: false };
 

app/portainer/services/api/resourceControlService.js

@@ -103,7 +103,7 @@ angular.module('portainer.app').factory('ResourceControlService', [
     }
 
     /**
-     * Retrive users and team details for ResourceControlViewModel
+     * Retrieve users and team details for ResourceControlViewModel
      * @param {ResourceControlViewModel} resourceControl ResourceControl view model
      */
     function retrieveOwnershipDetails(resourceControl) {