feat(stack): front end backport changes to CE EE-1199 (#5455)

* feat(stack): front end backport changes to CE EE-1199

* fix k8s deploy logic

* fixed web editor confirmation message typo. EE-1501

* fix(stack): fixed issue auth detail not remembered EE-1502 (#5459)

* show status in buttons

* removed onChangeRef function.

* moved buttons in git form to its own component

* removed unused variable.

Co-authored-by: ArrisLee <arris_li@hotmail.com>

app/kubernetes/converters/application.js

@@ -14,6 +14,8 @@ import {
   KubernetesPortainerApplicationNote,
   KubernetesPortainerApplicationOwnerLabel,
   KubernetesPortainerApplicationStackNameLabel,
+  KubernetesPortainerApplicationStackIdLabel,
+  KubernetesPortainerApplicationKindLabel,
 } from 'Kubernetes/models/application/models';
 import { KubernetesServiceTypes } from 'Kubernetes/models/service/models';
 import KubernetesResourceReservationHelper from 'Kubernetes/helpers/resourceReservationHelper';
@@ -55,6 +57,8 @@ class KubernetesApplicationConverter {
     res.Id = data.metadata.uid;
     res.Name = data.metadata.name;
     res.StackName = data.metadata.labels ? data.metadata.labels[KubernetesPortainerApplicationStackNameLabel] || '-' : '-';
+    res.StackId = data.metadata.labels ? data.metadata.labels[KubernetesPortainerApplicationStackIdLabel] || '' : '';
+    res.ApplicationKind = data.metadata.labels ? data.metadata.labels[KubernetesPortainerApplicationKindLabel] || '' : '';
     res.ApplicationOwner = data.metadata.labels ? data.metadata.labels[KubernetesPortainerApplicationOwnerLabel] || '' : '';
     res.Note = data.metadata.annotations ? data.metadata.annotations[KubernetesPortainerApplicationNote] || '' : '';
     res.ApplicationName = data.metadata.labels ? data.metadata.labels[KubernetesPortainerApplicationNameLabel] || res.Name : res.Name;

app/kubernetes/models/application/models/constants.js

@@ -41,6 +41,10 @@ export const KubernetesApplicationQuotaDefaults = {
 
 export const KubernetesPortainerApplicationStackNameLabel = 'io.portainer.kubernetes.application.stack';
 
+export const KubernetesPortainerApplicationStackIdLabel = 'io.portainer.kubernetes.application.stackid';
+
+export const KubernetesPortainerApplicationKindLabel = 'io.portainer.kubernetes.application.kind';
+
 export const KubernetesPortainerApplicationNameLabel = 'io.portainer.kubernetes.application.name';
 
 export const KubernetesPortainerApplicationOwnerLabel = 'io.portainer.kubernetes.application.owner';

app/kubernetes/models/application/models/index.js

@@ -7,6 +7,8 @@ const _KubernetesApplication = Object.freeze({
   Id: '',
   Name: '',
   StackName: '',
+  StackId: '',
+  ApplicationKind: '',
   ApplicationOwner: '',
   ApplicationName: '',
   ResourcePool: '',
@@ -91,3 +93,9 @@ export class KubernetesApplicationPort {
     Object.assign(this, JSON.parse(JSON.stringify(_KubernetesApplicationPort)));
   }
 }
+
+export const KubernetesDeploymentTypes = Object.freeze({
+  GIT: 'git',
+  CONTENT: 'content',
+  APPLICATION_FORM: 'application form',
+});

app/kubernetes/views/applications/create/createApplicationController.js

@@ -10,6 +10,7 @@ import {
   KubernetesApplicationQuotaDefaults,
   KubernetesApplicationTypes,
   KubernetesApplicationPlacementTypes,
+  KubernetesDeploymentTypes,
 } from 'Kubernetes/models/application/models';
 import {
   KubernetesApplicationConfigurationFormValue,
@@ -49,7 +50,8 @@ class KubernetesCreateApplicationController {
     KubernetesPersistentVolumeClaimService,
     KubernetesNamespaceHelper,
     KubernetesVolumeService,
-    RegistryService
+    RegistryService,
+    StackService
   ) {
     this.$async = $async;
     this.$state = $state;
@@ -66,6 +68,7 @@ class KubernetesCreateApplicationController {
     this.KubernetesPersistentVolumeClaimService = KubernetesPersistentVolumeClaimService;
     this.KubernetesNamespaceHelper = KubernetesNamespaceHelper;
     this.RegistryService = RegistryService;
+    this.StackService = StackService;
 
     this.ApplicationDeploymentTypes = KubernetesApplicationDeploymentTypes;
     this.ApplicationDataAccessPolicies = KubernetesApplicationDataAccessPolicies;
@@ -74,8 +77,11 @@ class KubernetesCreateApplicationController {
     this.ApplicationTypes = KubernetesApplicationTypes;
     this.ApplicationConfigurationFormValueOverridenKeyTypes = KubernetesApplicationConfigurationFormValueOverridenKeyTypes;
     this.ServiceTypes = KubernetesServiceTypes;
+    this.KubernetesDeploymentTypes = KubernetesDeploymentTypes;
 
     this.state = {
+      appType: this.KubernetesDeploymentTypes.APPLICATION_FORM,
+      updateWebEditorInProgress: false,
       actionInProgress: false,
       useLoadBalancer: false,
       useServerMetrics: false,
@@ -124,13 +130,54 @@ class KubernetesCreateApplicationController {
     this.state.useServerMetrics = false;
 
     this.formValues = new KubernetesApplicationFormValues();
+    this.gitFormValues = {
+      RefName: '',
+      RepositoryAuthentication: false,
+      RepositoryUsername: '',
+      RepositoryPassword: '',
+    };
 
     this.updateApplicationAsync = this.updateApplicationAsync.bind(this);
     this.deployApplicationAsync = this.deployApplicationAsync.bind(this);
     this.setPullImageValidity = this.setPullImageValidity.bind(this);
+    this.onChangeFileContent = this.onChangeFileContent.bind(this);
   }
   /* #endregion */
 
+  onChangeFileContent(value) {
+    if (this.stackFileContent.replace(/(\r\n|\n|\r)/gm, '') !== value.replace(/(\r\n|\n|\r)/gm, '')) {
+      this.state.isEditorDirty = true;
+      this.stackFileContent = value;
+    }
+  }
+
+  async updateApplicationViaWebEditor() {
+    return this.$async(async () => {
+      try {
+        const confirmed = await this.ModalService.confirmAsync({
+          title: 'Are you sure?',
+          message: 'Any changes to this application will be overriden and may cause a service interruption. Do you wish to continue',
+          buttons: {
+            confirm: {
+              label: 'Update',
+              className: 'btn-warning',
+            },
+          },
+        });
+        if (!confirmed) {
+          return;
+        }
+        this.state.updateWebEditorInProgress = true;
+        await this.StackService.updateKubeStack({ EndpointId: this.endpoint.Id, Id: this.application.StackId }, this.stackFileContent, null);
+        await this.$state.reload();
+      } catch (err) {
+        this.Notifications.error('Failure', err, 'Failed redeploying application');
+      } finally {
+        this.state.updateWebEditorInProgress = false;
+      }
+    });
+  }
+
   setPullImageValidity(validity) {
     this.state.pullImageValidity = validity;
   }
@@ -980,6 +1027,23 @@ class KubernetesCreateApplicationController {
             this.nodesLabels,
             this.filteredIngresses
           );
+
+          if (this.application.ApplicationKind) {
+            this.state.appType = this.KubernetesDeploymentTypes[this.application.ApplicationKind.toUpperCase()];
+            if (this.application.StackId) {
+              if (this.application.ApplicationKind === this.KubernetesDeploymentTypes.GIT) {
+                this.stack = await this.StackService.stack(this.application.StackId);
+                this.gitFormValues.RefName = this.stack.GitConfig.ReferenceName;
+                if (this.stack.GitConfig && this.stack.GitConfig.Authentication) {
+                  this.gitFormValues.RepositoryUsername = this.stack.GitConfig.Authentication.Username;
+                  this.gitFormValues.RepositoryAuthentication = true;
+                }
+              } else if (this.application.ApplicationKind === this.KubernetesDeploymentTypes.CONTENT) {
+                this.stackFileContent = await this.StackService.getStackFile(this.application.StackId);
+              }
+            }
+          }
+
           this.formValues.OriginalIngresses = this.filteredIngresses;
           this.formValues.ImageModel = await this.parseImageConfiguration(this.formValues.ImageModel);
           this.savedFormValues = angular.copy(this.formValues);

app/kubernetes/views/applications/edit/application.html

@@ -66,7 +66,8 @@
                       <td>Creation</td>
                       <td>
                         <span ng-if="ctrl.application.ApplicationOwner" style="margin-right: 5px;"> <i class="fas fa-user"></i> {{ ctrl.application.ApplicationOwner }} </span>
-                        <span> <i class="fas fa-clock"></i> {{ ctrl.application.CreationDate | getisodate }} </span>
+                        <span> <i class="fas fa-clock"></i> {{ ctrl.application.CreationDate | getisodate }}</span>
+                        <span> <i class="fa fa-file-code space-left space-right" aria-hidden="true"></i> Deployed from {{ ctrl.state.appType }}</span>
                       </td>
                     </tr>
                     <tr>

app/kubernetes/views/applications/edit/applicationController.js

@@ -1,7 +1,12 @@
 import angular from 'angular';
 import _ from 'lodash-es';
 import * as JsonPatch from 'fast-json-patch';
-import { KubernetesApplicationDataAccessPolicies, KubernetesApplicationDeploymentTypes, KubernetesApplicationTypes } from 'Kubernetes/models/application/models';
+import {
+  KubernetesApplicationDataAccessPolicies,
+  KubernetesApplicationDeploymentTypes,
+  KubernetesApplicationTypes,
+  KubernetesDeploymentTypes,
+} from 'Kubernetes/models/application/models';
 import KubernetesEventHelper from 'Kubernetes/helpers/eventHelper';
 import KubernetesApplicationHelper from 'Kubernetes/helpers/application';
 import { KubernetesServiceTypes } from 'Kubernetes/models/service/models';
@@ -127,6 +132,7 @@ class KubernetesApplicationController {
     this.KubernetesApplicationDeploymentTypes = KubernetesApplicationDeploymentTypes;
     this.KubernetesApplicationTypes = KubernetesApplicationTypes;
     this.EndpointProvider = EndpointProvider;
+    this.KubernetesDeploymentTypes = KubernetesDeploymentTypes;
 
     this.ApplicationDataAccessPolicies = KubernetesApplicationDataAccessPolicies;
     this.KubernetesServiceTypes = KubernetesServiceTypes;
@@ -137,6 +143,7 @@ class KubernetesApplicationController {
     this.getApplicationAsync = this.getApplicationAsync.bind(this);
     this.getEvents = this.getEvents.bind(this);
     this.getEventsAsync = this.getEventsAsync.bind(this);
+    this.updateApplicationKindText = this.updateApplicationKindText.bind(this);
     this.updateApplicationAsync = this.updateApplicationAsync.bind(this);
     this.redeployApplicationAsync = this.redeployApplicationAsync.bind(this);
     this.rollbackApplicationAsync = this.rollbackApplicationAsync.bind(this);
@@ -258,6 +265,14 @@ class KubernetesApplicationController {
     return this.$async(this.updateApplicationAsync);
   }
 
+  updateApplicationKindText() {
+    if (this.application.ApplicationKind === this.KubernetesDeploymentTypes.GIT) {
+      this.state.appType = `git repository`;
+    } else if (this.application.ApplicationKind === this.KubernetesDeploymentTypes.CONTENT) {
+      this.state.appType = `web editor`;
+    }
+  }
+
   /**
    * EVENTS
    */
@@ -334,6 +349,7 @@ class KubernetesApplicationController {
         namespace: this.$transition$.params().namespace,
         name: this.$transition$.params().name,
       },
+      appType: this.KubernetesDeploymentTypes.APPLICATION_FORM,
       eventWarningCount: 0,
       placementWarning: false,
       expandedNote: false,
@@ -350,6 +366,7 @@ class KubernetesApplicationController {
 
     await this.getApplication();
     await this.getEvents();
+    this.updateApplicationKindText();
     this.state.viewReady = true;
   }