mirror of
https://github.com/VictoriaMetrics/VictoriaMetrics.git
synced 2024-11-21 14:44:00 +00:00
app/vmui: UX enhancements for https://github.com/VictoriaMetrics/VictoriaMetrics/issues/3706
- 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
parent
dc7b92bc34
commit
82b5fa2fd0
12 changed files with 56 additions and 60 deletions
|
|
@ -1,14 +1,14 @@
|
|||
{
|
||||
"files": {
|
||||
"main.css": "./static/css/main.08ded1c6.css",
|
||||
"main.js": "./static/js/main.2aca3017.js",
|
||||
"main.css": "./static/css/main.b9c2d13c.css",
|
||||
"main.js": "./static/js/main.40a4969a.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-Bold.ttf": "./static/media/Lato-Bold.32360ba4b57802daa4d6.ttf",
|
||||
"index.html": "./index.html"
|
||||
},
|
||||
"entrypoints": [
|
||||
"static/css/main.08ded1c6.css",
|
||||
"static/js/main.2aca3017.js"
|
||||
"static/css/main.b9c2d13c.css",
|
||||
"static/js/main.40a4969a.js"
|
||||
]
|
||||
}
|
||||
|
|
@ -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>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -63,10 +63,9 @@ const ChartTooltip: FC<ChartTooltipProps> = ({
|
|||
const group = metrics[seriesIdx-1]?.group || 0;
|
||||
|
||||
const metric = metrics[seriesIdx-1]?.metric || {};
|
||||
const labelNames = Object.keys(metric).filter(x => x != "__name__");
|
||||
const metricName = metric["__name__"] || "value";
|
||||
|
||||
const fields = useMemo(() => {
|
||||
const labelNames = Object.keys(metric).filter(x => x != "__name__");
|
||||
return labelNames.map(key => `${key}=${JSON.stringify(metric[key])}`);
|
||||
}, [metrics, seriesIdx]);
|
||||
|
||||
|
|
@ -177,24 +176,21 @@ const ChartTooltip: FC<ChartTooltipProps> = ({
|
|||
className="vm-chart-tooltip-data__marker"
|
||||
style={{ background: color }}
|
||||
/>
|
||||
<p>
|
||||
{calculations.last !== undefined && (
|
||||
<div>
|
||||
avg:<b>{calculations.avg}</b>,
|
||||
max:<b>{calculations.max}</b>,
|
||||
last:<b>{calculations.last}</b>
|
||||
</div>
|
||||
)}
|
||||
{metricName}:<b>{valueFormat}{unit}</b>
|
||||
</p>
|
||||
</div>
|
||||
{!!fields.length && (
|
||||
<div className="vm-chart-tooltip-info">
|
||||
{fields.map((f, i) => (
|
||||
<div key={`${f}_${i}`}>{f}</div>
|
||||
))}
|
||||
<div>
|
||||
curr:<b>{valueFormat}{unit}</b>, avg:<b>{calculations.avg}</b><br/>
|
||||
min:<b>{calculations.min}</b>, max:<b>{calculations.max}</b>, last:<b>{calculations.last}</b>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="vm-chart-tooltip-info">
|
||||
{metric["__name__"]}
|
||||
{
|
||||
{fields.map((f, i) => (
|
||||
<span key="{i}">
|
||||
{f}{i +1 < fields.length && ","}
|
||||
</span>
|
||||
))}
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
), targetPortal);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -66,4 +66,10 @@ $chart-tooltip-y: -1 * ($padding-small + $chart-tooltip-half-icon);
|
|||
height: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
&-info {
|
||||
display: grid;
|
||||
grid-gap: 4px;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -46,36 +46,31 @@ const LegendItem: FC<LegendItemProps> = ({ legend, onChange }) => {
|
|||
/>
|
||||
<div className="vm-legend-item-info">
|
||||
<span className="vm-legend-item-info__label">
|
||||
{legend.freeFormFields["__name__"] || (freeFormFields.length == 0 ? "{}" : "")}
|
||||
</span>
|
||||
{freeFormFields.length > 0 &&
|
||||
<span>
|
||||
{
|
||||
{freeFormFields.map(f => (
|
||||
<Tooltip
|
||||
key={f.id}
|
||||
open={copiedValue === f.id}
|
||||
title={"Copied!"}
|
||||
placement="top-center"
|
||||
{legend.freeFormFields["__name__"]}
|
||||
{
|
||||
{freeFormFields.map((f, i) => (
|
||||
<Tooltip
|
||||
key={f.id}
|
||||
open={copiedValue === f.id}
|
||||
title={"copied!"}
|
||||
placement="top-center"
|
||||
>
|
||||
<span
|
||||
className="vm-legend-item-info__free-fields"
|
||||
key={f.key}
|
||||
onClick={createHandlerCopy(f.freeField, f.id)}
|
||||
title="copy to clipboard"
|
||||
>
|
||||
<span
|
||||
className="vm-legend-item-info__free-fields"
|
||||
key={f.key}
|
||||
onClick={createHandlerCopy(f.freeField, f.id)}
|
||||
>
|
||||
{f.freeField}
|
||||
</span>
|
||||
</Tooltip>
|
||||
))}
|
||||
}
|
||||
</span>
|
||||
}
|
||||
{f.freeField}{i + 1 < freeFormFields.length && ","}
|
||||
</span>
|
||||
</Tooltip>
|
||||
))}
|
||||
}
|
||||
</span>
|
||||
</div>
|
||||
<div className="vm-legend-item-values">
|
||||
avg:{calculations.avg}, min:{calculations.min}, max:{calculations.max}, last:{calculations.last}
|
||||
</div>
|
||||
{calculations.last !== undefined && (
|
||||
<div className="vm-legend-item-values">
|
||||
avg:{calculations.avg}, max:{calculations.max}, last:{calculations.last}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -44,10 +44,6 @@
|
|||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
&:not(:last-child):after {
|
||||
content: ",";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ import { formatPrettyNumber } from "./helpers";
|
|||
export interface SeriesItem extends Series {
|
||||
freeFormFields: {[key: string]: string};
|
||||
calculations: {
|
||||
min: string,
|
||||
max: string,
|
||||
avg: string,
|
||||
last: string
|
||||
|
|
@ -43,6 +44,7 @@ export const getSeriesItemContext = () => {
|
|||
width: 1.4
|
||||
},
|
||||
calculations: {
|
||||
min: formatPrettyNumber(min, min, max),
|
||||
max: formatPrettyNumber(max, min, max),
|
||||
avg: formatPrettyNumber(avg, min, max),
|
||||
last: formatPrettyNumber(last, min, max),
|
||||
|
|
|
|||
|
|
@ -22,6 +22,7 @@ export interface LegendItemType {
|
|||
checked: boolean;
|
||||
freeFormFields: {[key: string]: string};
|
||||
calculations: {
|
||||
min: string;
|
||||
max: string;
|
||||
avg: string;
|
||||
last: string;
|
||||
|
|
|
|||
|
|
@ -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).
|
||||
* 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 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).
|
||||
|
||||
* 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).
|
||||
|
|
|
|||
Loading…
Reference in a new issue