diff --git a/examples/example_dashboards.yaml b/examples/example_dashboards.yaml index 2794302..37f00f1 100644 --- a/examples/example_dashboards.yaml +++ b/examples/example_dashboards.yaml @@ -4,14 +4,14 @@ - title: Node cpu source: http://heimdall:9001 query: 'sum by (instance)(irate(node_cpu_seconds_total{mode="system",job="nodestats"}[5m])) * 100' - - title: Node memory - source: http://heimdall:9001 - query: 'node_memory_MemFree_bytes{job="nodestats"}' + name_label: instance - title: Test Dasbboard 2 graphs: - title: Node cpu source: http://heimdall:9001 query: 'sum by (instance)(irate(node_cpu_seconds_total{mode="system",job="nodestats"}[5m])) * 100' + name_label: instance - title: Node memory source: http://heimdall:9001 - query: 'node_memory_MemFree_bytes{,job="nodestats"}' + query: 'node_memory_MemFree_bytes{job="nodestats"}' + name_label: instance diff --git a/src/dashboard.rs b/src/dashboard.rs index 86b04a1..295d1eb 100644 --- a/src/dashboard.rs +++ b/src/dashboard.rs @@ -30,6 +30,7 @@ pub struct Graph { pub title: String, pub source: String, pub query: String, + pub name_label: String, } impl Graph { diff --git a/src/routes.rs b/src/routes.rs index 8c68845..012eb88 100644 --- a/src/routes.rs +++ b/src/routes.rs @@ -60,14 +60,13 @@ pub fn mk_api_routes(config: Arc>) -> Router { ) } -// 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 graph_data_uri = format!("/api/dash/{}/graph/{}", dash_idx, graph_idx); html!( div { h2 { (graph.title) } - timeseries-graph uri=(graph_data_uri) id=(graph_id) { } + timeseries-graph uri=(graph_data_uri) id=(graph_id) label=(graph.name_label) { } } ) } @@ -125,6 +124,7 @@ pub async fn index(State(config): State) -> Markup { script src="/js/lib.js" { } template id="timeseries_template" { div; + div; } (app(State(config.clone())).await) } diff --git a/static/lib.js b/static/lib.js index 2f26151..d443707 100644 --- a/static/lib.js +++ b/static/lib.js @@ -4,13 +4,14 @@ class TimeseriesGraph extends HTMLElement { #height; #intervalId; #pollSeconds; + #label; constructor() { super(); const root = this.attachShadow({ mode: "open" }); var template = document.getElementById("timeseries_template"); - this.#width = 1000; - this.#height = 500; - this.#pollSeconds = 5; + this.#width = 800; + this.#height = 600; + this.#pollSeconds = 30; root.appendChild(template.content.cloneNode(true)); } @@ -30,19 +31,22 @@ class TimeseriesGraph extends HTMLElement { case 'poll-seconds': this.#pollSeconds = newValue; break; + case 'label': + this.#label = newValue; + break; default: // do nothing; break; } - this.updateGraph(); - // TODO(zaphar): reset update timer as well + this.resetInterval(); } connectedCallback() { // TODO(zaphar): Set up the timer loop to update graph data. this.#uri = this.getAttribute('uri'); - if (this.#uri) { - this.updateGraph(); - } + this.#width = this.getAttribute('width'); + this.#height = this.getAttribute('height'); + this.#pollSeconds = this.getAttribute('poll-seconds'); + this.#label = this.getAttribute('label'); this.resetInterval() } @@ -67,6 +71,9 @@ class TimeseriesGraph extends HTMLElement { } resetInterval() { + if (this.#uri) { + this.updateGraph(); + } this.stopInterval() this.#intervalId = setInterval(() => this.updateGraph(), 1000 * this.#pollSeconds); } @@ -88,14 +95,18 @@ class TimeseriesGraph extends HTMLElement { if (data.Series) { var traces = []; for (const pair of data.Series) { + const series = pair[1]; + const labels = pair[0]; var trace = { type: "scatter", mode: "lines", x: [], y: [] }; - //const labels = pair[0]; - const series = pair[1]; + console.log("labels: ", labels, this.#label); + if (labels[this.#label]) { + trace.name = labels[this.#label]; + }; for (const point of series) { trace.x.push(point.timestamp); trace.y.push(point.value);