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: UX enhancements for https://github.com/VictoriaMetrics/VictoriaMetrics/issues/3706

Browse source 
- Display `min` value additionally to `avg`, `max` and `last`
- Allow copy-n-pasting metric name with its labels from both legend and tooltup
This commit is contained in:
Aliaksandr Valialkin 2023-02-09 11:02:46 -08:00
parent dc7b92bc34
commit 82b5fa2fd0
No known key found for this signature in database
GPG key ID: A72BEC6CD3D0DED1
12 changed files with 56 additions and 60 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": { "files": {
"main.css": "./static/css/main.08ded1c6.css", "main.css": "./static/css/main.b9c2d13c.css",
"main.js": "./static/js/main.2aca3017.js", "main.js": "./static/js/main.40a4969a.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",
"index.html": "./index.html" "index.html": "./index.html"
}, },
"entrypoints": [ "entrypoints": [
"static/css/main.08ded1c6.css", "static/css/main.b9c2d13c.css",
"static/js/main.2aca3017.js" "static/js/main.40a4969a.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.2aca3017.js"></script><link href="./static/css/main.08ded1c6.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.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>

2
app/vmselect/vmui/static/css/main.08ded1c6.css → app/vmselect/vmui/static/css/main.b9c2d13c.css
View file

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

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

@ -63,10 +63,9 @@ const ChartTooltip: FC<ChartTooltipProps> = ({
const group = metrics[seriesIdx-1]?.group || 0; const group = metrics[seriesIdx-1]?.group || 0;
const metric = metrics[seriesIdx-1]?.metric || {}; const metric = metrics[seriesIdx-1]?.metric || {};
const labelNames = Object.keys(metric).filter(x => x != "__name__");
const metricName = metric["__name__"] || "value";
const fields = useMemo(() => { const fields = useMemo(() => {
const labelNames = Object.keys(metric).filter(x => x != "__name__");
return labelNames.map(key => `${key}=${JSON.stringify(metric[key])}`); return labelNames.map(key => `${key}=${JSON.stringify(metric[key])}`);
}, [metrics, seriesIdx]); }, [metrics, seriesIdx]);
@ -177,24 +176,21 @@ const ChartTooltip: FC<ChartTooltipProps> = ({
className="vm-chart-tooltip-data__marker" className="vm-chart-tooltip-data__marker"
style={{ background: color }} style={{ background: color }}
/> />
<p>
{calculations.last !== undefined && (
<div> <div>
avg:<b>{calculations.avg}</b>, curr:<b>{valueFormat}{unit}</b>, avg:<b>{calculations.avg}</b><br/>
max:<b>{calculations.max}</b>, min:<b>{calculations.min}</b>, max:<b>{calculations.max}</b>, last:<b>{calculations.last}</b>
last:<b>{calculations.last}</b>
</div> </div>
)}
{metricName}:<b>{valueFormat}{unit}</b>
</p>
</div> </div>
{!!fields.length && (
<div className="vm-chart-tooltip-info"> <div className="vm-chart-tooltip-info">
{metric["__name__"]}
&#123;
{fields.map((f, i) => ( {fields.map((f, i) => (
<div key={`${f}_${i}`}>{f}</div> <span key="{i}">
{f}{i +1 < fields.length && ","}
</span>
))} ))}
&#125;
</div> </div>
)}
</div> </div>
), targetPortal); ), targetPortal);
}; };

6
app/vmui/packages/vmui/src/components/Chart/ChartTooltip/style.scss
View file

@ -66,4 +66,10 @@ $chart-tooltip-y: -1 * ($padding-small + $chart-tooltip-half-icon);
height: 12px; height: 12px;
} }
} }
&-info {
display: grid;
grid-gap: 4px;
word-break: break-all;
}
} }

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

@ -46,36 +46,31 @@ const LegendItem: FC<LegendItemProps> = ({ legend, onChange }) => {
/> />
<div className="vm-legend-item-info"> <div className="vm-legend-item-info">
<span className="vm-legend-item-info__label"> <span className="vm-legend-item-info__label">
{legend.freeFormFields["__name__"] || (freeFormFields.length == 0 ? "{}" : "")} {legend.freeFormFields["__name__"]}
</span>
{freeFormFields.length > 0 &&
<span>
&#123; &#123;
{freeFormFields.map(f => ( {freeFormFields.map((f, i) => (
<Tooltip <Tooltip
key={f.id} key={f.id}
open={copiedValue === f.id} open={copiedValue === f.id}
title={"Copied!"} title={"copied!"}
placement="top-center" placement="top-center"
> >
<span <span
className="vm-legend-item-info__free-fields" className="vm-legend-item-info__free-fields"
key={f.key} key={f.key}
onClick={createHandlerCopy(f.freeField, f.id)} onClick={createHandlerCopy(f.freeField, f.id)}
title="copy to clipboard"
> >
{f.freeField} {f.freeField}{i + 1 < freeFormFields.length && ","}
</span> </span>
</Tooltip> </Tooltip>
))} ))}
&#125; &#125;
</span> </span>
}
</div> </div>
{calculations.last !== undefined && (
<div className="vm-legend-item-values"> <div className="vm-legend-item-values">
avg:{calculations.avg}, max:{calculations.max}, last:{calculations.last} avg:{calculations.avg}, min:{calculations.min}, max:{calculations.max}, last:{calculations.last}
</div> </div>
)}
</div> </div>
); );
}; };

