Expressions: Replace query input fields with select. (#29816)

* simple-select

* made the select slighttly wider

packages/grafana-data/src/types/datasource.ts

@@ -339,6 +339,7 @@ export interface QueryEditorProps<
   range?: TimeRange;
   range?: TimeRange;
   exploreId?: any;
   exploreId?: any;
   history?: HistoryItem[];
   history?: HistoryItem[];
+  queries?: DataQuery[];
 }
 }
 
 
 // TODO: not really needed but used as type in some data sources and in DataQueryRequest
 // TODO: not really needed but used as type in some data sources and in DataQueryRequest

public/app/features/expressions/ExpressionQueryEditor.tsx

@@ -107,6 +107,14 @@ export class ExpressionQueryEditor extends PureComponent<Props, State> {
     });
     });
   };
   };
 
 
+  onRefIdChange = (value: SelectableValue<string>) => {
+    const { query, onChange } = this.props;
+    onChange({
+      ...query,
+      expression: value.value,
+    });
+  };
+
   onExpressionChange = (evt: ChangeEvent<any>) => {
   onExpressionChange = (evt: ChangeEvent<any>) => {
     const { query, onChange } = this.props;
     const { query, onChange } = this.props;
     onChange({
     onChange({
@@ -124,13 +132,15 @@ export class ExpressionQueryEditor extends PureComponent<Props, State> {
   };
   };
 
 
   render() {
   render() {
-    const { query } = this.props;
+    const { query, queries } = this.props;
     const selected = gelTypes.find(o => o.value === query.type);
     const selected = gelTypes.find(o => o.value === query.type);
     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;
     const labelWidth = 14;
 
 
+    const refIds = queries!.filter(q => query.refId !== q.refId).map(q => ({ value: q.refId, label: q.refId }));
+
     return (
     return (
       <div>
       <div>
         <InlineField label="Operation" labelWidth={labelWidth}>
         <InlineField label="Operation" labelWidth={labelWidth}>
@@ -157,26 +167,16 @@ export class ExpressionQueryEditor extends PureComponent<Props, State> {
             <InlineField label="Function" labelWidth={labelWidth}>
             <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="Query" labelWidth={labelWidth}>
-              <Input
-                onChange={this.onExpressionChange}
-                value={query.expression}
-                width={30}
-                placeholder="Choose query by refId (eg. $A or A)"
-              />
+            <InlineField label="Input" labelWidth={labelWidth}>
+              <Select onChange={this.onRefIdChange} options={refIds} value={query.expression} width={20} />
             </InlineField>
             </InlineField>
           </InlineFieldRow>
           </InlineFieldRow>
         )}
         )}
         {query.type === GELQueryType.resample && (
         {query.type === GELQueryType.resample && (
           <>
           <>
             <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 label="Input" labelWidth={labelWidth}>
+                <Select onChange={this.onRefIdChange} options={refIds} value={query.expression} width={20} />
               </InlineField>
               </InlineField>
             </InlineFieldRow>
             </InlineFieldRow>
             <InlineFieldRow>
             <InlineFieldRow>

public/app/features/query/components/QueryEditorRow.tsx

@@ -28,6 +28,7 @@ import { PanelModel } from 'app/features/dashboard/state';
 interface Props {
 interface Props {
   data: PanelData;
   data: PanelData;
   query: DataQuery;
   query: DataQuery;
+  queries: DataQuery[];
   dsSettings: DataSourceInstanceSettings;
   dsSettings: DataSourceInstanceSettings;
   id: string;
   id: string;
   index: number;
   index: number;
@@ -171,7 +172,7 @@ export class QueryEditorRow extends PureComponent<Props, State> {
   };
   };
 
 
   renderPluginEditor = () => {
   renderPluginEditor = () => {
-    const { query, onChange } = this.props;
+    const { query, onChange, queries } = this.props;
     const { datasource, data } = this.state;
     const { datasource, data } = this.state;
 
 
     if (datasource?.components?.QueryCtrl) {
     if (datasource?.components?.QueryCtrl) {
@@ -190,6 +191,7 @@ export class QueryEditorRow extends PureComponent<Props, State> {
           onRunQuery={this.onRunQuery}
           onRunQuery={this.onRunQuery}
           data={data}
           data={data}
           range={getTimeSrv().timeRange()}
           range={getTimeSrv().timeRange()}
+          queries={queries}
         />
         />
       );
       );
     }
     }

public/app/features/query/components/QueryEditorRows.tsx

@@ -87,6 +87,7 @@ export class QueryEditorRows extends PureComponent<Props> {
                     onRemoveQuery={this.onRemoveQuery}
                     onRemoveQuery={this.onRemoveQuery}
                     onAddQuery={this.props.onAddQuery}
                     onAddQuery={this.props.onAddQuery}
                     onRunQuery={this.props.onRunQueries}
                     onRunQuery={this.props.onRunQueries}
+                    queries={queries}
                   />
                   />
                 ))}
                 ))}
                 {provided.placeholder}
                 {provided.placeholder}