fix(podman): create new image from a container in podman [r8s-90] (#347)

app/docker/helpers/imageHelper.js

@@ -1,4 +1,4 @@
-import { buildImageFullURIFromModel, imageContainsURL } from '@/react/docker/images/utils';
+import { buildImageFullURIFromModel, imageContainsURL, fullURIIntoRepoAndTag } from '@/react/docker/images/utils';
 
 angular.module('portainer.docker').factory('ImageHelper', ImageHelperFactory);
 function ImageHelperFactory() {
@@ -18,8 +18,12 @@ function ImageHelperFactory() {
    * @param {PorImageRegistryModel} registry
    */
   function createImageConfigForContainer(imageModel) {
+    const fromImage = buildImageFullURIFromModel(imageModel);
+    const { tag, repo } = fullURIIntoRepoAndTag(fromImage);
     return {
-      fromImage: buildImageFullURIFromModel(imageModel),
+      fromImage,
+      tag,
+      repo,
     };
   }
 

app/docker/views/containers/edit/containerController.js

@@ -207,9 +207,9 @@ angular.module('portainer.docker').controller('ContainerController', [
     async function commitContainerAsync() {
       $scope.config.commitInProgress = true;
       const registryModel = $scope.config.RegistryModel;
-      const imageConfig = ImageHelper.createImageConfigForContainer(registryModel);
+      const { repo, tag } = ImageHelper.createImageConfigForContainer(registryModel);
       try {
-        await commitContainer(endpoint.Id, { container: $transition$.params().id, repo: imageConfig.fromImage });
+        await commitContainer(endpoint.Id, { container: $transition$.params().id, repo, tag });
         Notifications.success('Image created', $transition$.params().id);
         $state.reload();
       } catch (err) {

app/docker/views/images/edit/imageController.js

@@ -2,7 +2,6 @@ import _ from 'lodash-es';
 import { PorImageRegistryModel } from 'Docker/models/porImageRegistry';
 import { confirmImageExport } from '@/react/docker/images/common/ConfirmExportModal';
 import { confirmDelete } from '@@/modals/confirm';
-import { fullURIIntoRepoAndTag } from '@/react/docker/images/utils';
 
 angular.module('portainer.docker').controller('ImageController', [
   '$async',
@@ -71,8 +70,7 @@ angular.module('portainer.docker').controller('ImageController', [
     $scope.tagImage = function () {
       const registryModel = $scope.formValues.RegistryModel;
 
-      const image = ImageHelper.createImageConfigForContainer(registryModel);
+      const { repo, tag } = ImageHelper.createImageConfigForContainer(registryModel);
-      const { repo, tag } = fullURIIntoRepoAndTag(image.fromImage);
 
       ImageService.tagImage($transition$.params().id, repo, tag)
         .then(function success() {

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

@@ -1,5 +1,4 @@
 import { PorImageRegistryModel } from 'Docker/models/porImageRegistry';
-import { fullURIIntoRepoAndTag } from '@/react/docker/images/utils';
 
 angular.module('portainer.docker').controller('ImportImageController', [
   '$scope',
@@ -34,8 +33,7 @@ angular.module('portainer.docker').controller('ImportImageController', [
     async function tagImage(id) {
       const registryModel = $scope.formValues.RegistryModel;
       if (registryModel.Image) {
-        const image = ImageHelper.createImageConfigForContainer(registryModel);
+        const { repo, tag } = ImageHelper.createImageConfigForContainer(registryModel);
-        const { repo, tag } = fullURIIntoRepoAndTag(image.fromImage);
         try {
           await ImageService.tagImage(id, repo, tag);
         } catch (err) {

app/react/docker/images/utils.test.ts

@@ -16,6 +16,24 @@ describe('fullURIIntoRepoAndTag', () => {
     expect(result).toEqual({ repo: 'nginx', tag: 'latest' });
   });
 
+  it('splits image-repo:port/image correctly', () => {
+    const result = fullURIIntoRepoAndTag('registry.example.com:5000/my-image');
+    expect(result).toEqual({
+      repo: 'registry.example.com:5000/my-image',
+      tag: 'latest',
+    });
+  });
+
+  it('splits image-repo:port/image:tag correctly', () => {
+    const result = fullURIIntoRepoAndTag(
+      'registry.example.com:5000/my-image:v1'
+    );
+    expect(result).toEqual({
+      repo: 'registry.example.com:5000/my-image',
+      tag: 'v1',
+    });
+  });
+
   it('splits registry:port/image-repo:tag correctly', () => {
     const result = fullURIIntoRepoAndTag(
       'registry.example.com:5000/my-image:v2.1'

app/react/docker/images/utils.ts

@@ -121,9 +121,18 @@ export function fullURIIntoRepoAndTag(fullURI: string) {
   // - registry/image-repo:tag
   // - image-repo:tag
   // - registry:port/image-repo:tag
+  // - localhost:5000/nginx
   // buildImageFullURIFromModel always gives a tag (defaulting to 'latest'), so the tag is always present after the last ':'
   const parts = fullURI.split(':');
   const tag = parts.pop() || 'latest';
+
+  // handle the case of a repo with a non standard port
+  if (tag.includes('/')) {
+    return {
+      repo: fullURI,
+      tag: 'latest',
+    };
+  }
   const repo = parts.join(':');
   return {
     repo,