github-mirrors/VictoriaMetrics
1
0
Fork 0
mirror of https://github.com/VictoriaMetrics/VictoriaMetrics.git synced 2024-12-01 14:47:38 +00:00
Code Issues Projects Releases Packages Wiki Activity

app/vmui: tooltip formatting enhancements according to https://github.com/VictoriaMetrics/VictoriaMetrics/issues/3706#issuecomment-1429980038

Browse source
This commit is contained in:
Aliaksandr Valialkin 2023-02-14 23:37:11 -08:00
parent ecc84f7923
commit 7274424252
No known key found for this signature in database
GPG key ID: A72BEC6CD3D0DED1
5 changed files with 16 additions and 18 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.a0c293ea.js", "main.js": "./static/js/main.44784d74.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.a0c293ea.js" "static/js/main.44784d74.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.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> <!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.44784d74.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.a0c293ea.js → app/vmselect/vmui/static/js/main.44784d74.js
View file

File diff suppressed because one or more lines are too long

0
app/vmselect/vmui/static/js/main.a0c293ea.js.LICENSE.txt → app/vmselect/vmui/static/js/main.44784d74.js.LICENSE.txt
View file

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

@ -62,11 +62,16 @@ const ChartTooltip: FC<ChartTooltipProps> = ({
const showQueryNum = groups.size > 1; const showQueryNum = groups.size > 1;
const group = metrics[seriesIdx-1]?.group || 0; const group = metrics[seriesIdx-1]?.group || 0;
const metric = metrics[seriesIdx-1]?.metric || {};
const fields = useMemo(() => { const fullMetricName = useMemo(() => {
const metric = metrics[seriesIdx-1]?.metric || {};
const labelNames = Object.keys(metric).filter(x => x != "__name__"); const labelNames = Object.keys(metric).filter(x => x != "__name__");
return labelNames.map(key => `${key}=${JSON.stringify(metric[key])}`); const labels = labelNames.map(key => `${key}=${JSON.stringify(metric[key])}`);
let metricName = metric["__name__"] || "";
if (labels.length > 0) {
metricName += "{" + labels.join(",") + "}";
}
return metricName;
}, [metrics, seriesIdx]); }, [metrics, seriesIdx]);
const handleClose = () => { const handleClose = () => {
@ -177,19 +182,12 @@ const ChartTooltip: FC<ChartTooltipProps> = ({
style={{ background: color }} style={{ background: color }}
/> />
<div> <div>
curr:<b>{valueFormat}{unit}</b>, median:<b>{calculations.median}</b><br/> <b>{valueFormat}{unit}</b><br/>
min:<b>{calculations.min}</b>, max:<b>{calculations.max}</b>, last:<b>{calculations.last}</b> median:<b>{calculations.median}</b>, min:<b>{calculations.min}</b>, max:<b>{calculations.max}</b>
</div> </div>
</div> </div>
<div className="vm-chart-tooltip-info"> <div className="vm-chart-tooltip-info">
{metric["__name__"]} {fullMetricName}
&#123;
{fields.map((f, i) => (
<span key="{i}">
{f}{i +1 < fields.length && ","}
</span>
))}
&#125;
</div> </div>
</div> </div>
), targetPortal); ), targetPortal);