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
|
function httpGetAsync(theUrl, callback)
{
var xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
callback(xmlHttp.responseText);
}
xmlHttp.open("GET", theUrl, true); // true for asynchronous
xmlHttp.send(null);
}
function sub(s, l) {
return !!l ? s.substr(0,l) : s;
}
let sortKeys = ['CreatedAt'];
const columns = [
{
name: 'ID',
len: 16,
},
{
name: 'Image',
len: 23,
},
{
name: 'Command',
},
{
name: 'Mounts',
},
{
name: 'Status',
sort: 'CreatedAt',
}
];
function addSortKey(idx) {
let toAdd = columns[idx].sort ?? columns[idx].name;
let neg = "";
if (sortKeys[0] === toAdd) {
neg = "!";
}
sortKeys = sortKeys.filter((key) => key !== toAdd && key != "!"+toAdd);
sortKeys.unshift(neg + toAdd);
displayStatus();
}
let status;
function parseAndDisplayStatus(statusString) {
status = JSON.parse(statusString);
displayStatus();
}
function cmp(a, b) {
for (sortKey of sortKeys) {
let mul;
let k;
if (sortKey.startsWith("!")) {
mul = -1;
k = sortKey.substr(1);
} else {
mul = 1;
k = sortKey;
}
if (a[k] < b[k]) {
return -mul;
}
if (a[k] > b[k]) {
return mul;
}
}
if (a<b) return 1;
if (a>b) return -1;
return 0;
}
function displayStatus() {
status.sort(cmp);
let statusElement = document.getElementById('status');
let tableContent = "<table>";
tableContent += "<tr>" +
columns
.map((column, idx) => "<th><a href=\"#\" onclick=\"addSortKey(" + idx + ")\">" + column.name + "</a></th>")
.join("") +
"</th></tr>\n";
tableContent += status.map((line) =>
"<tr>" + columns
.map((column) => "<td>" + sub(line[column.name], column.len) + "</td>")
.join("") + "</tr>"
).join("");
statusElement.innerHTML = tableContent + "</table>";
}
function getStatus() {
httpGetAsync('/status', parseAndDisplayStatus);
}
|
