diff --git a/app/portainer/views/settings/settingsController.js b/app/portainer/views/settings/settingsController.js
index 5ad50e716..b749af019 100644
--- a/app/portainer/views/settings/settingsController.js
+++ b/app/portainer/views/settings/settingsController.js
@@ -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');
diff --git a/app/react/components/form-components/validate-url.ts b/app/react/components/form-components/validate-url.ts
new file mode 100644
index 000000000..bfe766e8a
--- /dev/null
+++ b/app/react/components/form-components/validate-url.ts
@@ -0,0 +1,15 @@
+export function isValidUrl(
+ value: string | undefined,
+ additionalCheck: (url: URL) => boolean = () => true
+) {
+ if (!value) {
+ return false;
+ }
+
+ try {
+ const url = new URL(value);
+ return additionalCheck(url);
+ } catch {
+ return false;
+ }
+}
diff --git a/app/react/edge/components/EdgeCheckInIntervalField.tsx b/app/react/edge/components/EdgeCheckInIntervalField.tsx
index e266af70d..d3cb38a8e 100644
--- a/app/react/edge/components/EdgeCheckInIntervalField.tsx
+++ b/app/react/edge/components/EdgeCheckInIntervalField.tsx
@@ -61,6 +61,7 @@ export function EdgeCheckinIntervalField({
}}
options={options}
disabled={readonly}
+ id="edge_checkin"
/>
);
diff --git a/app/react/portainer/common/PortainerUrlField.tsx b/app/react/portainer/common/PortainerUrlField.tsx
index 826b8fee2..e85b96859 100644
--- a/app/react/portainer/common/PortainerUrlField.tsx
+++ b/app/react/portainer/common/PortainerUrlField.tsx
@@ -3,6 +3,7 @@ import { string } from 'yup';
import { FormControl } from '@@/form-components/FormControl';
import { Input } from '@@/form-components/Input';
+import { isValidUrl } from '@@/form-components/validate-url';
interface Props {
fieldName: string;
@@ -47,18 +48,11 @@ export function validation() {
.test(
'valid API server URL',
'The API server URL must be a valid URL (localhost cannot be used)',
- (value) => {
- if (!value) {
- return false;
- }
-
- try {
- const url = new URL(value);
- return !!url.hostname && url.hostname !== 'localhost';
- } catch {
- return false;
- }
- }
+ (value) =>
+ isValidUrl(
+ value,
+ (url) => !!url.hostname && url.hostname !== 'localhost'
+ )
);
}
diff --git a/app/react/portainer/settings/SettingsView/ApplicationSettingsPanel/ApplicationSettingsPanel.tsx b/app/react/portainer/settings/SettingsView/ApplicationSettingsPanel/ApplicationSettingsPanel.tsx
new file mode 100644
index 000000000..f0be07503
--- /dev/null
+++ b/app/react/portainer/settings/SettingsView/ApplicationSettingsPanel/ApplicationSettingsPanel.tsx
@@ -0,0 +1,138 @@
+import { Settings as SettingsIcon } from 'lucide-react';
+import { Field, Form, Formik, useFormikContext } from 'formik';
+
+import { EdgeCheckinIntervalField } from '@/react/edge/components/EdgeCheckInIntervalField';
+import {
+ useSettings,
+ useUpdateSettingsMutation,
+} from '@/react/portainer/settings/queries';
+import { notifySuccess } from '@/portainer/services/notifications';
+
+import { Widget } from '@@/Widget';
+import { LoadingButton } from '@@/buttons';
+import { FormControl } from '@@/form-components/FormControl';
+import { Input } from '@@/form-components/Input';
+
+import { type Settings } from '../../types';
+
+import { validation } from './validation';
+import { Values } from './types';
+import { LogoFieldset } from './LogoFieldset';
+import { ScreenBannerFieldset } from './ScreenBannerFieldset';
+import { TemplatesUrlSection } from './TemplatesUrlSection';
+import { EnableTelemetryField } from './EnableTelemetryField';
+
+export function ApplicationSettingsPanel({
+ onSuccess,
+}: {
+ onSuccess(settings: Settings): void;
+}) {
+ const settingsQuery = useSettings();
+ const mutation = useUpdateSettingsMutation();
+
+ if (!settingsQuery.data) {
+ return null;
+ }
+
+ const settings = settingsQuery.data;
+ const initialValues: Values = {
+ edgeAgentCheckinInterval: settings.EdgeAgentCheckinInterval,
+ enableTelemetry: settings.EnableTelemetry,
+ loginBannerEnabled: !!settings.CustomLoginBanner,
+ loginBanner: settings.CustomLoginBanner,
+ logoEnabled: !!settings.LogoURL,
+ logo: settings.LogoURL,
+ snapshotInterval: settings.SnapshotInterval,
+ templatesUrl: settings.TemplatesURL,
+ };
+
+ return (
+
+ );
+
+ function handleSubmit(values: Values) {
+ mutation.mutate(
+ {
+ SnapshotInterval: values.snapshotInterval,
+ LogoURL: values.logo,
+ EnableTelemetry: values.enableTelemetry,
+ CustomLoginBanner: values.loginBanner,
+ TemplatesURL: values.templatesUrl,
+ EdgeAgentCheckinInterval: values.edgeAgentCheckinInterval,
+ },
+ {
+ onSuccess(settings) {
+ notifySuccess('Success', 'Application settings updated');
+ onSuccess(settings);
+ },
+ }
+ );
+ }
+}
+
+function InnerForm({ isLoading }: { isLoading: boolean }) {
+ const { values, setFieldValue, isValid, errors } = useFormikContext
();
+
+ return (
+
+ );
+}
diff --git a/app/react/portainer/settings/SettingsView/ApplicationSettingsPanel/DemoAlert.tsx b/app/react/portainer/settings/SettingsView/ApplicationSettingsPanel/DemoAlert.tsx
new file mode 100644
index 000000000..e108f6e9b
--- /dev/null
+++ b/app/react/portainer/settings/SettingsView/ApplicationSettingsPanel/DemoAlert.tsx
@@ -0,0 +1,16 @@
+import { useIsDemo } from '@/react/portainer/system/useSystemStatus';
+
+export function DemoAlert() {
+ const isDemoQuery = useIsDemo();
+ if (!isDemoQuery.data) {
+ return null;
+ }
+
+ return (
+
+
+ You cannot use this feature in the demo version of Portainer.
+
+
+ );
+}
diff --git a/app/react/portainer/settings/SettingsView/ApplicationSettingsPanel/EnableTelemetryField.tsx b/app/react/portainer/settings/SettingsView/ApplicationSettingsPanel/EnableTelemetryField.tsx
new file mode 100644
index 000000000..c1d9d2a11
--- /dev/null
+++ b/app/react/portainer/settings/SettingsView/ApplicationSettingsPanel/EnableTelemetryField.tsx
@@ -0,0 +1,41 @@
+import { useField } from 'formik';
+
+import { useIsDemo } from '@/react/portainer/system/useSystemStatus';
+
+import { SwitchField } from '@@/form-components/SwitchField';
+
+import { DemoAlert } from './DemoAlert';
+
+export function EnableTelemetryField() {
+ const isDemoQuery = useIsDemo();
+ const [{ value }, , { setValue }] = useField('enableTelemetry');
+
+ return (
+
+
+ setValue(checked)}
+ disabled={isDemoQuery.data}
+ />
+
+
+
+
+
+
+
+ setIsEnabled(checked)}
+ />
+
+
+
+
+
+
+ You can specify the URL to your logo here. For an optimal display,
+ logo dimensions should be 155px by 55px.
+
+
+
+
+
+
+
+ setIsEnabled(checked)}
+ featureId={FeatureId.CUSTOM_LOGIN_BANNER}
+ />
+
+
+
+
+
+ You can set a custom banner that will be shown to all users during
+ login.
+
+
+
+ You can specify the URL to your own template definitions file here.
+ See{' '}
+
+ Portainer documentation
+ {' '}
+ for more details.
+
+