refactor: serve the js libraries via url

This commit is contained in:
Jeremy Wall 2024-02-07 14:37:24 -06:00
parent 8a6d5d5b9d
commit e0bbf15c6f
2 changed files with 42 additions and 5 deletions

View File

@ -63,6 +63,7 @@ async fn main() -> anyhow::Result<()> {
let config = std::sync::Arc::new(dashboard::read_dashboard_list(args.config.as_path())?);
let router = Router::new()
// JSON api endpoints
.nest("/js", routes::mk_js_routes(config.clone()))
.nest("/api", routes::mk_api_routes(config.clone()))
// HTMX ui component endpoints
.nest("/ui", routes::mk_ui_routes(config.clone()))

View File

@ -15,9 +15,11 @@ use std::sync::Arc;
use axum::{
extract::{Path, State},
response::Response,
routing::get,
Json, Router,
};
use axum_macros::debug_handler;
use maud::{html, Markup, PreEscaped};
use tracing::debug;
@ -61,7 +63,12 @@ pub fn mk_api_routes(config: Arc<Vec<Dashboard>>) -> Router<Config> {
// TODO(jwall): This should probably be encapsulated in a web component?
pub fn graph_component(dash_idx: usize, graph_idx: usize, graph: &Graph) -> Markup {
let graph_id = format!("graph-{}-{}", dash_idx, graph_idx);
let script = format!("var data = []; Plotly.newPlot('{}', data, {{ width: 500, height: 500 }});", graph_id);
// initialize the plot with Plotly.react
// Update plot with Plotly.react which is more efficient
let script = format!(
"var data = []; Plotly.react('{}', data, {{ width: 500, height: 500 }});",
graph_id
);
html!(
div {
h2 { (graph.title) }
@ -89,7 +96,11 @@ pub async fn graph_ui(
pub async fn dash_ui(State(config): State<Config>, Path(dash_idx): Path<usize>) -> Markup {
// TODO(zaphar): Should do better http error reporting here.
let dash = config.get(dash_idx).expect("No such dashboard");
let graph_iter = dash.graphs.iter().enumerate().collect::<Vec<(usize, &Graph)>>();
let graph_iter = dash
.graphs
.iter()
.enumerate()
.collect::<Vec<(usize, &Graph)>>();
html!(
h1 { (dash.title) }
@for (idx, graph) in &graph_iter {
@ -100,7 +111,10 @@ pub async fn dash_ui(State(config): State<Config>, Path(dash_idx): Path<usize>)
pub fn mk_ui_routes(config: Arc<Vec<Dashboard>>) -> Router<Config> {
Router::new()
.route("/dash/:dash_idx", get(dash_ui).with_state(State(config.clone())))
.route(
"/dash/:dash_idx",
get(dash_ui).with_state(State(config.clone())),
)
.route(
"/dash/:dash_idx/graph/:graph_idx",
get(graph_ui).with_state(State(config)),
@ -114,8 +128,8 @@ pub async fn index(State(config): State<Config>) -> Markup {
title { ("Heracles - Prometheus Unshackled") }
}
body {
script { (PreEscaped(include_str!("../static/plotly-2.27.0.min.js"))) }
script { (PreEscaped(include_str!("../static/htmx.min.js"))) }
script src="/js/plotly.js" { }
script src="/js/htmx.js" { }
(app(State(config.clone())).await)
}
}
@ -141,3 +155,25 @@ pub async fn app(State(config): State<Config>) -> Markup {
}
}
}
pub fn javascript_response(content: &str) -> Response<String> {
Response::builder()
.header("Content-Type", "text/javascript")
.body(content.to_string())
.expect("Invalid javascript response")
}
pub async fn htmx() -> Response<String> {
javascript_response(include_str!("../static/htmx.min.js"))
}
pub async fn plotly() -> Response<String> {
javascript_response(include_str!("../static/plotly-2.27.0.min.js"))
}
pub fn mk_js_routes(config: Arc<Vec<Dashboard>>) -> Router<Config> {
Router::new()
.route("/plotly.js", get(plotly))
.route("/htmx.js", get(htmx))
.with_state(State(config))
}