From edbde6c06b25b6f1986eb4c3e4e89beeaaebc104 Mon Sep 17 00:00:00 2001
From: Peter Holmberg <peterholmberg@users.noreply.github.com>
Date: Fri, 11 Dec 2020 15:19:24 +0100
Subject: [PATCH] Expressions: Add placeholders to hint on input (#29773)

* math placeholder

* resample changes
---
 .../expressions/ExpressionQueryEditor.tsx     | 77 ++++++++++++++-----
 1 file changed, 57 insertions(+), 20 deletions(-)

diff --git a/public/app/features/expressions/ExpressionQueryEditor.tsx b/public/app/features/expressions/ExpressionQueryEditor.tsx
index 19fcbec4b2b..c3281d0598e 100644
--- a/public/app/features/expressions/ExpressionQueryEditor.tsx
+++ b/public/app/features/expressions/ExpressionQueryEditor.tsx
@@ -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>
     );