From fdc7eef0f4de711de34ab4b92f1d4f2e4cf11d1e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Zolt=C3=A1n=20Bedi?= Date: Mon, 6 Dec 2021 09:37:54 +0100 Subject: [PATCH] Add grafana/experimental package (#42289) * Add grafana/experimental package * CloudWatch: Use experimental for components * Use canary version of experimental * Update sort order --- package.json | 1 + .../components/AnnotationQueryEditor.tsx | 12 +-- .../MetricStatEditor/Dimensions.tsx | 6 +- .../MetricStatEditor/FilterItem.tsx | 6 +- .../MetricStatEditor/MetricStatEditor.tsx | 15 ++-- .../components/MetricsQueryEditor.tsx | 26 +++--- .../cloudwatch/components/QueryHeader.tsx | 4 +- .../SQLBuilderEditor/SQLBuilderEditor.tsx | 12 ++- .../SQLBuilderEditor/SQLBuilderSelectRow.tsx | 9 +- .../components/SQLBuilderEditor/SQLFilter.tsx | 8 +- .../SQLBuilderEditor/SQLGroupBy.tsx | 8 +- .../SQLBuilderEditor/SQLOrderByGroup.tsx | 8 +- .../components/ui/AccessoryButton.tsx | 23 ----- .../cloudwatch/components/ui/EditorField.tsx | 79 ---------------- .../components/ui/EditorFieldGroup.tsx | 10 --- .../cloudwatch/components/ui/EditorHeader.tsx | 28 ------ .../cloudwatch/components/ui/EditorList.tsx | 46 ---------- .../cloudwatch/components/ui/EditorRow.tsx | 30 ------- .../cloudwatch/components/ui/EditorRows.tsx | 14 --- .../cloudwatch/components/ui/FlexItem.tsx | 12 --- .../cloudwatch/components/ui/InlineSelect.tsx | 89 ------------------- .../cloudwatch/components/ui/InputGroup.tsx | 53 ----------- .../cloudwatch/components/ui/Space.tsx | 1 - .../cloudwatch/components/ui/Stack.tsx | 30 ------- yarn.lock | 12 +++ 25 files changed, 58 insertions(+), 484 deletions(-) delete mode 100644 public/app/plugins/datasource/cloudwatch/components/ui/AccessoryButton.tsx delete mode 100644 public/app/plugins/datasource/cloudwatch/components/ui/EditorField.tsx delete mode 100644 public/app/plugins/datasource/cloudwatch/components/ui/EditorFieldGroup.tsx delete mode 100644 public/app/plugins/datasource/cloudwatch/components/ui/EditorHeader.tsx delete mode 100644 public/app/plugins/datasource/cloudwatch/components/ui/EditorList.tsx delete mode 100644 public/app/plugins/datasource/cloudwatch/components/ui/EditorRow.tsx delete mode 100644 public/app/plugins/datasource/cloudwatch/components/ui/EditorRows.tsx delete mode 100644 public/app/plugins/datasource/cloudwatch/components/ui/FlexItem.tsx delete mode 100644 public/app/plugins/datasource/cloudwatch/components/ui/InlineSelect.tsx delete mode 100644 public/app/plugins/datasource/cloudwatch/components/ui/InputGroup.tsx delete mode 100644 public/app/plugins/datasource/cloudwatch/components/ui/Space.tsx delete mode 100644 public/app/plugins/datasource/cloudwatch/components/ui/Stack.tsx diff --git a/package.json b/package.json index 417430711c2..473a525b129 100644 --- a/package.json +++ b/package.json @@ -238,6 +238,7 @@ "@grafana/aws-sdk": "0.0.3", "@grafana/data": "workspace:*", "@grafana/e2e-selectors": "workspace:*", + "@grafana/experimental": "canary", "@grafana/runtime": "workspace:*", "@grafana/schema": "workspace:*", "@grafana/slate-react": "0.22.10-grafana", diff --git a/public/app/plugins/datasource/cloudwatch/components/AnnotationQueryEditor.tsx b/public/app/plugins/datasource/cloudwatch/components/AnnotationQueryEditor.tsx index 155f38f8217..099aa55ff41 100644 --- a/public/app/plugins/datasource/cloudwatch/components/AnnotationQueryEditor.tsx +++ b/public/app/plugins/datasource/cloudwatch/components/AnnotationQueryEditor.tsx @@ -1,15 +1,11 @@ import React, { ChangeEvent } from 'react'; -import { Switch, Input } from '@grafana/ui'; -import { CloudWatchAnnotationQuery, CloudWatchMetricsQuery } from '../types'; import { PanelData } from '@grafana/data'; +import { EditorField, EditorHeader, EditorRow, InlineSelect, Space } from '@grafana/experimental'; +import { Input, Switch } from '@grafana/ui'; import { CloudWatchDatasource } from '../datasource'; -import { MetricStatEditor } from './MetricStatEditor'; -import EditorHeader from './ui/EditorHeader'; -import InlineSelect from './ui/InlineSelect'; -import { Space } from './ui/Space'; import { useRegions } from '../hooks'; -import EditorRow from './ui/EditorRow'; -import EditorField from './ui/EditorField'; +import { CloudWatchAnnotationQuery, CloudWatchMetricsQuery } from '../types'; +import { MetricStatEditor } from './MetricStatEditor'; export type Props = { query: CloudWatchAnnotationQuery; diff --git a/public/app/plugins/datasource/cloudwatch/components/MetricStatEditor/Dimensions.tsx b/public/app/plugins/datasource/cloudwatch/components/MetricStatEditor/Dimensions.tsx index 11d3aace382..ae645e73d6e 100644 --- a/public/app/plugins/datasource/cloudwatch/components/MetricStatEditor/Dimensions.tsx +++ b/public/app/plugins/datasource/cloudwatch/components/MetricStatEditor/Dimensions.tsx @@ -1,9 +1,9 @@ -import React, { useMemo, useState } from 'react'; import { isEqual } from 'lodash'; +import React, { useMemo, useState } from 'react'; import { SelectableValue } from '@grafana/data'; -import { Dimensions as DimensionsType, CloudWatchMetricsQuery } from '../../types'; -import EditorList from '../ui/EditorList'; +import { EditorList } from '@grafana/experimental'; import { CloudWatchDatasource } from '../../datasource'; +import { CloudWatchMetricsQuery, Dimensions as DimensionsType } from '../../types'; import { FilterItem } from './FilterItem'; export interface Props { diff --git a/public/app/plugins/datasource/cloudwatch/components/MetricStatEditor/FilterItem.tsx b/public/app/plugins/datasource/cloudwatch/components/MetricStatEditor/FilterItem.tsx index 986dff5f842..b4727ce33c4 100644 --- a/public/app/plugins/datasource/cloudwatch/components/MetricStatEditor/FilterItem.tsx +++ b/public/app/plugins/datasource/cloudwatch/components/MetricStatEditor/FilterItem.tsx @@ -1,15 +1,13 @@ import React, { FunctionComponent, useMemo } from 'react'; import { css, cx } from '@emotion/css'; -import { Select, stylesFactory, useTheme2 } from '@grafana/ui'; - import { useAsyncFn } from 'react-use'; import { GrafanaTheme2, SelectableValue, toOption } from '@grafana/data'; +import { InputGroup, AccessoryButton } from '@grafana/experimental'; +import { Select, stylesFactory, useTheme2 } from '@grafana/ui'; import { CloudWatchDatasource } from '../../datasource'; import { CloudWatchMetricsQuery, Dimensions } from '../../types'; import { appendTemplateVariables } from '../../utils/utils'; import { DimensionFilterCondition } from './Dimensions'; -import InputGroup from '../ui/InputGroup'; -import AccessoryButton from '../ui/AccessoryButton'; export interface Props { query: CloudWatchMetricsQuery; diff --git a/public/app/plugins/datasource/cloudwatch/components/MetricStatEditor/MetricStatEditor.tsx b/public/app/plugins/datasource/cloudwatch/components/MetricStatEditor/MetricStatEditor.tsx index 473bd960b09..f04f1f3ac66 100644 --- a/public/app/plugins/datasource/cloudwatch/components/MetricStatEditor/MetricStatEditor.tsx +++ b/public/app/plugins/datasource/cloudwatch/components/MetricStatEditor/MetricStatEditor.tsx @@ -1,14 +1,11 @@ import React from 'react'; -import { Switch, Select } from '@grafana/ui'; -import { CloudWatchMetricsQuery } from '../../types'; -import { CloudWatchDatasource } from '../../datasource'; -import EditorRows from '../ui/EditorRows'; -import EditorRow from '../ui/EditorRow'; -import EditorFieldGroup from '../ui/EditorFieldGroup'; -import EditorField from '../ui/EditorField'; -import { appendTemplateVariables, toOption } from '../../utils/utils'; -import { useDimensionKeys, useMetrics, useNamespaces } from '../../hooks'; +import { EditorField, EditorFieldGroup, EditorRow, EditorRows } from '@grafana/experimental'; +import { Select, Switch } from '@grafana/ui'; import { Dimensions } from '..'; +import { CloudWatchDatasource } from '../../datasource'; +import { useDimensionKeys, useMetrics, useNamespaces } from '../../hooks'; +import { CloudWatchMetricsQuery } from '../../types'; +import { appendTemplateVariables, toOption } from '../../utils/utils'; export type Props = { query: CloudWatchMetricsQuery; diff --git a/public/app/plugins/datasource/cloudwatch/components/MetricsQueryEditor.tsx b/public/app/plugins/datasource/cloudwatch/components/MetricsQueryEditor.tsx index 8ab5381a470..6baddc5ac40 100644 --- a/public/app/plugins/datasource/cloudwatch/components/MetricsQueryEditor.tsx +++ b/public/app/plugins/datasource/cloudwatch/components/MetricsQueryEditor.tsx @@ -1,22 +1,18 @@ -import React, { PureComponent, ChangeEvent } from 'react'; - +import React, { ChangeEvent, PureComponent } from 'react'; import { QueryEditorProps } from '@grafana/data'; +import { EditorField, EditorRow, Space } from '@grafana/experimental'; import { Input } from '@grafana/ui'; -import { - CloudWatchQuery, - CloudWatchMetricsQuery, - CloudWatchJsonData, - MetricQueryType, - MetricEditorMode, -} from '../types'; import { CloudWatchDatasource } from '../datasource'; -import { Alias, MetricStatEditor, MathExpressionQueryField, SQLBuilderEditor, SQLCodeEditor } from './'; - -import EditorRow from './ui/EditorRow'; -import EditorField from './ui/EditorField'; -import { Space } from './ui/Space'; -import QueryHeader from './QueryHeader'; import { isMetricsQuery } from '../guards'; +import { + CloudWatchJsonData, + CloudWatchMetricsQuery, + CloudWatchQuery, + MetricEditorMode, + MetricQueryType, +} from '../types'; +import { Alias, MathExpressionQueryField, MetricStatEditor, SQLBuilderEditor, SQLCodeEditor } from './'; +import QueryHeader from './QueryHeader'; export type Props = QueryEditorProps; diff --git a/public/app/plugins/datasource/cloudwatch/components/QueryHeader.tsx b/public/app/plugins/datasource/cloudwatch/components/QueryHeader.tsx index 3309c9da7ab..962d4464e26 100644 --- a/public/app/plugins/datasource/cloudwatch/components/QueryHeader.tsx +++ b/public/app/plugins/datasource/cloudwatch/components/QueryHeader.tsx @@ -3,6 +3,7 @@ import { pick } from 'lodash'; import { SelectableValue } from '@grafana/data'; import { Button, ConfirmModal, RadioButtonGroup } from '@grafana/ui'; +import { EditorHeader, InlineSelect, FlexItem } from '@grafana/experimental'; import { CloudWatchDatasource } from '../datasource'; import { @@ -12,9 +13,6 @@ import { MetricEditorMode, MetricQueryType, } from '../types'; -import EditorHeader from './ui/EditorHeader'; -import InlineSelect from './ui/InlineSelect'; -import FlexItem from './ui/FlexItem'; import { useRegions } from '../hooks'; interface QueryHeaderProps { diff --git a/public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLBuilderEditor.tsx b/public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLBuilderEditor.tsx index cce1123dc69..0135646a5fa 100644 --- a/public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLBuilderEditor.tsx +++ b/public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLBuilderEditor.tsx @@ -1,15 +1,13 @@ import React, { useCallback, useEffect, useState } from 'react'; -import { CloudWatchMetricsQuery } from '../../types'; +import { EditorField, EditorRow, EditorRows } from '@grafana/experimental'; +import { Input } from '@grafana/ui'; +import SQLGenerator from '../../cloudwatch-sql/SQLGenerator'; import { CloudWatchDatasource } from '../../datasource'; -import EditorRow from '../ui/EditorRow'; -import EditorRows from '../ui/EditorRows'; -import EditorField from '../ui/EditorField'; +import { CloudWatchMetricsQuery } from '../../types'; +import SQLBuilderSelectRow from './SQLBuilderSelectRow'; import SQLFilter from './SQLFilter'; import SQLGroupBy from './SQLGroupBy'; -import SQLBuilderSelectRow from './SQLBuilderSelectRow'; -import SQLGenerator from '../../cloudwatch-sql/SQLGenerator'; import SQLOrderByGroup from './SQLOrderByGroup'; -import { Input } from '@grafana/ui'; import { setSql } from './utils'; export type Props = { diff --git a/public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLBuilderSelectRow.tsx b/public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLBuilderSelectRow.tsx index 4fbf15a1906..7d94a3d53d3 100644 --- a/public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLBuilderSelectRow.tsx +++ b/public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLBuilderSelectRow.tsx @@ -1,15 +1,13 @@ -import { toOption } from '@grafana/data'; -import { Select, Switch } from '@grafana/ui'; import React, { useEffect, useMemo } from 'react'; +import { toOption } from '@grafana/data'; +import { EditorField, EditorFieldGroup } from '@grafana/experimental'; +import { Select, Switch } from '@grafana/ui'; import { STATISTICS } from '../../cloudwatch-sql/language'; import { CloudWatchDatasource } from '../../datasource'; import { useDimensionKeys, useMetrics, useNamespaces } from '../../hooks'; import { CloudWatchMetricsQuery } from '../../types'; import { appendTemplateVariables } from '../../utils/utils'; -import EditorField from '../ui/EditorField'; -import EditorFieldGroup from '../ui/EditorFieldGroup'; import { - stringArrayToDimensions, getMetricNameFromExpression, getNamespaceFromExpression, getSchemaLabelKeys as getSchemaLabels, @@ -19,6 +17,7 @@ import { setNamespace, setSchemaLabels, setWithSchema, + stringArrayToDimensions, } from './utils'; interface SQLBuilderSelectRowProps { diff --git a/public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLFilter.tsx b/public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLFilter.tsx index d457303606d..a87f16155f9 100644 --- a/public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLFilter.tsx +++ b/public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLFilter.tsx @@ -1,16 +1,14 @@ -import { SelectableValue, toOption } from '@grafana/data'; -import { Select } from '@grafana/ui'; import React, { useMemo, useState } from 'react'; import { useAsyncFn } from 'react-use'; +import { SelectableValue, toOption } from '@grafana/data'; +import { AccessoryButton, EditorList, InputGroup } from '@grafana/experimental'; +import { Select } from '@grafana/ui'; import { COMPARISON_OPERATORS, EQUALS } from '../../cloudwatch-sql/language'; import { CloudWatchDatasource } from '../../datasource'; import { QueryEditorExpressionType, QueryEditorOperatorExpression, QueryEditorPropertyType } from '../../expressions'; import { useDimensionKeys } from '../../hooks'; import { CloudWatchMetricsQuery } from '../../types'; import { appendTemplateVariables } from '../../utils/utils'; -import AccessoryButton from '../ui/AccessoryButton'; -import EditorList from '../ui/EditorList'; -import InputGroup from '../ui/InputGroup'; import { getFlattenedFilters, getMetricNameFromExpression, diff --git a/public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLGroupBy.tsx b/public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLGroupBy.tsx index 3a13610d3dc..c8730313292 100644 --- a/public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLGroupBy.tsx +++ b/public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLGroupBy.tsx @@ -1,13 +1,11 @@ -import { SelectableValue, toOption } from '@grafana/data'; -import { Select } from '@grafana/ui'; import React, { useMemo, useState } from 'react'; +import { SelectableValue, toOption } from '@grafana/data'; +import { AccessoryButton, EditorList, InputGroup } from '@grafana/experimental'; +import { Select } from '@grafana/ui'; import { CloudWatchDatasource } from '../../datasource'; import { QueryEditorExpressionType, QueryEditorGroupByExpression, QueryEditorPropertyType } from '../../expressions'; import { useDimensionKeys } from '../../hooks'; import { CloudWatchMetricsQuery } from '../../types'; -import AccessoryButton from '../ui/AccessoryButton'; -import EditorList from '../ui/EditorList'; -import InputGroup from '../ui/InputGroup'; import { getFlattenedGroupBys, getMetricNameFromExpression, diff --git a/public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLOrderByGroup.tsx b/public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLOrderByGroup.tsx index 1f45c3f85db..70cdfc91da1 100644 --- a/public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLOrderByGroup.tsx +++ b/public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLOrderByGroup.tsx @@ -1,13 +1,11 @@ -import { SelectableValue, toOption } from '@grafana/data'; -import { Select } from '@grafana/ui'; import React from 'react'; +import { SelectableValue, toOption } from '@grafana/data'; +import { AccessoryButton, EditorField, EditorFieldGroup } from '@grafana/experimental'; +import { Select } from '@grafana/ui'; import { ASC, DESC, STATISTICS } from '../../cloudwatch-sql/language'; import { CloudWatchDatasource } from '../../datasource'; import { CloudWatchMetricsQuery } from '../../types'; import { appendTemplateVariables } from '../../utils/utils'; -import AccessoryButton from '../ui/AccessoryButton'; -import EditorField from '../ui/EditorField'; -import EditorFieldGroup from '../ui/EditorFieldGroup'; import { setOrderBy, setSql } from './utils'; interface SQLBuilderSelectRowProps { diff --git a/public/app/plugins/datasource/cloudwatch/components/ui/AccessoryButton.tsx b/public/app/plugins/datasource/cloudwatch/components/ui/AccessoryButton.tsx deleted file mode 100644 index 0dc5ae3022b..00000000000 --- a/public/app/plugins/datasource/cloudwatch/components/ui/AccessoryButton.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import { css, cx } from '@emotion/css'; -import { GrafanaTheme2 } from '@grafana/data'; -import { stylesFactory, useTheme2 } from '@grafana/ui'; -import { Button, ButtonProps } from '@grafana/ui/src/components/Button'; -import React from 'react'; - -interface AccessoryButtonProps extends ButtonProps {} - -const AccessoryButton: React.FC = ({ className, ...props }) => { - const theme = useTheme2(); - const styles = getButtonStyles(theme); - - return