refactor(settings): move app settings to panel

fix(settings): fix app panel

fix(settings/apps): limit features
refactor/EE-2270/EE-5502/settings-components
Chaim Lev-Ari 2023-05-22 03:44:25 +07:00
parent 4f04fe54a7
commit 4a9236967b
5 changed files with 257 additions and 181 deletions

View File

@ -0,0 +1,88 @@
import { FeatureId } from '@/react/portainer/feature-flags/enums';
/* @ngInject */
export default function ApplicationSettingsPanelController($scope, $async, StateManager) {
this.saveApplicationSettings = saveApplicationSettings.bind(this);
this.onChangeCheckInInterval = onChangeCheckInInterval.bind(this);
this.onToggleCustomLogo = onToggleCustomLogo.bind(this);
this.$onInit = $onInit.bind(this);
this.onToggleEnableTelemetry = onToggleEnableTelemetry.bind(this);
this.onToggleCustomLoginBanner = onToggleCustomLoginBanner.bind(this);
this.onChangeFormValues = onChangeFormValues.bind(this);
this.customBannerFeatureId = FeatureId.CUSTOM_LOGIN_BANNER;
this.formValues = {
logoURL: '',
logoEnabled: false,
customLoginBannerEnabled: false,
customLoginBanner: '',
snapshotInterval: '',
enableTelemetry: false,
templatesUrl: '',
edgeAgentCheckinInterval: '',
};
this.state = {
isDemo: false,
actionInProgress: false,
};
async function saveApplicationSettings() {
$async(async () => {
const appSettingsPayload = {
SnapshotInterval: this.settings.SnapshotInterval,
LogoURL: this.formValues.customLogo ? this.settings.LogoURL : '',
EnableTelemetry: this.settings.EnableTelemetry,
CustomLoginBanner: this.formValues.customLoginBanner ? this.settings.CustomLoginBanner : '',
TemplatesURL: this.settings.TemplatesURL,
EdgeAgentCheckinInterval: this.settings.EdgeAgentCheckinInterval,
};
this.state.actionInProgress = true;
await this.onSubmit(appSettingsPayload, 'Application settings updated');
this.state.actionInProgress = false;
});
}
function onToggleCustomLogo(logoEnabled) {
this.onChangeFormValues({ logoEnabled });
}
function onChangeCheckInInterval(edgeAgentCheckinInterval) {
this.onChangeFormValues({ edgeAgentCheckinInterval });
}
function onToggleEnableTelemetry(enableTelemetry) {
this.onChangeFormValues({ enableTelemetry });
}
function onToggleCustomLoginBanner(customLoginBannerEnabled) {
this.onChangeFormValues({ customLoginBannerEnabled });
}
function onChangeFormValues(newPartialValues) {
$scope.$evalAsync(() => {
this.formValues = {
...this.formValues,
...newPartialValues,
};
});
}
function $onInit() {
const state = StateManager.getState();
this.state.isDemo = state.application.demoEnvironment.enabled;
this.formValues = {
logoURL: this.settings.LogoURL,
logoEnabled: !!this.settings.LogoURL,
customLoginBannerEnabled: !!this.settings.CustomLoginBanner,
customLoginBanner: this.settings.CustomLoginBanner,
snapshotInterval: this.settings.SnapshotInterval,
enableTelemetry: this.settings.EnableTelemetry,
templatesUrl: this.settings.TemplatesURL,
edgeAgentCheckinInterval: this.settings.EdgeAgentCheckinInterval,
};
}
}

View File

@ -0,0 +1,148 @@
<div class="row">
<div class="col-sm-12">
<rd-widget>
<rd-widget-header icon="settings" title-text="Application settings"></rd-widget-header>
<rd-widget-body>
<form class="form-horizontal">
<!-- snapshot-interval -->
<div class="form-group">
<label for="snapshot_interval" class="col-sm-2 control-label text-left">Snapshot interval</label>
<div class="col-sm-10">
<input type="text" class="form-control" ng-model="$ctrl.formValues.snapshotInterval" id="snapshot_interval" placeholder="e.g. 15m" />
</div>
</div>
<!-- !snapshot-interval -->
<!-- checkin-interval -->
<edge-checkin-interval-field
size="'xsmall'"
value="$ctrl.formValues.edgeAgentCheckinInterval"
label="'Edge agent default poll frequency'"
is-default-hidden="true"
on-change="($ctrl.onChangeCheckInInterval)"
></edge-checkin-interval-field>
<!-- !checkin-interval -->
<!-- logo -->
<div class="form-group">
<por-switch-field
label="'Use custom logo'"
checked="$ctrl.formValues.logoEnabled"
name="'toggle_logo'"
disabled="$ctrl.state.isDemo"
on-change="($ctrl.onToggleCustomLogo)"
field-class="'col-sm-12'"
label-class="'col-sm-2'"
></por-switch-field>
<div class="col-sm-12" ng-if="$ctrl.state.isDemo" style="margin-top: 10px">
<span class="small text-muted">You cannot use this feature in the demo version of Portainer.</span>
</div>
</div>
<div ng-if="$ctrl.formValues.logoEnabled">
<div class="form-group">
<span class="col-sm-12 text-muted small"> You can specify the URL to your logo here. For an optimal display, logo dimensions should be 155px by 55px. </span>
</div>
<div class="form-group">
<label for="logo_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.logoUrl" id="logo_url" placeholder="https://mycompany.com/logo.png" />
</div>
</div>
</div>
<!-- !logo -->
<div class="form-group">
<por-switch-field
label="'Allow the collection of anonymous statistics'"
checked="$ctrl.formValues.enableTelemetry"
name="'toggle_enableTelemetry'"
on-change="($ctrl.onToggleEnableTelemetry)"
disabled="$ctrl.state.isDemo"
field-class="'col-sm-12'"
label-class="'col-sm-2'"
></por-switch-field>
<div class="col-sm-12" ng-if="$ctrl.state.isDemo" style="margin-top: 10px">
<span class="small text-muted">You cannot use this feature in the demo version of Portainer.</span>
</div>
<div class="col-sm-12 text-muted small" style="margin-top: 10px">
You can find more information about this in our
<a href="https://www.portainer.io/documentation/in-app-analytics-and-privacy-policy/" target="_blank">privacy policy</a>.
</div>
</div>
<!-- login screen banner -->
<div class="form-group">
<por-switch-field
label="'Login screen banner'"
checked="$ctrl.formValues.customLoginBannerEnabled"
name="'toggle_login_banner'"
disabled="$ctrl.state.isDemo"
feature-id="$ctrl.customBannerFeatureId"
on-change="($ctrl.onToggleCustomLoginBanner)"
field-class="'col-sm-12'"
label-class="'col-sm-2'"
></por-switch-field>
<div class="col-sm-12" ng-if="$ctrl.state.isDemo" style="margin-top: 10px">
<span class="small text-muted">You cannot use this feature in the demo version of Portainer.</span>
</div>
<div class="col-sm-12 text-muted small" style="margin-top: 10px"> You can set a custom banner that will be shown to all users during login. </div>
</div>
<div ng-if="$ctrl.formValues.customLoginBannerEnabled">
<div class="form-group">
<label for="custom_login_banner" class="col-sm-2 control-label required text-left">Details</label>
<div class="col-sm-10">
<textarea class="form-control" rows="5" ng-model="$ctrl.formValues.customLoginBanner" id="custom_login_banner" placeholder="Banner details"></textarea>
</div>
</div>
</div>
<!-- !login screen banner -->
<!-- templates -->
<div class="col-sm-12 form-section-title"> App Templates </div>
<div>
<div class="form-group">
<span class="col-sm-12 text-muted small">
You can specify the URL to your own template definitions file here. See
<a href="https://docs.portainer.io/advanced/app-templates/build" target="_blank">Portainer documentation</a> for more details.
</span>
</div>
<div class="form-group">
<label for="templates_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.templatesUrl"
id="templates_url"
placeholder="https://myserver.mydomain/templates.json"
required
data-cy="settings-templateUrl"
/>
</div>
</div>
</div>
<!-- !templates -->
<!-- actions -->
<div class="form-group">
<div class="col-sm-12">
<button
type="button"
class="btn btn-primary btn-sm !ml-0"
ng-click="$ctrl.saveApplicationSettings()"
ng-disabled="$ctrl.state.actionInProgress || !$ctrl.formValues.templatesUrl || ($ctrl.formValues.customLoginBannerEnabled && !$ctrl.formValues.customLoginBanner)"
button-spinner="$ctrl.state.actionInProgress"
data-cy="settings-saveSettingsButton"
>
<span ng-hide="$ctrl.state.actionInProgress">Save application settings</span>
<span ng-show="$ctrl.state.actionInProgress">Saving...</span>
</button>
</div>
</div>
<!-- !actions -->
</form>
</rd-widget-body>
</rd-widget>
</div>
</div>

View File

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

View File

