mirror of https://github.com/grafana/grafana
InfluxDB: Use database input for SQL configuration instead of metadata (#79579)
* introduce constants file * update frontend to use database field * use dbName field instead of metadata * use secureGrpc * bettererpull/78250/head^2
ismail simsek
1 year ago
committed by
GitHub
parent
d89a8a3a82
commit
2edcf0edbd
@ -1,138 +1,69 @@ |
||||
import React, { useEffect, useState } from 'react'; |
||||
import { css } from '@emotion/css'; |
||||
import { uniqueId } from 'lodash'; |
||||
import React from 'react'; |
||||
|
||||
import { |
||||
DataSourcePluginOptionsEditorProps, |
||||
GrafanaTheme2, |
||||
onUpdateDatasourceSecureJsonDataOption, |
||||
updateDatasourcePluginResetOption, |
||||
} from '@grafana/data'; |
||||
import { InlineField, SecretInput, Input, InlineFieldRow, InlineLabel } from '@grafana/ui'; |
||||
import { Field, InlineLabel, Input, SecretInput, useStyles2 } from '@grafana/ui'; |
||||
|
||||
import { InfluxOptions, InfluxSecureJsonData } from '../../../types'; |
||||
|
||||
export type Props = DataSourcePluginOptionsEditorProps<InfluxOptions, InfluxSecureJsonData>; |
||||
|
||||
type MetadataState = Array<{ key: string; value: string }>; |
||||
|
||||
export const addMetaData = (setMetaData: (val: MetadataState) => void, metaDataArr: MetadataState) => { |
||||
setMetaData([...metaDataArr, { key: '', value: '' }]); |
||||
}; |
||||
import { WIDTH_SHORT } from './constants'; |
||||
|
||||
export const removeMetaData = (i: number, setMetaData: (val: MetadataState) => void, metaDataArr: MetadataState) => { |
||||
const newMetaValues = [...metaDataArr]; |
||||
newMetaValues.splice(i, 1); |
||||
setMetaData(newMetaValues); |
||||
}; |
||||
|
||||
export const onKeyChange = ( |
||||
key: string, |
||||
metaDataArr: MetadataState, |
||||
index: number, |
||||
setMetaData: (val: MetadataState) => void |
||||
) => { |
||||
const newMetaValues = [...metaDataArr]; |
||||
newMetaValues[index]['key'] = key; |
||||
setMetaData(newMetaValues); |
||||
}; |
||||
|
||||
export const onValueChange = ( |
||||
value: string, |
||||
metaDataArr: MetadataState, |
||||
index: number, |
||||
setMetaData: (val: MetadataState) => void |
||||
) => { |
||||
const newMetaValues = [...metaDataArr]; |
||||
newMetaValues[index]['value'] = value; |
||||
setMetaData(newMetaValues); |
||||
}; |
||||
export type Props = DataSourcePluginOptionsEditorProps<InfluxOptions, InfluxSecureJsonData>; |
||||
|
||||
export const InfluxSqlConfig = (props: Props) => { |
||||
const { |
||||
options: { jsonData, secureJsonData, secureJsonFields }, |
||||
} = props; |
||||
|
||||
const existingMetadata: MetadataState = jsonData?.metadata?.length |
||||
? jsonData?.metadata?.map((md) => ({ key: Object.keys(md)[0], value: Object.values(md)[0] })) |
||||
: [{ key: '', value: '' }]; |
||||
const [metaDataArr, setMetaData] = useState<MetadataState>(existingMetadata); |
||||
|
||||
useEffect(() => { |
||||
const { onOptionsChange, options } = props; |
||||
const mapData = metaDataArr?.map((m) => ({ [m.key]: m.value })); |
||||
const jsonData = { |
||||
...options.jsonData, |
||||
metadata: mapData, |
||||
}; |
||||
onOptionsChange({ |
||||
...options, |
||||
jsonData, |
||||
}); |
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [metaDataArr]); |
||||
const { options, onOptionsChange } = props; |
||||
const { jsonData, secureJsonData, secureJsonFields } = options; |
||||
const styles = useStyles2(getStyles); |
||||
const htmlPrefix = uniqueId('influxdb-sql-config'); |
||||
|
||||
return ( |
||||
<div> |
||||
<div className="gf-form"> |
||||
<h6>Token</h6> |
||||
</div> |
||||
<div> |
||||
<InlineField labelWidth={20} label="Token"> |
||||
<SecretInput |
||||
width={40} |
||||
name="token" |
||||
type="text" |
||||
value={secureJsonData?.token || ''} |
||||
onReset={() => updateDatasourcePluginResetOption(props, 'token')} |
||||
onChange={onUpdateDatasourceSecureJsonDataOption(props, 'token')} |
||||
isConfigured={secureJsonFields?.token} |
||||
/> |
||||
</InlineField> |
||||
</div> |
||||
<div> |
||||
<div className="gf-form"> |
||||
<h6>MetaData</h6> |
||||
</div> |
||||
{metaDataArr?.map((_, i) => ( |
||||
<InlineFieldRow key={i} style={{ flexFlow: 'row' }}> |
||||
<InlineField labelWidth={20} label="Key"> |
||||
<Input |
||||
key={i} |
||||
width={40} |
||||
name="key" |
||||
type="text" |
||||
value={metaDataArr[i]?.key || ''} |
||||
placeholder="key" |
||||
onChange={(e) => onKeyChange(e.currentTarget.value.trim(), metaDataArr, i, setMetaData)} |
||||
></Input> |
||||
</InlineField> |
||||
<InlineField labelWidth={20} label="Value"> |
||||
<Input |
||||
key={i} |
||||
width={40} |
||||
name="value" |
||||
type="text" |
||||
value={metaDataArr[i]?.value?.toString() ?? ''} |
||||
placeholder="value" |
||||
onChange={(e) => onValueChange(e.currentTarget.value.trim(), metaDataArr, i, setMetaData)} |
||||
></Input> |
||||
</InlineField> |
||||
{i + 1 >= metaDataArr.length && ( |
||||
<InlineLabel as="button" className="" onClick={() => addMetaData(setMetaData, metaDataArr)} width="auto"> |
||||
+ |
||||
</InlineLabel> |
||||
)} |
||||
{i > 0 && ( |
||||
<InlineLabel |
||||
as="button" |
||||
className="" |
||||
width="auto" |
||||
onClick={() => removeMetaData(i, setMetaData, metaDataArr)} |
||||
> |
||||
- |
||||
</InlineLabel> |
||||
)} |
||||
</InlineFieldRow> |
||||
))} |
||||
</div> |
||||
<Field |
||||
horizontal |
||||
label={<InlineLabel width={WIDTH_SHORT}>Database</InlineLabel>} |
||||
className={styles.horizontalField} |
||||
htmlFor={`${htmlPrefix}-dbName`} |
||||
> |
||||
<Input |
||||
id={`${htmlPrefix}-dbName`} |
||||
className="width-20" |
||||
aria-label="Database or bucket name" |
||||
value={jsonData.dbName} |
||||
onChange={(event) => { |
||||
onOptionsChange({ |
||||
...options, |
||||
jsonData: { |
||||
...jsonData, |
||||
dbName: event.currentTarget.value, |
||||
}, |
||||
}); |
||||
}} |
||||
/> |
||||
</Field> |
||||
<Field horizontal label={<InlineLabel width={WIDTH_SHORT}>Token</InlineLabel>} className={styles.horizontalField}> |
||||
<SecretInput |
||||
label="Token" |
||||
aria-label="Token" |
||||
className="width-20" |
||||
value={secureJsonData?.token || ''} |
||||
onReset={() => updateDatasourcePluginResetOption(props, 'token')} |
||||
onChange={onUpdateDatasourceSecureJsonDataOption(props, 'token')} |
||||
isConfigured={Boolean(secureJsonFields && secureJsonFields.token)} |
||||
/> |
||||
</Field> |
||||
</div> |
||||
); |
||||
}; |
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => ({ |
||||
horizontalField: css({ |
||||
justifyContent: 'initial', |
||||
margin: `0 ${theme.spacing(0.5)} ${theme.spacing(0.5)} 0`, |
||||
}), |
||||
}); |
||||
|
||||
@ -0,0 +1 @@ |
||||
export const WIDTH_SHORT = 20; |
||||
Loading…
Reference in new issue