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: include fonts in its bundle (#3705)

Browse source 
* feat: include fonts in the build

* fix: reduce size fonts

* wip

- Document the change at docs/CHANGELOG.md
- Run `make vmui-update`

Co-authored-by: Aliaksandr Valialkin <valyala@victoriametrics.com>
This commit is contained in:
Yury Molodov 2023-01-24 18:30:56 +01:00 committed by Aliaksandr Valialkin
parent 97aa9b03de
commit 29fd95d426
No known key found for this signature in database
GPG key ID: A72BEC6CD3D0DED1
18 changed files with 34 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
app/vmselect/vmui/asset-manifest.json
View file

@ -1,12 +1,14 @@
{ {
"files": { "files": {
"main.css": "./static/css/main.e8e53cbf.css", "main.css": "./static/css/main.9ca6b743.css",
"main.js": "./static/js/main.1635e498.js", "main.js": "./static/js/main.8969be5f.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-Bold.ttf": "./static/media/Lato-Bold.32360ba4b57802daa4d6.ttf",
"index.html": "./index.html" "index.html": "./index.html"
}, },
"entrypoints": [ "entrypoints": [
"static/css/main.e8e53cbf.css", "static/css/main.9ca6b743.css",
"static/js/main.1635e498.js" "static/js/main.8969be5f.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.1635e498.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> <!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="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.8969be5f.js"></script><link href="./static/css/main.9ca6b743.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>

BIN
app/vmselect/vmui/preview.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 67 KiB

1
app/vmselect/vmui/static/css/main.9ca6b743.css Normal file
View file

File diff suppressed because one or more lines are too long

1
app/vmselect/vmui/static/css/main.e8e53cbf.css
View file

File diff suppressed because one or more lines are too long

2
app/vmselect/vmui/static/js/main.1635e498.js
View file

File diff suppressed because one or more lines are too long

2
app/vmselect/vmui/static/js/main.8969be5f.js Normal file
View file

File diff suppressed because one or more lines are too long

6
app/vmselect/vmui/static/js/main.1635e498.js.LICENSE.txt → app/vmselect/vmui/static/js/main.8969be5f.js.LICENSE.txt
View file

@ -7,7 +7,7 @@
/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */
/** /**
* @remix-run/router v1.0.5 * @remix-run/router v1.3.0
* *
* Copyright (c) Remix Software Inc. * Copyright (c) Remix Software Inc.
* *
@ -18,7 +18,7 @@
*/ */
/** /**
* React Router DOM v6.4.5 * React Router DOM v6.7.0
* *
* Copyright (c) Remix Software Inc. * Copyright (c) Remix Software Inc.
* *
@ -29,7 +29,7 @@
*/ */
/** /**
* React Router v6.4.5 * React Router v6.7.0
* *
* Copyright (c) Remix Software Inc. * Copyright (c) Remix Software Inc.
* *

BIN
app/vmselect/vmui/static/media/Lato-Bold.32360ba4b57802daa4d6.ttf Normal file
View file

Binary file not shown.

BIN
app/vmselect/vmui/static/media/Lato-Regular.d714fec1633b69a9c2e9.ttf Normal file
View file

Binary file not shown.

3
app/vmui/packages/vmui/public/index.html
View file

@ -26,9 +26,6 @@
Learn how to configure a non-root public URL by running `npm run build`. Learn how to configure a non-root public URL by running `npm run build`.
--> -->
<title>VM UI</title> <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="%PUBLIC_URL%/dashboards/index.js" type="module"></script> <script src="%PUBLIC_URL%/dashboards/index.js" type="module"></script>
<meta name="twitter:card" content="summary_large_image"> <meta name="twitter:card" content="summary_large_image">

BIN
app/vmui/packages/vmui/src/assets/fonts/Lato/Lato-Bold.ttf Normal file
View file

Binary file not shown.

BIN
app/vmui/packages/vmui/src/assets/fonts/Lato/Lato-Regular.ttf Normal file
View file

Binary file not shown.

5
app/vmui/packages/vmui/src/components/Layout/Header/style.scss
View file

@ -44,6 +44,11 @@
} }
} }
&-nav {
font-size: $font-size-small;
font-weight: bold;
}
&__settings { &__settings {
display: flex; display: flex;
align-items: center; align-items: center;

13
app/vmui/packages/vmui/src/styles/fonts.scss Normal file
View file

@ -0,0 +1,13 @@
@font-face {
font-family: 'Lato';
src: url('../assets/fonts/Lato/Lato-Regular.ttf');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Lato';
src: url('../assets/fonts/Lato/Lato-Bold.ttf');
font-weight: bold;
font-style: normal;
}

1
app/vmui/packages/vmui/src/styles/style.scss
View file

@ -1,6 +1,7 @@
@forward "variables"; @forward "variables";
@forward "core"; @forward "core";
@forward "reset"; @forward "reset";
@forward "fonts";
@forward "./components/header-button"; @forward "./components/header-button";
@forward "./components/list"; @forward "./components/list";

2
app/vmui/packages/vmui/src/styles/variables.scss
View file

@ -39,7 +39,7 @@ $padding-small: 8px;
/************* fonts *************/ /************* fonts *************/
$font-family-global: 'Lato', sans-serif; $font-family-global: 'Lato', sans-serif;
$font-family-monospace: 'JetBrains Mono', monospace; $font-family-monospace: monospace;
$font-size-large: 16px; $font-size-large: 16px;
$font-size-medium: 14px; $font-size-medium: 14px;
$font-size: 12px; $font-size: 12px;

1
docs/CHANGELOG.md
View file

@ -17,6 +17,7 @@ The following tip changes can be tested by building VictoriaMetrics components f
* 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): 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: [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: [vmui](https://docs.victoriametrics.com/#vmui): embed fonts into binary instead of loading them from external sources. This allows using `vmui` in full from isolated networks without access to Internet. Thanks to @ScottKevill for [the pull request](https://github.com/VictoriaMetrics/VictoriaMetrics/pull/3696).
* 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: [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). * 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).