--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/MetricRow.ts	Sun Oct 15 18:47:45 2023 -0700
@@ -0,0 +1,67 @@
+import { LitElement, PropertyValueMap, css, html } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+
+
+@customElement("metric-row")
+export class MetricRow extends LitElement {
+  static styles = [
+    css`
+      :host > div {
+        border: solid #eee;
+        border-width: 1px 0;
+      }
+      :host > div > span {
+        display: inline-block;
+      }
+      span.label {
+        width: 20em;
+      }
+      span.vmval {
+        width: 2em;
+      }
+      span.asof {
+        width: 15em;
+      }
+      .vmval {
+        font-weight: bold;
+      }
+      .asof {
+        color: gray;
+      }
+    `,
+  ];
+  @property() label: string = "??";
+  @property() q: string = "";
+  @state() resultTime?: Date;
+  @state() resultValue?: string;
+  render() {
+    const graphUrl = new URL("https://bigasterisk.com/m/vmui/#/");
+
+    graphUrl.searchParams.append("g0.expr", this.q);
+    graphUrl.searchParams.append("g0.range_input", "6h");
+    graphUrl.searchParams.append("g0.relative_time", "last_6_hours");
+    return html`<div>
+      <span class='label'>${this.label}</span>
+      <span class="vmval"> ${this.resultValue || "..."} </span>
+      <span class="asof">${this.resultTime ? html`as of ${this.resultTime.toLocaleString("sv")}` : []}</span>
+      <span class='graph'><a href="${graphUrl.toString()}">[graph]</a>
+    </div>`;
+  }
+
+  protected async update(changedProperties: PropertyValueMap<this>) {
+    if (changedProperties.has("q") && this.q) {
+      this.getMetricValue(this.q);
+    }
+    super.update(changedProperties);
+  }
+
+  async getMetricValue(q: string) {
+    const vmapi = "https://bigasterisk.com/m/prometheus/api/v1";
+    const queryUrl = new URL(vmapi + "/query");
+    queryUrl.searchParams.append("query", q);
+    const resp = await (await fetch(queryUrl)).json();
+    const v = resp.data.result[0].value;
+    this.resultTime = new Date(v[0] * 1000);
+    this.resultValue = v[1];
+  }
+}