107 lines
3.3 KiB
TypeScript
107 lines
3.3 KiB
TypeScript
import { MetricsResponse } from "./requests.js";
|
|
import { el } from "./util.js";
|
|
|
|
class Folder {
|
|
metric: string | null = null;
|
|
children: Map<string, Folder> = new Map();
|
|
|
|
getOrCreateChild(name: string): Folder {
|
|
let child = this.children.get(name);
|
|
if (child === undefined) {
|
|
child = new Folder();
|
|
this.children.set(name, child);
|
|
}
|
|
return child;
|
|
}
|
|
|
|
add(metric: string) {
|
|
let current: Folder = this;
|
|
for (let segment of metric.split("/")) {
|
|
current = current.getOrCreateChild(segment);
|
|
}
|
|
current.metric = metric;
|
|
}
|
|
|
|
toHtmlElement(name: string): HTMLElement {
|
|
if (this.children.size > 0) { // Folder
|
|
name = `${name}/`;
|
|
if (this.metric === null) { // Folder without metric
|
|
return el("details", { "class": "no-metric" },
|
|
el("summary", {}, name),
|
|
this.childrenToHtmlElements(),
|
|
);
|
|
} else { // Folder with metric
|
|
return el("details", {},
|
|
el("summary", {},
|
|
el("input", { "type": "checkbox", "name": this.metric }),
|
|
" ", name,
|
|
),
|
|
this.childrenToHtmlElements(),
|
|
);
|
|
}
|
|
} else if (this.metric !== null) { // Normal metric
|
|
return el("label", {},
|
|
el("input", { "type": "checkbox", "name": this.metric }),
|
|
" ", name,
|
|
);
|
|
} else { // Metric without metric, should never happen
|
|
return el("label", {}, name);
|
|
}
|
|
}
|
|
|
|
childrenToHtmlElements(): HTMLElement {
|
|
let result: HTMLElement = el("ul", {});
|
|
for (let [name, folder] of this.children.entries()) {
|
|
result.append(el("li", {}, folder.toHtmlElement(name)));
|
|
}
|
|
return result;
|
|
}
|
|
}
|
|
|
|
export class Metrics {
|
|
#div: HTMLElement;
|
|
#dataId: number | null = null;
|
|
|
|
constructor(div: HTMLElement) {
|
|
this.#div = div;
|
|
}
|
|
|
|
getSelected(): Set<string> {
|
|
const selected = new Set<string>();
|
|
|
|
const checkedInputs = this.#div.querySelectorAll<HTMLInputElement>("input:checked");
|
|
for (const input of checkedInputs) {
|
|
selected.add(input.name);
|
|
}
|
|
|
|
return selected;
|
|
}
|
|
|
|
requiresUpdate(dataId: number): boolean {
|
|
// At the moment, updating the metrics results in all <details> tags
|
|
// closing again. To prevent this (as it can be frustrating if you've
|
|
// navigated deep into the metrics hierarchy), we never require updates
|
|
// after the initial update.
|
|
return this.#dataId === null;
|
|
// return this.#dataId === null || this.#dataId < dataId;
|
|
}
|
|
|
|
update(response: MetricsResponse) {
|
|
const selected = this.getSelected();
|
|
|
|
const folder = new Folder();
|
|
for (const metric of response.metrics) {
|
|
folder.add(metric);
|
|
}
|
|
|
|
this.#div.textContent = ""; // Remove children
|
|
this.#div.append(folder.childrenToHtmlElements());
|
|
|
|
const inputs = this.#div.querySelectorAll<HTMLInputElement>("input");
|
|
for (const input of inputs) {
|
|
input.checked = selected.has(input.name);
|
|
}
|
|
|
|
this.#dataId = response.dataId;
|
|
}
|
|
}
|