Explore: no data returned (#46987)

* Explore: no data message

display no data text when query executed succesfully but no data was
returned

* Explore: 'no-data' display logic and styling fix

* pipeline trigger

* Revert "pipeline trigger"

This reverts commit f08d246ba767e66344ad252577523f391832ec18.

* Add more parameters for when to show no data

* Change check to use frame length

Co-authored-by: Kristina Durivage <kristina.durivage@grafana.com>

public/app/features/explore/Explore.tsx

@@ -34,6 +34,7 @@ import appEvents from 'app/core/app_events';
 import { AbsoluteTimeEvent } from 'app/types/events';
 import { Unsubscribable } from 'rxjs';
 import { getNodeGraphDataFrames } from 'app/plugins/panel/nodeGraph/utils';
+import { NoData } from './NoData';
 
 const getStyles = (theme: GrafanaTheme2) => {
   return {
@@ -213,6 +214,10 @@ export class Explore extends React.PureComponent<Props, ExploreState> {
     );
   }
 
+  renderNoData() {
+    return <NoData />;
+  }
+
   renderGraphPanel(width: number) {
     const { graphResult, absoluteRange, timeZone, splitOpen, queryResponse, loading, theme, graphStyle } = this.props;
     const spacing = parseInt(theme.spacing(2).slice(0, -2), 10);
@@ -334,6 +339,15 @@ export class Explore extends React.PureComponent<Props, ExploreState> {
     const showPanels = queryResponse && queryResponse.state !== LoadingState.NotStarted;
     const showRichHistory = openDrawer === ExploreDrawer.RichHistory;
     const showQueryInspector = openDrawer === ExploreDrawer.QueryInspector;
+    const showNoData =
+      queryResponse.state === LoadingState.Done &&
+      [
+        queryResponse.logsFrames,
+        queryResponse.graphFrames,
+        queryResponse.nodeGraphFrames,
+        queryResponse.tableFrames,
+        queryResponse.traceFrames,
+      ].every((e) => e.length === 0);
 
     return (
       <CustomScrollbar
@@ -382,6 +396,7 @@ export class Explore extends React.PureComponent<Props, ExploreState> {
                           {showLogs && <ErrorBoundaryAlert>{this.renderLogsPanel(width)}</ErrorBoundaryAlert>}
                           {showNodeGraph && <ErrorBoundaryAlert>{this.renderNodeGraphPanel()}</ErrorBoundaryAlert>}
                           {showTrace && <ErrorBoundaryAlert>{this.renderTraceViewPanel()}</ErrorBoundaryAlert>}
+                          {showNoData && <ErrorBoundaryAlert>{this.renderNoData()}</ErrorBoundaryAlert>}
                         </>
                       )}
                       {showRichHistory && (

public/app/features/explore/NoData.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { css, cx } from '@emotion/css';
+
+import { useStyles2 } from '@grafana/ui';
+
+import { GrafanaTheme2 } from '@grafana/data/src';
+
+export const NoData = () => {
+  const css = useStyles2(getStyles);
+  return (
+    <>
+      <div className={cx([css.wrapper, 'panel-container'])}>
+        <span className={cx([css.message])}>{'No data'}</span>
+      </div>
+    </>
+  );
+};
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  wrapper: css`
+    label: no-data-card;
+    padding: ${theme.spacing(3)};
+    background: ${theme.colors.background.primary};
+    border-radius: ${theme.shape.borderRadius(2)};
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    flex-grow: 1;
+  `,
+  message: css`
+    margin-bottom: ${theme.spacing(3)};
+    font-size: 2em;
+    padding: 6em 1em;
+    color: ${theme.colors.text.disabled};
+  `,
+});