mirror of
https://github.com/VictoriaMetrics/VictoriaMetrics.git
synced 2024-11-21 14:44:00 +00:00
app/vmui: small UX enhancements
- Reduce vertical space usage, so more information is available on the screen without the need to scroll. - Show information for lines with higher values at the top of the legend under the graph. This should simplify graph analysis when it contains many lines.
This commit is contained in:
Aliaksandr Valialkin
parent
ca35e0d66a
commit
b86bec8109
40 changed files with 4092 additions and 81 deletions
|
|
@ -1,14 +1,13 @@
|
|||
{
|
||||
"files": {
|
||||
"main.css": "./static/css/main.3258b6c4.css",
|
||||
"main.js": "./static/js/main.41b816cc.js",
|
||||
"main.css": "./static/css/main.9a224445.css",
|
||||
"main.js": "./static/js/main.02178f4b.js",
|
||||
"static/js/522.b5ae4365.chunk.js": "./static/js/522.b5ae4365.chunk.js",
|
||||
"static/media/Lato-Regular.ttf": "./static/media/Lato-Regular.d714fec1633b69a9c2e9.ttf",
|
||||
"static/media/Lato-Bold.ttf": "./static/media/Lato-Bold.32360ba4b57802daa4d6.ttf",
|
||||
"static/media/MetricsQL.md": "./static/media/MetricsQL.957b90ab4cb4852eec26.md",
|
||||
"index.html": "./index.html"
|
||||
},
|
||||
"entrypoints": [
|
||||
"static/css/main.3258b6c4.css",
|
||||
"static/js/main.41b816cc.js"
|
||||
"static/css/main.9a224445.css",
|
||||
"static/js/main.02178f4b.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=5"/><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.41b816cc.js"></script><link href="./static/css/main.3258b6c4.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=5"/><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.02178f4b.js"></script><link href="./static/css/main.9a224445.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
1
app/vlselect/vmui/static/css/main.9a224445.css
Normal file
1
app/vlselect/vmui/static/css/main.9a224445.css
Normal file
File diff suppressed because one or more lines are too long
2
app/vlselect/vmui/static/js/main.02178f4b.js
Normal file
2
app/vlselect/vmui/static/js/main.02178f4b.js
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
2014
app/vlselect/vmui/static/media/MetricsQL.957b90ab4cb4852eec26.md
Normal file
2014
app/vlselect/vmui/static/media/MetricsQL.957b90ab4cb4852eec26.md
Normal file
File diff suppressed because it is too large
Load diff
|
|
@ -1,14 +1,13 @@
|
|||
{
|
||||
"files": {
|
||||
"main.css": "./static/css/main.4ab6595e.css",
|
||||
"main.js": "./static/js/main.dbf8fb4f.js",
|
||||
"main.css": "./static/css/main.d9ac05de.css",
|
||||
"main.js": "./static/js/main.70434a4f.js",
|
||||
"static/js/522.b5ae4365.chunk.js": "./static/js/522.b5ae4365.chunk.js",
|
||||
"static/media/Lato-Regular.ttf": "./static/media/Lato-Regular.d714fec1633b69a9c2e9.ttf",
|
||||
"static/media/Lato-Bold.ttf": "./static/media/Lato-Bold.32360ba4b57802daa4d6.ttf",
|
||||
"static/media/MetricsQL.md": "./static/media/MetricsQL.957b90ab4cb4852eec26.md",
|
||||
"index.html": "./index.html"
|
||||
},
|
||||
"entrypoints": [
|
||||
"static/css/main.4ab6595e.css",
|
||||
"static/js/main.dbf8fb4f.js"
|
||||
"static/css/main.d9ac05de.css",
|
||||
"static/js/main.70434a4f.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=5"/><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.dbf8fb4f.js"></script><link href="./static/css/main.4ab6595e.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=5"/><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.70434a4f.js"></script><link href="./static/css/main.d9ac05de.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
1
app/vmselect/vmui/static/css/main.d9ac05de.css
Normal file
1
app/vmselect/vmui/static/css/main.d9ac05de.css
Normal file
File diff suppressed because one or more lines are too long
2
app/vmselect/vmui/static/js/main.70434a4f.js
Normal file
2
app/vmselect/vmui/static/js/main.70434a4f.js
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
2014
app/vmselect/vmui/static/media/MetricsQL.957b90ab4cb4852eec26.md
Normal file
2014
app/vmselect/vmui/static/media/MetricsQL.957b90ab4cb4852eec26.md
Normal file
File diff suppressed because it is too large
Load diff
Binary file not shown.
Binary file not shown.
|
|
@ -6,7 +6,7 @@ import classNames from "classnames";
|
|||
import uPlot from "uplot";
|
||||
import Button from "../../Main/Button/Button";
|
||||
import { CloseIcon, DragIcon } from "../../Main/Icons";
|
||||
import { SeriesItemStats } from "../../../types";
|
||||
import { SeriesItemStatsFormatted } from "../../../types";
|
||||
import { STATS_ORDER } from "../../../constants/graph";
|
||||
|
||||
export interface ChartTooltipProps {
|
||||
|
|
@ -17,7 +17,7 @@ export interface ChartTooltipProps {
|
|||
value: string | number | null;
|
||||
point: { top: number, left: number };
|
||||
unit?: string;
|
||||
stats?: SeriesItemStats;
|
||||
statsFormatted?: SeriesItemStatsFormatted;
|
||||
isSticky?: boolean;
|
||||
info?: string;
|
||||
marker?: string;
|
||||
|
|
@ -34,7 +34,7 @@ const ChartTooltip: FC<ChartTooltipProps> = ({
|
|||
point,
|
||||
unit = "",
|
||||
info,
|
||||
stats,
|
||||
statsFormatted,
|
||||
isSticky,
|
||||
marker,
|
||||
onClose
|
||||
|
|
@ -159,7 +159,7 @@ const ChartTooltip: FC<ChartTooltipProps> = ({
|
|||
<b>{value}</b>{unit}
|
||||
</p>
|
||||
</div>
|
||||
{stats && (
|
||||
{statsFormatted && (
|
||||
<table className="vm-chart-tooltip-stats">
|
||||
{STATS_ORDER.map((key, i) => (
|
||||
<div
|
||||
|
|
@ -167,7 +167,7 @@ const ChartTooltip: FC<ChartTooltipProps> = ({
|
|||
key={i}
|
||||
>
|
||||
<span className="vm-chart-tooltip-stats-row__key">{key}:</span>
|
||||
<span className="vm-chart-tooltip-stats-row__value">{stats[key]}</span>
|
||||
<span className="vm-chart-tooltip-stats-row__value">{statsFormatted[key]}</span>
|
||||
</div>
|
||||
))}
|
||||
</table>
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@ const Legend: FC<LegendProps> = ({ labels, query, onChange }) => {
|
|||
)}
|
||||
>
|
||||
<div>
|
||||
{labels.filter(l => l.group === group).map((legendItem: LegendItemType) =>
|
||||
{labels.filter(l => l.group === group).sort((x, y) => (y.median || 0) - (x.median || 0)).map((legendItem: LegendItemType) =>
|
||||
<LegendItem
|
||||
key={legendItem.label}
|
||||
legend={legendItem}
|
||||
|
|
|
|||
|
|
@ -21,8 +21,8 @@ const LegendItem: FC<LegendItemProps> = ({ legend, onChange, isHeatmap }) => {
|
|||
return isHeatmap ? result.filter(f => f.key !== "vmrange") : result;
|
||||
}, [legend, isHeatmap]);
|
||||
|
||||
const calculations = legend.calculations;
|
||||
const showCalculations = Object.values(calculations).some(v => v);
|
||||
const statsFormatted = legend.statsFormatted;
|
||||
const showStats = Object.values(statsFormatted).some(v => v);
|
||||
|
||||
const handleClickFreeField = async (val: string) => {
|
||||
await copyToClipboard(val, `${val} has been copied`);
|
||||
|
|
@ -70,7 +70,7 @@ const LegendItem: FC<LegendItemProps> = ({ legend, onChange, isHeatmap }) => {
|
|||
{!!freeFormFields.length && <>}</>}
|
||||
</span>
|
||||
</div>
|
||||
{!isHeatmap && showCalculations && (
|
||||
{!isHeatmap && showStats && (
|
||||
<div className="vm-legend-item-stats">
|
||||
{STATS_ORDER.map((key, i) => (
|
||||
<div
|
||||
|
|
@ -78,7 +78,7 @@ const LegendItem: FC<LegendItemProps> = ({ legend, onChange, isHeatmap }) => {
|
|||
key={i}
|
||||
>
|
||||
<span className="vm-legend-item-stats-row__key">{key}:</span>
|
||||
<span className="vm-legend-item-stats-row__value">{calculations[key]}</span>
|
||||
<span className="vm-legend-item-stats-row__value">{statsFormatted[key]}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,6 @@
|
|||
background-color: $color-background-block;
|
||||
cursor: pointer;
|
||||
transition: 0.2s ease;
|
||||
margin-bottom: $padding-small;
|
||||
font-size: $font-size-small;
|
||||
|
||||
&:hover {
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ $switch-handle-size: $switch-height - ($switch-padding * 2);
|
|||
$switch-border-radius: $switch-handle-size + ($switch-padding * 2);
|
||||
|
||||
.vm-switch {
|
||||
font-size: $font-size-small;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
|
|
|
|||
|
|
@ -84,10 +84,10 @@
|
|||
}
|
||||
|
||||
&__input {
|
||||
font-family: $font-family-monospace;
|
||||
display: block;
|
||||
border-radius: $border-radius-small;
|
||||
transition: border 200ms ease;
|
||||
min-height: 40px;
|
||||
resize: none;
|
||||
overflow: hidden;
|
||||
background-color: transparent;
|
||||
|
|
|
|||
|
|
@ -89,12 +89,12 @@ const NestedNav: FC<RecursiveProps> = ({ isRoot, trace, totalMsec }) => {
|
|||
})}
|
||||
ref={messageRef}
|
||||
>
|
||||
<span className="vm-nested-nav-header__message_duration">
|
||||
{duration}
|
||||
</span>:
|
||||
<span>{trace.message}</span>
|
||||
</div>
|
||||
<div className="vm-nested-nav-header-bottom">
|
||||
<div className="vm-nested-nav-header-bottom__duration">
|
||||
{`duration: ${duration}`}
|
||||
</div>
|
||||
{(isExpanded || showFullMessage) && (
|
||||
<Button
|
||||
variant="text"
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ $color-base-nested-nav-dark: $color-background-body;
|
|||
|
||||
.vm-nested-nav {
|
||||
position: relative;
|
||||
margin-left: $padding-global;
|
||||
margin-left: $padding-small;
|
||||
border-radius: $border-radius-small;
|
||||
|
||||
&_dark &-header {
|
||||
|
|
@ -58,7 +58,7 @@ $color-base-nested-nav-dark: $color-background-body;
|
|||
content: "";
|
||||
position: absolute;
|
||||
bottom: 50%;
|
||||
left: calc($padding-global / -2);
|
||||
left: calc(-1 * $padding-small);
|
||||
height: calc(50% + $padding-small);
|
||||
width: 2px;
|
||||
background-color: $color-base-nested-nav;
|
||||
|
|
@ -103,6 +103,10 @@ $color-base-nested-nav-dark: $color-background-body;
|
|||
display: block;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
&_duration {
|
||||
color: $color-text-secondary;
|
||||
}
|
||||
}
|
||||
|
||||
&-bottom {
|
||||
|
|
@ -110,10 +114,6 @@ $color-base-nested-nav-dark: $color-background-body;
|
|||
grid-template-columns: 1fr auto;
|
||||
align-items: center;
|
||||
grid-column: 2;
|
||||
|
||||
&__duration {
|
||||
color: $color-text-secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -122,7 +122,7 @@ $color-base-nested-nav-dark: $color-background-body;
|
|||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: calc($padding-global / -2);
|
||||
left: calc(-1 * $padding-small);
|
||||
height: 100%;
|
||||
width: 2px;
|
||||
background-color: $color-base-nested-nav;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { GraphSize, SeriesItemStats } from "../types";
|
||||
import { GraphSize, SeriesItemStatsFormatted } from "../types";
|
||||
|
||||
export const MAX_QUERY_FIELDS = 4;
|
||||
export const MAX_QUERIES_HISTORY = 25;
|
||||
|
|
@ -11,11 +11,11 @@ export const DEFAULT_MAX_SERIES = {
|
|||
export const GRAPH_SIZES: GraphSize[] = [
|
||||
{
|
||||
id: "small",
|
||||
isDefault: true,
|
||||
height: () => window.innerHeight * 0.2
|
||||
},
|
||||
{
|
||||
id: "medium",
|
||||
isDefault: true,
|
||||
height: () => window.innerHeight * 0.4
|
||||
},
|
||||
{
|
||||
|
|
@ -24,4 +24,4 @@ export const GRAPH_SIZES: GraphSize[] = [
|
|||
},
|
||||
];
|
||||
|
||||
export const STATS_ORDER: (keyof SeriesItemStats)[] = ["min", "median", "max"];
|
||||
export const STATS_ORDER: (keyof SeriesItemStatsFormatted)[] = ["min", "median", "max"];
|
||||
|
|
|
|||
|
|
@ -64,7 +64,7 @@ const useLineTooltip = ({ u, metrics, series, unit }: LineTooltipHook) => {
|
|||
dates: [date ? dayjs(date * 1000).tz().format(DATE_FULL_TIMEZONE_FORMAT) : "-"],
|
||||
value: formatPrettyNumber(value, min, max),
|
||||
info: getMetricName(metricItem),
|
||||
stats: seriesItem?.calculations,
|
||||
statsFormatted: seriesItem?.statsFormatted,
|
||||
marker: `${seriesItem?.stroke}`,
|
||||
};
|
||||
}, [u, tooltipIdx, metrics, series, unit]);
|
||||
|
|
|
|||
|
|
@ -24,6 +24,7 @@
|
|||
|
||||
&__button {
|
||||
display: grid;
|
||||
align-items: start;
|
||||
width: 36px;
|
||||
min-height: 36px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -26,9 +26,8 @@
|
|||
}
|
||||
|
||||
&-cell {
|
||||
padding: 12px;
|
||||
padding: 4px;
|
||||
border-bottom: $border-divider;
|
||||
height: 40px;
|
||||
vertical-align: top;
|
||||
line-height: 1.5;
|
||||
overflow-wrap: anywhere;
|
||||
|
|
|
|||
|
|
@ -1,15 +0,0 @@
|
|||
@font-face {
|
||||
font-family: 'Lato';
|
||||
src: url('../assets/fonts/Lato/Lato-Regular.ttf');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Lato';
|
||||
src: url('../assets/fonts/Lato/Lato-Bold.ttf');
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
|
@ -1,7 +1,6 @@
|
|||
@forward "variables";
|
||||
@forward "core";
|
||||
@forward "reset";
|
||||
@forward "fonts";
|
||||
|
||||
@forward "./components/header-button";
|
||||
@forward "./components/list";
|
||||
|
|
|
|||
|
|
@ -31,14 +31,14 @@ $color-background-tooltip: var(--color-background-tooltip);
|
|||
|
||||
|
||||
/************* padding *************/
|
||||
$padding-global: 16px;
|
||||
$padding-large: 48px;
|
||||
$padding-medium: 24px;
|
||||
$padding-global: 12px;
|
||||
$padding-large: 16px;
|
||||
$padding-medium: 12px;
|
||||
$padding-small: 8px;
|
||||
|
||||
|
||||
/************* fonts *************/
|
||||
$font-family-global: 'Lato', sans-serif;
|
||||
$font-family-global: system-ui;
|
||||
$font-family-monospace: monospace;
|
||||
$font-size-large: 18px;
|
||||
$font-size-medium: 16px;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { Axis, Series } from "uplot";
|
||||
|
||||
export interface SeriesItemStats {
|
||||
export interface SeriesItemStatsFormatted {
|
||||
min: string,
|
||||
max: string,
|
||||
median: string,
|
||||
|
|
@ -9,7 +9,8 @@ export interface SeriesItemStats {
|
|||
|
||||
export interface SeriesItem extends Series {
|
||||
freeFormFields: {[key: string]: string};
|
||||
calculations: SeriesItemStats
|
||||
statsFormatted: SeriesItemStatsFormatted;
|
||||
median: number
|
||||
}
|
||||
|
||||
export interface HideSeriesArgs {
|
||||
|
|
@ -29,12 +30,8 @@ export interface LegendItemType {
|
|||
color: string;
|
||||
checked: boolean;
|
||||
freeFormFields: {[key: string]: string};
|
||||
calculations: {
|
||||
min: string;
|
||||
max: string;
|
||||
median: string;
|
||||
last: string;
|
||||
}
|
||||
statsFormatted: SeriesItemStatsFormatted;
|
||||
median: number
|
||||
}
|
||||
|
||||
export interface BarSeriesItem {
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ import { formatPrettyNumber } from "./helpers";
|
|||
|
||||
export const getSeriesItemContext = (data: MetricResult[], hideSeries: string[], alias: string[]) => {
|
||||
const colorState: {[key: string]: string} = {};
|
||||
const calculations = data.map(d => {
|
||||
const stats = data.map(d => {
|
||||
const values = d.values.map(v => promValueToNumber(v[1]));
|
||||
return {
|
||||
min: getMinFromArray(values),
|
||||
|
|
@ -27,7 +27,7 @@ export const getSeriesItemContext = (data: MetricResult[], hideSeries: string[],
|
|||
return (d: MetricResult, i: number): SeriesItem => {
|
||||
const label = getNameForMetric(d, alias[d.group - 1]);
|
||||
const color = colorState[label] || getColorFromString(label);
|
||||
const { min, max, median, last } = calculations[i];
|
||||
const { min, max, median, last } = stats[i];
|
||||
|
||||
return {
|
||||
label,
|
||||
|
|
@ -40,12 +40,13 @@ export const getSeriesItemContext = (data: MetricResult[], hideSeries: string[],
|
|||
size: 4.2,
|
||||
width: 1.4
|
||||
},
|
||||
calculations: {
|
||||
statsFormatted: {
|
||||
min: formatPrettyNumber(min, min, max),
|
||||
max: formatPrettyNumber(max, min, max),
|
||||
median: formatPrettyNumber(median, min, max),
|
||||
last: formatPrettyNumber(last, min, max),
|
||||
}
|
||||
},
|
||||
median: median,
|
||||
};
|
||||
};
|
||||
};
|
||||
|
|
@ -56,7 +57,8 @@ export const getLegendItem = (s: SeriesItem, group: number): LegendItemType => (
|
|||
color: s.stroke as string,
|
||||
checked: s.show || false,
|
||||
freeFormFields: s.freeFormFields,
|
||||
calculations: s.calculations,
|
||||
statsFormatted: s.statsFormatted,
|
||||
median: s.median,
|
||||
});
|
||||
|
||||
export const getHideSeries = ({ hideSeries, legend, metaKey, series }: HideSeriesArgs): string[] => {
|
||||
|
|
|
|||
|
|
@ -42,6 +42,8 @@ The sandbox cluster installation is running under the constant load generated by
|
|||
* FEATURE: [vmui](https://docs.victoriametrics.com/#vmui): add support for functions, labels, values in autocomplete. See [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/3006).
|
||||
* FEATURE: [vmui](https://docs.victoriametrics.com/#vmui): retain specified time interval when executing a query from `Top Queries`. See [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/5097).
|
||||
* FEATURE: [vmui](https://docs.victoriametrics.com/#vmui): improve repeated VMUI page load times by enabling caching of static js and css at web browser side according to [these recommendations](https://developer.chrome.com/docs/lighthouse/performance/uses-long-cache-ttl/).
|
||||
* FEATURE: [vmui](https://docs.victoriametrics.com/#vmui): show information about lines with bigger values at the top of the legend under the graph in order to simplify graph analysis.
|
||||
* FEATURE: [vmui](https://docs.victoriametrics.com/#vmui): reduce vertical space usage, so more information is visible on the screen without scrolling.
|
||||
|
||||
* BUGFIX: [vmalert](https://docs.victoriametrics.com/vmalert.html): strip sensitive information such as auth headers or passwords from datasource, remote-read, remote-write or notifier URLs in log messages or UI. This behavior is by default and is controlled via `-datasource.showURL`, `-remoteRead.showURL`, `remoteWrite.showURL` or `-notifier.showURL` cmd-line flags. See [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/5044).
|
||||
* BUGFIX: [vmselect](https://docs.victoriametrics.com/Cluster-VictoriaMetrics.html): improve performance and memory usage during query processing on machines with big number of CPU cores. See [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/5087) for details.
|
||||
|
|
|
|||
Loading…
Reference in a new issue