fix(edge stacks): allow viewing existing kompose stacks [EE-4967] (#8405)

Co-authored-by: testa113 <testa113>
Co-authored-by: Matt Hook <hookenz@gmail.com>

app/edge/components/edit-edge-stack-form/editEdgeStackForm.html

@@ -9,13 +9,19 @@
       <pr-icon icon="'alert-triangle'" mode="'warning'"></pr-icon> There are no available deployment types when there is more than one type of environment in your edge group
       selection (e.g. Kubernetes and Docker environments). Please select edge groups that have environments of the same type.
     </p>
+    <p class="col-sm-12 vertical-center help-block small text-warning" ng-if="$ctrl.model.DeploymentType === $ctrl.EditorType.Compose && $ctrl.hasKubeEndpoint()">
+      <pr-icon icon="'alert-triangle'" mode="'warning'"></pr-icon> Edge groups with kubernetes environments no longer support compose deployment types in Portainer. Please select
+      edge groups that only have docker environments when using compose deployment types.
+    </p>
   </div>
 
   <edge-stack-deployment-type-selector
+    allow-kube-to-select-compose="$ctrl.allowKubeToSelectCompose"
     value="$ctrl.model.DeploymentType"
     has-docker-endpoint="$ctrl.hasDockerEndpoint()"
     has-kube-endpoint="$ctrl.hasKubeEndpoint()"
     on-change="($ctrl.onChangeDeploymentType)"
+    read-only="$ctrl.state.readOnlyCompose"
   ></edge-stack-deployment-type-selector>
 
   <div class="flex gap-1 text-muted small" ng-show="!$ctrl.model.DeploymentType && $ctrl.hasKubeEndpoint()">
@@ -89,8 +95,8 @@
     <div class="col-sm-12">
       <button
         type="button"
-        class="btn btn-primary btn-sm"
+        class="btn btn-primary btn-sm !ml-0"
-        ng-disabled="$ctrl.actionInProgress || !$ctrl.isFormValid()"
+        ng-disabled="$ctrl.actionInProgress || !$ctrl.isFormValid() || (!$ctrl.model.DeploymentType && $ctrl.hasKubeEndpoint())"
         ng-click="$ctrl.submitAction()"
         button-spinner="$ctrl.actionInProgress"
       >

app/edge/components/edit-edge-stack-form/editEdgeStackFormController.js

@@ -7,6 +7,7 @@ export class EditEdgeStackFormController {
     this.$scope = $scope;
     this.state = {
       endpointTypes: [],
+      readOnlyCompose: false,
     };
 
     this.fileContents = {
@@ -26,6 +27,7 @@ export class EditEdgeStackFormController {
     this.removeLineBreaks = this.removeLineBreaks.bind(this);
     this.onChangeFileContent = this.onChangeFileContent.bind(this);
     this.onChangeUseManifestNamespaces = this.onChangeUseManifestNamespaces.bind(this);
+    this.selectValidDeploymentType = this.selectValidDeploymentType.bind(this);
   }
 
   onChangeUseManifestNamespaces(value) {
@@ -45,8 +47,9 @@ export class EditEdgeStackFormController {
   onChangeGroups(groups) {
     return this.$scope.$evalAsync(() => {
       this.model.EdgeGroups = groups;
-
+      this.setEnvironmentTypesInSelection(groups);
-      this.checkEndpointTypes(groups);
+      this.selectValidDeploymentType();
+      this.state.readOnlyCompose = this.hasKubeEndpoint();
     });
   }
 
@@ -54,14 +57,13 @@ export class EditEdgeStackFormController {
     return this.model.EdgeGroups.length && this.model.StackFileContent && this.validateEndpointsForDeployment();
   }
 
-  checkEndpointTypes(groups) {
+  setEnvironmentTypesInSelection(groups) {
     const edgeGroups = groups.map((id) => this.edgeGroups.find((e) => e.Id === id));
     this.state.endpointTypes = edgeGroups.flatMap((group) => group.EndpointTypes);
-    this.selectValidDeploymentType();
   }
 
   selectValidDeploymentType() {
-    const validTypes = getValidEditorTypes(this.state.endpointTypes);
+    const validTypes = getValidEditorTypes(this.state.endpointTypes, this.allowKubeToSelectCompose);
 
     if (!validTypes.includes(this.model.DeploymentType)) {
       this.onChangeDeploymentType(validTypes[0]);
@@ -101,7 +103,14 @@ export class EditEdgeStackFormController {
   }
 
   $onInit() {
-    this.checkEndpointTypes(this.model.EdgeGroups);
+    this.setEnvironmentTypesInSelection(this.model.EdgeGroups);
     this.fileContents[this.model.DeploymentType] = this.model.StackFileContent;
+
+    // allow kube to view compose if it's an existing kube compose stack
+    const initiallyContainsKubeEnv = this.hasKubeEndpoint();
+    const isComposeStack = this.model.DeploymentType === 0;
+    this.allowKubeToSelectCompose = initiallyContainsKubeEnv && isComposeStack;
+    this.state.readOnlyCompose = this.allowKubeToSelectCompose;
+    this.selectValidDeploymentType();
   }
 }

app/edge/react/components/index.ts

@@ -52,5 +52,6 @@ export const componentsModule = angular
       'onChange',
       'hasDockerEndpoint',
       'hasKubeEndpoint',
+      'allowKubeToSelectCompose',
     ])
   ).name;

app/kubernetes/views/applications/create/createApplication.html

@@ -35,8 +35,19 @@
   ng-if="ctrl.stack.IsComposeFormat"
   title="'View application'"
   breadcrumbs="[
+    { label:'Namespaces', link:'kubernetes.resourcePools' },
+    {
+      label:ctrl.application.ResourcePool,
+      link: 'kubernetes.resourcePools.resourcePool',
+      linkParams:{ id: ctrl.application.ResourcePool }
+    },
     { label:'Applications', link:'kubernetes.applications' },
-     'View application'
+    {
+      label:ctrl.application.Name,
+      link: 'kubernetes.applications.application',
+      linkParams:{ name: ctrl.application.Name, namespace: ctrl.application.ResourcePool }
+    },
+     'View',
      ]"
   reload="true"
 >

app/portainer/components/code-editor/codeEditorController.js

@@ -5,6 +5,10 @@ angular.module('portainer.app').controller('CodeEditorController', function Code
     if (value && value.currentValue && ctrl.editor && ctrl.editor.getValue() !== value.currentValue) {
       ctrl.editor.setValue(value.currentValue);
     }
+
+    if (ctrl.editor) {
+      ctrl.editor.setOption('readOnly', ctrl.readOnly);
+    }
   };
 
   this.$onInit = function () {

app/react/edge/edge-stacks/components/EdgeStackDeploymentTypeSelector.tsx

@@ -12,6 +12,7 @@ interface Props {
   onChange(value: number): void;
   hasDockerEndpoint: boolean;
   hasKubeEndpoint: boolean;
+  allowKubeToSelectCompose?: boolean;
 }
 
 export function EdgeStackDeploymentTypeSelector({
@@ -19,12 +20,13 @@ export function EdgeStackDeploymentTypeSelector({
   onChange,
   hasDockerEndpoint,
   hasKubeEndpoint,
+  allowKubeToSelectCompose,
 }: Props) {
   const deploymentOptions: BoxSelectorOption<number>[] = [
     {
       ...compose,
       value: EditorType.Compose,
-      disabled: () => hasKubeEndpoint,
+      disabled: () => (allowKubeToSelectCompose ? false : hasKubeEndpoint),
       tooltip: () =>
         hasKubeEndpoint
           ? 'Cannot use this option with Edge Kubernetes environments'

app/react/edge/edge-stacks/utils.ts

@@ -4,10 +4,15 @@ import { EnvironmentType } from '@/react/portainer/environments/types';
 
 import { EditorType } from './types';
 
-export function getValidEditorTypes(endpointTypes: EnvironmentType[]) {
+export function getValidEditorTypes(
+  endpointTypes: EnvironmentType[],
+  allowKubeToSelectCompose?: boolean
+) {
   const right: Partial<Record<EnvironmentType, EditorType[]>> = {
     [EnvironmentType.EdgeAgentOnDocker]: [EditorType.Compose],
-    [EnvironmentType.EdgeAgentOnKubernetes]: [EditorType.Kubernetes],
+    [EnvironmentType.EdgeAgentOnKubernetes]: allowKubeToSelectCompose
+      ? [EditorType.Kubernetes, EditorType.Compose]
+      : [EditorType.Kubernetes],
   };
 
   return endpointTypes.length