From 520cd55d54e86818abda87fcef3269911252bb40 Mon Sep 17 00:00:00 2001
From: Giordano Ricci <me@giordanoricci.com>
Date: Fri, 16 Jun 2023 15:58:36 +0100
Subject: [PATCH] Explore: Improve logs volume panel empty state (#70240)

---
 .../explore/Logs/LogsVolumePanel.test.tsx     | 12 +----
 .../features/explore/Logs/LogsVolumePanel.tsx | 50 +++++++------------
 .../explore/Logs/LogsVolumePanelList.test.tsx |  6 +++
 .../explore/Logs/LogsVolumePanelList.tsx      | 18 ++++++-
 4 files changed, 41 insertions(+), 45 deletions(-)

diff --git a/public/app/features/explore/Logs/LogsVolumePanel.test.tsx b/public/app/features/explore/Logs/LogsVolumePanel.test.tsx
index d19cb19fdf6..fb973f438a3 100644
--- a/public/app/features/explore/Logs/LogsVolumePanel.test.tsx
+++ b/public/app/features/explore/Logs/LogsVolumePanel.test.tsx
@@ -12,7 +12,7 @@ jest.mock('../Graph/ExploreGraph', () => {
   };
 });
 
-function renderPanel(logsVolumeData?: DataQueryResponse) {
+function renderPanel(logsVolumeData: DataQueryResponse) {
   render(
     <LogsVolumePanel
       absoluteRange={{ from: 0, to: 1 }}
@@ -30,21 +30,11 @@ function renderPanel(logsVolumeData?: DataQueryResponse) {
 }
 
 describe('LogsVolumePanel', () => {
-  it('shows no volume data', () => {
-    renderPanel({ state: LoadingState.Done, error: undefined, data: [] });
-    expect(screen.getByText('No volume data.')).toBeInTheDocument();
-  });
-
   it('renders logs volume histogram graph', () => {
     renderPanel({ state: LoadingState.Done, error: undefined, data: [{}] });
     expect(screen.getByText('ExploreGraph')).toBeInTheDocument();
   });
 
-  it('does not show the panel when there is no volume data', () => {
-    renderPanel(undefined);
-    expect(screen.queryByText('Log volume')).not.toBeInTheDocument();
-  });
-
   it('renders a loading indicator when data is streaming', () => {
     renderPanel({ state: LoadingState.Streaming, error: undefined, data: [{}] });
     expect(screen.getByTestId('logs-volume-streaming')).toBeInTheDocument();
diff --git a/public/app/features/explore/Logs/LogsVolumePanel.tsx b/public/app/features/explore/Logs/LogsVolumePanel.tsx
index 871b3388d7d..cd31dcce517 100644
--- a/public/app/features/explore/Logs/LogsVolumePanel.tsx
+++ b/public/app/features/explore/Logs/LogsVolumePanel.tsx
@@ -17,7 +17,7 @@ import { getLogsVolumeDataSourceInfo, isLogsVolumeLimited } from '../../logs/uti
 import { ExploreGraph } from '../Graph/ExploreGraph';
 
 type Props = {
-  logsVolumeData: DataQueryResponse | undefined;
+  logsVolumeData: DataQueryResponse;
   allLogsVolumeMaximum: number;
   absoluteRange: AbsoluteTimeRange;
   timeZone: TimeZone;
@@ -36,10 +36,6 @@ export function LogsVolumePanel(props: Props) {
   const spacing = parseInt(theme.spacing(2).slice(0, -2), 10);
   const height = 150;
 
-  if (props.logsVolumeData === undefined) {
-    return null;
-  }
-
   const logsVolumeData = props.logsVolumeData;
 
   const logsVolumeInfo = getLogsVolumeDataSourceInfo(logsVolumeData?.data);
@@ -54,33 +50,6 @@ export function LogsVolumePanel(props: Props) {
       .join('. ');
   }
 
-  let LogsVolumePanelContent;
-
-  if (logsVolumeData?.data) {
-    if (logsVolumeData.data.length > 0) {
-      LogsVolumePanelContent = (
-        <ExploreGraph
-          graphStyle="lines"
-          loadingState={logsVolumeData.state ?? LoadingState.Done}
-          data={logsVolumeData.data}
-          height={height}
-          width={width - spacing * 2}
-          absoluteRange={props.absoluteRange}
-          onChangeTime={onUpdateTimeRange}
-          timeZone={timeZone}
-          splitOpenFn={splitOpen}
-          tooltipDisplayMode={TooltipDisplayMode.Multi}
-          onHiddenSeriesChanged={onHiddenSeriesChanged}
-          anchorToZero
-          yAxisMaximum={allLogsVolumeMaximum}
-          eventBus={props.eventBus}
-        />
-      );
-    } else {
-      LogsVolumePanelContent = <span>No volume data.</span>;
-    }
-  }
-
   let extraInfoComponent = <span>{extraInfo}</span>;
 
   if (logsVolumeData.state === LoadingState.Streaming) {
@@ -96,7 +65,22 @@ export function LogsVolumePanel(props: Props) {
 
   return (
     <div style={{ height }} className={styles.contentContainer}>
-      {LogsVolumePanelContent}
+      <ExploreGraph
+        graphStyle="lines"
+        loadingState={logsVolumeData.state ?? LoadingState.Done}
+        data={logsVolumeData.data}
+        height={height}
+        width={width - spacing * 2}
+        absoluteRange={props.absoluteRange}
+        onChangeTime={onUpdateTimeRange}
+        timeZone={timeZone}
+        splitOpenFn={splitOpen}
+        tooltipDisplayMode={TooltipDisplayMode.Multi}
+        onHiddenSeriesChanged={onHiddenSeriesChanged}
+        anchorToZero
+        yAxisMaximum={allLogsVolumeMaximum}
+        eventBus={props.eventBus}
+      />
       {extraInfoComponent && <div className={styles.extraInfoContainer}>{extraInfoComponent}</div>}
     </div>
   );
diff --git a/public/app/features/explore/Logs/LogsVolumePanelList.test.tsx b/public/app/features/explore/Logs/LogsVolumePanelList.test.tsx
index 3809e56a5bb..81767d27c0e 100644
--- a/public/app/features/explore/Logs/LogsVolumePanelList.test.tsx
+++ b/public/app/features/explore/Logs/LogsVolumePanelList.test.tsx
@@ -67,4 +67,10 @@ describe('LogsVolumePanelList', () => {
     await userEvent.click(screen.getByRole('button', { name: 'Retry' }));
     expect(onLoadCallback).toHaveBeenCalled();
   });
+
+  it('shows an info message if no log volume data is available', async () => {
+    renderPanel({ state: LoadingState.Done, data: [] });
+    expect(screen.getByRole('status')).toBeInTheDocument();
+    expect(screen.getByText('No logs volume available')).toBeInTheDocument();
+  });
 });
diff --git a/public/app/features/explore/Logs/LogsVolumePanelList.tsx b/public/app/features/explore/Logs/LogsVolumePanelList.tsx
index 3b9e6eb8182..1d513abb3b1 100644
--- a/public/app/features/explore/Logs/LogsVolumePanelList.tsx
+++ b/public/app/features/explore/Logs/LogsVolumePanelList.tsx
@@ -12,7 +12,7 @@ import {
   SplitOpen,
   TimeZone,
 } from '@grafana/data';
-import { Button, InlineField, useStyles2 } from '@grafana/ui';
+import { Button, InlineField, Alert, useStyles2 } from '@grafana/ui';
 
 import { mergeLogsVolumeDataFrames, isLogsVolumeLimited, getLogsVolumeMaximumRange } from '../../logs/utils';
 import { SupplementaryResultError } from '../SupplementaryResultError';
@@ -98,6 +98,17 @@ export const LogsVolumePanelList = ({
   } else if (logsVolumeData?.error !== undefined) {
     return <SupplementaryResultError error={logsVolumeData.error} title="Failed to load log volume for this query" />;
   }
+
+  if (numberOfLogVolumes === 0) {
+    return (
+      <div className={styles.alertContainer}>
+        <Alert severity="info" title="No logs volume available">
+          No volume information available for the current queries and time range.
+        </Alert>
+      </div>
+    );
+  }
+
   return (
     <div className={styles.listContainer}>
       {Object.keys(logVolumes).map((name, index) => {
@@ -146,6 +157,11 @@ const getStyles = (theme: GrafanaTheme2) => {
       font-size: ${theme.typography.bodySmall.fontSize};
       color: ${theme.colors.text.secondary};
     `,
+    alertContainer: css`
+      width: 50%;
+      min-width: ${theme.breakpoints.values.sm}px;
+      margin: 0 auto;
+    `,
   };
 };