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

vmui: correctly display range results in Table view (#3657)

Browse source 
* 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 2023-01-18 06:03:28 +01:00 committed by Aliaksandr Valialkin
parent d241a71baa
commit 0561ba3557
No known key found for this signature in database
GPG key ID: A72BEC6CD3D0DED1
13 changed files with 33 additions and 20 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,12 +1,12 @@
{ {
"files": { "files": {
"main.css": "./static/css/main.01144815.css", "main.css": "./static/css/main.e8e53cbf.css",
"main.js": "./static/js/main.f9c0c050.js", "main.js": "./static/js/main.b53fb552.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",
"index.html": "./index.html" "index.html": "./index.html"
}, },
"entrypoints": [ "entrypoints": [
"static/css/main.01144815.css", "static/css/main.e8e53cbf.css",
"static/js/main.f9c0c050.js" "static/js/main.b53fb552.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"/><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>

2
app/vmselect/vmui/static/css/main.01144815.css → app/vmselect/vmui/static/css/main.e8e53cbf.css
View file

File diff suppressed because one or more lines are too long

4
app/vmselect/vmui/static/js/main.f9c0c050.js → app/vmselect/vmui/static/js/main.b53fb552.js
View file

File diff suppressed because one or more lines are too long

0
app/vmselect/vmui/static/js/main.f9c0c050.js.LICENSE.txt → app/vmselect/vmui/static/js/main.b53fb552.js.LICENSE.txt
View file

3
app/vmui/packages/vmui/src/api/types.ts
View file

@ -11,7 +11,8 @@ export interface MetricResult extends MetricBase {
export interface InstantMetricResult extends MetricBase { export interface InstantMetricResult extends MetricBase {
value: [number, string] value?: [number, string]
values?: [number, string][]
} }
export interface TracingData { export interface TracingData {

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

@ -55,9 +55,8 @@ const ChartTooltip: FC<ChartTooltipProps> = ({
const color = series[seriesIdx]?.stroke+""; const color = series[seriesIdx]?.stroke+"";
const groups = new Set(); const groups = new Set(metrics.map(m => m.group));
metrics.forEach(m => groups.add(m.group)); const showQueryNum = groups.size > 1;
const groupsSize = groups.size;
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 || {};
@ -141,7 +140,7 @@ const ChartTooltip: FC<ChartTooltipProps> = ({
> >
<div className="vm-chart-tooltip-header"> <div className="vm-chart-tooltip-header">
<div className="vm-chart-tooltip-header__date"> <div className="vm-chart-tooltip-header__date">
{groupsSize > 1 && ( {showQueryNum && (
<div>Query {group}</div> <div>Query {group}</div>
)} )}
{date} {date}

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

@ -13,6 +13,7 @@ const Legend: FC<LegendProps> = ({ labels, query, onChange }) => {
const groups = useMemo(() => { const groups = useMemo(() => {
return Array.from(new Set(labels.map(l => l.group))); return Array.from(new Set(labels.map(l => l.group)));
}, [labels]); }, [labels]);
const showQueryNum = groups.length > 1;
return <> return <>
<div className="vm-legend"> <div className="vm-legend">
@ -21,7 +22,9 @@ const Legend: FC<LegendProps> = ({ labels, query, onChange }) => {
key={group} key={group}
> >
<div className="vm-legend-group-title"> <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> <span className="vm-legend-group-title__query">{query[group - 1]}</span>
</div> </div>
<div> <div>

10
app/vmui/packages/vmui/src/components/Views/TableView/TableView.tsx
View file

@ -41,13 +41,17 @@ const TableView: FC<GraphViewProps> = ({ data, displayColumns }) => {
return `${__name__} ${JSON.stringify(fields)}`; 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: InstantDataSeries[] = useMemo(() => {
const rows = data?.map(d => ({ const rows = data?.map(d => ({
metadata: sortedColumns.map(c => (tableCompact metadata: sortedColumns.map(c => (tableCompact
? getNameForMetric(d) ? getNameForMetric(d, "", showQueryName)
: (d.metric[c.key] || "-") : (d.metric[c.key] || "-")
)), )),
value: d.value ? d.value[1] : "-", value: d.value ? d.value[1] : "-",
values: d.values ? d.values.map(([time, val]) => `${val} @${time}`) : [],
copyValue: getCopyValue(d.metric) copyValue: getCopyValue(d.metric)
})); }));
const orderByValue = orderBy === "Value"; const orderByValue = orderBy === "Value";
@ -171,8 +175,8 @@ const TableView: FC<GraphViewProps> = ({ data, displayColumns }) => {
{rowMeta} {rowMeta}
</td> </td>
))} ))}
<td className="vm-table-cell vm-table-cell_right"> <td className="vm-table-cell vm-table-cell_right vm-table-cell_no-wrap">
{row.value} {!row.values.length ? row.value : row.values.map(val => <p key={val}>{val}</p>)}
</td> </td>
{hasCopyValue && ( {hasCopyValue && (
<td className="vm-table-cell vm-table-cell_right"> <td className="vm-table-cell vm-table-cell_right">

3
app/vmui/packages/vmui/src/styles/components/table.scss
View file

@ -30,7 +30,8 @@
padding: $padding-small; padding: $padding-small;
border-bottom: $border-divider; border-bottom: $border-divider;
height: 40px; height: 40px;
vertical-align: middle; vertical-align: top;
line-height: 25px;
&__content { &__content {
display: flex; display: flex;

1
app/vmui/packages/vmui/src/types/index.ts
View file

@ -35,6 +35,7 @@ export interface DataSeries extends MetricBase{
export interface InstantDataSeries { export interface InstantDataSeries {
metadata: string[]; // just ordered columns metadata: string[]; // just ordered columns
value: string; value: string;
values: string[]
copyValue: string; copyValue: string;
} }

7
app/vmui/packages/vmui/src/utils/metric.ts
View file

@ -1,9 +1,12 @@
import { MetricBase } from "../api/types"; 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__, ...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 (Object.keys(freeFormFields).length == 0) {
if (!name) {
return "value";
}
return name; return name;
} }
return `${name}{${Object.entries(freeFormFields).map(e => return `${name}{${Object.entries(freeFormFields).map(e =>

1
docs/CHANGELOG.md
View file

@ -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: [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: [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: [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) ## [v1.86.1](https://github.com/VictoriaMetrics/VictoriaMetrics/releases/tag/v1.86.1)