From 31f7ef0811e5f76d349b5004cb56746f838416c7 Mon Sep 17 00:00:00 2001
From: Aliaksandr Valialkin <valyala@victoriametrics.com>
Date: Thu, 12 Oct 2023 09:30:39 +0200
Subject: [PATCH] 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 |  6 ++++++
 app/vmselect/main.go | 38 ++++++++++++++++++--------------------
 docs/CHANGELOG.md    |  1 +
 3 files changed, 25 insertions(+), 20 deletions(-)

diff --git a/app/vlselect/main.go b/app/vlselect/main.go
index 844437c041..df8e949254 100644
--- a/app/vlselect/main.go
+++ b/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
diff --git a/app/vmselect/main.go b/app/vmselect/main.go
index 8f15b83f3a..0eb7f64d56 100644
--- a/app/vmselect/main.go
+++ b/app/vmselect/main.go
@@ -172,8 +172,7 @@ func RequestHandler(w http.ResponseWriter, r *http.Request) bool {
 	}
 
 	// vmui access.
-	switch {
-	case path == "/vmui" || path == "/graph":
+	if path == "/vmui" || path == "/graph" {
 		// VMUI access via incomplete url without `/` in the end. Redirect to complete url.
 		// Use relative redirect, since the hostname and path prefix may be incorrect if VictoriaMetrics
 		// is hidden behind vmauth or similar proxy.
@@ -182,29 +181,28 @@ func RequestHandler(w http.ResponseWriter, r *http.Request) bool {
 		newURL := path + "/?" + r.Form.Encode()
 		httpserver.Redirect(w, newURL)
 		return true
-	case strings.HasPrefix(path, "/vmui/"):
-		if path == "/vmui/custom-dashboards" {
-			if err := handleVMUICustomDashboards(w); err != nil {
-				httpserver.Errorf(w, r, "%s", err)
-				return true
-			}
+	}
+	if strings.HasPrefix(path, "/graph/") {
+		// This is needed for serving /graph URLs from Prometheus datasource in Grafana.
+		path = strings.Replace(path, "/graph/", "/vmui/", 1)
+	}
+	if path == "/vmui/custom-dashboards" {
+		if err := handleVMUICustomDashboards(w); err != nil {
+			httpserver.Errorf(w, r, "%s", err)
 			return true
 		}
+		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
-	case strings.HasPrefix(path, "/graph/"):
-		// This is needed for serving /graph URLs from Prometheus datasource in Grafana.
-		if path == "/graph/custom-dashboards" {
-			if err := handleVMUICustomDashboards(w); err != nil {
-				httpserver.Errorf(w, r, "%s", err)
-				return true
-			}
-			return true
-		}
-		r.URL.Path = strings.Replace(path, "/graph/", "/vmui/", 1)
-		vmuiFileServer.ServeHTTP(w, r)
-		return true
 	}
 
 	if strings.HasPrefix(path, "/api/v1/label/") {
diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md
index 7c1c4b19fe..6423138569 100644
--- a/docs/CHANGELOG.md
+++ b/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.