mirror of https://github.com/grafana/grafana
Influxdb Datasource: Remove angular dependencies for Influxdb influxql annotations (#52546)
* migrate influxQL annotations to react and build new annotation editor * use es-lint ignore for any type in migration * changes for PR comments * handle annotation editor on load error without query * correct label for ann editor query * add null coalesce operator and remove comment * fix tooltippull/53851/head
Brendan O'Handley
3 years ago
committed by
GitHub
parent
2fef8e6f2c
commit
085258c035
@ -0,0 +1,83 @@ |
||||
import React, { useState } from 'react'; |
||||
|
||||
import { QueryEditorProps } from '@grafana/data'; |
||||
import { InlineFormLabel, Input } from '@grafana/ui'; |
||||
|
||||
import { InfluxQuery, InfluxOptions } from '../types'; |
||||
|
||||
import InfluxDatasource from './../datasource'; |
||||
|
||||
export const AnnotationEditor = (props: QueryEditorProps<InfluxDatasource, InfluxQuery, InfluxOptions>) => { |
||||
const { query, onChange } = props; |
||||
const [eventQuery, setEventQuery] = useState<string>(query.query ?? ''); |
||||
|
||||
const [textColumn, setTextColumn] = useState<string>(query.textColumn ?? ''); |
||||
const [tagsColumn, setTagsColumn] = useState<string>(query.tagsColumn ?? ''); |
||||
const [timeEndColumn, setTimeEndColumn] = useState<string>(query?.timeEndColumn ?? ''); |
||||
const [titleColumn] = useState<string>(query?.titleColumn ?? ''); |
||||
const updateValue = <K extends keyof InfluxQuery, V extends InfluxQuery[K]>(key: K, val: V) => { |
||||
onChange({ |
||||
...query, |
||||
[key]: val, |
||||
fromAnnotations: true, |
||||
textEditor: true, |
||||
}); |
||||
}; |
||||
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"> |
||||
<InlineFormLabel width={12}>Text</InlineFormLabel> |
||||
<Input |
||||
value={textColumn} |
||||
onChange={(e) => setTextColumn(e.currentTarget.value ?? '')} |
||||
onBlur={() => updateValue('textColumn', textColumn)} |
||||
/> |
||||
</div> |
||||
<div className="gf-form"> |
||||
<InlineFormLabel width={12}>Tags</InlineFormLabel> |
||||
<Input |
||||
value={tagsColumn} |
||||
onChange={(e) => setTagsColumn(e.currentTarget.value ?? '')} |
||||
onBlur={() => updateValue('tagsColumn', tagsColumn)} |
||||
/> |
||||
</div> |
||||
<div className="gf-form"> |
||||
<InlineFormLabel width={12}>TimeEnd</InlineFormLabel> |
||||
<Input |
||||
value={timeEndColumn} |
||||
onChange={(e) => setTimeEndColumn(e.currentTarget.value ?? '')} |
||||
onBlur={() => updateValue('timeEndColumn', timeEndColumn)} |
||||
/> |
||||
</div> |
||||
<div className="gf-form ng-hide"> |
||||
<InlineFormLabel width={12}>Title</InlineFormLabel> |
||||
<Input defaultValue={titleColumn} /> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
); |
||||
}; |
||||
@ -0,0 +1,31 @@ |
||||
type LegacyAnnotation = { |
||||
query?: string; |
||||
queryType?: string; |
||||
fromAnnotations?: boolean; |
||||
tagsColumn?: string; |
||||
textColumn?: string; |
||||
timeEndColumn?: string; |
||||
titleColumn?: string; |
||||
name?: string; |
||||
}; |
||||
|
||||
// this becomes the target in the migrated annotations
|
||||
const migrateLegacyAnnotation = (json: LegacyAnnotation) => { |
||||
return { |
||||
query: json.query ?? '', |
||||
queryType: 'tags', |
||||
fromAnnotations: true, |
||||
tagsColumn: json.tagsColumn ?? '', |
||||
textColumn: json.textColumn ?? '', |
||||
timeEndColumn: json.timeEndColumn ?? '', |
||||
titleColumn: json.titleColumn ?? '', |
||||
name: json.name ?? '', |
||||
}; |
||||
}; |
||||
|
||||
// eslint-ignore-next-line
|
||||
export const prepareAnnotation = (json: any) => { |
||||
json.target = json.target ?? migrateLegacyAnnotation(json); |
||||
|
||||
return json; |
||||
}; |
||||
@ -1,28 +0,0 @@ |
||||
|
||||
<div class="gf-form-group"> |
||||
<div class="gf-form"> |
||||
<input type="text" class="gf-form-input" ng-model='ctrl.annotation.query' placeholder="select text from events where $timeFilter limit 1000"></input> |
||||
</div> |
||||
</div> |
||||
|
||||
<h5 class="section-heading">Field mappings <tip>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.</tip></h5> |
||||
<div class="gf-form-group"> |
||||
<div class="gf-form-inline"> |
||||
<div class="gf-form"> |
||||
<span class="gf-form-label width-4">Text</span> |
||||
<input type="text" class="gf-form-input max-width-10" ng-model='ctrl.annotation.textColumn' placeholder=""></input> |
||||
</div> |
||||
<div class="gf-form"> |
||||
<span class="gf-form-label width-4">Tags</span> |
||||
<input type="text" class="gf-form-input max-width-10" ng-model='ctrl.annotation.tagsColumn' placeholder=""></input> |
||||
</div> |
||||
<div class="gf-form"> |
||||
<span class="gf-form-label width-4">TimeEnd</span> |
||||
<input type="text" class="gf-form-input max-width-10" ng-model='ctrl.annotation.timeEndColumn' placeholder=""></input> |
||||
</div> |
||||
<div class="gf-form" ng-show="ctrl.annotation.titleColumn"> |
||||
<span class="gf-form-label width-4">Title <em class="muted">(deprecated)</em></span> |
||||
<input type="text" class="gf-form-input max-width-10" ng-model='ctrl.annotation.titleColumn' placeholder=""></input> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
Loading…
Reference in new issue