Mercurial > code > home > repos > mqtt_metrics

comparison src/main.ts @ 1:3d7f2dc9beec

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
read 1 mqtt topic; dummy convert; route to debugging view
author drewp@bigasterisk.com
date Fri, 09 Aug 2024 16:59:06 -0700
parents 0b5b4ede1bf5
children 579df3a4e62d
comparison
equal deleted inserted replaced
0:0b5b4ede1bf5 1:3d7f2dc9beec
1 import { LitElement, TemplateResult, css, html } from "lit"; 1 import { LitElement, PropertyValues, TemplateResult, css, html } from "lit";
2 import { customElement } from "lit/decorators.js"; 2 import { customElement, property, state } from "lit/decorators.js";
3
4 type ConversionEvent = {
5 message: {
6 t: number;
7 topic: string;
8 payload: string;
9 };
10 metricEvent: {
11 name: string;
12 labels: {
13 labelName: string;
14 labelValue: string;
15 }[];
16 value: string;
17 };
18 };
3 19
4 @customElement("mm-page") 20 @customElement("mm-page")
5 export class MmPage extends LitElement { 21 export class MmPage extends LitElement {
6 static styles = [ 22 static styles = [
7 css` 23 css`
8 :host { 24 :host {
9 display: flex; 25 display: flex;
10 flex-direction: column; 26 flex-direction: column;
11 height: 100vh; 27 min-height: 100vh;
12 background: #121212; 28 background: #121212;
13 color: white; 29 color: white;
14 text-shadow: 0.6px 0.6px 0px #ffffff70; 30 text-shadow: 0.6px 0.6px 0px #ffffff70;
15 font-family: monospace; 31 font-family: monospace;
16 font-size: 135%; 32 font-size: 135%;
17 } 33 }
34 `,
35 ];
36 @state() displayedMessages: ConversionEvent[] = [];
37
38 protected firstUpdated(_changedProperties: PropertyValues): void {
39 super.firstUpdated(_changedProperties);
40 new EventSource("api/debugEvents").addEventListener("message", (ev) => {
41 this.displayedMessages.push(JSON.parse(ev.data));
42 const maxShown = 20;
43 if (this.displayedMessages.length > maxShown) {
44 this.displayedMessages = this.displayedMessages.slice(-maxShown);
45 }
46 this.requestUpdate();
47 });
48 }
49
50 render() {
51 return html`
52 <h1>Mqtt metrics</h1>
53
54 ${this.displayedMessages.map((ev) => html`<mm-conversion-event .ev=${ev}></mm-conversion-event>`)}
55 <p><a href="metrics">metrics</a> |</p>
56 <bigast-loginbar></bigast-loginbar>
57 `;
58 }
59 }
60
61 @customElement("mm-conversion-event")
62 export class MmConversionEvent extends LitElement {
63 static styles = [
64 css`
18 div.message { 65 div.message {
19 color: #888; 66 color: #888;
67 margin-bottom: 1em;
20 } 68 }
21 .msgKey { 69 .msgKey {
22 color: #006699; 70 color: #006699;
23 padding-left: 14px; 71 padding-left: 1em;
24 } 72 }
25 .msgValue { 73 .msgValue {
26 color: #ff4500; 74 color: #ff4500;
27 } 75 }
28 .metricName { 76 .metricName {
37 .metricValue { 85 .metricValue {
38 color: #4169e1; 86 color: #4169e1;
39 } 87 }
40 `, 88 `,
41 ]; 89 ];
90 @property() ev?: ConversionEvent;
42 render() { 91 render() {
43 return html` 92 if (!this.ev) return html``;
44 <h1>Mqtt metrics</h1> 93 const ev = this.ev;
94 const t = new Date(ev.message.t * 1000);
95 return html`<div class="message">
96 <div>
97 Incoming mqtt message:
98 <span class="msgKey">t</span>=<span class="msgValue"> ${t.toLocaleString("sv")} </span> <span class="msgKey">topic</span>=<span class="msgValue"
99 >${ev.message.topic}</span
100 >
101 <span class="msgKey">message</span>=<span class="msgValue">${ev.message.payload}</span>
102 </div>
103 <div>
104 Converted to metric:
105 <span class="metricName">${ev.metricEvent.name}</span>
45 106
46 <div class="message"> 107 {${ev.metricEvent.labels.map(
47 <div> 108 (l, i) => html`
48 Incoming mqtt message: <span class="msgKey">t</span>=<span class="msgValue">${"2024-08-09 14:43:28"}</span> <span class="msgKey">topic</span>=<span 109 <span class="metricLabelName">${l.labelName}</span>=<span class="metricLabelValue">${l.labelValue}</span>
49 class="msgValue" 110
50 >${"tr-air-quality/sensor/particulate_matter__10_0__m_concentration/state"}</span 111 ${i < ev.metricEvent.labels.length - 1 ? "," : "}"}
51 > 112 `
52 <span class="msgKey">message</span>=<span class="msgValue">${"12"}</span> 113 )}
53 </div> 114 value=<span class="metricValue">${ev.metricEvent.value}</span>
54 <div>
55 Converted to metrics event:
56 <span class="metricName">pm_concentration</span>
57 {
58 <span class="metricLabelName">location</span>="<span class="metricLabelValue">rr</span>", <span class="metricLabelName">size</span>="<span
59 class="metricLabelValue"
60 >10</span
61 >" } value=<span class="metricValue">12</span>
62 </div>
63 </div> 115 </div>
64 116 </div>`;
65 <p>
66 <a href="metrics">metrics</a> |
67 </p>
68 <bigast-loginbar></bigast-loginbar>
69 `;
70 } 117 }
71 } 118 }