feat(stack/swarm): add prune option for swarm stack redeployment [EE-2678] (#7025)

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

@@ -28,6 +28,9 @@ class StackRedeployGitFormController {
       RepositoryUsername: '',
       RepositoryPassword: '',
       Env: [],
+      Option: {
+        Prune: false,
+      },
       // auto update
       AutoUpdate: {
         RepositoryAutomaticUpdates: false,
@@ -41,6 +44,7 @@ class StackRedeployGitFormController {
     this.onChangeRef = this.onChangeRef.bind(this);
     this.onChangeAutoUpdate = this.onChangeAutoUpdate.bind(this);
     this.onChangeEnvVar = this.onChangeEnvVar.bind(this);
+    this.onChangeOption = this.onChangeOption.bind(this);
   }
 
   buildAnalyticsProperties() {
@@ -88,6 +92,15 @@ class StackRedeployGitFormController {
     this.onChange({ Env: value });
   }
 
+  onChangeOption(values) {
+    this.onChange({
+      Option: {
+        ...this.formValues.Option,
+        ...values,
+      },
+    });
+  }
+
   async submit() {
     const tplCrop =
       '<div>Any changes to this stack or application made locally in Portainer will be overridden, which may cause service interruption.</div>' +
@@ -101,7 +114,13 @@ class StackRedeployGitFormController {
       }
       try {
         this.state.redeployInProgress = true;
-        await this.StackService.updateGit(this.stack.Id, this.stack.EndpointId, this.FormHelper.removeInvalidEnvVars(this.formValues.Env), false, this.formValues);
+        await this.StackService.updateGit(
+          this.stack.Id,
+          this.stack.EndpointId,
+          this.FormHelper.removeInvalidEnvVars(this.formValues.Env),
+          this.formValues.Option.Prune,
+          this.formValues
+        );
         this.Notifications.success('Pulled and redeployed stack successfully');
         this.$state.reload();
       } catch (err) {
@@ -148,6 +167,9 @@ class StackRedeployGitFormController {
   $onInit() {
     this.formValues.RefName = this.model.ReferenceName;
     this.formValues.Env = this.stack.Env;
+    if (this.stack.Option) {
+      this.formValues.Option = this.stack.Option;
+    }
 
     // Init auto update
     if (this.stack.AutoUpdate && (this.stack.AutoUpdate.Interval || this.stack.AutoUpdate.Webhook)) {

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

@@ -36,7 +36,7 @@
     explanation="These values will be used as substitutions in the stack file"
     on-change="($ctrl.onChangeEnvVar)"
   ></environment-variables-panel>
-
+  <option-panel ng-model="$ctrl.formValues.Option" on-change="($ctrl.onChangeOption)"></option-panel>
   <button
     class="btn btn-sm btn-primary"
     ng-click="$ctrl.submit()"

app/portainer/components/option-panel/index.js

@@ -0,0 +1,13 @@
+import angular from 'angular';
+
+import controller from './option-panel.controller.js';
+
+angular.module('portainer.app').component('optionPanel', {
+  templateUrl: './option-panel.html',
+  controller,
+  bindings: {
+    ngModel: '<',
+    explanation: '@',
+    onChange: '<',
+  },
+});

app/portainer/components/option-panel/option-panel.controller.js

@@ -0,0 +1,10 @@
+export default class OptionPanelController {
+  /* @ngInject */
+  constructor() {
+    this.switchPruneService = this.switchPruneService.bind(this);
+  }
+
+  switchPruneService() {
+    this.onChange(this.ngModel);
+  }
+}

app/portainer/components/option-panel/option-panel.html

@@ -0,0 +1,15 @@
+<ng-form class="form-horizontal" name="$ctrl.optionForm">
+  <div class="form-group">
+    <div class="col-sm-12 form-section-title" style="margin-top: 10px; margin-left: 15px; width: 98%"> Options </div>
+
+    <!-- Prune service -->
+    <div class="col-sm-12">
+      <label class="control-label text-left">
+        Prune services
+        <portainer-tooltip position="top" message="Prune services that are no longer referenced."></portainer-tooltip>
+      </label>
+      <label class="switch" style="margin-left: 20px"> <input type="checkbox" ng-model="$ctrl.ngModel.Prune" ng-change="$ctrl.switchPruneService()" /><i></i> </label>
+    </div>
+    <!-- !Prune service -->
+  </div>
+</ng-form>

app/portainer/models/stack.js

@@ -7,6 +7,7 @@ export function StackViewModel(data) {
   this.EndpointId = data.EndpointId;
   this.SwarmId = data.SwarmId;
   this.Env = data.Env ? data.Env : [];
+  this.Option = data.Option;
   this.IsComposeFormat = data.IsComposeFormat;
   if (data.ResourceControl && data.ResourceControl.Id !== 0) {
     this.ResourceControl = new ResourceControlViewModel(data.ResourceControl);
@@ -44,6 +45,7 @@ export function OrphanedStackViewModel(data) {
   this.EndpointId = data.EndpointId;
   this.SwarmId = data.SwarmId;
   this.Env = data.Env ? data.Env : [];
+  this.Option = data.Option;
   if (data.ResourceControl && data.ResourceControl.Id !== 0) {
     this.ResourceControl = new ResourceControlViewModel(data.ResourceControl);
   }

app/portainer/services/api/stackService.js

@@ -484,6 +484,7 @@ angular.module('portainer.app').factory('StackService', [
           RepositoryAuthentication: gitConfig.RepositoryAuthentication,
           RepositoryUsername: gitConfig.RepositoryUsername,
           RepositoryPassword: gitConfig.RepositoryPassword,
+          Prune: gitConfig.Option.Prune,
         }
       ).$promise;
     };