Kiu/VictoriaMetrics
Kiu/VictoriaMetrics
1
0
Fork 0
mirror of https://github.com/VictoriaMetrics/VictoriaMetrics.git synced 2024-11-23 12:31:07 +01:00
Code Issues Actions 8 Packages Projects Releases Wiki Activity

app/vmui: follow-up after f6d31f5216

Browse Source 
- 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 https://github.com/VictoriaMetrics/VictoriaMetrics/issues/3386
This commit is contained in:
Aliaksandr Valialkin 2022-12-22 17:13:56 -08:00
parent f6d31f5216
commit 4deea604bf
No known key found for this signature in database
GPG Key ID: A72BEC6CD3D0DED1
17 changed files with 87 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
README.md
View File

@ -271,6 +271,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)
@ -306,6 +308,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:

8
app/vmselect/vmui/asset-manifest.json
View File

@ -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"
]
}

2
app/vmselect/vmui/index.html
View File

@ -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>

1
app/vmselect/vmui/static/css/main.74a50bcc.css Normal file
View File

File diff suppressed because one or more lines are too long

1
app/vmselect/vmui/static/css/main.fdc77f08.css
View File

File diff suppressed because one or more lines are too long

2
app/vmselect/vmui/static/js/main.698139ca.js Normal file
View File

File diff suppressed because one or more lines are too long

0
app/vmselect/vmui/static/js/main.ca04fac1.js.LICENSE.txt → app/vmselect/vmui/static/js/main.698139ca.js.LICENSE.txt
View File

2
app/vmselect/vmui/static/js/main.ca04fac1.js
View File

File diff suppressed because one or more lines are too long

22
app/vmui/packages/vmui/src/api/explore-metrics.ts
View File

@ -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 getNamesUrl = (server: string, job: string, instance: string): string => {
const match = Object.entries({ job, instance })
.filter(val => val[1])
.map(([key, val]) => `${key}="${val}"`)
.join(",");
return `${server}/api/v1/label/__name__/values?match[]={${encodeURIComponent(match)}}`;
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, period: TimeParams, job: string, instance: string): string => {
const filters = Object.entries({ job, instance })
.filter(val => val[1])
.map(([key, val]) => `${key}=${JSON.stringify(val)}`)
.join(",");
const match = `{${filters}}`;
return `${server}/api/v1/label/__name__/values?match[]=${encodeURIComponent(match)}&start=${period.start}&end=${period.end}`;
};

3
app/vmui/packages/vmui/src/pages/ExploreMetrics/ExploreMetricItem/ExploreMetricItem.tsx
View File

@ -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>

38
app/vmui/packages/vmui/src/pages/ExploreMetrics/ExploreMetricItem/ExploreMetricItemGraph.tsx
View File

@ -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],

4
app/vmui/packages/vmui/src/pages/ExploreMetrics/hooks/useFetchNames.ts
View File

@ -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;

2
app/vmui/packages/vmui/src/pages/ExploreMetrics/index.tsx
View File

@ -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">

2
app/vmui/packages/vmui/src/router/index.ts
View File

@ -49,7 +49,7 @@ export const routerOptions: {[key: string]: RouterOptions} = {
header: {}
},
[router.metrics]: {
title: "Explore",
title: "Explore metrics",
header: {
timeSelector: true,
}

2
docs/CHANGELOG.md
View File

@ -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.

14
docs/README.md
View File

@ -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:

14
docs/Single-server-VictoriaMetrics.md
View File

@ -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: