IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2026-07-30 00:08:10 -05:00
Code Issues Packages Projects Releases Wiki Activity

Chore: Remove gf-form from InfluxDB Annotation Query Editor (#84809)

Browse Source 
Chore: Remove gf-form from Annotation Query Editor - Influx DB
This commit is contained in:
Khushi Jain
2024-03-23 00:52:40 +01:00
committed by GitHub
parent 0c3c5c5607
commit 076dd53a40
2 changed files with 37 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.betterer.results
-7
View File
@@ -6602,13 +6602,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/influxdb/components/editor/annotation/AnnotationEditor.tsx:5381": [ "public/app/plugins/datasource/influxdb/components/editor/annotation/AnnotationEditor.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/influxdb/components/editor/query/QueryEditor.tsx:5381": [ "public/app/plugins/datasource/influxdb/components/editor/query/QueryEditor.tsx:5381": [
public/app/plugins/datasource/influxdb/components/editor/annotation/AnnotationEditor.tsx
+37 -34
View File
@@ -1,7 +1,7 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { QueryEditorProps } from '@grafana/data/src'; import { QueryEditorProps } from '@grafana/data/src';
import { InlineFormLabel, Input } from '@grafana/ui/src'; import { InlineFormLabel, Input, Stack } from '@grafana/ui/src';
import InfluxDatasource from '../../../datasource'; import InfluxDatasource from '../../../datasource';
import { InfluxOptions, InfluxQuery } from '../../../types'; import { InfluxOptions, InfluxQuery } from '../../../types';
@@ -24,60 +24,63 @@ export const AnnotationEditor = (props: QueryEditorProps<InfluxDatasource, Influ
}); });
}; };
return ( return (
<div className="gf-form-group"> <Stack gap={5} direction="column">
<div className="gf-form"> <Stack gap={0.5} direction="column">
<InlineFormLabel width={12}>InfluxQL Query</InlineFormLabel> <Stack gap={0}>
<Input <InlineFormLabel width={12}>InfluxQL Query</InlineFormLabel>
value={eventQuery} <Input
onChange={(e) => setEventQuery(e.currentTarget.value ?? '')} value={eventQuery}
onBlur={() => updateValue('query', eventQuery)} onChange={(e) => setEventQuery(e.currentTarget.value ?? '')}
placeholder="select text from events where $timeFilter limit 1000" onBlur={() => updateValue('query', eventQuery)}
/> placeholder="select text from events where $timeFilter limit 1000"
</div> />
<InlineFormLabel </Stack>
width={12} <InlineFormLabel
tooltip={ width={12}
<div> tooltip={
If your influxdb query returns more than one field you need to specify the column names below. An annotation <div>
event is composed of a title, tags, and an additional text field. Optionally you can map the timeEnd column If your influxdb query returns more than one field you need to specify the column names below. An
for region annotation usage. annotation event is composed of a title, tags, and an additional text field. Optionally you can map the
</div> timeEnd column for region annotation usage.
} </div>
> }
Field mappings >
</InlineFormLabel> Field mappings
<div className="gf-form-group"> </InlineFormLabel>
<div className="gf-form-inline"> <Stack gap={0.5} alignItems={'flex-start'} wrap={'wrap'}>
<div className="gf-form"> <Stack gap={0}>
<InlineFormLabel width={12}>Text</InlineFormLabel> <InlineFormLabel width={12}>Text</InlineFormLabel>
<Input <Input
value={textColumn} value={textColumn}
onChange={(e) => setTextColumn(e.currentTarget.value ?? '')} onChange={(e) => setTextColumn(e.currentTarget.value ?? '')}
onBlur={() => updateValue('textColumn', textColumn)} onBlur={() => updateValue('textColumn', textColumn)}
/> />
</div> </Stack>
<div className="gf-form"> <Stack gap={0}>
<InlineFormLabel width={12}>Tags</InlineFormLabel> <InlineFormLabel width={12}>Tags</InlineFormLabel>
<Input <Input
value={tagsColumn} value={tagsColumn}
onChange={(e) => setTagsColumn(e.currentTarget.value ?? '')} onChange={(e) => setTagsColumn(e.currentTarget.value ?? '')}
onBlur={() => updateValue('tagsColumn', tagsColumn)} onBlur={() => updateValue('tagsColumn', tagsColumn)}
/> />
</div> </Stack>
<div className="gf-form">
<Stack gap={0}>
<InlineFormLabel width={12}>TimeEnd</InlineFormLabel> <InlineFormLabel width={12}>TimeEnd</InlineFormLabel>
<Input <Input
value={timeEndColumn} value={timeEndColumn}
onChange={(e) => setTimeEndColumn(e.currentTarget.value ?? '')} onChange={(e) => setTimeEndColumn(e.currentTarget.value ?? '')}
onBlur={() => updateValue('timeEndColumn', timeEndColumn)} onBlur={() => updateValue('timeEndColumn', timeEndColumn)}
/> />
</div> </Stack>
<div className="gf-form ng-hide"> <div className="gf-form ng-hide">
<InlineFormLabel width={12}>Title</InlineFormLabel> <InlineFormLabel width={12}>Title</InlineFormLabel>
<Input defaultValue={titleColumn} /> <Input defaultValue={titleColumn} />
</div> </div>
</div> </Stack>
</div> </Stack>
</div> {/*Empty div to preserve the bottom margin */}
<div />
</Stack>
); );
}; };