From a3071b7797a0261db604a352553c86f5f96c953c Mon Sep 17 00:00:00 2001
From: Sriram <yesoreyeram@gmail.com>
Date: Mon, 6 Jun 2022 11:51:23 +0100
Subject: [PATCH] Expression: Filter query, mixed mode fixes and panel error
 message (#50218)

* implement filterQuery to support query.hide

* Fixed - expression ds name in mixed mode

* Execute expression query on blur

* show actual error message when ds return Query data error
---
 .../src/components/DataSourcePicker.tsx       |  7 +++++++
 .../src/utils/toDataQueryError.ts             |  4 +++-
 .../expressions/ExpressionDatasource.ts       |  7 +++++++
 .../expressions/ExpressionQueryEditor.tsx     |  4 ++--
 .../features/expressions/components/Math.tsx  | 19 ++++++++++++++++---
 5 files changed, 35 insertions(+), 6 deletions(-)

diff --git a/packages/grafana-runtime/src/components/DataSourcePicker.tsx b/packages/grafana-runtime/src/components/DataSourcePicker.tsx
index 16d3ad9b3d4..71b5db4e4a9 100644
--- a/packages/grafana-runtime/src/components/DataSourcePicker.tsx
+++ b/packages/grafana-runtime/src/components/DataSourcePicker.tsx
@@ -14,6 +14,8 @@ import { ActionMeta, HorizontalGroup, PluginSignatureBadge, Select } from '@graf
 
 import { getDataSourceSrv } from '../services/dataSourceSrv';
 
+import { ExpressionDatasourceRef } from './../utils/DataSourceWithBackend';
+
 /**
  * Component props description for the {@link DataSourcePicker}
  *
@@ -117,6 +119,11 @@ export class DataSourcePicker extends PureComponent<DataSourcePickerProps, DataS
     }
 
     const uid = getDataSourceUID(current);
+
+    if (uid === ExpressionDatasourceRef.uid || uid === ExpressionDatasourceRef.name) {
+      return { label: uid, value: uid, hideText: hideTextValue };
+    }
+
     return {
       label: (uid ?? 'no name') + ' - not found',
       value: uid ?? undefined,
diff --git a/packages/grafana-runtime/src/utils/toDataQueryError.ts b/packages/grafana-runtime/src/utils/toDataQueryError.ts
index f616195a472..457709d514d 100644
--- a/packages/grafana-runtime/src/utils/toDataQueryError.ts
+++ b/packages/grafana-runtime/src/utils/toDataQueryError.ts
@@ -17,8 +17,10 @@ export function toDataQueryError(err: DataQueryError | string | Object): DataQue
     let message = 'Query error';
     if (error.message) {
       message = error.message;
-    } else if (error.data && error.data.message) {
+    } else if (error.data && error.data.message && error.data?.message !== 'Query data error') {
       message = error.data.message;
+    } else if (error?.data?.message === 'Query data error' && error?.data?.error) {
+      message = error.data.error;
     } else if (error.data && error.data.error) {
       message = error.data.error;
     } else if (error.status) {
diff --git a/public/app/features/expressions/ExpressionDatasource.ts b/public/app/features/expressions/ExpressionDatasource.ts
index 5376e396377..149310a71be 100644
--- a/public/app/features/expressions/ExpressionDatasource.ts
+++ b/public/app/features/expressions/ExpressionDatasource.ts
@@ -35,6 +35,13 @@ export class ExpressionDatasourceApi extends DataSourceWithBackend<ExpressionQue
     return `Expression: ${query.type}`;
   }
 
+  filterQuery(query: ExpressionQuery) {
+    if (query.hide) {
+      return false;
+    }
+    return true;
+  }
+
   query(request: DataQueryRequest<ExpressionQuery>): Observable<DataQueryResponse> {
     let targets = request.targets.map(async (query: ExpressionQuery): Promise<ExpressionQuery> => {
       const ds = await getDataSourceSrv().get(query.datasource);
diff --git a/public/app/features/expressions/ExpressionQueryEditor.tsx b/public/app/features/expressions/ExpressionQueryEditor.tsx
index d81bc7825a7..618bdf93787 100644
--- a/public/app/features/expressions/ExpressionQueryEditor.tsx
+++ b/public/app/features/expressions/ExpressionQueryEditor.tsx
@@ -21,12 +21,12 @@ export class ExpressionQueryEditor extends PureComponent<Props> {
   };
 
   renderExpressionType() {
-    const { onChange, query, queries } = this.props;
+    const { onChange, onRunQuery, query, queries } = this.props;
     const refIds = queries!.filter((q) => query.refId !== q.refId).map((q) => ({ value: q.refId, label: q.refId }));
 
     switch (query.type) {
       case ExpressionQueryType.math:
-        return <Math onChange={onChange} query={query} labelWidth={labelWidth} />;
+        return <Math onChange={onChange} query={query} labelWidth={labelWidth} onRunQuery={onRunQuery} />;
 
       case ExpressionQueryType.reduce:
         return <Reduce refIds={refIds} onChange={onChange} labelWidth={labelWidth} query={query} />;
diff --git a/public/app/features/expressions/components/Math.tsx b/public/app/features/expressions/components/Math.tsx
index 15cc9d86a56..577ed90356b 100644
--- a/public/app/features/expressions/components/Math.tsx
+++ b/public/app/features/expressions/components/Math.tsx
@@ -12,14 +12,15 @@ interface Props {
   labelWidth: number;
   query: ExpressionQuery;
   onChange: (query: ExpressionQuery) => void;
+  onRunQuery: () => void;
 }
 
 const mathPlaceholder =
   'Math operations on one or more queries. You reference the query by ${refId} ie. $A, $B, $C etc\n' +
   'The sum of two scalar values: $A + $B > 10';
 
-export const Math: FC<Props> = ({ labelWidth, onChange, query }) => {
-  const [showHelp, toggleShowHelp] = useToggle(true);
+export const Math: FC<Props> = ({ labelWidth, onChange, query, onRunQuery }) => {
+  const [showHelp, toggleShowHelp] = useToggle(false);
 
   const onExpressionChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
     onChange({ ...query, expression: event.target.value });
@@ -27,6 +28,12 @@ export const Math: FC<Props> = ({ labelWidth, onChange, query }) => {
 
   const styles = useStyles2((theme) => getStyles(theme, showHelp));
 
+  const executeQuery = () => {
+    if (query.expression) {
+      onRunQuery();
+    }
+  };
+
   return (
     <Stack direction="row">
       <InlineField
@@ -40,7 +47,13 @@ export const Math: FC<Props> = ({ labelWidth, onChange, query }) => {
         `}
       >
         <>
-          <TextArea value={query.expression} onChange={onExpressionChange} rows={5} placeholder={mathPlaceholder} />
+          <TextArea
+            value={query.expression}
+            onChange={onExpressionChange}
+            rows={5}
+            placeholder={mathPlaceholder}
+            onBlur={executeQuery}
+          />
           <Button variant="secondary" size="sm" onClick={toggleShowHelp}>
             {showHelp === false ? 'Show' : 'Hide'} help
           </Button>