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

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,

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) {

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);

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} />;

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>