refactor(settings): kube settings panel

fix(settings/kube): limit features

app/portainer/views/settings/components/kube-settings-panel/index.js

@@ -0,0 +1,12 @@
+import angular from 'angular';
+
+import controller from './kube-settings-panel.controller';
+
+angular.module('portainer.app').component('kubeSettingsPanel', {
+  templateUrl: './kube-settings-panel.html',
+  controller,
+  bindings: {
+    settings: '<',
+    onSubmit: '<',
+  },
+});

app/portainer/views/settings/components/kube-settings-panel/kube-settings-panel.controller.js

@@ -0,0 +1,92 @@
+import { FeatureId } from '@/react/portainer/feature-flags/enums';
+
+/* @ngInject */
+export default function KubeSettingsPanelController($scope, $async) {
+  this.onToggleAddWithForm = onToggleAddWithForm.bind(this);
+  this.onToggleHideWebEditor = onToggleHideWebEditor.bind(this);
+  this.onToggleHideFileUpload = onToggleHideFileUpload.bind(this);
+  this.onTogglePerEnvOverride = onTogglePerEnvOverride.bind(this);
+  this.saveKubernetesSettings = saveKubernetesSettings.bind(this);
+  this.$onInit = $onInit.bind(this);
+
+  this.enforceDeploymentOptions = FeatureId.ENFORCE_DEPLOYMENT_OPTIONS;
+
+  this.state = {
+    availableKubeconfigExpiryOptions: [
+      {
+        key: '1 day',
+        value: '24h',
+      },
+      {
+        key: '7 days',
+        value: `${24 * 7}h`,
+      },
+      {
+        key: '30 days',
+        value: `${24 * 30}h`,
+      },
+      {
+        key: '1 year',
+        value: `${24 * 30 * 12}h`,
+      },
+      {
+        key: 'No expiry',
+        value: '0',
+      },
+    ],
+    actionInProgress: false,
+  };
+
+  this.formValues = {
+    KubeconfigExpiry: undefined,
+    HelmRepositoryURL: undefined,
+    GlobalDeploymentOptions: {
+      hideAddWithForm: false,
+      perEnvOverride: false,
+      hideWebEditor: false,
+      hideFileUpload: false,
+    },
+  };
+
+  function onToggleAddWithForm(checked) {
+    $scope.$evalAsync(() => {
+      this.formValues.GlobalDeploymentOptions.hideAddWithForm = checked;
+      this.formValues.GlobalDeploymentOptions.hideWebEditor = checked;
+      this.formValues.GlobalDeploymentOptions.hideFileUpload = checked;
+    });
+  }
+
+  function onToggleHideWebEditor(checked) {
+    $scope.$evalAsync(() => {
+      this.formValues.GlobalDeploymentOptions.hideWebEditor = !checked;
+    });
+  }
+
+  function onToggleHideFileUpload(checked) {
+    $scope.$evalAsync(() => {
+      this.formValues.GlobalDeploymentOptions.hideFileUpload = !checked;
+    });
+  }
+
+  function onTogglePerEnvOverride(checked) {
+    $scope.$evalAsync(() => {
+      this.formValues.GlobalDeploymentOptions.perEnvOverride = checked;
+    });
+  }
+
+  async function saveKubernetesSettings() {
+    $async(async () => {
+      this.state.actionInProgress = true;
+      await this.onSubmit(this.formValues, 'Kubernetes settings updated');
+      this.state.actionInProgress = false;
+    });
+  }
+
+  function $onInit() {
+    if (this.settings.GlobalDeploymentOptions) {
+      this.formValues.GlobalDeploymentOptions = this.settings.GlobalDeploymentOptions;
+    }
+    this.formValues.KubeconfigExpiry = this.settings.KubeconfigExpiry;
+    this.formValues.HelmRepositoryURL = this.settings.HelmRepositoryURL;
+  }
+}

app/portainer/views/settings/components/kube-settings-panel/kube-settings-panel.html

@@ -0,0 +1,103 @@
+<div class="row">
+  <div class="col-sm-12">
+    <rd-widget>
+      <rd-widget-header icon="svg-kube" title-text="Kubernetes settings"></rd-widget-header>
+      <rd-widget-body>
+        <form class="form-horizontal">
+          <!-- helm charts -->
+          <div class="col-sm-12 form-section-title"> Helm Repository </div>
+          <div>
+            <div class="form-group">
+              <span class="col-sm-12 text-muted small">
+                You can specify the URL to your own helm repository here. See the
+                <a href="https://helm.sh/docs/topics/chart_repository/" target="_blank">official documentation</a> for more details.
+              </span>
+            </div>
+            <div class="form-group">
+              <label for="helmrepository_url" class="col-sm-2 control-label text-left"> URL </label>
+              <div class="col-sm-10">
+                <input type="text" class="form-control" ng-model="$ctrl.formValues.HelmRepositoryURL" id="helmrepository_url" placeholder="https://charts.bitnami.com/bitnami" />
+              </div>
+            </div>
+          </div>
+          <!-- !helm charts -->
+          <!-- kubeconfig -->
+          <div class="col-sm-12 form-section-title"> Kubeconfig </div>
+          <div class="form-group">
+            <label for="kubeconfig_expiry" class="col-sm-2 control-label text-left"> Kubeconfig expiry </label>
+            <div class="col-sm-10">
+              <select
+                id="kubeconfig_expiry"
+                class="form-control"
+                ng-model="$ctrl.formValues.KubeconfigExpiry"
+                ng-options="opt.value as opt.key for opt in $ctrl.state.availableKubeconfigExpiryOptions"
+              ></select>
+            </div>
+          </div>
+          <!-- !kubeconfig -->
+          <!-- deployment options -->
+          <div class="col-sm-12 form-section-title"> Deployment Options </div>
+          <div class="form-group">
+            <por-switch-field
+              label="'Enforce code-based deployment'"
+              checked="$ctrl.formValues.GlobalDeploymentOptions.hideAddWithForm"
+              name="'toggle_hideAddWithForm'"
+              feature-id="$ctrl.enforceDeploymentOptions"
+              on-change="($ctrl.onToggleAddWithForm)"
+              field-class="'col-sm-10'"
+              label-class="'col-sm-2'"
+              tooltip="'Hides the \'Add with form\' buttons and prevents adding/editing of resources via forms'"
+            ></por-switch-field>
+          </div>
+          <div class="form-group flex flex-col gap-y-1" ng-if="$ctrl.formValues.GlobalDeploymentOptions.hideAddWithForm">
+            <por-switch-field
+              label="'Allow web editor and custom template use'"
+              checked="!$ctrl.formValues.GlobalDeploymentOptions.hideWebEditor"
+              name="'toggle_hideWebEditor'"
+              on-change="($ctrl.onToggleHideWebEditor)"
+              field-class="'col-sm-10'"
+              label-class="'col-sm-2 !pl-4'"
+            ></por-switch-field>
+            <por-switch-field
+              label="'Allow specifying of a manifest via a URL'"
+              checked="!$ctrl.formValues.GlobalDeploymentOptions.hideFileUpload"
+              name="'toggle_hideFileUpload'"
+              on-change="($ctrl.onToggleHideFileUpload)"
+              field-class="'col-sm-10'"
+              label-class="'col-sm-2 !pl-4'"
+            ></por-switch-field>
+          </div>
+          <div class="form-group" limited-feature-dir="{{::$ctrl.enforceDeploymentOptions}}" limited-feature-class="hidden">
+            <por-switch-field
+              label="'Allow per environment override'"
+              checked="$ctrl.formValues.GlobalDeploymentOptions.perEnvOverride"
+              name="'toggle_perEnvOverride'"
+              on-change="($ctrl.onTogglePerEnvOverride)"
+              field-class="'col-sm-10'"
+              label-class="'col-sm-2'"
+              tooltip="'Allows overriding of deployment options in the Cluster setup screen of each environment'"
+            ></por-switch-field>
+          </div>
+          <!-- ! deployment options  -->
+          <!-- actions -->
+          <div class="form-group">
+            <div class="col-sm-12">
+              <button
+                type="submit"
+                class="btn btn-primary btn-sm !ml-0"
+                ng-click="$ctrl.saveKubernetesSettings()"
+                ng-disabled="$ctrl.state.actionInProgress"
+                button-spinner="$ctrl.state.actionInProgress"
+                data-cy="settings-saveKubeSettingsButton"
+              >
+                <span ng-hide="$ctrl.state.actionInProgress">Save Kubernetes settings</span>
+                <span ng-show="$ctrl.state.actionInProgress">Saving...</span>
+              </button>
+            </div>
+          </div>
+          <!-- !actions -->
+        </form>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
+</div>

app/portainer/views/settings/settings.html

@@ -2,81 +2,7 @@
 
 <application-settings-panel ng-if="settings" settings="settings" on-submit="(updateSettings)"></application-settings-panel>
 
-<!-- kube settings -->
+<kube-settings-panel ng-if="settings" settings="settings" on-submit="(updateSettings)"></kube-settings-panel>
-<div class="row">
-  <div class="col-sm-12">
-    <rd-widget>
-      <rd-widget-header icon="svg-kube" title-text="Kubernetes settings"></rd-widget-header>
-      <rd-widget-body>
-        <form class="form-horizontal">
-          <!-- helm charts -->
-          <div class="col-sm-12 form-section-title"> Helm Repository </div>
-          <div>
-            <div class="form-group">
-              <span class="col-sm-12 text-muted small">
-                You can specify the URL to your own helm repository here. See the
-                <a href="https://helm.sh/docs/topics/chart_repository/" target="_blank">official documentation</a> for more details.
-              </span>
-            </div>
-            <div class="form-group">
-              <label for="helmrepository_url" class="col-sm-2 control-label text-left"> URL </label>
-              <div class="col-sm-10">
-                <input type="text" class="form-control" ng-model="settings.HelmRepositoryURL" id="helmrepository_url" placeholder="https://charts.bitnami.com/bitnami" />
-              </div>
-            </div>
-          </div>
-          <!-- !helm charts -->
-          <!-- kube -->
-          <div class="col-sm-12 form-section-title"> Kubeconfig </div>
-          <div class="form-group">
-            <label for="kubeconfig_expiry" class="col-sm-2 control-label text-left"> Kubeconfig expiry </label>
-            <div class="col-sm-10">
-              <select
-                id="kubeconfig_expiry"
-                class="form-control"
-                ng-model="formValues.KubeconfigExpiry"
-                ng-options="opt.value as opt.key for opt in state.availableKubeconfigExpiryOptions"
-              ></select>
-            </div>
-          </div>
-          <!-- ! kube  -->
-          <!-- deployment options -->
-          <div class="col-sm-12 form-section-title"> Deployment Options </div>
-          <div class="form-group">
-            <por-switch-field
-              label="'Enforce code-based deployment'"
-              name="'toggle_hideAddWithForm'"
-              feature-id="enforceDeploymentOptions"
-              disabled="true"
-              checked="false"
-              field-class="'col-sm-10'"
-              label-class="'col-sm-2'"
-              tooltip="'Hides the \'Add with form\' buttons and prevents adding/editing of resources via forms'"
-            ></por-switch-field>
-          </div>
-          <!-- !deployment options -->
-          <!-- actions -->
-          <div class="form-group">
-            <div class="col-sm-12">
-              <button
-                type="button"
-                class="btn btn-primary btn-sm"
-                ng-click="saveKubernetesSettings()"
-                ng-disabled="state.kubeSettingsActionInProgress"
-                button-spinner="state.kubeSettingsActionInProgress"
-                data-cy="settings-saveKubeSettingsButton"
-              >
-                <span ng-hide="state.kubeSettingsActionInProgress">Save Kubernetes settings</span>
-                <span ng-show="state.kubeSettingsActionInProgress">Saving...</span>
-              </button>
-            </div>
-          </div>
-          <!-- !actions -->
-        </form>
-      </rd-widget-body>
-    </rd-widget>
-  </div>
-</div>
 
 <ssl-ca-file-settings></ssl-ca-file-settings>
 <ssl-certificate-settings ng-show="state.showHTTPS"></ssl-certificate-settings>

app/portainer/views/settings/settingsController.js

@@ -21,28 +21,7 @@ angular.module('portainer.app').controller('SettingsController', [
 
     $scope.state = {
       actionInProgress: false,
-      availableKubeconfigExpiryOptions: [
+
-        {
-          key: '1 day',
-          value: '24h',
-        },
-        {
-          key: '7 days',
-          value: `${24 * 7}h`,
-        },
-        {
-          key: '30 days',
-          value: `${24 * 30}h`,
-        },
-        {
-          key: '1 year',
-          value: `${24 * 30 * 12}h`,
-        },
-        {
-          key: 'No expiry',
-          value: '0',
-        },
-      ],
       backupInProgress: false,
       featureLimited: false,
       showHTTPS: !window.ddExtension,
@@ -51,8 +30,6 @@ angular.module('portainer.app').controller('SettingsController', [
     $scope.BACKUP_FORM_TYPES = { S3: 's3', FILE: 'file' };
 
     $scope.formValues = {
-      KubeconfigExpiry: undefined,
-      HelmRepositoryURL: undefined,
       BlackListedLabels: [],
       labelName: '',
       labelValue: '',
@@ -111,18 +88,46 @@ angular.module('portainer.app').controller('SettingsController', [
         });
     };
 
-    // only update the values from the kube settings widget. In future separate the api endpoints
+    $scope.saveS3BackupSettings = function () {
-    $scope.saveKubernetesSettings = function () {
+      const payload = getS3SettingsPayload();
-      const kubeSettingsPayload = {
+      BackupService.saveS3Settings(payload)
-        KubeconfigExpiry: $scope.formValues.KubeconfigExpiry,
+        .then(function success() {
-        HelmRepositoryURL: $scope.formValues.HelmRepositoryURL,
+          Notifications.success('Success', 'S3 Backup settings successfully saved');
-        GlobalDeploymentOptions: $scope.formValues.GlobalDeploymentOptions,
+        })
-      };
+        .catch(function error(err) {
-
+          Notifications.error('Failure', err, 'Unable to save S3 backup settings');
-      $scope.state.kubeSettingsActionInProgress = true;
+        })
-      updateSettings(kubeSettingsPayload, 'Kubernetes settings updated');
+        .finally(function final() {
+          $scope.state.backupInProgress = false;
+        });
     };
 
+    $scope.exportBackup = function () {
+      const payload = getS3SettingsPayload();
+      BackupService.exportBackup(payload)
+        .then(function success() {
+          Notifications.success('Success', 'Exported backup to S3 successfully');
+        })
+        .catch(function error(err) {
+          Notifications.error('Failure', err, 'Unable to export backup to S3');
+        })
+        .finally(function final() {
+          $scope.state.backupInProgress = false;
+        });
+    };
+
+    function getS3SettingsPayload() {
+      return {
+        Password: $scope.formValues.passwordProtectS3 ? $scope.formValues.passwordS3 : '',
+        CronRule: $scope.formValues.scheduleAutomaticBackups ? $scope.formValues.cronRule : '',
+        AccessKeyID: $scope.formValues.accessKeyId,
+        SecretAccessKey: $scope.formValues.secretAccessKey,
+        Region: $scope.formValues.region,
+        BucketName: $scope.formValues.bucketName,
+        S3CompatibleHost: $scope.formValues.s3CompatibleHost,
+      };
+    }
+
     function updateSettings(settings, successMessage = 'Settings updated') {
       // ignore CloudApiKeys to avoid overriding them
       //
@@ -141,7 +146,6 @@ angular.module('portainer.app').controller('SettingsController', [
           Notifications.error('Failure', err, 'Unable to update settings');
         })
         .finally(function final() {
-          $scope.state.kubeSettingsActionInProgress = false;
           $scope.state.actionInProgress = false;
         });
     }
@@ -152,8 +156,6 @@ angular.module('portainer.app').controller('SettingsController', [
           var settings = data;
           $scope.settings = settings;
 
-          $scope.formValues.KubeconfigExpiry = settings.KubeconfigExpiry;
-          $scope.formValues.HelmRepositoryURL = settings.HelmRepositoryURL;
           $scope.formValues.BlackListedLabels = settings.BlackListedLabels;
         })
         .catch(function error(err) {