Perf: Add auto-refresh in dev mode

Adds a mechanism for the frontend to automatically refresh when the backend server restarts in dev mode.
- Adds `/_/dev/version` endpoint to backend.
- Adds `dev_mode` flag to `SkPerfConfig`.
- Implements polling in `perf-scaffold-sk` to check for version changes in dev mode.
- Updates demos and tests to include `dev_mode: false` in mock config.

How to run locally:
1. Run ./perf/run_perfserver.sh --instance chrome
2. Open http://<hostname>:8002
3. Edit files in perf/ (e.g. perf/modules/perf-scaffold-sk/perf-scaffold-sk.ts)
4. The server will rebuild and restart automatically.
5. The browser page will refresh automatically once the server is back up.

Change-Id: I0639f3a92525a029a42a0a1e5b264fa2468593fb
Reviewed-on: https://skia-review.googlesource.com/c/buildbot/+/1101558
Reviewed-by: Farid (Mojtaba) Faridzad <[email protected]>
Commit-Queue: Tony Seaward <[email protected]>

Author: SeawardT

perf/go/frontend/BUILD.bazel

@@ -9,8 +9,8 @@ go_library(
     ],
     data = glob(["testdata/**"]),
     embedsrcs = [
-        "googleanalytics.html",
         "cookieconsent.html",
+        "googleanalytics.html",
     ],
     importpath = "go.skia.org/infra/perf/go/frontend",
     visibility = ["//visibility:public"],

perf/go/frontend/frontend.go

@@ -116,6 +116,8 @@ var (
 	// of the body element otherwise.
 	//go:embed cookieconsent.html
 	cookieConsentSnippet string
+
+	serverStartupTime = time.Now().Unix()
 )
 
 // Frontend is the server for the Perf web UI.
@@ -304,6 +306,7 @@ type SkPerfConfig struct {
 	AlwaysShowCommitInfo        bool               `json:"always_show_commit_info"`         // Boolean to display commit author and hash.
 	AppVersion                  string             `json:"app_version"`                     // The git revision of the buildbot repo this instance was built from.
 	EnableV2UI                  bool               `json:"enable_v2_ui"`                    // True if V2 UI can be toggled.
+	DevMode                     bool               `json:"dev_mode"`
 }
 
 // getPageContext returns the value of `window.perf` serialized as JSON.
