From f2e59f3b4eac86a77a0edf14614fd2ec143bd2c0 Mon Sep 17 00:00:00 2001 From: Chaim Lev-Ari Date: Wed, 24 May 2023 12:38:50 +0700 Subject: [PATCH] refactor(settings): move buckup settign to component fix(settings/backup): sync with CE --- .../backup-settings-panel.controller.js | 131 +++++++ .../backup-settings-panel.html | 320 ++++++++++++++++++ .../components/backup-settings-panel/index.js | 12 + app/portainer/views/settings/settings.html | 239 +------------ .../views/settings/settingsController.js | 105 +----- 5 files changed, 465 insertions(+), 342 deletions(-) create mode 100644 app/portainer/views/settings/components/backup-settings-panel/backup-settings-panel.controller.js create mode 100644 app/portainer/views/settings/components/backup-settings-panel/backup-settings-panel.html create mode 100644 app/portainer/views/settings/components/backup-settings-panel/index.js diff --git a/app/portainer/views/settings/components/backup-settings-panel/backup-settings-panel.controller.js b/app/portainer/views/settings/components/backup-settings-panel/backup-settings-panel.controller.js new file mode 100644 index 000000000..13431ab31 --- /dev/null +++ b/app/portainer/views/settings/components/backup-settings-panel/backup-settings-panel.controller.js @@ -0,0 +1,131 @@ +import { FeatureId } from '@/react/portainer/feature-flags/enums'; +import { isBE } from '@/react/portainer/feature-flags/feature-flags.service'; +import { options } from '@/react/portainer/settings/SettingsView/backup-options'; + +/* @ngInject */ +export default function BackupSettingsPanelController($scope, $async, BackupService, Notifications, FileSaver) { + this.$onInit = $onInit.bind(this); + this.onBackupOptionsChange = onBackupOptionsChange.bind(this); + this.onToggleAutoBackups = onToggleAutoBackups.bind(this); + this.getS3SettingsPayload = getS3SettingsPayload.bind(this); + + this.downloadBackup = downloadBackup.bind(this); + this.saveS3BackupSettings = saveS3BackupSettings.bind(this); + this.exportBackup = exportBackup.bind(this); + + this.backupOptions = options; + this.s3BackupFeatureId = FeatureId.S3_BACKUP_SETTING; + this.BACKUP_FORM_TYPES = { S3: 's3', FILE: 'file' }; + + this.formValues = { + passwordProtect: false, + password: '', + scheduleAutomaticBackups: true, + cronRule: '', + accessKeyId: '', + secretAccessKey: '', + region: '', + bucketName: '', + s3CompatibleHost: '', + backupFormType: this.BACKUP_FORM_TYPES.FILE, + }; + + this.state = { + backupInProgress: false, + featureLimited: false, + }; + + function onToggleAutoBackups(checked) { + $scope.$evalAsync(() => { + this.formValues.scheduleAutomaticBackups = checked; + }); + } + + function onBackupOptionsChange(type, limited) { + this.formValues.backupFormType = type; + this.state.featureLimited = limited; + } + + function downloadBackup() { + const payload = {}; + if (this.formValues.passwordProtect) { + payload.password = this.formValues.password; + } + + this.state.backupInProgress = true; + + BackupService.downloadBackup(payload) + .then((data) => { + const downloadData = new Blob([data.file], { type: 'application/gzip' }); + FileSaver.saveAs(downloadData, data.name); + Notifications.success('Success', 'Backup successfully downloaded'); + }) + .catch((err) => { + Notifications.error('Failure', err, 'Unable to download backup'); + }) + .finally(() => { + this.state.backupInProgress = false; + }); + } + + function saveS3BackupSettings() { + const payload = this.getS3SettingsPayload(); + BackupService.saveS3Settings(payload) + .then(() => { + Notifications.success('Success', 'S3 Backup settings successfully saved'); + }) + .catch((err) => { + Notifications.error('Failure', err, 'Unable to save S3 backup settings'); + }) + .finally(() => { + this.state.backupInProgress = false; + }); + } + + function exportBackup() { + const payload = this.getS3SettingsPayload(); + BackupService.exportBackup(payload) + .then(() => { + Notifications.success('Success', 'Exported backup to S3 successfully'); + }) + .catch((err) => { + Notifications.error('Failure', err, 'Unable to export backup to S3'); + }) + .finally(() => { + this.state.backupInProgress = false; + }); + } + + function getS3SettingsPayload() { + return { + Password: this.formValues.passwordProtectS3 ? this.formValues.passwordS3 : '', + CronRule: this.formValues.scheduleAutomaticBackups ? this.formValues.cronRule : '', + AccessKeyID: this.formValues.accessKeyId, + SecretAccessKey: this.formValues.secretAccessKey, + Region: this.formValues.region, + BucketName: this.formValues.bucketName, + S3CompatibleHost: this.formValues.s3CompatibleHost, + }; + } + + function $onInit() { + return $async(async () => { + try { + const data = isBE ? await BackupService.getS3Settings() : {}; + + this.formValues.passwordS3 = data.Password; + this.formValues.cronRule = data.CronRule; + this.formValues.accessKeyId = data.AccessKeyID; + this.formValues.secretAccessKey = data.SecretAccessKey; + this.formValues.region = data.Region; + this.formValues.bucketName = data.BucketName; + this.formValues.s3CompatibleHost = data.S3CompatibleHost; + + this.formValues.scheduleAutomaticBackups = this.formValues.cronRule ? true : false; + this.formValues.passwordProtectS3 = this.formValues.passwordS3 ? true : false; + } catch (err) { + Notifications.error('Failure', err, 'Unable to retrieve S3 backup settings'); + } + }); + } +} diff --git a/app/portainer/views/settings/components/backup-settings-panel/backup-settings-panel.html b/app/portainer/views/settings/components/backup-settings-panel/backup-settings-panel.html new file mode 100644 index 000000000..ea4d6617f --- /dev/null +++ b/app/portainer/views/settings/components/backup-settings-panel/backup-settings-panel.html @@ -0,0 +1,320 @@ +
+
+ + + +
+
Backup configuration
+
This will back up your Portainer server configuration and does not include containers.
+ + + +
+ +
+ +
+ + +
+ +
+ +
+
+ +
+
+
+

This field is required.

+

+ + Please enter a valid cron rule.

+
+
+
+ +
+ +
+ +
+
+
+
+
+

This field is required.

+
+
+
+ + +
+ +
+ +
+
+
+
+
+

This field is required.

+
+
+
+ + +
+ +
+ +
+
+ + +
+ +
+ +
+
+
+
+
+

This field is required.

+
+
+
+ + +
+ +
+ +
+
+
+
+

+ + S3 host must begin with http:// or https:// +

+
+
+ +
Security settings
+ +
+ +
+ +
+
+ + +
+ +
+ +
+
+
+
+
+

This field is required.

+
+
+
+ +
+
+ +
+
+
+
+
+ +
+
+
+
+
Security settings
+ +
+ +
+ +
+
+ + + +
+ +
+ +
+
+
+
+
+

This field is required.

+
+
+
+ + + +
+
+ +
+
+ +
+
+ + +
+
diff --git a/app/portainer/views/settings/components/backup-settings-panel/index.js b/app/portainer/views/settings/components/backup-settings-panel/index.js new file mode 100644 index 000000000..397a38a5a --- /dev/null +++ b/app/portainer/views/settings/components/backup-settings-panel/index.js @@ -0,0 +1,12 @@ +import angular from 'angular'; + +import controller from './backup-settings-panel.controller'; + +angular.module('portainer.app').component('backupSettingsPanel', { + templateUrl: './backup-settings-panel.html', + controller, + bindings: { + settings: '<', + onSubmit: '<', + }, +}); diff --git a/app/portainer/views/settings/settings.html b/app/portainer/views/settings/settings.html index 76b325b91..e9086232f 100644 --- a/app/portainer/views/settings/settings.html +++ b/app/portainer/views/settings/settings.html @@ -10,241 +10,4 @@ -
-
- - - -
-
Backup configuration
-
This will back up your Portainer server configuration and does not include containers.
- - - -
- -
- -
- - -
- -
- -
-
- - -
- -
- -
-
- - -
- -
- -
-
- - -
- -
- -
-
- - -
- -
- -
-
- -
Security settings
- -
- -
- -
-
- - -
- -
- -
-
-
-
-
-

