Chore: InfluxDB - Reformatting and restructuring (#69669)

* Reformatting and restructuring

* Update unit test

* Export as function

public/app/plugins/datasource/influxdb/components/editor/query/influxql/InfluxCheatSheet.tsx

@@ -8,7 +8,7 @@ const CHEAT_SHEET_ITEMS = [
   },
 ];
 
-const InfluxCheatSheet = (props: any) => (
+export const InfluxCheatSheet = () => (
   <div>
     <h2>InfluxDB Cheat Sheet</h2>
     {CHEAT_SHEET_ITEMS.map((item) => (
@@ -19,5 +19,3 @@ const InfluxCheatSheet = (props: any) => (
     ))}
   </div>
 );
-
-export default InfluxCheatSheet;

public/app/plugins/datasource/influxdb/components/editor/query/influxql/InfluxStartPage.tsx

@@ -1,11 +1,7 @@
-import React, { PureComponent } from 'react';
+import React from 'react';
 
-import { QueryEditorHelpProps } from '@grafana/data';
+import { InfluxCheatSheet } from './InfluxCheatSheet';
 
-import InfluxCheatSheet from './InfluxCheatSheet';
-
-export default class InfluxStartPage extends PureComponent<QueryEditorHelpProps> {
-  render() {
-    return <InfluxCheatSheet onClickExample={this.props.onClickExample} />;
-  }
+export function InfluxStartPage() {
+  return <InfluxCheatSheet />;
 }

public/app/plugins/datasource/influxdb/components/editor/query/influxql/code/RawInfluxQLEditor.tsx

@@ -4,7 +4,7 @@ import { HorizontalGroup, InlineFormLabel, Input, Select, TextArea } from '@graf
 
 import { InfluxQuery } from '../../../../../types';
 import { DEFAULT_RESULT_FORMAT, RESULT_FORMATS } from '../../../constants';
-import { useShadowedState } from '../../hooks/useShadowedState';
+import { useShadowedState } from '../hooks/useShadowedState';
 
 type Props = {
   query: InfluxQuery;

public/app/plugins/datasource/influxdb/components/editor/query/influxql/hooks/useRetentionPolicies.test.ts

@@ -0,0 +1,44 @@
+import { renderHook } from '@testing-library/react-hooks';
+
+import config from 'app/core/config';
+
+import { getMockDS, getMockDSInstanceSettings, mockBackendService } from '../../../../../specs/mocks';
+
+import { useRetentionPolicies } from './useRetentionPolicies';
+
+jest.mock('@grafana/runtime', () => ({
+  ...jest.requireActual('@grafana/runtime'),
+}));
+
+describe('useRetentionPolicies', () => {
+  it('should return all policies when influxdbBackendMigration feature toggle enabled', async () => {
+    const instanceSettings = getMockDSInstanceSettings();
+    const datasource = getMockDS(instanceSettings);
+    mockBackendService(response);
+
+    config.featureToggles.influxdbBackendMigration = true;
+    const { result, waitForNextUpdate } = renderHook(() => useRetentionPolicies(datasource));
+    await waitForNextUpdate();
+    expect(result.current.retentionPolicies.length).toEqual(4);
+    expect(result.current.retentionPolicies[0]).toEqual('autogen');
+  });
+});
+
+const response = {
+  data: {
+    results: {
+      metadataQuery: {
+        status: 200,
+        frames: [
+          {
+            schema: {
+              refId: 'metadataQuery',
+              fields: [{ name: 'value', type: 'string', typeInfo: { frame: 'string' } }],
+            },
+            data: { values: [['autogen', 'bar', '5m_avg', '1m_avg']] },
+          },
+        ],
+      },
+    },
+  },
+};

public/app/plugins/datasource/influxdb/components/editor/query/influxql/hooks/useRetentionPolicies.ts

@@ -0,0 +1,15 @@
+import { useEffect, useState } from 'react';
+
+import InfluxDatasource from '../../../../../datasource';
+import { getAllPolicies } from '../../../../../influxql_metadata_query';
+
+export const useRetentionPolicies = (datasource: InfluxDatasource) => {
+  const [retentionPolicies, setRetentionPolicies] = useState<string[]>([]);
+  useEffect(() => {
+    getAllPolicies(datasource).then((data) => {
+      setRetentionPolicies(data);
+    });
+  }, [datasource]);
+
+  return { retentionPolicies };
+};

public/app/plugins/datasource/influxdb/components/editor/query/influxql/utils/filterTags.ts

@@ -0,0 +1,7 @@
+// it is possible to add fields into the `InfluxQueryTag` structures, and they do work,
+// but in some cases, when we do metadata queries, we have to remove them from the queries.
+import { InfluxQueryTag } from '../../../../../types';
+
+export function filterTags(parts: InfluxQueryTag[], allTagKeys: Set<string>): InfluxQueryTag[] {
+  return parts.filter((t) => t.key.endsWith('::tag') || allTagKeys.has(t.key + '::tag'));
+}

public/app/plugins/datasource/influxdb/components/editor/query/influxql/utils/getTemplateVariableOptions.ts

@@ -0,0 +1,12 @@
+import { TypedVariableModel } from '@grafana/data/src';
+import { getTemplateSrv } from '@grafana/runtime/src';
+
+export function getTemplateVariableOptions(wrapper: (v: TypedVariableModel) => string) {
+  return (
+    getTemplateSrv()
+      .getVariables()
+      // we make them regex-params, i'm not 100% sure why.
+      // probably because this way multi-value variables work ok too.
+      .map(wrapper)
+  );
+}

public/app/plugins/datasource/influxdb/components/editor/query/influxql/utils/withTemplateVariableOptions.ts

@@ -0,0 +1,16 @@
+// helper function to make it easy to call this from the widget-render-code
+import { TypedVariableModel } from '@grafana/data/src';
+
+import { getTemplateVariableOptions } from './getTemplateVariableOptions';
+
+export function withTemplateVariableOptions(
+  optionsPromise: Promise<string[]>,
+  wrapper: (v: TypedVariableModel) => string,
+  filter?: string
+): Promise<string[]> {
+  let templateVariableOptions = getTemplateVariableOptions(wrapper);
+  if (filter) {
+    templateVariableOptions = templateVariableOptions.filter((tvo) => tvo.indexOf(filter) > -1);
+  }
+  return optionsPromise.then((options) => [...templateVariableOptions, ...options]);
+}

public/app/plugins/datasource/influxdb/components/editor/query/influxql/utils/wrapper.ts

@@ -0,0 +1,9 @@
+import { TypedVariableModel } from '@grafana/data/src';
+
+export function wrapRegex(v: TypedVariableModel): string {
+  return `/^$${v.name}$/`;
+}
+
+export function wrapPure(v: TypedVariableModel): string {
+  return `$${v.name}`;
+}

public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/InputSection.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 
 import { Input } from '@grafana/ui';
 
-import { useShadowedState } from '../../hooks/useShadowedState';
+import { useShadowedState } from '../hooks/useShadowedState';
 
 import { paddingRightClass } from './styles';
 

public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/Seg.tsx

@@ -6,7 +6,7 @@ import { useAsyncFn } from 'react-use';
 import { SelectableValue } from '@grafana/data';
 import { AsyncSelect, InlineLabel, Input, Select } from '@grafana/ui';
 
-import { useShadowedState } from '../../hooks/useShadowedState';
+import { useShadowedState } from '../hooks/useShadowedState';
 
 // this file is a simpler version of `grafana-ui / SegmentAsync.tsx`
 // with some changes:

public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/VisualInfluxQLEditor.tsx

@@ -1,9 +1,7 @@
 import { css } from '@emotion/css';
 import React, { useId, useMemo } from 'react';
-import { useAsync } from 'react-use';
 
-import { GrafanaTheme2, TypedVariableModel } from '@grafana/data';
-import { getTemplateSrv } from '@grafana/runtime';
+import { GrafanaTheme2 } from '@grafana/data';
 import { InlineLabel, SegmentSection, useStyles2 } from '@grafana/ui';
 
 import InfluxDatasource from '../../../../../datasource';
@@ -25,7 +23,11 @@ import {
 } from '../../../../../queryUtils';
 import { InfluxQuery, InfluxQueryTag } from '../../../../../types';
 import { DEFAULT_RESULT_FORMAT } from '../../../constants';
+import { useRetentionPolicies } from '../hooks/useRetentionPolicies';
+import { filterTags } from '../utils/filterTags';
 import { getNewGroupByPartOptions, getNewSelectPartOptions, makePartList } from '../utils/partListUtils';
+import { withTemplateVariableOptions } from '../utils/withTemplateVariableOptions';
+import { wrapPure, wrapRegex } from '../utils/wrapper';
 
 import { FormatAsSection } from './FormatAsSection';
 import { FromSection } from './FromSection';
@@ -41,43 +43,6 @@ type Props = {
   datasource: InfluxDatasource;
 };
 
-function wrapRegex(v: TypedVariableModel): string {
-  return `/^$${v.name}$/`;
-}
-
-function wrapPure(v: TypedVariableModel): string {
-  return `$${v.name}`;
-}
-
-function getTemplateVariableOptions(wrapper: (v: TypedVariableModel) => string) {
-  return (
-    getTemplateSrv()
-      .getVariables()
-      // we make them regex-params, i'm not 100% sure why.
-      // probably because this way multi-value variables work ok too.
-      .map(wrapper)
-  );
-}
-
-// helper function to make it easy to call this from the widget-render-code
-function withTemplateVariableOptions(
-  optionsPromise: Promise<string[]>,
-  wrapper: (v: TypedVariableModel) => string,
-  filter?: string
-): Promise<string[]> {
-  let templateVariableOptions = getTemplateVariableOptions(wrapper);
-  if (filter) {
-    templateVariableOptions = templateVariableOptions.filter((tvo) => tvo.indexOf(filter) > -1);
-  }
-  return optionsPromise.then((options) => [...templateVariableOptions, ...options]);
-}
-
-// it is possible to add fields into the `InfluxQueryTag` structures, and they do work,
-// but in some cases, when we do metadata queries, we have to remove them from the queries.
-function filterTags(parts: InfluxQueryTag[], allTagKeys: Set<string>): InfluxQueryTag[] {
-  return parts.filter((t) => t.key.endsWith('::tag') || allTagKeys.has(t.key + '::tag'));
-}
-
 export const VisualInfluxQLEditor = (props: Props): JSX.Element => {
   const uniqueId = useId();
   const formatAsId = `influxdb-qe-format-as-${uniqueId}`;
@@ -87,9 +52,7 @@ export const VisualInfluxQLEditor = (props: Props): JSX.Element => {
   const query = normalizeQuery(props.query);
   const { datasource } = props;
   const { measurement, policy } = query;
-
-  const policyData = useAsync(() => getAllPolicies(datasource), [datasource]);
-  const retentionPolicies = !!policyData.error ? [] : policyData.value ?? [];
+  const { retentionPolicies } = useRetentionPolicies(datasource);
 
   const allTagKeys = useMemo(async () => {
     const tagKeys = (await getTagKeysForMeasurementAndTags(datasource, [], measurement, policy)).map(

public/app/plugins/datasource/influxdb/module.ts

@@ -2,7 +2,7 @@ import { DataSourcePlugin } from '@grafana/data';
 
 import ConfigEditor from './components/editor/config/ConfigEditor';
 import { QueryEditor } from './components/editor/query/QueryEditor';
-import InfluxStartPage from './components/editor/query/influxql/InfluxStartPage';
+import { InfluxStartPage } from './components/editor/query/influxql/InfluxStartPage';
 import VariableQueryEditor from './components/editor/variable/VariableQueryEditor';
 import InfluxDatasource from './datasource';
 

public/app/plugins/datasource/influxdb/specs/mocks.ts

@@ -58,6 +58,6 @@ export function getMockDSInstanceSettings(): DataSourceInstanceSettings<InfluxOp
       module: '',
       baseUrl: '',
     },
-    jsonData: { version: InfluxVersion.InfluxQL, httpMode: 'POST' },
+    jsonData: { version: InfluxVersion.InfluxQL, httpMode: 'POST', dbName: 'site' },
   };
 }