Access mode controls how requests to the data source will be handled.
@@ -79,6 +70,9 @@ const HttpAccessHelp = () => {
const LABEL_WIDTH = 26;
+/**
+ * @deprecated Use components from `@grafana/plugin-ui` instead, according to the [migration guide](https://github.com/grafana/plugin-ui/blob/main/src/components/ConfigEditor/migrating-from-datasource-http-settings.md).
+ */
export const DataSourceHttpSettings = (props: HttpSettingsProps) => {
const {
defaultUrl,
@@ -94,6 +88,22 @@ export const DataSourceHttpSettings = (props: HttpSettingsProps) => {
urlDocs,
} = props;
+ const ACCESS_OPTIONS: Array> = useMemo(
+ () => [
+ {
+ label: t('grafana-ui.data-source-http-settings.server-mode-label', 'Server (default)'),
+ value: 'proxy',
+ },
+ {
+ label: t('grafana-ui.data-source-http-settings.browser-mode-label', 'Browser'),
+ value: 'direct',
+ },
+ ],
+ []
+ );
+
+ const DEFAULT_ACCESS_OPTION = useMemo(() => ACCESS_OPTIONS[0], [ACCESS_OPTIONS]);
+
const [isAccessHelpVisible, setIsAccessHelpVisible] = useState(false);
const [azureAuthEnabled, setAzureAuthEnabled] = useState(false);
const theme = useTheme2();
@@ -160,246 +170,235 @@ export const DataSourceHttpSettings = (props: HttpSettingsProps) => {
);
}
- const accessSelect = (
- o.value === dataSourceConfig.access)[0] || DEFAULT_ACCESS_OPTION}
- onChange={(selectedValue) => onSettingsChange({ access: selectedValue.value })}
- disabled={dataSourceConfig.readOnly}
- />
- );
-
const isValidUrl = /^(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?$/.test(
dataSourceConfig.url
);
- const notValidStyle = css({
- boxShadow: `inset 0 0px 5px ${theme.v1.palette.red}`,
+ const gridLayout = css({
+ display: 'grid',
+ gridTemplateColumns: 'auto 1fr',
+ gap: theme.spacing(0.5),
});
- const inputStyle = cx({ [`width-20`]: true, [notValidStyle]: !isValidUrl });
-
const fromFieldId = useId();
- const urlInput = (
-
- <>
+
+
HTTP
-
-
-
- {showAccessOptions && (
- <>
-
-
-
-
- setIsAccessHelpVisible((isVisible) => !isVisible)}
- >
-
- Help
-
-
-
-
- {isAccessHelpVisible &&
}
-
- )}
- {dataSourceConfig.access === 'proxy' && (
-
-
-
- Allowed cookies
-
-
- onSettingsChange({ jsonData: { ...dataSourceConfig.jsonData, keepCookies: cookies } })
+
+
+
+ {showAccessOptions && (
+ <>
+
+
+ o.value === dataSourceConfig.access)?.value ||
+ DEFAULT_ACCESS_OPTION.value
}
- disabled={dataSourceConfig.readOnly}
+ onChange={(selectedValue) => onSettingsChange({ access: selectedValue })}
/>
-
-
- {
- onSettingsChange({
- jsonData: { ...dataSourceConfig.jsonData, timeout: parseInt(event.currentTarget.value, 10) },
- });
- }}
- disabled={dataSourceConfig.readOnly}
- />
-
-
- )}
-
setIsAccessHelpVisible((isVisible) => !isVisible)}
+ aria-expanded={isAccessHelpVisible}
+ aria-controls={ACCESS_HELP_ID}
+ >
+
+ Help
+
+
+
+
- <>
-
- Auth
-
-
-
-
- {
- onSettingsChange({ basicAuth: event!.currentTarget.checked });
- }}
+
+ onSettingsChange({ jsonData: { ...dataSourceConfig.jsonData, keepCookies: cookies } })
+ }
+ disabled={dataSourceConfig.readOnly}
/>
-
+
-
- {
- onSettingsChange({ withCredentials: event!.currentTarget.checked });
+ onSettingsChange({
+ jsonData: { ...dataSourceConfig.jsonData, timeout: parseInt(event.currentTarget.value, 10) },
+ });
}}
/>
-
-
+
+
+ )}
+
- {azureAuthSettings?.azureAuthSupported && (
-
+
+
+ Auth
+
+
+
+
{
- onSettingsChange(
- azureAuthSettings.setAzureAuthEnabled(dataSourceConfig, event!.currentTarget.checked)
- );
+ onSettingsChange({ basicAuth: event!.currentTarget.checked });
}}
/>
-
- )}
- {sigV4AuthToggleEnabled && (
-
{
- onSettingsChange({
- jsonData: { ...dataSourceConfig.jsonData, sigV4Auth: event!.currentTarget.checked },
- });
+ onSettingsChange({ withCredentials: event!.currentTarget.checked });
}}
/>
+
+ {azureAuthSettings?.azureAuthSupported && (
+
+ {
+ onSettingsChange(
+ azureAuthSettings.setAzureAuthEnabled(dataSourceConfig, event!.currentTarget.checked)
+ );
+ }}
+ />
+
+ )}
+
+ {sigV4AuthToggleEnabled && (
+
+ {
+ onSettingsChange({
+ jsonData: { ...dataSourceConfig.jsonData, sigV4Auth: event!.currentTarget.checked },
+ });
+ }}
+ />
+
+ )}
- )}
- {dataSourceConfig.access === 'proxy' && (
-
onSettingsChange({ jsonData })}
- showForwardOAuthIdentityOption={azureAuthEnabled ? false : showForwardOAuthIdentityOption}
- />
- )}
-
- Basic Auth Details
-
-
+ {dataSourceConfig.access === 'proxy' && (
+ onSettingsChange({ jsonData })}
+ showForwardOAuthIdentityOption={azureAuthEnabled ? false : showForwardOAuthIdentityOption}
+ />
+ )}
+
+
+ {dataSourceConfig.basicAuth && (
+
+
+ Basic Auth Details
+
+
-
- )}
+
+ )}
- {azureAuthSettings?.azureAuthSupported && azureAuthEnabled && azureAuthSettings.azureSettingsUI && (
-
- )}
+ {azureAuthSettings?.azureAuthSupported && azureAuthEnabled && azureAuthSettings.azureSettingsUI && (
+
+ )}
- {dataSourceConfig.jsonData.sigV4Auth && sigV4AuthToggleEnabled && renderSigV4Editor}
- {(dataSourceConfig.jsonData.tlsAuth || dataSourceConfig.jsonData.tlsAuthWithCACert) && (
-
- )}
+ {dataSourceConfig.jsonData.sigV4Auth && sigV4AuthToggleEnabled && renderSigV4Editor}
+ {(dataSourceConfig.jsonData.tlsAuth || dataSourceConfig.jsonData.tlsAuthWithCACert) && (
+
+ )}
- {dataSourceConfig.access === 'proxy' && (
-
- )}
-
+ {dataSourceConfig.access === 'proxy' && (
+
+ )}
+
+
{secureSocksDSProxyEnabled &&
}
-
+
);
};
diff --git a/packages/grafana-ui/src/components/DataSourceSettings/HttpProxySettings.tsx b/packages/grafana-ui/src/components/DataSourceSettings/HttpProxySettings.tsx
index 8281c3b8ed0..ae570dc4769 100644
--- a/packages/grafana-ui/src/components/DataSourceSettings/HttpProxySettings.tsx
+++ b/packages/grafana-ui/src/components/DataSourceSettings/HttpProxySettings.tsx
@@ -1,5 +1,11 @@
+import { css } from '@emotion/css';
+
+import { GrafanaTheme2 } from '@grafana/data';
+
+import { useStyles2 } from '../../themes';
import { t } from '../../utils/i18n';
import { InlineField } from '../Forms/InlineField';
+import { Stack } from '../Layout/Stack/Stack';
import { InlineSwitch } from '../Switch/Switch';
import { HttpSettingsBaseProps } from './types';
@@ -11,9 +17,10 @@ export const HttpProxySettings = ({
onChange,
showForwardOAuthIdentityOption = true,
}: HttpSettingsBaseProps) => {
+ const gridLayout = useStyles2(getGridLayout);
return (
- <>
-
+
+
-
+
+
+ onChange({ ...dataSourceConfig.jsonData, tlsSkipVerify: event!.currentTarget.checked })}
+ />
+
+ {showForwardOAuthIdentityOption && (
- onChange({ ...dataSourceConfig.jsonData, tlsSkipVerify: event!.currentTarget.checked })
+ onChange({ ...dataSourceConfig.jsonData, oauthPassThru: event!.currentTarget.checked })
}
/>
-
- {showForwardOAuthIdentityOption && (
-
-
-
- onChange({ ...dataSourceConfig.jsonData, oauthPassThru: event!.currentTarget.checked })
- }
- />
-
-
)}
-
+
);
};
+
+const getGridLayout = (theme: GrafanaTheme2) =>
+ css({
+ display: 'grid',
+ gridTemplateColumns: 'auto',
+ gap: 0, // Inline field has a margin
+ });
diff --git a/packages/grafana-ui/src/components/DataSourceSettings/SecureSocksProxySettings.tsx b/packages/grafana-ui/src/components/DataSourceSettings/SecureSocksProxySettings.tsx
index 67a1d74d934..56e82d8a494 100644
--- a/packages/grafana-ui/src/components/DataSourceSettings/SecureSocksProxySettings.tsx
+++ b/packages/grafana-ui/src/components/DataSourceSettings/SecureSocksProxySettings.tsx
@@ -16,7 +16,7 @@ export function SecureSocksProxySettings
({
onOptionsChange,
}: Props): JSX.Element {
return (
- <>
+
Secure Socks Proxy
@@ -44,6 +44,6 @@ export function SecureSocksProxySettings({