app/vmui: follow-up after f6d31f5

- Document the feature at docs/CHANGELOG.md. - Document the metrics explorer at https://docs.victoriametrics.com/#metrics-explorer . - Properly set `start` and `end` args for the selected time range when performing the request, which returns metric names. - Improve queries, so they return lower number of lines and labels. This should improve metrics' exploration. - Properly encode label filters and query args before passing them to VictoriaMetrics. - Various cosmetic fixes. Updates #3386
VictoriaMetrics · Dec 23, 2022 · 8a1775f · 8a1775f
1 parent ec2b24f
commit 8a1775f
Show file tree

Hide file tree

Showing 16 changed files with 70 additions and 41 deletions.
diff --git a/app/vmselect/vmui/asset-manifest.json b/app/vmselect/vmui/asset-manifest.json
@@ -1,12 +1,12 @@
 {
   "files": {
-    "main.css": "./static/css/main.fdc77f08.css",
-    "main.js": "./static/js/main.ca04fac1.js",
+    "main.css": "./static/css/main.74a50bcc.css",
+    "main.js": "./static/js/main.698139ca.js",
     "static/js/27.c1ccfd29.chunk.js": "./static/js/27.c1ccfd29.chunk.js",
     "index.html": "./index.html"
   },
   "entrypoints": [
-    "static/css/main.fdc77f08.css",
-    "static/js/main.ca04fac1.js"
+    "static/css/main.74a50bcc.css",
+    "static/js/main.698139ca.js"
   ]
 }
diff --git a/app/vmselect/vmui/index.html b/app/vmselect/vmui/index.html
@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="./favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="VM-UI is a metric explorer for Victoria Metrics"/><link rel="apple-touch-icon" href="./apple-touch-icon.png"/><link rel="icon" type="image/png" sizes="32x32" href="./favicon-32x32.png"><link rel="manifest" href="./manifest.json"/><title>VM UI</title><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono&family=Lato:wght@300;400;700&display=swap" rel="stylesheet"><script src="./dashboards/index.js" type="module"></script><script defer="defer" src="./static/js/main.ca04fac1.js"></script><link href="./static/css/main.fdc77f08.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="./favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="VM-UI is a metric explorer for Victoria Metrics"/><link rel="apple-touch-icon" href="./apple-touch-icon.png"/><link rel="icon" type="image/png" sizes="32x32" href="./favicon-32x32.png"><link rel="manifest" href="./manifest.json"/><title>VM UI</title><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono&family=Lato:wght@300;400;700&display=swap" rel="stylesheet"><script src="./dashboards/index.js" type="module"></script><script defer="defer" src="./static/js/main.698139ca.js"></script><link href="./static/css/main.74a50bcc.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
diff --git a/app/vmselect/vmui/static/css/main.74a50bcc.css b/app/vmselect/vmui/static/css/main.74a50bcc.css
diff --git a/app/vmselect/vmui/static/css/main.fdc77f08.css b/app/vmselect/vmui/static/css/main.fdc77f08.css
diff --git a/app/vmselect/vmui/static/js/main.698139ca.js b/app/vmselect/vmui/static/js/main.698139ca.js
diff --git a/...ui/static/js/main.ca04fac1.js.LICENSE.txt → ...ui/static/js/main.698139ca.js.LICENSE.txt b/...ui/static/js/main.ca04fac1.js.LICENSE.txt → ...ui/static/js/main.698139ca.js.LICENSE.txt
diff --git a/app/vmselect/vmui/static/js/main.ca04fac1.js b/app/vmselect/vmui/static/js/main.ca04fac1.js
diff --git a/app/vmui/packages/vmui/src/api/explore-metrics.ts b/app/vmui/packages/vmui/src/api/explore-metrics.ts
@@ -3,14 +3,16 @@ import { TimeParams } from "../types";
 export const getJobsUrl = (server: string, period: TimeParams): string =>
   `${server}/api/v1/label/job/values?start=${period.start}&end=${period.end}`;
 
-export const getInstancesUrl = (server: string, period: TimeParams, job: string): string =>
-  `${server}/api/v1/label/instance/values?match[]={job="${encodeURIComponent(job)}"}&start=${period.start}&end=${period.end}`;
+export const getInstancesUrl = (server: string, period: TimeParams, job: string): string => {
+  const match = `{job=${JSON.stringify(job)}}`;
+  return `${server}/api/v1/label/instance/values?match[]=${encodeURIComponent(match)}&start=${period.start}&end=${period.end}`;
+};
 
