logs-volume: remove custom timeout (#45041)

* logs-volume: remove custom timeout

* make error message a little better

public/app/features/explore/LogsVolumePanel.test.tsx

@@ -40,11 +40,23 @@ describe('LogsVolumePanel', () => {
     expect(screen.getByText('ExploreGraph')).toBeInTheDocument();
   });
 
-  it('shows warning message without details', () => {
+  it('shows short warning message', () => {
     renderPanel({ state: LoadingState.Error, error: { data: { message: 'Test error message' } }, data: [] });
     expect(screen.getByText('Failed to load log volume for this query')).toBeInTheDocument();
-    expect(screen.getByText('Please check console logs for more details.')).toBeInTheDocument();
-    expect(screen.queryByText('Test error message')).not.toBeInTheDocument();
+    expect(screen.getByText('Test error message')).toBeInTheDocument();
+  });
+
+  it('shows long warning message', () => {
+    // we make a long message
+    const messagePart = 'One two three four five six seven eight nine ten.';
+    const message = messagePart + ' ' + messagePart + ' ' + messagePart;
+
+    renderPanel({ state: LoadingState.Error, error: { data: { message } }, data: [] });
+    expect(screen.getByText('Failed to load log volume for this query')).toBeInTheDocument();
+    expect(screen.queryByText(message)).not.toBeInTheDocument();
+    const button = screen.getByText('Show details');
+    button.click();
+    expect(screen.getByText(message)).toBeInTheDocument();
   });
 
   it('does not show the panel when there is no volume data', () => {

public/app/features/explore/LogsVolumePanel.tsx

@@ -1,7 +1,7 @@
-import { AbsoluteTimeRange, DataQueryResponse, LoadingState, SplitOpen, TimeZone } from '@grafana/data';
+import { AbsoluteTimeRange, DataQueryError, DataQueryResponse, LoadingState, SplitOpen, TimeZone } from '@grafana/data';
 import { Alert, Button, Collapse, InlineField, TooltipDisplayMode, useStyles2, useTheme2 } from '@grafana/ui';
 import { ExploreGraph } from './ExploreGraph';
-import React from 'react';
+import React, { useState } from 'react';
 import { css } from '@emotion/css';
 
 type Props = {
@@ -14,6 +14,35 @@ type Props = {
   onLoadLogsVolume: () => void;
 };
 
+const SHORT_ERROR_MESSAGE_LIMIT = 100;
+
+function ErrorAlert(props: { error: DataQueryError }) {
+  const [isOpen, setIsOpen] = useState(false);
+  // generic get-error-message-logic, taken from
+  // /public/app/features/explore/ErrorContainer.tsx
+  const message = props.error.message || props.error.data?.message || '';
+
+  const showButton = !isOpen && message.length > SHORT_ERROR_MESSAGE_LIMIT;
+
+  return (
+    <Alert title="Failed to load log volume for this query" severity="warning">
+      {showButton ? (
+        <Button
+          variant="secondary"
+          size="xs"
+          onClick={() => {
+            setIsOpen(true);
+          }}
+        >
+          Show details
+        </Button>
+      ) : (
+        message
+      )}
+    </Alert>
+  );
+}
+
 export function LogsVolumePanel(props: Props) {
   const { width, logsVolumeData, absoluteRange, timeZone, splitOpen, onUpdateTimeRange, onLoadLogsVolume } = props;
   const theme = useTheme2();
@@ -26,11 +55,7 @@ export function LogsVolumePanel(props: Props) {
   if (!logsVolumeData) {
     return null;
   } else if (logsVolumeData?.error) {
-    return (
-      <Alert title="Failed to load log volume for this query" severity="warning">
-        Please check console logs for more details.
-      </Alert>
-    );
+    return <ErrorAlert error={logsVolumeData?.error} />;
   } else if (logsVolumeData?.state === LoadingState.Loading) {
     LogsVolumePanelContent = <span>Log volume is loading...</span>;
   } else if (logsVolumeData?.data) {