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