-export const getNamesUrl = (server: string, job: string, instance: string): string => {
-  const match = Object.entries({ job, instance })
+export const getNamesUrl = (server: string, period: TimeParams, job: string, instance: string): string => {
+  const filters = Object.entries({ job, instance })
     .filter(val => val[1])
-    .map(([key, val]) => `${key}="${val}"`)
+    .map(([key, val]) => `${key}=${JSON.stringify(val)}`)
     .join(",");
-
-  return `${server}/api/v1/label/__name__/values?match[]={${encodeURIComponent(match)}}`;
+  const match = `{${filters}}`;
+  return `${server}/api/v1/label/__name__/values?match[]=${encodeURIComponent(match)}&start=${period.start}&end=${period.end}`;
 };
diff --git a/app/vmui/packages/vmui/src/pages/ExploreMetrics/ExploreMetricItem/ExploreMetricItem.tsx b/app/vmui/packages/vmui/src/pages/ExploreMetrics/ExploreMetricItem/ExploreMetricItem.tsx
@@ -47,7 +47,7 @@ const ExploreMetricItem: FC<ExploreMetricItemProps> = ({
           onClick={handleClickRate}
         >
           <Switch
-            label={<span>wrapped into <code>rate()</code></span>}
+            label={<span>rate()</span>}
             value={rateEnabled}
             onChange={setRateEnabled}
           />
@@ -69,7 +69,6 @@ const ExploreMetricItem: FC<ExploreMetricItemProps> = ({
           job={job}
           instance={instance}
           rateEnabled={rateEnabled}
-          isCounter={isCounter}
           isBucket={isBucket}
         />
       </Accordion>

diff --git a/app/vmui/packages/vmui/src/pages/ExploreMetrics/ExploreMetricItem/ExploreMetricItemGraph.tsx b/app/vmui/packages/vmui/src/pages/ExploreMetrics/ExploreMetricItem/ExploreMetricItemGraph.tsx
@@ -14,7 +14,6 @@ interface ExploreMetricItemGraphProps {
   job: string,
   instance: string,
   rateEnabled: boolean,
-  isCounter: boolean,
   isBucket: boolean,
 }
 
@@ -23,7 +22,6 @@ const ExploreMetricItem: FC<ExploreMetricItemGraphProps> = ({
   job,
   instance,
   rateEnabled,
-  isCounter,
   isBucket
 }) => {
   const { customStep, yaxis } = useGraphState();
@@ -37,26 +35,26 @@ const ExploreMetricItem: FC<ExploreMetricItemGraphProps> = ({
   const query = useMemo(() => {
     const params = Object.entries({ job, instance })
       .filter(val => val[1])
-      .map(([key, val]) => `${key}="${val}"`);
+      .map(([key, val]) => `${key}=${JSON.stringify(val)}`);
+    params.push(`__name__=${JSON.stringify(name)}`);
+    if (name == "node_cpu_seconds_total") {
+      // This is hack for filtering out free cpu for widely used metric :)
+      params.push("mode!=\"idle\"");
+    }
 
-    const base = `${name}{${params.join(",")}}`;
+    const base = `{${params.join(",")}}`;
+    if (isBucket) {
+      if (instance) {
+        return `histogram_quantiles("quantile", 0.5, 0.95, 0.99, sum(increase(${base})) by (vmrange, le))`;
+      }
+      return `histogram_quantile(0.95, sum(increase(${base})) by (instance, vmrange, le))`;
+    }
     const queryBase = rateEnabled ? `rate(${base})` : base;
-
-    const queryBucket = `histogram_quantiles("quantile", 0.5, 0.99, increase(${base}[5m]))`;
-    const queryBucketWithoutInstance = `histogram_quantiles("quantile", 0.5, 0.99, sum(increase(${base}[5m])) without (instance))`;
-    const queryCounterWithoutInstance = `sum(${queryBase}) without (job)`;
-    const queryWithoutInstance = `sum(${queryBase}) without (instance)`;
-
-    const isCounterWithoutInstance = isCounter && job && !instance;
-    const isBucketWithoutInstance = isBucket && job && !instance;
-    const isWithoutInstance = !isCounter && job && !instance;
-
-    if (isCounterWithoutInstance) return queryCounterWithoutInstance;
-    if (isBucketWithoutInstance) return queryBucketWithoutInstance;
-    if (isBucket) return queryBucket;
-    if (isWithoutInstance) return queryWithoutInstance;
-    return queryBase;
-  }, [name, job, instance, rateEnabled, isCounter, isBucket]);
+    if (instance) {
+      return `sum(${queryBase})`;
+    }
+    return `sum(${queryBase}) by (instance)`;
+  }, [name, job, instance, rateEnabled, isBucket]);
 
   const { isLoading, graphData, error, warning } = useFetchQuery({
     predefinedQuery: [query],

diff --git a/app/vmui/packages/vmui/src/pages/ExploreMetrics/hooks/useFetchNames.ts b/app/vmui/packages/vmui/src/pages/ExploreMetrics/hooks/useFetchNames.ts
@@ -1,6 +1,7 @@
 import { useEffect, useMemo, useState } from "preact/compat";
 import { getNamesUrl } from "../../../api/explore-metrics";
 import { useAppState } from "../../../state/common/StateContext";
+import { useTimeState } from "../../../state/time/TimeStateContext";
 import { ErrorTypes } from "../../../types";
 
 interface FetchNamesReturn {
@@ -11,12 +12,13 @@ interface FetchNamesReturn {
 
 export const useFetchNames = (job: string, instance: string): FetchNamesReturn => {
   const { serverUrl } = useAppState();
+  const { period } = useTimeState();
 
   const [names, setNames] = useState<string[]>([]);
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<ErrorTypes | string>();
 
-  const fetchUrl = useMemo(() => getNamesUrl(serverUrl, job, instance), [serverUrl, job, instance]);
+  const fetchUrl = useMemo(() => getNamesUrl(serverUrl, period, job, instance), [serverUrl, period, job, instance]);
 
   useEffect(() => {
     if (!job) return;

diff --git a/app/vmui/packages/vmui/src/pages/ExploreMetrics/index.tsx b/app/vmui/packages/vmui/src/pages/ExploreMetrics/index.tsx
@@ -120,7 +120,7 @@ const ExploreMetrics: FC = () => {
       {!job && <Alert variant="info">Please select job to see list of metric names.</Alert>}
       {!metrics.length && onlyGraphs && job && (
         <Alert variant="info">
-          Open graphs not found. Turn off &quot;Show only open metrics&quot; to see list of metric names.
+          Open graphs not found. Turn off &quot;Show only opened metrics&quot; to see list of metric names.
         </Alert>
       )}
       <div className="vm-explore-metrics-body">

diff --git a/app/vmui/packages/vmui/src/router/index.ts b/app/vmui/packages/vmui/src/router/index.ts
@@ -49,7 +49,7 @@ export const routerOptions: {[key: string]: RouterOptions} = {
     header: {}
   },
   [router.metrics]: {
-    title: "Explore",
+    title: "Explore metrics",
     header: {
       timeSelector: true,
     }

diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md
@@ -15,6 +15,7 @@ The following tip changes can be tested by building VictoriaMetrics components f
 
 ## tip
 
+* FEATURE: [vmui](https://docs.victoriametrics.com/#vmui): add ability to explore metrics exported by a particular `job` / `instance`. See [these docs](https://docs.victoriametrics.com/#metrics-explorer) and [this feature request](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/3386).
 * FEATURE: [relabeling](https://docs.victoriametrics.com/vmagent.html#relabeling): add support for `keepequal` and `dropequal` relabeling actions, which are supported by Prometheus starting from [v2.41.0](https://github.com/prometheus/prometheus/releases/tag/v2.41.0). These relabeling actions are almost identical to `keep_if_equal` and `drop_if_equal` relabeling actions supported by VictoriaMetrics since `v1.38.0` - see [these docs](https://docs.victoriametrics.com/vmagent.html#relabeling-enhancements) - so it is recommended sticking to `keep_if_equal` and `drop_if_equal` actions instead of switching to `keepequal` and `dropequal`.
 
 * BUGFIX: [vmui](https://docs.victoriametrics.com/#vmui): properly update the `step` value in url after the `step` input field has been manually changed. This allows preserving the proper `step` when copy-n-pasting the url to another instance of web browser. See [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/3513).
@@ -123,7 +124,6 @@ Released at 2022-12-11
 * FEATURE: [vmctl](https://docs.victoriametrics.com/vmctl.html): add ability to copy data from sources via Prometheus `remote_read` protocol. See [these docs](https://docs.victoriametrics.com/vmctl.html#migrating-data-by-remote-read-protocol). The related issues: [one](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/3132) and [two](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/1101).
 * FEATURE: [vmui](https://docs.victoriametrics.com/#vmui): allow changing timezones for the requested data. See [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/3075).
 * FEATURE: [vmui](https://docs.victoriametrics.com/#vmui): provide fast path for hiding results for all the queries except the given one by clicking `eye` icon with `ctrl` key pressed. See [this feature request](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/3446).
-* FEATURE: [vmui](https://docs.victoriametrics.com/#vmui): add explore tab for exploration of metrics, which belong to a particular job/instance. See [this feature request](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/3386).
 * FEATURE: [MetricsQL](https://docs.victoriametrics.com/MetricsQL.html): add `range_trim_spikes(phi, q)` function for trimming `phi` percent of the largest spikes per each time series returned by `q`. See [these docs](https://docs.victoriametrics.com/MetricsQL.html#range_trim_spikes).
 * FEATURE: [MetricsQL](https://docs.victoriametrics.com/MetricsQL.html): allow passing `inf` arg into [limitk](https://docs.victoriametrics.com/MetricsQL.html#limitk), [topk](https://docs.victoriametrics.com/MetricsQL.html#topk), [bottomk](https://docs.victoriametrics.com/MetricsQL.html) and other functions, which accept numeric arg, which limits the number of output time series. See [this feature request](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/3461).
 * FEATURE: [vmgateway](https://docs.victoriametrics.com/vmgateway.html): add support for JWT token signature verification. See [these docs](https://docs.victoriametrics.com/vmgateway.html#jwt-signature-verification) for details.

diff --git a/docs/README.md b/docs/README.md
@@ -272,6 +272,8 @@ Prometheus doesn't drop data during VictoriaMetrics restart. See [this article](
 VictoriaMetrics provides UI for query troubleshooting and exploration. The UI is available at `http://victoriametrics:8428/vmui`.
 The UI allows exploring query results via graphs and tables.
 It also provides the following features:
+
+- [metrics explorer](#metrics-explorer)
 - [cardinality explorer](#cardinality-explorer)
 - [query tracer](#query-tracing)
 - [top queries explorer](#top-queries)
@@ -307,6 +309,18 @@ See the [example VMUI at VictoriaMetrics playground](https://play.victoriametric
 * queries with the biggest average execution duration;
 * queries that took the most summary time for execution.
 
+## Metrics explorer
+
+[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/`.
+2. Click the `Explore metrics` tab.
+3. Select the `job` you want to explore.
+4. Optionally select the `instance` for the selected job to explore.
+5. Select metrics you want to explore and compare.
+
+It is possible to change the selected time range for the graphs in the top right corner.
+
 ## Cardinality explorer
 
 VictoriaMetrics provides an ability to explore time series cardinality at `cardinality` tab in [vmui](#vmui) in the following ways:

diff --git a/docs/Single-server-VictoriaMetrics.md b/docs/Single-server-VictoriaMetrics.md
@@ -275,6 +275,8 @@ Prometheus doesn't drop data during VictoriaMetrics restart. See [this article](
 VictoriaMetrics provides UI for query troubleshooting and exploration. The UI is available at `http://victoriametrics:8428/vmui`.
 The UI allows exploring query results via graphs and tables.
 It also provides the following features:
+
+- [metrics explorer](#metrics-explorer)
 - [cardinality explorer](#cardinality-explorer)
 - [query tracer](#query-tracing)
 - [top queries explorer](#top-queries)
@@ -310,6 +312,18 @@ See the [example VMUI at VictoriaMetrics playground](https://play.victoriametric
 * queries with the biggest average execution duration;
 * queries that took the most summary time for execution.
 
+## Metrics explorer
+
+[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/`.
+2. Click the `Explore metrics` tab.
+3. Select the `job` you want to explore.
+4. Optionally select the `instance` for the selected job to explore.
+5. Select metrics you want to explore and compare.
+
+It is possible to change the selected time range for the graphs in the top right corner.
+
 ## Cardinality explorer
 
 VictoriaMetrics provides an ability to explore time series cardinality at `cardinality` tab in [vmui](#vmui) in the following ways: