From e770bd6cd10f7c369827c25103bcb74abcf01ab9 Mon Sep 17 00:00:00 2001 From: ismail simsek Date: Tue, 6 Jun 2023 15:28:59 +0300 Subject: [PATCH] Chore: InfluxDB - Restructure the folders (#69554) * Move useUniqueId to a general place * Use new built-in useId hook * Rename query builder and metadata query * Move and rename the query builder tests * Refactor query_builder and metadata_query * Fix test * Fix test * Restructure folders * update texts * Update the mock * Fix test * update imports * update imports again --- .betterer.results | 4 ++-- .../annotation}/AnnotationEditor.tsx | 9 ++++---- .../{ => editor/config}/ConfigEditor.test.tsx | 0 .../{ => editor/config}/ConfigEditor.tsx | 16 ++++++++++---- .../components/{ => editor}/constants.ts | 4 ++-- .../{ => editor/query}/QueryEditor.tsx | 18 +++++++-------- .../query/flux}/FluxQueryEditor.tsx | 22 +++++++++---------- .../query/hooks}/useShadowedState.test.ts | 0 .../query/hooks}/useShadowedState.ts | 0 .../query/influxql}/InfluxCheatSheet.tsx | 0 .../query/influxql}/InfluxStartPage.tsx | 0 .../influxql}/QueryEditorModeSwitcher.tsx | 0 .../influxql/code}/RawInfluxQLEditor.test.tsx | 2 +- .../influxql/code}/RawInfluxQLEditor.tsx | 7 +++--- .../query/influxql/utils}/partListUtils.tsx | 8 +++---- .../query/influxql/utils}/tagUtils.test.ts | 0 .../query/influxql/utils}/tagUtils.ts | 2 +- .../influxql/utils}/toSelectableValue.ts | 0 .../query/influxql/utils}/unwrap.ts | 0 .../query/influxql/visual}/AddButton.tsx | 3 ++- .../influxql/visual}/FormatAsSection.tsx | 6 ++--- .../query/influxql/visual}/FromSection.tsx | 3 ++- .../query/influxql/visual}/InputSection.tsx | 2 +- .../influxql/visual}/OrderByTimeSection.tsx | 3 ++- .../influxql/visual}/PartListSection.tsx | 11 +++++----- .../query/influxql/visual}/Seg.tsx | 2 +- .../influxql/visual}/TagsSection.test.tsx | 4 ++-- .../query/influxql/visual}/TagsSection.tsx | 6 ++--- .../VisualInfluxQLEditor.tags.test.tsx} | 12 +++++----- .../visual/VisualInfluxQLEditor.test.tsx} | 10 ++++----- .../influxql/visual/VisualInfluxQLEditor.tsx} | 14 ++++++------ .../query/influxql/visual}/styles.ts | 0 .../variable}/VariableQueryEditor.tsx | 7 +++--- .../datasource/influxdb/datasource.mock.ts | 1 + .../plugins/datasource/influxdb/datasource.ts | 4 ++-- .../influxdb/influxql_query_builder.test.ts | 2 +- .../app/plugins/datasource/influxdb/module.ts | 8 +++---- 37 files changed, 100 insertions(+), 90 deletions(-) rename public/app/plugins/datasource/influxdb/components/{ => editor/annotation}/AnnotationEditor.tsx (92%) rename public/app/plugins/datasource/influxdb/components/{ => editor/config}/ConfigEditor.test.tsx (100%) rename public/app/plugins/datasource/influxdb/components/{ => editor/config}/ConfigEditor.tsx (97%) rename public/app/plugins/datasource/influxdb/components/{ => editor}/constants.ts (73%) rename public/app/plugins/datasource/influxdb/components/{ => editor/query}/QueryEditor.tsx (65%) rename public/app/plugins/datasource/influxdb/components/{ => editor/query/flux}/FluxQueryEditor.tsx (96%) rename public/app/plugins/datasource/influxdb/components/{ => editor/query/hooks}/useShadowedState.test.ts (100%) rename public/app/plugins/datasource/influxdb/components/{ => editor/query/hooks}/useShadowedState.ts (100%) rename public/app/plugins/datasource/influxdb/components/{ => editor/query/influxql}/InfluxCheatSheet.tsx (100%) rename public/app/plugins/datasource/influxdb/components/{ => editor/query/influxql}/InfluxStartPage.tsx (100%) rename public/app/plugins/datasource/influxdb/components/{ => editor/query/influxql}/QueryEditorModeSwitcher.tsx (100%) rename public/app/plugins/datasource/influxdb/components/{ => editor/query/influxql/code}/RawInfluxQLEditor.test.tsx (98%) rename public/app/plugins/datasource/influxdb/components/{ => editor/query/influxql/code}/RawInfluxQLEditor.tsx (91%) rename public/app/plugins/datasource/influxdb/components/{VisualInfluxQLEditor => editor/query/influxql/utils}/partListUtils.tsx (91%) rename public/app/plugins/datasource/influxdb/components/{VisualInfluxQLEditor => editor/query/influxql/utils}/tagUtils.test.ts (100%) rename public/app/plugins/datasource/influxdb/components/{VisualInfluxQLEditor => editor/query/influxql/utils}/tagUtils.ts (94%) rename public/app/plugins/datasource/influxdb/components/{VisualInfluxQLEditor => editor/query/influxql/utils}/toSelectableValue.ts (100%) rename public/app/plugins/datasource/influxdb/components/{VisualInfluxQLEditor => editor/query/influxql/utils}/unwrap.ts (100%) rename public/app/plugins/datasource/influxdb/components/{VisualInfluxQLEditor => editor/query/influxql/visual}/AddButton.tsx (92%) rename public/app/plugins/datasource/influxdb/components/{VisualInfluxQLEditor => editor/query/influxql/visual}/FormatAsSection.tsx (80%) rename public/app/plugins/datasource/influxdb/components/{VisualInfluxQLEditor => editor/query/influxql/visual}/FromSection.tsx (96%) rename public/app/plugins/datasource/influxdb/components/{VisualInfluxQLEditor => editor/query/influxql/visual}/InputSection.tsx (93%) rename public/app/plugins/datasource/influxdb/components/{VisualInfluxQLEditor => editor/query/influxql/visual}/OrderByTimeSection.tsx (95%) rename public/app/plugins/datasource/influxdb/components/{VisualInfluxQLEditor => editor/query/influxql/visual}/PartListSection.tsx (92%) rename public/app/plugins/datasource/influxdb/components/{VisualInfluxQLEditor => editor/query/influxql/visual}/Seg.tsx (98%) rename public/app/plugins/datasource/influxdb/components/{VisualInfluxQLEditor => editor/query/influxql/visual}/TagsSection.test.tsx (97%) rename public/app/plugins/datasource/influxdb/components/{VisualInfluxQLEditor => editor/query/influxql/visual}/TagsSection.tsx (97%) rename public/app/plugins/datasource/influxdb/components/{VisualInfluxQLEditor/Editor.tags.test.tsx => editor/query/influxql/visual/VisualInfluxQLEditor.tags.test.tsx} (90%) rename public/app/plugins/datasource/influxdb/components/{VisualInfluxQLEditor/Editor.test.tsx => editor/query/influxql/visual/VisualInfluxQLEditor.test.tsx} (92%) rename public/app/plugins/datasource/influxdb/components/{VisualInfluxQLEditor/Editor.tsx => editor/query/influxql/visual/VisualInfluxQLEditor.tsx} (96%) rename public/app/plugins/datasource/influxdb/components/{VisualInfluxQLEditor => editor/query/influxql/visual}/styles.ts (100%) rename public/app/plugins/datasource/influxdb/components/{ => editor/variable}/VariableQueryEditor.tsx (86%) diff --git a/.betterer.results b/.betterer.results index 9f326e6d58f..9b2246ff932 100644 --- a/.betterer.results +++ b/.betterer.results @@ -4148,12 +4148,12 @@ exports[`better eslint`] = { [0, 0, 0, "Unexpected any. Specify a different type.", "0"], [0, 0, 0, "Unexpected any. Specify a different type.", "1"] ], - "public/app/plugins/datasource/influxdb/components/ConfigEditor.tsx:5381": [ + "public/app/plugins/datasource/influxdb/components/editor/config/ConfigEditor.tsx:5381": [ [0, 0, 0, "Unexpected any. Specify a different type.", "0"], [0, 0, 0, "Do not use any type assertions.", "1"], [0, 0, 0, "Do not use any type assertions.", "2"] ], - "public/app/plugins/datasource/influxdb/components/InfluxCheatSheet.tsx:5381": [ + "public/app/plugins/datasource/influxdb/components/editor/query/influxql/InfluxCheatSheet.tsx:5381": [ [0, 0, 0, "Unexpected any. Specify a different type.", "0"] ], "public/app/plugins/datasource/influxdb/datasource.ts:5381": [ diff --git a/public/app/plugins/datasource/influxdb/components/AnnotationEditor.tsx b/public/app/plugins/datasource/influxdb/components/editor/annotation/AnnotationEditor.tsx similarity index 92% rename from public/app/plugins/datasource/influxdb/components/AnnotationEditor.tsx rename to public/app/plugins/datasource/influxdb/components/editor/annotation/AnnotationEditor.tsx index a401e24f1c0..38c4a14e361 100644 --- a/public/app/plugins/datasource/influxdb/components/AnnotationEditor.tsx +++ b/public/app/plugins/datasource/influxdb/components/editor/annotation/AnnotationEditor.tsx @@ -1,11 +1,10 @@ import React, { useState } from 'react'; -import { QueryEditorProps } from '@grafana/data'; -import { InlineFormLabel, Input } from '@grafana/ui'; +import { QueryEditorProps } from '@grafana/data/src'; +import { InlineFormLabel, Input } from '@grafana/ui/src'; -import { InfluxQuery, InfluxOptions } from '../types'; - -import InfluxDatasource from './../datasource'; +import InfluxDatasource from '../../../datasource'; +import { InfluxOptions, InfluxQuery } from '../../../types'; export const AnnotationEditor = (props: QueryEditorProps) => { const { query, onChange } = props; diff --git a/public/app/plugins/datasource/influxdb/components/ConfigEditor.test.tsx b/public/app/plugins/datasource/influxdb/components/editor/config/ConfigEditor.test.tsx similarity index 100% rename from public/app/plugins/datasource/influxdb/components/ConfigEditor.test.tsx rename to public/app/plugins/datasource/influxdb/components/editor/config/ConfigEditor.test.tsx diff --git a/public/app/plugins/datasource/influxdb/components/ConfigEditor.tsx b/public/app/plugins/datasource/influxdb/components/editor/config/ConfigEditor.tsx similarity index 97% rename from public/app/plugins/datasource/influxdb/components/ConfigEditor.tsx rename to public/app/plugins/datasource/influxdb/components/editor/config/ConfigEditor.tsx index baafeae4f8c..58c2af9e846 100644 --- a/public/app/plugins/datasource/influxdb/components/ConfigEditor.tsx +++ b/public/app/plugins/datasource/influxdb/components/editor/config/ConfigEditor.tsx @@ -10,12 +10,20 @@ import { SelectableValue, updateDatasourcePluginJsonDataOption, updateDatasourcePluginResetOption, -} from '@grafana/data'; -import { Alert, DataSourceHttpSettings, InfoBox, InlineField, InlineFormLabel, LegacyForms, Select } from '@grafana/ui'; +} from '@grafana/data/src'; +import { + Alert, + DataSourceHttpSettings, + InfoBox, + InlineField, + InlineFormLabel, + LegacyForms, + Select, +} from '@grafana/ui/src'; import { config } from 'app/core/config'; -import { BROWSER_MODE_DISABLED_MESSAGE } from '../constants'; -import { InfluxOptions, InfluxSecureJsonData, InfluxVersion } from '../types'; +import { BROWSER_MODE_DISABLED_MESSAGE } from '../../../constants'; +import { InfluxOptions, InfluxSecureJsonData, InfluxVersion } from '../../../types'; const { Input, SecretFormField } = LegacyForms; diff --git a/public/app/plugins/datasource/influxdb/components/constants.ts b/public/app/plugins/datasource/influxdb/components/editor/constants.ts similarity index 73% rename from public/app/plugins/datasource/influxdb/components/constants.ts rename to public/app/plugins/datasource/influxdb/components/editor/constants.ts index dcf1910b359..e234d7652ea 100644 --- a/public/app/plugins/datasource/influxdb/components/constants.ts +++ b/public/app/plugins/datasource/influxdb/components/editor/constants.ts @@ -1,6 +1,6 @@ -import { SelectableValue } from '@grafana/data'; +import { SelectableValue } from '@grafana/data/src'; -import { ResultFormat } from '../types'; +import { ResultFormat } from '../../types'; export const RESULT_FORMATS: Array> = [ { label: 'Time series', value: 'time_series' }, diff --git a/public/app/plugins/datasource/influxdb/components/QueryEditor.tsx b/public/app/plugins/datasource/influxdb/components/editor/query/QueryEditor.tsx similarity index 65% rename from public/app/plugins/datasource/influxdb/components/QueryEditor.tsx rename to public/app/plugins/datasource/influxdb/components/editor/query/QueryEditor.tsx index 9d736ba9b7d..bf5bf545b6d 100644 --- a/public/app/plugins/datasource/influxdb/components/QueryEditor.tsx +++ b/public/app/plugins/datasource/influxdb/components/editor/query/QueryEditor.tsx @@ -1,20 +1,20 @@ import { css } from '@emotion/css'; import React from 'react'; -import { QueryEditorProps } from '@grafana/data'; +import { QueryEditorProps } from '@grafana/data/src'; -import InfluxDatasource from '../datasource'; -import { buildRawQuery } from '../queryUtils'; -import { InfluxOptions, InfluxQuery } from '../types'; +import InfluxDatasource from '../../../datasource'; +import { buildRawQuery } from '../../../queryUtils'; +import { InfluxOptions, InfluxQuery } from '../../../types'; -import { FluxQueryEditor } from './FluxQueryEditor'; -import { QueryEditorModeSwitcher } from './QueryEditorModeSwitcher'; -import { RawInfluxQLEditor } from './RawInfluxQLEditor'; -import { Editor as VisualInfluxQLEditor } from './VisualInfluxQLEditor/Editor'; +import { FluxQueryEditor } from './flux/FluxQueryEditor'; +import { QueryEditorModeSwitcher } from './influxql/QueryEditorModeSwitcher'; +import { RawInfluxQLEditor } from './influxql/code/RawInfluxQLEditor'; +import { VisualInfluxQLEditor as VisualInfluxQLEditor } from './influxql/visual/VisualInfluxQLEditor'; type Props = QueryEditorProps; -export const QueryEditor = ({ query, onChange, onRunQuery, datasource, range, data }: Props): JSX.Element => { +export const QueryEditor = ({ query, onChange, onRunQuery, datasource }: Props) => { if (datasource.isFlux) { return (
diff --git a/public/app/plugins/datasource/influxdb/components/FluxQueryEditor.tsx b/public/app/plugins/datasource/influxdb/components/editor/query/flux/FluxQueryEditor.tsx similarity index 96% rename from public/app/plugins/datasource/influxdb/components/FluxQueryEditor.tsx rename to public/app/plugins/datasource/influxdb/components/editor/query/flux/FluxQueryEditor.tsx index e1d2c986001..d6bdfd58689 100644 --- a/public/app/plugins/datasource/influxdb/components/FluxQueryEditor.tsx +++ b/public/app/plugins/datasource/influxdb/components/editor/query/flux/FluxQueryEditor.tsx @@ -1,22 +1,22 @@ -import { cx, css } from '@emotion/css'; +import { css, cx } from '@emotion/css'; import React, { PureComponent } from 'react'; -import { SelectableValue, GrafanaTheme2 } from '@grafana/data'; -import { getTemplateSrv } from '@grafana/runtime'; +import { GrafanaTheme2, SelectableValue } from '@grafana/data/src'; +import { getTemplateSrv } from '@grafana/runtime/src'; import { - InlineFormLabel, - LinkButton, - Segment, CodeEditor, - MonacoEditor, CodeEditorSuggestionItem, CodeEditorSuggestionItemKind, - withTheme2, + InlineFormLabel, + LinkButton, + MonacoEditor, + Segment, Themeable2, -} from '@grafana/ui'; + withTheme2, +} from '@grafana/ui/src'; -import InfluxDatasource from '../datasource'; -import { InfluxQuery } from '../types'; +import InfluxDatasource from '../../../../datasource'; +import { InfluxQuery } from '../../../../types'; interface Props extends Themeable2 { onChange: (query: InfluxQuery) => void; diff --git a/public/app/plugins/datasource/influxdb/components/useShadowedState.test.ts b/public/app/plugins/datasource/influxdb/components/editor/query/hooks/useShadowedState.test.ts similarity index 100% rename from public/app/plugins/datasource/influxdb/components/useShadowedState.test.ts rename to public/app/plugins/datasource/influxdb/components/editor/query/hooks/useShadowedState.test.ts diff --git a/public/app/plugins/datasource/influxdb/components/useShadowedState.ts b/public/app/plugins/datasource/influxdb/components/editor/query/hooks/useShadowedState.ts similarity index 100% rename from public/app/plugins/datasource/influxdb/components/useShadowedState.ts rename to public/app/plugins/datasource/influxdb/components/editor/query/hooks/useShadowedState.ts diff --git a/public/app/plugins/datasource/influxdb/components/InfluxCheatSheet.tsx b/public/app/plugins/datasource/influxdb/components/editor/query/influxql/InfluxCheatSheet.tsx similarity index 100% rename from public/app/plugins/datasource/influxdb/components/InfluxCheatSheet.tsx rename to public/app/plugins/datasource/influxdb/components/editor/query/influxql/InfluxCheatSheet.tsx diff --git a/public/app/plugins/datasource/influxdb/components/InfluxStartPage.tsx b/public/app/plugins/datasource/influxdb/components/editor/query/influxql/InfluxStartPage.tsx similarity index 100% rename from public/app/plugins/datasource/influxdb/components/InfluxStartPage.tsx rename to public/app/plugins/datasource/influxdb/components/editor/query/influxql/InfluxStartPage.tsx diff --git a/public/app/plugins/datasource/influxdb/components/QueryEditorModeSwitcher.tsx b/public/app/plugins/datasource/influxdb/components/editor/query/influxql/QueryEditorModeSwitcher.tsx similarity index 100% rename from public/app/plugins/datasource/influxdb/components/QueryEditorModeSwitcher.tsx rename to public/app/plugins/datasource/influxdb/components/editor/query/influxql/QueryEditorModeSwitcher.tsx diff --git a/public/app/plugins/datasource/influxdb/components/RawInfluxQLEditor.test.tsx b/public/app/plugins/datasource/influxdb/components/editor/query/influxql/code/RawInfluxQLEditor.test.tsx similarity index 98% rename from public/app/plugins/datasource/influxdb/components/RawInfluxQLEditor.test.tsx rename to public/app/plugins/datasource/influxdb/components/editor/query/influxql/code/RawInfluxQLEditor.test.tsx index ef22e031641..c704a7e9946 100644 --- a/public/app/plugins/datasource/influxdb/components/RawInfluxQLEditor.test.tsx +++ b/public/app/plugins/datasource/influxdb/components/editor/query/influxql/code/RawInfluxQLEditor.test.tsx @@ -3,7 +3,7 @@ import userEvent from '@testing-library/user-event'; import React from 'react'; import { selectOptionInTest } from 'test/helpers/selectOptionInTest'; -import { InfluxQuery } from '../types'; +import { InfluxQuery } from '../../../../../types'; import { RawInfluxQLEditor } from './RawInfluxQLEditor'; diff --git a/public/app/plugins/datasource/influxdb/components/RawInfluxQLEditor.tsx b/public/app/plugins/datasource/influxdb/components/editor/query/influxql/code/RawInfluxQLEditor.tsx similarity index 91% rename from public/app/plugins/datasource/influxdb/components/RawInfluxQLEditor.tsx rename to public/app/plugins/datasource/influxdb/components/editor/query/influxql/code/RawInfluxQLEditor.tsx index 22b82dcc653..887bec9ee93 100644 --- a/public/app/plugins/datasource/influxdb/components/RawInfluxQLEditor.tsx +++ b/public/app/plugins/datasource/influxdb/components/editor/query/influxql/code/RawInfluxQLEditor.tsx @@ -2,10 +2,9 @@ import React, { useId } from 'react'; import { HorizontalGroup, InlineFormLabel, Input, Select, TextArea } from '@grafana/ui'; -import { InfluxQuery } from '../types'; - -import { DEFAULT_RESULT_FORMAT, RESULT_FORMATS } from './constants'; -import { useShadowedState } from './useShadowedState'; +import { InfluxQuery } from '../../../../../types'; +import { DEFAULT_RESULT_FORMAT, RESULT_FORMATS } from '../../../constants'; +import { useShadowedState } from '../../hooks/useShadowedState'; type Props = { query: InfluxQuery; diff --git a/public/app/plugins/datasource/influxdb/components/VisualInfluxQLEditor/partListUtils.tsx b/public/app/plugins/datasource/influxdb/components/editor/query/influxql/utils/partListUtils.tsx similarity index 91% rename from public/app/plugins/datasource/influxdb/components/VisualInfluxQLEditor/partListUtils.tsx rename to public/app/plugins/datasource/influxdb/components/editor/query/influxql/utils/partListUtils.tsx index c3b76c1002b..0cc3ae5b33a 100644 --- a/public/app/plugins/datasource/influxdb/components/VisualInfluxQLEditor/partListUtils.tsx +++ b/public/app/plugins/datasource/influxdb/components/editor/query/influxql/utils/partListUtils.tsx @@ -1,11 +1,11 @@ import { SelectableValue } from '@grafana/data'; import { QueryPartDef } from 'app/features/alerting/state/query_part'; -import InfluxQueryModel from '../../influx_query_model'; -import queryPart from '../../query_part'; -import { InfluxQuery, InfluxQueryPart } from '../../types'; +import InfluxQueryModel from '../../../../../influx_query_model'; +import queryPart from '../../../../../query_part'; +import { InfluxQuery, InfluxQueryPart } from '../../../../../types'; +import { PartParams } from '../visual/PartListSection'; -import { PartParams } from './PartListSection'; import { toSelectableValue } from './toSelectableValue'; import { unwrap } from './unwrap'; diff --git a/public/app/plugins/datasource/influxdb/components/VisualInfluxQLEditor/tagUtils.test.ts b/public/app/plugins/datasource/influxdb/components/editor/query/influxql/utils/tagUtils.test.ts similarity index 100% rename from public/app/plugins/datasource/influxdb/components/VisualInfluxQLEditor/tagUtils.test.ts rename to public/app/plugins/datasource/influxdb/components/editor/query/influxql/utils/tagUtils.test.ts diff --git a/public/app/plugins/datasource/influxdb/components/VisualInfluxQLEditor/tagUtils.ts b/public/app/plugins/datasource/influxdb/components/editor/query/influxql/utils/tagUtils.ts similarity index 94% rename from public/app/plugins/datasource/influxdb/components/VisualInfluxQLEditor/tagUtils.ts rename to public/app/plugins/datasource/influxdb/components/editor/query/influxql/utils/tagUtils.ts index 4ad52fa7396..e3cae3d5ddf 100644 --- a/public/app/plugins/datasource/influxdb/components/VisualInfluxQLEditor/tagUtils.ts +++ b/public/app/plugins/datasource/influxdb/components/editor/query/influxql/utils/tagUtils.ts @@ -1,4 +1,4 @@ -import { InfluxQueryTag } from '../../types'; +import { InfluxQueryTag } from '../../../../../types'; function isRegex(text: string): boolean { return /^\/.*\/$/.test(text); diff --git a/public/app/plugins/datasource/influxdb/components/VisualInfluxQLEditor/toSelectableValue.ts b/public/app/plugins/datasource/influxdb/components/editor/query/influxql/utils/toSelectableValue.ts similarity index 100% rename from public/app/plugins/datasource/influxdb/components/VisualInfluxQLEditor/toSelectableValue.ts rename to public/app/plugins/datasource/influxdb/components/editor/query/influxql/utils/toSelectableValue.ts diff --git a/public/app/plugins/datasource/influxdb/components/VisualInfluxQLEditor/unwrap.ts b/public/app/plugins/datasource/influxdb/components/editor/query/influxql/utils/unwrap.ts similarity index 100% rename from public/app/plugins/datasource/influxdb/components/VisualInfluxQLEditor/unwrap.ts rename to public/app/plugins/datasource/influxdb/components/editor/query/influxql/utils/unwrap.ts diff --git a/public/app/plugins/datasource/influxdb/components/VisualInfluxQLEditor/AddButton.tsx b/public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/AddButton.tsx similarity index 92% rename from public/app/plugins/datasource/influxdb/components/VisualInfluxQLEditor/AddButton.tsx rename to public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/AddButton.tsx index 8e9cde460d0..8175891393d 100644 --- a/public/app/plugins/datasource/influxdb/components/VisualInfluxQLEditor/AddButton.tsx +++ b/public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/AddButton.tsx @@ -2,8 +2,9 @@ import React from 'react'; import { SelectableValue } from '@grafana/data'; +import { unwrap } from '../utils/unwrap'; + import { Seg } from './Seg'; -import { unwrap } from './unwrap'; type Props = { loadOptions: () => Promise; diff --git a/public/app/plugins/datasource/influxdb/components/VisualInfluxQLEditor/FormatAsSection.tsx b/public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/FormatAsSection.tsx similarity index 80% rename from public/app/plugins/datasource/influxdb/components/VisualInfluxQLEditor/FormatAsSection.tsx rename to public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/FormatAsSection.tsx index f691181cb48..521681fac21 100644 --- a/public/app/plugins/datasource/influxdb/components/VisualInfluxQLEditor/FormatAsSection.tsx +++ b/public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/FormatAsSection.tsx @@ -3,11 +3,11 @@ import React from 'react'; import { Select } from '@grafana/ui'; -import { ResultFormat } from '../../types'; -import { RESULT_FORMATS } from '../constants'; +import { ResultFormat } from '../../../../../types'; +import { RESULT_FORMATS } from '../../../constants'; +import { unwrap } from '../utils/unwrap'; import { paddingRightClass } from './styles'; -import { unwrap } from './unwrap'; type Props = { inputId?: string; diff --git a/public/app/plugins/datasource/influxdb/components/VisualInfluxQLEditor/FromSection.tsx b/public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/FromSection.tsx similarity index 96% rename from public/app/plugins/datasource/influxdb/components/VisualInfluxQLEditor/FromSection.tsx rename to public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/FromSection.tsx index 7bb322297b1..e0a27555da8 100644 --- a/public/app/plugins/datasource/influxdb/components/VisualInfluxQLEditor/FromSection.tsx +++ b/public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/FromSection.tsx @@ -1,7 +1,8 @@ import React from 'react'; +import { toSelectableValue } from '../utils/toSelectableValue'; + import { Seg } from './Seg'; -import { toSelectableValue } from './toSelectableValue'; // we use the value "default" as a magic-value, it means // we use the default retention-policy. diff --git a/public/app/plugins/datasource/influxdb/components/VisualInfluxQLEditor/InputSection.tsx b/public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/InputSection.tsx similarity index 93% rename from public/app/plugins/datasource/influxdb/components/VisualInfluxQLEditor/InputSection.tsx rename to public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/InputSection.tsx index 3ecb355f552..6bf9e24e9b5 100644 --- a/public/app/plugins/datasource/influxdb/components/VisualInfluxQLEditor/InputSection.tsx +++ b/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 '../useShadowedState'; +import { useShadowedState } from '../../hooks/useShadowedState'; import { paddingRightClass } from './styles'; diff --git a/public/app/plugins/datasource/influxdb/components/VisualInfluxQLEditor/OrderByTimeSection.tsx b/public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/OrderByTimeSection.tsx similarity index 95% rename from public/app/plugins/datasource/influxdb/components/VisualInfluxQLEditor/OrderByTimeSection.tsx rename to public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/OrderByTimeSection.tsx index f870e518e4f..f7c594130bb 100644 --- a/public/app/plugins/datasource/influxdb/components/VisualInfluxQLEditor/OrderByTimeSection.tsx +++ b/public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/OrderByTimeSection.tsx @@ -4,8 +4,9 @@ import React from 'react'; import { SelectableValue } from '@grafana/data'; import { Select } from '@grafana/ui'; +import { unwrap } from '../utils/unwrap'; + import { paddingRightClass } from './styles'; -import { unwrap } from './unwrap'; type Mode = 'ASC' | 'DESC'; diff --git a/public/app/plugins/datasource/influxdb/components/VisualInfluxQLEditor/PartListSection.tsx b/public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/PartListSection.tsx similarity index 92% rename from public/app/plugins/datasource/influxdb/components/VisualInfluxQLEditor/PartListSection.tsx rename to public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/PartListSection.tsx index 23d3a94a75c..776b6af572e 100644 --- a/public/app/plugins/datasource/influxdb/components/VisualInfluxQLEditor/PartListSection.tsx +++ b/public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/PartListSection.tsx @@ -1,13 +1,14 @@ -import { cx, css } from '@emotion/css'; +import { css, cx } from '@emotion/css'; import React, { useMemo } from 'react'; -import { SelectableValue, GrafanaTheme2 } from '@grafana/data'; -import { MenuItem, WithContextMenu, MenuGroup, useTheme2 } from '@grafana/ui'; +import { GrafanaTheme2, SelectableValue } from '@grafana/data'; +import { MenuGroup, MenuItem, useTheme2, WithContextMenu } from '@grafana/ui'; + +import { toSelectableValue } from '../utils/toSelectableValue'; +import { unwrap } from '../utils/unwrap'; import { AddButton } from './AddButton'; import { Seg } from './Seg'; -import { toSelectableValue } from './toSelectableValue'; -import { unwrap } from './unwrap'; export type PartParams = Array<{ value: string; diff --git a/public/app/plugins/datasource/influxdb/components/VisualInfluxQLEditor/Seg.tsx b/public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/Seg.tsx similarity index 98% rename from public/app/plugins/datasource/influxdb/components/VisualInfluxQLEditor/Seg.tsx rename to public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/Seg.tsx index a30d2a7f4c5..8a2077b0e66 100644 --- a/public/app/plugins/datasource/influxdb/components/VisualInfluxQLEditor/Seg.tsx +++ b/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 '../useShadowedState'; +import { useShadowedState } from '../../hooks/useShadowedState'; // this file is a simpler version of `grafana-ui / SegmentAsync.tsx` // with some changes: diff --git a/public/app/plugins/datasource/influxdb/components/VisualInfluxQLEditor/TagsSection.test.tsx b/public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/TagsSection.test.tsx similarity index 97% rename from public/app/plugins/datasource/influxdb/components/VisualInfluxQLEditor/TagsSection.test.tsx rename to public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/TagsSection.test.tsx index e6589b62b16..fe6b0e57c5e 100644 --- a/public/app/plugins/datasource/influxdb/components/VisualInfluxQLEditor/TagsSection.test.tsx +++ b/public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/TagsSection.test.tsx @@ -1,7 +1,7 @@ -import { fireEvent, render, screen, act, waitFor } from '@testing-library/react'; +import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'; import React from 'react'; -import { InfluxQueryTag } from '../../types'; +import { InfluxQueryTag } from '../../../../../types'; import { TagsSection } from './TagsSection'; diff --git a/public/app/plugins/datasource/influxdb/components/VisualInfluxQLEditor/TagsSection.tsx b/public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/TagsSection.tsx similarity index 97% rename from public/app/plugins/datasource/influxdb/components/VisualInfluxQLEditor/TagsSection.tsx rename to public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/TagsSection.tsx index 051c2f1ae9f..a64c27b9e1e 100644 --- a/public/app/plugins/datasource/influxdb/components/VisualInfluxQLEditor/TagsSection.tsx +++ b/public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/TagsSection.tsx @@ -2,12 +2,12 @@ import React from 'react'; import { SelectableValue } from '@grafana/data'; -import { InfluxQueryTag } from '../../types'; +import { InfluxQueryTag } from '../../../../../types'; +import { adjustOperatorIfNeeded, getCondition, getOperator } from '../utils/tagUtils'; +import { toSelectableValue } from '../utils/toSelectableValue'; import { AddButton } from './AddButton'; import { Seg } from './Seg'; -import { adjustOperatorIfNeeded, getCondition, getOperator } from './tagUtils'; -import { toSelectableValue } from './toSelectableValue'; type KnownOperator = '=' | '!=' | '<>' | '<' | '>' | '=~' | '!~'; const knownOperators: KnownOperator[] = ['=', '!=', '<>', '<', '>', '=~', '!~']; diff --git a/public/app/plugins/datasource/influxdb/components/VisualInfluxQLEditor/Editor.tags.test.tsx b/public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/VisualInfluxQLEditor.tags.test.tsx similarity index 90% rename from public/app/plugins/datasource/influxdb/components/VisualInfluxQLEditor/Editor.tags.test.tsx rename to public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/VisualInfluxQLEditor.tags.test.tsx index 7a2ad49cd3f..280228be90a 100644 --- a/public/app/plugins/datasource/influxdb/components/VisualInfluxQLEditor/Editor.tags.test.tsx +++ b/public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/VisualInfluxQLEditor.tags.test.tsx @@ -2,13 +2,13 @@ import { render, screen, waitFor } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import React from 'react'; -import InfluxDatasource from '../../datasource'; -import * as mockedMeta from '../../influxql_metadata_query'; -import { InfluxQuery } from '../../types'; +import InfluxDatasource from '../../../../../datasource'; +import * as mockedMeta from '../../../../../influxql_metadata_query'; +import { InfluxQuery } from '../../../../../types'; -import { Editor } from './Editor'; +import { VisualInfluxQLEditor } from './VisualInfluxQLEditor'; -jest.mock('../../influxql_metadata_query', () => { +jest.mock('../../../../../influxql_metadata_query', () => { return { __esModule: true, getAllPolicies: jest.fn().mockReturnValueOnce(Promise.resolve(['default', 'autogen'])), @@ -124,7 +124,7 @@ describe('InfluxDB InfluxQL Visual Editor field-filtering', () => { const datasource: InfluxDatasource = { metricFindQuery: () => Promise.resolve([]), } as unknown as InfluxDatasource; - render(); + render(); await waitFor(() => {}); diff --git a/public/app/plugins/datasource/influxdb/components/VisualInfluxQLEditor/Editor.test.tsx b/public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/VisualInfluxQLEditor.test.tsx similarity index 92% rename from public/app/plugins/datasource/influxdb/components/VisualInfluxQLEditor/Editor.test.tsx rename to public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/VisualInfluxQLEditor.test.tsx index d3cc6f80ab4..767a321e107 100644 --- a/public/app/plugins/datasource/influxdb/components/VisualInfluxQLEditor/Editor.test.tsx +++ b/public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/VisualInfluxQLEditor.test.tsx @@ -1,11 +1,11 @@ import { render, waitFor } from '@testing-library/react'; import React from 'react'; -import InfluxDatasource from '../../datasource'; -import { getMockDS, getMockDSInstanceSettings } from '../../specs/mocks'; -import { InfluxQuery } from '../../types'; +import InfluxDatasource from '../../../../../datasource'; +import { getMockDS, getMockDSInstanceSettings } from '../../../../../specs/mocks'; +import { InfluxQuery } from '../../../../../types'; -import { Editor } from './Editor'; +import { VisualInfluxQLEditor } from './VisualInfluxQLEditor'; // we mock the @grafana/ui components we use to make sure they just show their "value". // we mostly need this for `Input`, because that one is not visible with `.textContent`, @@ -42,7 +42,7 @@ async function assertEditor(query: InfluxQuery, textContent: string) { const datasource: InfluxDatasource = getMockDS(getMockDSInstanceSettings()); datasource.metricFindQuery = () => Promise.resolve([]); const { container } = render( - + ); await waitFor(() => { expect(container.textContent).toBe(textContent); diff --git a/public/app/plugins/datasource/influxdb/components/VisualInfluxQLEditor/Editor.tsx b/public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/VisualInfluxQLEditor.tsx similarity index 96% rename from public/app/plugins/datasource/influxdb/components/VisualInfluxQLEditor/Editor.tsx rename to public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/VisualInfluxQLEditor.tsx index da71ca6ff9b..0a00132e9e1 100644 --- a/public/app/plugins/datasource/influxdb/components/VisualInfluxQLEditor/Editor.tsx +++ b/public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/VisualInfluxQLEditor.tsx @@ -6,14 +6,14 @@ import { GrafanaTheme2, TypedVariableModel } from '@grafana/data'; import { getTemplateSrv } from '@grafana/runtime'; import { InlineLabel, SegmentSection, useStyles2 } from '@grafana/ui'; -import InfluxDatasource from '../../datasource'; +import InfluxDatasource from '../../../../../datasource'; import { getAllMeasurementsForTags, getAllPolicies, getFieldKeysForMeasurement, getTagKeysForMeasurementAndTags, getTagValues, -} from '../../influxql_metadata_query'; +} from '../../../../../influxql_metadata_query'; import { addNewGroupByPart, addNewSelectPart, @@ -22,9 +22,10 @@ import { normalizeQuery, removeGroupByPart, removeSelectPart, -} from '../../queryUtils'; -import { InfluxQuery, InfluxQueryTag } from '../../types'; -import { DEFAULT_RESULT_FORMAT } from '../constants'; +} from '../../../../../queryUtils'; +import { InfluxQuery, InfluxQueryTag } from '../../../../../types'; +import { DEFAULT_RESULT_FORMAT } from '../../../constants'; +import { getNewGroupByPartOptions, getNewSelectPartOptions, makePartList } from '../utils/partListUtils'; import { FormatAsSection } from './FormatAsSection'; import { FromSection } from './FromSection'; @@ -32,7 +33,6 @@ import { InputSection } from './InputSection'; import { OrderByTimeSection } from './OrderByTimeSection'; import { PartListSection } from './PartListSection'; import { TagsSection } from './TagsSection'; -import { getNewGroupByPartOptions, getNewSelectPartOptions, makePartList } from './partListUtils'; type Props = { query: InfluxQuery; @@ -78,7 +78,7 @@ function filterTags(parts: InfluxQueryTag[], allTagKeys: Set): InfluxQue return parts.filter((t) => t.key.endsWith('::tag') || allTagKeys.has(t.key + '::tag')); } -export const Editor = (props: Props): JSX.Element => { +export const VisualInfluxQLEditor = (props: Props): JSX.Element => { const uniqueId = useId(); const formatAsId = `influxdb-qe-format-as-${uniqueId}`; const orderByTimeId = `influxdb-qe-order-by${uniqueId}`; diff --git a/public/app/plugins/datasource/influxdb/components/VisualInfluxQLEditor/styles.ts b/public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/styles.ts similarity index 100% rename from public/app/plugins/datasource/influxdb/components/VisualInfluxQLEditor/styles.ts rename to public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/styles.ts diff --git a/public/app/plugins/datasource/influxdb/components/VariableQueryEditor.tsx b/public/app/plugins/datasource/influxdb/components/editor/variable/VariableQueryEditor.tsx similarity index 86% rename from public/app/plugins/datasource/influxdb/components/VariableQueryEditor.tsx rename to public/app/plugins/datasource/influxdb/components/editor/variable/VariableQueryEditor.tsx index bf5c9170945..1353b98f7d1 100644 --- a/public/app/plugins/datasource/influxdb/components/VariableQueryEditor.tsx +++ b/public/app/plugins/datasource/influxdb/components/editor/variable/VariableQueryEditor.tsx @@ -1,10 +1,9 @@ import React, { PureComponent } from 'react'; -import { InlineFormLabel, TextArea } from '@grafana/ui'; +import { InlineFormLabel, TextArea } from '@grafana/ui/src'; -import InfluxDatasource from '../datasource'; - -import { FluxQueryEditor } from './FluxQueryEditor'; +import InfluxDatasource from '../../../datasource'; +import { FluxQueryEditor } from '../query/flux/FluxQueryEditor'; interface Props { query: string; // before flux, it was always a string diff --git a/public/app/plugins/datasource/influxdb/datasource.mock.ts b/public/app/plugins/datasource/influxdb/datasource.mock.ts index 6b5c9776b37..077ccad68d4 100644 --- a/public/app/plugins/datasource/influxdb/datasource.mock.ts +++ b/public/app/plugins/datasource/influxdb/datasource.mock.ts @@ -12,6 +12,7 @@ type FieldReturnValue = { text: string }; */ export class InfluxDatasourceMock { constructor(private measurements: Measurements) {} + metricFindQuery(query: string) { if (isMeasurementsQuery(query)) { return this.getMeasurements(); diff --git a/public/app/plugins/datasource/influxdb/datasource.ts b/public/app/plugins/datasource/influxdb/datasource.ts index b8deb8b2639..05723c9b5b8 100644 --- a/public/app/plugins/datasource/influxdb/datasource.ts +++ b/public/app/plugins/datasource/influxdb/datasource.ts @@ -29,8 +29,8 @@ import { import config from 'app/core/config'; import { getTemplateSrv, TemplateSrv } from 'app/features/templating/template_srv'; -import { AnnotationEditor } from './components/AnnotationEditor'; -import { FluxQueryEditor } from './components/FluxQueryEditor'; +import { AnnotationEditor } from './components/editor/annotation/AnnotationEditor'; +import { FluxQueryEditor } from './components/editor/query/flux/FluxQueryEditor'; import { BROWSER_MODE_DISABLED_MESSAGE } from './constants'; import InfluxQueryModel from './influx_query_model'; import InfluxSeries from './influx_series'; diff --git a/public/app/plugins/datasource/influxdb/influxql_query_builder.test.ts b/public/app/plugins/datasource/influxdb/influxql_query_builder.test.ts index c24dd26e419..899b3d2a0bf 100644 --- a/public/app/plugins/datasource/influxdb/influxql_query_builder.test.ts +++ b/public/app/plugins/datasource/influxdb/influxql_query_builder.test.ts @@ -1,7 +1,7 @@ import { buildMetadataQuery } from './influxql_query_builder'; import { templateSrvStub as templateService } from './specs/mocks'; -describe('influx-query-builder', () => { +describe('influxql-query-builder', () => { describe('RETENTION_POLICIES', () => { it('should build retention policies query', () => { const query = buildMetadataQuery({ diff --git a/public/app/plugins/datasource/influxdb/module.ts b/public/app/plugins/datasource/influxdb/module.ts index dc22d3b3fb0..da229451278 100644 --- a/public/app/plugins/datasource/influxdb/module.ts +++ b/public/app/plugins/datasource/influxdb/module.ts @@ -1,9 +1,9 @@ import { DataSourcePlugin } from '@grafana/data'; -import ConfigEditor from './components/ConfigEditor'; -import InfluxStartPage from './components/InfluxStartPage'; -import { QueryEditor } from './components/QueryEditor'; -import VariableQueryEditor from './components/VariableQueryEditor'; +import ConfigEditor from './components/editor/config/ConfigEditor'; +import { QueryEditor } from './components/editor/query/QueryEditor'; +import InfluxStartPage from './components/editor/query/influxql/InfluxStartPage'; +import VariableQueryEditor from './components/editor/variable/VariableQueryEditor'; import InfluxDatasource from './datasource'; export const plugin = new DataSourcePlugin(InfluxDatasource)