Skip to content

Commit 97aae73

Browse files
insmacinsmac
committed
Further deprecate @grafana/experimental 
1 parent 28b451d commit 97aae73

14 files changed

+328
-324
lines changed

‎src/components/FormatSelect.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22
import { selectors } from './../selectors';
33
import { Format } from '../types';
4-
import { InlineSelect } from '@grafana/experimental';
4+
import { InlineSelect } from '@grafana/plugin-ui';
55

66
export type Props = { format: Format; value?: string; onChange: (format: Format) => void };
77

@@ -14,7 +14,7 @@ export const FormatSelect = (props: Props) => {
1414
options={[
1515
{ label: formatLabels.AUTO, value: Format.AUTO },
1616
{ label: formatLabels.TABLE, value: Format.TABLE },
17-
{ label: formatLabels.TIME_SERIES, value: Format.TIMESERIES }
17+
{ label: formatLabels.TIME_SERIES, value: Format.TIMESERIES },
1818
]}
1919
value={format}
2020
onChange={(e) => onChange(e.value!)}

‎src/components/queryBuilder/Fields.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { MultiSelect } from '@grafana/ui';
33
import { SelectableValue } from '@grafana/data';
44
import { FullField } from './../../types';
55
import { selectors } from './../../selectors';
6-
import { EditorField } from '@grafana/experimental';
6+
import { EditorField } from '@grafana/plugin-ui';
77

88
interface FieldsEditorProps {
99
fieldsList: FullField[];

‎src/components/queryBuilder/Filters.tsx

+71-82
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
import React, {useState} from 'react';
2-
import {SelectableValue} from '@grafana/data';
3-
import {Button, Input, MultiSelect, RadioButtonGroup, Select} from '@grafana/ui';
4-
import {Filter, FilterOperator, FullField, NullFilter} from '../../types';
1+
import React, { useState } from 'react';
2+
import { SelectableValue } from '@grafana/data';
3+
import { Button, Input, MultiSelect, RadioButtonGroup, Select } from '@grafana/ui';
4+
import { Filter, FilterOperator, FullField, NullFilter } from '../../types';
55
import * as utils from './utils';
6-
import {selectors} from '../../selectors';
7-
import {styles} from '../../styles';
8-
import {EditorField, EditorFieldGroup} from '@grafana/experimental';
6+
import { selectors } from '../../selectors';
7+
import { styles } from '../../styles';
8+
import { EditorField, EditorFieldGroup } from '@grafana/plugin-ui';
99

1010
const boolValues: Array<SelectableValue<boolean>> = [
1111
{ value: true, label: 'True' },
@@ -38,12 +38,12 @@ const filterOperators: Array<SelectableValue<FilterOperator>> = [
3838
{ value: FilterOperator.OutsideGrafanaTimeRange, label: 'OUTSIDE DASHBOARD TIME RANGE' },
3939
];
4040
const standardTimeOptions: Array<SelectableValue<string>> = [
41-
{ value: 'date_trunc(\'day\', now())', label: 'TODAY' },
42-
{ value: 'date_trunc(\'day\', dateadd(\'d\', -1, now()))', label: 'YESTERDAY' },
41+
{ value: "date_trunc('day', now())", label: 'TODAY' },
42+
{ value: "date_trunc('day', dateadd('d', -1, now()))", label: 'YESTERDAY' },
4343
{ value: 'now()', label: 'NOW' },
44-
{ value: 'date_trunc(\'day\', dateadd(\'w\', -1, now()))', label: 'WEEK AGO' },
45-
{ value: 'date_trunc(\'day\', dateadd(\'M\', -1, now()))', label: 'MONTH AGO' },
46-
{ value: 'date_trunc(\'day\', dateadd(\'y\', -1, now()))', label: 'YEAR AGO' },
44+
{ value: "date_trunc('day', dateadd('w', -1, now()))", label: 'WEEK AGO' },
45+
{ value: "date_trunc('day', dateadd('M', -1, now()))", label: 'MONTH AGO' },
46+
{ value: "date_trunc('day', dateadd('y', -1, now()))", label: 'YEAR AGO' },
4747
{ value: 'GRAFANA_START_TIME', label: 'DASHBOARD START TIME' },
4848
{ value: 'GRAFANA_END_TIME', label: 'DASHBOARD END TIME' },
4949
];
@@ -67,7 +67,9 @@ const FilterValueNumberItem = (props: { value: number; onChange: (value: number)
6767
type="number"
6868
value={value}
6969
onChange={(e) => setValue(e.currentTarget.value.replace(/[^0-9 ,-]/, ''))}
70-
onBlur={(e) => { props.onChange(Number(value)); }}
70+
onBlur={(e) => {
71+
props.onChange(Number(value));
72+
}}
7173
/>
7274
</div>
7375
);
@@ -114,13 +116,13 @@ export const FilterValueEditor = (props: {
114116
};
115117
if (filter.type === 'picklist') {
116118
return (
117-
<div data-testid="query-builder-filters-multi-picklist-value-container">
118-
<MultiSelect
119-
value={filter.value}
120-
options={getOptions()}
121-
onChange={(e) => onMultiFilterValueChange(e.map((v) => v.value!))}
122-
/>
123-
</div>
119+
<div data-testid="query-builder-filters-multi-picklist-value-container">
120+
<MultiSelect
121+
value={filter.value}
122+
options={getOptions()}
123+
onChange={(e) => onMultiFilterValueChange(e.map((v) => v.value!))}
124+
/>
125+
</div>
124126
);
125127
}
126128
return <FilterValueMultiStringItem value={filter.value} onChange={onMultiFilterValueChange} />;
@@ -134,18 +136,16 @@ export const FilterValueEditor = (props: {
134136
</div>
135137
);
136138
} else if (utils.isNumberFilter(filter) /*&& !utils.isSetFilter(filter)*/) {
137-
return <FilterValueNumberItem value={filter.value}
138-
onChange={(value) => onFilterChange({ ...filter, value })} />;
139+
return <FilterValueNumberItem value={filter.value} onChange={(value) => onFilterChange({ ...filter, value })} />;
139140
} else if (utils.isDateFilter(filter)) {
140141
const onDateFilterValueChange = (value: string) => {
141142
onFilterChange({ ...filter, value });
142143
};
143144
//
144-
return utils.isDateFilterWithOutValue(filter) ? null :
145-
(
145+
return utils.isDateFilterWithOutValue(filter) ? null : (
146146
<div data-testid="query-builder-filters-date-value-container">
147147
<Select
148-
value={filter.value }
148+
value={filter.value}
149149
onChange={(e) => onDateFilterValueChange(e.value!)}
150150
allowCustomValue={true}
151151
options={[...standardTimeOptions]}
@@ -162,9 +162,7 @@ export const FilterValueEditor = (props: {
162162
) {
163163
return (
164164
<div data-testid="query-builder-filters-single-picklist-value-container">
165-
<Select value={filter.value}
166-
onChange={(e) => onStringFilterValueChange(e.value!)}
167-
options={getOptions()} />
165+
<Select value={filter.value} onChange={(e) => onStringFilterValueChange(e.value!)} options={getOptions()} />
168166
</div>
169167
);
170168
}
@@ -204,15 +202,11 @@ export const FilterEditor = (props: {
204202
return filterOperators.filter((f) => [FilterOperator.Equals, FilterOperator.NotEquals].includes(f.value!));
205203
} else if (utils.isGeoHashType(type)) {
206204
return filterOperators.filter((f) =>
207-
[
208-
FilterOperator.IsNull,
209-
FilterOperator.IsNotNull,
210-
FilterOperator.Equals,
211-
FilterOperator.NotEquals,
212-
].includes(f.value!)
205+
[FilterOperator.IsNull, FilterOperator.IsNotNull, FilterOperator.Equals, FilterOperator.NotEquals].includes(
206+
f.value!
207+
)
213208
);
214-
}
215-
else if (utils.isNumberType(type)) {
209+
} else if (utils.isNumberType(type)) {
216210
let list = [
217211
FilterOperator.Equals,
218212
FilterOperator.NotEquals,
@@ -221,15 +215,13 @@ export const FilterEditor = (props: {
221215
FilterOperator.GreaterThan,
222216
FilterOperator.GreaterThanOrEqual,
223217
FilterOperator.In,
224-
FilterOperator.NotIn
218+
FilterOperator.NotIn,
225219
];
226-
if ( utils.isNullableNumberType(type)){
220+
if (utils.isNullableNumberType(type)) {
227221
list.push(FilterOperator.IsNull);
228222
list.push(FilterOperator.IsNotNull);
229223
}
230-
return filterOperators.filter((f) =>
231-
list.includes(f.value!)
232-
);
224+
return filterOperators.filter((f) => list.includes(f.value!));
233225
} else if (utils.isDateType(type)) {
234226
return filterOperators.filter((f) =>
235227
[
@@ -268,29 +260,26 @@ export const FilterEditor = (props: {
268260
);
269261
} else if (utils.isIPv4Type(type)) {
270262
return filterOperators.filter((f) =>
271-
[
272-
FilterOperator.IsNull,
273-
FilterOperator.IsNotNull,
274-
FilterOperator.Equals,
275-
FilterOperator.NotEquals,
276-
FilterOperator.GreaterThan,
277-
FilterOperator.GreaterThanOrEqual,
278-
FilterOperator.LessThan,
279-
FilterOperator.LessThanOrEqual,
280-
FilterOperator.ContainedBy,
281-
FilterOperator.ContainedByOrEqual,
282-
FilterOperator.In,
283-
FilterOperator.NotIn,
284-
].includes(f.value!)
263+
[
264+
FilterOperator.IsNull,
265+
FilterOperator.IsNotNull,
266+
FilterOperator.Equals,
267+
FilterOperator.NotEquals,
268+
FilterOperator.GreaterThan,
269+
FilterOperator.GreaterThanOrEqual,
270+
FilterOperator.LessThan,
271+
FilterOperator.LessThanOrEqual,
272+
FilterOperator.ContainedBy,
273+
FilterOperator.ContainedByOrEqual,
274+
FilterOperator.In,
275+
FilterOperator.NotIn,
276+
].includes(f.value!)
285277
);
286278
} else {
287279
return filterOperators.filter((f) =>
288-
[
289-
FilterOperator.IsNull,
290-
FilterOperator.IsNotNull,
291-
FilterOperator.Equals,
292-
FilterOperator.NotEquals
293-
].includes(f.value!)
280+
[FilterOperator.IsNull, FilterOperator.IsNotNull, FilterOperator.Equals, FilterOperator.NotEquals].includes(
281+
f.value!
282+
)
294283
);
295284
}
296285
};
@@ -337,7 +326,7 @@ export const FilterEditor = (props: {
337326
type: filterData.type as 'date',
338327
condition: filter.condition || 'AND',
339328
operator: FilterOperator.Equals,
340-
value: '',//TODAY
329+
value: '', //TODAY
341330
};
342331
} else {
343332
newFilter = {
@@ -418,33 +407,33 @@ export const FiltersEditor = (props: {
418407
return (
419408
<EditorField tooltip={tooltip} label={label}>
420409
<EditorFieldGroup>
421-
<div style={{flexDirection: 'column'}}>
410+
<div style={{ flexDirection: 'column' }}>
422411
<Button
423-
data-testid="query-builder-filters-add-button"
424-
icon="plus-circle"
425-
variant="secondary"
426-
size="sm"
427-
className='gf-form'
428-
onClick={addFilter}
412+
data-testid="query-builder-filters-add-button"
413+
icon="plus-circle"
414+
variant="secondary"
415+
size="sm"
416+
className="gf-form"
417+
onClick={addFilter}
429418
>
430419
{AddLabel}
431420
</Button>
432421

433422
{filters.map((filter, index) => {
434423
return (
435-
<div className="gf-form" key={index}>
436-
<FilterEditor fieldsList={fieldsList} filter={filter} onFilterChange={onFilterChange} index={index}/>
437-
<Button
438-
data-testid="query-builder-filters-remove-button"
439-
icon="trash-alt"
440-
variant="destructive"
441-
size="sm"
442-
className={styles.Common.smallBtn}
443-
onClick={() => removeFilter(index)}
444-
>
445-
{RemoveLabel}
446-
</Button>
447-
</div>
424+
<div className="gf-form" key={index}>
425+
<FilterEditor fieldsList={fieldsList} filter={filter} onFilterChange={onFilterChange} index={index} />
426+
<Button
427+
data-testid="query-builder-filters-remove-button"
428+
icon="trash-alt"
429+
variant="destructive"
430+
size="sm"
431+
className={styles.Common.smallBtn}
432+
onClick={() => removeFilter(index)}
433+
>
434+
{RemoveLabel}
435+
</Button>
436+
</div>
448437
);
449438
})}
450439
</div>

‎src/components/queryBuilder/GroupBy.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import React, {useEffect, useState} from 'react';
1+
import React, { useEffect, useState } from 'react';
22
import { MultiSelect } from '@grafana/ui';
33
import { SelectableValue } from '@grafana/data';
44
import { FullField } from './../../types';
55
import { selectors } from './../../selectors';
6-
import { EditorField } from '@grafana/experimental';
6+
import { EditorField } from '@grafana/plugin-ui';
77

88
interface GroupByEditorProps {
99
fieldsList: FullField[];

‎src/components/queryBuilder/Limit.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { useState } from 'react';
22
import { Input } from '@grafana/ui';
33
import { selectors } from './../../selectors';
4-
import { EditorField } from '@grafana/experimental';
4+
import { EditorField } from '@grafana/plugin-ui';
55

66
interface LimitEditorProps {
77
limit: string;

‎src/components/queryBuilder/Metrics.tsx

+24-30
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { InlineFormLabel, Select, Button, Input } from '@grafana/ui';
44
import { BuilderMetricField, BuilderMetricFieldAggregation, FullField } from './../../types';
55
import { selectors } from './../../selectors';
66
import { styles } from '../../styles';
7-
import { EditorField, EditorFieldGroup } from '@grafana/experimental';
7+
import { EditorField, EditorFieldGroup } from '@grafana/plugin-ui';
88

99
const MetricEditor = (props: {
1010
fieldsList: FullField[];
@@ -109,42 +109,36 @@ export const MetricsEditor = (props: MetricsEditorProps) => {
109109
return (
110110
<EditorField tooltip={tooltipAggregate} label={label}>
111111
<EditorFieldGroup>
112-
<div style={{flexDirection: 'column'}}>
113-
<Button
114-
icon="plus-circle"
115-
size="sm"
116-
variant="secondary"
117-
onClick={onMetricAdd}
118-
className='gf-form'
119-
>
112+
<div style={{ flexDirection: 'column' }}>
113+
<Button icon="plus-circle" size="sm" variant="secondary" onClick={onMetricAdd} className="gf-form">
120114
{AddLabel}
121115
</Button>
122116
{metrics.map((metric, index) => {
123117
return (
124-
<div className="gf-form" key={index}>
125-
<MetricEditor
126-
fieldsList={fieldsList}
127-
index={index}
128-
metric={metric}
129-
metrics={metrics}
130-
onMetricsChange={onMetricsChange}
131-
/>
132-
{metrics.length > 1 && (
133-
<Button
134-
icon="trash-alt"
135-
size="sm"
136-
variant="destructive"
137-
className={styles.Common.smallBtn}
138-
onClick={() => onMetricRemove(index)}
139-
>
140-
{RemoveLabel}
141-
</Button>
142-
)}
143-
</div>
118+
<div className="gf-form" key={index}>
119+
<MetricEditor
120+
fieldsList={fieldsList}
121+
index={index}
122+
metric={metric}
123+
metrics={metrics}
124+
onMetricsChange={onMetricsChange}
125+
/>
126+
{metrics.length > 1 && (
127+
<Button
128+
icon="trash-alt"
129+
size="sm"
130+
variant="destructive"
131+
className={styles.Common.smallBtn}
132+
onClick={() => onMetricRemove(index)}
133+
>
134+
{RemoveLabel}
135+
</Button>
136+
)}
137+
</div>
144138
);
145139
})}
146140
</div>
147141
</EditorFieldGroup>
148142
</EditorField>
149-
);
143+
);
150144
};

‎src/components/queryBuilder/ModeEditor.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from 'react';
22
import { RadioButtonGroup } from '@grafana/ui';
33
import { BuilderMode } from 'types';
44
import { selectors } from './../../selectors';
5-
import { EditorField } from '@grafana/experimental';
5+
import { EditorField } from '@grafana/plugin-ui';
66

77
interface ModeEditorProps {
88
mode: BuilderMode;

‎src/components/queryBuilder/OrderBy.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import {
1212
} from './../../types';
1313
import { selectors } from './../../selectors';
1414
import { styles } from '../../styles';
15-
import { EditorField, EditorFieldGroup, EditorRow } from '@grafana/experimental';
15+
import { EditorField, EditorFieldGroup, EditorRow } from '@grafana/plugin-ui';
1616

1717
const OrderByItem = (props: {
1818
index: number;

0 commit comments

Comments
 (0)