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

Expressions: Add placeholders to hint on input (#29773)

Browse Source 
* math placeholder

* resample changes
This commit is contained in:
Peter Holmberg
2020-12-11 15:19:24 +01:00
committed by GitHub
parent 6118ab415d
commit edbde6c06b
1 changed files with 57 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/app/features/expressions/ExpressionQueryEditor.tsx
+57 -20
View File
@@ -1,5 +1,6 @@
// Libraries // Libraries
import React, { PureComponent, ChangeEvent } from 'react'; import React, { PureComponent, ChangeEvent } from 'react';
import { css } from 'emotion';
import { InlineField, InlineFieldRow, Input, Select, TextArea } from '@grafana/ui'; import { InlineField, InlineFieldRow, Input, Select, TextArea } from '@grafana/ui';
import { SelectableValue, ReducerID, QueryEditorProps } from '@grafana/data'; import { SelectableValue, ReducerID, QueryEditorProps } from '@grafana/data';
@@ -39,6 +40,11 @@ const upsamplingTypes: Array<SelectableValue<string>> = [
{ value: 'fillna', label: 'fillna', description: 'Fill with NaNs' }, { value: 'fillna', label: 'fillna', description: 'Fill with NaNs' },
]; ];
const mathPlaceholder =
'Math operations on one more queries, you reference the query by ${refId} ie. $A, $B, $C etc\n' +
'Example: $A + $B\n' +
'Available functions: abs(), log(), nan(), inf(), null()';
export class ExpressionQueryEditor extends PureComponent<Props, State> { export class ExpressionQueryEditor extends PureComponent<Props, State> {
state = {}; state = {};
@@ -123,42 +129,73 @@ export class ExpressionQueryEditor extends PureComponent<Props, State> {
const reducer = reducerTypes.find(o => o.value === query.reducer); const reducer = reducerTypes.find(o => o.value === query.reducer);
const downsampler = downsamplingTypes.find(o => o.value === query.downsampler); const downsampler = downsamplingTypes.find(o => o.value === query.downsampler);
const upsampler = upsamplingTypes.find(o => o.value === query.upsampler); const upsampler = upsamplingTypes.find(o => o.value === query.upsampler);
const labelWidth = 14;
return ( return (
<div> <div>
<InlineField label="Operation"> <InlineField label="Operation" labelWidth={labelWidth}>
<Select options={gelTypes} value={selected} onChange={this.onSelectGELType} width={25} /> <Select options={gelTypes} value={selected} onChange={this.onSelectGELType} width={25} />
</InlineField> </InlineField>
{query.type === GELQueryType.math && ( {query.type === GELQueryType.math && (
<InlineField label="Expression"> <InlineField
<TextArea value={query.expression} onChange={this.onExpressionChange} rows={2} /> label="Expression"
labelWidth={labelWidth}
className={css`
align-items: baseline;
`}
>
<TextArea
value={query.expression}
onChange={this.onExpressionChange}
rows={4}
placeholder={mathPlaceholder}
/>
</InlineField> </InlineField>
)} )}
{query.type === GELQueryType.reduce && ( {query.type === GELQueryType.reduce && (
<InlineFieldRow> <InlineFieldRow>
<InlineField label="Function"> <InlineField label="Function" labelWidth={labelWidth}>
<Select options={reducerTypes} value={reducer} onChange={this.onSelectReducer} width={25} /> <Select options={reducerTypes} value={reducer} onChange={this.onSelectReducer} width={25} />
</InlineField> </InlineField>
<InlineField label="Input"> <InlineField label="Query" labelWidth={labelWidth}>
<Input onChange={this.onExpressionChange} value={query.expression} width={25} /> <Input
onChange={this.onExpressionChange}
value={query.expression}
width={30}
placeholder="Choose query by refId (eg. $A or A)"
/>
</InlineField> </InlineField>
</InlineFieldRow> </InlineFieldRow>
)} )}
{query.type === GELQueryType.resample && ( {query.type === GELQueryType.resample && (
<InlineFieldRow> <>
<InlineField label="Input"> <InlineFieldRow>
<Input onChange={this.onExpressionChange} value={query.expression} width={25} /> <InlineField label="Query" labelWidth={labelWidth}>
</InlineField> <Input
<InlineField label="Window"> onChange={this.onExpressionChange}
<Input onChange={this.onWindowChange} value={query.window} width={25} /> value={query.expression}
</InlineField> width={30}
<InlineField label="Downsample"> placeholder="Choose query by refId (eg. $A or A)"
<Select options={downsamplingTypes} value={downsampler} onChange={this.onSelectDownsampler} width={25} /> />
</InlineField> </InlineField>
<InlineField label="Upsample"> </InlineFieldRow>
<Select options={upsamplingTypes} value={upsampler} onChange={this.onSelectUpsampler} width={25} /> <InlineFieldRow>
</InlineField> <InlineField label="Resample to" labelWidth={labelWidth} tooltip="10s, 1m, 30m, 1h">
</InlineFieldRow> <Input onChange={this.onWindowChange} value={query.window} width={15} />
</InlineField>
<InlineField label="Downsample">
<Select
options={downsamplingTypes}
value={downsampler}
onChange={this.onSelectDownsampler}
width={25}
/>
</InlineField>
<InlineField label="Upsample">
<Select options={upsamplingTypes} value={upsampler} onChange={this.onSelectUpsampler} width={25} />
</InlineField>
</InlineFieldRow>
</>
)} )}
</div> </div>
); );