Add /metrics-viz page for browsing Prometheus metrics

ci/test/lint-main/checks/check-js-typedefs.sh

@@ -0,0 +1,28 @@
+#!/usr/bin/env bash
+
+# Copyright Materialize, Inc. and contributors. All rights reserved.
+#
+# Use of this software is governed by the Business Source License
+# included in the LICENSE file at the root of this repository.
+#
+# As of the Change Date specified in that file, in accordance with
+# the Business Source License, use of this software will be governed
+# by the Apache License, Version 2.0.
+#
+# check-js-typedefs.sh — type-check JS files with JSDoc annotations.
+
+set -euo pipefail
+
+cd "$(dirname "$0")/../../../.."
+
+. misc/shlib/shlib.bash
+
+if ! command -v npm &>/dev/null; then
+  echo "lint: npm is not installed"
+  echo "hint: install Node.js from https://nodejs.org/ or via your package manager"
+fi
+
+try npm install --prefix test/dataflow-visualizer --silent
+try npx --prefix test/dataflow-visualizer tsc -p test/dataflow-visualizer/tsconfig.typecheck.json
+
+try_status_report

src/environmentd/src/http.rs

@@ -90,6 +90,7 @@ mod cluster;
 mod console;
 mod memory;
 mod metrics;
+mod metrics_viz;
 mod probe;
 mod prometheus;
 mod root;
@@ -210,6 +211,10 @@ impl HttpServer {
                     "/hierarchical-memory",
                     routing::get(memory::handle_hierarchical_memory),
                 )
+                .route(
+                    "/metrics-viz",
+                    routing::get(metrics_viz::handle_metrics_viz),
+                )
                 .route("/static/{*path}", routing::get(root::handle_static));
 
             let mut ws_router = Router::new()

src/environmentd/src/http/metrics_viz.rs

@@ -0,0 +1,25 @@
+// Copyright Materialize, Inc. and contributors. All rights reserved.
+//
+// Use of this software is governed by the Business Source License
+// included in the LICENSE file.
+//
+// As of the Change Date specified in that file, in accordance with
+// the Business Source License, use of this software will be governed
+// by the Apache License, Version 2.0.
+
+use askama::Template;
+use axum::response::IntoResponse;
+
+use crate::BUILD_INFO;
+
+#[derive(Template)]
+#[template(path = "metrics-viz.html")]
+struct MetricsVizTemplate<'a> {
+    version: &'a str,
+}
+
+pub async fn handle_metrics_viz() -> impl IntoResponse {
+    mz_http_util::template_response(MetricsVizTemplate {
+        version: BUILD_INFO.version,
+    })
+}

src/environmentd/src/http/static/js/fetch.js

@@ -0,0 +1,35 @@
+// Copyright Materialize, Inc. and contributors. All rights reserved.
+//
+// Use of this software is governed by the Business Source License
+// included in the LICENSE file.
+//
+// As of the Change Date specified in that file, in accordance with
+// the Business Source License, use of this software will be governed
+// by the Apache License, Version 2.0.
+
+'use strict';
+
+/**
+ * Execute a SQL query against the /api/sql endpoint.
+ *
+ * @param {string} sql - SQL query string
+ * @returns {Promise<Object>} - The parsed JSON response
+ */
+async function query(sql) {
+  const response = await fetch('/api/sql', {
+    method: 'POST',
+    body: JSON.stringify({ query: sql }),
+    headers: { 'Content-Type': 'application/json' },
+  });
+  if (!response.ok) {
+    const text = await response.text();
+    throw `request failed: ${response.status} ${response.statusText}: ${text}`;
+  }
+  const data = await response.json();
+  for (const result of data.results) {
+    if (result.error) {
+      throw `SQL error: ${result.error.message}`;
+    }
+  }
+  return data;
+}

src/environmentd/src/http/static/js/hierarchical-memory.jsx

@@ -11,20 +11,6 @@
 
 const hpccWasm = window['@hpcc-js/wasm'];
 
-async function query(sql) {
-  const response = await fetch('/api/sql', {
-    method: 'POST',
-    body: JSON.stringify({ query: sql }),
-    headers: { 'Content-Type': 'application/json' },
-  });
-  if (!response.ok) {
-    const text = await response.text();
-    throw `request failed: ${response.status} ${response.statusText}: ${text}`;
-  }
-  const data = await response.json();
-  return data;
-}
-
 function formatNameForQuery(name) {
   return `'${name.replace('\'', '\'\'')}'`;
 }

src/environmentd/src/http/static/js/memory.jsx

@@ -11,25 +11,6 @@
 
 const hpccWasm = window['@hpcc-js/wasm'];
 
-async function query(sql) {
-  const response = await fetch('/api/sql', {
-    method: 'POST',
-    body: JSON.stringify({ query: sql }),
-    headers: { 'Content-Type': 'application/json' },
-  });
-  if (!response.ok) {
-    const text = await response.text();
-    throw `request failed: ${response.status} ${response.statusText}: ${text}`;
-  }
-  const data = await response.json();
-  for (const result of data.results) {
-    if (result.error) {
-      throw `SQL error: ${result.error.message}`;
-    }
-  }
-  return data;
-}
-
 function formatNameForQuery(name) {
   return `'${name.replace('\'', '\'\'')}'`;
 }