Explore: Improve logs volume panel empty state (#70240)

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

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,11 +50,21 @@ export function LogsVolumePanel(props: Props) {
       .join('. ');
   }
 
-  let LogsVolumePanelContent;
+  let extraInfoComponent = <span>{extraInfo}</span>;
+
+  if (logsVolumeData.state === LoadingState.Streaming) {
+    extraInfoComponent = (
+      <>
+        {extraInfoComponent}
+        <Tooltip content="Streaming">
+          <Icon name="circle-mono" size="md" className={styles.streaming} data-testid="logs-volume-streaming" />
+        </Tooltip>
+      </>
+    );
+  }
 
-  if (logsVolumeData?.data) {
-    if (logsVolumeData.data.length > 0) {
-      LogsVolumePanelContent = (
+  return (
+    <div style={{ height }} className={styles.contentContainer}>
       <ExploreGraph
         graphStyle="lines"
         loadingState={logsVolumeData.state ?? LoadingState.Done}
@@ -75,28 +81,6 @@ export function LogsVolumePanel(props: Props) {
         yAxisMaximum={allLogsVolumeMaximum}
         eventBus={props.eventBus}
       />
-      );
-    } else {
-      LogsVolumePanelContent = <span>No volume data.</span>;
-    }
-  }
-
-  let extraInfoComponent = <span>{extraInfo}</span>;
-
-  if (logsVolumeData.state === LoadingState.Streaming) {
-    extraInfoComponent = (
-      <>
-        {extraInfoComponent}
-        <Tooltip content="Streaming">
-          <Icon name="circle-mono" size="md" className={styles.streaming} data-testid="logs-volume-streaming" />
-        </Tooltip>
-      </>
-    );
-  }
-
-  return (
-    <div style={{ height }} className={styles.contentContainer}>
-      {LogsVolumePanelContent}
       {extraInfoComponent && <div className={styles.extraInfoContainer}>{extraInfoComponent}</div>}
     </div>
   );

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();
+  });
 });

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;
+    `,
   };
 };