feat(k8s): support git automated sync for k8s applications [EE-577] (#5548)

* feat(stack): backport changes to CE EE-1189

* 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>

* moved formvalue to kube app component

* fix(stack): failed to pull and redeploy compose format k8s stack

* fixed form value

* fix(k8s): file content overridden when deployment failed with compose format EE-1548

* updated API response to get IsComposeFormat and show appropriate text.

* feat(k8s): front end backport to CE

* feat(kube): kube app auto update backend (#5547)

* error message updates for different file type

* not display creation source for external application

* added confirmation modal to advanced app created by web editor

* stop showing confirmation modal when updating application

* disable rollback button when application type is not applicatiom form

* only update file after deployment succeded

* Revert "only update file after deployment succeded"

This reverts commit b94bd2e96f.

* fix(k8s): file content overridden when deployment failed with compose format EE-1556

* added analytics-on directive to pull and redeploy button

* fix(kube): don't valide resource control access for kube (#5568)

* added missing question mark to k8s confirmation modal

* fixed webhook format issue

* added question marks to k8s app confirmation modal

* added space in additional file list.

* ignoring error on deletion

* fix(k8s): Git authentication info not persisted

* added RepositoryMechanismTypes constant

* updated analytics functions

* covert RepositoryMechanism to constant

* fixed typo

* removed unused function.

* post tech review updates

* fixed save settings n redeploy button

* refact kub deploy logic

* Revert "refact kub deploy logic"

This reverts commit cbfdd58ece.

* feat(k8s): utilize user token for k8s auto update EE-1594

* feat(k8s): persist kub stack name EE-1630

* feat(k8s): support delete kub stack

* fix(app): updated logic to delete stack for different kind apps. (#5648)

* fix(app): updated logic to delete stack for different kind apps.

* renamed variable

* fix import

* added StackName field.

* fixed stack id not found issue.

* fix(k8s): fixed qusetion mark alignment issue in PAT field. (#5611)

* fix(k8s): fixed qusetion mark alignment issue in PAT field.

* moved inline css to file.

* fix(git-form: made auth input text full width

* add ignore deleted arg

* tech review updates

* typo fix

* fix(k8s): added console error when deleting k8s service.

* fix(console): added no-console config

* fix(deploy): added missing service.

* fix: use stack editor as an owner when exists (#5678)

* fix: tempalte/content based stacks edit/delete

* fix(stack): remove stack when no app. (#5769)

* fix(stack): remove stack when no app.

* support compose format in delete

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

Co-authored-by: Hui <arris_li@hotmail.com>
Co-authored-by: fhanportainer <79428273+fhanportainer@users.noreply.github.com>
Co-authored-by: Felix Han <felix.han@portainer.io>

app/kubernetes/components/datatables/application/containers-datatable/containersDatatable.html

@@ -100,11 +100,11 @@
                 </a>
               </th>
               <th>
-              <a ng-click="$ctrl.changeOrderBy('IP')">
-                Pod IP
-                <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'IP' && !$ctrl.state.reverseOrder"></i>
-                <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'IP' && $ctrl.state.reverseOrder"></i>
-              </a>
+                <a ng-click="$ctrl.changeOrderBy('IP')">
+                  Pod IP
+                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'IP' && !$ctrl.state.reverseOrder"></i>
+                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'IP' && $ctrl.state.reverseOrder"></i>
+                </a>
               </th>
               <th>
                 <a ng-click="$ctrl.changeOrderBy('CreationDate')">

app/kubernetes/components/kube-config-download-button/kube-config-download-button.html

@@ -1,13 +1,19 @@
-<span class="interactive" tooltip-append-to-body="true" tooltip-placement="bottom" tooltip-class="portainer-tooltip" uib-tooltip="Kubeconfig file will {{ $ctrl.state.expiryDays }}">
-  <button
-  ng-if="$ctrl.state.isHTTPS"
-  type="button"
-  class="btn btn-xs btn-primary"
-  ng-click="$ctrl.downloadKubeconfig()"
-  analytics-on
-  analytics-category="kubernetes"
-  analytics-event="kubernetes-kubectl-kubeconfig"
+<span
+  class="interactive"
+  tooltip-append-to-body="true"
+  tooltip-placement="bottom"
+  tooltip-class="portainer-tooltip"
+  uib-tooltip="Kubeconfig file will {{ $ctrl.state.expiryDays }}"
 >
-  Kubeconfig <i class="fas fa-download space-right"></i>
-</button>
+  <button
+    ng-if="$ctrl.state.isHTTPS"
+    type="button"
+    class="btn btn-xs btn-primary"
+    ng-click="$ctrl.downloadKubeconfig()"
+    analytics-on
+    analytics-category="kubernetes"
+    analytics-event="kubernetes-kubectl-kubeconfig"
+  >
+    Kubeconfig <i class="fas fa-download space-right"></i>
+  </button>
 </span>

app/kubernetes/models/deploy.js

@@ -15,3 +15,8 @@ export const KubernetesDeployRequestMethods = Object.freeze({
   STRING: 'string',
   URL: 'url',
 });
+
+export const RepositoryMechanismTypes = Object.freeze({
+  WEBHOOK: 'Webhook',
+  INTERVAL: 'Interval',
+});

app/kubernetes/services/serviceService.js

@@ -102,7 +102,8 @@ class KubernetesServiceService {
       const namespace = service.Namespace;
       await this.KubernetesServices(namespace).delete(params).$promise;
     } catch (err) {
-      throw new PortainerError('Unable to remove service', err);
+      // eslint-disable-next-line no-console
+      console.error('unable to remove service', err);
     }
   }
 

app/kubernetes/views/applications/applicationsController.js

@@ -7,7 +7,7 @@ import { KubernetesApplicationTypes } from 'Kubernetes/models/application/models
 
 class KubernetesApplicationsController {
   /* @ngInject */
-  constructor($async, $state, Notifications, KubernetesApplicationService, HelmService, KubernetesConfigurationService, Authentication, ModalService, LocalStorage) {
+  constructor($async, $state, Notifications, KubernetesApplicationService, HelmService, KubernetesConfigurationService, Authentication, ModalService, LocalStorage, StackService) {
     this.$async = $async;
     this.$state = $state;
     this.Notifications = Notifications;
@@ -17,6 +17,7 @@ class KubernetesApplicationsController {
     this.Authentication = Authentication;
     this.ModalService = ModalService;
     this.LocalStorage = LocalStorage;
+    this.StackService = StackService;
 
     this.onInit = this.onInit.bind(this);
     this.getApplications = this.getApplications.bind(this);
@@ -36,8 +37,18 @@ class KubernetesApplicationsController {
     let actionCount = selectedItems.length;
     for (const stack of selectedItems) {
       try {
-        const promises = _.map(stack.Applications, (app) => this.KubernetesApplicationService.delete(app));
-        await Promise.all(promises);
+        const isAppFormCreated = stack.Applications.some((x) => !x.ApplicationKind);
+
+        if (isAppFormCreated) {
+          const promises = _.map(stack.Applications, (app) => this.KubernetesApplicationService.delete(app));
+          await Promise.all(promises);
+        } else {
+          const application = stack.Applications.find((x) => x.StackId !== null);
+          if (application && application.StackId) {
+            await this.StackService.remove({ Id: application.StackId }, false, this.endpoint.Id);
+          }
+        }
+
         this.Notifications.success('Stack successfully removed', stack.Name);
         _.remove(this.state.stacks, { Name: stack.Name });
       } catch (err) {
@@ -70,6 +81,14 @@ class KubernetesApplicationsController {
           await this.HelmService.uninstall(this.endpoint.Id, application);
         } else {
           await this.KubernetesApplicationService.delete(application);
+          // Update applications in stack
+          const stack = this.state.stacks.find((x) => x.Name === application.StackName);
+          const index = stack.Applications.indexOf(application);
+          stack.Applications.splice(index, 1);
+          // remove stack if no app left in the stack
+          if (stack.Applications.length === 0 && application.StackId) {
+            await this.StackService.remove({ Id: application.StackId }, false, this.endpoint.Id);
+          }
         }
         this.Notifications.success('Application successfully removed', application.Name);
         const index = this.state.applications.indexOf(application);

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

@@ -21,6 +21,8 @@
               class-name="text-muted"
               url="ctrl.stack.GitConfig.URL"
               config-file-path="ctrl.stack.GitConfig.ConfigFilePath"
+              additional-files="ctrl.stack.AdditionalFiles"
+              type="application"
             ></git-form-info-panel>
             <div class="col-sm-12 form-section-title" ng-if="ctrl.state.appType === ctrl.KubernetesDeploymentTypes.APPLICATION_FORM">
               Namespace
@@ -56,11 +58,11 @@
             <!-- #endregion -->
 
             <!-- #region Git repository -->
-            <kubernetes-app-git-form
+            <kubernetes-redeploy-app-git-form
               ng-if="ctrl.state.appType === ctrl.KubernetesDeploymentTypes.GIT"
               stack="ctrl.stack"
               namespace="ctrl.formValues.ResourcePool.Namespace.Name"
-            ></kubernetes-app-git-form>
+            ></kubernetes-redeploy-app-git-form>
             <!-- #endregion -->
 
             <!-- #region web editor -->

app/kubernetes/views/deploy/deploy.html

@@ -29,6 +29,13 @@
                   </div>
                 </div>
 
+                <div class="form-group">
+                  <label for="stack_name" class="col-sm-1 control-label text-left">Name</label>
+                  <div class="col-lg-11 col-sm-10">
+                    <input type="text" class="form-control" ng-model="ctrl.formValues.StackName" id="stack_name" placeholder="my-app" auto-focus />
+                  </div>
+                </div>
+
                 <div class="col-sm-12 form-section-title">
                   Build method
                 </div>
@@ -42,32 +49,16 @@
                 </div>
 
                 <!-- repository -->
-                <div ng-show="ctrl.state.BuildMethod === ctrl.BuildMethods.GIT">
-                  <div class="col-sm-12 form-section-title">
-                    Git repository
-                  </div>
-                  <git-form-url-field value="ctrl.formValues.RepositoryURL" on-change="(ctrl.onRepoUrlChange)"></git-form-url-field>
-                  <git-form-ref-field value="ctrl.formValues.RepositoryReferenceName" on-change="(ctrl.onRepoRefChange)"></git-form-ref-field>
-                  <div class="form-group">
-                    <span class="col-sm-12 text-muted small">
-                      Indicate the path to the yaml file from the root of your repository.
-                    </span>
-                  </div>
-                  <div class="form-group">
-                    <label for="stack_repository_path" class="col-sm-2 control-label text-left">Manifest path</label>
-                    <div class="col-sm-10">
-                      <input
-                        type="text"
-                        class="form-control"
-                        ng-model="ctrl.formValues.FilePathInRepository"
-                        id="stack_manifest_path"
-                        placeholder="deployment.yml"
-                        data-cy="k8sAppDeploy-gitManifestPath"
-                      />
-                    </div>
-                  </div>
-                  <git-form-auth-fieldset model="ctrl.formValues" on-change="(ctrl.onChangeFormValues)"></git-form-auth-fieldset>
-                </div>
+                <git-form
+                  ng-if="ctrl.state.BuildMethod === ctrl.BuildMethods.GIT"
+                  model="ctrl.formValues"
+                  on-change="(ctrl.onChangeFormValues)"
+                  additional-file="true"
+                  auto-update="true"
+                  show-auth-explanation="true"
+                  path-text-title="Manifest path"
+                  path-placeholder="deployment.yml"
+                ></git-form>
                 <!-- !repository -->
 
                 <custom-template-selector

app/kubernetes/views/deploy/deployController.js

@@ -1,23 +1,37 @@
 import angular from 'angular';
 import _ from 'lodash-es';
 import stripAnsi from 'strip-ansi';
+import uuidv4 from 'uuid/v4';
 import PortainerError from 'Portainer/error';
 
-import { KubernetesDeployManifestTypes, KubernetesDeployBuildMethods, KubernetesDeployRequestMethods } from 'Kubernetes/models/deploy';
+import { KubernetesDeployManifestTypes, KubernetesDeployBuildMethods, KubernetesDeployRequestMethods, RepositoryMechanismTypes } from 'Kubernetes/models/deploy';
 import { buildOption } from '@/portainer/components/box-selector';
 class KubernetesDeployController {
   /* @ngInject */
-  constructor($async, $state, $window, Authentication, CustomTemplateService, ModalService, Notifications, EndpointProvider, KubernetesResourcePoolService, StackService) {
+  constructor(
+    $async,
+    $state,
+    $window,
+    Authentication,
+    ModalService,
+    Notifications,
+    EndpointProvider,
+    KubernetesResourcePoolService,
+    StackService,
+    WebhookHelper,
+    CustomTemplateService
+  ) {
     this.$async = $async;
     this.$state = $state;
     this.$window = $window;
     this.Authentication = Authentication;
-    this.CustomTemplateService = CustomTemplateService;
     this.ModalService = ModalService;
     this.Notifications = Notifications;
     this.EndpointProvider = EndpointProvider;
     this.KubernetesResourcePoolService = KubernetesResourcePoolService;
     this.StackService = StackService;
+    this.WebhookHelper = WebhookHelper;
+    this.CustomTemplateService = CustomTemplateService;
 
     this.deployOptions = [
       buildOption('method_kubernetes', 'fa fa-cubes', 'Kubernetes', 'Kubernetes manifest format', KubernetesDeployManifestTypes.KUBERNETES),
@@ -41,7 +55,20 @@ class KubernetesDeployController {
       templateId: null,
     };
 
-    this.formValues = {};
+    this.formValues = {
+      StackName: '',
+      RepositoryURL: '',
+      RepositoryReferenceName: '',
+      RepositoryAuthentication: true,
+      RepositoryUsername: '',
+      RepositoryPassword: '',
+      AdditionalFiles: [],
+      ComposeFilePathInRepository: 'deployment.yml',
+      RepositoryAutomaticUpdates: true,
+      RepositoryMechanism: RepositoryMechanismTypes.INTERVAL,
+      RepositoryFetchInterval: '5m',
+      RepositoryWebhookURL: this.WebhookHelper.returnStackWebhookUrl(uuidv4()),
+    };
     this.ManifestDeployTypes = KubernetesDeployManifestTypes;
     this.BuildMethods = KubernetesDeployBuildMethods;
     this.endpointId = this.EndpointProvider.endpointID();
@@ -51,8 +78,6 @@ class KubernetesDeployController {
     this.onChangeFileContent = this.onChangeFileContent.bind(this);
     this.getNamespacesAsync = this.getNamespacesAsync.bind(this);
     this.onChangeFormValues = this.onChangeFormValues.bind(this);
-    this.onRepoUrlChange = this.onRepoUrlChange.bind(this);
-    this.onRepoRefChange = this.onRepoRefChange.bind(this);
     this.buildAnalyticsProperties = this.buildAnalyticsProperties.bind(this);
   }
 
@@ -61,6 +86,7 @@ class KubernetesDeployController {
       type: buildLabel(this.state.BuildMethod),
       format: formatLabel(this.state.DeployType),
       role: roleLabel(this.Authentication.isAdmin()),
+      'automatic-updates': automaticUpdatesLabel(this.formValues.RepositoryAutomaticUpdates, this.formValues.RepositoryMechanism),
     };
 
     if (this.state.BuildMethod === KubernetesDeployBuildMethods.GIT) {
@@ -69,6 +95,17 @@ class KubernetesDeployController {
 
     return { metadata };
 
+    function automaticUpdatesLabel(repositoryAutomaticUpdates, repositoryMechanism) {
+      switch (repositoryAutomaticUpdates && repositoryMechanism) {
+        case RepositoryMechanismTypes.INTERVAL:
+          return 'polling';
+        case RepositoryMechanismTypes.WEBHOOK:
+          return 'webhook';
+        default:
+          return 'off';
+      }
+    }
+
     function roleLabel(isAdmin) {
       if (isAdmin) {
         return 'admin';
@@ -99,17 +136,14 @@ class KubernetesDeployController {
   disableDeploy() {
     const isGitFormInvalid =
       this.state.BuildMethod === KubernetesDeployBuildMethods.GIT &&
-      (!this.formValues.RepositoryURL ||
-        !this.formValues.FilePathInRepository ||
-        (this.formValues.RepositoryAuthentication && (!this.formValues.RepositoryUsername || !this.formValues.RepositoryPassword))) &&
+      (!this.formValues.RepositoryURL || !this.formValues.FilePathInRepository || (this.formValues.RepositoryAuthentication && !this.formValues.RepositoryPassword)) &&
       _.isEmpty(this.formValues.Namespace);
     const isWebEditorInvalid =
       this.state.BuildMethod === KubernetesDeployBuildMethods.WEB_EDITOR && _.isEmpty(this.formValues.EditorContent) && _.isEmpty(this.formValues.Namespace);
     const isURLFormInvalid = this.state.BuildMethod == KubernetesDeployBuildMethods.WEB_EDITOR.URL && _.isEmpty(this.formValues.ManifestURL);
 
     const isNamespaceInvalid = _.isEmpty(this.formValues.Namespace);
-
-    return isGitFormInvalid || isWebEditorInvalid || isURLFormInvalid || this.state.actionInProgress || isNamespaceInvalid;
+    return !this.formValues.StackName || isGitFormInvalid || isWebEditorInvalid || isURLFormInvalid || this.state.actionInProgress || isNamespaceInvalid;
   }
 
   onChangeFormValues(values) {
@@ -119,14 +153,6 @@ class KubernetesDeployController {
     };
   }
 
-  onRepoUrlChange(value) {
-    this.onChangeFormValues({ RepositoryURL: value });
-  }
-
-  onRepoRefChange(value) {
-    this.onChangeFormValues({ RepositoryReferenceName: value });
-  }
-
   onChangeTemplateId(templateId) {
     return this.$async(async () => {
       if (this.state.templateId === templateId) {
@@ -184,6 +210,7 @@ class KubernetesDeployController {
       const payload = {
         ComposeFormat: composeFormat,
         Namespace: this.formValues.Namespace,
+        StackName: this.formValues.StackName,
       };
 
       if (method === KubernetesDeployRequestMethods.REPOSITORY) {
@@ -194,7 +221,16 @@ class KubernetesDeployController {
           payload.RepositoryUsername = this.formValues.RepositoryUsername;
           payload.RepositoryPassword = this.formValues.RepositoryPassword;
         }
-        payload.FilePathInRepository = this.formValues.FilePathInRepository;
+        payload.ManifestFile = this.formValues.ComposeFilePathInRepository;
+        payload.AdditionalFiles = this.formValues.AdditionalFiles;
+        if (this.formValues.RepositoryAutomaticUpdates) {
+          payload.AutoUpdate = {};
+          if (this.formValues.RepositoryMechanism === RepositoryMechanismTypes.INTERVAL) {
+            payload.AutoUpdate.Interval = this.formValues.RepositoryFetchInterval;
+          } else if (this.formValues.RepositoryMechanism === RepositoryMechanismTypes.WEBHOOK) {
+            payload.AutoUpdate.Webhook = this.formValues.RepositoryWebhookURL.split('/').reverse()[0];
+          }
+        }
       } else if (method === KubernetesDeployRequestMethods.STRING) {
         payload.StackFileContent = this.formValues.EditorContent;
       } else {