app/{vmselect,vlselect}: enable caching of static contents from /vmui/static/ folder at client side

This should improve repated VMUI page load times on slow networks

See https://developer.chrome.com/docs/lighthouse/performance/uses-long-cache-ttl/

app/vlselect/main.go

@@ -88,6 +88,12 @@ func RequestHandler(w http.ResponseWriter, r *http.Request) bool {
 		return true
 	}
 	if strings.HasPrefix(path, "/vmui/") {
+		if strings.HasPrefix(path, "/vmui/static/") {
+			// Allow clients caching static contents for long period of time, since it shouldn't change over time.
+			// Path to static contents (such as js and css) must be changed whenever its contents is changed.
+			// See https://developer.chrome.com/docs/lighthouse/performance/uses-long-cache-ttl/
+			w.Header().Set("Cache-Control", "max-age=31536000")
+		}
 		r.URL.Path = path
 		vmuiFileServer.ServeHTTP(w, r)
 		return true

app/vmselect/main.go

@@ -352,38 +352,31 @@ func selectHandler(qt *querytracer.Tracer, startTime time.Time, w http.ResponseW
 		httpserver.Redirect(w, newURL)
 		return true
 	}
+	if strings.HasPrefix(p.Suffix, "graph/") || strings.HasPrefix(p.Suffix, "prometheus/graph/") {
+		// This is needed for serving /graph URLs from Prometheus datasource in Grafana.
+		p.Suffix = strings.Replace(p.Suffix, "graph/", "vmui/", 1)
+		r.URL.Path = strings.Replace(r.URL.Path, "/graph/", "/vmui/", 1)
+	}
+	if p.Suffix == "vmui/custom-dashboards" || p.Suffix == "prometheus/vmui/custom-dashboards" {
+		if err := handleVMUICustomDashboards(w); err != nil {
+			httpserver.Errorf(w, r, "%s", err)
+			return true
+		}
+		return true
+	}
 	if strings.HasPrefix(p.Suffix, "vmui/") || strings.HasPrefix(p.Suffix, "prometheus/vmui/") {
 		// vmui access.
-		if p.Suffix == "vmui/custom-dashboards" || p.Suffix == "prometheus/vmui/custom-dashboards" {
+		if strings.HasPrefix(p.Suffix, "vmui/static/") {
-			if err := handleVMUICustomDashboards(w); err != nil {
+			// Allow clients caching static contents for long period of time, since it shouldn't change over time.
-				httpserver.Errorf(w, r, "%s", err)
+			// Path to static contents (such as js and css) must be changed whenever its contents is changed.
-				return true
+			// See https://developer.chrome.com/docs/lighthouse/performance/uses-long-cache-ttl/
-			}
+			w.Header().Set("Cache-Control", "max-age=31536000")
-			return true
 		}
 		prefix := strings.Join([]string{"", p.Prefix, p.AuthToken}, "/")
 		r.URL.Path = strings.Replace(r.URL.Path, "/prometheus/vmui/", "/vmui/", 1)
 		http.StripPrefix(prefix, vmuiFileServer).ServeHTTP(w, r)
 		return true
 	}
-	if strings.HasPrefix(p.Suffix, "graph/") || strings.HasPrefix(p.Suffix, "prometheus/graph/") {
-		// This is needed for serving /graph URLs from Prometheus datasource in Grafana.
-		if p.Suffix == "graph/custom-dashboards" || p.Suffix == "prometheus/graph/custom-dashboards" {
-			if err := handleVMUICustomDashboards(w); err != nil {
-				httpserver.Errorf(w, r, "%s", err)
-				return true
-			}
-			return true
-		}
-		prefix := strings.Join([]string{"", p.Prefix, p.AuthToken}, "/")
-		if strings.HasPrefix(p.Suffix, "prometheus/graph/") {
-			r.URL.Path = strings.Replace(r.URL.Path, "/prometheus/graph/", "/vmui/", 1)
-		} else {
-			r.URL.Path = strings.Replace(r.URL.Path, "/graph/", "/vmui/", 1)
-		}
-		http.StripPrefix(prefix, vmuiFileServer).ServeHTTP(w, r)
-		return true
-	}
 	if strings.HasPrefix(p.Suffix, "prometheus/api/v1/label/") {
 		s := p.Suffix[len("prometheus/api/v1/label/"):]
 		if strings.HasSuffix(s, "/values") {

docs/CHANGELOG.md

@@ -39,6 +39,7 @@ The sandbox cluster installation is running under the constant load generated by
 * FEATURE: [Alerting rules for VictoriaMetrics](https://github.com/VictoriaMetrics/VictoriaMetrics/tree/master/deployment/docker#alerts): account for `vmauth` component for alerts `ServiceDown` and `TooManyRestarts`.
 * FEATURE: [vmui](https://docs.victoriametrics.com/#vmui): add support for functions, labels, values in autocomplete. See [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/3006).
 * FEATURE: [vmui](https://docs.victoriametrics.com/#vmui): retain specified time interval when executing a query from `Top Queries`. See [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/5097).
+* FEATURE: [vmui](https://docs.victoriametrics.com/#vmui): improve repeated VMUI page load times by enabling caching of static js and css at web browser side according to [these recommendations](https://developer.chrome.com/docs/lighthouse/performance/uses-long-cache-ttl/).
 
 * BUGFIX: [vmalert](https://docs.victoriametrics.com/vmalert.html): strip sensitive information such as auth headers or passwords from datasource, remote-read, remote-write or notifier URLs in log messages or UI. This behavior is by default and is controlled via `-datasource.showURL`, `-remoteRead.showURL`, `remoteWrite.showURL` or `-notifier.showURL` cmd-line flags. See [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/5044).
 * BUGFIX: [vmselect](https://docs.victoriametrics.com/Cluster-VictoriaMetrics.html): improve performance and memory usage during query processing on machines with big number of CPU cores. See [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/5087) for details.