mirror of https://github.com/portainer/portainer
refactor(settings): move app settings to panel
fix(settings): fix app panel fix(settings/apps): limit featuresrefactor/EE-2270/EE-5502/settings-components
parent
4f04fe54a7
commit
4a9236967b
|
@ -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,
|
||||
};
|
||||
}
|
||||
}
|
|
@ -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>
|
|
@ -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: '<',
|
||||
},
|
||||
});
|
|
@ -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">
|
||||
|
|
|
@ -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');
|
||||
|
|
Loading…
Reference in New Issue