app/vmselect: follow-up after 820312a2b1

- Move the feature description at the correct place at docs/CHANGELOG.md
- Run `make vmui-update`
- Various cosmetic fixes

Updates https://github.com/VictoriaMetrics/VictoriaMetrics/issues/3322

README.md

@@ -2504,5 +2504,5 @@ Pass `-help` to VictoriaMetrics in order to see the list of supported command-li
   -vmalert.proxyURL string
      Optional URL for proxying requests to vmalert. For example, if -vmalert.proxyURL=http://vmalert:8880 , then alerting API requests such as /api/v1/rules from Grafana will be proxied to http://vmalert:8880/api/v1/rules
   -vmui.customDashboardsPath string
-     Optional path to vmui predefined dashboards.   
+     Optional path to vmui dashboards. See https://github.com/VictoriaMetrics/VictoriaMetrics/tree/master/app/vmui/packages/vmui/public/dashboards
 ```

app/vmselect/main.go

@@ -175,7 +175,10 @@ func RequestHandler(w http.ResponseWriter, r *http.Request) bool {
 		return true
 	case strings.HasPrefix(path, "/vmui/"):
 		if path == "/vmui/custom-dashboards" {
-			handleVMUICustomDashboards(w)
+			if err := handleVMUICustomDashboards(w); err != nil {
+				httpserver.Errorf(w, r, "%s", err)
+				return true
+			}
 			return true
 		}
 		r.URL.Path = path

app/vmselect/vmui.go

@@ -12,25 +12,23 @@ import (
 	"github.com/VictoriaMetrics/VictoriaMetrics/lib/logger"
 )
 
-// more information how to use this flag please check this link
-// https://github.com/VictoriaMetrics/VictoriaMetrics/tree/master/app/vmui/packages/vmui/public/dashboards
 var (
-	vmuiCustomDashboardsPath = flag.String("vmui.customDashboardsPath", "", "Optional path to vmui predefined dashboards."+
-		"How to create dashboards https://github.com/VictoriaMetrics/VictoriaMetrics/tree/master/app/vmui/packages/vmui/public/dashboards")
+	vmuiCustomDashboardsPath = flag.String("vmui.customDashboardsPath", "", "Optional path to vmui dashboards. "+
+		"See https://github.com/VictoriaMetrics/VictoriaMetrics/tree/master/app/vmui/packages/vmui/public/dashboards")
 )
 
-// dashboardSetting represents dashboard settings file struct
-// fields of the dashboardSetting you can find by following next link
-// https://github.com/VictoriaMetrics/VictoriaMetrics/tree/master/app/vmui/packages/vmui/public/dashboards
-type dashboardSetting struct {
+// dashboardSettings represents dashboard settings file struct.
+//
+// See https://github.com/VictoriaMetrics/VictoriaMetrics/tree/master/app/vmui/packages/vmui/public/dashboards
+type dashboardSettings struct {
 	Title    string         `json:"title,omitempty"`
 	Filename string         `json:"filename,omitempty"`
 	Rows     []dashboardRow `json:"rows"`
 }
 
-// panelSettings represents fields which used to show graph
-// fields of the panelSettings you can find by following next link
-// https://github.com/VictoriaMetrics/VictoriaMetrics/tree/master/app/vmui/packages/vmui/public/dashboards
+// panelSettings represents fields which used to show graph.
+//
+// See https://github.com/VictoriaMetrics/VictoriaMetrics/tree/master/app/vmui/packages/vmui/public/dashboards
 type panelSettings struct {
 	Title       string   `json:"title,omitempty"`
 	Description string   `json:"description,omitempty"`
@@ -41,39 +39,31 @@ type panelSettings struct {
 	Width       int      `json:"width,omitempty"`
 }
 
-// dashboardRow represents panels on dashboard
-// fields of the dashboardRow you can find by following next link
-// https://github.com/VictoriaMetrics/VictoriaMetrics/tree/master/app/vmui/packages/vmui/public/dashboards
+// dashboardRow represents panels on dashboard.
+//
+// See https://github.com/VictoriaMetrics/VictoriaMetrics/tree/master/app/vmui/packages/vmui/public/dashboards
 type dashboardRow struct {
 	Title  string          `json:"title,omitempty"`
 	Panels []panelSettings `json:"panels"`
 }
 
-// dashboardsData represents all dashboards settings
+// dashboardsData represents all the dashboards settings.
 type dashboardsData struct {
-	DashboardsSettings []dashboardSetting `json:"dashboardsSettings"`
+	DashboardsSettings []dashboardSettings `json:"dashboardsSettings"`
 }
 
-func handleVMUICustomDashboards(w http.ResponseWriter) {
+func handleVMUICustomDashboards(w http.ResponseWriter) error {
 	path := *vmuiCustomDashboardsPath
 	if path == "" {
 		writeSuccessResponse(w, []byte(`{"dashboardsSettings": []}`))
-		return
+		return nil
 	}
-
 	settings, err := collectDashboardsSettings(path)
 	if err != nil {
-		writeErrorResponse(w, fmt.Errorf("cannot collect dashboards settings by -vmui.customDashboardsPath=%q", path))
-		return
+		return fmt.Errorf("cannot collect dashboards settings by -vmui.customDashboardsPath=%q: %w", path, err)
 	}
-
 	writeSuccessResponse(w, settings)
-}
-
-func writeErrorResponse(w http.ResponseWriter, err error) {
-	w.WriteHeader(http.StatusBadRequest)
-	w.Header().Set("Content-Type", "application/json")
-	fmt.Fprintf(w, `{"status":"error","error":"%s"}`, err.Error())
+	return nil
 }
 
 func writeSuccessResponse(w http.ResponseWriter, data []byte) {
@@ -83,46 +73,40 @@ func writeSuccessResponse(w http.ResponseWriter, data []byte) {
 }
 
 func collectDashboardsSettings(path string) ([]byte, error) {
-
 	if !fs.IsPathExist(path) {
-		return nil, fmt.Errorf("cannot find folder pointed by -vmui.customDashboardsPath=%q", path)
+		return nil, fmt.Errorf("cannot find folder %q", path)
 	}
-
 	files, err := os.ReadDir(path)
 	if err != nil {
-		return nil, fmt.Errorf("cannot read folder pointed by -vmui.customDashboardsPath=%q", path)
+		return nil, fmt.Errorf("cannot read folder %q", path)
 	}
 
-	var settings []dashboardSetting
+	var dss []dashboardSettings
 	for _, file := range files {
-		info, err := file.Info()
-		if err != nil {
-			logger.Errorf("skipping %q at -vmui.customDashboardsPath=%q, since the info for this file cannot be obtained: %s", file.Name(), path, err)
-			continue
-		}
-		if fs.IsDirOrSymlink(info) {
-			logger.Infof("skip directory or symlinks: %q in the -vmui.customDashboardsPath=%q", info.Name(), path)
-			continue
-		}
 		filename := file.Name()
-		if filepath.Ext(filename) == ".json" {
-			filePath := filepath.Join(path, filename)
-			f, err := os.ReadFile(filePath)
-			if err != nil {
-				return nil, fmt.Errorf("cannot open file at -vmui.customDashboardsPath=%q: %w", filePath, err)
-			}
-			var dSettings dashboardSetting
-			err = json.Unmarshal(f, &dSettings)
-			if err != nil {
-				return nil, fmt.Errorf("cannot parse file %s: %w", filename, err)
-			}
-			if len(dSettings.Rows) == 0 {
-				continue
-			}
-			settings = append(settings, dSettings)
+		if err != nil {
+			logger.Errorf("skipping %q at -vmui.customDashboardsPath=%q, since the info for this file cannot be obtained: %s", filename, path, err)
+			continue
+		}
+		if filepath.Ext(filename) != ".json" {
+			continue
+		}
+		filePath := filepath.Join(path, filename)
+		f, err := os.ReadFile(filePath)
+		if err != nil {
+			// There is no need to add more context to the returned error, since os.ReadFile() adds enough context.
+			return nil, err
+		}
+		var ds dashboardSettings
+		err = json.Unmarshal(f, &ds)
+		if err != nil {
+			return nil, fmt.Errorf("cannot parse file %s: %w", filePath, err)
+		}
+		if len(ds.Rows) > 0 {
+			dss = append(dss, ds)
 		}
 	}
 
-	dd := dashboardsData{DashboardsSettings: settings}
+	dd := dashboardsData{DashboardsSettings: dss}
 	return json.Marshal(dd)
 }

app/vmselect/vmui/asset-manifest.json

@@ -1,12 +1,12 @@
 {
   "files": {
-    "main.css": "./static/css/main.8692abc6.css",
-    "main.js": "./static/js/main.9c17bdf0.js",
+    "main.css": "./static/css/main.7672c15c.css",
+    "main.js": "./static/js/main.84759f8d.js",
     "static/js/27.c1ccfd29.chunk.js": "./static/js/27.c1ccfd29.chunk.js",
     "index.html": "./index.html"
   },
   "entrypoints": [
-    "static/css/main.8692abc6.css",
-    "static/js/main.9c17bdf0.js"
+    "static/css/main.7672c15c.css",
+    "static/js/main.84759f8d.js"
   ]
 }

app/vmselect/vmui/dashboards/README.md

@@ -3,6 +3,24 @@
 2. Import your config file into the `dashboards/index.js`
 3. Add filename into the array `window.__VMUI_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/>

