github-mirrors/VictoriaMetrics
1
0
Fork 0
mirror of https://github.com/VictoriaMetrics/VictoriaMetrics.git synced 2025-03-01 15:33:35 +00:00
Code Issues Projects Releases Packages Wiki Activity

Merge branch 'public-single-node' into pmm-6401-read-prometheus-data-files

Browse source
This commit is contained in:
Aliaksandr Valialkin 2023-03-12 17:30:41 -07:00
commit ab535bf127
No known key found for this signature in database
GPG key ID: A72BEC6CD3D0DED1
13 changed files with 235 additions and 309 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,14 +1,14 @@
{
"files": {
"main.css": "./static/css/main.5c28f4a7.css",
"main.js": "./static/js/main.6eed9ce1.js",
"main.css": "./static/css/main.8d8c45cf.css",
"main.js": "./static/js/main.d5e360af.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"
},
"entrypoints": [
"static/css/main.5c28f4a7.css",
"static/js/main.6eed9ce1.js"
"static/css/main.8d8c45cf.css",
"static/js/main.d5e360af.js"
]
}

116
app/vmselect/vmui/dashboards/README.md
View file

@ -1,115 +1,3 @@
### Setup
1. Create `.json` config file in a folder `dashboards`
2. Import your config file into the `dashboards/index.js`
3. Add filename into the array `window.__VMUI_PREDEFINED_DASHBOARDS__`
## Predefined dashboards
It is possible to define path to the predefined dashboards by setting `--vmui.customDashboardsPath`.
1. Single Version
If you use single version of the VictoriaMetrics this flag should be provided for you execution file.
```
./victoria-metrics --vmui.customDashboardsPath=/path/to/your/dashboards
```
2. Cluster Version
If you use cluster version this flag should be defined for each `vmselect` component.
```
./vmselect -storageNode=:8418 --vmui.customDashboardsPath=/path/to/your/dashboards
```
At that moment all predefined dashboards files show be near each `vmselect`. For example
if you have 3 `vmselect` instances you should create 3 copy of your predefined dashboards.
### Configuration options
<br/>
DashboardSettings:
| Name | Type | Description |
|:----------|:----------------:|---------------------------:|
| rows* | `DashboardRow[]` | Sections containing panels |
| title | `string` | Dashboard title |
<br/>
DashboardRow:
| Name | Type | Description |
|:-----------|:-----------------:|---------------------------:|
| panels* | `PanelSettings[]` | List of panels (charts) |
| title | `string` | Row title |
<br/>
PanelSettings:
| Name | Type | Description |
|:------------|:----------:|--------------------------------------------------------------------------------------:|
| expr* | `string[]` | Data source queries |
| alias | `string[]` | Expression alias. Matched by index in array |
| title | `string` | Panel title |
| description | `string` | Additional information about the panel |
| unit | `string` | Y-axis unit |
| showLegend | `boolean` | If `false`, the legend hide. Default value - `true` |
| width | `number` | The number of columns the panel uses.<br/> From 1 (minimum width) to 12 (full width). |
---
### Example json
```json
{
"title": "Example",
"rows": [
{
"title": "Per-job resource usage",
"panels": [
{
"title": "Per-job CPU usage",
"width": 6,
"expr": [
"sum(rate(process_cpu_seconds_total)) by (job)"
]
},
{
"title": "Per-job RSS usage",
"width": 6,
"expr": [
"sum(process_resident_memory_bytes) by (job)"
]
},
{
"title": "Per-job disk read",
"width": 6,
"expr": [
"sum(rate(process_io_storage_read_bytes_total)) by (job)"
]
},
{
"title": "Per-job disk write",
"width": 6,
"expr": [
"sum(rate(process_io_storage_written_bytes_total)) by (job)"
]
}
]
},
{
"title": "Free/used disk space",
"panels": [
{
"unit": "MB",
"expr": [
"sum(vm_data_size_bytes{type!=\"indexdb\"}) / 1024 / 1024",
"vm_free_disk_space_bytes / 1024 / 1024"
],
"alias": [
"usage space",
"free space"
]
}
]
}
]
}
```
See [this docs](https://github.com/VictoriaMetrics/VictoriaMetrics/tree/master/app/vmui#predefined-dashboards)

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,maximum-scale=1,user-scalable=no"/><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.6eed9ce1.js"></script><link href="./static/css/main.5c28f4a7.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=1,user-scalable=no"/><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.d5e360af.js"></script><link href="./static/css/main.8d8c45cf.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.5c28f4a7.css → app/vmselect/vmui/static/css/main.8d8c45cf.css
View file

File diff suppressed because one or more lines are too long

4
app/vmselect/vmui/static/js/main.6eed9ce1.js → app/vmselect/vmui/static/js/main.d5e360af.js
View file

File diff suppressed because one or more lines are too long

0
app/vmselect/vmui/static/js/main.6eed9ce1.js.LICENSE.txt → app/vmselect/vmui/static/js/main.d5e360af.js.LICENSE.txt
View file

199
app/vmui/README.md
View file

@ -2,7 +2,15 @@
Web UI for VictoriaMetrics
## Docker image build
* [Docker image build](#docker-image-build)
* [Static build](#static-build)
* [Updating vmui embedded into VictoriaMetrics](#updating-vmui-embedded-into-victoriametrics)
* [Predefined dashboards](#predefined-dashboards)
* [App mode config options](#app-mode-config-options)
----
### Docker image build
Run the following command from the root of VictoriaMetrics repository in order to build `victoriametrics/vmui` Docker image:
@ -19,7 +27,7 @@ docker run --rm --name vmui -p 8080:8080 victoriametrics/vmui
Then navigate to `http://localhost:8080` in order to see the web UI.
## Static build
### Static build
Run the following command from the root of VictoriaMetrics repository for building `vmui` static contents:
@ -30,7 +38,7 @@ make vmui-build
The built static contents is put into `app/vmui/packages/vmui/` directory.
## Updating vmui embedded into VictoriaMetrics
### Updating vmui embedded into VictoriaMetrics
Run the following command from the root of VictoriaMetrics repository for updating `vmui` embedded into VictoriaMetrics:
@ -53,3 +61,188 @@ bin/victoria-metrics -selfScrapeInterval=5s
```
Then navigate to `http://localhost:8428/vmui/`. See [these docs](https://docs.victoriametrics.com/#vmui) for more details.
----
## Predefined dashboards
vmui allows you to pre-define dashboards. <br/>
Predefined dashboards will be displayed in the `"Dashboards"` tab.
If there are no dashboards or if they cannot be fetched, the tab will be hidden.
### Setup
You can setup pre-defined dashboards in two ways: [Setup by local files](#setup-by-local-files) or [Setup by flag](#setup-by-flag)
#### Setup by local files
By creating local files in the "folder" directory:
- In this case, to update the dashboards, you need to recompile the binary;
- These dashboards will be displayed if there are no dashboards located at the path set by the "--vmui.customDashboardsPath" flag.
1. Create `.json` config file in a folder `app/vmui/packages/vmui/public/dashboards/`
2. Add the name of the created JSON file to `app/vmui/packages/vmui/public/dashboards/index.js`
#### Setup by flag
It is possible to define path to the predefined dashboards by setting `--vmui.customDashboardsPath`.
- The panels are updated when the web page is loaded;
- Only those dashboards that are located at the path specified by the `--vmui.customDashboardsPath` flag are displayed;
- Local files from the previous step are ignored.
1. Single Version
If you use single version of the VictoriaMetrics this flag should be provided for you execution file.
```
./victoria-metrics --vmui.customDashboardsPath=/path/to/your/dashboards
```
2. Cluster Version
If you use cluster version this flag should be defined for each `vmselect` component.
```
./vmselect -storageNode=:8418 --vmui.customDashboardsPath=/path/to/your/dashboards
```
At that moment all predefined dashboards files show be near each `vmselect`. For example
if you have 3 `vmselect` instances you should create 3 copy of your predefined dashboards.
### Configuration options
DashboardSettings:
| Name | Type | Description |
|:----------|:----------------:|---------------------------:|
| rows* | `DashboardRow[]` | Sections containing panels |
| title | `string` | Dashboard title |
<br/>
DashboardRow:
| Name | Type | Description |
|:-----------|:-----------------:|---------------------------:|
| panels* | `PanelSettings[]` | List of panels (charts) |
| title | `string` | Row title |
<br/>
PanelSettings:
| Name | Type | Description |
|:------------|:----------:|--------------------------------------------------------------------------------------:|
| expr* | `string[]` | Data source queries |
| alias | `string[]` | Expression alias. Matched by index in array |
| title | `string` | Panel title |
| description | `string` | Additional information about the panel |
| unit | `string` | Y-axis unit |
| showLegend | `boolean` | If `false`, the legend hide. Default value - `true` |
| width | `number` | The number of columns the panel uses.<br/> From 1 (minimum width) to 12 (full width). |
### Example json
```json
{
"title": "Example",
"rows": [
{
"title": "Per-job resource usage",
"panels": [
{
"title": "Per-job CPU usage",
"width": 6,
"expr": [
"sum(rate(process_cpu_seconds_total)) by (job)"
]
},
{
"title": "Per-job RSS usage",
"width": 6,
"expr": [
"sum(process_resident_memory_bytes) by (job)"
]
},
{
"title": "Per-job disk read",
"width": 6,
"expr": [
"sum(rate(process_io_storage_read_bytes_total)) by (job)"
]
},
{
"title": "Per-job disk write",
"width": 6,
"expr": [
"sum(rate(process_io_storage_written_bytes_total)) by (job)"
]
}
]
},
{
"title": "Free/used disk space",
"panels": [
{
"unit": "MB",
"expr": [
"sum(vm_data_size_bytes{type!=\"indexdb\"}) / 1024 / 1024",
"vm_free_disk_space_bytes / 1024 / 1024"
],
"alias": [
"usage space",
"free space"
]
}
]
}
]
}
```
----
## App mode config options
vmui can be used to paste into other applications
1. Go to file `app/vmui/packages/vmui/public/index.html`
2. Find root element `<div id="root"></div>`
3. Add `data-params` with the options
### Options (JSON):
| Name | Default | Description |
|:------------------------|:-----------:|--------------------------------------------------------------------------------------:|
| serverURL | domain name | Can't be changed from the UI |
| useTenantID | - | If the flag is present, the "Tenant ID" select is displayed |
| headerStyles.background | `#FFFFFF` | Header background color |
| headerStyles.color | `#3F51B5` | Header font color |
| palette.primary | `#3F51B5` | used to represent primary interface elements for a user |
| palette.secondary | `#F50057` | used to represent secondary interface elements for a user |
| palette.error | `#FF4141` | used to represent interface elements that the user should be made aware of |
| palette.warning | `#FF9800` | used to represent potentially dangerous actions or important messages |
| palette.success | `#4CAF50` | used to indicate the successful completion of an action that user triggered |
| palette.info | `#03A9F4` | used to present information to the user that is neutral and not necessarily important |
### JSON example:
```json
{
"serverURL": "http://localhost:8428",
"useTenantID": true,
"headerStyles": {
"background": "#FFFFFF",
"color": "#538DE8"
},
"palette": {
"primary": "#538DE8",
"secondary": "#F76F8E",
"error": "#FD151B",
"warning": "#FFB30F",
"success": "#7BE622",
"info": "#0F5BFF"
}
}
```
### HTML example:
```html
<div id="root" data-params='{"serverURL":"http://localhost:8428","useTenantID":true,"headerStyles":{"background":"#FFFFFF","color":"#538DE8"},"palette":{"primary":"#538DE8","secondary":"#F76F8E","error":"#FD151B","warning":"#FFB30F","success":"#7BE622","info":"#0F5BFF"}}'></div>
```

56
app/vmui/packages/vmui/README.md
View file

@ -45,59 +45,3 @@ You don’t have to ever use `eject`. The curated feature set is suitable for sm
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
To learn React, check out the [React documentation](https://reactjs.org/).
---
# VMUI config options
VMUI can be used to paste into other applications
1. Go to file `index.html`
2. Find root element `<div id="root"></div>`
3. Add `data-params` with the options
#### Options (JSON):
| Name | Default | Description |
|:------------------------|:-----------:|--------------------------------------------------------------------------------------:|
| serverURL | domain name | Can't be changed from the UI |
| useTenantID | - | If the flag is present, the "Tenant ID" select is displayed |
| headerStyles.background | `#FFFFFF` | Header background color |
| headerStyles.color | `#3F51B5` | Header font color |
| palette.primary | `#3F51B5` | used to represent primary interface elements for a user |
| palette.secondary | `#F50057` | used to represent secondary interface elements for a user |
| palette.error | `#FF4141` | used to represent interface elements that the user should be made aware of |
| palette.warning | `#FF9800` | used to represent potentially dangerous actions or important messages |
| palette.success | `#4CAF50` | used to indicate the successful completion of an action that user triggered |
| palette.info | `#03A9F4` | used to present information to the user that is neutral and not necessarily important |
#### JSON example:
```json
{
"serverURL": "http://localhost:8428",
"useTenantID": true,
"headerStyles": {
"background": "#FFFFFF",
"color": "#538DE8"
},
"palette": {
"primary": "#538DE8",
"secondary": "#F76F8E",
"error": "#FD151B",
"warning": "#FFB30F",
"success": "#7BE622",
"info": "#0F5BFF"
}
}
```
#### HTML example:
```html
<div id="root" data-params='{"serverURL":"http://localhost:8428","useTenantID":true,"headerStyles":{"background":"#FFFFFF","color":"#538DE8"},"palette":{"primary":"#538DE8","secondary":"#F76F8E","error":"#FD151B","warning":"#FFB30F","success":"#7BE622","info":"#0F5BFF"}}'></div>
```

116
app/vmui/packages/vmui/public/dashboards/README.md
View file

@ -1,115 +1,3 @@
### Setup
1. Create `.json` config file in a folder `dashboards`
2. Import your config file into the `dashboards/index.js`
3. Add filename into the array `window.__VMUI_PREDEFINED_DASHBOARDS__`
## Predefined dashboards
It is possible to define path to the predefined dashboards by setting `--vmui.customDashboardsPath`.
1. Single Version
If you use single version of the VictoriaMetrics this flag should be provided for you execution file.
```
./victoria-metrics --vmui.customDashboardsPath=/path/to/your/dashboards
```
2. Cluster Version
If you use cluster version this flag should be defined for each `vmselect` component.
```
./vmselect -storageNode=:8418 --vmui.customDashboardsPath=/path/to/your/dashboards
```
At that moment all predefined dashboards files show be near each `vmselect`. For example
if you have 3 `vmselect` instances you should create 3 copy of your predefined dashboards.
### Configuration options
<br/>
DashboardSettings:
| Name | Type | Description |
|:----------|:----------------:|---------------------------:|
| rows* | `DashboardRow[]` | Sections containing panels |
| title | `string` | Dashboard title |
<br/>
DashboardRow:
| Name | Type | Description |
|:-----------|:-----------------:|---------------------------:|
| panels* | `PanelSettings[]` | List of panels (charts) |
| title | `string` | Row title |
<br/>
PanelSettings:
| Name | Type | Description |
|:------------|:----------:|--------------------------------------------------------------------------------------:|
| expr* | `string[]` | Data source queries |
| alias | `string[]` | Expression alias. Matched by index in array |
| title | `string` | Panel title |
| description | `string` | Additional information about the panel |
| unit | `string` | Y-axis unit |
| showLegend | `boolean` | If `false`, the legend hide. Default value - `true` |
| width | `number` | The number of columns the panel uses.<br/> From 1 (minimum width) to 12 (full width). |
---
### Example json
```json
{
"title": "Example",
"rows": [
{
"title": "Per-job resource usage",
"panels": [
{
"title": "Per-job CPU usage",
"width": 6,
"expr": [
"sum(rate(process_cpu_seconds_total)) by (job)"
]
},
{
"title": "Per-job RSS usage",
"width": 6,
"expr": [
"sum(process_resident_memory_bytes) by (job)"
]
},
{
"title": "Per-job disk read",
"width": 6,
"expr": [
"sum(rate(process_io_storage_read_bytes_total)) by (job)"
]
},
{
"title": "Per-job disk write",
"width": 6,
"expr": [
"sum(rate(process_io_storage_written_bytes_total)) by (job)"
]
}
]
},
{
"title": "Free/used disk space",
"panels": [
{
"unit": "MB",
"expr": [
"sum(vm_data_size_bytes{type!=\"indexdb\"}) / 1024 / 1024",
"vm_free_disk_space_bytes / 1024 / 1024"
],
"alias": [
"usage space",
"free space"
]
}
]
}
]
}
```
See [this docs](https://github.com/VictoriaMetrics/VictoriaMetrics/tree/master/app/vmui#predefined-dashboards)

14
app/vmui/packages/vmui/src/pages/PredefinedPanels/hooks/useFetchDashboards.ts
View file

@ -24,10 +24,14 @@ export const useFetchDashboards = (): {
const [dashboardsSettings, setDashboards] = useState<DashboardSettings[]>([]);
const fetchLocalDashboards = async () => {
const filenames = window.__VMUI_PREDEFINED_DASHBOARDS__;
if (!filenames?.length) return [];
const dashboards = await Promise.all(filenames.map(async f => importModule(f)));
setDashboards((prevDash) => [...dashboards, ...prevDash]);
try {
const filenames = window.__VMUI_PREDEFINED_DASHBOARDS__;
if (!filenames?.length) return [];
const dashboards = await Promise.all(filenames.map(async f => importModule(f)));
setDashboards((prevDash) => [...dashboards, ...prevDash]);
} catch (e) {
if (e instanceof Error) setError(`${e.name}: ${e.message}`);
}
};
const fetchRemoteDashboards = async () => {
@ -43,6 +47,8 @@ export const useFetchDashboards = (): {
const { dashboardsSettings } = resp;
if (dashboardsSettings && dashboardsSettings.length > 0) {
setDashboards((prevDash) => [...prevDash, ...dashboardsSettings]);
} else {
await fetchLocalDashboards();
}
setIsLoading(false);
} else {

5
app/vmui/packages/vmui/src/pages/PredefinedPanels/index.tsx
View file

@ -34,14 +34,13 @@ const DashboardsLayout: FC = () => {
return <div className="vm-predefined-panels">
{dashboardsLoading && <Spinner />}
{dashboardsError && <Alert variant="error">{dashboardsError}</Alert>}
{!dashboardsSettings.length && dashboardsError && <Alert variant="error">{dashboardsError}</Alert>}
{!dashboardsSettings.length && <Alert variant="info">Dashboards not found</Alert>}
{dashboards.length > 1 && (
<div
className={classNames({
"vm-predefined-panels-tabs": true,
"vm-block": true,
"vm-block_mobile": isMobile,
"vm-predefined-panels-tabs_mobile": isMobile,
})}
>
{dashboards.map(tab => (

18
app/vmui/packages/vmui/src/pages/PredefinedPanels/style.scss
View file

@ -13,10 +13,6 @@
padding: $padding-small 0;
}
&-tabs.vm-block {
padding: $padding-global;
}
&-tabs {
display: flex;
flex-wrap: wrap;
@ -24,19 +20,27 @@
justify-content: flex-start;
font-size: $font-size-small;
gap: $padding-small;
white-space: nowrap;
overflow: hidden;
@media (max-width: 768px) {
padding: 0 $padding-global;
}
&__tab {
padding: $padding-small $padding-global;
border-radius: $border-radius-medium;
cursor: pointer;
transition: background 200ms ease-in-out, color 150ms ease-in;
background: $color-white;
background: $color-background-block;
text-transform: uppercase;
color: rgba($color-black, 0.2);
color: $color-text-secondary;
text-align: center;
border: 1px solid rgba($color-black, 0.2);
@media (max-width: 500px) {
flex-grow: 1;
}
&:hover {
color: $color-primary;
}

4
docs/CHANGELOG.md
View file

@ -15,6 +15,10 @@ The following tip changes can be tested by building VictoriaMetrics components f
## tip
## [v1.89.0](https://github.com/VictoriaMetrics/VictoriaMetrics/releases/tag/v1.89.0)
Released at 2023-03-12
* SECURITY: upgrade Go builder from Go1.20.1 to Go1.20.2. See [the list of issues addressed in Go1.20.2](https://github.com/golang/go/issues?q=milestone%3AGo1.20.2+label%3ACherryPickApproved).
* FEATURE: [vmctl](https://docs.victoriametrics.com/vmctl.html): increase the default value for `--remote-read-http-timeout` command-line option from 30s (30 seconds) to 5m (5 minutes). This reduces the probability of timeout errors when migrating big number of time series. See [this pull request](https://github.com/VictoriaMetrics/VictoriaMetrics/pull/3879).