This field is required.

-
-
-
- -
-
- -
-
-
-
-
- -
-
-
-
-
Security settings
- -
- -
- -
-
- - - -
- -
- -
-
-
-
-
-

This field is required.

-
-
-
- - - -
-
- -
-
-
- -
- - -
-
+ diff --git a/app/portainer/views/settings/settingsController.js b/app/portainer/views/settings/settingsController.js index 315e2cbce..5b5d3c5d2 100644 --- a/app/portainer/views/settings/settingsController.js +++ b/app/portainer/views/settings/settingsController.js @@ -1,113 +1,13 @@ import angular from 'angular'; -import { FeatureId } from '@/react/portainer/feature-flags/enums'; -import { options } from '@/react/portainer/settings/SettingsView/backup-options'; - angular.module('portainer.app').controller('SettingsController', [ '$scope', 'Notifications', 'SettingsService', 'StateManager', - 'BackupService', - 'FileSaver', - function ($scope, Notifications, SettingsService, StateManager, BackupService, FileSaver) { - $scope.customBannerFeatureId = FeatureId.CUSTOM_LOGIN_BANNER; - $scope.s3BackupFeatureId = FeatureId.S3_BACKUP_SETTING; - $scope.enforceDeploymentOptions = FeatureId.ENFORCE_DEPLOYMENT_OPTIONS; - + function ($scope, Notifications, SettingsService, StateManager) { $scope.updateSettings = updateSettings; - $scope.backupOptions = options; - - $scope.state = { - actionInProgress: false, - - backupInProgress: false, - featureLimited: false, - showHTTPS: !window.ddExtension, - }; - - $scope.BACKUP_FORM_TYPES = { S3: 's3', FILE: 'file' }; - - $scope.formValues = { - passwordProtect: false, - password: '', - backupFormType: $scope.BACKUP_FORM_TYPES.FILE, - }; - - $scope.onToggleAutoBackups = function onToggleAutoBackups(checked) { - $scope.$evalAsync(() => { - $scope.formValues.scheduleAutomaticBackups = checked; - }); - }; - - $scope.onBackupOptionsChange = function (type, limited) { - $scope.formValues.backupFormType = type; - $scope.state.featureLimited = limited; - }; - - $scope.downloadBackup = function () { - const payload = {}; - if ($scope.formValues.passwordProtect) { - payload.password = $scope.formValues.password; - } - - $scope.state.backupInProgress = true; - - BackupService.downloadBackup(payload) - .then(function success(data) { - const downloadData = new Blob([data.file], { type: 'application/gzip' }); - FileSaver.saveAs(downloadData, data.name); - Notifications.success('Success', 'Backup successfully downloaded'); - }) - .catch(function error(err) { - Notifications.error('Failure', err, 'Unable to download backup'); - }) - .finally(function final() { - $scope.state.backupInProgress = false; - }); - }; - - $scope.saveS3BackupSettings = function () { - const payload = getS3SettingsPayload(); - BackupService.saveS3Settings(payload) - .then(function success() { - Notifications.success('Success', 'S3 Backup settings successfully saved'); - }) - .catch(function error(err) { - Notifications.error('Failure', err, 'Unable to save S3 backup settings'); - }) - .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 // @@ -123,9 +23,6 @@ angular.module('portainer.app').controller('SettingsController', [ }) .catch(function error(err) { Notifications.error('Failure', err, 'Unable to update settings'); - }) - .finally(function final() { - $scope.state.actionInProgress = false; }); }