Update grafana/experimental and fix Cloudwatch components (#48132)

* Update grafana/experimental and fix components

* Simplify
This commit is contained in:
Ivana Huckova 2022-04-26 11:28:34 +02:00 committed by GitHub
parent 98161be9ad
commit c0ee94a04d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 26 additions and 30 deletions

View File

@ -250,7 +250,7 @@
"@grafana/aws-sdk": "0.0.35",
"@grafana/data": "workspace:*",
"@grafana/e2e-selectors": "workspace:*",
"@grafana/experimental": "^0.0.2-canary.25",
"@grafana/experimental": "^0.0.2-canary.30",
"@grafana/google-sdk": "0.0.3",
"@grafana/lezer-logql": "^0.0.11",
"@grafana/runtime": "workspace:*",

View File

@ -1,8 +1,8 @@
import React, { ChangeEvent } from 'react';
import { PanelData } from '@grafana/data';
import { EditorField, EditorHeader, EditorRow, InlineSelect, Space } from '@grafana/experimental';
import { Input, Switch } from '@grafana/ui';
import { EditorField, EditorHeader, EditorRow, EditorSwitch, InlineSelect, Space } from '@grafana/experimental';
import { Input } from '@grafana/ui';
import { CloudWatchDatasource } from '../datasource';
import { useRegions } from '../hooks';
@ -52,7 +52,7 @@ export function AnnotationQueryEditor(props: React.PropsWithChildren<Props>) {
/>
</EditorField>
<EditorField label="Enable Prefix Matching" optional={true}>
<Switch
<EditorSwitch
value={query.prefixMatching}
onChange={(e) => {
onChange({
@ -62,18 +62,16 @@ export function AnnotationQueryEditor(props: React.PropsWithChildren<Props>) {
}}
/>
</EditorField>
<EditorField label="Action" optional={true}>
<EditorField label="Action" optional={true} disabled={!query.prefixMatching}>
<Input
disabled={!query.prefixMatching}
value={query.actionPrefix || ''}
onChange={(event: ChangeEvent<HTMLInputElement>) =>
onChange({ ...query, actionPrefix: event.target.value })
}
/>
</EditorField>
<EditorField label="Alarm Name" optional={true}>
<EditorField label="Alarm Name" optional={true} disabled={!query.prefixMatching}>
<Input
disabled={!query.prefixMatching}
value={query.alarmNamePrefix || ''}
onChange={(event: ChangeEvent<HTMLInputElement>) =>
onChange({ ...query, alarmNamePrefix: event.target.value })

View File

@ -1,8 +1,8 @@
import React from 'react';
import { SelectableValue } from '@grafana/data';
import { EditorField, EditorFieldGroup, EditorRow, EditorRows } from '@grafana/experimental';
import { Select, Switch } from '@grafana/ui';
import { EditorField, EditorFieldGroup, EditorRow, EditorRows, EditorSwitch } from '@grafana/experimental';
import { Select } from '@grafana/ui';
import { Dimensions } from '..';
import { CloudWatchDatasource } from '../../datasource';
@ -128,7 +128,7 @@ export function MetricStatEditor({
optional={true}
tooltip="Only show metrics that exactly match all defined dimension names."
>
<Switch
<EditorSwitch
id={`${query.refId}-cloudwatch-match-exact`}
value={!!query.matchExact}
onChange={(e) => {

View File

@ -147,6 +147,7 @@ export class MetricsQueryEditor extends PureComponent<Props, State> {
width={26}
optional
tooltip="ID can be used to reference other queries in math expressions. The ID can include numbers, letters, and underscore, and must start with a lowercase letter."
invalid={!!query.id && !/^$|^[a-z][a-zA-Z0-9_]*$/.test(query.id)}
>
<Input
id={`${query.refId}-cloudwatch-metric-query-editor-id`}
@ -155,7 +156,6 @@ export class MetricsQueryEditor extends PureComponent<Props, State> {
this.onChange({ ...metricsQuery, id: event.target.value })
}
type="text"
invalid={!!query.id && !/^$|^[a-z][a-zA-Z0-9_]*$/.test(query.id)}
value={query.id}
/>
</EditorField>

View File

@ -1,8 +1,8 @@
import React, { useEffect, useMemo } from 'react';
import { SelectableValue, toOption } from '@grafana/data';
import { EditorField, EditorFieldGroup } from '@grafana/experimental';
import { Select, Switch } from '@grafana/ui';
import { EditorField, EditorFieldGroup, EditorSwitch } from '@grafana/experimental';
import { Select } from '@grafana/ui';
import { STATISTICS } from '../../cloudwatch-sql/language';
import { CloudWatchDatasource } from '../../datasource';
@ -87,7 +87,7 @@ const SQLBuilderSelectRow: React.FC<SQLBuilderSelectRowProps> = ({ datasource, q
</EditorField>
<EditorField label="With schema">
<Switch
<EditorSwitch
id={`${query.refId}-cloudwatch-sql-withSchema`}
value={withSchemaEnabled}
onChange={(ev) =>
@ -97,12 +97,11 @@ const SQLBuilderSelectRow: React.FC<SQLBuilderSelectRowProps> = ({ datasource, q
</EditorField>
{withSchemaEnabled && (
<EditorField label="Schema labels">
<EditorField label="Schema labels" disabled={!namespace}>
<Select
id={`${query.refId}-cloudwatch-sql-schema-label-keys`}
width="auto"
isMulti={true}
disabled={!namespace}
value={schemaLabels ? schemaLabels.map(toOption) : null}
options={dimensionKeys}
allowCustomValue

View File

@ -1,7 +1,7 @@
import React from 'react';
import { SelectableValue, toOption } from '@grafana/data';
import { AccessoryButton, EditorField, EditorFieldGroup } from '@grafana/experimental';
import { AccessoryButton, EditorField, EditorFieldGroup, InputGroup } from '@grafana/experimental';
import { Select } from '@grafana/ui';
import { ASC, DESC, STATISTICS } from '../../cloudwatch-sql/language';
@ -30,7 +30,7 @@ const SQLOrderByGroup: React.FC<SQLBuilderSelectRowProps> = ({ query, onQueryCha
return (
<EditorFieldGroup>
<EditorField label="Order by" optional width={16}>
<>
<InputGroup>
<Select
aria-label="Order by"
onChange={({ value }) => value && onQueryChange(setOrderBy(query, value))}
@ -46,14 +46,13 @@ const SQLOrderByGroup: React.FC<SQLBuilderSelectRowProps> = ({ query, onQueryCha
onClick={() => onQueryChange(setSql(query, { orderBy: undefined }))}
/>
)}
</>
</InputGroup>
</EditorField>
<EditorField label="Direction" width={16}>
<EditorField label="Direction" disabled={!orderBy} width={16}>
<Select
aria-label="Direction"
inputId="cloudwatch-sql-order-by-direction"
disabled={!orderBy}
value={orderByDirection ? toOption(orderByDirection) : orderByDirections[0]}
options={appendTemplateVariables(datasource, orderByDirections)}
onChange={(item) => item && onQueryChange(setSql(query, { orderByDirection: item.value }))}

View File

@ -1,8 +1,8 @@
import React, { SyntheticEvent } from 'react';
import { CoreApp, SelectableValue } from '@grafana/data';
import { EditorRow, EditorField } from '@grafana/experimental';
import { RadioButtonGroup, Select, Switch } from '@grafana/ui';
import { EditorRow, EditorField, EditorSwitch } from '@grafana/experimental';
import { RadioButtonGroup, Select } from '@grafana/ui';
import { getQueryTypeChangeHandler, getQueryTypeOptions } from '../../components/PromExploreExtraField';
import { FORMAT_OPTIONS, INTERVAL_FACTOR_OPTIONS } from '../../components/PromQueryEditor';
@ -82,7 +82,7 @@ export const PromQueryBuilderOptions = React.memo<Props>(({ query, app, onChange
</EditorField>
{shouldShowExemplarSwitch(query, app) && (
<EditorField label="Exemplars">
<Switch value={query.exemplar} onChange={onExemplarChange} />
<EditorSwitch value={query.exemplar} onChange={onExemplarChange} />
</EditorField>
)}
{query.intervalFactor && query.intervalFactor > 1 && (

View File

@ -4135,9 +4135,9 @@ __metadata:
languageName: node
linkType: hard
"@grafana/experimental@npm:^0.0.2-canary.25":
version: 0.0.2-canary.25
resolution: "@grafana/experimental@npm:0.0.2-canary.25"
"@grafana/experimental@npm:^0.0.2-canary.30":
version: 0.0.2-canary.30
resolution: "@grafana/experimental@npm:0.0.2-canary.30"
dependencies:
"@types/uuid": ^8.3.3
uuid: ^8.3.2
@ -4145,7 +4145,7 @@ __metadata:
"@emotion/css": 11.1.3
react: 17.0.1
react-select: 5.2.1
checksum: 20532d6a1ff1bb7a98db71728bc34474f87663431fef349a53f4673d12b6356336b9250bc85028693e7bbfeec8e468d9910837f4062cb49239d581dc974c55c9
checksum: b5b453b9372cde8f89021c50ae1191a2506ebbb069ad6331d22a5c7267ecd8c0db7f9f5fdd9cfab49fafce4e0b6809609e67449b78fe3ccc63cedfeceb64b911
languageName: node
linkType: hard
@ -20530,7 +20530,7 @@ __metadata:
"@grafana/e2e": "workspace:*"
"@grafana/e2e-selectors": "workspace:*"
"@grafana/eslint-config": 3.0.0
"@grafana/experimental": ^0.0.2-canary.25
"@grafana/experimental": ^0.0.2-canary.30
"@grafana/google-sdk": 0.0.3
"@grafana/lezer-logql": ^0.0.11
"@grafana/runtime": "workspace:*"