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
|
const ICON_VIEW = "⬇";
const ICON_MAINT = "↻";
const ICON_EVENT = "ϟ";
const ICON_PASS = "✔";
const ICON_FAIL = "✖";
let version = null;
let latest_job = -1;
async function api(x) {
let r = await fetch(x);
return r.json();
}
function icon_progress() {
// Use random braille glyphs to create a moving progress effect.
let i = Math.floor(Math.random() * (0x28ff - 0x2801)) + 0x2801;
return `&#${i};`;
}
function set_progress(element, x) {
if (x !== null || element.className == "") {
element.className = (x === null ? "progress" : "");
element.innerHTML = (x === null ? icon_progress() : x);
}
}
function set_time(element) {
let timestamp = element.dataset.timestamp;
let seconds = Math.floor((Date.now() / 1000) - timestamp);
let minutes = Math.floor(seconds / 60);
let hours = Math.floor(minutes / 60);
let days = Math.floor(hours / 24);
if (seconds < 120) {
element.innerText = `${seconds} seconds ago`;
} else if (minutes < 120) {
element.innerText = `${minutes} minutes ago`;
} else if (hours < 48) {
element.innerText = `${hours} hours ago`;
} else {
element.innerText = `${days} days ago`;
}
}
function touch_job(list, job) {
// New job, new <div>
if (document.getElementById(`${job.job}`) === null) {
let abv_hash = job.hash.substring(0, 16);
let reason = (job.reason == "event" ? ICON_EVENT : ICON_MAINT);
let element = document.createElement("div");
list.insertBefore(element, list.childNodes[0]);
element.innerHTML = `
<div class="box" id="${job.job}">
<div class="box-title">
<a href="/api/log/${job.job}/%($CYCHE_LOG_FILENAME%)">
<span class="button">${ICON_VIEW}</span>
</a>
#${job.job}
${job.service}
<small><i>${abv_hash}</i></small>
<span class="right">
<span class="time" id="${job.job}_time"
data-timestamp="${job.time}"></span>
<span id="${job.job}_result"></span>
${reason}
</span>
</div>
<div class="box-text">
<pre id="${job.job}_log"></pre>
</div>
</div>`;
let time = document.getElementById(`${job.job}_time`);
set_time(time);
}
// Update existing
let box = document.getElementById(`${job.job}`);
let result = document.getElementById(`${job.job}_result`);
let log = document.getElementById(`${job.job}_log`);
let cn = (job.reason == "remove" ? "remove" : job.result);
box.className = `box ${cn}`;
switch (job.result) {
case "active": set_progress(result, null); break;
case "fail": set_progress(result, ICON_FAIL); break;
case "pass": set_progress(result, ICON_PASS); break;
}
log.innerText = job.log;
}
async function update_jobs() {
let nav_progress = document.getElementById("nav_progress");
let no_server = document.getElementById("no_server");
let no_jobs = document.getElementById("no_jobs");
let list = document.getElementById("list");
let timeout = %($CYCHE_IDLE_UPDATE%);
try {
let status = await api("/api/status");
if (version === null) { version = status.version; }
if (version != status.version) { location.reload(); }
if (status.active) { timeout = %($CYCHE_ACTIVE_UPDATE%); }
set_progress(nav_progress, (status.active ? null : ""));
for (let i = status.oldest; i <= status.newest; i++) {
if (i >= latest_job) {
let job = await api(`/api/job/${i}`);
touch_job(list, job);
latest_job = i;
}
}
if (list.childElementCount > 0) {
list.classList.remove("hidden");
no_jobs.classList.add("hidden");
}
no_server.classList.add("hidden");
} catch (ex) {
no_server.classList.remove("hidden");
console.log(ex);
}
setTimeout(update_jobs, timeout);
}
function update_times() {
let elements = document.getElementsByClassName("time");
for (let e of elements) {
set_time(e);
}
}
function update_progress() {
let elements = document.getElementsByClassName("progress");
for (let e of elements) {
e.innerHTML = icon_progress();
}
}
update_jobs();
update_progress();
setInterval(update_times, 1000);
setInterval(update_progress, %($CYCHE_PROGRESS_ANIM_SPEED%));
|
