mirror of
https://github.com/grafana/grafana.git
synced 2026-08-11 05:34:53 -05:00
Forms: Remove gf-form from opentsdb/components (#79830)
* Forms: Remove gf-form from opentsdb/components * filter and tag * rate * Update public/app/plugins/datasource/opentsdb/components/DownSample.tsx Co-authored-by: Alex Khomenko <Clarity-89@users.noreply.github.com> * Update public/app/plugins/datasource/opentsdb/components/FilterSection.tsx Co-authored-by: Alex Khomenko <Clarity-89@users.noreply.github.com> * Update public/app/plugins/datasource/opentsdb/components/MetricSection.tsx Co-authored-by: Alex Khomenko <Clarity-89@users.noreply.github.com> * Update public/app/plugins/datasource/opentsdb/components/RateSection.tsx Co-authored-by: Alex Khomenko <Clarity-89@users.noreply.github.com> * Update public/app/plugins/datasource/opentsdb/components/TagSection.tsx Co-authored-by: Alex Khomenko <Clarity-89@users.noreply.github.com> * prettier * more changes --------- Co-authored-by: Alex Khomenko <Clarity-89@users.noreply.github.com>
This commit is contained in:
Khushi Jain
co-authored by
Alex Khomenko
Alex Khomenko
parent
22266b2a73
commit
fe757f69c5
+1
-72
@@ -5550,8 +5550,7 @@ exports[`better eslint`] = {
|
||||
],
|
||||
"public/app/plugins/datasource/opentsdb/components/OpenTsdbQueryEditor.tsx:5381": [
|
||||
[0, 0, 0, "Styles should be written using objects.", "0"],
|
||||
[0, 0, 0, "Styles should be written using objects.", "1"],
|
||||
[0, 0, 0, "Styles should be written using objects.", "2"]
|
||||
[0, 0, 0, "Styles should be written using objects.", "1"]
|
||||
],
|
||||
"public/app/plugins/datasource/opentsdb/datasource.d.ts:5381": [
|
||||
[0, 0, 0, "Unexpected any. Specify a different type.", "0"]
|
||||
@@ -7405,76 +7404,6 @@ exports[`no gf-form usage`] = {
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"]
|
||||
],
|
||||
"public/app/plugins/datasource/opentsdb/components/DownSample.tsx:5381": [
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"]
|
||||
],
|
||||
"public/app/plugins/datasource/opentsdb/components/FilterSection.tsx:5381": [
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"]
|
||||
],
|
||||
"public/app/plugins/datasource/opentsdb/components/MetricSection.tsx:5381": [
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"]
|
||||
],
|
||||
"public/app/plugins/datasource/opentsdb/components/RateSection.tsx:5381": [
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"]
|
||||
],
|
||||
"public/app/plugins/datasource/opentsdb/components/TagSection.tsx:5381": [
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"]
|
||||
],
|
||||
"public/app/plugins/datasource/prometheus/components/PromExploreExtraField.tsx:5381": [
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
|
||||
|
||||
@@ -1,12 +1,10 @@
|
||||
import React from 'react';
|
||||
|
||||
import { toOption } from '@grafana/data';
|
||||
import { InlineLabel, Select, Input, InlineFormLabel, InlineSwitch } from '@grafana/ui';
|
||||
import { InlineLabel, Select, Input, InlineFormLabel, InlineSwitch, Stack } from '@grafana/ui';
|
||||
|
||||
import { OpenTsdbQuery } from '../types';
|
||||
|
||||
import { paddingRightClass } from './styles';
|
||||
|
||||
export interface DownSampleProps {
|
||||
query: OpenTsdbQuery;
|
||||
onChange: (query: OpenTsdbQuery) => void;
|
||||
@@ -21,8 +19,8 @@ export function DownSample({ query, onChange, onRunQuery, aggregators, fillPolic
|
||||
const fillPolicyOptions = fillPolicies.map((value: string) => toOption(value));
|
||||
|
||||
return (
|
||||
<div className="gf-form-inline" data-testid={testIds.section}>
|
||||
<div className="gf-form">
|
||||
<Stack gap={0.5} alignItems="flex-start" data-testid={testIds.section}>
|
||||
<Stack gap={0}>
|
||||
<InlineFormLabel
|
||||
className="query-keyword"
|
||||
width={8}
|
||||
@@ -36,7 +34,6 @@ export function DownSample({ query, onChange, onRunQuery, aggregators, fillPolic
|
||||
</InlineFormLabel>
|
||||
<Input
|
||||
width={25}
|
||||
className={paddingRightClass}
|
||||
data-testid={testIds.interval}
|
||||
placeholder="interval"
|
||||
value={query.downsampleInterval ?? ''}
|
||||
@@ -46,13 +43,12 @@ export function DownSample({ query, onChange, onRunQuery, aggregators, fillPolic
|
||||
}}
|
||||
onBlur={() => onRunQuery()}
|
||||
/>
|
||||
</div>
|
||||
<div className="gf-form">
|
||||
</Stack>
|
||||
<Stack gap={0}>
|
||||
<InlineFormLabel width={'auto'} className="query-keyword">
|
||||
Aggregator
|
||||
</InlineFormLabel>
|
||||
<Select
|
||||
className="gf-form-input"
|
||||
value={query.downsampleAggregator ? toOption(query.downsampleAggregator) : undefined}
|
||||
options={aggregatorOptions}
|
||||
onChange={({ value }) => {
|
||||
@@ -62,9 +58,9 @@ export function DownSample({ query, onChange, onRunQuery, aggregators, fillPolic
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</Stack>
|
||||
{tsdbVersion >= 2 && (
|
||||
<div className="gf-form">
|
||||
<Stack gap={0} alignItems="flex-start">
|
||||
<InlineLabel className="width-6 query-keyword">Fill</InlineLabel>
|
||||
<Select
|
||||
inputId="opentsdb-fillpolicy-select"
|
||||
@@ -77,9 +73,9 @@ export function DownSample({ query, onChange, onRunQuery, aggregators, fillPolic
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</Stack>
|
||||
)}
|
||||
<div className="gf-form">
|
||||
<Stack gap={0}>
|
||||
<InlineFormLabel className="query-keyword">Disable downsampling</InlineFormLabel>
|
||||
<InlineSwitch
|
||||
value={query.disableDownsampling ?? false}
|
||||
@@ -89,11 +85,11 @@ export function DownSample({ query, onChange, onRunQuery, aggregators, fillPolic
|
||||
onRunQuery();
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="gf-form gf-form--grow">
|
||||
<div className="gf-form-label gf-form-label--grow"></div>
|
||||
</div>
|
||||
</div>
|
||||
</Stack>
|
||||
<Stack gap={0} grow={1}>
|
||||
<InlineLabel> </InlineLabel>
|
||||
</Stack>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -12,6 +12,7 @@ import {
|
||||
clearButtonStyles,
|
||||
useStyles2,
|
||||
AsyncSelect,
|
||||
Stack,
|
||||
} from '@grafana/ui';
|
||||
|
||||
import { OpenTsdbFilter, OpenTsdbQuery } from '../types';
|
||||
@@ -118,46 +119,45 @@ export function FilterSection({
|
||||
const tagValueSearch = debounce((query: string) => suggestTagValues(query), 350);
|
||||
|
||||
return (
|
||||
<div className="gf-form-inline" data-testid={testIds.section}>
|
||||
<div className="gf-form">
|
||||
<InlineFormLabel
|
||||
className="query-keyword"
|
||||
width={8}
|
||||
tooltip={<div>Filters does not work with tags, either of the two will work but not both.</div>}
|
||||
>
|
||||
Filters
|
||||
</InlineFormLabel>
|
||||
{query.filters &&
|
||||
query.filters.map((fil: OpenTsdbFilter, idx: number) => {
|
||||
return (
|
||||
<InlineFormLabel key={idx} width="auto" data-testid={testIds.list + idx}>
|
||||
{fil.tagk} = {fil.type}({fil.filter}), groupBy = {'' + fil.groupBy}
|
||||
<button type="button" className={buttonStyles} onClick={() => editFilter(fil, idx)}>
|
||||
<Icon name={'pen'} />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={buttonStyles}
|
||||
onClick={() => removeFilter(idx)}
|
||||
data-testid={testIds.remove}
|
||||
>
|
||||
<Icon name={'times'} />
|
||||
</button>
|
||||
</InlineFormLabel>
|
||||
);
|
||||
})}
|
||||
{!addFilterMode && (
|
||||
<button className="gf-form-label" type="button" onClick={changeAddFilterMode} aria-label="Add filter">
|
||||
<Stack gap={0} data-testid={testIds.section}>
|
||||
<InlineFormLabel
|
||||
className="query-keyword"
|
||||
width={8}
|
||||
tooltip={<div>Filters does not work with tags, either of the two will work but not both.</div>}
|
||||
>
|
||||
Filters
|
||||
</InlineFormLabel>
|
||||
{query.filters &&
|
||||
query.filters.map((fil: OpenTsdbFilter, idx: number) => {
|
||||
return (
|
||||
<InlineFormLabel key={idx} width="auto" data-testid={testIds.list + idx}>
|
||||
{fil.tagk} = {fil.type}({fil.filter}), groupBy = {'' + fil.groupBy}
|
||||
<button type="button" className={buttonStyles} onClick={() => editFilter(fil, idx)}>
|
||||
<Icon name={'pen'} />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={buttonStyles}
|
||||
onClick={() => removeFilter(idx)}
|
||||
data-testid={testIds.remove}
|
||||
>
|
||||
<Icon name={'times'} />
|
||||
</button>
|
||||
</InlineFormLabel>
|
||||
);
|
||||
})}
|
||||
{!addFilterMode && (
|
||||
<InlineFormLabel width={2}>
|
||||
<button type="button" className={buttonStyles} onClick={changeAddFilterMode} aria-label="Add filter">
|
||||
<Icon name={'plus'} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</InlineFormLabel>
|
||||
)}
|
||||
{addFilterMode && (
|
||||
<div className="gf-form-inline">
|
||||
<div className="gf-form">
|
||||
<Stack gap={0.5} alignItems="center">
|
||||
<Stack gap={0}>
|
||||
<Select
|
||||
inputId="opentsdb-suggested-tagk-select"
|
||||
className="gf-form-input"
|
||||
value={curFilterKey ? toOption(curFilterKey) : undefined}
|
||||
placeholder="key"
|
||||
allowCustomValue
|
||||
@@ -177,9 +177,9 @@ export function FilterSection({
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</Stack>
|
||||
|
||||
<div className="gf-form">
|
||||
<Stack gap={0}>
|
||||
<InlineLabel className="width-4 query-keyword">Type</InlineLabel>
|
||||
<Select
|
||||
inputId="opentsdb-aggregator-select"
|
||||
@@ -191,12 +191,11 @@ export function FilterSection({
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</Stack>
|
||||
|
||||
<div className="gf-form">
|
||||
<Stack gap={0}>
|
||||
<AsyncSelect
|
||||
inputId="opentsdb-suggested-tagv-select"
|
||||
className="gf-form-input"
|
||||
value={curFilterValue ? toOption(curFilterValue) : undefined}
|
||||
placeholder="filter"
|
||||
allowCustomValue
|
||||
@@ -208,7 +207,7 @@ export function FilterSection({
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</Stack>
|
||||
|
||||
<InlineFormLabel width={5} className="query-keyword">
|
||||
Group by
|
||||
@@ -221,27 +220,27 @@ export function FilterSection({
|
||||
updCurFilterGroupBy(!curFilterGroupBy);
|
||||
}}
|
||||
/>
|
||||
<div className="gf-form">
|
||||
<Stack gap={0}>
|
||||
{errors && (
|
||||
<div className="gf-form-label" title={errors} data-testid={testIds.error}>
|
||||
<InlineLabel title={errors} data-testid={testIds.error}>
|
||||
<Icon name={'exclamation-triangle'} color={'rgb(229, 189, 28)'} />
|
||||
</div>
|
||||
</InlineLabel>
|
||||
)}
|
||||
<div className="gf-form-label">
|
||||
<InlineFormLabel width={5.5}>
|
||||
<button type="button" className={buttonStyles} onClick={addFilter}>
|
||||
add filter
|
||||
</button>
|
||||
<button type="button" className={buttonStyles} onClick={changeAddFilterMode}>
|
||||
<Icon name={'times'} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</InlineFormLabel>
|
||||
</Stack>
|
||||
</Stack>
|
||||
)}
|
||||
<div className="gf-form gf-form--grow">
|
||||
<div className="gf-form-label gf-form-label--grow"></div>
|
||||
</div>
|
||||
</div>
|
||||
<Stack gap={0} grow={1}>
|
||||
<InlineLabel> </InlineLabel>
|
||||
</Stack>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@ import debounce from 'debounce-promise';
|
||||
import React from 'react';
|
||||
|
||||
import { SelectableValue, toOption } from '@grafana/data';
|
||||
import { Select, Input, InlineFormLabel, AsyncSelect } from '@grafana/ui';
|
||||
import { Select, Input, InlineFormLabel, AsyncSelect, Stack, InlineLabel } from '@grafana/ui';
|
||||
|
||||
import { OpenTsdbQuery } from '../types';
|
||||
|
||||
@@ -19,8 +19,8 @@ export function MetricSection({ query, onChange, onRunQuery, suggestMetrics, agg
|
||||
const metricSearch = debounce((query: string) => suggestMetrics(query), 350);
|
||||
|
||||
return (
|
||||
<div className="gf-form-inline" data-testid={testIds.section}>
|
||||
<div className="gf-form">
|
||||
<Stack gap={0.5} alignItems="flex-start" data-testid={testIds.section}>
|
||||
<Stack gap={0}>
|
||||
<InlineFormLabel width={8} className="query-keyword">
|
||||
Metric
|
||||
</InlineFormLabel>
|
||||
@@ -28,7 +28,6 @@ export function MetricSection({ query, onChange, onRunQuery, suggestMetrics, agg
|
||||
<AsyncSelect
|
||||
width={25}
|
||||
inputId="opentsdb-metric-select"
|
||||
className="gf-form-input"
|
||||
value={query.metric ? toOption(query.metric) : undefined}
|
||||
placeholder="Metric name"
|
||||
allowCustomValue
|
||||
@@ -41,14 +40,13 @@ export function MetricSection({ query, onChange, onRunQuery, suggestMetrics, agg
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="gf-form">
|
||||
</Stack>
|
||||
<Stack gap={0} alignItems="flex-start">
|
||||
<InlineFormLabel width={'auto'} className="query-keyword">
|
||||
Aggregator
|
||||
</InlineFormLabel>
|
||||
<Select
|
||||
inputId="opentsdb-aggregator-select"
|
||||
className="gf-form-input"
|
||||
value={query.aggregator ? toOption(query.aggregator) : undefined}
|
||||
options={aggregatorOptions}
|
||||
onChange={({ value }) => {
|
||||
@@ -58,8 +56,8 @@ export function MetricSection({ query, onChange, onRunQuery, suggestMetrics, agg
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="gf-form max-width-20">
|
||||
</Stack>
|
||||
<Stack gap={0}>
|
||||
<InlineFormLabel
|
||||
className="query-keyword"
|
||||
width={6}
|
||||
@@ -77,11 +75,11 @@ export function MetricSection({ query, onChange, onRunQuery, suggestMetrics, agg
|
||||
}}
|
||||
onBlur={() => onRunQuery()}
|
||||
/>
|
||||
</div>
|
||||
<div className="gf-form gf-form--grow">
|
||||
<div className="gf-form-label gf-form-label--grow"></div>
|
||||
</div>
|
||||
</div>
|
||||
</Stack>
|
||||
<Stack gap={0} grow={1}>
|
||||
<InlineLabel> </InlineLabel>
|
||||
</Stack>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@ import { css } from '@emotion/css';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
|
||||
import { GrafanaTheme2, QueryEditorProps, textUtil } from '@grafana/data';
|
||||
import { useStyles2 } from '@grafana/ui';
|
||||
import { useStyles2, Stack } from '@grafana/ui';
|
||||
|
||||
import OpenTsDatasource from '../datasource';
|
||||
import { OpenTsdbOptions, OpenTsdbQuery } from '../types';
|
||||
@@ -112,7 +112,7 @@ export function OpenTsdbQueryEditor({
|
||||
|
||||
return (
|
||||
<div className={styles.container} data-testid={testIds.editor}>
|
||||
<div className={styles.visualEditor}>
|
||||
<Stack gap={0.5} direction="column" grow={1}>
|
||||
<MetricSection
|
||||
query={query}
|
||||
onChange={onChange}
|
||||
@@ -147,7 +147,7 @@ export function OpenTsdbQueryEditor({
|
||||
tsdbVersion={tsdbVersion}
|
||||
/>
|
||||
<RateSection query={query} onChange={onChange} onRunQuery={onRunQuery} tsdbVersion={tsdbVersion} />
|
||||
</div>
|
||||
</Stack>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -157,9 +157,6 @@ function getStyles(theme: GrafanaTheme2) {
|
||||
container: css`
|
||||
display: flex;
|
||||
`,
|
||||
visualEditor: css`
|
||||
flex-grow: 1;
|
||||
`,
|
||||
toggleButton: css`
|
||||
margin-left: ${theme.spacing(0.5)};
|
||||
`,
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
|
||||
import { InlineLabel, Input, InlineFormLabel, InlineSwitch } from '@grafana/ui';
|
||||
import { InlineLabel, Input, InlineFormLabel, InlineSwitch, Stack } from '@grafana/ui';
|
||||
|
||||
import { OpenTsdbQuery } from '../types';
|
||||
|
||||
@@ -13,23 +13,22 @@ export interface RateSectionProps {
|
||||
|
||||
export function RateSection({ query, onChange, onRunQuery, tsdbVersion }: RateSectionProps) {
|
||||
return (
|
||||
<div className="gf-form-inline" data-testid={testIds.section}>
|
||||
<div className="gf-form">
|
||||
<InlineFormLabel className="query-keyword" width={8}>
|
||||
Rate
|
||||
</InlineFormLabel>
|
||||
<InlineSwitch
|
||||
data-testid={testIds.shouldComputeRate}
|
||||
value={query.shouldComputeRate ?? false}
|
||||
onChange={() => {
|
||||
const shouldComputeRate = query.shouldComputeRate ?? false;
|
||||
onChange({ ...query, shouldComputeRate: !shouldComputeRate });
|
||||
onRunQuery();
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<Stack gap={0} data-testid={testIds.section}>
|
||||
<InlineFormLabel className="query-keyword" width={8}>
|
||||
Rate
|
||||
</InlineFormLabel>
|
||||
<InlineSwitch
|
||||
data-testid={testIds.shouldComputeRate}
|
||||
value={query.shouldComputeRate ?? false}
|
||||
onChange={() => {
|
||||
const shouldComputeRate = query.shouldComputeRate ?? false;
|
||||
onChange({ ...query, shouldComputeRate: !shouldComputeRate });
|
||||
onRunQuery();
|
||||
}}
|
||||
/>
|
||||
|
||||
{query.shouldComputeRate && (
|
||||
<div className="gf-form">
|
||||
<>
|
||||
<InlineFormLabel className="query-keyword" width={'auto'}>
|
||||
Counter
|
||||
</InlineFormLabel>
|
||||
@@ -42,10 +41,10 @@ export function RateSection({ query, onChange, onRunQuery, tsdbVersion }: RateSe
|
||||
onRunQuery();
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
{query.shouldComputeRate && query.isCounter && (
|
||||
<div className="gf-form">
|
||||
<Stack gap={0}>
|
||||
<InlineLabel width={'auto'} className="query-keyword">
|
||||
Counter max
|
||||
</InlineLabel>
|
||||
@@ -72,10 +71,10 @@ export function RateSection({ query, onChange, onRunQuery, tsdbVersion }: RateSe
|
||||
}}
|
||||
onBlur={() => onRunQuery()}
|
||||
/>
|
||||
</div>
|
||||
</Stack>
|
||||
)}
|
||||
{tsdbVersion > 2 && (
|
||||
<div className="gf-form">
|
||||
<>
|
||||
<InlineFormLabel className="query-keyword" width={'auto'}>
|
||||
Explicit tags
|
||||
</InlineFormLabel>
|
||||
@@ -88,12 +87,12 @@ export function RateSection({ query, onChange, onRunQuery, tsdbVersion }: RateSe
|
||||
onRunQuery();
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
<div className="gf-form gf-form--grow">
|
||||
<div className="gf-form-label gf-form-label--grow"></div>
|
||||
</div>
|
||||
</div>
|
||||
<Stack gap={0} grow={1}>
|
||||
<InlineLabel> </InlineLabel>
|
||||
</Stack>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -3,7 +3,16 @@ import { has, size } from 'lodash';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
import { SelectableValue, toOption } from '@grafana/data';
|
||||
import { Select, InlineFormLabel, Icon, clearButtonStyles, useStyles2, AsyncSelect } from '@grafana/ui';
|
||||
import {
|
||||
Select,
|
||||
InlineFormLabel,
|
||||
Icon,
|
||||
clearButtonStyles,
|
||||
useStyles2,
|
||||
AsyncSelect,
|
||||
Stack,
|
||||
InlineLabel,
|
||||
} from '@grafana/ui';
|
||||
|
||||
import { OpenTsdbQuery } from '../types';
|
||||
|
||||
@@ -97,47 +106,47 @@ export function TagSection({
|
||||
const tagValueSearch = debounce((query: string) => suggestTagValues(query), 350);
|
||||
|
||||
return (
|
||||
<div className="gf-form-inline" data-testid={testIds.section}>
|
||||
<div className="gf-form">
|
||||
<InlineFormLabel
|
||||
className="query-keyword"
|
||||
width={8}
|
||||
tooltip={tsdbVersion >= 2 ? <div>Please use filters, tags are deprecated in opentsdb 2.2</div> : undefined}
|
||||
>
|
||||
Tags
|
||||
</InlineFormLabel>
|
||||
{query.tags &&
|
||||
Object.keys(query.tags).map((tagKey: string | number, idx: number) => {
|
||||
const tagValue = query.tags[tagKey];
|
||||
return (
|
||||
<InlineFormLabel key={idx} width="auto" data-testid={testIds.list + idx}>
|
||||
{tagKey}={tagValue}
|
||||
<button type="button" className={buttonStyles} onClick={() => editTag(tagKey, tagValue)}>
|
||||
<Icon name={'pen'} />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={buttonStyles}
|
||||
onClick={() => removeTag(tagKey)}
|
||||
data-testid={testIds.remove}
|
||||
>
|
||||
<Icon name={'times'} />
|
||||
</button>
|
||||
</InlineFormLabel>
|
||||
);
|
||||
})}
|
||||
{!addTagMode && (
|
||||
<button className="gf-form-label" type="button" onClick={changeAddTagMode} aria-label="Add tag">
|
||||
<Stack gap={0} data-testid={testIds.section}>
|
||||
<InlineFormLabel
|
||||
className="query-keyword"
|
||||
width={8}
|
||||
tooltip={tsdbVersion >= 2 ? <div>Please use filters, tags are deprecated in opentsdb 2.2</div> : undefined}
|
||||
>
|
||||
Tags
|
||||
</InlineFormLabel>
|
||||
{query.tags &&
|
||||
Object.keys(query.tags).map((tagKey: string | number, idx: number) => {
|
||||
const tagValue = query.tags[tagKey];
|
||||
return (
|
||||
<InlineFormLabel key={idx} width="auto" data-testid={testIds.list + idx}>
|
||||
{tagKey}={tagValue}
|
||||
<button type="button" className={buttonStyles} onClick={() => editTag(tagKey, tagValue)}>
|
||||
<Icon name={'pen'} />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={buttonStyles}
|
||||
onClick={() => removeTag(tagKey)}
|
||||
data-testid={testIds.remove}
|
||||
>
|
||||
<Icon name={'times'} />
|
||||
</button>
|
||||
</InlineFormLabel>
|
||||
);
|
||||
})}
|
||||
{!addTagMode && (
|
||||
<InlineFormLabel width={2}>
|
||||
<button type="button" className={buttonStyles} onClick={changeAddTagMode} aria-label="Add tag">
|
||||
<Icon name={'plus'} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</InlineFormLabel>
|
||||
)}
|
||||
|
||||
{addTagMode && (
|
||||
<div className="gf-form-inline">
|
||||
<div className="gf-form">
|
||||
<Stack gap={0.5} alignItems="center">
|
||||
<Stack gap={0}>
|
||||
<Select
|
||||
inputId="opentsdb-suggested-tagk-select"
|
||||
className="gf-form-input"
|
||||
value={curTagKey ? toOption('' + curTagKey) : undefined}
|
||||
placeholder="key"
|
||||
allowCustomValue
|
||||
@@ -156,12 +165,11 @@ export function TagSection({
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</Stack>
|
||||
|
||||
<div className="gf-form">
|
||||
<Stack gap={0}>
|
||||
<AsyncSelect
|
||||
inputId="opentsdb-suggested-tagv-select"
|
||||
className="gf-form-input"
|
||||
value={curTagValue ? toOption(curTagValue) : undefined}
|
||||
placeholder="value"
|
||||
allowCustomValue
|
||||
@@ -173,30 +181,30 @@ export function TagSection({
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</Stack>
|
||||
|
||||
<div className="gf-form">
|
||||
<Stack gap={0}>
|
||||
{errors && (
|
||||
<div className="gf-form-label" title={errors} data-testid={testIds.error}>
|
||||
<InlineLabel title={errors} data-testid={testIds.error}>
|
||||
<Icon name={'exclamation-triangle'} color={'rgb(229, 189, 28)'} />
|
||||
</div>
|
||||
</InlineLabel>
|
||||
)}
|
||||
|
||||
<div className="gf-form-label">
|
||||
<InlineFormLabel width={5.5}>
|
||||
<button type="button" className={buttonStyles} onClick={addTag}>
|
||||
add tag
|
||||
</button>
|
||||
<button type="button" className={buttonStyles} onClick={changeAddTagMode}>
|
||||
<Icon name={'times'} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</InlineFormLabel>
|
||||
</Stack>
|
||||
</Stack>
|
||||
)}
|
||||
<div className="gf-form gf-form--grow">
|
||||
<div className="gf-form-label gf-form-label--grow"></div>
|
||||
</div>
|
||||
</div>
|
||||
<Stack gap={0} grow={1}>
|
||||
<InlineLabel> </InlineLabel>
|
||||
</Stack>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user