Mercurial > code > home > repos > front-door-lock
annotate src/MetricRow.ts @ 13:3014db0a5500 default tip
mv board to proj/micro, rename this repo with dashes
| author | drewp@bigasterisk.com |
|---|---|
| date | Fri, 28 Jun 2024 17:08:09 -0700 |
| parents | 7de586bf19ff |
| children |
| rev | line source |
|---|---|
| 5 | 1 import { LitElement, PropertyValueMap, css, html } from "lit"; |
| 2 import { customElement, property, state } from "lit/decorators.js"; | |
| 3 | |
| 4 | |
| 5 @customElement("metric-row") | |
| 6 export class MetricRow extends LitElement { | |
| 7 static styles = [ | |
| 8 css` | |
| 9 :host > div { | |
| 10 border: solid #eee; | |
| 11 border-width: 1px 0; | |
| 12 } | |
| 13 :host > div > span { | |
| 14 display: inline-block; | |
| 15 } | |
| 16 span.label { | |
| 17 width: 20em; | |
| 18 } | |
| 19 span.vmval { | |
| 20 width: 2em; | |
| 21 } | |
| 22 span.asof { | |
| 23 width: 15em; | |
| 24 } | |
| 25 .vmval { | |
| 26 font-weight: bold; | |
| 27 } | |
| 28 .asof { | |
| 29 color: gray; | |
| 30 } | |
| 31 `, | |
| 32 ]; | |
| 33 @property() label: string = "??"; | |
| 34 @property() q: string = ""; | |
| 35 @state() resultTime?: Date; | |
| 36 @state() resultValue?: string; | |
| 37 render() { | |
|
10
7de586bf19ff
fix one vmui path (but this makes the page more broken)
drewp@bigasterisk.com
parents:
5
diff
changeset
|
38 const graphUrl = new URL("/m/vmselect/0/vmui/vmui/?#/"); |
| 5 | 39 |
| 40 graphUrl.searchParams.append("g0.expr", this.q); | |
| 41 graphUrl.searchParams.append("g0.range_input", "6h"); | |
| 42 graphUrl.searchParams.append("g0.relative_time", "last_6_hours"); | |
| 43 return html`<div> | |
| 44 <span class='label'>${this.label}</span> | |
| 45 <span class="vmval"> ${this.resultValue || "..."} </span> | |
| 46 <span class="asof">${this.resultTime ? html`as of ${this.resultTime.toLocaleString("sv")}` : []}</span> | |
| 47 <span class='graph'><a href="${graphUrl.toString()}">[graph]</a> | |
| 48 </div>`; | |
| 49 } | |
| 50 | |
| 51 protected async update(changedProperties: PropertyValueMap<this>) { | |
| 52 if (changedProperties.has("q") && this.q) { | |
| 53 this.getMetricValue(this.q); | |
| 54 } | |
| 55 super.update(changedProperties); | |
| 56 } | |
| 57 | |
| 58 async getMetricValue(q: string) { | |
| 59 const vmapi = "https://bigasterisk.com/m/prometheus/api/v1"; | |
| 60 const queryUrl = new URL(vmapi + "/query"); | |
| 61 queryUrl.searchParams.append("query", q); | |
| 62 const resp = await (await fetch(queryUrl)).json(); | |
| 63 const v = resp.data.result[0].value; | |
| 64 this.resultTime = new Date(v[0] * 1000); | |
| 65 this.resultValue = v[1]; | |
| 66 } | |
| 67 } |