Mercurial > code > home > repos > homeauto

comparison service/mqtt_to_rdf/src/index.ts @ 1706:2085ed9cfcc4

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
reworking UI to reflect the new inferencing code
author drewp@bigasterisk.com
date Sat, 23 Oct 2021 13:22:40 -0700
parents 24e8cd8fcdcd
children
comparison
equal deleted inserted replaced
1705:250f4c27d56f 1706:2085ed9cfcc4
38 } 38 }
39 interface PageData { 39 interface PageData {
40 server: string; 40 server: string;
41 messagesSeen: number; 41 messagesSeen: number;
42 subscribed: Subscribed[]; 42 subscribed: Subscribed[];
43 rules: string;
44 rulesInferred: string;
43 } 45 }
44 46
45 @customElement("mqtt-to-rdf-page") 47 @customElement("mqtt-to-rdf-page")
46 export class MqttToRdfPage extends LitElement { 48 export class MqttToRdfPage extends LitElement {
47 static get styles() { 49 static get styles() {
78 recentMessageGraphs: [], 80 recentMessageGraphs: [],
79 recentMetrics: [], 81 recentMetrics: [],
80 currentOutputGraph: { t: 1, n3: "(n3)" }, 82 currentOutputGraph: { t: 1, n3: "(n3)" },
81 }, 83 },
82 ], 84 ],
85 rules: "",
86 rulesInferred: "",
83 }; 87 };
84 88
85 render() { 89 render() {
86 const d = this.pageData; 90 const d = this.pageData;
87 const now = Date.now() / 1000; 91 const now = Date.now() / 1000;
88 const ago = (t: number) => html`${Math.round(now - t)}s ago`; 92 const ago = (t: number) => html`${Math.round(now - t)}s ago`;
89 const topicItem = (t: Subscribed, index: number) => 93
90 html`<div class="topic" style="grid-column: 1; grid-row: ${index + 2}">
91 <span class="topic">${t.topic} sticky this to graph column</span>
92 </div>`;
93
94 const parsedGraphAtTime = (g: GraphAtTime) => html` <div class="graph">graph: ${g.n3}</div> `; 94 const parsedGraphAtTime = (g: GraphAtTime) => html` <div class="graph">graph: ${g.n3}</div> `;
95 const recentMessageGraphs = (t: Subscribed, index: number) => 95 const recentMessageGraphs = (t: Subscribed, index: number) =>
96 html` <div style="grid-column: 2; grid-row: ${index + 2}">${t.recentMessageGraphs.map(parsedGraphAtTime)}</div> `; 96 html` <div style="grid-column: 1; grid-row: ${index + 2}">
97 <div>Topic: <span class="topic">${t.topic}</span></div>
98 ${t.recentMessageGraphs.map(parsedGraphAtTime)}
99 </div> `;
97 100
98 const metric = (m: Metric) => html`<div>metrix ${m.name} ${JSON.stringify(m.labels)} = ${m.value}</div>`; 101 const metric = (m: Metric) => html`<div>metrix ${m.name} ${JSON.stringify(m.labels)} = ${m.value}</div>`;
99 const outputMetrics = (t: Subscribed, index: number) => html` <div style="grid-column: 3; grid-row: ${index + 2}">${t.recentMetrics.map(metric)}</div> `; 102 const outputMetrics = (t: Subscribed, index: number) => html` <div style="grid-column: 3; grid-row: ${index + 2}">${t.recentMetrics.map(metric)}</div> `;
100 const outputGraph = (t: Subscribed, index: number) => 103 const outputGraph = (t: Subscribed, index: number) =>
101 html` <div style="grid-column: 4; grid-row: ${index + 2}">${parsedGraphAtTime(t.currentOutputGraph)}</div> `; 104 html` <div style="grid-column: 2; grid-row: ${index + 2}">${parsedGraphAtTime(t.currentOutputGraph)}</div> `;
102 return html` 105 return html`
103 <h1>mqtt_to_rdf</h1> 106 <h1>mqtt_to_rdf</h1>
104 107
105 <section>connected to ${d.server}; messages received ${d.messagesSeen}</section> 108 <section>connected to ${d.server}; messages received ${d.messagesSeen}</section>
106 109
107 <div class="grid"> 110 <div class="grid">
108 <div class="hd" style="grid-row: 1; grid-column: 1">subscribed topics</div> 111 <div class="hd" style="grid-row: 1; grid-column: 1">recent incoming messages, by topic</div>
109 ${d.subscribed.map(topicItem)}
110
111 <div class="hd" style="grid-row: 1; grid-column: 2">recent incoming messages</div>
112 ${d.subscribed.map(recentMessageGraphs)} 112 ${d.subscribed.map(recentMessageGraphs)}
113 113
114 <div class="hd" style="grid-row: 1; grid-column: 3">output metrics: prom collection according to converted graph</div> 114 <div class="hd" style="grid-row: 1; grid-column: 2">output subgraph</div>
115 ${d.subscribed.map(outputGraph)}
116
117 <div class="hd" style="grid-row: 1; grid-column: 3">output metrics: <br>prom collection according to<br> converted graph</div>
115 ${d.subscribed.map(outputMetrics)} 118 ${d.subscribed.map(outputMetrics)}
119 </div>
116 120
117 <div class="hd" style="grid-row: 1; grid-column: 4">output subgraph</div> 121 <table>
118 ${d.subscribed.map(outputGraph)} 122 <tr>
119 </section> 123 <th>Rules input</th>
124 <td><textarea>${this.pageData.rules}</textarea></td>
125 <th>Rules inferred</tH>
126 <td><pre>${this.pageData.rulesInferred}</pre></td>
127 </tr>
128 </table>
120 `; 129 `;
121 } 130 }
122 } 131 }