IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-20 11:48:34 -06: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
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 57 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
public/app/features/expressions/ExpressionQueryEditor.tsx
View File

@ -1,5 +1,6 @@
// Libraries
import React, { PureComponent, ChangeEvent } from 'react';
import { css } from 'emotion';
import { InlineField, InlineFieldRow, Input, Select, TextArea } from '@grafana/ui';
import { SelectableValue, ReducerID, QueryEditorProps } from '@grafana/data';
@ -39,6 +40,11 @@ const upsamplingTypes: Array<SelectableValue<string>> = [
{ 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> {
state = {};
@ -123,42 +129,73 @@ export class ExpressionQueryEditor extends PureComponent<Props, State> {
const reducer = reducerTypes.find(o => o.value === query.reducer);
const downsampler = downsamplingTypes.find(o => o.value === query.downsampler);
const upsampler = upsamplingTypes.find(o => o.value === query.upsampler);
const labelWidth = 14;
return (
<div>
<InlineField label="Operation">
<InlineField label="Operation" labelWidth={labelWidth}>
<Select options={gelTypes} value={selected} onChange={this.onSelectGELType} width={25} />
</InlineField>
{query.type === GELQueryType.math && (
<InlineField label="Expression">
<TextArea value={query.expression} onChange={this.onExpressionChange} rows={2} />
<InlineField
label="Expression"
labelWidth={labelWidth}
className={css`
align-items: baseline;
`}
>
<TextArea
value={query.expression}
onChange={this.onExpressionChange}
rows={4}
placeholder={mathPlaceholder}
/>
</InlineField>
)}
{query.type === GELQueryType.reduce && (
<InlineFieldRow>
<InlineField label="Function">
<InlineField label="Function" labelWidth={labelWidth}>
<Select options={reducerTypes} value={reducer} onChange={this.onSelectReducer} width={25} />
</InlineField>
<InlineField label="Input">
<Input onChange={this.onExpressionChange} value={query.expression} width={25} />
<InlineField label="Query" labelWidth={labelWidth}>
<Input
onChange={this.onExpressionChange}
value={query.expression}
width={30}
placeholder="Choose query by refId (eg. $A or A)"
/>
</InlineField>
</InlineFieldRow>
)}
{query.type === GELQueryType.resample && (
<InlineFieldRow>
<InlineField label="Input">
<Input onChange={this.onExpressionChange} value={query.expression} width={25} />
</InlineField>
<InlineField label="Window">
<Input onChange={this.onWindowChange} value={query.window} width={25} />
</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>
<>
<InlineFieldRow>
<InlineField label="Query" labelWidth={labelWidth}>
<Input
onChange={this.onExpressionChange}
value={query.expression}
width={30}
placeholder="Choose query by refId (eg. $A or A)"
/>
</InlineField>
</InlineFieldRow>
<InlineFieldRow>
<InlineField label="Resample to" labelWidth={labelWidth} tooltip="10s, 1m, 30m, 1h">
<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>
);