IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-15 01:53:33 -06: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 05:22:40 +05:30 committed by GitHub
parent 0c3c5c5607
commit 076dd53a40
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 37 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
.betterer.results
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"]
],
"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"]
],
"public/app/plugins/datasource/influxdb/components/editor/query/QueryEditor.tsx:5381": [

71
public/app/plugins/datasource/influxdb/components/editor/annotation/AnnotationEditor.tsx
View File

@ -1,7 +1,7 @@
import React, { useState } from 'react';
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 { InfluxOptions, InfluxQuery } from '../../../types';
@ -24,60 +24,63 @@ export const AnnotationEditor = (props: QueryEditorProps<InfluxDatasource, Influ
});
};
return (
<div className="gf-form-group">
<div className="gf-form">
<InlineFormLabel width={12}>InfluxQL Query</InlineFormLabel>
<Input
value={eventQuery}
onChange={(e) => setEventQuery(e.currentTarget.value ?? '')}
onBlur={() => updateValue('query', eventQuery)}
placeholder="select text from events where $timeFilter limit 1000"
/>
</div>
<InlineFormLabel
width={12}
tooltip={
<div>
If your influxdb query returns more than one field you need to specify the column names below. An annotation
event is composed of a title, tags, and an additional text field. Optionally you can map the timeEnd column
for region annotation usage.
</div>
}
>
Field mappings
</InlineFormLabel>
<div className="gf-form-group">
<div className="gf-form-inline">
<div className="gf-form">
<Stack gap={5} direction="column">
<Stack gap={0.5} direction="column">
<Stack gap={0}>
<InlineFormLabel width={12}>InfluxQL Query</InlineFormLabel>
<Input
value={eventQuery}
onChange={(e) => setEventQuery(e.currentTarget.value ?? '')}
onBlur={() => updateValue('query', eventQuery)}
placeholder="select text from events where $timeFilter limit 1000"
/>
</Stack>
<InlineFormLabel
width={12}
tooltip={
<div>
If your influxdb query returns more than one field you need to specify the column names below. An
annotation event is composed of a title, tags, and an additional text field. Optionally you can map the
timeEnd column for region annotation usage.
</div>
}
>
Field mappings
</InlineFormLabel>
<Stack gap={0.5} alignItems={'flex-start'} wrap={'wrap'}>
<Stack gap={0}>
<InlineFormLabel width={12}>Text</InlineFormLabel>
<Input
value={textColumn}
onChange={(e) => setTextColumn(e.currentTarget.value ?? '')}
onBlur={() => updateValue('textColumn', textColumn)}
/>
</div>
<div className="gf-form">
</Stack>
<Stack gap={0}>
<InlineFormLabel width={12}>Tags</InlineFormLabel>
<Input
value={tagsColumn}
onChange={(e) => setTagsColumn(e.currentTarget.value ?? '')}
onBlur={() => updateValue('tagsColumn', tagsColumn)}
/>
</div>
<div className="gf-form">
</Stack>
<Stack gap={0}>
<InlineFormLabel width={12}>TimeEnd</InlineFormLabel>
<Input
value={timeEndColumn}
onChange={(e) => setTimeEndColumn(e.currentTarget.value ?? '')}
onBlur={() => updateValue('timeEndColumn', timeEndColumn)}
/>
</div>
</Stack>
<div className="gf-form ng-hide">
<InlineFormLabel width={12}>Title</InlineFormLabel>
<Input defaultValue={titleColumn} />
</div>
</div>
</div>
</div>
</Stack>
</Stack>
{/*Empty div to preserve the bottom margin */}
<div />
</Stack>
);
};