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

* betterer

.betterer.results

@@ -7400,10 +7400,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"]
     ],
-    "public/app/plugins/datasource/influxdb/components/editor/config/InfluxSQLConfig.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"]
-    ],
     "public/app/plugins/datasource/influxdb/components/editor/query/QueryEditor.tsx:5381": [
       [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"]
     ],

pkg/tsdb/influxdb/fsql/fsql.go

@@ -98,17 +98,9 @@ func runnerFromDataSource(dsInfo *models.DatasourceInfo) (*runner, error) {
 	}
 
 	md := metadata.MD{}
-	for _, m := range dsInfo.Metadata {
-		for k, v := range m {
-			if _, ok := md[k]; ok {
-				return nil, fmt.Errorf("metadata: duplicate key: %s", k)
-			}
-			if k != "" {
-				md.Set(k, v)
-			}
-		}
+	if dsInfo.DbName != "" {
+		md.Set("database", dsInfo.DbName)
 	}
-
 	if dsInfo.Token != "" {
 		md.Set("Authorization", fmt.Sprintf("Bearer %s", dsInfo.Token))
 	}

pkg/tsdb/influxdb/fsql/fsql_test.go

@@ -63,11 +63,6 @@ func (suite *FSQLTestSuite) TestIntegration_QueryData() {
 				DbName:     "influxdb",
 				Version:    "test",
 				HTTPMode:   "proxy",
-				Metadata: []map[string]string{
-					{
-						"bucket": "bucket",
-					},
-				},
 				SecureGrpc: false,
 			},
 			backend.QueryDataRequest{

pkg/tsdb/influxdb/influxdb.go

@@ -81,7 +81,6 @@ func newInstanceSettings(httpClientProvider httpclient.Provider) datasource.Inst
 			TimeInterval:  jsonData.TimeInterval,
 			DefaultBucket: jsonData.DefaultBucket,
 			Organization:  jsonData.Organization,
-			Metadata:      jsonData.Metadata,
 			MaxSeries:     maxSeries,
 			SecureGrpc:    true,
 			Token:         settings.DecryptedSecureJSONData["token"],

pkg/tsdb/influxdb/models/datasource_info.go

@@ -18,8 +18,6 @@ type DatasourceInfo struct {
 	Organization  string `json:"organization"`
 	MaxSeries     int    `json:"maxSeries"`
 
-	// Flight SQL metadata
-	Metadata []map[string]string `json:"metadata"`
 	// FlightSQL grpc connection
 	SecureGrpc bool `json:"secureGrpc"`
 }

public/app/plugins/datasource/influxdb/components/editor/config/InfluxFluxConfig.tsx

@@ -11,7 +11,7 @@ import { InlineField, InlineFieldRow, Input, SecretInput } from '@grafana/ui';
 
 import { InfluxOptions, InfluxSecureJsonData } from '../../../types';
 
-const WIDTH_SHORT = 20;
+import { WIDTH_SHORT } from './constants';
 
 export type Props = DataSourcePluginOptionsEditorProps<InfluxOptions, InfluxSecureJsonData>;
 

public/app/plugins/datasource/influxdb/components/editor/config/InfluxInfluxQLConfig.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 
 import {
   DataSourcePluginOptionsEditorProps,
+  GrafanaTheme2,
   onUpdateDatasourceJsonDataOption,
   onUpdateDatasourceJsonDataOptionSelect,
   onUpdateDatasourceOption,
@@ -11,18 +12,17 @@ import {
   SelectableValue,
   updateDatasourcePluginResetOption,
 } from '@grafana/data';
-import { GrafanaTheme2 } from '@grafana/data/src/themes';
 import { Alert, Field, InlineLabel, Input, SecretInput, Select, useStyles2 } from '@grafana/ui';
 
 import { InfluxOptions, InfluxSecureJsonData } from '../../../types';
 
+import { WIDTH_SHORT } from './constants';
+
 const httpModes: SelectableValue[] = [
   { label: 'GET', value: 'GET' },
   { label: 'POST', value: 'POST' },
 ];
 
-const WIDTH_SHORT = 20;
-
 export type Props = DataSourcePluginOptionsEditorProps<InfluxOptions, InfluxSecureJsonData>;
 
 export const InfluxInfluxQLConfig = (props: Props) => {

public/app/plugins/datasource/influxdb/components/editor/config/InfluxSQLConfig.tsx

@@ -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';
 
+import { WIDTH_SHORT } from './constants';
+
 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: '' }]);
-};
-
-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 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`,
+  }),
+});

public/app/plugins/datasource/influxdb/components/editor/config/constants.ts

@@ -0,0 +1 @@
+export const WIDTH_SHORT = 20;