From ae6175a44ed936447d052c3dd03bb2d79347705d Mon Sep 17 00:00:00 2001
From: Yury Molodov <yurymolodov@gmail.com>
Date: Thu, 21 Nov 2024 15:22:54 +0100
Subject: [PATCH] vmui: clarify usage instructions on the Raw Data page

---
 .../DownloadReport/DownloadReport.tsx         | 15 +++++++
 .../CustomPanel/DownloadReport/style.scss     |  5 ++-
 .../RawQueryPage/hooks/useFetchExport.ts      |  1 -
 .../vmui/src/pages/RawQueryPage/index.tsx     | 39 +++++++++++++++----
 .../packages/vmui/src/utils/uplot/series.ts   |  2 +-
 5 files changed, 51 insertions(+), 11 deletions(-)

diff --git a/app/vmui/packages/vmui/src/pages/CustomPanel/DownloadReport/DownloadReport.tsx b/app/vmui/packages/vmui/src/pages/CustomPanel/DownloadReport/DownloadReport.tsx
index c8f5377af..4bfb7fab5 100644
--- a/app/vmui/packages/vmui/src/pages/CustomPanel/DownloadReport/DownloadReport.tsx
+++ b/app/vmui/packages/vmui/src/pages/CustomPanel/DownloadReport/DownloadReport.tsx
@@ -15,6 +15,8 @@ import Alert from "../../../components/Main/Alert/Alert";
 import qs from "qs";
 import Popper from "../../../components/Main/Popper/Popper";
 import helperText from "./helperText";
+import { Link } from "react-router-dom";
+import router from "../../../router";
 
 type Props = {
   fetchUrl?: string[];
@@ -125,6 +127,15 @@ const DownloadReport: FC<Props> = ({ fetchUrl }) => {
     setStepHelper(0);
   }, [openHelper]);
 
+  const RawQueryLink = () => (
+    <Link
+      className="vm-link vm-link_underlined vm-link_colored"
+      to={router.rawQuery}
+    >
+      Raw Query
+    </Link>
+  );
+
   return (
     <>
       <Tooltip title={"Export query"}>
@@ -165,6 +176,10 @@ const DownloadReport: FC<Props> = ({ fetchUrl }) => {
                   label={"Include query trace"}
                 />
               </div>
+              <Alert variant="info">
+                If confused with the query results,
+                try viewing the raw samples for selected series in <RawQueryLink/> tab.
+              </Alert>
             </div>
             {error && <Alert variant="error">{error}</Alert>}
             <div className="vm-download-report__buttons">
diff --git a/app/vmui/packages/vmui/src/pages/CustomPanel/DownloadReport/style.scss b/app/vmui/packages/vmui/src/pages/CustomPanel/DownloadReport/style.scss
index 9255694bc..029d4ef69 100644
--- a/app/vmui/packages/vmui/src/pages/CustomPanel/DownloadReport/style.scss
+++ b/app/vmui/packages/vmui/src/pages/CustomPanel/DownloadReport/style.scss
@@ -4,14 +4,15 @@
   display: grid;
   gap: $padding-large;
   padding-top: calc($padding-large - $padding-global);
-  min-width: 400px;
+  width: 700px;
+  max-width: 100%;
 
   &-settings {
     display: grid;
     gap: $padding-global;
 
     textarea {
-      min-height: 100px;
+      min-height: 200px;
     }
   }
 
diff --git a/app/vmui/packages/vmui/src/pages/RawQueryPage/hooks/useFetchExport.ts b/app/vmui/packages/vmui/src/pages/RawQueryPage/hooks/useFetchExport.ts
index 8d9c61eb2..047e8b516 100644
--- a/app/vmui/packages/vmui/src/pages/RawQueryPage/hooks/useFetchExport.ts
+++ b/app/vmui/packages/vmui/src/pages/RawQueryPage/hooks/useFetchExport.ts
@@ -74,7 +74,6 @@ export const useFetchExport = ({ hideQuery, showAllSeries }: FetchQueryParams):
     try {
       const tempData: MetricBase[] = [];
       const seriesLimit = showAllSeries ? Infinity : +stateSeriesLimits[displayType] || Infinity;
-      console.log(+stateSeriesLimits[displayType]);
       let counter = 1;
       let totalLength = 0;
 
diff --git a/app/vmui/packages/vmui/src/pages/RawQueryPage/index.tsx b/app/vmui/packages/vmui/src/pages/RawQueryPage/index.tsx
index 0ba38586b..1c3ca4961 100644
--- a/app/vmui/packages/vmui/src/pages/RawQueryPage/index.tsx
+++ b/app/vmui/packages/vmui/src/pages/RawQueryPage/index.tsx
@@ -18,6 +18,33 @@ import Hyperlink from "../../components/Main/Hyperlink/Hyperlink";
 import { CloseIcon } from "../../components/Main/Icons";
 import Button from "../../components/Main/Button/Button";
 
+const RawSamplesLink = () => (
+  <Hyperlink
+    href="https://docs.victoriametrics.com/keyconcepts/#raw-samples"
+    underlined
+  >
+    raw samples
+  </Hyperlink>
+);
+
+const QueryDataLink = () => (
+  <Hyperlink
+    underlined
+    href="https://docs.victoriametrics.com/keyconcepts/#query-data"
+  >
+    Query API
+  </Hyperlink>
+);
+
+const TimeSeriesSelectorLink = () => (
+  <Hyperlink
+    underlined
+    href="https://docs.victoriametrics.com/keyconcepts/#filtering"
+  >
+    time series selector
+  </Hyperlink>
+);
+
 const RawQueryPage: FC = () => {
   useSetQueryParams();
   const { isMobile } = useDeviceDetect();
@@ -37,7 +64,7 @@ const RawQueryPage: FC = () => {
     warning,
     queryErrors,
     setQueryErrors,
-    abortFetch
+    abortFetch,
   } = useFetchExport({ hideQuery, showAllSeries });
 
   const controlsRef = useRef<HTMLDivElement>(null);
@@ -80,12 +107,10 @@ const RawQueryPage: FC = () => {
         <Alert variant="info">
           <div className="vm-explore-metrics-header-description">
             <p>
-              This page provides a dedicated view for querying and displaying raw samples from VictoriaMetrics.
-              Users often assume that the <Hyperlink
-                underlined
-                href="https://docs.victoriametrics.com/keyconcepts/#query-data"
-              >Query
-              API</Hyperlink> returns data exactly as stored, but data samples and timestamps may be modified by the API.
+              This page provides a dedicated view for querying and displaying <RawSamplesLink/> from VictoriaMetrics.
+              It expects only <TimeSeriesSelectorLink/> as a query argument.
+              Users often assume that the <QueryDataLink/> returns data exactly as stored,
+              but data samples and timestamps may be modified by the API.
             </p>
             <Button
               variant="text"
diff --git a/app/vmui/packages/vmui/src/utils/uplot/series.ts b/app/vmui/packages/vmui/src/utils/uplot/series.ts
index c1f2489f9..58c59e8ac 100644
--- a/app/vmui/packages/vmui/src/utils/uplot/series.ts
+++ b/app/vmui/packages/vmui/src/utils/uplot/series.ts
@@ -205,7 +205,7 @@ const filterPoints = (self: uPlot, seriesIdx: number): number[] | null => {
     }
   }
 
-  return indices.length > 0 ? indices : null;
+  return indices;
 };
 
 type GetStrokeSeriesArgs = {