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

app/vmui: show median instead of avg on graph tooltip and line legend

Browse source 
Updates https://github.com/VictoriaMetrics/VictoriaMetrics/issues/3706
This commit is contained in:
Aliaksandr Valialkin 2023-02-11 12:51:10 -08:00
parent 3ec8a4dc80
commit 25a9017a72
No known key found for this signature in database
GPG key ID: A72BEC6CD3D0DED1
10 changed files with 26 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,7 +1,7 @@
{ {
"files": { "files": {
"main.css": "./static/css/main.b9c2d13c.css", "main.css": "./static/css/main.b9c2d13c.css",
"main.js": "./static/js/main.40a4969a.js", "main.js": "./static/js/main.a0c293ea.js",
"static/js/27.c1ccfd29.chunk.js": "./static/js/27.c1ccfd29.chunk.js", "static/js/27.c1ccfd29.chunk.js": "./static/js/27.c1ccfd29.chunk.js",
"static/media/Lato-Regular.ttf": "./static/media/Lato-Regular.d714fec1633b69a9c2e9.ttf", "static/media/Lato-Regular.ttf": "./static/media/Lato-Regular.d714fec1633b69a9c2e9.ttf",
"static/media/Lato-Bold.ttf": "./static/media/Lato-Bold.32360ba4b57802daa4d6.ttf", "static/media/Lato-Bold.ttf": "./static/media/Lato-Bold.32360ba4b57802daa4d6.ttf",
@ -9,6 +9,6 @@
}, },
"entrypoints": [ "entrypoints": [
"static/css/main.b9c2d13c.css", "static/css/main.b9c2d13c.css",
"static/js/main.40a4969a.js" "static/js/main.a0c293ea.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,maximum-scale=1,user-scalable=no"/><meta name="theme-color" content="#000000"/><meta name="description" content="UI for VictoriaMetrics"/><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><script src="./dashboards/index.js" type="module"></script><meta name="twitter:card" content="summary_large_image"><meta name="twitter:image" content="./preview.jpg"><meta name="twitter:title" content="UI for VictoriaMetrics"><meta name="twitter:description" content="Explore and troubleshoot your VictoriaMetrics data"><meta name="twitter:site" content="@VictoriaMetrics"><meta property="og:title" content="Metric explorer for VictoriaMetrics"><meta property="og:description" content="Explore and troubleshoot your VictoriaMetrics data"><meta property="og:image" content="./preview.jpg"><meta property="og:type" content="website"><script defer="defer" src="./static/js/main.40a4969a.js"></script><link href="./static/css/main.b9c2d13c.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,maximum-scale=1,user-scalable=no"/><meta name="theme-color" content="#000000"/><meta name="description" content="UI for VictoriaMetrics"/><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><script src="./dashboards/index.js" type="module"></script><meta name="twitter:card" content="summary_large_image"><meta name="twitter:image" content="./preview.jpg"><meta name="twitter:title" content="UI for VictoriaMetrics"><meta name="twitter:description" content="Explore and troubleshoot your VictoriaMetrics data"><meta name="twitter:site" content="@VictoriaMetrics"><meta property="og:title" content="Metric explorer for VictoriaMetrics"><meta property="og:description" content="Explore and troubleshoot your VictoriaMetrics data"><meta property="og:image" content="./preview.jpg"><meta property="og:type" content="website"><script defer="defer" src="./static/js/main.a0c293ea.js"></script><link href="./static/css/main.b9c2d13c.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>

4
app/vmselect/vmui/static/js/main.40a4969a.js → app/vmselect/vmui/static/js/main.a0c293ea.js
View file

File diff suppressed because one or more lines are too long

0
app/vmselect/vmui/static/js/main.40a4969a.js.LICENSE.txt → app/vmselect/vmui/static/js/main.a0c293ea.js.LICENSE.txt
View file

2
app/vmui/packages/vmui/src/components/Chart/ChartTooltip/ChartTooltip.tsx
View file

@ -177,7 +177,7 @@ const ChartTooltip: FC<ChartTooltipProps> = ({
style={{ background: color }} style={{ background: color }}
/> />
<div> <div>
curr:<b>{valueFormat}{unit}</b>, avg:<b>{calculations.avg}</b><br/> curr:<b>{valueFormat}{unit}</b>, median:<b>{calculations.median}</b><br/>
min:<b>{calculations.min}</b>, max:<b>{calculations.max}</b>, last:<b>{calculations.last}</b> min:<b>{calculations.min}</b>, max:<b>{calculations.max}</b>, last:<b>{calculations.last}</b>
</div> </div>
</div> </div>

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

@ -69,7 +69,7 @@ const LegendItem: FC<LegendItemProps> = ({ legend, onChange }) => {
</span> </span>
</div> </div>
<div className="vm-legend-item-values"> <div className="vm-legend-item-values">
avg:{calculations.avg}, min:{calculations.min}, max:{calculations.max}, last:{calculations.last} median:{calculations.median}, min:{calculations.min}, max:{calculations.max}, last:{calculations.last}
</div> </div>
</div> </div>
); );

13
app/vmui/packages/vmui/src/utils/math.ts
View file

@ -35,6 +35,19 @@ export const getAvgFromArray = (a: number[]) => {
return mean; return mean;
}; };
export const getMedianFromArray = (a: number[]) => {
let len = a.length;
const aCopy = [];
while (len--) {
const v = a[len];
if (Number.isFinite(v)) {
aCopy.push(v);
}
}
aCopy.sort();
return aCopy[aCopy.length>>1];
};
export const getLastFromArray = (a: number[]) => { export const getLastFromArray = (a: number[]) => {
let len = a.length; let len = a.length;
while (len--) { while (len--) {

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

@ -4,7 +4,7 @@ import { getNameForMetric, promValueToNumber } from "../metric";
import { BarSeriesItem, Disp, Fill, LegendItemType, Stroke } from "./types"; import { BarSeriesItem, Disp, Fill, LegendItemType, Stroke } from "./types";
import { HideSeriesArgs } from "./types"; import { HideSeriesArgs } from "./types";
import { baseContrastColors, getColorFromString } from "../color"; import { baseContrastColors, getColorFromString } from "../color";
import { getAvgFromArray, getMaxFromArray, getMinFromArray, getLastFromArray } from "../math"; import { getMedianFromArray, getMaxFromArray, getMinFromArray, getLastFromArray } from "../math";
import { formatPrettyNumber } from "./helpers"; import { formatPrettyNumber } from "./helpers";
export interface SeriesItem extends Series { export interface SeriesItem extends Series {
@ -12,7 +12,7 @@ export interface SeriesItem extends Series {
calculations: { calculations: {
min: string, min: string,
max: string, max: string,
avg: string, median: string,
last: string last: string
} }
} }
@ -29,7 +29,7 @@ export const getSeriesItemContext = () => {
const values = d.values.map(v => promValueToNumber(v[1])); const values = d.values.map(v => promValueToNumber(v[1]));
const min = getMinFromArray(values); const min = getMinFromArray(values);
const max = getMaxFromArray(values); const max = getMaxFromArray(values);
const avg = getAvgFromArray(values); const median = getMedianFromArray(values);
const last = getLastFromArray(values); const last = getLastFromArray(values);
return { return {
@ -46,7 +46,7 @@ export const getSeriesItemContext = () => {
calculations: { calculations: {
min: formatPrettyNumber(min, min, max), min: formatPrettyNumber(min, min, max),
max: formatPrettyNumber(max, min, max), max: formatPrettyNumber(max, min, max),
avg: formatPrettyNumber(avg, min, max), median: formatPrettyNumber(median, min, max),
last: formatPrettyNumber(last, min, max), last: formatPrettyNumber(last, min, max),
} }
}; };

2
app/vmui/packages/vmui/src/utils/uplot/types.ts
View file

@ -24,7 +24,7 @@ export interface LegendItemType {
calculations: { calculations: {
min: string; min: string;
max: string; max: string;
avg: string; median: string;
last: string; last: string;
} }
} }

1
docs/CHANGELOG.md
View file

@ -22,6 +22,7 @@ The following tip changes can be tested by building VictoriaMetrics components f
* FEATURE: [vmauth](https://docs.victoriametrics.com/vmauth.html): choose the backend with the minimum number of concurrently executed requests [among the configured backends](https://docs.victoriametrics.com/vmauth.html#load-balancing) in a round-robin manner for serving the incoming requests. This allows spreading the load among backends more evenly, while improving the response time. * FEATURE: [vmauth](https://docs.victoriametrics.com/vmauth.html): choose the backend with the minimum number of concurrently executed requests [among the configured backends](https://docs.victoriametrics.com/vmauth.html#load-balancing) in a round-robin manner for serving the incoming requests. This allows spreading the load among backends more evenly, while improving the response time.
* FEATURE: [vmalert enterprise](https://docs.victoriametrics.com/vmalert.html): add ability to read alerting and recording rules from S3, GCS or S3-compatible object storage. See [these docs](https://docs.victoriametrics.com/vmalert.html#reading-rules-from-object-storage). * FEATURE: [vmalert enterprise](https://docs.victoriametrics.com/vmalert.html): add ability to read alerting and recording rules from S3, GCS or S3-compatible object storage. See [these docs](https://docs.victoriametrics.com/vmalert.html#reading-rules-from-object-storage).
* FEATURE: [MetricsQL](https://docs.victoriametrics.com/MetricsQL.html): add `mad_over_time(m[d])` function for calculating the [median absolute deviation](https://en.wikipedia.org/wiki/Median_absolute_deviation) over raw samples on the lookbehind window `d`. See [this feature request](https://github.com/prometheus/prometheus/issues/5514). * FEATURE: [MetricsQL](https://docs.victoriametrics.com/MetricsQL.html): add `mad_over_time(m[d])` function for calculating the [median absolute deviation](https://en.wikipedia.org/wiki/Median_absolute_deviation) over raw samples on the lookbehind window `d`. See [this feature request](https://github.com/prometheus/prometheus/issues/5514).
* FEATURE: [vmui](https://docs.victoriametrics.com/#vmui): show `median` instead of `avg` in graph tooltip and line legend, since `median` is more tolerant against spikes. See [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/3706).
* BUGFIX: prevent from possible data ingestion slowdown and query performance slowdown during [background merges of big parts](https://docs.victoriametrics.com/#storage) on systems with small number of CPU cores (1 or 2 CPU cores). The issue has been introduced in [v1.85.0](https://docs.victoriametrics.com/CHANGELOG.html#v1850) when implementing [this feature](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/3337). See also [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/3790). * BUGFIX: prevent from possible data ingestion slowdown and query performance slowdown during [background merges of big parts](https://docs.victoriametrics.com/#storage) on systems with small number of CPU cores (1 or 2 CPU cores). The issue has been introduced in [v1.85.0](https://docs.victoriametrics.com/CHANGELOG.html#v1850) when implementing [this feature](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/3337). See also [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/3790).