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']); |
||||
}, |
||||
]); |
||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in new issue