4
app/vmui/packages/vmui/src/components/Chart/Legend/LegendItem/style.scss
View file

@ -44,10 +44,6 @@
&:hover { &:hover {
text-decoration: underline; text-decoration: underline;
} }
&:not(:last-child):after {
content: ",";
}
} }
} }

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

@ -10,6 +10,7 @@ import { formatPrettyNumber } from "./helpers";
export interface SeriesItem extends Series { export interface SeriesItem extends Series {
freeFormFields: {[key: string]: string}; freeFormFields: {[key: string]: string};
calculations: { calculations: {
min: string,
max: string, max: string,
avg: string, avg: string,
last: string last: string
@ -43,6 +44,7 @@ export const getSeriesItemContext = () => {
width: 1.4 width: 1.4
}, },
calculations: { calculations: {
min: formatPrettyNumber(min, min, max),
max: formatPrettyNumber(max, min, max), max: formatPrettyNumber(max, min, max),
avg: formatPrettyNumber(avg, min, max), avg: formatPrettyNumber(avg, min, max),
last: formatPrettyNumber(last, min, max), last: formatPrettyNumber(last, min, max),

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

@ -22,6 +22,7 @@ export interface LegendItemType {
checked: boolean; checked: boolean;
freeFormFields: {[key: string]: string}; freeFormFields: {[key: string]: string};
calculations: { calculations: {
min: string;
max: string; max: string;
avg: string; avg: string;
last: string; last: string;

2
docs/CHANGELOG.md
View file

@ -20,7 +20,7 @@ The following tip changes can be tested by building VictoriaMetrics components f
While previously state restore attempt was made for all the loaded alerting rules, now it is called only for alerts which became active after the first evaluation. See [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/2608). While previously state restore attempt was made for all the loaded alerting rules, now it is called only for alerts which became active after the first evaluation. See [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/2608).
* FEATURE: [vmui](https://docs.victoriametrics.com/#vmui): optimize VMUI for use from smartphones and tablets. See [this feature request](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/3707). * FEATURE: [vmui](https://docs.victoriametrics.com/#vmui): optimize VMUI for use from smartphones and tablets. See [this feature request](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/3707).
* FEATURE: [vmui](https://docs.victoriametrics.com/#vmui): add ability to search tenants in the drop-down list for the tenant selector. See [this feature request](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/3792). * FEATURE: [vmui](https://docs.victoriametrics.com/#vmui): add ability to search tenants in the drop-down list for the tenant selector. See [this feature request](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/3792).
* FEATURE: [vmui](https://docs.victoriametrics.com/#vmui): add avg/max/last values to line legends and tooltips for graphs. See [this feature request](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/3706). * FEATURE: [vmui](https://docs.victoriametrics.com/#vmui): add avg/min/max/last values to line legends and tooltips for graphs. See [this feature request](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/3706).
* FEATURE: [vmui](https://docs.victoriametrics.com/#vmui): hide the default `per-job resource usage` dashboard if there is a custom dashboard exists at the directory specified via `-vmui.customDashboardsPath` command-line flag. See [this feature request](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/3740). * FEATURE: [vmui](https://docs.victoriametrics.com/#vmui): hide the default `per-job resource usage` dashboard if there is a custom dashboard exists at the directory specified via `-vmui.customDashboardsPath` command-line flag. See [this feature request](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/3740).
* BUGFIX: [vmagent](https://docs.victoriametrics.com/vmagent.html): fix panic in [HashiCorp Nomad service discovery](https://docs.victoriametrics.com/sd_configs.html#nomad_sd_configs). Thanks to @mr-karan for the [pull request](https://github.com/VictoriaMetrics/VictoriaMetrics/pull/3784). * BUGFIX: [vmagent](https://docs.victoriametrics.com/vmagent.html): fix panic in [HashiCorp Nomad service discovery](https://docs.victoriametrics.com/sd_configs.html#nomad_sd_configs). Thanks to @mr-karan for the [pull request](https://github.com/VictoriaMetrics/VictoriaMetrics/pull/3784).