mirror of
https://github.com/portainer/portainer.git
synced 2025-08-08 15:25:22 +02:00
refactor(settings): move app settings to panel [EE-5503] (#9043)
This commit is contained in:
Chaim Lev-Ari
GitHub
parent
4f04fe54a7
commit
c7756f3018
19 changed files with 477 additions and 201 deletions
|
|
@ -6,6 +6,7 @@ import { InternalAuth } from '@/react/portainer/settings/AuthenticationView/Inte
|
|||
import { r2a } from '@/react-tools/react2angular';
|
||||
import { withReactQuery } from '@/react-tools/withReactQuery';
|
||||
import { withUIRouter } from '@/react-tools/withUIRouter';
|
||||
import { ApplicationSettingsPanel } from '@/react/portainer/settings/SettingsView/ApplicationSettingsPanel';
|
||||
|
||||
export const settingsModule = angular
|
||||
.module('portainer.app.react.components.settings', [])
|
||||
|
|
@ -17,4 +18,8 @@ export const settingsModule = angular
|
|||
.component(
|
||||
'internalAuth',
|
||||
r2a(InternalAuth, ['onSaveSettings', 'isLoading', 'value', 'onChange'])
|
||||
)
|
||||
.component(
|
||||
'applicationSettingsPanel',
|
||||
r2a(withReactQuery(ApplicationSettingsPanel), ['onSuccess'])
|
||||
).name;
|
||||
|
|
|
|||
|
|
@ -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 on-success="(handleSuccess)"></application-settings-panel>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
|
|
|
|||
|
|
@ -11,14 +11,14 @@ angular.module('portainer.app').controller('SettingsController', [
|
|||
'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;
|
||||
$scope.updateSettings = updateSettings;
|
||||
$scope.handleSuccess = handleSuccess;
|
||||
|
||||
$scope.backupOptions = options;
|
||||
|
||||
$scope.state = {
|
||||
isDemo: false,
|
||||
actionInProgress: false,
|
||||
availableKubeconfigExpiryOptions: [
|
||||
{
|
||||
|
|
@ -50,32 +50,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 +71,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 +110,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,14 +123,10 @@ angular.module('portainer.app').controller('SettingsController', [
|
|||
};
|
||||
|
||||
function updateSettings(settings, successMessage = 'Settings updated') {
|
||||
SettingsService.update(settings)
|
||||
.then(function success(response) {
|
||||
return SettingsService.update(settings)
|
||||
.then(function success(settings) {
|
||||
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;
|
||||
handleSuccess(settings);
|
||||
})
|
||||
.catch(function error(err) {
|
||||
Notifications.error('Failure', err, 'Unable to update settings');
|
||||
|
|
@ -178,24 +137,28 @@ angular.module('portainer.app').controller('SettingsController', [
|
|||
});
|
||||
}
|
||||
|
||||
function initView() {
|
||||
const state = StateManager.getState();
|
||||
$scope.state.isDemo = state.application.demoEnvironment.enabled;
|
||||
function handleSuccess(settings) {
|
||||
if (settings) {
|
||||
StateManager.updateLogo(settings.LogoURL);
|
||||
StateManager.updateSnapshotInterval(settings.SnapshotInterval);
|
||||
StateManager.updateEnableTelemetry(settings.EnableTelemetry);
|
||||
$scope.formValues.BlackListedLabels = settings.BlackListedLabels;
|
||||
}
|
||||
|
||||
// trigger an event to update the deployment options for the react based sidebar
|
||||
const event = new CustomEvent('portainer:deploymentOptionsUpdated');
|
||||
document.dispatchEvent(event);
|
||||
}
|
||||
|
||||
function initView() {
|
||||
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…
Add table
Add a link
Reference in a new issue