mirror of https://github.com/grafana/grafana
InfluxDB: different config UI for 1x vs 2x (#25723)
Ryan McKinley
6 years ago
committed by
GitHub
parent
0797fe88a1
commit
8d1ed33e20
@ -0,0 +1,142 @@ |
|||||||
|
import React, { Component } from 'react'; |
||||||
|
import coreModule from 'app/core/core_module'; |
||||||
|
import { InfluxQuery } from '../types'; |
||||||
|
import { SelectableValue } from '@grafana/data'; |
||||||
|
import { InlineFormLabel, LinkButton, Select, TextArea } from '@grafana/ui'; |
||||||
|
|
||||||
|
interface Props { |
||||||
|
target: InfluxQuery; |
||||||
|
change: (target: InfluxQuery) => void; |
||||||
|
refresh: () => void; |
||||||
|
} |
||||||
|
|
||||||
|
const samples: Array<SelectableValue<string>> = [ |
||||||
|
{ label: 'Show buckets', description: 'List the avaliable buckets (table)', value: 'buckets()' }, |
||||||
|
{ |
||||||
|
label: 'Simple query', |
||||||
|
description: 'filter by measurment and field', |
||||||
|
value: `from(bucket: "db/rp")
|
||||||
|
|> range(start: v.timeRangeStart, stop:timeRangeStop) |
||||||
|
|> filter(fn: (r) => |
||||||
|
r._measurement == "example-measurement" and |
||||||
|
r._field == "example-field" |
||||||
|
)`,
|
||||||
|
}, |
||||||
|
{ |
||||||
|
label: 'Grouped Query', |
||||||
|
description: 'Group by (min/max/sum/median)', |
||||||
|
value: `// v.windowPeriod is a variable referring to the current optimized window period (currently: $interval)
|
||||||
|
from(bucket: v.bucket) |
||||||
|
|> range(start: v.timeRangeStart, stop: v.timeRangeStop) |
||||||
|
|> filter(fn: (r) => r["_measurement"] == "measurement1" or r["_measurement"] =~ /^.*?regex.*$/) |
||||||
|
|> filter(fn: (r) => r["_field"] == "field2" or r["_field"] =~ /^.*?regex.*$/) |
||||||
|
|> aggregateWindow(every: v.windowPeriod, fn: mean|median|max|count|derivative|sum) |
||||||
|
|> yield(name: "some-name")`,
|
||||||
|
}, |
||||||
|
{ |
||||||
|
label: 'Filter by value', |
||||||
|
description: 'Results between a min/max', |
||||||
|
value: `// v.bucket, v.timeRangeStart, and v.timeRange stop are all variables supported by the flux plugin and influxdb
|
||||||
|
from(bucket: v.bucket) |
||||||
|
|> range(start: v.timeRangeStart, stop: v.timeRangeStop) |
||||||
|
|> filter(fn: (r) => r["_value"] >= 10 and r["_value"] <= 20)`,
|
||||||
|
}, |
||||||
|
{ |
||||||
|
label: 'Schema Exploration: (measurements)', |
||||||
|
description: 'Get a list of measurement using flux', |
||||||
|
value: `import "influxdata/influxdb/v1"
|
||||||
|
v1.measurements(bucket: v.bucket)`,
|
||||||
|
}, |
||||||
|
{ |
||||||
|
label: 'Schema Exploration: (fields)', |
||||||
|
description: 'Return every possible key in a single table', |
||||||
|
value: `from(bucket: v.bucket)
|
||||||
|
|> range(start: -30m) |
||||||
|
|> keys() |
||||||
|
|> keep(columns: ["_value"]) |
||||||
|
|> group() |
||||||
|
|> distinct()`,
|
||||||
|
}, |
||||||
|
{ |
||||||
|
label: 'Schema Exploration: (tag keys)', |
||||||
|
description: 'Get a list of tag keys using flux', |
||||||
|
value: `import "influxdata/influxdb/v1"
|
||||||
|
v1.tagKeys(bucket: v.bucket)`,
|
||||||
|
}, |
||||||
|
{ |
||||||
|
label: 'Schema Exploration: (tag values)', |
||||||
|
description: 'Get a list of tag values using flux', |
||||||
|
value: `import "influxdata/influxdb/v1"
|
||||||
|
v1.tagValues( |
||||||
|
bucket: v.bucket, |
||||||
|
tag: "host", |
||||||
|
predicate: (r) => true, |
||||||
|
start: -1d |
||||||
|
)`,
|
||||||
|
}, |
||||||
|
]; |
||||||
|
|
||||||
|
export class FluxQueryEditor extends Component<Props> { |
||||||
|
onFluxQueryChange = (e: any) => { |
||||||
|
const { target, change } = this.props; |
||||||
|
change({ ...target, query: e.currentTarget.value }); |
||||||
|
}; |
||||||
|
|
||||||
|
onFluxBlur = (e: any) => { |
||||||
|
this.props.refresh(); |
||||||
|
}; |
||||||
|
|
||||||
|
onSampleChange = (val: SelectableValue<string>) => { |
||||||
|
this.props.change({ |
||||||
|
...this.props.target, |
||||||
|
query: val.value!, |
||||||
|
}); |
||||||
|
|
||||||
|
// Angular HACK: Since the target does not actually change!
|
||||||
|
this.forceUpdate(); |
||||||
|
this.props.refresh(); |
||||||
|
}; |
||||||
|
|
||||||
|
render() { |
||||||
|
const { target } = this.props; |
||||||
|
return ( |
||||||
|
<> |
||||||
|
<div className="gf-form"> |
||||||
|
<TextArea |
||||||
|
value={target.query || ''} |
||||||
|
onChange={this.onFluxQueryChange} |
||||||
|
onBlur={this.onFluxBlur} |
||||||
|
placeholder="Flux query" |
||||||
|
rows={10} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
<div className="gf-form-inline"> |
||||||
|
<div className="gf-form"> |
||||||
|
<InlineFormLabel width={6} tooltip="This supports queries copied from chronograph"> |
||||||
|
Help |
||||||
|
</InlineFormLabel> |
||||||
|
<Select width={20} options={samples} placeholder="Sample Query" onChange={this.onSampleChange} /> |
||||||
|
<LinkButton |
||||||
|
icon="external-link-alt" |
||||||
|
variant="secondary" |
||||||
|
target="blank" |
||||||
|
href="https://docs.influxdata.com/flux/latest/introduction/getting-started/" |
||||||
|
> |
||||||
|
Flux docs |
||||||
|
</LinkButton> |
||||||
|
</div> |
||||||
|
<div className="gf-form gf-form--grow"> |
||||||
|
<div className="gf-form-label gf-form-label--grow"></div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</> |
||||||
|
); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
coreModule.directive('fluxQueryEditor', [ |
||||||
|
'reactDirective', |
||||||
|
(reactDirective: any) => { |
||||||
|
return reactDirective(FluxQueryEditor, ['target', 'change']); |
||||||
|
}, |
||||||
|
]); |
||||||
Loading…
Reference in new issue