vmui: display partial response warning (#4742)

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

app/vmui/packages/vmui/src/api/types.ts

@@ -24,6 +24,7 @@ export interface TracingData {
 export interface QueryStats {
   seriesFetched?: string;
   resultLength?: number;
+  isPartial?: boolean;
 }
 
 export interface Logs {

app/vmui/packages/vmui/src/components/Configurators/QueryEditor/QueryEditor.tsx

@@ -7,6 +7,7 @@ import "./style.scss";
 import { QueryStats } from "../../../api/types";
 import Tooltip from "../../Main/Tooltip/Tooltip";
 import { WarningIcon } from "../../Main/Icons";
+import { partialWarning, seriesFetchedWarning } from "./warningText";
 
 export interface QueryEditorProps {
   onChange: (query: string) => void;
@@ -39,7 +40,17 @@ const QueryEditor: FC<QueryEditorProps> = ({
 
   const [openAutocomplete, setOpenAutocomplete] = useState(false);
   const autocompleteAnchorEl = useRef<HTMLDivElement>(null);
-  const showSeriesFetchedWarning = stats?.seriesFetched === "0" && !stats.resultLength;
+
+  const warnings = [
+    {
+      show: stats?.seriesFetched === "0" && !stats.resultLength,
+      text: seriesFetchedWarning
+    },
+    {
+      show: stats?.isPartial,
+      text: partialWarning
+    }
+  ].filter((warning) => warning.show);
 
   const handleSelect = (val: string) => {
     onChange(val);
@@ -108,17 +119,14 @@ const QueryEditor: FC<QueryEditorProps> = ({
         onFoundOptions={handleChangeFoundOptions}
       />
     )}
-    {showSeriesFetchedWarning && (
+    {!!warnings.length && (
       <div className="vm-query-editor-warning">
         <Tooltip
           placement="bottom-right"
           title={(
-            <span className="vm-query-editor-warning__tooltip">
-              {`No match! 
-              This query hasn't selected any time series from database.
-              Either the requested metrics are missing in the database, 
-              or there is a typo in series selector.`}
-            </span>
+            <div className="vm-query-editor-warning__tooltip">
+              {warnings.map((warning, index) => <p key={index}>{warning.text}</p>)}
+            </div>
           )}
         >
           <WarningIcon/>

app/vmui/packages/vmui/src/components/Configurators/QueryEditor/style.scss

@@ -22,6 +22,14 @@
 
     &__tooltip {
       white-space: pre-line;
+
+      p {
+        margin-bottom: $padding-small;
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+      }
     }
   }
 }

app/vmui/packages/vmui/src/components/Configurators/QueryEditor/warningText.ts

@@ -0,0 +1,7 @@
+export const seriesFetchedWarning = `No match! 
+This query hasn't selected any time series from database.
+Either the requested metrics are missing in the database,
+or there is a typo in series selector.`;
+
+export const partialWarning = `The shown results are marked as PARTIAL.
+The result is marked as partial if one or more vmstorage nodes failed to respond to the query.`;

app/vmui/packages/vmui/src/hooks/useFetchQuery.ts

@@ -103,6 +103,7 @@ export const useFetchQuery = ({
         if (response.ok) {
           setQueryStats(prev => [...prev, {
             ...resp?.stats,
+            isPartial: resp?.isPartial,
             resultLength: resp.data.result.length,
           }]);
           setQueryErrors(prev => [...prev, ""]);

docs/CHANGELOG.md

@@ -30,6 +30,7 @@ The following `tip` changes can be tested by building VictoriaMetrics components
 * FEATURE: [vmctl](https://docs.victoriametrics.com/vmctl.html): allow disabling binary export API protocol via `-vm-native-disable-binary-protocol` cmd-line flag when [migrating data from VictoriaMetrics](https://docs.victoriametrics.com/vmctl.html#migrating-data-from-victoriametrics). Disabling binary protocol can be useful for deduplication of the exported data before ingestion. For this, deduplication need [to be configured](https://docs.victoriametrics.com/#deduplication) at `-vm-native-src-addr` side and `-vm-native-disable-binary-protocol` should be set on vmctl side.
 * FEATURE: [vmctl](https://docs.victoriametrics.com/vmctl.html): add support of `week` step for [time-based chunking migration](https://docs.victoriametrics.com/vmctl.html#using-time-based-chunking-of-migration). See [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/4738).
 * FEATURE: [vmctl](https://docs.victoriametrics.com/vmctl.html): do not add `/api/v1/read` suffix to remote read storage address defined by `--remote-read-src-addr` if a `--remote-read-disable-path-append` command-line flag is set. It allows an overriding path for remote-read API via `--remote-read-src-addr`. See [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/4655).
+* FEATURE: [vmui](https://docs.victoriametrics.com/#vmui): add warning in query field of vmui for partial data responses. See [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/4721).
 
 * BUGFIX: [vmagent](https://docs.victoriametrics.com/vmagent.html): use local scrape timestamps for the scraped metrics unless `honor_timestamps: true` option is explicitly set at [scrape_config](https://docs.victoriametrics.com/sd_configs.html#scrape_configs). This fixes gaps for metrics collected from [cadvisor](https://github.com/google/cadvisor) or similar exporters, which export metrics with invalid timestamps. See [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/4697) and [this comment](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/4697#issuecomment-1654614799) for details. The issue has been introduced in [v1.68.0](#v1680).
 * BUGFIX: [vmbackupmanager](https://docs.victoriametrics.com/vmbackupmanager.html): fix panic when creating a backup to a local filesystem on Windows. See [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/4704).