feat(images): allow tags when importing docker image EE-1737 (#5883)

app/docker/views/images/import/importImageController.js

@@ -1,35 +1,72 @@
+import { PorImageRegistryModel } from 'Docker/models/porImageRegistry';
+
 angular.module('portainer.docker').controller('ImportImageController', [
   '$scope',
   '$state',
   'ImageService',
   'Notifications',
   'HttpRequestHelper',
-  function ($scope, $state, ImageService, Notifications, HttpRequestHelper) {
+  'Authentication',
+  'ImageHelper',
+  'endpoint',
+  function ($scope, $state, ImageService, Notifications, HttpRequestHelper, Authentication, ImageHelper, endpoint) {
     $scope.state = {
       actionInProgress: false,
     };
 
+    $scope.endpoint = endpoint;
+
+    $scope.isAdmin = Authentication.isAdmin();
+
     $scope.formValues = {
       UploadFile: null,
       NodeName: null,
+      RegistryModel: new PorImageRegistryModel(),
     };
 
-    $scope.uploadImage = function () {
+    $scope.setPullImageValidity = setPullImageValidity;
+    function setPullImageValidity(validity) {
+      $scope.state.pullImageValidity = validity;
+    }
+
+    async function tagImage(id) {
+      const registryModel = $scope.formValues.RegistryModel;
+      if (registryModel.Image) {
+        const image = ImageHelper.createImageConfigForContainer(registryModel);
+        try {
+          await ImageService.tagImage(id, image.fromImage);
+        } catch (err) {
+          Notifications.error('Failure', err, 'Unable to tag image');
+        }
+      }
+    }
+
+    $scope.uploadImage = async function () {
       $scope.state.actionInProgress = true;
 
       var nodeName = $scope.formValues.NodeName;
       HttpRequestHelper.setPortainerAgentTargetHeader(nodeName);
       var file = $scope.formValues.UploadFile;
-      ImageService.uploadImage(file)
-        .then(function success() {
+      try {
+        const { data } = await ImageService.uploadImage(file);
+        if (data.error) {
+          Notifications.error('Failure', data.error, 'Unable to upload image');
+        } else if (data.stream) {
+          var regex = /Loaded.*?: (.*?)\n$/g;
+          var imageIds = regex.exec(data.stream);
+          if (imageIds && imageIds.length == 2) {
+            await tagImage(imageIds[1]);
+            $state.go('docker.images.image', { id: imageIds[1] }, { reload: true });
+          }
           Notifications.success('Images successfully uploaded');
-        })
-        .catch(function error(err) {
-          Notifications.error('Failure', err, 'Unable to upload image');
-        })
-        .finally(function final() {
-          $scope.state.actionInProgress = false;
-        });
+        } else {
+          Notifications.success('The uploaded tar file contained multiple images. The provided tag therefore has been ignored.');
+        }
+      } catch (err) {
+        Notifications.error('Failure', err, 'Unable to upload image');
+      } finally {
+        $scope.state.actionInProgress = false;
+      }
     };
   },
 ]);

app/docker/views/images/import/importimage.html

@@ -37,6 +37,25 @@
             <node-selector model="formValues.NodeName"> </node-selector>
             <!-- !node-selection -->
           </div>
+          <div class="row" authorization="DockerImageCreate">
+            <div class="col-lg-12 col-md-12 col-xs-12">
+              <rd-widget>
+                <rd-widget-header icon="fa-tag" title-text="Tag the image"></rd-widget-header>
+                <rd-widget-body>
+                    <!-- image-and-registry -->
+                    <por-image-registry
+                      model="formValues.RegistryModel"
+                      label-class="col-sm-1"
+                      input-class="col-sm-11"
+                      endpoint="endpoint"
+                      is-admin="isAdmin"
+                      set-validity="setPullImageValidity"
+                      check-rate-limits="true"
+                    ></por-image-registry>
+                </rd-widget-body>
+              </rd-widget>
+            </div>
+          </div>
           <!-- actions -->
           <div class="col-sm-12 form-section-title">
             Actions