fix(app): deploy container app template (#59)

Co-authored-by: oscarzhou <oscar.zhou@portainer.io>

app/docker/services/containerService.js

@@ -19,6 +19,7 @@ import { createExec } from '@/react/docker/containers/queries/useCreateExecMutat
 import { containerStats } from '@/react/docker/containers/queries/useContainerStats';
 import { containerTop } from '@/react/docker/containers/queries/useContainerTop';
 import { createOrReplace } from '@/react/docker/containers/CreateView/useCreateMutation';
+import { toReactAccessControlFormData } from '@/portainer/components/accessControlForm/porAccessControlFormModel';
 
 import { ContainerDetailsViewModel } from '../models/containerDetails';
 import { ContainerStatsViewModel } from '../models/containerStats';
@@ -91,11 +92,17 @@ function ContainerServiceFactory(AngularToReact) {
   /**
    * @param {Environment} environment
    * @param {*} configuration
+   * @param {AccessControlFormData} accessControlFormData
    */
-  async function createAndStartContainer(environment, configuration) {
+  async function createAndStartContainer(environment, configuration, accessControlFormData) {
     return createOrReplace({
       config: configuration,
       environment,
+      values: {
+        name: configuration.name,
+        imageName: configuration.Image,
+        accessControl: toReactAccessControlFormData(accessControlFormData),
+      },
     });
   }
 

app/docker/services/volumeService.js

@@ -83,7 +83,7 @@ function VolumeServiceFactory(AngularToReact) {
    * @param {number} count
    */
   async function createXAutoGeneratedLocalVolumes(environmentId, count) {
-    const promises = Array(count).map(createVolume(environmentId, { Driver: 'local' }));
+    const promises = Array.from({ length: count }).map(() => createAngularJS(environmentId, { Driver: 'local' }));
     return Promise.all(promises);
   }
 }

app/portainer/components/accessControlForm/porAccessControlFormModel.js

@@ -9,3 +9,16 @@ export function AccessControlFormData() {
   this.AuthorizedUsers = [];
   this.AuthorizedTeams = [];
 }
+
+/**
+ * Transform AngularJS UAC FormData model to React UAC FormData model
+ * @param {AccessControlFormData} uac AngularJS format (see above)
+ * @returns {AccessControlFormData} React format (see at @/react/portainer/access-control/types)
+ */
+export function toReactAccessControlFormData({ Ownership, AuthorizedTeams, AuthorizedUsers }) {
+  return {
+    ownership: Ownership, // type: ResourceControlOwnership;
+    authorizedUsers: AuthorizedUsers, // type: UserId[];
+    authorizedTeams: AuthorizedTeams, // type: TeamId[];
+  };
+}

app/portainer/views/templates/templatesController.js

@@ -114,10 +114,10 @@ angular.module('portainer.app').controller('TemplatesController', [
             generatedVolumeIds.push(volumeId);
           });
           TemplateService.updateContainerConfigurationWithVolumes(templateConfiguration, template, data);
-          return ImageService.pullImage(template.RegistryModel, true);
+          return ImageService.pullImage(template.RegistryModel);
         })
         .then(function success() {
-          return ContainerService.createAndStartContainer(endpoint, templateConfiguration);
+          return ContainerService.createAndStartContainer(endpoint, templateConfiguration, accessControlData);
         })
         .then(function success(data) {
           const resourceControl = data.Portainer.ResourceControl;

app/react/docker/containers/CreateView/useCreateMutation.tsx

@@ -118,6 +118,8 @@ async function create({
     containerResponse.Portainer?.ResourceControl,
     registry
   );
+
+  return containerResponse;
 }
 
 async function replace({
@@ -163,6 +165,8 @@ async function replace({
   await removeContainer(environment.Id, oldContainer.Id, {
     nodeName: oldContainer.NodeName,
   });
+
+  return containerResponse;
 }
 
 /**

app/react/docker/volumes/queries/useCreateVolumeMutation.ts

@@ -16,7 +16,7 @@ export type VolumeConfiguration = {
 export async function createVolume(
   environmentId: EnvironmentId,
   volumeConfiguration: VolumeConfiguration,
-  { nodeName }: { nodeName: string }
+  { nodeName }: { nodeName?: string } = {}
 ) {
   try {
     const { data } = await axios.post<Volume>(

app/react/docker/volumes/queries/useRemoveVolumeMutation.ts

@@ -9,7 +9,7 @@ import { withAgentTargetHeader } from '../../proxy/queries/utils';
 export async function removeVolume(
   environmentId: EnvironmentId,
   name: Volume['Name'],
-  { nodeName }: { nodeName: string }
+  { nodeName }: { nodeName?: string } = {}
 ) {
   try {
     await axios.delete(buildDockerProxyUrl(environmentId, 'volumes', name), {