opensource/grafana
1
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-08-01 01:51:49 +08:00
Code Issues Packages Projects Releases Wiki Activity

DataSourceHttpSettings: Replace legacy components and remove gf-form usage (#100583)

Browse Source 
* Refactor to remove gf-form

* Change Select to Combobox

* Fix label width

* Add translations

* Fix input and translation keys

* Add aria expanded controls to help button

* Fix dsiabled state for Input

* Fix spacing

* Remove unused import

* Fix spacing for tag selectors

* Change gf-form-label to section

* Update addDataSource e2e flow

* Betterer results

* Use new form component

* Update translations

* Add deprecation notice

* Extract translations

* Update betterer
This commit is contained in:
Tobias Skarhed
2025-03-13 10:20:20 +01:00
committed by GitHub
parent 5d2ba10113
commit 9cc6c596af
10 changed files with 3995 additions and 306 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
.betterer.results
View File

@ -555,11 +555,6 @@ exports[`better eslint`] = {
[0, 0, 0, "Unexpected any. Specify a different type.", "0"],
[0, 0, 0, "Unexpected any. Specify a different type.", "1"]
],
"packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx:5381": [
[0, 0, 0, "Do not use the t() function outside of a component or function", "0"],
[0, 0, 0, "Do not use the t() function outside of a component or function", "1"],
[0, 0, 0, "Do not use the t() function outside of a component or function", "2"]
],
"packages/grafana-ui/src/components/DataSourceSettings/types.ts:5381": [
[0, 0, 0, "Unexpected any. Specify a different type.", "0"],
[0, 0, 0, "Unexpected any. Specify a different type.", "1"]
@ -7635,12 +7630,6 @@ exports[`no undocumented stories`] = {
exports[`no gf-form usage`] = {
value: `{
"e2e/old-arch/utils/flows/addDataSource.ts:5381": [
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"]
],
"e2e/utils/flows/addDataSource.ts:5381": [
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"]
],
"packages/grafana-prometheus/src/components/PromExploreExtraField.tsx:5381": [
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
@ -7703,29 +7692,6 @@ exports[`no gf-form usage`] = {
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"]
],
"packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx:5381": [
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"]
],
"packages/grafana-ui/src/components/DataSourceSettings/HttpProxySettings.tsx:5381": [
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"]
],
"packages/grafana-ui/src/components/DataSourceSettings/SecureSocksProxySettings.tsx:5381": [
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],

2
e2e/old-arch/utils/flows/addDataSource.ts
View File

@ -58,7 +58,7 @@ export const addDataSource = (config?: Partial<AddDataSourceConfig>) => {
if (basicAuth) {
cy.contains('label', 'Basic auth').scrollIntoView().click();
cy.contains('.gf-form-group', 'Basic Auth Details')
cy.contains('section', 'Basic Auth Details')
.should('be.visible')
.scrollIntoView()
.within(() => {

2
e2e/utils/flows/addDataSource.ts
View File

@ -58,7 +58,7 @@ export const addDataSource = (config?: Partial<AddDataSourceConfig>) => {
if (basicAuth) {
cy.contains('label', 'Basic auth').scrollIntoView().click();
cy.contains('.gf-form-group', 'Basic Auth Details')
cy.contains('section', 'Basic Auth Details')
.should('be.visible')
.scrollIntoView()
.within(() => {

2
packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.story.tsx
View File

@ -32,7 +32,7 @@ const settingsMock: HttpSettingsProps['dataSourceConfig'] = {
password: true,
},
secureJsonFields: {},
readOnly: true,
readOnly: false,
};
const meta: Meta<typeof DataSourceHttpSettings> = {

451
packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx
View File

@ -1,5 +1,5 @@
import { css, cx } from '@emotion/css';
import { useState, useCallback, useId } from 'react';
import { css } from '@emotion/css';
import { useState, useCallback, useId, useMemo } from 'react';
import { SelectableValue } from '@grafana/data';
import { selectors } from '@grafana/e2e-selectors';
@ -7,12 +7,13 @@ import { selectors } from '@grafana/e2e-selectors';
import { useTheme2 } from '../../themes';
import { t, Trans } from '../../utils/i18n';
import { Alert } from '../Alert/Alert';
import { FormField } from '../FormField/FormField';
import { InlineFormLabel } from '../FormLabel/FormLabel';
import { Button } from '../Button';
import { Field } from '../Forms/Field';
import { InlineField } from '../Forms/InlineField';
import { Input } from '../Forms/Legacy/Input/Input';
import { RadioButtonGroup } from '../Forms/RadioButtonGroup/RadioButtonGroup';
import { Icon } from '../Icon/Icon';
import { Select } from '../Select/Select';
import { Input } from '../Input/Input';
import { Stack } from '../Layout/Stack/Stack';
import { InlineSwitch } from '../Switch/Switch';
import { TagsInput } from '../TagsInput/TagsInput';
import { Text } from '../Text/Text';
@ -24,26 +25,16 @@ import { SecureSocksProxySettings } from './SecureSocksProxySettings';
import { TLSAuthSettings } from './TLSAuthSettings';
import { HttpSettingsProps } from './types';
const ACCESS_OPTIONS: Array<SelectableValue<string>> = [
{
label: t('grafana-ui.data-source-http-settings.access-options-proxy', 'Server (default)'),
value: 'proxy',
},
{
label: t('grafana-ui.data-source-http-settings.access-options-browser', 'Browser'),
value: 'direct',
},
];
const DEFAULT_ACCESS_OPTION = {
label: t('grafana-ui.data-source-http-settings.access-options-proxy', 'Server (default)'),
value: 'proxy',
};
const ACCESS_HELP_ID = 'grafana-http-access-help';
const HttpAccessHelp = () => {
return (
// eslint-disable-next-line @grafana/no-untranslated-strings
<Alert severity="info" title="" topSpacing={3}>
<Alert
severity="info"
title={t('grafana-ui.data-source-http-settings.access-help-title', 'Access help')}
topSpacing={3}
id={ACCESS_HELP_ID}
>
<p>
<Trans i18nKey="grafana-ui.data-source-http-settings.access-help-details">
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<SelectableValue<string>> = 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 = (
<Select
aria-label={t('grafana-ui.data-source-http-settings.default-url-access-select', 'Access')}
className="width-20 gf-form-input"
options={ACCESS_OPTIONS}
value={ACCESS_OPTIONS.filter((o) => 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 = (
<Input
id={fromFieldId}
className={inputStyle}
placeholder={defaultUrl}
value={dataSourceConfig.url}
data-testid={selectors.components.DataSource.DataSourceHttpSettings.urlInput}
onChange={(event) => onSettingsChange({ url: event.currentTarget.value })}
disabled={dataSourceConfig.readOnly}
/>
);
return (
<div className="gf-form-group">
<>
<Stack direction="column" gap={5}>
<section>
<h3 className="page-heading">
<Trans i18nKey="grafana-ui.data-source-http-settings.heading">HTTP</Trans>
</h3>
<div className="gf-form-group">
<div className="gf-form">
<FormField
interactive={urlDocs ? true : false}
label={urlLabel ?? t('grafana-ui.data-source-http-settings.url-label', 'URL')}
labelWidth={13}
tooltip={urlTooltip}
inputEl={urlInput}
/>
</div>
{showAccessOptions && (
<>
<div className="gf-form-inline">
<div className="gf-form">
<FormField
label={t('grafana-ui.data-source-http-settings.access-label', 'Access')}
labelWidth={13}
inputWidth={20}
inputEl={accessSelect}
/>
</div>
<div className="gf-form">
<button
type="button"
className="gf-form-label query-keyword pointer"
onClick={() => setIsAccessHelpVisible((isVisible) => !isVisible)}
>
<Trans i18nKey="grafana-ui.data-source-http-settings.access-help">
Help&nbsp;
<Icon name={isAccessHelpVisible ? 'angle-down' : 'angle-right'} style={{ marginBottom: 0 }} />
</Trans>
</button>
</div>
</div>
{isAccessHelpVisible && <HttpAccessHelp />}
</>
)}
{dataSourceConfig.access === 'proxy' && (
<div className="gf-form-group">
<div className="gf-form">
<InlineFormLabel
width={13}
tooltip={t(
'grafana-ui.data-source-http-settings.allowed-cookies-tooltip',
'Grafana proxy deletes forwarded cookies by default. Specify cookies by name that should be forwarded to the data source.'
)}
>
<Trans i18nKey="grafana-ui.data-source-http-settings.allowed-cookies">Allowed cookies</Trans>
</InlineFormLabel>
<TagsInput
tags={dataSourceConfig.jsonData.keepCookies}
width={40}
onChange={(cookies) =>
onSettingsChange({ jsonData: { ...dataSourceConfig.jsonData, keepCookies: cookies } })
<Field
label={urlLabel ?? 'URL'}
description={urlTooltip}
invalid={!isValidUrl}
error={!isValidUrl && t('grafana-ui.data-source-http-settings.invalid-url-error', 'Invalid URL')}
disabled={dataSourceConfig.readOnly}
>
<Input
id={fromFieldId}
width={40}
placeholder={defaultUrl}
value={dataSourceConfig.url}
data-testid={selectors.components.DataSource.DataSourceHttpSettings.urlInput}
onChange={(event) => onSettingsChange({ url: event.currentTarget.value })}
/>
</Field>
{showAccessOptions && (
<>
<Field
label={t('grafana-ui.data-source-http-settings.access-label', 'Access')}
disabled={dataSourceConfig.readOnly}
>
<Stack direction="row" gap={0.5}>
<RadioButtonGroup
aria-label={t('grafana-ui.data-source-http-settings.access-label', 'Access')}
options={ACCESS_OPTIONS}
value={
ACCESS_OPTIONS.find((o) => o.value === dataSourceConfig.access)?.value ||
DEFAULT_ACCESS_OPTION.value
}
disabled={dataSourceConfig.readOnly}
onChange={(selectedValue) => onSettingsChange({ access: selectedValue })}
/>
</div>
<div className="gf-form">
<FormField
label={t('grafana-ui.data-source-http-settings.timeout-form-label', 'Timeout')}
type="number"
labelWidth={13}
inputWidth={20}
tooltip={t('grafana-ui.data-source-http-settings.timeout-tooltip', 'HTTP request timeout in seconds')}
placeholder={t('grafana-ui.data-source-http-settings.timeout-label', 'Timeout in seconds')}
aria-label={t('grafana-ui.data-source-http-settings.timeout-label', 'Timeout in seconds')}
value={dataSourceConfig.jsonData.timeout}
onChange={(event) => {
onSettingsChange({
jsonData: { ...dataSourceConfig.jsonData, timeout: parseInt(event.currentTarget.value, 10) },
});
}}
disabled={dataSourceConfig.readOnly}
/>
</div>
</div>
)}
</div>
</>
<Button
type="button"
variant="secondary"
size="md"
fill="outline"
onClick={() => setIsAccessHelpVisible((isVisible) => !isVisible)}
aria-expanded={isAccessHelpVisible}
aria-controls={ACCESS_HELP_ID}
>
<Trans i18nKey="grafana-ui.data-source-http-settings.access-help">
Help&nbsp;
<Icon name={isAccessHelpVisible ? 'angle-down' : 'angle-right'} />
</Trans>
</Button>
</Stack>
</Field>
<>
{isAccessHelpVisible && <HttpAccessHelp />}
</>
)}
{dataSourceConfig.access === 'proxy' && (
<>
<Field
label={t('grafana-ui.data-source-http-settings.allowed-cookies', 'Allowed cookies')}
description={t(
'grafana-ui.data-source-http-settings.allowed-cookies-description',
'Grafana proxy deletes forwarded cookies by default. Specify cookies by name that should be forwarded to the data source.'
)}
>
<TagsInput
tags={dataSourceConfig.jsonData.keepCookies}
width={40}
onChange={(cookies) =>
onSettingsChange({ jsonData: { ...dataSourceConfig.jsonData, keepCookies: cookies } })
}
disabled={dataSourceConfig.readOnly}
/>
</Field>
<Field
label={t('grafana-ui.data-source-http-settings.timeout-label', 'Timeout')}
description={t(
'grafana-ui.data-source-http-settings.timeout-description',
'HTTP request timeout in seconds'
)}
disabled={dataSourceConfig.readOnly}
>
<Input
type="number"
width={40}
placeholder={t('grafana-ui.data-source-http-settings.timeout-placeholder', 'Timeout in seconds')}
value={dataSourceConfig.jsonData.timeout}
onChange={(event) => {
onSettingsChange({
jsonData: { ...dataSourceConfig.jsonData, timeout: parseInt(event.currentTarget.value, 10) },
});
}}
/>
</Field>
</>
)}
</section>
<section>
<h3 className="page-heading">
<Trans i18nKey="grafana-ui.data-source-http-settings.auth">Auth</Trans>
</h3>
<div className="gf-form-group">
<div className="gf-form-inline">
<InlineField
label={t('grafana-ui.data-source-http-settings.basic-auth-label', 'Basic auth')}
labelWidth={LABEL_WIDTH}
disabled={dataSourceConfig.readOnly}
>
<InlineSwitch
id="http-settings-basic-auth"
value={dataSourceConfig.basicAuth}
onChange={(event) => {
onSettingsChange({ basicAuth: event!.currentTarget.checked });
}}
/>
</InlineField>
<InlineField
label={t('grafana-ui.data-source-http-settings.with-credential-label', 'With Credentials')}
tooltip={t(
'grafana-ui.data-source-http-settings.with-credential-tooltip',
'Whether credentials such as cookies or auth headers should be sent with cross-site requests.'
)}
labelWidth={LABEL_WIDTH}
disabled={dataSourceConfig.readOnly}
>
<InlineSwitch
id="http-settings-with-credentials"
value={dataSourceConfig.withCredentials}
onChange={(event) => {
onSettingsChange({ withCredentials: event!.currentTarget.checked });
}}
/>
</InlineField>
</div>
{azureAuthSettings?.azureAuthSupported && (
<div className="gf-form-inline">
<Stack direction="column" gap={4}>
<div>
<div className={gridLayout}>
<InlineField
label={t('grafana-ui.data-source-http-settings.azure-auth-label', 'Azure Authentication')}
label={t('grafana-ui.data-source-http-settings.basic-auth-label', 'Basic auth')}
labelWidth={LABEL_WIDTH}
disabled={dataSourceConfig.readOnly}
>
<InlineSwitch
id="http-settings-basic-auth"
value={dataSourceConfig.basicAuth}
onChange={(event) => {
onSettingsChange({ basicAuth: event!.currentTarget.checked });
}}
/>
</InlineField>
<InlineField
label={t('grafana-ui.data-source-http-settings.with-credentials-label', 'With Credentials')}
tooltip={t(
'grafana-ui.data-source-http-settings.azure-auth-tooltip',
'Use Azure authentication for Azure endpoint.'
'grafana-ui.data-source-http-settings.with-credentials-tooltip',
'Whether credentials such as cookies or auth headers should be sent with cross-site requests.'
)}
labelWidth={LABEL_WIDTH}
disabled={dataSourceConfig.readOnly}
>
<InlineSwitch
id="http-settings-azure-auth"
value={azureAuthEnabled}
id="http-settings-with-credentials"
value={dataSourceConfig.withCredentials}
onChange={(event) => {
onSettingsChange(
azureAuthSettings.setAzureAuthEnabled(dataSourceConfig, event!.currentTarget.checked)
);
onSettingsChange({ withCredentials: event!.currentTarget.checked });
}}
/>
</InlineField>
{azureAuthSettings?.azureAuthSupported && (
<InlineField
label={t('grafana-ui.data-source-http-settings.azure-auth-label', 'Azure Authentication')}
tooltip={t(
'grafana-ui.data-source-http-settings.azure-auth-tooltip',
'Use Azure authentication for Azure endpoint.'
)}
labelWidth={LABEL_WIDTH}
disabled={dataSourceConfig.readOnly}
>
<InlineSwitch
id="http-settings-azure-auth"
value={azureAuthEnabled}
onChange={(event) => {
onSettingsChange(
azureAuthSettings.setAzureAuthEnabled(dataSourceConfig, event!.currentTarget.checked)
);
}}
/>
</InlineField>
)}
{sigV4AuthToggleEnabled && (
<InlineField
label={t('grafana-ui.data-source-http-settings.sigv4-auth-label', 'SigV4 auth')}
labelWidth={LABEL_WIDTH}
disabled={dataSourceConfig.readOnly}
>
<InlineSwitch
id="http-settings-sigv4-auth"
value={dataSourceConfig.jsonData.sigV4Auth || false}
onChange={(event) => {
onSettingsChange({
jsonData: { ...dataSourceConfig.jsonData, sigV4Auth: event!.currentTarget.checked },
});
}}
/>
</InlineField>
)}
</div>
{dataSourceConfig.access === 'proxy' && (
<HttpProxySettings
dataSourceConfig={dataSourceConfig}
onChange={(jsonData) => onSettingsChange({ jsonData })}
showForwardOAuthIdentityOption={azureAuthEnabled ? false : showForwardOAuthIdentityOption}
/>
)}
</div>
{dataSourceConfig.basicAuth && (
<section>
<Text variant="h6" element="h4">
<Trans i18nKey="grafana-ui.data-source-http-settings.basic-auth">Basic Auth Details</Trans>
</Text>
<BasicAuthSettings {...props} />
</section>
)}
{sigV4AuthToggleEnabled && (
<div className="gf-form-inline">
<InlineField
// eslint-disable-next-line @grafana/no-untranslated-strings
label="SigV4 auth"
labelWidth={LABEL_WIDTH}
disabled={dataSourceConfig.readOnly}
>
<InlineSwitch
id="http-settings-sigv4-auth"
value={dataSourceConfig.jsonData.sigV4Auth || false}
onChange={(event) => {
onSettingsChange({
jsonData: { ...dataSourceConfig.jsonData, sigV4Auth: event!.currentTarget.checked },
});
}}
/>
</InlineField>
</div>
{azureAuthSettings?.azureAuthSupported && azureAuthEnabled && azureAuthSettings.azureSettingsUI && (
<azureAuthSettings.azureSettingsUI dataSourceConfig={dataSourceConfig} onChange={onChange} />
)}
{dataSourceConfig.jsonData.sigV4Auth && sigV4AuthToggleEnabled && renderSigV4Editor}
{(dataSourceConfig.jsonData.tlsAuth || dataSourceConfig.jsonData.tlsAuthWithCACert) && (
<TLSAuthSettings dataSourceConfig={dataSourceConfig} onChange={onChange} />
)}
{dataSourceConfig.access === 'proxy' && (
<HttpProxySettings
dataSourceConfig={dataSourceConfig}
onChange={(jsonData) => onSettingsChange({ jsonData })}
showForwardOAuthIdentityOption={azureAuthEnabled ? false : showForwardOAuthIdentityOption}
/>
<CustomHeadersSettings dataSourceConfig={dataSourceConfig} onChange={onChange} />
)}
</div>
{dataSourceConfig.basicAuth && (
<>
<h6>
<Trans i18nKey="grafana-ui.data-source-http-settings.basic-auth">Basic Auth Details</Trans>
</h6>
<div className="gf-form-group">
<BasicAuthSettings {...props} />
</div>
</>
)}
{azureAuthSettings?.azureAuthSupported && azureAuthEnabled && azureAuthSettings.azureSettingsUI && (
<azureAuthSettings.azureSettingsUI dataSourceConfig={dataSourceConfig} onChange={onChange} />
)}
{dataSourceConfig.jsonData.sigV4Auth && sigV4AuthToggleEnabled && renderSigV4Editor}
{(dataSourceConfig.jsonData.tlsAuth || dataSourceConfig.jsonData.tlsAuthWithCACert) && (
<TLSAuthSettings dataSourceConfig={dataSourceConfig} onChange={onChange} />
)}
{dataSourceConfig.access === 'proxy' && (
<CustomHeadersSettings dataSourceConfig={dataSourceConfig} onChange={onChange} />
)}
</>
</Stack>
</section>
{secureSocksDSProxyEnabled && <SecureSocksProxySettings options={dataSourceConfig} onOptionsChange={onChange} />}
</div>
</Stack>
);
};

68
packages/grafana-ui/src/components/DataSourceSettings/HttpProxySettings.tsx
View File

@ -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 (
<>
<div className="gf-form-inline">
<div className={gridLayout}>
<Stack direction="row" gap={0.5}>
<InlineField
label={t('grafana-ui.data-source-http-proxy-settings.ts-client-auth-label', 'TLS Client Auth')}
labelWidth={LABEL_WIDTH}
@ -42,43 +49,44 @@ export const HttpProxySettings = ({
}
/>
</InlineField>
</div>
<div className="gf-form-inline">
</Stack>
<InlineField
label={t('grafana-ui.data-source-http-proxy-settings.skip-tls-verify-label', 'Skip TLS Verify')}
labelWidth={LABEL_WIDTH}
disabled={dataSourceConfig.readOnly}
>
<InlineSwitch
id="http-settings-skip-tls-verify"
value={dataSourceConfig.jsonData.tlsSkipVerify || false}
onChange={(event) => onChange({ ...dataSourceConfig.jsonData, tlsSkipVerify: event!.currentTarget.checked })}
/>
</InlineField>
{showForwardOAuthIdentityOption && (
<InlineField
label={t('grafana-ui.data-source-http-proxy-settings.skip-tls-verify-label', 'Skip TLS Verify')}
label={t('grafana-ui.data-source-http-proxy-settings.oauth-identity-label', 'Forward OAuth Identity')}
tooltip={t(
'grafana-ui.data-source-http-proxy-settings.oauth-identity-tooltip',
"Forward the user's upstream OAuth identity to the data source (Their access token gets passed along)."
)}
labelWidth={LABEL_WIDTH}
disabled={dataSourceConfig.readOnly}
>
<InlineSwitch
id="http-settings-skip-tls-verify"
value={dataSourceConfig.jsonData.tlsSkipVerify || false}
id="http-settings-forward-oauth"
value={dataSourceConfig.jsonData.oauthPassThru || false}
onChange={(event) =>
onChange({ ...dataSourceConfig.jsonData, tlsSkipVerify: event!.currentTarget.checked })
onChange({ ...dataSourceConfig.jsonData, oauthPassThru: event!.currentTarget.checked })
}
/>
</InlineField>
</div>
{showForwardOAuthIdentityOption && (
<div className="gf-form-inline">
<InlineField
label={t('grafana-ui.data-source-http-proxy-settings.oauth-identity-label', 'Forward OAuth Identity')}
tooltip={t(
'grafana-ui.data-source-http-proxy-settings.oauth-identity-tooltip',
"Forward the user's upstream OAuth identity to the data source (Their access token gets passed along)."
)}
labelWidth={LABEL_WIDTH}
disabled={dataSourceConfig.readOnly}
>
<InlineSwitch
id="http-settings-forward-oauth"
value={dataSourceConfig.jsonData.oauthPassThru || false}
onChange={(event) =>
onChange({ ...dataSourceConfig.jsonData, oauthPassThru: event!.currentTarget.checked })
}
/>
</InlineField>
</div>
)}
</>
</div>
);
};
const getGridLayout = (theme: GrafanaTheme2) =>
css({
display: 'grid',
gridTemplateColumns: 'auto',
gap: 0, // Inline field has a margin
});

4
packages/grafana-ui/src/components/DataSourceSettings/SecureSocksProxySettings.tsx
View File

@ -16,7 +16,7 @@ export function SecureSocksProxySettings<T extends SecureSocksProxyConfig>({
onOptionsChange,
}: Props<T>): JSX.Element {
return (
<>
<div>
<h3 className="page-heading">
<Trans i18nKey="grafana-ui.data-source-settings.secure-socks-heading">Secure Socks Proxy</Trans>
</h3>
@ -44,6 +44,6 @@ export function SecureSocksProxySettings<T extends SecureSocksProxyConfig>({
</div>
</div>
</div>
</>
</div>
);
}

3
packages/grafana-ui/src/components/FormField/FormField.tsx
View File

@ -21,8 +21,9 @@ export interface Props extends InputHTMLAttributes<HTMLInputElement> {
/**
* Default form field including label used in Grafana UI. Default input element is simple <input />. You can also pass
* custom inputEl if required in which case inputWidth and inputProps are ignored.
* @deprecated Please use the {@link Field} component, {@link https://developers.grafana.com/ui/latest/index.html?path=/story/forms-field--simple See Storybook}.
*
* For inline fields, use {@link InlineField}, {@link https://developers.grafana.com/ui/latest/index.html?path=/story/forms-inlinefield--basic See Storybook}.
* @deprecated Please use the {@link Field} component, {@link https://developers.grafana.com/ui/latest/index.html?path=/story/forms-field--simple See Storybook}.
*/
export const FormField = ({
label,

21
public/locales/en-US/grafana.json
View File

@ -1858,31 +1858,32 @@
"data-source-http-settings": {
"access-help": "Help <1></1>",
"access-help-details": "Access mode controls how requests to the data source will be handled.<1> <1>Server</1></1> should be the preferred way if nothing else is stated.",
"access-help-title": "Access help",
"access-label": "Access",
"access-options-browser": "Browser",
"access-options-proxy": "Server (default)",
"allowed-cookies": "Allowed cookies",
"allowed-cookies-tooltip": "Grafana proxy deletes forwarded cookies by default. Specify cookies by name that should be forwarded to the data source.",
"allowed-cookies-description": "Grafana proxy deletes forwarded cookies by default. Specify cookies by name that should be forwarded to the data source.",
"auth": "Auth",
"azure-auth-label": "Azure Authentication",
"azure-auth-tooltip": "Use Azure authentication for Azure endpoint.",
"basic-auth": "Basic Auth Details",
"basic-auth-label": "Basic auth",
"browser-mode-description": "All requests will be made from the browser directly to the data source and may be subject to Cross-Origin Resource Sharing (CORS) requirements. The URL needs to be accessible from the browser if you select this access mode.",
"browser-mode-label": "Browser",
"browser-mode-title": "<0>Browser access mode:</0>",
"default-url-access-select": "Access",
"default-url-tooltip": "Specify a complete HTTP URL (for example http://your_server:8080)",
"direct-url-tooltip": "Your access method is <1>Browser</1>, this means the URL needs to be accessible from the browser.",
"heading": "HTTP",
"invalid-url-error": "Invalid URL",
"proxy-url-tooltip": "Your access method is <1>Server</1>, this means the URL needs to be accessible from the grafana backend/server.",
"server-mode-description": "All requests will be made from the browser to Grafana backend/server which in turn will forward the requests to the data source and by that circumvent possible Cross-Origin Resource Sharing (CORS) requirements. The URL needs to be accessible from the grafana backend/server if you select this access mode.",
"server-mode-label": "Server (default)",
"server-mode-title": "<0>Server access mode (Default):</0>",
"timeout-form-label": "Timeout",
"timeout-label": "Timeout in seconds",
"timeout-tooltip": "HTTP request timeout in seconds",
"url-label": "URL",
"with-credential-label": "With Credentials",
"with-credential-tooltip": "Whether credentials such as cookies or auth headers should be sent with cross-site requests."
"sigv4-auth-label": "SigV4 auth",
"timeout-description": "HTTP request timeout in seconds",
"timeout-label": "Timeout",
"timeout-placeholder": "Timeout in seconds",
"with-credentials-label": "With Credentials",
"with-credentials-tooltip": "Whether credentials such as cookies or auth headers should be sent with cross-site requests."
},
"data-source-settings": {
"alerting-settings-heading": "Alerting",

3714
public/locales/pseudo-LOCALE/grafana.json Normal file
View File

File diff suppressed because it is too large Load Diff