1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
|
import html from "../lib/html";
import eventable from "../mixins/eventable";
import {MAX_LINES} from "../config";
const SEP = " ╱ ";
/**
* The line-oriented GUI for the application.
*
* It presents a (1) node that should be added by the owner to the DOM.
*/
class Log {
constructor(name, metadata = null, {label = null} = {}) {
eventable(this);
this.name = name;
this.$node = html(`<div class="logger"></div>`)[0];
this.$node.classList.add(`name__${name.replace(/[^a-zA-Z0-9]/g, "_")}`);
let label_text = label;
// Makes a default label...
if (!label_text) {
label_text = name;
// For UUID-like labels
// The chances of hitting both conditions on a custom-made string is
// quite low.
if (label_text.length === 36 && label_text.split("-").length === 5) {
label_text = name
.split("-")
.splice(0, 2)
.join("-");
}
}
this.$backlog = html(`<div class="backlog logger-log"></div>`)[0];
this.$log = html(`<div class="newlog logger-log"></div>`)[0];
// Empties app...
this.$node.innerHTML = "";
if (metadata) {
this.$identity = html(`<div class="identity"></div>`)[0];
this.$node.appendChild(this.$identity);
}
// Appends the "app parts"
this.$node.appendChild(this.$backlog);
this.$node.appendChild(this.$log);
// The tab used for navigation.
this.$tab = html(`<li><label><input type="radio" name="selected_tab"><span></span></label></li>`)[0];
const radio = this.$tab.querySelectorAll("input")[0];
const $label = this.$tab.querySelectorAll("label > span")[0];
$label.innerText = label_text;
radio.value = name;
radio.onclick = () => {
this.select();
};
if (metadata) {
const {attempt_id, identity, system} = metadata;
const txt = [];
txt.push(`id: ${identity}`);
txt.push(`system: ${system}`);
this.$identity.innerText = " " + txt.join(SEP) + SEP;
this.$identity.title = JSON.stringify(metadata, null, " ");
$label.title = txt.concat([`attempt_id: ${attempt_id}`]).join(SEP);
}
radio.onfocus = () => {
this.$tab.classList.add("__focus");
};
radio.onblur = () => {
this.$tab.classList.remove("__focus");
};
}
/**
* Logs to the console.
*
* This can receive a class for some more styling.
*/
log(text, tag, {title}) {
const el = html(`<div></div>`)[0];
if (tag) {
el.classList.add(tag);
}
if (title) {
el.title = title;
}
// The replace regex allows more intelligent splitting.
// It will prefer splitting words, this way.
// .replace(/([,-=/])/g, "\u200B$1\u200B");
// It breaks search, until a solution is found we'll manage with crappy
// line breaks.
el.innerText = text;
this.$log.appendChild(el);
}
select() {
this.$node.classList.add("selected");
this.$tab.classList.add("selected");
this.$tab.querySelectorAll("input")[0].checked = true;
this.sendEvent("select", this);
}
unselect() {
this.$node.classList.remove("selected");
this.$tab.classList.remove("selected");
this.sendEvent("unselect");
}
backlog(lines, log_url = null) {
this.$backlog.classList.remove("loading");
// Empties backlog...
const start = Math.max(lines.length - MAX_LINES, 0);
const length = Math.min(lines.length, MAX_LINES);
let line_no = start + 1;
const fragment = document.createDocumentFragment(length);
this.$backlog.innerText = `(Rendering backlog, ${length} lines long...)**`;
lines.slice(start, lines.length)
.forEach((text) => {
const el = document.createElement("div");
el.title = `#${line_no}`;
line_no += 1;
el.innerText = text;
fragment.appendChild(el);
});
const $link = html(`<a class="truncated">Log has been truncated... (${length} lines shown out of ${lines.length}.)</a>`)[0];
if (log_url) {
$link.href = log_url;
}
if (length < lines.length) {
this.$backlog.innerText = `(Rendering backlog, ${length} lines out of ${lines.length}...)`;
}
else {
this.$backlog.innerText = `(Rendering backlog, ${length} lines long...)`;
}
// Delays appendChild to allow reflow for previous message.
window.setTimeout(() => {
this.$backlog.innerText = "";
if (length < lines.length) {
this.$backlog.appendChild($link);
}
this.$backlog.appendChild(fragment);
this.sendEvent("backlog", this);
}, 10);
}
backlog_error(err) {
this.$backlog.classList.remove("loading");
this.$backlog.innerText = `An error happened fetching the backlog...\n${err}`;
}
backlog_loading() {
this.$backlog.classList.add("loading");
this.$backlog.innerText = `Fetching the backlog...`;
}
}
export default Log;
|
