Dashboard Datasource: Update Query List & Improve UX (#64429)

* Update query display

* Remove links as they don't work

* Remove unused CSS

* Improve styling and add description for data field

* Update docs

* Fix up docs some more

* Move special data sources back to the bottom

* Add language back

* Change order of special datasrouces in docs

docs/sources/datasources/_index.md

@@ -54,9 +54,21 @@ For example, this video demonstrates the visual Prometheus query builder:
 
 For general information about querying in Grafana, and common options and user interface elements across all query editors, refer to [Query and transform data]({{< relref "../panels-visualizations/query-transform-data/" >}}).
 
+## Special data sources
+
+Grafana includes three special data sources:
+
+- **Grafana:** A built-in data source that generates random walk data and can poll the [Testdata]({{< relref "./testdata/" >}}) data source. Additionally, it can list files and get other data from a Grafana installation. This can be helpful for testing visualizations and running experiments.
+- **Mixed:** An abstraction that lets you query multiple data sources in the same panel.
+  When you select Mixed, you can then select a different data source for each new query that you add.
+  - The first query uses the data source that was selected before you selected **Mixed**.
+  - You can't change an existing query to use the **Mixed** data source.
+  - Grafana Play example: [Mixed data sources](https://play.grafana.org/d/000000100/mixed-datasources?orgId=1)
+- **Dashboard:** A data source that uses the result set from another panel in the same dashboard. The dashboard data source can use data either directly from the selected panel or from annotations attached to the selected panel.
+
 ## Built-in core data sources
 
-These built-in core data sources are included in the Grafana documentation:
+These built-in core data sources are also included in the Grafana documentation:
 
 - [Alertmanager]({{< relref "./alertmanager/" >}})
 - [AWS CloudWatch]({{< relref "./aws-cloudwatch/" >}})
@@ -75,16 +87,3 @@ These built-in core data sources are included in the Grafana documentation:
 - [Tempo]({{< relref "./tempo/" >}})
 - [Testdata]({{< relref "./testdata/" >}})
 - [Zipkin]({{< relref "./zipkin/" >}})
-
-## Special data sources
-
-Grafana also includes three special data sources:
-
-- **Grafana:** A built-in data source that generates random walk data and can poll the [Testdata]({{< relref "./testdata/" >}}) data source.
-  This helps you test visualizations and run experiments.
-- **Mixed:** An abstraction that lets you query multiple data sources in the same panel.
-  When you select Mixed, you can then select a different data source for each new query that you add.
-  - The first query uses the data source that was selected before you selected **Mixed**.
-  - You can't change an existing query to use the Mixed data source.
-  - Grafana Play example: [Mixed data sources](https://play.grafana.org/d/000000100/mixed-datasources?orgId=1)
-- **Dashboard:** A data source that uses the result set from another panel in the same dashboard.

public/app/plugins/datasource/dashboard/DashboardQueryEditor.tsx

@@ -5,7 +5,17 @@ import React, { useCallback, useMemo } from 'react';
 import { useAsync } from 'react-use';
 
 import { DataQuery, GrafanaTheme2, PanelData, SelectableValue, DataTopic } from '@grafana/data';
-import { Field, Select, useStyles2, VerticalGroup, Spinner, Switch, RadioButtonGroup, Icon } from '@grafana/ui';
+import {
+  Card,
+  Field,
+  Select,
+  useStyles2,
+  VerticalGroup,
+  HorizontalGroup,
+  Spinner,
+  Switch,
+  RadioButtonGroup,
+} from '@grafana/ui';
 import config from 'app/core/config';
 import { getDashboardSrv } from 'app/features/dashboard/services/DashboardSrv';
 import { PanelModel } from 'app/features/dashboard/state';
@@ -52,6 +62,7 @@ export function DashboardQueryEditor({ panelData, queries, onChange, onRunQuerie
         return {
           refId: query.refId,
           query: fmt(query),
+          name: ds.name,
           img: ds.meta.info.logos.small,
           data: queryData.series,
           error: queryData.error,
@@ -106,6 +117,7 @@ export function DashboardQueryEditor({ panelData, queries, onChange, onRunQuerie
   );
 
   const dashboard = getDashboardSrv().getCurrent();
+  const showTransforms = Boolean(query.withTransforms || panel?.transformations?.length);
   const panels: Array<SelectableValue<number>> = useMemo(
     () =>
       dashboard?.panels
@@ -141,9 +153,6 @@ export function DashboardQueryEditor({ panelData, queries, onChange, onRunQuerie
   }
 
   const selected = panels.find((panel) => panel.value === query.panelId);
-  // Same as current URL, but different panelId
-  const editURL = `d/${dashboard.uid}/${dashboard.title}?&editPanel=${query.panelId}`;
-  const showTransforms = Boolean(query.withTransforms || panel?.transformations?.length);
 
   return (
     <>
@@ -158,65 +167,54 @@ export function DashboardQueryEditor({ panelData, queries, onChange, onRunQuerie
         />
       </Field>
 
+      <HorizontalGroup height="auto" wrap={true} align="flex-start">
+        <Field
+          label="Data Source"
+          description="Use data or annotations from the panel"
+          className={styles.horizontalField}
+        >
+          <RadioButtonGroup options={topics} value={query.topic === DataTopic.Annotations} onChange={onTopicChanged} />
+        </Field>
+
+        {showTransforms && (
+          <Field label="Transform" description="Apply panel transformations from the source panel">
+            <Switch value={Boolean(query.withTransforms)} onChange={onTransformToggle} />
+          </Field>
+        )}
+      </HorizontalGroup>
+
       {loadingResults ? (
         <Spinner />
       ) : (
         <>
           {results && Boolean(results.length) && (
-            <Field label="Queries">
+            <Field label="Available queries from panel">
               <VerticalGroup spacing="sm">
                 {results.map((target, i) => (
-                  <div className={styles.queryEditorRowHeader} key={`DashboardQueryRow-${i}`}>
-                    <div>
-                      <img src={target.img} alt="" width={16} />
-                      <span className={styles.refId}>{target.refId}:</span>
-                    </div>
-                    <div>
-                      <a href={editURL}>
-                        {target.query}
-                        &nbsp;
-                        <Icon name="external-link-alt" />
-                      </a>
-                    </div>
-                  </div>
+                  <Card key={`DashboardQueryRow-${i}`}>
+                    <Card.Heading>{target.refId}</Card.Heading>
+                    <Card.Figure>
+                      <img src={target.img} alt={target.name} title={target.name} width={40} />
+                    </Card.Figure>
+                    <Card.Meta>{target.query}</Card.Meta>
+                  </Card>
                 ))}
               </VerticalGroup>
             </Field>
           )}
         </>
       )}
-
-      {showTransforms && (
-        <Field label="Transform" description="Apply panel transformations from the source panel">
-          <Switch value={Boolean(query.withTransforms)} onChange={onTransformToggle} />
-        </Field>
-      )}
-
-      <Field label="Data">
-        <RadioButtonGroup options={topics} value={query.topic === DataTopic.Annotations} onChange={onTopicChanged} />
-      </Field>
     </>
   );
 }
 
 function getStyles(theme: GrafanaTheme2) {
   return {
-    results: css({
-      padding: theme.spacing(2),
+    horizontalField: css({
+      marginRight: theme.spacing(2),
     }),
     noQueriesText: css({
       padding: theme.spacing(1.25),
     }),
-    refId: css({
-      padding: theme.spacing(1.25),
-    }),
-    queryEditorRowHeader: css`
-      label: queryEditorRowHeader;
-      display: flex;
-      padding: 4px 8px;
-      flex-flow: row wrap;
-      background: ${theme.colors.background.secondary};
-      align-items: center;
-    `,
   };
 }

public/app/plugins/datasource/dashboard/types.ts

@@ -10,6 +10,7 @@ export interface DashboardQuery extends DataQuery {
 
 export type ResultInfo = {
   img: string; // The Datasource
+  name: string;
   refId: string;
   query: string; // As text
   data: DataFrame[];