@grafana/ui
Version:
Grafana Components Library
370 lines (365 loc) • 18.1 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var jsxRuntime = require('react/jsx-runtime');
var css = require('@emotion/css');
var React = require('react');
var e2eSelectors = require('@grafana/e2e-selectors');
var i18n = require('@grafana/i18n');
var ThemeContext = require('../../themes/ThemeContext.cjs');
var Alert = require('../Alert/Alert.cjs');
var Button = require('../Button/Button.cjs');
var Field = require('../Forms/Field.cjs');
var InlineField = require('../Forms/InlineField.cjs');
var RadioButtonGroup = require('../Forms/RadioButtonGroup/RadioButtonGroup.cjs');
var Icon = require('../Icon/Icon.cjs');
var Input = require('../Input/Input.cjs');
var Stack = require('../Layout/Stack/Stack.cjs');
var Switch = require('../Switch/Switch.cjs');
var TagsInput = require('../TagsInput/TagsInput.cjs');
var Text = require('../Text/Text.cjs');
var BasicAuthSettings = require('./BasicAuthSettings.cjs');
var CustomHeadersSettings = require('./CustomHeadersSettings.cjs');
var HttpProxySettings = require('./HttpProxySettings.cjs');
var SecureSocksProxySettings = require('./SecureSocksProxySettings.cjs');
var TLSAuthSettings = require('./TLSAuthSettings.cjs');
"use strict";
const ACCESS_HELP_ID = "grafana-http-access-help";
const HttpAccessHelp = () => {
return /* @__PURE__ */ jsxRuntime.jsxs(
Alert.Alert,
{
severity: "info",
title: i18n.t("grafana-ui.data-source-http-settings.access-help-title", "Access help"),
topSpacing: 3,
id: ACCESS_HELP_ID,
children: [
/* @__PURE__ */ jsxRuntime.jsx("p", { children: /* @__PURE__ */ jsxRuntime.jsxs(i18n.Trans, { i18nKey: "grafana-ui.data-source-http-settings.access-help-details", children: [
"Access mode controls how requests to the data source will be handled.",
/* @__PURE__ */ jsxRuntime.jsxs("strong", { children: [
"\xA0",
/* @__PURE__ */ jsxRuntime.jsx("i", { children: "Server" })
] }),
" ",
"should be the preferred way if nothing else is stated."
] }) }),
/* @__PURE__ */ jsxRuntime.jsx(i18n.Trans, { i18nKey: "grafana-ui.data-source-http-settings.server-mode-title", children: /* @__PURE__ */ jsxRuntime.jsx(Text.Text, { weight: "medium", children: "Server access mode (Default):" }) }),
/* @__PURE__ */ jsxRuntime.jsx("p", { children: /* @__PURE__ */ jsxRuntime.jsx(i18n.Trans, { i18nKey: "grafana-ui.data-source-http-settings.server-mode-description", children: "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." }) }),
/* @__PURE__ */ jsxRuntime.jsx(i18n.Trans, { i18nKey: "grafana-ui.data-source-http-settings.browser-mode-title", children: /* @__PURE__ */ jsxRuntime.jsx(Text.Text, { weight: "medium", children: "Browser access mode:" }) }),
/* @__PURE__ */ jsxRuntime.jsx("p", { children: /* @__PURE__ */ jsxRuntime.jsx(i18n.Trans, { i18nKey: "grafana-ui.data-source-http-settings.browser-mode-description", children: "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." }) })
]
}
);
};
const LABEL_WIDTH = 26;
const DataSourceHttpSettings = (props) => {
var _a;
const {
defaultUrl,
dataSourceConfig,
onChange,
showAccessOptions,
sigV4AuthToggleEnabled,
showForwardOAuthIdentityOption,
azureAuthSettings,
renderSigV4Editor,
secureSocksDSProxyEnabled,
urlLabel,
urlDocs
} = props;
const ACCESS_OPTIONS = React.useMemo(
() => [
{
label: i18n.t("grafana-ui.data-source-http-settings.server-mode-label", "Server (default)"),
value: "proxy"
},
{
label: i18n.t("grafana-ui.data-source-http-settings.browser-mode-label", "Browser"),
value: "direct"
}
],
[]
);
const DEFAULT_ACCESS_OPTION = React.useMemo(() => ACCESS_OPTIONS[0], [ACCESS_OPTIONS]);
const [isAccessHelpVisible, setIsAccessHelpVisible] = React.useState(false);
const [azureAuthEnabled, setAzureAuthEnabled] = React.useState(false);
const theme = ThemeContext.useTheme2();
let urlTooltip;
const onSettingsChange = React.useCallback(
(change) => {
const isAzureAuthEnabled = (azureAuthSettings == null ? void 0 : azureAuthSettings.azureAuthSupported) && azureAuthSettings.getAzureAuthEnabled(dataSourceConfig) || false;
setAzureAuthEnabled(isAzureAuthEnabled);
if (isAzureAuthEnabled) {
const tmpOauthPassThru = dataSourceConfig.jsonData.oauthPassThru !== void 0 ? dataSourceConfig.jsonData.oauthPassThru : false;
change = {
...change,
jsonData: {
...dataSourceConfig.jsonData,
oauthPassThru: isAzureAuthEnabled ? false : tmpOauthPassThru
}
};
}
onChange({
...dataSourceConfig,
...change
});
},
[azureAuthSettings, dataSourceConfig, onChange]
);
switch (dataSourceConfig.access) {
case "direct":
urlTooltip = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
/* @__PURE__ */ jsxRuntime.jsxs(i18n.Trans, { i18nKey: "grafana-ui.data-source-http-settings.direct-url-tooltip", children: [
"Your access method is ",
/* @__PURE__ */ jsxRuntime.jsx("em", { children: "Browser" }),
", this means the URL needs to be accessible from the browser."
] }),
urlDocs
] });
break;
case "proxy":
urlTooltip = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
/* @__PURE__ */ jsxRuntime.jsxs(i18n.Trans, { i18nKey: "grafana-ui.data-source-http-settings.proxy-url-tooltip", children: [
"Your access method is ",
/* @__PURE__ */ jsxRuntime.jsx("em", { children: "Server" }),
", this means the URL needs to be accessible from the grafana backend/server."
] }),
urlDocs
] });
break;
default:
urlTooltip = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
/* @__PURE__ */ jsxRuntime.jsx(i18n.Trans, { i18nKey: "grafana-ui.data-source-http-settings.default-url-tooltip", children: "Specify a complete HTTP URL (for example http://your_server:8080)" }),
urlDocs
] });
}
const isValidUrl = /^(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?$/.test(
dataSourceConfig.url
);
const gridLayout = css.css({
display: "grid",
gridTemplateColumns: "auto 1fr",
gap: theme.spacing(0.5)
});
const fromFieldId = React.useId();
return /* @__PURE__ */ jsxRuntime.jsxs(Stack.Stack, { direction: "column", gap: 5, children: [
/* @__PURE__ */ jsxRuntime.jsxs("section", { children: [
/* @__PURE__ */ jsxRuntime.jsx("h3", { className: "page-heading", children: /* @__PURE__ */ jsxRuntime.jsx(i18n.Trans, { i18nKey: "grafana-ui.data-source-http-settings.heading", children: "HTTP" }) }),
/* @__PURE__ */ jsxRuntime.jsx(
Field.Field,
{
label: urlLabel != null ? urlLabel : "URL",
description: urlTooltip,
invalid: !isValidUrl,
error: !isValidUrl && i18n.t("grafana-ui.data-source-http-settings.invalid-url-error", "Invalid URL"),
disabled: dataSourceConfig.readOnly,
children: /* @__PURE__ */ jsxRuntime.jsx(
Input.Input,
{
id: fromFieldId,
width: 40,
placeholder: defaultUrl,
value: dataSourceConfig.url,
"data-testid": e2eSelectors.selectors.components.DataSource.DataSourceHttpSettings.urlInput,
onChange: (event) => onSettingsChange({ url: event.currentTarget.value })
}
)
}
),
showAccessOptions && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
/* @__PURE__ */ jsxRuntime.jsx(
Field.Field,
{
label: i18n.t("grafana-ui.data-source-http-settings.access-label", "Access"),
disabled: dataSourceConfig.readOnly,
children: /* @__PURE__ */ jsxRuntime.jsxs(Stack.Stack, { direction: "row", gap: 0.5, children: [
/* @__PURE__ */ jsxRuntime.jsx(
RadioButtonGroup.RadioButtonGroup,
{
"aria-label": i18n.t("grafana-ui.data-source-http-settings.access-label", "Access"),
options: ACCESS_OPTIONS,
value: ((_a = ACCESS_OPTIONS.find((o) => o.value === dataSourceConfig.access)) == null ? void 0 : _a.value) || DEFAULT_ACCESS_OPTION.value,
onChange: (selectedValue) => onSettingsChange({ access: selectedValue })
}
),
/* @__PURE__ */ jsxRuntime.jsx(
Button.Button,
{
type: "button",
variant: "secondary",
size: "md",
fill: "outline",
onClick: () => setIsAccessHelpVisible((isVisible) => !isVisible),
"aria-expanded": isAccessHelpVisible,
"aria-controls": ACCESS_HELP_ID,
children: /* @__PURE__ */ jsxRuntime.jsxs(i18n.Trans, { i18nKey: "grafana-ui.data-source-http-settings.access-help", children: [
"Help\xA0",
/* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: isAccessHelpVisible ? "angle-down" : "angle-right" })
] })
}
)
] })
}
),
isAccessHelpVisible && /* @__PURE__ */ jsxRuntime.jsx(HttpAccessHelp, {})
] }),
dataSourceConfig.access === "proxy" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
/* @__PURE__ */ jsxRuntime.jsx(
Field.Field,
{
label: i18n.t("grafana-ui.data-source-http-settings.allowed-cookies", "Allowed cookies"),
description: i18n.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."
),
children: /* @__PURE__ */ jsxRuntime.jsx(
TagsInput.TagsInput,
{
tags: dataSourceConfig.jsonData.keepCookies,
width: 40,
onChange: (cookies) => onSettingsChange({ jsonData: { ...dataSourceConfig.jsonData, keepCookies: cookies } }),
disabled: dataSourceConfig.readOnly
}
)
}
),
/* @__PURE__ */ jsxRuntime.jsx(
Field.Field,
{
label: i18n.t("grafana-ui.data-source-http-settings.timeout-label", "Timeout"),
description: i18n.t(
"grafana-ui.data-source-http-settings.timeout-description",
"HTTP request timeout in seconds"
),
disabled: dataSourceConfig.readOnly,
children: /* @__PURE__ */ jsxRuntime.jsx(
Input.Input,
{
type: "number",
width: 40,
placeholder: i18n.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) }
});
}
}
)
}
)
] })
] }),
/* @__PURE__ */ jsxRuntime.jsxs("section", { children: [
/* @__PURE__ */ jsxRuntime.jsx("h3", { className: "page-heading", children: /* @__PURE__ */ jsxRuntime.jsx(i18n.Trans, { i18nKey: "grafana-ui.data-source-http-settings.auth", children: "Auth" }) }),
/* @__PURE__ */ jsxRuntime.jsxs(Stack.Stack, { direction: "column", gap: 4, children: [
/* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: gridLayout, children: [
/* @__PURE__ */ jsxRuntime.jsx(
InlineField.InlineField,
{
label: i18n.t("grafana-ui.data-source-http-settings.basic-auth-label", "Basic auth"),
labelWidth: LABEL_WIDTH,
disabled: dataSourceConfig.readOnly,
children: /* @__PURE__ */ jsxRuntime.jsx(
Switch.InlineSwitch,
{
id: "http-settings-basic-auth",
value: dataSourceConfig.basicAuth,
onChange: (event) => {
onSettingsChange({ basicAuth: event.currentTarget.checked });
}
}
)
}
),
/* @__PURE__ */ jsxRuntime.jsx(
InlineField.InlineField,
{
label: i18n.t("grafana-ui.data-source-http-settings.with-credentials-label", "With Credentials"),
tooltip: i18n.t(
"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,
children: /* @__PURE__ */ jsxRuntime.jsx(
Switch.InlineSwitch,
{
id: "http-settings-with-credentials",
value: dataSourceConfig.withCredentials,
onChange: (event) => {
onSettingsChange({ withCredentials: event.currentTarget.checked });
}
}
)
}
),
(azureAuthSettings == null ? void 0 : azureAuthSettings.azureAuthSupported) && /* @__PURE__ */ jsxRuntime.jsx(
InlineField.InlineField,
{
label: i18n.t("grafana-ui.data-source-http-settings.azure-auth-label", "Azure Authentication"),
tooltip: i18n.t(
"grafana-ui.data-source-http-settings.azure-auth-tooltip",
"Use Azure authentication for Azure endpoint."
),
labelWidth: LABEL_WIDTH,
disabled: dataSourceConfig.readOnly,
children: /* @__PURE__ */ jsxRuntime.jsx(
Switch.InlineSwitch,
{
id: "http-settings-azure-auth",
value: azureAuthEnabled,
onChange: (event) => {
onSettingsChange(
azureAuthSettings.setAzureAuthEnabled(dataSourceConfig, event.currentTarget.checked)
);
}
}
)
}
),
sigV4AuthToggleEnabled && /* @__PURE__ */ jsxRuntime.jsx(
InlineField.InlineField,
{
label: i18n.t("grafana-ui.data-source-http-settings.sigv4-auth-label", "SigV4 auth"),
labelWidth: LABEL_WIDTH,
disabled: dataSourceConfig.readOnly,
children: /* @__PURE__ */ jsxRuntime.jsx(
Switch.InlineSwitch,
{
id: "http-settings-sigv4-auth",
value: dataSourceConfig.jsonData.sigV4Auth || false,
onChange: (event) => {
onSettingsChange({
jsonData: { ...dataSourceConfig.jsonData, sigV4Auth: event.currentTarget.checked }
});
}
}
)
}
)
] }),
dataSourceConfig.access === "proxy" && /* @__PURE__ */ jsxRuntime.jsx(
HttpProxySettings.HttpProxySettings,
{
dataSourceConfig,
onChange: (jsonData) => onSettingsChange({ jsonData }),
showForwardOAuthIdentityOption: azureAuthEnabled ? false : showForwardOAuthIdentityOption
}
)
] }),
dataSourceConfig.basicAuth && /* @__PURE__ */ jsxRuntime.jsxs("section", { children: [
/* @__PURE__ */ jsxRuntime.jsx(Text.Text, { variant: "h6", element: "h4", children: /* @__PURE__ */ jsxRuntime.jsx(i18n.Trans, { i18nKey: "grafana-ui.data-source-http-settings.basic-auth", children: "Basic Auth Details" }) }),
/* @__PURE__ */ jsxRuntime.jsx(BasicAuthSettings.BasicAuthSettings, { ...props })
] }),
(azureAuthSettings == null ? void 0 : azureAuthSettings.azureAuthSupported) && azureAuthEnabled && azureAuthSettings.azureSettingsUI && /* @__PURE__ */ jsxRuntime.jsx(azureAuthSettings.azureSettingsUI, { dataSourceConfig, onChange }),
dataSourceConfig.jsonData.sigV4Auth && sigV4AuthToggleEnabled && renderSigV4Editor,
(dataSourceConfig.jsonData.tlsAuth || dataSourceConfig.jsonData.tlsAuthWithCACert) && /* @__PURE__ */ jsxRuntime.jsx(TLSAuthSettings.TLSAuthSettings, { dataSourceConfig, onChange }),
dataSourceConfig.access === "proxy" && /* @__PURE__ */ jsxRuntime.jsx(CustomHeadersSettings.CustomHeadersSettings, { dataSourceConfig, onChange })
] })
] }),
secureSocksDSProxyEnabled && /* @__PURE__ */ jsxRuntime.jsx(SecureSocksProxySettings.SecureSocksProxySettings, { options: dataSourceConfig, onOptionsChange: onChange })
] });
};
exports.DataSourceHttpSettings = DataSourceHttpSettings;
//# sourceMappingURL=DataSourceHttpSettings.cjs.map