Loki: Improve log volume error handling (#42534)

* Reduce verbosity of the error message when log volume query fails

* Fix unit tests

public/app/core/logs_model.ts

@@ -680,6 +680,8 @@ export function queryLogsVolume<T extends DataQuery>(
           rawLogsVolume = rawLogsVolume.concat(dataQueryResponse.data.map(toDataFrame));
         },
         error: (error) => {
+          const errorMessage = error.data?.message || error.statusText || error.message;
+          console.error('Log volume query failed with error: ', errorMessage);
           observer.next({
             state: LoadingState.Error,
             error: error,

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

@@ -40,10 +40,11 @@ describe('LogsVolumePanel', () => {
     expect(screen.getByText('ExploreGraph')).toBeInTheDocument();
   });
 
-  it('shows error message', () => {
+  it('shows warning message without details', () => {
     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('Test error message')).toBeInTheDocument();
+    expect(screen.getByText('Please check console logs for more details.')).toBeInTheDocument();
+    expect(screen.queryByText('Test error message')).not.toBeInTheDocument();
   });
 
   it('does not show the panel when there is no volume data', () => {

public/app/features/explore/LogsVolumePanel.tsx

@@ -27,8 +27,8 @@ export function LogsVolumePanel(props: Props) {
     return null;
   } else if (logsVolumeData?.error) {
     return (
-      <Alert title="Failed to load log volume for this query">
-        {logsVolumeData.error.data?.message || logsVolumeData.error.statusText || logsVolumeData.error.message}
+      <Alert title="Failed to load log volume for this query" severity="warning">
+        Please check console logs for more details.
       </Alert>
     );
   } else if (logsVolumeData?.state === LoadingState.Loading) {