@@ -313,6 +316,9 @@ type SkPerfConfig struct {
 // expansion correctly renders this as executable JS.
 func (f *Frontend) getPageContext() (template.JS, error) {
 	imageTag := os.Getenv("IMAGE_TAG")
+	if f.flags.DevMode {
+		imageTag = fmt.Sprintf("Dev Server: %s", time.Unix(serverStartupTime, 0).Format("06/01/02 3:04 PM MST"))
+	}
 
 	pc := SkPerfConfig{
 		InstanceUrl:                 config.Config.URL,
@@ -349,6 +355,7 @@ func (f *Frontend) getPageContext() (template.JS, error) {
 		ShowBisectBtn:               config.Config.ShowBisectBtn,
 		AppVersion:                  f.appVersion,
 		EnableV2UI:                  config.Config.EnableV2UI,
+		DevMode:                     f.flags.DevMode,
 	}
 
 	var buff bytes.Buffer
@@ -975,7 +982,13 @@ func (f *Frontend) feTelemetryHandler(w http.ResponseWriter, r *http.Request) {
 func (f *Frontend) makeDistHandler() func(http.ResponseWriter, *http.Request) {
 	fileServer := http.StripPrefix("/dist", http.FileServer(f.distFileSystem))
 	return func(w http.ResponseWriter, r *http.Request) {
-		w.Header().Add("Cache-Control", "max-age=300")
+		if f.flags.DevMode {
+			w.Header().Set("Cache-Control", "no-store, no-cache, must-revalidate, proxy-revalidate")
+			w.Header().Set("Pragma", "no-cache")
+			w.Header().Set("Expires", "0")
+		} else {
+			w.Header().Add("Cache-Control", "max-age=300")
+		}
 		fileServer.ServeHTTP(w, r)
 	}
 }
@@ -1103,6 +1116,10 @@ func (f *Frontend) GetHandler(allowedHosts []string) http.Handler {
 	router.Get("/_/revision", f.revisionHandler)
 	router.Get("/_/json/", Proxy_GetHandler)
 
+	if f.flags.DevMode {
+		router.Get("/_/dev/version", f.devVersionHandler)
+	}
+
 	return router
 }
 
@@ -1159,3 +1176,14 @@ func (f *Frontend) Serve() {
 	}
 	sklog.Fatal(server.ListenAndServe())
 }
+
+func (f *Frontend) devVersionHandler(w http.ResponseWriter, r *http.Request) {
+	w.Header().Set("Content-Type", "application/json")
+	if err := json.NewEncoder(w).Encode(struct {
+		Version string `json:"version"`
+	}{
+		Version: f.appVersion,
+	}); err != nil {
+		httputils.ReportError(w, err, "Failed to encode version", http.StatusInternalServerError)
+	}
+}

perf/go/frontend/frontend_test.go

@@ -288,3 +288,17 @@ func TestFrontend_GetPageContext_InstanceName(t *testing.T) {
 	// The backend just passes it through.
 	require.Contains(t, string(ctx), "\"instance_name\": \"this-is-a-long-instance-name-that-exceeds-the-limit-of-64-chars-by-a-bit\"")
 }
+
+func TestFrontend_devVersionHandler_ReturnsVersion(t *testing.T) {
+	f := &Frontend{
+		appVersion: "test-version-123",
+	}
+
+	r := httptest.NewRequest("GET", "/_/dev/version", nil)
+	w := httptest.NewRecorder()
+
+	f.devVersionHandler(w, r)
+
+	require.Equal(t, http.StatusOK, w.Result().StatusCode)
+	require.JSONEq(t, `{"version": "test-version-123"}`, w.Body.String())
+}

perf/modules/anomalies-table-sk/anomalies-table-sk-demo.ts

@@ -6,6 +6,7 @@ import fetchMock from 'fetch-mock';
 import { anomaly_table, GROUP_REPORT_RESPONSE, GROUP_REPORT_RESPONSE_WITH_SID } from './test_data';
 
 window.perf = {
+  dev_mode: false,
   instance_url: '',
   instance_name: 'chrome-perf-demo',
   header_image_url: '',

perf/modules/anomalies-table-sk/anomalies-table-sk_test.ts

@@ -14,6 +14,7 @@ describe('anomalies-table-sk', () => {
   let element: AnomaliesTableSk;
   beforeEach(() => {
     window.perf = {
+      dev_mode: false,
       instance_url: '',
       instance_name: 'chrome-perf-test',
       header_image_url: '',

perf/modules/anomaly-sk/anomaly-sk-demo.ts

@@ -5,6 +5,7 @@ import { Anomaly } from '../json';
 import { AnomalySk } from './anomaly-sk';
 
 window.perf = {
+  dev_mode: false,
   instance_url: '',
   instance_name: 'chrome-perf-demo',
   header_image_url: '',

perf/modules/anomaly-sk/anomaly-sk_test.ts

@@ -186,6 +186,7 @@ describe('formatRevisionRange', () => {
     anomalySk.anomaly = dummyAnomaly();
 
     window.perf = {
+      dev_mode: false,
       instance_url: '',
       instance_name: 'chrome-perf-test',
       header_image_url: '',

perf/modules/chart-tooltip-sk/chart-tooltip-sk-demo.ts

@@ -5,6 +5,7 @@ import { $$ } from '../../../infra-sk/modules/dom';
 
 // Mock data for the tooltip.
 window.perf = {
+  dev_mode: false,
   instance_url: '',
   instance_name: 'chrome-perf-demo',
   header_image_url: '',

perf/modules/chart-tooltip-sk/chart-tooltip-sk_test.ts

@@ -17,6 +17,7 @@ describe('chart-tooltip-sk', () => {
     // });
 
     window.perf = {
+      dev_mode: false,
       instance_url: '',
       instance_name: 'chrome-perf-test',
       header_image_url: '',

perf/modules/cluster-page-sk/cluster-page-sk-demo.ts

@@ -105,6 +105,7 @@ customElements.whenDefined('cluster-page-sk').then(() => {
 });
 
 window.perf = {
+  dev_mode: false,
   instance_url: '',
   instance_name: 'chrome-perf-demo',
   header_image_url: '',