VictoriaMetrics/app/vmui

vmui

Web UI for VictoriaMetrics

• Docker image build
• Static build
• Updating vmui embedded into VictoriaMetrics
• Predefined dashboards
• 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:

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

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

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>