mirror of
https://github.com/VictoriaMetrics/VictoriaMetrics.git
synced 2024-11-21 14:44:00 +00:00
vmui: correctly display range results in Table view (#3657)
* fix: properly display range results * fix: set range values to empty array * wip Co-authored-by: Aliaksandr Valialkin <valyala@victoriametrics.com>
This commit is contained in:
Yury Molodov
Aliaksandr Valialkin
parent
d241a71baa
commit
0561ba3557
13 changed files with 33 additions and 20 deletions
|
|
@ -1,12 +1,12 @@
|
|||
{
|
||||
"files": {
|
||||
"main.css": "./static/css/main.01144815.css",
|
||||
"main.js": "./static/js/main.f9c0c050.js",
|
||||
"main.css": "./static/css/main.e8e53cbf.css",
|
||||
"main.js": "./static/js/main.b53fb552.js",
|
||||
"static/js/27.c1ccfd29.chunk.js": "./static/js/27.c1ccfd29.chunk.js",
|
||||
"index.html": "./index.html"
|
||||
},
|
||||
"entrypoints": [
|
||||
"static/css/main.01144815.css",
|
||||
"static/js/main.f9c0c050.js"
|
||||
"static/css/main.e8e53cbf.css",
|
||||
"static/js/main.b53fb552.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"/><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="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono&family=Lato:wght@300;400;700&display=swap" rel="stylesheet"><script src="./dashboards/index.js" type="module"></script><script defer="defer" src="./static/js/main.f9c0c050.js"></script><link href="./static/css/main.01144815.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="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono&family=Lato:wght@300;400;700&display=swap" rel="stylesheet"><script src="./dashboards/index.js" type="module"></script><script defer="defer" src="./static/js/main.b53fb552.js"></script><link href="./static/css/main.e8e53cbf.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
|
|
@ -11,7 +11,8 @@ export interface MetricResult extends MetricBase {
|
|||
|
||||
|
||||
export interface InstantMetricResult extends MetricBase {
|
||||
value: [number, string]
|
||||
value?: [number, string]
|
||||
values?: [number, string][]
|
||||
}
|
||||
|
||||
export interface TracingData {
|
||||
|
|
|
|||
|
|
@ -55,9 +55,8 @@ const ChartTooltip: FC<ChartTooltipProps> = ({
|
|||
|
||||
const color = series[seriesIdx]?.stroke+"";
|
||||
|
||||
const groups = new Set();
|
||||
metrics.forEach(m => groups.add(m.group));
|
||||
const groupsSize = groups.size;
|
||||
const groups = new Set(metrics.map(m => m.group));
|
||||
const showQueryNum = groups.size > 1;
|
||||
const group = metrics[seriesIdx-1]?.group || 0;
|
||||
|
||||
const metric = metrics[seriesIdx-1]?.metric || {};
|
||||
|
|
@ -141,7 +140,7 @@ const ChartTooltip: FC<ChartTooltipProps> = ({
|
|||
>
|
||||
<div className="vm-chart-tooltip-header">
|
||||
<div className="vm-chart-tooltip-header__date">
|
||||
{groupsSize > 1 && (
|
||||
{showQueryNum && (
|
||||
<div>Query {group}</div>
|
||||
)}
|
||||
{date}
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@ const Legend: FC<LegendProps> = ({ labels, query, onChange }) => {
|
|||
const groups = useMemo(() => {
|
||||
return Array.from(new Set(labels.map(l => l.group)));
|
||||
}, [labels]);
|
||||
const showQueryNum = groups.length > 1;
|
||||
|
||||
return <>
|
||||
<div className="vm-legend">
|
||||
|
|
@ -21,7 +22,9 @@ const Legend: FC<LegendProps> = ({ labels, query, onChange }) => {
|
|||
key={group}
|
||||
>
|
||||
<div className="vm-legend-group-title">
|
||||
<span className="vm-legend-group-title__count">Query {group}: </span>
|
||||
{showQueryNum && (
|
||||
<span className="vm-legend-group-title__count">Query {group}: </span>
|
||||
)}
|
||||
<span className="vm-legend-group-title__query">{query[group - 1]}</span>
|
||||
</div>
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -41,13 +41,17 @@ const TableView: FC<GraphViewProps> = ({ data, displayColumns }) => {
|
|||
return `${__name__} ${JSON.stringify(fields)}`;
|
||||
};
|
||||
|
||||
const groups = new Set(data?.map(d => d.group));
|
||||
const showQueryName = groups.size > 1;
|
||||
|
||||
const rows: InstantDataSeries[] = useMemo(() => {
|
||||
const rows = data?.map(d => ({
|
||||
metadata: sortedColumns.map(c => (tableCompact
|
||||
? getNameForMetric(d)
|
||||
? getNameForMetric(d, "", showQueryName)
|
||||
: (d.metric[c.key] || "-")
|
||||
)),
|
||||
value: d.value ? d.value[1] : "-",
|
||||
values: d.values ? d.values.map(([time, val]) => `${val} @${time}`) : [],
|
||||
copyValue: getCopyValue(d.metric)
|
||||
}));
|
||||
const orderByValue = orderBy === "Value";
|
||||
|
|
@ -171,8 +175,8 @@ const TableView: FC<GraphViewProps> = ({ data, displayColumns }) => {
|
|||
{rowMeta}
|
||||
</td>
|
||||
))}
|
||||
<td className="vm-table-cell vm-table-cell_right">
|
||||
{row.value}
|
||||
<td className="vm-table-cell vm-table-cell_right vm-table-cell_no-wrap">
|
||||
{!row.values.length ? row.value : row.values.map(val => <p key={val}>{val}</p>)}
|
||||
</td>
|
||||
{hasCopyValue && (
|
||||
<td className="vm-table-cell vm-table-cell_right">
|
||||
|
|
|
|||
|
|
@ -30,7 +30,8 @@
|
|||
padding: $padding-small;
|
||||
border-bottom: $border-divider;
|
||||
height: 40px;
|
||||
vertical-align: middle;
|
||||
vertical-align: top;
|
||||
line-height: 25px;
|
||||
|
||||
&__content {
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -35,6 +35,7 @@ export interface DataSeries extends MetricBase{
|
|||
export interface InstantDataSeries {
|
||||
metadata: string[]; // just ordered columns
|
||||
value: string;
|
||||
values: string[]
|
||||
copyValue: string;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,9 +1,12 @@
|
|||
import { MetricBase } from "../api/types";
|
||||
|
||||
export const getNameForMetric = (result: MetricBase, alias?: string): string => {
|
||||
export const getNameForMetric = (result: MetricBase, alias?: string, showQueryNum = true): string => {
|
||||
const { __name__, ...freeFormFields } = result.metric;
|
||||
const name = alias || `[Query ${result.group}] ${__name__ || ""}`;
|
||||
const name = alias || `${showQueryNum ? `[Query ${result.group}] ` : ""}${__name__ || ""}`;
|
||||
if (Object.keys(freeFormFields).length == 0) {
|
||||
if (!name) {
|
||||
return "value";
|
||||
}
|
||||
return name;
|
||||
}
|
||||
return `${name}{${Object.entries(freeFormFields).map(e =>
|
||||
|
|
|
|||
|
|
@ -29,6 +29,7 @@ The following tip changes can be tested by building VictoriaMetrics components f
|
|||
* BUGFIX: [vmagent](https://docs.victoriametrics.com/vmagent.html): properly apply [series limit](https://docs.victoriametrics.com/vmagent.html#cardinality-limiter) when [staleness tracking](https://docs.victoriametrics.com/vmagent.html#prometheus-staleness-markers) is disabled.
|
||||
* BUGFIX: [Pushgateway import](https://docs.victoriametrics.com/#how-to-import-data-in-prometheus-exposition-format): properly return `200 OK` HTTP response code. See [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/3636).
|
||||
* BUGFIX: [MetricsQL](https://docs.victoriametrics.com/MetricsQL.html): properly parse `M` and `Mi` suffixes as `1e6` multipliers in `1M` and `1Mi` numeric constants. See [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/3664). The issue has been introduced in [v1.86.0](https://docs.victoriametrics.com/CHANGELOG.html#v1860).
|
||||
* BUGFIX: [vmui](https://docs.victoriametrics.com/#vmui): properly display range query results at `Table` view. For example, `up[5m]` query now shows all the raw samples for the last 5 minutes for the `up` metric at the `Table` view. See [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/3516).
|
||||
|
||||
## [v1.86.1](https://github.com/VictoriaMetrics/VictoriaMetrics/releases/tag/v1.86.1)
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue