import { cx } from '@emotion/css'; import { useState } from 'react'; import { DataSourcePluginOptionsEditorProps } from '@grafana/data'; import { Box, InlineField, InlineSwitch, Field, TagsInput, Input, CustomHeadersSettings, useStyles2, } from '@grafana/ui'; import { InfluxOptions } from '../../../types'; import { getInlineLabelStyles } from './constants'; import { trackInfluxDBConfigV2AdvancedHTTPSettingsTimeoutField, trackInfluxDBConfigV2AdvancedHTTPSettingsToggleClicked, } from './tracking'; export type Props = DataSourcePluginOptionsEditorProps<InfluxOptions>; export const AdvancedHttpSettings = ({ options, onOptionsChange }: Props) => { const styles = useStyles2(getInlineLabelStyles); const [advancedHttpSettingsIsOpen, setAdvancedHttpSettingsIsOpen] = useState(() => { const keys = Object.keys(options.jsonData); return ( 'keepCookies' in options.jsonData || 'timeout' in options.jsonData || keys.some((key) => key.includes('httpHeaderName')) ); }); return ( <> <Box display="flex" alignItems="center"> <InlineField label={<div className={cx(styles.label)}>Advanced HTTP Settings</div>} labelWidth={40}> <InlineSwitch data-testid="influxdb-v2-config-advanced-http-settings-toggle" value={advancedHttpSettingsIsOpen} onChange={() => setAdvancedHttpSettingsIsOpen(!advancedHttpSettingsIsOpen)} onBlur={trackInfluxDBConfigV2AdvancedHTTPSettingsToggleClicked} /> </InlineField> </Box> {advancedHttpSettingsIsOpen && options.access === 'proxy' && ( <> <Box paddingLeft={1} marginY={1}> <Box width="50%" marginBottom={2}> <Field label="Allowed cookies" description="Grafana proxy deletes forwarded cookies by default. Specify cookies by name that should be forwarded to the data source." disabled={options.readOnly} noMargin > <TagsInput id="advanced-http-cookies" placeholder="New cookie (hit enter to add)" tags={ 'keepCookies' in options.jsonData && Array.isArray(options.jsonData.keepCookies) ? options.jsonData.keepCookies : [] } onChange={(e) => { onOptionsChange({ ...options, jsonData: { ...options.jsonData, ...{ keepCookies: e }, }, }); }} /> </Field> </Box> <Box width="50%" marginBottom={2}> <Field htmlFor="advanced-http-timeout" label="Timeout" description="HTTP request timeout in seconds." disabled={options.readOnly} noMargin > <Input id="advanced-http-timeout" type="number" min={0} placeholder="Timeout in seconds" aria-label="Timeout in seconds" value={ 'timeout' in options.jsonData && typeof options.jsonData.timeout === 'number' ? options.jsonData.timeout.toString() : '' } onChange={(e) => { const parsed = parseInt(e.currentTarget.value, 10); onOptionsChange({ ...options, jsonData: { ...options.jsonData, ...{ timeout: parsed }, }, }); }} onBlur={trackInfluxDBConfigV2AdvancedHTTPSettingsTimeoutField} /> </Field> </Box> {advancedHttpSettingsIsOpen && ( <CustomHeadersSettings dataSourceConfig={options} onChange={onOptionsChange} /> )} </Box> </> )} </> ); };