ui: Add a link to the embed url for a graph

feat: URL for embedded graphs.

src/main.rs

@@ -90,6 +90,10 @@ async fn main() -> anyhow::Result<()> {
         .nest("/api", routes::mk_api_routes(config.clone()))
         // HTMX ui component endpoints
         .nest("/ui", routes::mk_ui_routes(config.clone()))
+        .route(
+            "/embed/dash/:dash_idx/graph/:graph_idx",
+            get(routes::graph_embed).with_state(State(config.clone())),
+        )
         .route("/dash/:dash_idx", get(routes::dashboard_direct))
         .route("/", get(routes::index).with_state(State(config.clone())))
         .layer(TraceLayer::new_for_http())

src/routes.rs

@@ -77,9 +77,10 @@ pub fn mk_api_routes(config: Arc<Vec<Dashboard>>) -> Router<Config> {
 pub fn graph_component(dash_idx: usize, graph_idx: usize, graph: &Graph) -> Markup {
     let graph_id = format!("graph-{}-{}", dash_idx, graph_idx);
     let graph_data_uri = format!("/api/dash/{}/graph/{}", dash_idx, graph_idx);
+    let graph_embed_uri = format!("/embed/dash/{}/graph/{}", dash_idx, graph_idx);
     html!(
         div {
-            h2 { (graph.title) }
+            h2 { (graph.title) " - " a href=(graph_embed_uri) { "embed url" } }
             @if graph.d3_tick_format.is_some() { 
                 timeseries-graph uri=(graph_data_uri) id=(graph_id) d3-tick-format=(graph.d3_tick_format.as_ref().unwrap()) { }
             } @else {
@@ -135,6 +136,31 @@ pub fn mk_ui_routes(config: Arc<Vec<Dashboard>>) -> Router<Config> {
         )
 }
 
+fn graph_lib_prelude() -> Markup {
+    html! {
+        script src="/js/plotly.js" { }
+        script defer src="/js/lib.js" {  }
+        link rel="stylesheet" href="/static/site.css" {  }
+    }
+}
+
+pub async fn graph_embed(
+    State(config): State<Config>,
+    Path((dash_idx, graph_idx)): Path<(usize, usize)>,
+) -> Markup {
+    html! {
+        html {
+            head {
+                title { ("Heracles - Prometheus Unshackled") }
+            }
+            body {
+                (graph_lib_prelude())
+                (graph_ui(State(config.clone()), Path((dash_idx, graph_idx))).await)
+            }
+        }
+    }
+}
+
 async fn index_html(config: Config, dash_idx: Option<usize>) -> Markup {
     html! {
         html {
@@ -142,10 +168,8 @@ async fn index_html(config: Config, dash_idx: Option<usize>) -> Markup {
                 title { ("Heracles - Prometheus Unshackled") }
             }
             body {
-                script src="/js/plotly.js" { }
                 script src="/js/htmx.js" {  }
-                script defer src="/js/lib.js" {  }
-                link rel="stylesheet" href="/static/site.css" {  }
+                (graph_lib_prelude())
                 (app(State(config.clone()), dash_idx).await)
             }
         }
@@ -156,10 +180,7 @@ pub async fn index(State(config): State<Config>) -> Markup {
     index_html(config, None).await
 }
 
-pub async fn dashboard_direct(
-    State(config): State<Config>,
-    Path(dash_idx): Path<usize>,
-) -> Markup {
+pub async fn dashboard_direct(State(config): State<Config>, Path(dash_idx): Path<usize>) -> Markup {
     index_html(config, Some(dash_idx)).await
 }
 
@@ -222,7 +243,11 @@ pub fn mk_js_routes(config: Arc<Vec<Dashboard>>) -> Router<Config> {
 
 pub fn mk_static_routes(config: Arc<Vec<Dashboard>>) -> Router<Config> {
     Router::new()
-        .route("/site.css", get(|| async { return include_str!("../static/site.css"); }))
+        .route(
+            "/site.css",
+            get(|| async {
+                return include_str!("../static/site.css");
+            }),
+        )
         .with_state(State(config))
 }
-