github-mirrors/VictoriaMetrics
1
0
Fork 0
mirror of https://github.com/VictoriaMetrics/VictoriaMetrics.git synced 2024-11-21 14:44:00 +00:00
Code Issues Projects Releases Packages Wiki Activity

vmui: expression alias (#2495)

Browse source 
* feat: add alias for queries

* docs: update docs for predefined dashboards

* app/vmselect: `make vmui-update`

Co-authored-by: Aliaksandr Valialkin <valyala@victoriametrics.com>
This commit is contained in:
Yury Molodov 2022-04-26 15:59:37 +03:00 committed by GitHub
parent 4176be38c4
commit c7693e8bc1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
20 changed files with 1563 additions and 1828 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,14 +1,14 @@
{
"files": {
"main.css": "./static/css/main.d8362c27.css",
"main.js": "./static/js/main.3e17cf70.js",
"static/js/362.1a2113d4.chunk.js": "./static/js/362.1a2113d4.chunk.js",
"main.js": "./static/js/main.d58914e5.js",
"static/js/362.1f16598a.chunk.js": "./static/js/362.1f16598a.chunk.js",
"static/js/27.939f971b.chunk.js": "./static/js/27.939f971b.chunk.js",
"static/media/README.md": "./static/media/README.5e5724daf3ee333540a3.md",
"static/media/README.md": "./static/media/README.40ebc3a1f4adae949154.md",
"index.html": "./index.html"
},
"entrypoints": [
"static/css/main.d8362c27.css",
"static/js/main.3e17cf70.js"
"static/js/main.d58914e5.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="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"/><script defer="defer" src="./static/js/main.3e17cf70.js"></script><link href="./static/css/main.d8362c27.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="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"/><script defer="defer" src="./static/js/main.d58914e5.js"></script><link href="./static/css/main.d8362c27.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/js/362.1a2113d4.chunk.js
View file

@ -1 +0,0 @@
"use strict";(self.webpackChunkvmui=self.webpackChunkvmui||[]).push([[362],{8362:function(e,s,u){e.exports=u.p+"static/media/README.5e5724daf3ee333540a3.md"}}]);

1
app/vmselect/vmui/static/js/362.1f16598a.chunk.js Normal file
View file

@ -0,0 +1 @@
"use strict";(self.webpackChunkvmui=self.webpackChunkvmui||[]).push([[362],{8362:function(e,a,s){e.exports=s.p+"static/media/README.40ebc3a1f4adae949154.md"}}]);

2
app/vmselect/vmui/static/js/main.3e17cf70.js
View file

File diff suppressed because one or more lines are too long

2
app/vmselect/vmui/static/js/main.d58914e5.js Normal file
View file

File diff suppressed because one or more lines are too long

2
app/vmselect/vmui/static/js/main.3e17cf70.js.LICENSE.txt → app/vmselect/vmui/static/js/main.d58914e5.js.LICENSE.txt
View file

@ -28,7 +28,7 @@
* @license MIT
*/
/** @license MUI v5.5.2
/** @license MUI v5.6.1
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.

92
app/vmselect/vmui/static/media/README.40ebc3a1f4adae949154.md Normal file
View file

@ -0,0 +1,92 @@
### Configuration options
<br/>
DashboardSettings:
| Name | Type | Description |
|:----------|:----------------:|---------------------------:|
| rows* | `DashboardRow[]` | Sections containing panels |
| title | `string` | Dashboard title |
<br/>
DashboardRow:
| Name | Type | Description |
|:-----------|:-----------------:|---------------------------:|
| panels* | `PanelSettings[]` | List of panels (charts) |
| title | `string` | Row title |
<br/>
PanelSettings:
| Name | Type | Description |
|:------------|:----------:|--------------------------------------------------------------------------------------:|
| expr* | `string[]` | Data source queries |
| alias | `string[]` | Expression alias. Matched by index in array |
| title | `string` | Panel title |
| description | `string` | Additional information about the panel |
| unit | `string` | Y-axis unit |
| showLegend | `boolean` | If `false`, the legend hide. Default value - `true` |
| width | `number` | The number of columns the panel uses.<br/> From 1 (minimum width) to 12 (full width). |
---
### Example json
```json
{
"title": "Example",
"rows": [
{
"title": "Per-job resource usage",
"panels": [
{
"title": "Per-job CPU usage",
"width": 6,
"expr": [
"sum(rate(process_cpu_seconds_total)) by (job)"
]
},
{
"title": "Per-job RSS usage",
"width": 6,
"expr": [
"sum(process_resident_memory_bytes) by (job)"
]
},
{
"title": "Per-job disk read",
"width": 6,
"expr": [
"sum(rate(process_io_storage_read_bytes_total)) by (job)"
]
},
{
"title": "Per-job disk write",
"width": 6,
"expr": [
"sum(rate(process_io_storage_written_bytes_total)) by (job)"
]
}
]
},
{
"title": "Free/used disk space",
"panels": [
{
"unit": "MB",
"expr": [
"sum(vm_data_size_bytes{type!=\"indexdb\"}) / 1024 / 1024",
"vm_free_disk_space_bytes / 1024 / 1024"
],
"alias": [
"usage space",
"free space"
]
}
]
}
]
}
```

77
app/vmselect/vmui/static/media/README.5e5724daf3ee333540a3.md
View file

@ -1,77 +0,0 @@
### Configuration options
<br/>
DashboardSettings:
| Name | Type | Description |
|:----------|:----------------:|---------------------------:|
| rows* | `DashboardRow[]` | Sections containing panels |
| title | `string` | Dashboard title |
<br/>
DashboardRow:
| Name | Type | Description |
|:-----------|:-----------------:|---------------------------:|
| panels* | `PanelSettings[]` | List of panels (charts) |
| title | `string` | Row title |
<br/>
PanelSettings:
| Name | Type | Description |
|:------------|:----------:|-------------------------------------------------------------------------------------------:|
| expr* | `string[]` | Data source queries |
| title | `string` | Panel title |
| description | `string` | Additional information about the panel |
| unit | `string` | Y-axis unit |
| showLegend | `boolean` | If `false`, the legend hide. Default value - `true` |
| width | `number` | The number of columns the panel uses.<br/> From 1 (minimum width) to 12 (full width). |
---
### Example json
```json
{
"title": "Example",
"rows": [
{
"title": "Performance",
"panels": [
{
"title": "Query duration",
"description": "The less time it takes is better.\n* `*` - unsupported query path\n* `/write` - insert into VM\n* `/metrics` - query VM system metrics\n* `/query` - query instant values\n* `/query_range` - query over a range of time\n* `/series` - match a certain label set\n* `/label/{}/values` - query a list of label values (variables mostly)",
"unit": "ms",
"showLegend": false,
"expr": [
"max(vm_request_duration_seconds{quantile=~\"(0.5|0.99)\"}) by (path, quantile) > 0"
]
},
{
"title": "Concurrent flushes on disk",
"description": "Shows how many ongoing insertions (not API /write calls) on disk are taking place, where:\n* `max` - equal to number of CPUs;\n* `current` - current number of goroutines busy with inserting rows into underlying storage.\n\nEvery successful API /write call results into flush on disk. However, these two actions are separated and controlled via different concurrency limiters. The `max` on this panel can't be changed and always equal to number of CPUs. \n\nWhen `current` hits `max` constantly, it means storage is overloaded and requires more CPU.\n\n",
"expr": [
"sum(vm_concurrent_addrows_capacity)",
"sum(vm_concurrent_addrows_current)"
]
}
]
},
{
"title": "Troubleshooting",
"panels": [
{
"title": "Churn rate",
"description": "Shows the rate and total number of new series created over last 24h.\n\nHigh churn rate tightly connected with database performance and may result in unexpected OOM's or slow queries. It is recommended to always keep an eye on this metric to avoid unexpected cardinality \"explosions\".\n\nThe higher churn rate is, the more resources required to handle it. Consider to keep the churn rate as low as possible.\n\nGood references to read:\n* https://www.robustperception.io/cardinality-is-key\n* https://www.robustperception.io/using-tsdb-analyze-to-investigate-churn-and-cardinality",
"expr": [
"sum(rate(vm_new_timeseries_created_total[5m]))",
"sum(increase(vm_new_timeseries_created_total[24h]))"
]
}
]
}
]
}
```

3094
app/vmui/packages/vmui/package-lock.json generated
View file

File diff suppressed because it is too large Load diff

8
app/vmui/packages/vmui/src/components/CustomPanel/Views/GraphView.tsx
View file

@ -14,6 +14,7 @@ export interface GraphViewProps {
period: TimeParams;
customStep: CustomStep;
query: string[];
alias?: string[],
yaxis: YaxisState;
unit?: string;
showLegend?: boolean;
@ -45,7 +46,8 @@ const GraphView: FC<GraphViewProps> = ({
unit,
showLegend= true,
setYaxisLimits,
setPeriod
setPeriod,
alias = []
}) => {
const currentStep = useMemo(() => customStep.enable ? customStep.value : period.step || 1, [period.step, customStep]);
@ -70,7 +72,7 @@ const GraphView: FC<GraphViewProps> = ({
const tempSeries: uPlotSeries[] = [];
data?.forEach((d) => {
const seriesItem = getSeriesItem(d, hideSeries);
const seriesItem = getSeriesItem(d, hideSeries, alias);
tempSeries.push(seriesItem);
tempLegend.push(getLegendItem(seriesItem, d.group));
let tmpValues = tempValues[d.group];
@ -117,7 +119,7 @@ const GraphView: FC<GraphViewProps> = ({
const tempLegend: LegendItem[] = [];
const tempSeries: uPlotSeries[] = [];
data?.forEach(d => {
const seriesItem = getSeriesItem(d, hideSeries);
const seriesItem = getSeriesItem(d, hideSeries, alias);
tempSeries.push(seriesItem);
tempLegend.push(getLegendItem(seriesItem, d.group));
});

2
app/vmui/packages/vmui/src/components/Legend/Legend.tsx
View file

@ -47,7 +47,7 @@ const Legend: FC<LegendProps> = ({labels, query, onChange}) => {
backgroundColor: `rgba(${hexToRGB(legendItem.color)}, 0.1)`
}}/>
<div className="legendLabel">
{legendItem.freeFormFields.__name__ || `Query ${legendItem.group} result`}
{legendItem.label.replace(/{.+}/gmi, "")}
{!!Object.keys(legendItem.freeFormFields).length && <>
&#160;&#123;
{Object.keys(legendItem.freeFormFields).filter(f => f !== "__name__").map((f) => {

1
app/vmui/packages/vmui/src/components/PredefinedPanels/PredefinedDashboard.tsx
View file

@ -99,6 +99,7 @@ const PredefinedDashboard: FC<PredefinedDashboardProps> = ({index, title, panels
description={p.description}
unit={p.unit}
expr={p.expr}
alias={p.alias}
filename={filename}
showLegend={p.showLegend}/>
<button style={{...resizerStyle, right: 0}}

6
app/vmui/packages/vmui/src/components/PredefinedPanels/PredefinedPanels.tsx
View file

@ -26,7 +26,8 @@ const PredefinedPanels: FC<PredefinedPanelsProps> = ({
unit,
expr,
showLegend,
filename
filename,
alias
}) => {
const {time: {period}} = useAppState();
@ -43,7 +44,7 @@ const PredefinedPanels: FC<PredefinedPanelsProps> = ({
}
});
const validExpr = useMemo(() => Array.isArray(expr) && expr.every(q => typeof q === "string"), [expr]);
const validExpr = useMemo(() => Array.isArray(expr) && expr.every(q => q), [expr]);
const {isLoading, graphData, error} = useFetchQuery({
predefinedQuery: validExpr ? expr : [],
@ -121,6 +122,7 @@ const PredefinedPanels: FC<PredefinedPanelsProps> = ({
query={expr}
yaxis={yaxis}
unit={unit}
alias={alias}
showLegend={showLegend}
setYaxisLimits={setYaxisLimits}
setPeriod={setPeriod}/>

63
app/vmui/packages/vmui/src/dashboards/README.md
View file

@ -8,7 +8,6 @@ DashboardSettings:
| rows* | `DashboardRow[]` | Sections containing panels |
| title | `string` | Dashboard title |
<br/>
DashboardRow:
@ -20,14 +19,15 @@ DashboardRow:
<br/>
PanelSettings:
| Name | Type | Description |
|:------------|:----------:|-------------------------------------------------------------------------------------------:|
| expr* | `string[]` | Data source queries |
| title | `string` | Panel title |
| description | `string` | Additional information about the panel |
| unit | `string` | Y-axis unit |
| showLegend | `boolean` | If `false`, the legend hide. Default value - `true` |
| width | `number` | The number of columns the panel uses.<br/> From 1 (minimum width) to 12 (full width). |
| Name | Type | Description |
|:------------|:----------:|--------------------------------------------------------------------------------------:|
| expr* | `string[]` | Data source queries |
| alias | `string[]` | Expression alias. Matched by index in array |
| title | `string` | Panel title |
| description | `string` | Additional information about the panel |
| unit | `string` | Y-axis unit |
| showLegend | `boolean` | If `false`, the legend hide. Default value - `true` |
| width | `number` | The number of columns the panel uses.<br/> From 1 (minimum width) to 12 (full width). |
---
@ -38,40 +38,55 @@ PanelSettings:
"title": "Example",
"rows": [
{
"title": "Performance",
"title": "Per-job resource usage",
"panels": [
{
"title": "Query duration",
"description": "The less time it takes is better.\n* `*` - unsupported query path\n* `/write` - insert into VM\n* `/metrics` - query VM system metrics\n* `/query` - query instant values\n* `/query_range` - query over a range of time\n* `/series` - match a certain label set\n* `/label/{}/values` - query a list of label values (variables mostly)",
"unit": "ms",
"showLegend": false,
"title": "Per-job CPU usage",
"width": 6,
"expr": [
"max(vm_request_duration_seconds{quantile=~\"(0.5|0.99)\"}) by (path, quantile) > 0"
"sum(rate(process_cpu_seconds_total)) by (job)"
]
},
{
"title": "Concurrent flushes on disk",
"description": "Shows how many ongoing insertions (not API /write calls) on disk are taking place, where:\n* `max` - equal to number of CPUs;\n* `current` - current number of goroutines busy with inserting rows into underlying storage.\n\nEvery successful API /write call results into flush on disk. However, these two actions are separated and controlled via different concurrency limiters. The `max` on this panel can't be changed and always equal to number of CPUs. \n\nWhen `current` hits `max` constantly, it means storage is overloaded and requires more CPU.\n\n",
"title": "Per-job RSS usage",
"width": 6,
"expr": [
"sum(vm_concurrent_addrows_capacity)",
"sum(vm_concurrent_addrows_current)"
"sum(process_resident_memory_bytes) by (job)"
]
},
{
"title": "Per-job disk read",
"width": 6,
"expr": [
"sum(rate(process_io_storage_read_bytes_total)) by (job)"
]
},
{
"title": "Per-job disk write",
"width": 6,
"expr": [
"sum(rate(process_io_storage_written_bytes_total)) by (job)"
]
}
]
},
{
"title": "Troubleshooting",
"title": "Free/used disk space",
"panels": [
{
"title": "Churn rate",
"description": "Shows the rate and total number of new series created over last 24h.\n\nHigh churn rate tightly connected with database performance and may result in unexpected OOM's or slow queries. It is recommended to always keep an eye on this metric to avoid unexpected cardinality \"explosions\".\n\nThe higher churn rate is, the more resources required to handle it. Consider to keep the churn rate as low as possible.\n\nGood references to read:\n* https://www.robustperception.io/cardinality-is-key\n* https://www.robustperception.io/using-tsdb-analyze-to-investigate-churn-and-cardinality",
"unit": "MB",
"expr": [
"sum(rate(vm_new_timeseries_created_total[5m]))",
"sum(increase(vm_new_timeseries_created_total[24h]))"
"sum(vm_data_size_bytes{type!=\"indexdb\"}) / 1024 / 1024",
"vm_free_disk_space_bytes / 1024 / 1024"
],
"alias": [
"usage space",
"free space"
]
}
]
}
]
}
```

1
app/vmui/packages/vmui/src/types/index.ts
View file

@ -40,6 +40,7 @@ export interface PanelSettings {
description?: string;
unit?: string;
expr: string[];
alias?: string[];
showLegend?: boolean;
width?: number
}

11
app/vmui/packages/vmui/src/utils/metric.ts
View file

@ -1,9 +1,12 @@
import {MetricBase} from "../api/types";
export const getNameForMetric = (result: MetricBase): string => {
export const getNameForMetric = (result: MetricBase, alias?: string): string => {
const { __name__, ...freeFormFields } = result.metric;
const name = alias || __name__ || `Query ${result.group} result`;
if (Object.keys(result.metric).length === 0) {
return `Query ${result.group} result`; // a bit better than just {} for case of aggregation functions
return name; // a bit better than just {} for case of aggregation functions
}
const { __name__: name, ...freeFormFields } = result.metric;
return `${name || ""} {${Object.entries(freeFormFields).map(e => `${e[0]}: ${e[1]}`).join(", ")}}`;
return `${name} {${Object.entries(freeFormFields).map(e => `${e[0]}: ${e[1]}`).join(", ")}}`;
};

4
app/vmui/packages/vmui/src/utils/uplot/series.ts
View file

@ -9,8 +9,8 @@ interface SeriesItem extends Series {
freeFormFields: {[key: string]: string};
}
export const getSeriesItem = (d: MetricResult, hideSeries: string[]): SeriesItem => {
const label = getNameForMetric(d);
export const getSeriesItem = (d: MetricResult, hideSeries: string[], alias: string[]): SeriesItem => {
const label = getNameForMetric(d, alias[d.group - 1]);
return {
label,
dash: getDashLine(d.group),

8
app/vmui/packages/vmui/src/utils/uplot/tooltip.ts
View file

@ -1,6 +1,6 @@
import dayjs from "dayjs";
import {SetupTooltip} from "./types";
import {getColorLine,formatPrettyNumber} from "./helpers";
import {getColorLine, formatPrettyNumber} from "./helpers";
export const setTooltip = ({u, tooltipIdx, metrics, series, tooltip, tooltipOffset, unit = ""}: SetupTooltip): void => {
const {seriesIdx, dataIdx} = tooltipIdx;
@ -8,7 +8,8 @@ export const setTooltip = ({u, tooltipIdx, metrics, series, tooltip, tooltipOffs
const dataSeries = u.data[seriesIdx][dataIdx];
const dataTime = u.data[0][dataIdx];
const metric = metrics[seriesIdx - 1]?.metric || {};
const color = getColorLine(Number(series[seriesIdx].scale || 0), series[seriesIdx].label || "");
const selectedSeries = series[seriesIdx];
const color = getColorLine(Number(selectedSeries.scale || 0), selectedSeries.label || "");
const {width, height} = u.over.getBoundingClientRect();
const top = u.valToPos((dataSeries || 0), series[seriesIdx]?.scale || "1");
@ -20,12 +21,13 @@ export const setTooltip = ({u, tooltipIdx, metrics, series, tooltip, tooltipOffs
tooltip.style.display = "grid";
tooltip.style.top = `${tooltipOffset.top + top + 10 - (overflowY ? tooltipHeight + 10 : 0)}px`;
tooltip.style.left = `${tooltipOffset.left + lft + 10 - (overflowX ? tooltipWidth + 20 : 0)}px`;
const name = (selectedSeries.label || "").replace(/{.+}/gmi, "");
const date = dayjs(new Date(dataTime * 1000)).format("YYYY-MM-DD HH:mm:ss:SSS (Z)");
const info = Object.keys(metric).filter(k => k !== "__name__").map(k => `<div><b>${k}</b>: ${metric[k]}</div>`).join("");
const marker = `<div class="u-tooltip__marker" style="background: ${color}"></div>`;
tooltip.innerHTML = `<div>${date}</div>
<div class="u-tooltip-data">
${marker}${metric.__name__ || ""}: <b class="u-tooltip-data__value">${formatPrettyNumber(dataSeries)}</b> ${unit}
${marker}${name}: <b class="u-tooltip-data__value">${formatPrettyNumber(dataSeries)}</b> ${unit}
</div>
<div class="u-tooltip__info">${info}</div>`;
};