root
/
grafana
mirror of https://github.com/grafana/grafana.git
1
0
Fork 0
Code Issues Actions 82 Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -250,7 +250,7 @@
"@grafana/aws-sdk": "0.0.35", "@grafana/aws-sdk": "0.0.35",
"@grafana/data": "workspace:*", "@grafana/data": "workspace:*",
"@grafana/e2e-selectors": "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/google-sdk": "0.0.3",
"@grafana/lezer-logql": "^0.0.11", "@grafana/lezer-logql": "^0.0.11",
"@grafana/runtime": "workspace:*", "@grafana/runtime": "workspace:*",

12
public/app/plugins/datasource/cloudwatch/components/AnnotationQueryEditor.tsx
View File

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

6
public/app/plugins/datasource/cloudwatch/components/MetricStatEditor/MetricStatEditor.tsx
View File

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

2
public/app/plugins/datasource/cloudwatch/components/MetricsQueryEditor.tsx
View File

@ -147,6 +147,7 @@ export class MetricsQueryEditor extends PureComponent<Props, State> {
width={26} width={26}
optional 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." 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 <Input
id={`${query.refId}-cloudwatch-metric-query-editor-id`} 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 }) this.onChange({ ...metricsQuery, id: event.target.value })
} }
type="text" type="text"
invalid={!!query.id && !/^$|^[a-z][a-zA-Z0-9_]*$/.test(query.id)}
value={query.id} value={query.id}
/> />
</EditorField> </EditorField>

9
public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLBuilderSelectRow.tsx
View File

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

9
public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLOrderByGroup.tsx
View File

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

6
public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryBuilderOptions.tsx
View File

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

10
yarn.lock
View File

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