feat(k8s): front end backport to CE

app/kubernetes/views/applications/applications.js

@@ -4,5 +4,6 @@ angular.module('portainer.kubernetes').component('kubernetesApplicationsView', {
   controllerAs: 'ctrl',
   bindings: {
     $transition$: '<',
+    endpoint: '<',
   },
 });

app/kubernetes/views/applications/applicationsController.js

@@ -7,7 +7,7 @@ import KubernetesApplicationHelper from 'Kubernetes/helpers/application';
 
 class KubernetesApplicationsController {
   /* @ngInject */
-  constructor($async, $state, Notifications, KubernetesApplicationService, Authentication, ModalService, LocalStorage) {
+  constructor($async, $state, Notifications, KubernetesApplicationService, Authentication, ModalService, LocalStorage, StackService) {
     this.$async = $async;
     this.$state = $state;
     this.Notifications = Notifications;
@@ -16,6 +16,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);
@@ -66,6 +67,9 @@ class KubernetesApplicationsController {
     for (const application of selectedItems) {
       try {
         await this.KubernetesApplicationService.delete(application);
+        if (application.StackId) {
+          await this.StackService.remove({ Id: application.StackId }, false, this.endpoint.Id);
+        }
         this.Notifications.success('Application successfully removed', application.Name);
         const index = this.applications.indexOf(application);
         this.applications.splice(index, 1);

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
@@ -55,11 +57,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

@@ -34,32 +34,16 @@
                 <box-selector radio-name="method" ng-model="ctrl.state.BuildMethod" options="ctrl.methodOptions" data-cy="k8sAppDeploy-buildSelector"></box-selector>
 
                 <!-- repository -->
-                <div ng-show="ctrl.state.BuildMethod === ctrl.BuildMethods.GIT">
+                <git-form
-                  <div class="col-sm-12 form-section-title">
+                  ng-if="ctrl.state.BuildMethod === ctrl.BuildMethods.GIT"
-                    Git repository
+                  model="ctrl.formValues"
-                  </div>
+                  on-change="(ctrl.onChangeFormValues)"
-                  <git-form-url-field value="ctrl.formValues.RepositoryURL" on-change="(ctrl.onRepoUrlChange)"></git-form-url-field>
+                  additional-file="true"
-                  <git-form-ref-field value="ctrl.formValues.RepositoryReferenceName" on-change="(ctrl.onRepoRefChange)"></git-form-ref-field>
+                  auto-update="true"
-                  <div class="form-group">
+                  show-auth-explanation="true"
-                    <span class="col-sm-12 text-muted small">
+                  path-text-title="Manifest path"
-                      Indicate the path to the yaml file from the root of your repository.
+                  path-placeholder="deployment.yml"
-                    </span>
+                ></git-form>
-                  </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>
                 <!-- !repository -->
 
                 <!-- editor -->

app/kubernetes/views/deploy/deployController.js

@@ -1,20 +1,22 @@
 import angular from 'angular';
 import _ from 'lodash-es';
 import stripAnsi from 'strip-ansi';
-
+import uuidv4 from 'uuid/v4';
 import { KubernetesDeployManifestTypes, KubernetesDeployBuildMethods, KubernetesDeployRequestMethods } from 'Kubernetes/models/deploy';
 import { buildOption } from '@/portainer/components/box-selector';
 class KubernetesDeployController {
   /* @ngInject */
-  constructor($async, $state, $window, ModalService, Notifications, EndpointProvider, KubernetesResourcePoolService, StackService) {
+  constructor($async, $state, $window, $analytics, ModalService, Notifications, EndpointProvider, KubernetesResourcePoolService, StackService, WebhookHelper) {
     this.$async = $async;
     this.$state = $state;
     this.$window = $window;
+    this.$analytics = $analytics;
     this.ModalService = ModalService;
     this.Notifications = Notifications;
     this.EndpointProvider = EndpointProvider;
     this.KubernetesResourcePoolService = KubernetesResourcePoolService;
     this.StackService = StackService;
+    this.WebhookHelper = WebhookHelper;
 
     this.deployOptions = [
       buildOption('method_kubernetes', 'fa fa-cubes', 'Kubernetes', 'Kubernetes manifest format', KubernetesDeployManifestTypes.KUBERNETES),
@@ -35,7 +37,19 @@ class KubernetesDeployController {
       isEditorDirty: false,
     };
 
-    this.formValues = {};
+    this.formValues = {
+      RepositoryURL: '',
+      RepositoryReferenceName: '',
+      RepositoryAuthentication: true,
+      RepositoryUsername: '',
+      RepositoryPassword: '',
+      AdditionalFiles: [],
+      ComposeFilePathInRepository: 'deployment.yml',
+      RepositoryAutomaticUpdates: true,
+      RepositoryMechanism: 'Interval',
+      RepositoryFetchInterval: '5m',
+      RepositoryWebhookURL: this.WebhookHelper.returnStackWebhookUrl(uuidv4()),
+    };
     this.ManifestDeployTypes = KubernetesDeployManifestTypes;
     this.BuildMethods = KubernetesDeployBuildMethods;
     this.endpointId = this.EndpointProvider.endpointID();
@@ -45,16 +59,12 @@ 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);
   }
 
   disableDeploy() {
     const isGitFormInvalid =
       this.state.BuildMethod === KubernetesDeployBuildMethods.GIT &&
-      (!this.formValues.RepositoryURL ||
+      (!this.formValues.RepositoryURL || !this.formValues.FilePathInRepository || (this.formValues.RepositoryAuthentication && !this.formValues.RepositoryPassword));
-        !this.formValues.FilePathInRepository ||
-        (this.formValues.RepositoryAuthentication && (!this.formValues.RepositoryUsername || !this.formValues.RepositoryPassword)));
     const isWebEditorInvalid = this.state.BuildMethod === KubernetesDeployBuildMethods.WEB_EDITOR && _.isEmpty(this.formValues.EditorContent);
 
     return isGitFormInvalid || isWebEditorInvalid || _.isEmpty(this.formValues.Namespace) || this.state.actionInProgress;
@@ -67,14 +77,6 @@ class KubernetesDeployController {
     };
   }
 
-  onRepoUrlChange(value) {
-    this.onChangeFormValues({ RepositoryURL: value });
-  }
-
-  onRepoRefChange(value) {
-    this.onChangeFormValues({ RepositoryReferenceName: value });
-  }
-
   onChangeFileContent(value) {
     this.formValues.EditorContent = value;
     this.state.isEditorDirty = true;
@@ -91,6 +93,11 @@ class KubernetesDeployController {
     this.state.actionInProgress = true;
 
     try {
+      //Analytics
+      const metadata = {
+        format: this.state.DeployType === this.ManifestDeployTypes.COMPOSE ? 'compose' : 'manifest',
+      };
+
       const method = this.state.BuildMethod === this.BuildMethods.GIT ? KubernetesDeployRequestMethods.REPOSITORY : KubernetesDeployRequestMethods.STRING;
 
       const payload = {
@@ -99,6 +106,7 @@ class KubernetesDeployController {
       };
 
       if (method === KubernetesDeployRequestMethods.REPOSITORY) {
+        metadata.type = 'git';
         payload.RepositoryURL = this.formValues.RepositoryURL;
         payload.RepositoryReferenceName = this.formValues.RepositoryReferenceName;
         payload.RepositoryAuthentication = this.formValues.RepositoryAuthentication ? true : false;
@@ -106,11 +114,26 @@ 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 === `Interval`) {
+            payload.AutoUpdate.Interval = this.formValues.RepositoryFetchInterval;
+            metadata['automatic-updates'] = 'polling';
+          } else if (this.formValues.RepositoryMechanism === `Webhook`) {
+            payload.AutoUpdate.Webhook = this.formValues.RepositoryWebhookURL;
+            metadata['automatic-updates'] = 'webhook';
+          }
+        } else {
+          metadata['automatic-updates'] = 'off';
+        }
       } else {
+        metadata.type = 'web-editor';
         payload.StackFileContent = this.formValues.EditorContent;
       }
 
+      this.$analytics.eventTrack('kubernetes-application-advanced-deployment', { category: 'kubernetes', metadata: metadata });
       await this.StackService.kubernetesDeploy(this.endpointId, method, payload);
 
       this.Notifications.success('Manifest successfully deployed');
@@ -158,6 +181,19 @@ class KubernetesDeployController {
     }
   }
   async onInit() {
+    this.state = {
+      DeployType: KubernetesDeployManifestTypes.KUBERNETES,
+      BuildMethod: KubernetesDeployBuildMethods.GIT,
+      tabLogsDisabled: true,
+      activeTab: 0,
+      viewReady: false,
+      isEditorDirty: false,
+    };
+
+    this.ManifestDeployTypes = KubernetesDeployManifestTypes;
+    this.BuildMethods = KubernetesDeployBuildMethods;
+    this.endpointId = this.EndpointProvider.endpointID();
+
     await this.getNamespaces();
 
     this.state.viewReady = true;

app/portainer/components/forms/git-form/git-form-compose-path-field/git-form-compose-path-field.html

@@ -4,8 +4,8 @@
   </span>
 </div>
 <div class="form-group">
-  <label for="stack_repository_path" class="col-sm-2 control-label text-left">Compose path</label>
+  <label for="stack_repository_path" class="col-sm-2 control-label text-left">{{ $ctrl.textTitle }}</label>
   <div class="col-sm-10">
-    <input type="text" class="form-control" ng-model="$ctrl.value" ng-change="$ctrl.onChange($ctrl.value)" id="stack_repository_path" placeholder="docker-compose.yml" />
+    <input type="text" class="form-control" ng-model="$ctrl.value" ng-change="$ctrl.onChange($ctrl.value)" id="stack_repository_path" placeholder="{{ $ctrl.placeholder }}" />
   </div>
 </div>

app/portainer/components/forms/git-form/git-form-compose-path-field/index.js

@@ -1,6 +1,8 @@
 export const gitFormComposePathField = {
   templateUrl: './git-form-compose-path-field.html',
   bindings: {
+    textTitle: '@',
+    placeholder: '@',
     value: '<',
     onChange: '<',
   },

app/portainer/components/forms/git-form/git-form-info-panel/git-form-info-panel.html

@@ -1,7 +1,7 @@
 <div class="form-group" ng-class="$ctrl.className">
   <div class="col-sm-12">
     <p>
-      This stack was deployed from the git repository <code>{{ $ctrl.url }}</code>
+      This {{ $ctrl.type }} was deployed from the git repository <code>{{ $ctrl.url }}</code>
       .
     </p>
     <p>
@@ -9,7 +9,7 @@
       <code
         >{{ $ctrl.configFilePath }}<span ng-if="$ctrl.additionalFiles.length > 0">,{{ $ctrl.additionalFiles.join(',') }}</span></code
       >
-      in git and pull from here to update the stack.
+      in git and pull from here to update the {{ $ctrl.type }}.
     </p>
   </div>
 </div>

app/portainer/components/forms/git-form/git-form-info-panel/index.js

@@ -5,5 +5,6 @@ export const gitFormInfoPanel = {
     configFilePath: '<',
     additionalFiles: '<',
     className: '@',
+    type: '@',
   },
 };

app/portainer/components/forms/git-form/git-form.html

@@ -4,7 +4,12 @@
   </div>
   <git-form-url-field value="$ctrl.model.RepositoryURL" on-change="($ctrl.onChangeURL)"></git-form-url-field>
   <git-form-ref-field value="$ctrl.model.RepositoryReferenceName" on-change="($ctrl.onChangeRefName)"></git-form-ref-field>
-  <git-form-compose-path-field value="$ctrl.model.ComposeFilePathInRepository" on-change="($ctrl.onChangeComposePath)"></git-form-compose-path-field>
+  <git-form-compose-path-field
+    text-title="{{ $ctrl.pathTextTitle }}"
+    placeholder="{{ $ctrl.pathPlaceholder }}"
+    value="$ctrl.model.ComposeFilePathInRepository"
+    on-change="($ctrl.onChangeComposePath)"
+  ></git-form-compose-path-field>
   <git-form-additional-files-panel ng-if="$ctrl.additionalFile" model="$ctrl.model" on-change="($ctrl.onChange)"></git-form-additional-files-panel>
   <git-form-auth-fieldset model="$ctrl.model" on-change="($ctrl.onChange)" show-auth-explanation="$ctrl.showAuthExplanation"></git-form-auth-fieldset>
   <git-form-auto-update-fieldset ng-if="$ctrl.autoUpdate" model="$ctrl.model" on-change="($ctrl.onChange)"></git-form-auto-update-fieldset>

app/portainer/components/forms/git-form/git-form.js

@@ -4,6 +4,8 @@ export const gitForm = {
   templateUrl: './git-form.html',
   controller,
   bindings: {
+    pathTextTitle: '@',
+    pathPlaceholder: '@',
     model: '<',
     onChange: '<',
     additionalFile: '<',

app/portainer/components/forms/kubernetes-app-git-form/kubernetes-app-git-form.js

@@ -1,13 +0,0 @@
-import angular from 'angular';
-import controller from './kubernetes-app-git-form.controller';
-
-const kubernetesAppGitForm = {
-  templateUrl: './kubernetes-app-git-form.html',
-  controller,
-  bindings: {
-    namespace: '<',
-    stack: '<',
-  },
-};
-
-angular.module('portainer.app').component('kubernetesAppGitForm', kubernetesAppGitForm);

app/portainer/components/forms/kubernetes-redeploy-app-git-form/kubernetes-redeploy-app-git-form.controller.js

@@ -1,16 +1,18 @@
-class KubernetesAppGitFormController {
+import uuidv4 from 'uuid/v4';
+class KubernetesRedeployAppGitFormController {
   /* @ngInject */
-  constructor($async, $state, StackService, ModalService, Notifications) {
+  constructor($async, $state, $analytics, StackService, ModalService, Notifications, WebhookHelper) {
     this.$async = $async;
     this.$state = $state;
     this.StackService = StackService;
     this.ModalService = ModalService;
     this.Notifications = Notifications;
+    this.WebhookHelper = WebhookHelper;
 
     this.state = {
       saveGitSettingsInProgress: false,
       redeployInProgress: false,
-      showConfig: true,
+      showConfig: false,
       isEdit: false,
     };
 
@@ -19,6 +21,13 @@ class KubernetesAppGitFormController {
       RepositoryAuthentication: false,
       RepositoryUsername: '',
       RepositoryPassword: '',
+      // auto upadte
+      AutoUpdate: {
+        RepositoryAutomaticUpdates: false,
+        RepositoryMechanism: 'Interval',
+        RepositoryFetchInterval: '5m',
+        RepositoryWebhookURL: '',
+      },
     };
 
     this.onChange = this.onChange.bind(this);
@@ -39,6 +48,20 @@ class KubernetesAppGitFormController {
   async pullAndRedeployApplication() {
     return this.$async(async () => {
       try {
+        //Analytics
+        const metadata = {};
+
+        if (this.formValues.AutoUpdate.RepositoryAutomaticUpdates) {
+          if (this.formValues.AutoUpdate.RepositoryMechanism === `Interval`) {
+            metadata['automatic-updates'] = 'polling';
+          } else if (this.formValues.AutoUpdate.RepositoryMechanism === `Webhook`) {
+            metadata['automatic-updates'] = 'webhook';
+          }
+        } else {
+          metadata['automatic-updates'] = 'off';
+        }
+        this.$analytics.eventTrack('kubernetes-application-edit', { category: 'kubernetes', metadata: metadata });
+
         const confirmed = await this.ModalService.confirmAsync({
           title: 'Are you sure?',
           message: 'Any changes to this application will be overriden by the definition in git and may cause a service interruption. Do you wish to continue',
@@ -84,6 +107,23 @@ class KubernetesAppGitFormController {
 
   $onInit() {
     this.formValues.RefName = this.stack.GitConfig.ReferenceName;
+    // Init auto update
+    if (this.stack.AutoUpdate && (this.stack.AutoUpdate.Interval || this.stack.AutoUpdate.Webhook)) {
+      this.formValues.AutoUpdate.RepositoryAutomaticUpdates = true;
+
+      if (this.stack.AutoUpdate.Interval) {
+        this.formValues.AutoUpdate.RepositoryMechanism = `Interval`;
+        this.formValues.AutoUpdate.RepositoryFetchInterval = this.stack.AutoUpdate.Interval;
+      } else if (this.stack.AutoUpdate.Webhook) {
+        this.formValues.AutoUpdate.RepositoryMechanism = `Webhook`;
+        this.formValues.AutoUpdate.RepositoryWebhookURL = this.WebhookHelper.returnStackWebhookUrl(this.stack.AutoUpdate.Webhook);
+      }
+    }
+
+    if (!this.formValues.AutoUpdate.RepositoryWebhookURL) {
+      this.formValues.AutoUpdate.RepositoryWebhookURL = this.WebhookHelper.returnStackWebhookUrl(uuidv4());
+    }
+
     if (this.stack.GitConfig && this.stack.GitConfig.Authentication) {
       this.formValues.RepositoryUsername = this.stack.GitConfig.Authentication.Username;
       this.formValues.RepositoryAuthentication = true;
@@ -92,4 +132,4 @@ class KubernetesAppGitFormController {
   }
 }
 
-export default KubernetesAppGitFormController;
+export default KubernetesRedeployAppGitFormController;

app/portainer/components/forms/kubernetes-redeploy-app-git-form/kubernetes-redeploy-app-git-form.html

@@ -9,7 +9,7 @@
       </p>
     </div>
   </div>
-
+  <git-form-auto-update-fieldset model="$ctrl.formValues.AutoUpdate" on-change="($ctrl.onChange)"></git-form-auto-update-fieldset>
   <div class="form-group">
     <div class="col-sm-12">
       <p>
@@ -36,6 +36,7 @@
   <button
     class="btn btn-sm btn-primary"
     ng-click="$ctrl.pullAndRedeployApplication()"
+    ng-if="!$ctrl.formValues.AutoUpdate.RepositoryAutomaticUpdates"
     ng-disabled="$ctrl.isSubmitButtonDisabled() || !$ctrl.redeployGitForm.$valid"
     style="margin-top: 7px; margin-left: 0;"
     button-spinner="ctrl.state.redeployInProgress"

app/portainer/components/forms/kubernetes-redeploy-app-git-form/kubernetes-redeploy-app-git-form.js

@@ -0,0 +1,13 @@
+import angular from 'angular';
+import controller from './kubernetes-redeploy-app-git-form.controller';
+
+const kubernetesRedeployAppGitForm = {
+  templateUrl: './kubernetes-redeploy-app-git-form.html',
+  controller,
+  bindings: {
+    stack: '<',
+    namespace: '<',
+  },
+};
+
+angular.module('portainer.app').component('kubernetesRedeployAppGitForm', kubernetesRedeployAppGitForm);

app/portainer/services/api/stackService.js

@@ -277,7 +277,17 @@ angular.module('portainer.app').factory('StackService', [
           StackFileContent: stackFile,
         };
       } else {
+        const autoUpdate = {};
+        if (gitConfig.AutoUpdate && gitConfig.AutoUpdate.RepositoryAutomaticUpdates) {
+          if (gitConfig.AutoUpdate.RepositoryMechanism === 'Interval') {
+            autoUpdate.Interval = gitConfig.AutoUpdate.RepositoryFetchInterval;
+          } else if (gitConfig.AutoUpdate.RepositoryMechanism === 'Webhook') {
+            autoUpdate.Webhook = gitConfig.AutoUpdate.RepositoryWebhookURL.split('/').reverse()[0];
+          }
+        }
+
         payload = {
+          AutoUpdate: autoUpdate,
           RepositoryReferenceName: gitConfig.RefName,
           RepositoryAuthentication: gitConfig.RepositoryAuthentication,
           RepositoryUsername: gitConfig.RepositoryUsername,

app/portainer/views/stacks/create/createstack.html

@@ -113,6 +113,8 @@
             additional-file="true"
             auto-update="true"
             show-auth-explanation="true"
+            path-text-title="Compose path"
+            path-placeholder="docker-compose.yml"
           ></git-form>
 
           <custom-template-selector