feat: specify the trace label in graph config.

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
+      name_label: instance
-      source: http://heimdall:9001
-      query: 'node_memory_MemFree_bytes{job="nodestats"}'
 - 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

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 {

src/routes.rs

@@ -60,14 +60,13 @@ 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 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<Config>) -> Markup {
                 script src="/js/lib.js" {  }
                 template id="timeseries_template" {
                     div;
+                    div;
                 }
                 (app(State(config.clone())).await)
             }

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.#width = 800;
-        this.#height = 500;
+        this.#height = 600;
-        this.#pollSeconds = 5;
+        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();
+        this.resetInterval();
-        // TODO(zaphar): reset update timer as well
     }
 
     connectedCallback() {
         // TODO(zaphar): Set up the timer loop to update graph data.
         this.#uri = this.getAttribute('uri');
-        if (this.#uri) {
+        this.#width = this.getAttribute('width');
-            this.updateGraph();
+        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];
+                console.log("labels: ", labels, this.#label);
-                const series = pair[1];
+                if (labels[this.#label]) {
+                    trace.name = labels[this.#label];
+                };
                 for (const point of series) {
                     trace.x.push(point.timestamp);
                     trace.y.push(point.value);