From 1695468de1a9e9dd938426f41b4bff29333ddd59 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Piotr=20Jamr=C3=B3z?= <pm.jamroz@gmail.com>
Date: Mon, 3 Jan 2022 10:21:11 +0100
Subject: [PATCH] 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                        | 2 ++
 public/app/features/explore/LogsVolumePanel.test.tsx | 5 +++--
 public/app/features/explore/LogsVolumePanel.tsx      | 4 ++--
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/public/app/core/logs_model.ts b/public/app/core/logs_model.ts
index d7f2fef4d06..3d06ee05164 100644
--- a/public/app/core/logs_model.ts
+++ b/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,
diff --git a/public/app/features/explore/LogsVolumePanel.test.tsx b/public/app/features/explore/LogsVolumePanel.test.tsx
index d5311fd4dcd..de591e10095 100644
--- a/public/app/features/explore/LogsVolumePanel.test.tsx
+++ b/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', () => {
diff --git a/public/app/features/explore/LogsVolumePanel.tsx b/public/app/features/explore/LogsVolumePanel.tsx
index 195a9f13740..ca19e023d72 100644
--- a/public/app/features/explore/LogsVolumePanel.tsx
+++ b/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) {