@ -1,137 +1,6 @@
<page-header title="'Settings'" breadcrumbs="['Settings']"> </page-header>
<div class="row">
<div class="col-sm-12">
<rd-widget>
<rd-widget-header icon="settings" title-text="Application settings"></rd-widget-header>
<rd-widget-body>
<form class="form-horizontal">
<!-- snapshot-interval -->
<div class="form-group">
<label for="snapshot_interval" class="col-sm-2 control-label text-left">Snapshot interval</label>
<div class="col-sm-10">
<input type="text" class="form-control" ng-model="settings.SnapshotInterval" id="snapshot_interval" placeholder="e.g. 15m" />
</div>
</div>
<!-- !snapshot-interval -->
<!-- checkin-interval -->
<edge-checkin-interval-field
size="'xsmall'"
value="settings.EdgeAgentCheckinInterval"
label="'Edge agent default poll frequency'"
is-default-hidden="true"
on-change="(onChangeCheckInInterval)"
></edge-checkin-interval-field>
<!-- !checkin-interval -->
<!-- logo -->
<div class="form-group">
<por-switch-field
label="'Use custom logo'"
checked="formValues.customLogo"
name="'toggle_logo'"
disabled="state.isDemo"
on-change="(onToggleCustomLogo)"
field-class="'col-sm-12'"
label-class="'col-sm-2'"
></por-switch-field>
<div class="col-sm-12" ng-if="state.isDemo" style="margin-top: 10px">
<span class="small text-muted">You cannot use this feature in the demo version of Portainer.</span>
</div>
</div>
<div ng-if="formValues.customLogo">
<div class="form-group">
<span class="col-sm-12 text-muted small"> You can specify the URL to your logo here. For an optimal display, logo dimensions should be 155px by 55px. </span>
</div>
<div class="form-group">
<label for="logo_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.LogoURL" id="logo_url" placeholder="https://mycompany.com/logo.png" />
</div>
</div>
</div>
<!-- !logo -->
<div class="form-group">
<por-switch-field
label="'Allow the collection of anonymous statistics'"
checked="formValues.enableTelemetry"
name="'toggle_enableTelemetry'"
on-change="(onToggleEnableTelemetry)"
disabled="state.isDemo"
field-class="'col-sm-12'"
label-class="'col-sm-2'"
></por-switch-field>
<div class="col-sm-12" ng-if="state.isDemo" style="margin-top: 10px">
<span class="small text-muted">You cannot use this feature in the demo version of Portainer.</span>
</div>
<div class="col-sm-12 text-muted small" style="margin-top: 10px">
You can find more information about this in our
<a href="https://www.portainer.io/documentation/in-app-analytics-and-privacy-policy/" target="_blank">privacy policy</a>.
</div>
</div>
<!-- login screen banner -->
<div class="form-group">
<por-switch-field
label="'Login screen banner'"
name="'toggle_login_banner'"
feature-id="customBannerFeatureId"
checked="$formValues.customLoginBanner"
on-change="(onToggleCustomLoginBanner)"
field-class="'col-sm-12'"
label-class="'col-sm-2'"
></por-switch-field>
</div>
<!-- !login screen banner -->
<!-- templates -->
<div class="col-sm-12 form-section-title"> App Templates </div>
<div>
<div class="form-group">
<span class="col-sm-12 text-muted small">
You can specify the URL to your own template definitions file here. See
<a href="https://docs.portainer.io/advanced/app-templates/build" target="_blank">Portainer documentation</a> for more details.
</span>
</div>
<div class="form-group">
<label for="templates_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.TemplatesURL"
id="templates_url"
placeholder="https://myserver.mydomain/templates.json"
required
data-cy="settings-templateUrl"
/>
</div>
</div>
</div>
<!-- !templates -->
<!-- actions -->
<div class="form-group">
<div class="col-sm-12">
<button
type="button"
class="btn btn-primary btn-sm"
ng-click="saveApplicationSettings()"
ng-disabled="state.actionInProgress || !settings.TemplatesURL"
button-spinner="state.actionInProgress"
data-cy="settings-saveSettingsButton"
>
<span ng-hide="state.actionInProgress">Save application settings</span>
<span ng-show="state.actionInProgress">Saving...</span>
</button>
</div>
</div>
<!-- !actions -->
</form>
</rd-widget-body>
</rd-widget>
</div>
</div>
<application-settings-panel ng-if="settings" settings="settings" on-submit="(updateSettings)"></application-settings-panel>
<div class="row">
<div class="col-sm-12">

View File

@ -15,10 +15,11 @@ angular.module('portainer.app').controller('SettingsController', [
$scope.s3BackupFeatureId = FeatureId.S3_BACKUP_SETTING;
$scope.enforceDeploymentOptions = FeatureId.ENFORCE_DEPLOYMENT_OPTIONS;
$scope.updateSettings = updateSettings;
$scope.backupOptions = options;
$scope.state = {
isDemo: false,
actionInProgress: false,
availableKubeconfigExpiryOptions: [
{
@ -50,32 +51,16 @@ angular.module('portainer.app').controller('SettingsController', [
$scope.BACKUP_FORM_TYPES = { S3: 's3', FILE: 'file' };
$scope.formValues = {
customLogo: false,
KubeconfigExpiry: undefined,
HelmRepositoryURL: undefined,
BlackListedLabels: [],
labelName: '',
labelValue: '',
enableTelemetry: false,
passwordProtect: false,
password: '',
backupFormType: $scope.BACKUP_FORM_TYPES.FILE,
};
$scope.initialFormValues = {};
$scope.onToggleEnableTelemetry = function onToggleEnableTelemetry(checked) {
$scope.$evalAsync(() => {
$scope.formValues.enableTelemetry = checked;
});
};
$scope.onToggleCustomLogo = function onToggleCustomLogo(checked) {
$scope.$evalAsync(() => {
$scope.formValues.customLogo = checked;
});
};
$scope.onToggleAutoBackups = function onToggleAutoBackups(checked) {
$scope.$evalAsync(() => {
$scope.formValues.scheduleAutomaticBackups = checked;
@ -87,13 +72,6 @@ angular.module('portainer.app').controller('SettingsController', [
$scope.state.featureLimited = limited;
};
$scope.onChangeCheckInInterval = function (interval) {
$scope.$evalAsync(() => {
var settings = $scope.settings;
settings.EdgeAgentCheckinInterval = interval;
});
};
$scope.removeFilteredContainerLabel = function (index) {
const filteredSettings = $scope.formValues.BlackListedLabels.filter((_, i) => i !== index);
const filteredSettingsPayload = { BlackListedLabels: filteredSettings };
@ -133,20 +111,6 @@ angular.module('portainer.app').controller('SettingsController', [
});
};
// only update the values from the app settings widget. In future separate the api endpoints
$scope.saveApplicationSettings = function () {
const appSettingsPayload = {
SnapshotInterval: $scope.settings.SnapshotInterval,
LogoURL: $scope.formValues.customLogo ? $scope.settings.LogoURL : '',
EnableTelemetry: $scope.formValues.enableTelemetry,
TemplatesURL: $scope.settings.TemplatesURL,
EdgeAgentCheckinInterval: $scope.settings.EdgeAgentCheckinInterval,
};
$scope.state.actionInProgress = true;
updateSettings(appSettingsPayload, 'Application settings updated');
};
// only update the values from the kube settings widget. In future separate the api endpoints
$scope.saveKubernetesSettings = function () {
const kubeSettingsPayload = {
@ -160,13 +124,17 @@ angular.module('portainer.app').controller('SettingsController', [
};
function updateSettings(settings, successMessage = 'Settings updated') {
SettingsService.update(settings)
// ignore CloudApiKeys to avoid overriding them
//
// it is not ideal solution as API still accepts CloudAPIKeys
// which may override the cloud provider API keys
settings.CloudApiKeys = undefined;
return SettingsService.update(settings)
.then(function success(response) {
Notifications.success('Success', successMessage);
StateManager.updateLogo(settings.LogoURL);
StateManager.updateSnapshotInterval(settings.SnapshotInterval);
StateManager.updateEnableTelemetry(settings.EnableTelemetry);
$scope.initialFormValues.enableTelemetry = response.EnableTelemetry;
$scope.formValues.BlackListedLabels = response.BlackListedLabels;
})
.catch(function error(err) {
@ -179,23 +147,14 @@ angular.module('portainer.app').controller('SettingsController', [
}
function initView() {
const state = StateManager.getState();
$scope.state.isDemo = state.application.demoEnvironment.enabled;
SettingsService.settings()
.then(function success(data) {
var settings = data;
$scope.settings = settings;
if (settings.LogoURL !== '') {
$scope.formValues.customLogo = true;
}
$scope.formValues.enableTelemetry = settings.EnableTelemetry;
$scope.formValues.KubeconfigExpiry = settings.KubeconfigExpiry;
$scope.formValues.HelmRepositoryURL = settings.HelmRepositoryURL;
$scope.formValues.BlackListedLabels = settings.BlackListedLabels;
$scope.initialFormValues.enableTelemetry = settings.EnableTelemetry;
})
.catch(function error(err) {
Notifications.error('Failure', err, 'Unable to retrieve application settings');