app/vmselect/vmui/index.html

@@ -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.9c17bdf0.js"></script><link href="./static/css/main.8692abc6.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="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.84759f8d.js"></script><link href="./static/css/main.7672c15c.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>

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 ability to show custom dashboards at vmui by specifying a path to a directory with dashboard config files via `-vmui.customDashboardsPath` command-line flag. See [this feature request](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/3322) and [these docs](https://github.com/VictoriaMetrics/VictoriaMetrics/tree/master/app/vmui/packages/vmui/public/dashboards).
+
 * BUGFIX: [vmagent](https://docs.victoriametrics.com/vmagent.html): [dockerswarm_sd_configs](https://docs.victoriametrics.com/sd_configs.html#dockerswarm_sd_configs): apply `filters` only to objects of the specified `role`. Previously filters were applied to all the objects, which could cause errors when different types of objects were used with filters that were not compatible with them. See [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/3579).
 
 
@@ -54,7 +56,6 @@ Released at 2023-01-10
   - `vm_vmselect_concurrent_requests_current` - the current number of concurrently executed requests
   - `vm_vmselect_concurrent_requests_limit_reached_total` - the total number of requests, which were put in the wait queue when `-search.maxConcurrentRequests` concurrent requests are being executed
   - `vm_vmselect_concurrent_requests_limit_timeout_total` - the total number of canceled requests because they were sitting in the wait queue for more than `-search.maxQueueDuration`
-* FEATURE: [vmui](https://docs.victoriametrics.com/#vmui): add ability to define path to custom dashboards via `vmui.customDashboardsPath` flag. See [this feature request](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/3322).
 
 * BUGFIX: [vmui](https://docs.victoriametrics.com/#vmui): properly update the `step` value in url after the `step` input field has been manually changed. This allows preserving the proper `step` when copy-n-pasting the url to another instance of web browser. See [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/3513).
 * BUGFIX: [vmui](https://docs.victoriametrics.com/#vmui): properly update tooltip when quickly hovering multiple lines on the graph. See [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/3530).

docs/README.md

@@ -2504,4 +2504,6 @@ Pass `-help` to VictoriaMetrics in order to see the list of supported command-li
      Show VictoriaMetrics version
   -vmalert.proxyURL string
      Optional URL for proxying requests to vmalert. For example, if -vmalert.proxyURL=http://vmalert:8880 , then alerting API requests such as /api/v1/rules from Grafana will be proxied to http://vmalert:8880/api/v1/rules
+  -vmui.customDashboardsPath string
+     Optional path to vmui dashboards. See https://github.com/VictoriaMetrics/VictoriaMetrics/tree/master/app/vmui/packages/vmui/public/dashboards
 ```

docs/Single-server-VictoriaMetrics.md

@@ -2507,4 +2507,6 @@ Pass `-help` to VictoriaMetrics in order to see the list of supported command-li
      Show VictoriaMetrics version
   -vmalert.proxyURL string
      Optional URL for proxying requests to vmalert. For example, if -vmalert.proxyURL=http://vmalert:8880 , then alerting API requests such as /api/v1/rules from Grafana will be proxied to http://vmalert:8880/api/v1/rules
+  -vmui.customDashboardsPath string
+     Optional path to vmui dashboards. See https://github.com/VictoriaMetrics/VictoriaMetrics/tree/master/app/vmui/packages/vmui/public/dashboards
 ```