From d7c6153f6842c26ab20cd572a7eb8fe04f64adfa Mon Sep 17 00:00:00 2001
From: Yury Molodov <yurymolodov@gmail.com>
Date: Fri, 3 Nov 2023 16:23:19 +0100
Subject: [PATCH] vmui: display query error on Explore metrics page  (#5272)

https://github.com/VictoriaMetrics/VictoriaMetrics/issues/5202

(cherry picked from commit f90d2ec843063fa382e2add5206ecb3ecf6bed53)
Signed-off-by: hagen1778 <roman@victoriametrics.com>
---
 .../ExploreMetricGraph/ExploreMetricItemGraph.tsx              | 3 ++-
 docs/CHANGELOG.md                                              | 1 +
 docs/README.md                                                 | 2 +-
 docs/Single-server-VictoriaMetrics.md                          | 2 +-
 4 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/app/vmui/packages/vmui/src/components/ExploreMetrics/ExploreMetricGraph/ExploreMetricItemGraph.tsx b/app/vmui/packages/vmui/src/components/ExploreMetrics/ExploreMetricGraph/ExploreMetricItemGraph.tsx
index 936504372..75aa6d472 100644
--- a/app/vmui/packages/vmui/src/components/ExploreMetrics/ExploreMetricGraph/ExploreMetricItemGraph.tsx
+++ b/app/vmui/packages/vmui/src/components/ExploreMetrics/ExploreMetricGraph/ExploreMetricItemGraph.tsx
@@ -70,7 +70,7 @@ with (q = ${queryBase}) (
 )`;
   }, [name, job, instance, rateEnabled, isBucket]);
 
-  const { isLoading, graphData, error, warning, isHistogram } = useFetchQuery({
+  const { isLoading, graphData, error, queryErrors, warning, isHistogram } = useFetchQuery({
     predefinedQuery: [query],
     visible: true,
     customStep: step,
@@ -98,6 +98,7 @@ with (q = ${queryBase}) (
     >
       {isLoading && <Spinner />}
       {error && <Alert variant="error">{error}</Alert>}
+      {queryErrors[0] && <Alert variant="error">{queryErrors[0]}</Alert>}
       {warning && <Alert variant="warning">
         <div className="vm-explore-metrics-graph__warning">
           <p>{warning}</p>
diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md
index f82a55460..3ad31d19f 100644
--- a/docs/CHANGELOG.md
+++ b/docs/CHANGELOG.md
@@ -100,6 +100,7 @@ The sandbox cluster installation is running under the constant load generated by
 * BUGFIX: [vmstorage](https://docs.victoriametrics.com/Cluster-VictoriaMetrics.html): log warning about switching to ReadOnly mode only on state change. Before, vmstorage would log this warning every 1s. See [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/5159) for details.
 * BUGFIX: [vmauth](https://docs.victoriametrics.com/vmauth.html): show browser authorization window for unauthorized requests to unsupported paths if the `unauthorized_user` section is specified. This allows properly authorizing the user. See [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/5236) for details.
 * BUGFIX: [vmui](https://docs.victoriametrics.com/#vmui): fix the `Disable cache` toggle at `JSON` and `Table` views. Previously response caching was always enabled and couldn't be disabled at these views.
+* BUGFIX: [vmui](https://docs.victoriametrics.com/#vmui): correctly display query errors on [Explore Prometheus Metrics](https://docs.victoriametrics.com/#metrics-explorer) page. See [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/5202) for details.
 
 ## [v1.94.0](https://github.com/VictoriaMetrics/VictoriaMetrics/releases/tag/v1.94.0)
 
diff --git a/docs/README.md b/docs/README.md
index 59eb6f018..108e9678c 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -445,7 +445,7 @@ This information is obtained from the `/api/v1/status/active_queries` HTTP endpo
 [VMUI](#vmui) provides an ability to explore metrics exported by a particular `job` / `instance` in the following way:
 
 1. Open the `vmui` at `http://victoriametrics:8428/vmui/`.
-1. Click the `Explore metrics` tab.
+1. Click the `Explore Prometheus metrics` tab.
 1. Select the `job` you want to explore.
 1. Optionally select the `instance` for the selected job to explore.
 1. Select metrics you want to explore and compare.
diff --git a/docs/Single-server-VictoriaMetrics.md b/docs/Single-server-VictoriaMetrics.md
index 97f8bf8b7..6c8b4e6b6 100644
--- a/docs/Single-server-VictoriaMetrics.md
+++ b/docs/Single-server-VictoriaMetrics.md
@@ -453,7 +453,7 @@ This information is obtained from the `/api/v1/status/active_queries` HTTP endpo
 [VMUI](#vmui) provides an ability to explore metrics exported by a particular `job` / `instance` in the following way:
 
 1. Open the `vmui` at `http://victoriametrics:8428/vmui/`.
-1. Click the `Explore metrics` tab.
+1. Click the `Explore Prometheus metrics` tab.
 1. Select the `job` you want to explore.
 1. Optionally select the `instance` for the selected job to explore.
 1. Select metrics you want to explore and compare.