+
void;
@@ -92,13 +93,13 @@ const CardinalityConfigurator: FC = ({
onChange={onFocusLabelChange}
/>
-
-
-
+
+
+
@@ -106,6 +107,19 @@ const CardinalityConfigurator: FC = ({
at {date}{match && for series selector {match}}.
Show top {topN} entries per table.
+
+
+
+
diff --git a/app/vmui/packages/vmui/src/pages/TracePage/JsonForm/style.scss b/app/vmui/packages/vmui/src/pages/TracePage/JsonForm/style.scss
index a315094ba..d57235e7d 100644
--- a/app/vmui/packages/vmui/src/pages/TracePage/JsonForm/style.scss
+++ b/app/vmui/packages/vmui/src/pages/TracePage/JsonForm/style.scss
@@ -2,20 +2,25 @@
.vm-json-form {
display: grid;
- grid-template-rows: auto calc(90vh - 78px - ($padding-medium*3)) auto;
+ grid-template-rows: auto calc(70vh - 78px - ($padding-medium*3)) auto;
gap: $padding-global;
width: 70vw;
max-width: 1000px;
max-height: 900px;
+ overflow: hidden;
&_one-field {
- grid-template-rows: calc(90vh - 78px - ($padding-medium*3)) auto;
+ grid-template-rows: calc(70vh - 78px - ($padding-medium*3)) auto;
+ }
+
+ .vm-text-field_textarea {
}
textarea {
overflow: auto;
width: 100%;
height: 100%;
+ max-height: 900px;
}
&-footer {
diff --git a/app/vmui/packages/vmui/src/pages/TracePage/index.tsx b/app/vmui/packages/vmui/src/pages/TracePage/index.tsx
index 6f0cb3e44..498fccea6 100644
--- a/app/vmui/packages/vmui/src/pages/TracePage/index.tsx
+++ b/app/vmui/packages/vmui/src/pages/TracePage/index.tsx
@@ -151,7 +151,7 @@ const TracePage: FC = () => {
className="vm-link vm-link_colored"
href="https://docs.victoriametrics.com/#query-tracing"
target="_blank"
- rel="noreferrer"
+ rel="help noreferrer"
>
https://docs.victoriametrics.com/#query-tracing
diff --git a/app/vmui/packages/vmui/src/state/common/reducer.ts b/app/vmui/packages/vmui/src/state/common/reducer.ts
index 636277b34..50f520faa 100644
--- a/app/vmui/packages/vmui/src/state/common/reducer.ts
+++ b/app/vmui/packages/vmui/src/state/common/reducer.ts
@@ -1,18 +1,22 @@
import { getDefaultServer } from "../../utils/default-server-url";
import { getQueryStringValue } from "../../utils/query-string";
+import { getFromStorage, saveToStorage } from "../../utils/storage";
export interface AppState {
serverUrl: string;
tenantId: number;
+ darkTheme: boolean
}
export type Action =
| { type: "SET_SERVER", payload: string }
| { type: "SET_TENANT_ID", payload: number }
+ | { type: "SET_DARK_THEME", payload: boolean }
export const initialState: AppState = {
serverUrl: getDefaultServer(),
tenantId: Number(getQueryStringValue("g0.tenantID", 0)),
+ darkTheme: !!getFromStorage("DARK_THEME")
};
export function reducer(state: AppState, action: Action): AppState {
@@ -27,6 +31,12 @@ export function reducer(state: AppState, action: Action): AppState {
...state,
tenantId: action.payload
};
+ case "SET_DARK_THEME":
+ saveToStorage("DARK_THEME", action.payload);
+ return {
+ ...state,
+ darkTheme: action.payload
+ };
default:
throw new Error();
}
diff --git a/app/vmui/packages/vmui/src/styles/components/list.scss b/app/vmui/packages/vmui/src/styles/components/list.scss
index cb474a1a5..de3426447 100644
--- a/app/vmui/packages/vmui/src/styles/components/list.scss
+++ b/app/vmui/packages/vmui/src/styles/components/list.scss
@@ -9,7 +9,7 @@
&:hover,
&_active {
- background-color: rgba($color-black, 0.06);
+ background-color: $color-hover-black;
}
&_multiselect {
diff --git a/app/vmui/packages/vmui/src/styles/components/popper-header.scss b/app/vmui/packages/vmui/src/styles/components/popper-header.scss
index 403773139..e6a86339e 100644
--- a/app/vmui/packages/vmui/src/styles/components/popper-header.scss
+++ b/app/vmui/packages/vmui/src/styles/components/popper-header.scss
@@ -6,10 +6,11 @@
gap: $padding-small;
align-items: center;
justify-content: space-between;
- background-color: $color-primary;
+ background-color: $color-background-block;
padding: $padding-small $padding-small $padding-small $padding-global;
border-radius: $border-radius-small $border-radius-small 0 0;
- color: $color-white;
+ color: $color-text;
+ border-bottom: $border-divider;
&__title {
font-weight: bold;
diff --git a/app/vmui/packages/vmui/src/styles/components/table.scss b/app/vmui/packages/vmui/src/styles/components/table.scss
index 7ad704df9..c7e7e36f2 100644
--- a/app/vmui/packages/vmui/src/styles/components/table.scss
+++ b/app/vmui/packages/vmui/src/styles/components/table.scss
@@ -12,7 +12,7 @@
transition: background-color 200ms ease;
&:hover:not(&_header) {
- background-color: rgba($color-black, 0.05);
+ background-color: $color-hover-black;
}
&_header {
@@ -43,7 +43,7 @@
cursor: pointer;
&:hover {
- background-color: rgba($color-black, 0.05);
+ background-color: $color-hover-black;
}
}
@@ -54,7 +54,8 @@
}
&_gray {
- color: rgba($color-black, 0.4);
+ color: $color-text;
+ opacity: 0.4;
}
&_right {
diff --git a/app/vmui/packages/vmui/src/styles/core.scss b/app/vmui/packages/vmui/src/styles/core.scss
index 1ada63169..b262574c9 100644
--- a/app/vmui/packages/vmui/src/styles/core.scss
+++ b/app/vmui/packages/vmui/src/styles/core.scss
@@ -9,6 +9,7 @@ html, body, #root {
background-repeat: no-repeat;
background-attachment: fixed;
margin: 0;
+ background-color: $color-background-body;
}
body {
@@ -54,3 +55,24 @@ input[type=number]::-webkit-outer-spin-button {
svg {
width: 100%;
}
+
+/* Works on Firefox */
+* {
+ scrollbar-width: thin;
+ scrollbar-color: $color-text-disabled $color-background-block;
+}
+
+/* Works on Chrome, Edge, and Safari */
+*::-webkit-scrollbar {
+ width: 12px;
+}
+
+*::-webkit-scrollbar-track {
+ background: $color-background-block;
+}
+
+*::-webkit-scrollbar-thumb {
+ background-color: $color-text-disabled;
+ border-radius: 20px;
+ border: 3px solid $color-background-block;
+}
diff --git a/app/vmui/packages/vmui/src/styles/style.scss b/app/vmui/packages/vmui/src/styles/style.scss
index dd524acfc..30f945a2e 100644
--- a/app/vmui/packages/vmui/src/styles/style.scss
+++ b/app/vmui/packages/vmui/src/styles/style.scss
@@ -30,4 +30,17 @@
/* backgrounds */
--color-background-body: #FEFEFF;
--color-background-block: #FFFFFF;
+ --color-background-tooltip: rgba(97,97,97, 0.92);
+
+ /* text */
+ --color-text: #110f0f;
+ --color-text-secondary: #706F6F;
+ --color-text-disabled: #A09F9F;
+
+ /* box-shadow */
+ --box-shadow: rgba(0, 0, 0, 0.08) 1px 2px 6px;
+ --box-shadow-popper: rgba(0, 0, 0, 0.1) 0px 2px 8px 0px;
+
+ --border-divider: 1px solid rgba(0, 0, 0, 0.15);
+ --color-hover-black: rgba(0, 0, 0, 0.06);
}
diff --git a/app/vmui/packages/vmui/src/styles/variables.scss b/app/vmui/packages/vmui/src/styles/variables.scss
index b80f5d50e..7524bf787 100644
--- a/app/vmui/packages/vmui/src/styles/variables.scss
+++ b/app/vmui/packages/vmui/src/styles/variables.scss
@@ -13,14 +13,11 @@ $color-warning-text: var(--color-warning-text);
$color-info-text: var(--color-info-text);
$color-success-text: var(--color-success-text);
-$color-text: #110f0f;
-$color-text-secondary: rgba($color-text, 0.6);
-$color-text-disabled: rgba($color-text, 0.4);
+$color-text: var(--color-text);
+$color-text-secondary: var(--color-text-secondary);
+$color-text-disabled: var(--color-text-disabled);
$color-black: #110f0f;
-$color-dove-gray: #616161;
-$color-silver: #C4C4C4;
-$color-alto: #D8D8D8;
$color-white: #ffffff;
$color-dodger-blue: #1A90FF;
@@ -30,8 +27,7 @@ $color-tropical-blue: #C9E3F6;
/************* background *************/
$color-background-body: var(--color-background-body);
$color-background-block: var(--color-background-block);
-$color-background-modal: rgba($color-black, 0.7);
-$color-background-tooltip: rgba($color-dove-gray, 0.92);
+$color-background-tooltip: var(--color-background-tooltip);
/************* padding *************/
@@ -51,7 +47,7 @@ $font-size-small: 10px;
/************* border *************/
-$border-divider: 1px solid rgba($color-black, 0.15);
+$border-divider: var(--border-divider);
/************* border-radius *************/
@@ -61,6 +57,7 @@ $border-radius-large: 16px;
/************* box-shadows *************/
-$box-shadow: 1px 2px 12px rgba($color-black, 0.08);
-$box-shadow-bottom: rgba($color-black, 0.04) 0px 3px 5px;
-$box-shadow-popper: rgba($color-black, 0.1) 0px 2px 8px 0px;
+$box-shadow: var(--box-shadow);
+$box-shadow-popper: var(--box-shadow-popper);
+
+$color-hover-black: var(--color-hover-black);
diff --git a/app/vmui/packages/vmui/src/utils/storage.ts b/app/vmui/packages/vmui/src/utils/storage.ts
index 86d238a8b..f9c77029b 100644
--- a/app/vmui/packages/vmui/src/utils/storage.ts
+++ b/app/vmui/packages/vmui/src/utils/storage.ts
@@ -7,6 +7,7 @@ export type StorageKeys = "BASIC_AUTH_DATA"
| "SERIES_LIMITS"
| "TABLE_COMPACT"
| "TIMEZONE"
+ | "DARK_THEME"
export const saveToStorage = (key: StorageKeys, value: string | boolean | Record): void => {
if (value) {
@@ -15,6 +16,7 @@ export const saveToStorage = (key: StorageKeys, value: string | boolean | Record
} else {
removeFromStorage([key]);
}
+ window.dispatchEvent(new Event("storage"));
};
// TODO: make this aware of data type that is stored
diff --git a/app/vmui/packages/vmui/src/utils/uplot/axes.ts b/app/vmui/packages/vmui/src/utils/uplot/axes.ts
index 6e37e6d34..ff949b1fd 100644
--- a/app/vmui/packages/vmui/src/utils/uplot/axes.ts
+++ b/app/vmui/packages/vmui/src/utils/uplot/axes.ts
@@ -4,6 +4,7 @@ import { getSecondsFromDuration, roundToMilliseconds } from "../time";
import { AxisRange } from "../../state/graph/reducer";
import { formatTicks, sizeAxis } from "./helpers";
import { TimeParams } from "../../types";
+import { getCssVariable } from "../theme";
// see https://github.com/leeoniya/uPlot/tree/master/docs#axis--grid-opts
const timeValues = [
@@ -22,10 +23,11 @@ export const getAxes = (series: Series[], unit?: string): Axis[] => Array.from(n
scale: a,
show: true,
size: sizeAxis,
+ stroke: getCssVariable("color-text"),
font: "10px Arial",
values: (u: uPlot, ticks: number[]) => formatTicks(u, ticks, unit)
};
- if (!a) return { space: 80, values: timeValues };
+ if (!a) return { space: 80, values: timeValues, stroke: getCssVariable("color-text") };
if (!(Number(a) % 2)) return { ...axis, side: 1 };
return axis;
});
diff --git a/app/vmui/packages/vmui/src/utils/uplot/plugin.js b/app/vmui/packages/vmui/src/utils/uplot/plugin.js
index c250a96d4..a2e23e970 100644
--- a/app/vmui/packages/vmui/src/utils/uplot/plugin.js
+++ b/app/vmui/packages/vmui/src/utils/uplot/plugin.js
@@ -1,5 +1,6 @@
/* eslint-disable */
import uPlot from "uplot";
+import {getCssVariable} from "../theme";
export const seriesBarsPlugin = (opts) => {
let pxRatio;
@@ -88,7 +89,7 @@ export const seriesBarsPlugin = (opts) => {
u.ctx.save();
u.ctx.font = font;
- u.ctx.fillStyle = "black";
+ u.ctx.fillStyle = getCssVariable("color-text");
uPlot.orient(u, sidx, (
series,
diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md
index c5f7e0f48..60c55a76c 100644
--- a/docs/CHANGELOG.md
+++ b/docs/CHANGELOG.md
@@ -15,6 +15,8 @@ The following tip changes can be tested by building VictoriaMetrics components f
## tip
+* FEATURE: [vmui](https://docs.victoriametrics.com/#vmui): add dark mode - it can be seleted via `settings` menu in the top right corner. See [this pull request](https://github.com/VictoriaMetrics/VictoriaMetrics/pull/3704).
+* FEATURE: [vmui](https://docs.victoriametrics.com/#vmui): improve visual appearance of the top menu. See [this feature request](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/3678).
* FEATURE: [vmagent](https://docs.victoriametrics.com/vmagent.html): reduce memory usage when sending stale markers for targets, which expose big number of metrics. See [this](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/3668) and [this](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/3675) issues.
* FEATURE: add `-internStringMaxLen` command-line flag, which can be used for fine-tuning RAM vs CPU usage in certain workloads. For example, if the stored time series contain long labels, then it may be useful reducing the `-internStringMaxLen` in order to reduce memory usage at the cost of increased CPU usage. See [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/3692).