DashboardDS: Fixes display of long queries (#29808)

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

@@ -1,28 +1,19 @@
-// Libraries
 import React, { PureComponent } from 'react';
-
+import { LegacyForms, VerticalGroup } from '@grafana/ui';
-// Types
+import { DataQuery, PanelData, SelectableValue } from '@grafana/data';
-import { LegacyForms, Icon } from '@grafana/ui';
-import { DataQuery, DataQueryError, PanelData, DataFrame, SelectableValue } from '@grafana/data';
-import { DashboardQuery } from './types';
-import config from 'app/core/config';
 import { css } from 'emotion';
+
+import { DashboardQuery, ResultInfo } from './types';
+import config from 'app/core/config';
 import { getDatasourceSrv } from 'app/features/plugins/datasource_srv';
 import { PanelModel } from 'app/features/dashboard/state';
 import { SHARED_DASHBODARD_QUERY } from './types';
 import { getDashboardSrv } from 'app/features/dashboard/services/DashboardSrv';
 import { filterPanelDataToQuery } from 'app/features/query/components/QueryEditorRow';
+import { DashboardQueryRow } from './DashboardQueryRow';
 
 const { Select } = LegacyForms;
 
-type ResultInfo = {
-  img: string; // The Datasource
-  refId: string;
-  query: string; // As text
-  data: DataFrame[];
-  error?: DataQueryError;
-};
-
 function getQueryDisplayText(query: DataQuery): string {
   return JSON.stringify(query);
 }
@@ -107,25 +98,11 @@ export class DashboardQueryEditor extends PureComponent<Props, State> {
     const { results } = this.state;
 
     return (
-      <div>
+      <VerticalGroup spacing="sm">
         {results.map((target, index) => {
-          return (
+          return <DashboardQueryRow editURL={editURL} target={target} key={`DashboardQueryRow-${index}`} />;
-            <div className="query-editor-row__header" key={index}>
-              <div className="query-editor-row__ref-id">
-                <img src={target.img} width={16} className={css({ marginRight: '8px' })} />
-                {target.refId}:
-              </div>
-              <div className="query-editor-row__collapsed-text">
-                <a href={editURL}>
-                  {target.query}
-                  &nbsp;
-                  <Icon name="external-link-alt" />
-                </a>
-              </div>
-            </div>
-          );
         })}
-      </div>
+      </VerticalGroup>
     );
   }
 

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

@@ -0,0 +1,48 @@
+import React, { ReactElement } from 'react';
+import { css } from 'emotion';
+import { Icon, useStyles } from '@grafana/ui';
+import { GrafanaTheme } from '@grafana/data';
+
+import { ResultInfo } from './types';
+
+interface Props {
+  editURL: string;
+  target: ResultInfo;
+}
+
+export function DashboardQueryRow({ editURL, target }: Props): ReactElement {
+  const style = useStyles(getStyles);
+
+  return (
+    <div className={style.queryEditorRowHeader}>
+      <div>
+        <img src={target.img} width={16} className={style.logo} />
+        <span>{`${target.refId}:`}</span>
+      </div>
+      <div>
+        <a href={editURL}>
+          {target.query}
+          &nbsp;
+          <Icon name="external-link-alt" />
+        </a>
+      </div>
+    </div>
+  );
+}
+
+function getStyles(theme: GrafanaTheme) {
+  return {
+    logo: css`
+      label: logo;
+      margin-right: ${theme.spacing.sm};
+    `,
+    queryEditorRowHeader: css`
+      label: queryEditorRowHeader;
+      display: flex;
+      padding: 4px 8px;
+      flex-flow: row wrap;
+      background: ${theme.colors.bg2};
+      align-items: center;
+    `,
+  };
+}

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

@@ -1,7 +1,15 @@
-import { DataQuery } from '@grafana/data';
+import { DataFrame, DataQuery, DataQueryError } from '@grafana/data';
 
 export const SHARED_DASHBODARD_QUERY = '-- Dashboard --';
 
 export interface DashboardQuery extends DataQuery {
   panelId?: number;
 }
+
+export type ResultInfo = {
+  img: string; // The Datasource
+  refId: string;
+  query: string; // As text
+  data: DataFrame[];
+  error?: DataQueryError;
+};

public/sass/components/_query_editor.scss

@@ -108,16 +108,6 @@ input[type='text'].tight-form-func-param {
   }
 }
 
-.query-editor-row__header {
-  display: flex;
-  padding: 4px 0px 4px 8px;
-  position: relative;
-  height: 35px;
-  background: $input-label-bg;
-  flex-wrap: nowrap;
-  align-items: center;
-}
-
 .query-editor-row__action {
   margin-left: 3px;
   background: transparent;