VictoriaMetrics/app/vmui
Yury Molodov 39c1b0f8d1
vmui: refactor code using custom hooks (#4145)
* refactor: replace boolean useState with useBoolean

* refactor: replace useResize with useWindowSize/useElementSize

* refactor: replace addEventListener with useEventListener

* refactor: replace navigator.clipboard.writeText with useCopyToClipboard

* fix: prevent redirect loop
2023-05-16 16:41:06 +03:00
..
packages/vmui vmui: refactor code using custom hooks (#4145) 2023-05-16 16:41:06 +03:00
.gitignore app/vmui: move source code from https://github.com/VictoriaMetrics/vmui to app/vmui 2021-07-09 17:15:23 +03:00
Dockerfile-build all: update Go builder from Go1.20.0 to Go1.20.1 2023-02-14 23:05:16 -08:00
Dockerfile-web deployment/docker: update base docker image from 3.17.3 to 3.18.0 2023-05-12 17:31:21 -07:00
Makefile app/vmui: actualize Dockerfiles 2021-08-11 13:41:41 +03:00
README.md vmui: predefined dashboards docs (#3895) 2023-03-12 17:16:26 -07:00

vmui

Web UI for VictoriaMetrics


Docker image build

Run the following command from the root of VictoriaMetrics repository in order to build victoriametrics/vmui Docker image:

make vmui-release

Then run the built image with:

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

Run the following command from the root of VictoriaMetrics repository for building vmui static contents:

make vmui-build

The built static contents is put into app/vmui/packages/vmui/ directory.

Updating vmui embedded into VictoriaMetrics

Run the following command from the root of VictoriaMetrics repository for updating vmui embedded into VictoriaMetrics:

make vmui-update

This command should update vmui static files at app/vmselect/vmui directory. Commit changes to these files if needed.

Then build VictoriaMetrics with the following command:

make victoria-metrics

Then run the built binary with the following command:

bin/victoria-metrics -selfScrapeInterval=5s

Then navigate to http://localhost:8428/vmui/. See these docs for more details.


Predefined dashboards

vmui allows you to pre-define dashboards.
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 or 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
  1. 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

DashboardRow:
Name Type Description
panels* PanelSettings[] List of panels (charts)
title string Row title

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.
From 1 (minimum width) to 12 (full width).

Example 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:

{
  "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:

<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>