Mercurial > code > home > repos > light9

annotate web/metrics/StatsLine.ts @ 2441:0761cdd5bff0

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
fix delay on setting midi, so it doesn't grab faders when you're sliding them
author drewp@bigasterisk.com
date Fri, 31 May 2024 11:52:47 -0700
parents 4556eebe5d73
children
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
2033
224c4a1625d7 serve homepage with lit and vite
drewp@bigasterisk.com
parents: 1958
diff changeset
1 import { css, html, LitElement, TemplateResult } from "lit";
224c4a1625d7 serve homepage with lit and vite
drewp@bigasterisk.com
parents: 1958
diff changeset
2 import { customElement, property } from "lit/decorators.js";
2034
04ed5d134973 WIP draw prom metrics on homepage
drewp@bigasterisk.com
parents: 2033
diff changeset
3 export { StatsProcess } from "./StatsProcess";
04ed5d134973 WIP draw prom metrics on homepage
drewp@bigasterisk.com
parents: 2033
diff changeset
4 import parsePrometheusTextFormat from "parse-prometheus-text-format";
2280
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
5 import debug from "debug";
2372
06bf6dae8e64 reorg tools into light9/web/ and a single vite instance
drewp@bigasterisk.com
parents: 2357
diff changeset
6 import { clamp } from "../floating_color_picker";
2280
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
7 const log = debug("home");
2034
04ed5d134973 WIP draw prom metrics on homepage
drewp@bigasterisk.com
parents: 2033
diff changeset
8
04ed5d134973 WIP draw prom metrics on homepage
drewp@bigasterisk.com
parents: 2033
diff changeset
9 interface Value {
04ed5d134973 WIP draw prom metrics on homepage
drewp@bigasterisk.com
parents: 2033
diff changeset
10 labels: { string: string };
2280
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
11 value?: string;
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
12 count?: number;
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
13 sum?: number;
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
14 buckets?: { [value: string]: string };
2034
04ed5d134973 WIP draw prom metrics on homepage
drewp@bigasterisk.com
parents: 2033
diff changeset
15 }
04ed5d134973 WIP draw prom metrics on homepage
drewp@bigasterisk.com
parents: 2033
diff changeset
16 interface Metric {
04ed5d134973 WIP draw prom metrics on homepage
drewp@bigasterisk.com
parents: 2033
diff changeset
17 name: string;
04ed5d134973 WIP draw prom metrics on homepage
drewp@bigasterisk.com
parents: 2033
diff changeset
18 help: string;
2280
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
19 type: "GAUGE" | "SUMMARY" | "COUNTER" | "HISTOGRAM" | "UNTYPED";
2034
04ed5d134973 WIP draw prom metrics on homepage
drewp@bigasterisk.com
parents: 2033
diff changeset
20 metrics: Value[];
04ed5d134973 WIP draw prom metrics on homepage
drewp@bigasterisk.com
parents: 2033
diff changeset
21 }
04ed5d134973 WIP draw prom metrics on homepage
drewp@bigasterisk.com
parents: 2033
diff changeset
22 type Metrics = Metric[];
2033
224c4a1625d7 serve homepage with lit and vite
drewp@bigasterisk.com
parents: 1958
diff changeset
23
2280
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
24 function nonBoring(m: Metric) {
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
25 return (
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
26 !m.name.endsWith("_created") && //
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
27 !m.name.startsWith("python_gc_") &&
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
28 m.name != "python_info" &&
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
29 m.name != "process_max_fds" &&
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
30 m.name != "process_virtual_memory_bytes" &&
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
31 m.name != "process_resident_memory_bytes" &&
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
32 m.name != "process_start_time_seconds" &&
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
33 m.name != "process_cpu_seconds_total"
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
34 );
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
35 }
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
36
2033
224c4a1625d7 serve homepage with lit and vite
drewp@bigasterisk.com
parents: 1958
diff changeset
37 @customElement("stats-line")
224c4a1625d7 serve homepage with lit and vite
drewp@bigasterisk.com
parents: 1958
diff changeset
38 export class StatsLine extends LitElement {
224c4a1625d7 serve homepage with lit and vite
drewp@bigasterisk.com
parents: 1958
diff changeset
39 @property() name = "?";
2034
04ed5d134973 WIP draw prom metrics on homepage
drewp@bigasterisk.com
parents: 2033
diff changeset
40 @property() stats: Metrics = [];
1935
5acdf209394d start live stats displayer on home page
Drew Perttula <drewp@bigasterisk.com>
parents:
diff changeset
41
2036
00afa5ec081a restore more of the stats widget including the cpu/mem spinner
drewp@bigasterisk.com
parents: 2034
diff changeset
42 prevCpuNow = 0;
00afa5ec081a restore more of the stats widget including the cpu/mem spinner
drewp@bigasterisk.com
parents: 2034
diff changeset
43 prevCpuTotal = 0;
00afa5ec081a restore more of the stats widget including the cpu/mem spinner
drewp@bigasterisk.com
parents: 2034
diff changeset
44 @property() cpu = 0;
00afa5ec081a restore more of the stats widget including the cpu/mem spinner
drewp@bigasterisk.com
parents: 2034
diff changeset
45 @property() mem = 0;
00afa5ec081a restore more of the stats widget including the cpu/mem spinner
drewp@bigasterisk.com
parents: 2034
diff changeset
46
2033
224c4a1625d7 serve homepage with lit and vite
drewp@bigasterisk.com
parents: 1958
diff changeset
47 updated(changedProperties: any) {
224c4a1625d7 serve homepage with lit and vite
drewp@bigasterisk.com
parents: 1958
diff changeset
48 changedProperties.forEach((oldValue: any, propName: string) => {
224c4a1625d7 serve homepage with lit and vite
drewp@bigasterisk.com
parents: 1958
diff changeset
49 if (propName == "name") {
224c4a1625d7 serve homepage with lit and vite
drewp@bigasterisk.com
parents: 1958
diff changeset
50 const reload = () => {
2375
623836db99af fix ts warning
drewp@bigasterisk.com
parents: 2373
diff changeset
51 fetch("/service/" + this.name + "/metrics").then((resp) => {
2033
224c4a1625d7 serve homepage with lit and vite
drewp@bigasterisk.com
parents: 1958
diff changeset
52 if (resp.ok) {
224c4a1625d7 serve homepage with lit and vite
drewp@bigasterisk.com
parents: 1958
diff changeset
53 resp
2034
04ed5d134973 WIP draw prom metrics on homepage
drewp@bigasterisk.com
parents: 2033
diff changeset
54 .text()
2033
224c4a1625d7 serve homepage with lit and vite
drewp@bigasterisk.com
parents: 1958
diff changeset
55 .then((msg) => {
2034
04ed5d134973 WIP draw prom metrics on homepage
drewp@bigasterisk.com
parents: 2033
diff changeset
56 this.stats = parsePrometheusTextFormat(msg) as Metrics;
2036
00afa5ec081a restore more of the stats widget including the cpu/mem spinner
drewp@bigasterisk.com
parents: 2034
diff changeset
57 this.extractProcessStats(this.stats);
2033
224c4a1625d7 serve homepage with lit and vite
drewp@bigasterisk.com
parents: 1958
diff changeset
58 setTimeout(reload, 1000);
224c4a1625d7 serve homepage with lit and vite
drewp@bigasterisk.com
parents: 1958
diff changeset
59 })
224c4a1625d7 serve homepage with lit and vite
drewp@bigasterisk.com
parents: 1958
diff changeset
60 .catch((err) => {
2375
623836db99af fix ts warning
drewp@bigasterisk.com
parents: 2373
diff changeset
61 log(`${this.name} failing`, err);
2033
224c4a1625d7 serve homepage with lit and vite
drewp@bigasterisk.com
parents: 1958
diff changeset
62 setTimeout(reload, 1000);
224c4a1625d7 serve homepage with lit and vite
drewp@bigasterisk.com
parents: 1958
diff changeset
63 });
224c4a1625d7 serve homepage with lit and vite
drewp@bigasterisk.com
parents: 1958
diff changeset
64 } else {
224c4a1625d7 serve homepage with lit and vite
drewp@bigasterisk.com
parents: 1958
diff changeset
65 if (resp.status == 502) {
224c4a1625d7 serve homepage with lit and vite
drewp@bigasterisk.com
parents: 1958
diff changeset
66 setTimeout(reload, 5000);
224c4a1625d7 serve homepage with lit and vite
drewp@bigasterisk.com
parents: 1958
diff changeset
67 }
224c4a1625d7 serve homepage with lit and vite
drewp@bigasterisk.com
parents: 1958
diff changeset
68 // 404: likely not mapped to a responding server
224c4a1625d7 serve homepage with lit and vite
drewp@bigasterisk.com
parents: 1958
diff changeset
69 }
224c4a1625d7 serve homepage with lit and vite
drewp@bigasterisk.com
parents: 1958
diff changeset
70 });
1935
5acdf209394d start live stats displayer on home page
Drew Perttula <drewp@bigasterisk.com>
parents:
diff changeset
71 };
2033
224c4a1625d7 serve homepage with lit and vite
drewp@bigasterisk.com
parents: 1958
diff changeset
72 reload();
224c4a1625d7 serve homepage with lit and vite
drewp@bigasterisk.com
parents: 1958
diff changeset
73 }
224c4a1625d7 serve homepage with lit and vite
drewp@bigasterisk.com
parents: 1958
diff changeset
74 });
224c4a1625d7 serve homepage with lit and vite
drewp@bigasterisk.com
parents: 1958
diff changeset
75 }
2036
00afa5ec081a restore more of the stats widget including the cpu/mem spinner
drewp@bigasterisk.com
parents: 2034
diff changeset
76 extractProcessStats(stats: Metrics) {
2357
ccd04278e357 metrics cleanup
drewp@bigasterisk.com
parents: 2280
diff changeset
77 stats.forEach((row: Metric) => {
2036
00afa5ec081a restore more of the stats widget including the cpu/mem spinner
drewp@bigasterisk.com
parents: 2034
diff changeset
78 if (row.name == "process_resident_memory_bytes") {
2357
ccd04278e357 metrics cleanup
drewp@bigasterisk.com
parents: 2280
diff changeset
79 this.mem = parseFloat(row.metrics[0].value!) / 1024 / 1024;
2036
00afa5ec081a restore more of the stats widget including the cpu/mem spinner
drewp@bigasterisk.com
parents: 2034
diff changeset
80 }
00afa5ec081a restore more of the stats widget including the cpu/mem spinner
drewp@bigasterisk.com
parents: 2034
diff changeset
81 if (row.name == "process_cpu_seconds_total") {
00afa5ec081a restore more of the stats widget including the cpu/mem spinner
drewp@bigasterisk.com
parents: 2034
diff changeset
82 const now = Date.now() / 1000;
2357
ccd04278e357 metrics cleanup
drewp@bigasterisk.com
parents: 2280
diff changeset
83 const cpuSecondsTotal = parseFloat(row.metrics[0].value!);
2036
00afa5ec081a restore more of the stats widget including the cpu/mem spinner
drewp@bigasterisk.com
parents: 2034
diff changeset
84 this.cpu = (cpuSecondsTotal - this.prevCpuTotal) / (now - this.prevCpuNow);
00afa5ec081a restore more of the stats widget including the cpu/mem spinner
drewp@bigasterisk.com
parents: 2034
diff changeset
85 this.prevCpuTotal = cpuSecondsTotal;
00afa5ec081a restore more of the stats widget including the cpu/mem spinner
drewp@bigasterisk.com
parents: 2034
diff changeset
86 this.prevCpuNow = now;
00afa5ec081a restore more of the stats widget including the cpu/mem spinner
drewp@bigasterisk.com
parents: 2034
diff changeset
87 }
00afa5ec081a restore more of the stats widget including the cpu/mem spinner
drewp@bigasterisk.com
parents: 2034
diff changeset
88 });
00afa5ec081a restore more of the stats widget including the cpu/mem spinner
drewp@bigasterisk.com
parents: 2034
diff changeset
89 }
1935
5acdf209394d start live stats displayer on home page
Drew Perttula <drewp@bigasterisk.com>
parents:
diff changeset
90
2033
224c4a1625d7 serve homepage with lit and vite
drewp@bigasterisk.com
parents: 1958
diff changeset
91 static styles = [
224c4a1625d7 serve homepage with lit and vite
drewp@bigasterisk.com
parents: 1958
diff changeset
92 css`
224c4a1625d7 serve homepage with lit and vite
drewp@bigasterisk.com
parents: 1958
diff changeset
93 :host {
224c4a1625d7 serve homepage with lit and vite
drewp@bigasterisk.com
parents: 1958
diff changeset
94 border: 2px solid #46a79f;
224c4a1625d7 serve homepage with lit and vite
drewp@bigasterisk.com
parents: 1958
diff changeset
95 display: inline-block;
224c4a1625d7 serve homepage with lit and vite
drewp@bigasterisk.com
parents: 1958
diff changeset
96 }
224c4a1625d7 serve homepage with lit and vite
drewp@bigasterisk.com
parents: 1958
diff changeset
97 table {
224c4a1625d7 serve homepage with lit and vite
drewp@bigasterisk.com
parents: 1958
diff changeset
98 border-collapse: collapse;
224c4a1625d7 serve homepage with lit and vite
drewp@bigasterisk.com
parents: 1958
diff changeset
99 background: #000;
224c4a1625d7 serve homepage with lit and vite
drewp@bigasterisk.com
parents: 1958
diff changeset
100 color: #ccc;
224c4a1625d7 serve homepage with lit and vite
drewp@bigasterisk.com
parents: 1958
diff changeset
101 font-family: sans-serif;
224c4a1625d7 serve homepage with lit and vite
drewp@bigasterisk.com
parents: 1958
diff changeset
102 }
224c4a1625d7 serve homepage with lit and vite
drewp@bigasterisk.com
parents: 1958
diff changeset
103 th,
224c4a1625d7 serve homepage with lit and vite
drewp@bigasterisk.com
parents: 1958
diff changeset
104 td {
224c4a1625d7 serve homepage with lit and vite
drewp@bigasterisk.com
parents: 1958
diff changeset
105 outline: 1px solid #000;
224c4a1625d7 serve homepage with lit and vite
drewp@bigasterisk.com
parents: 1958
diff changeset
106 }
224c4a1625d7 serve homepage with lit and vite
drewp@bigasterisk.com
parents: 1958
diff changeset
107 th {
224c4a1625d7 serve homepage with lit and vite
drewp@bigasterisk.com
parents: 1958
diff changeset
108 padding: 2px 4px;
224c4a1625d7 serve homepage with lit and vite
drewp@bigasterisk.com
parents: 1958
diff changeset
109 background: #2f2f2f;
2357
ccd04278e357 metrics cleanup
drewp@bigasterisk.com
parents: 2280
diff changeset
110 text-align: left;
2033
224c4a1625d7 serve homepage with lit and vite
drewp@bigasterisk.com
parents: 1958
diff changeset
111 }
224c4a1625d7 serve homepage with lit and vite
drewp@bigasterisk.com
parents: 1958
diff changeset
112 td {
224c4a1625d7 serve homepage with lit and vite
drewp@bigasterisk.com
parents: 1958
diff changeset
113 padding: 0;
224c4a1625d7 serve homepage with lit and vite
drewp@bigasterisk.com
parents: 1958
diff changeset
114 vertical-align: top;
224c4a1625d7 serve homepage with lit and vite
drewp@bigasterisk.com
parents: 1958
diff changeset
115 text-align: center;
224c4a1625d7 serve homepage with lit and vite
drewp@bigasterisk.com
parents: 1958
diff changeset
116 }
224c4a1625d7 serve homepage with lit and vite
drewp@bigasterisk.com
parents: 1958
diff changeset
117 td.val {
224c4a1625d7 serve homepage with lit and vite
drewp@bigasterisk.com
parents: 1958
diff changeset
118 padding: 2px 4px;
224c4a1625d7 serve homepage with lit and vite
drewp@bigasterisk.com
parents: 1958
diff changeset
119 background: #3b5651;
224c4a1625d7 serve homepage with lit and vite
drewp@bigasterisk.com
parents: 1958
diff changeset
120 }
224c4a1625d7 serve homepage with lit and vite
drewp@bigasterisk.com
parents: 1958
diff changeset
121 .recents {
224c4a1625d7 serve homepage with lit and vite
drewp@bigasterisk.com
parents: 1958
diff changeset
122 display: flex;
224c4a1625d7 serve homepage with lit and vite
drewp@bigasterisk.com
parents: 1958
diff changeset
123 align-items: flex-end;
224c4a1625d7 serve homepage with lit and vite
drewp@bigasterisk.com
parents: 1958
diff changeset
124 height: 30px;
224c4a1625d7 serve homepage with lit and vite
drewp@bigasterisk.com
parents: 1958
diff changeset
125 }
224c4a1625d7 serve homepage with lit and vite
drewp@bigasterisk.com
parents: 1958
diff changeset
126 .recents > div {
224c4a1625d7 serve homepage with lit and vite
drewp@bigasterisk.com
parents: 1958
diff changeset
127 width: 3px;
224c4a1625d7 serve homepage with lit and vite
drewp@bigasterisk.com
parents: 1958
diff changeset
128 background: red;
224c4a1625d7 serve homepage with lit and vite
drewp@bigasterisk.com
parents: 1958
diff changeset
129 border-right: 1px solid black;
224c4a1625d7 serve homepage with lit and vite
drewp@bigasterisk.com
parents: 1958
diff changeset
130 }
224c4a1625d7 serve homepage with lit and vite
drewp@bigasterisk.com
parents: 1958
diff changeset
131 .bigInt {
224c4a1625d7 serve homepage with lit and vite
drewp@bigasterisk.com
parents: 1958
diff changeset
132 min-width: 6em;
224c4a1625d7 serve homepage with lit and vite
drewp@bigasterisk.com
parents: 1958
diff changeset
133 }
224c4a1625d7 serve homepage with lit and vite
drewp@bigasterisk.com
parents: 1958
diff changeset
134 `,
224c4a1625d7 serve homepage with lit and vite
drewp@bigasterisk.com
parents: 1958
diff changeset
135 ];
224c4a1625d7 serve homepage with lit and vite
drewp@bigasterisk.com
parents: 1958
diff changeset
136
2280
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
137 tdWrap(content: TemplateResult): TemplateResult {
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
138 return html`<td>${content}</td>`;
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
139 }
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
140
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
141 recents(d: any, path: string[]): TemplateResult {
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
142 const hi = Math.max.apply(null, d.recents);
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
143 const scl = 30 / hi;
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
144
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
145 const bar = (y: number) => {
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
146 let color;
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
147 if (y < d.average) {
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
148 color = "#6a6aff";
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
149 } else {
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
150 color = "#d09e4c";
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
151 }
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
152 return html`<div class="bar" style="height: ${y * scl}px; background: ${color};"></div>`;
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
153 };
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
154 return html`<td>
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
155 <div class="recents">${d.recents.map(bar)}</div>
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
156 <div>avg=${d.average.toPrecision(3)}</div>
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
157 </td>`;
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
158 }
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
159
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
160 table(d: Metrics, path: string[]): TemplateResult {
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
161 const byName = new Map<string, Metric>();
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
162 d.forEach((row) => {
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
163 byName.set(row.name, row);
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
164 });
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
165 let cols = d.map((row) => row.name);
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
166 cols.sort();
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
167
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
168 if (path.length == 0) {
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
169 ["webServer", "process"].forEach((earlyKey) => {
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
170 let i = cols.indexOf(earlyKey);
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
171 if (i != -1) {
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
172 cols = [earlyKey].concat(cols.slice(0, i), cols.slice(i + 1));
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
173 }
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
174 });
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
175 }
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
176
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
177 const th = (col: string): TemplateResult => {
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
178 return html`<th>${col}</th>`;
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
179 };
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
180 const td = (col: string): TemplateResult => {
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
181 const cell = byName.get(col)!;
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
182 return html`${this.drawLevel(cell, path.concat(col))}`;
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
183 };
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
184 return html` <table>
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
185 <tr>
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
186 ${cols.map(th)}
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
187 </tr>
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
188 <tr>
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
189 ${cols.map(td)}
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
190 </tr>
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
191 </table>`;
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
192 }
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
193
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
194 drawLevel(d: Metric, path: string[]) {
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
195 return html`[NEW ${JSON.stringify(d)} ${path}]`;
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
196 }
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
197
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
198 valueDisplay(m: Metric, v: Value): TemplateResult {
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
199 if (m.type == "GAUGE") {
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
200 return html`${v.value}`;
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
201 } else if (m.type == "COUNTER") {
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
202 return html`${v.value}`;
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
203 } else if (m.type == "HISTOGRAM") {
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
204 return this.histoDisplay(v.buckets!);
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
205 } else if (m.type == "UNTYPED") {
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
206 return html`${v.value}`;
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
207 } else if (m.type == "SUMMARY") {
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
208 if (!v.count) {
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
209 return html`err: summary without count`;
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
210 }
2357
ccd04278e357 metrics cleanup
drewp@bigasterisk.com
parents: 2280
diff changeset
211 return html`n=${v.count} percall=${((v.count && v.sum ? v.sum / v.count : 0) * 1000).toPrecision(3)}ms`;
2280
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
212 } else {
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
213 throw m.type;
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
214 }
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
215 }
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
216
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
217 private histoDisplay(b: { [value: string]: string }) {
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
218 const lines: TemplateResult[] = [];
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
219 let firstLevel;
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
220 let lastLevel;
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
221 let prev = 0;
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
222
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
223 let maxDelta = 0;
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
224 for (let level in b) {
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
225 if (firstLevel === undefined) firstLevel = level;
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
226 lastLevel = level;
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
227 let count = parseFloat(b[level]);
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
228 let delta = count - prev;
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
229 prev = count;
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
230 if (delta > maxDelta) maxDelta = delta;
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
231 }
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
232 prev = 0;
2357
ccd04278e357 metrics cleanup
drewp@bigasterisk.com
parents: 2280
diff changeset
233 const maxBarH = 30;
2280
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
234 for (let level in b) {
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
235 let count = parseFloat(b[level]);
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
236 let delta = count - prev;
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
237 prev = count;
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
238 let levelf = parseFloat(level);
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
239 const h = clamp((delta / maxDelta) * maxBarH, 1, maxBarH);
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
240 lines.push(
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
241 html`<div
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
242 title="bucket=${level} count=${count}"
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
243 style="background: yellow; margin-right: 1px; width: 8px; height: ${h}px; display: inline-block"
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
244 ></div>`
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
245 );
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
246 }
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
247 return html`${firstLevel} ${lines} ${lastLevel}`;
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
248 }
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
249
2357
ccd04278e357 metrics cleanup
drewp@bigasterisk.com
parents: 2280
diff changeset
250 tightLabel(labs: { [key: string]: string }): string {
2375
623836db99af fix ts warning
drewp@bigasterisk.com
parents: 2373
diff changeset
251 const d: { [key: string]: string } = {};
2357
ccd04278e357 metrics cleanup
drewp@bigasterisk.com
parents: 2280
diff changeset
252 for (let k in labs) {
2375
623836db99af fix ts warning
drewp@bigasterisk.com
parents: 2373
diff changeset
253 if (k == "app_name") continue;
623836db99af fix ts warning
drewp@bigasterisk.com
parents: 2373
diff changeset
254 if (k == "output") continue;
623836db99af fix ts warning
drewp@bigasterisk.com
parents: 2373
diff changeset
255 if (k == "status_code" && labs[k] == "200") continue;
623836db99af fix ts warning
drewp@bigasterisk.com
parents: 2373
diff changeset
256 d[k] = labs[k];
2357
ccd04278e357 metrics cleanup
drewp@bigasterisk.com
parents: 2280
diff changeset
257 }
2375
623836db99af fix ts warning
drewp@bigasterisk.com
parents: 2373
diff changeset
258 const ret = JSON.stringify(d);
623836db99af fix ts warning
drewp@bigasterisk.com
parents: 2373
diff changeset
259 return ret == "{}" ? "" : ret;
2357
ccd04278e357 metrics cleanup
drewp@bigasterisk.com
parents: 2280
diff changeset
260 }
ccd04278e357 metrics cleanup
drewp@bigasterisk.com
parents: 2280
diff changeset
261 tightMetric(name: string): string {
2375
623836db99af fix ts warning
drewp@bigasterisk.com
parents: 2373
diff changeset
262 return name.replace("starlette", "⭐").replace("_request", "_req").replace("_duration", "_dur").replace("_seconds", "_s");
2357
ccd04278e357 metrics cleanup
drewp@bigasterisk.com
parents: 2280
diff changeset
263 }
2033
224c4a1625d7 serve homepage with lit and vite
drewp@bigasterisk.com
parents: 1958
diff changeset
264 render() {
224c4a1625d7 serve homepage with lit and vite
drewp@bigasterisk.com
parents: 1958
diff changeset
265 const now = Date.now() / 1000;
224c4a1625d7 serve homepage with lit and vite
drewp@bigasterisk.com
parents: 1958
diff changeset
266
2036
00afa5ec081a restore more of the stats widget including the cpu/mem spinner
drewp@bigasterisk.com
parents: 2034
diff changeset
267 const displayedStats = this.stats.filter(nonBoring);
2034
04ed5d134973 WIP draw prom metrics on homepage
drewp@bigasterisk.com
parents: 2033
diff changeset
268 return html`
2036
00afa5ec081a restore more of the stats widget including the cpu/mem spinner
drewp@bigasterisk.com
parents: 2034
diff changeset
269 <div>
00afa5ec081a restore more of the stats widget including the cpu/mem spinner
drewp@bigasterisk.com
parents: 2034
diff changeset
270 <table>
00afa5ec081a restore more of the stats widget including the cpu/mem spinner
drewp@bigasterisk.com
parents: 2034
diff changeset
271 ${displayedStats.map(
2375
623836db99af fix ts warning
drewp@bigasterisk.com
parents: 2373
diff changeset
272 (row, rowNum) => html`
2036
00afa5ec081a restore more of the stats widget including the cpu/mem spinner
drewp@bigasterisk.com
parents: 2034
diff changeset
273 <tr>
2357
ccd04278e357 metrics cleanup
drewp@bigasterisk.com
parents: 2280
diff changeset
274 <th>${this.tightMetric(row.name)}</th>
2036
00afa5ec081a restore more of the stats widget including the cpu/mem spinner
drewp@bigasterisk.com
parents: 2034
diff changeset
275 <td>
00afa5ec081a restore more of the stats widget including the cpu/mem spinner
drewp@bigasterisk.com
parents: 2034
diff changeset
276 <table>
00afa5ec081a restore more of the stats widget including the cpu/mem spinner
drewp@bigasterisk.com
parents: 2034
diff changeset
277 ${row.metrics.map(
2375
623836db99af fix ts warning
drewp@bigasterisk.com
parents: 2373
diff changeset
278 (v) => html`
2036
00afa5ec081a restore more of the stats widget including the cpu/mem spinner
drewp@bigasterisk.com
parents: 2034
diff changeset
279 <tr>
2357
ccd04278e357 metrics cleanup
drewp@bigasterisk.com
parents: 2280
diff changeset
280 <td>${this.tightLabel(v.labels)}</td>
2280
e462853f1ef6 redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents: 2037
diff changeset
281 <td>${this.valueDisplay(row, v)}</td>
2036
00afa5ec081a restore more of the stats widget including the cpu/mem spinner
drewp@bigasterisk.com
parents: 2034
diff changeset
282 </tr>
00afa5ec081a restore more of the stats widget including the cpu/mem spinner
drewp@bigasterisk.com
parents: 2034
diff changeset
283 `
2375
623836db99af fix ts warning
drewp@bigasterisk.com
parents: 2373
diff changeset
284 )}
2036
00afa5ec081a restore more of the stats widget including the cpu/mem spinner
drewp@bigasterisk.com
parents: 2034
diff changeset
285 </table>
00afa5ec081a restore more of the stats widget including the cpu/mem spinner
drewp@bigasterisk.com
parents: 2034
diff changeset
286 </td>
00afa5ec081a restore more of the stats widget including the cpu/mem spinner
drewp@bigasterisk.com
parents: 2034
diff changeset
287 ${rowNum == 0
2375
623836db99af fix ts warning
drewp@bigasterisk.com
parents: 2373
diff changeset
288 ? html`
2036
00afa5ec081a restore more of the stats widget including the cpu/mem spinner
drewp@bigasterisk.com
parents: 2034
diff changeset
289 <td rowspan="${displayedStats.length}">
00afa5ec081a restore more of the stats widget including the cpu/mem spinner
drewp@bigasterisk.com
parents: 2034
diff changeset
290 <stats-process id="proc" cpu="${this.cpu}" mem="${this.mem}"></stats-process>
00afa5ec081a restore more of the stats widget including the cpu/mem spinner
drewp@bigasterisk.com
parents: 2034
diff changeset
291 </td>
2034
04ed5d134973 WIP draw prom metrics on homepage
drewp@bigasterisk.com
parents: 2033
diff changeset
292 `
2375
623836db99af fix ts warning
drewp@bigasterisk.com
parents: 2373
diff changeset
293 : ""}
2036
00afa5ec081a restore more of the stats widget including the cpu/mem spinner
drewp@bigasterisk.com
parents: 2034
diff changeset
294 </tr>
00afa5ec081a restore more of the stats widget including the cpu/mem spinner
drewp@bigasterisk.com
parents: 2034
diff changeset
295 `
2375
623836db99af fix ts warning
drewp@bigasterisk.com
parents: 2373
diff changeset
296 )}
2036
00afa5ec081a restore more of the stats widget including the cpu/mem spinner
drewp@bigasterisk.com
parents: 2034
diff changeset
297 </table>
00afa5ec081a restore more of the stats widget including the cpu/mem spinner
drewp@bigasterisk.com
parents: 2034
diff changeset
298 </div>
2034
04ed5d134973 WIP draw prom metrics on homepage
drewp@bigasterisk.com
parents: 2033
diff changeset
299 `;
2033
224c4a1625d7 serve homepage with lit and vite
drewp@bigasterisk.com
parents: 1958
diff changeset
300 }
1935
5acdf209394d start live stats displayer on home page
Drew Perttula <drewp@bigasterisk.com>
parents:
diff changeset
301 }