Skip to content

Commit 825897a

Browse files
KaixhinKaixhin
committed
feat: add machine liveness indicator to home
1 parent 92e953a commit 825897a

File tree

4 files changed

+102
-58
lines changed

4 files changed

+102
-58
lines changed

‎lab.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -523,7 +523,7 @@ app.get("/files/:id", function(req, res, next) {
523523
// List projects and machines on homepage
524524
app.get("/", function(req, res, next) {
525525
var projP = db.projects.find({}, {name: 1}).sort({name: 1}).toArrayAsync(); // Get project names
526-
var macP = db.machines.find({}, {hostname: 1}).sort({hostname: 1}).toArrayAsync(); // Get machine hostnames
526+
var macP = db.machines.find({}, {address: 1, hostname: 1}).sort({hostname: 1}).toArrayAsync(); // Get machine addresses and hostnames
527527
Promise.all([projP, macP])
528528
.then(function(results) {
529529
return res.render("index", {projects: results[0], machines: results[1]});

‎views/index.jade

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,8 @@ block content
5050
li
5151
button.btn.btn-danger-outline.btn-sm.delete(data-type="machines", data-id="#{machine._id}", type="button") #[span.octicon.octicon-trashcan]
5252
|  
53+
span(id="machine-status-#{machine._id}") ●
54+
|  
5355
a(href="/machines/" + machine._id) #{machine.hostname}
5456

5557
block scripts
@@ -126,4 +128,43 @@ block scripts
126128
}
127129
return false; // Stop event and propagation
128130
});
131+
132+
133+
// Parse from string instead prior to accessing internal objects via Jade
134+
var machines = !{JSON.stringify(machines)};
135+
for (var i = 0; i < machines.length; i++) {
136+
// Indicate status of machines
137+
var host = machines[i].address.replace(/^http/, 'ws'); // WebSocket server address
138+
var ws = null; // WebSocket
139+
var $status = $("#machine-status-" + machines[i]._id); // Machine status icon
140+
141+
// Connects to WebSocket server
142+
var wsConnect = function() {
143+
ws = new WebSocket(host); // Attempt to connect
144+
145+
// Set server status as on
146+
ws.onopen = function(event) {
147+
$status.removeClass("text-danger");
148+
$status.addClass("text-success");
149+
};
150+
// Set server status as off
151+
ws.onclose = function(event) {
152+
// Set status
153+
$status.removeClass("text-success");
154+
$status.addClass("text-danger");
155+
};
156+
};
157+
158+
// Reconnects to WebSocket server if needed
159+
var wsReconnect = function() {
160+
if (!ws || ws.readyState === WebSocket.CLOSED) {
161+
wsConnect();
162+
}
163+
};
164+
165+
// Connect
166+
wsConnect();
167+
// Attempt to reconnect every 5s if necessary
168+
setInterval(wsReconnect, 5000);
169+
}
129170
});

‎views/layout.jade

Lines changed: 30 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -23,41 +23,43 @@ html(lang="en")
2323
a.nav-link(href="javascript:history.forward()") #[span.octicon.octicon-chevron-right]
2424
ul.nav.navbar-nav.pull-right
2525
li.nav-item
26-
a.nav-link #[span#server-status.octicon.octicon-server.text-success]
26+
a.nav-link #[span#server-status.octicon.octicon-server]
2727
.container
2828
block content
2929
script(src="/bower_components/jquery/dist/jquery.min.js")
3030
script.
31-
var host = location.origin.replace(/^http/, 'ws'); // WebSocket server address
32-
var ws = null; // WebSocket
33-
var $status = $("#server-status"); // Server status icon
31+
$(function() {
32+
var host = location.origin.replace(/^http/, 'ws'); // WebSocket server address
33+
var ws = null; // WebSocket
34+
var $status = $("#server-status"); // Server status icon
3435

35-
// Connects to WebSocket server
36-
var wsConnect = function() {
37-
ws = new WebSocket(host); // Attempt to connect
36+
// Connects to WebSocket server
37+
var wsConnect = function() {
38+
ws = new WebSocket(host); // Attempt to connect
3839

39-
// Set server status as on
40-
ws.onopen = function(event) {
41-
$status.removeClass("text-danger");
42-
$status.addClass("text-success");
40+
// Set server status as on
41+
ws.onopen = function(event) {
42+
$status.removeClass("text-danger");
43+
$status.addClass("text-success");
44+
};
45+
// Set server status as off
46+
ws.onclose = function(event) {
47+
// Set status
48+
$status.removeClass("text-success");
49+
$status.addClass("text-danger");
50+
};
4351
};
44-
// Set server status as off
45-
ws.onclose = function(event) {
46-
// Set status
47-
$status.removeClass("text-success");
48-
$status.addClass("text-danger");
49-
};
50-
};
5152

52-
// Reconnects to WebSocket server if needed
53-
var wsReconnect = function() {
54-
if (!ws || ws.readyState === WebSocket.CLOSED) {
55-
wsConnect();
56-
}
57-
};
53+
// Reconnects to WebSocket server if needed
54+
var wsReconnect = function() {
55+
if (!ws || ws.readyState === WebSocket.CLOSED) {
56+
wsConnect();
57+
}
58+
};
5859

59-
// Connect
60-
wsConnect();
61-
// Attempt to reconnect every 5s if necessary
62-
setInterval(wsReconnect, 5000);
60+
// Connect
61+
wsConnect();
62+
// Attempt to reconnect every 5s if necessary
63+
setInterval(wsReconnect, 5000);
64+
});
6365
block scripts

‎views/machine.jade

Lines changed: 30 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,7 @@ block title
44
title FGLab: Machine #{machine.hostname}
55

66
block content
7-
h1 #[span.mega-octicon.octicon-device-desktop] Machine: #{machine.hostname} #[small.text-muted (#{machine._id})]
8-
h2 Status #[span#machine-status.mega-octicon.octicon-device-desktop]
7+
h1 #[span#machine-status.mega-octicon.octicon-device-desktop] Machine: #{machine.hostname} #[small.text-muted (#{machine._id})]
98
h2 Specifications
109
dl.dl-horizontal
1110
dt.col-sm-3 Hostname
@@ -33,35 +32,37 @@ block content
3332

3433
block scripts
3534
script.
36-
var host = "#{machine.address}".replace(/^http/, 'ws'); // WebSocket server address
37-
var ws = null; // WebSocket
38-
var $status = $("#machine-status"); // Machine status icon
35+
$(function() {
36+
var host = "#{machine.address}".replace(/^http/, 'ws'); // WebSocket server address
37+
var ws = null; // WebSocket
38+
var $status = $("#machine-status"); // Machine status icon
3939

40-
// Connects to WebSocket server
41-
var wsConnect = function() {
42-
ws = new WebSocket(host); // Attempt to connect
40+
// Connects to WebSocket server
41+
var wsConnect = function() {
42+
ws = new WebSocket(host); // Attempt to connect
4343

44-
// Set server status as on
45-
ws.onopen = function(event) {
46-
$status.removeClass("text-danger");
47-
$status.addClass("text-success");
44+
// Set server status as on
45+
ws.onopen = function(event) {
46+
$status.removeClass("text-danger");
47+
$status.addClass("text-success");
48+
};
49+
// Set server status as off
50+
ws.onclose = function(event) {
51+
// Set status
52+
$status.removeClass("text-success");
53+
$status.addClass("text-danger");
54+
};
4855
};
49-
// Set server status as off
50-
ws.onclose = function(event) {
51-
// Set status
52-
$status.removeClass("text-success");
53-
$status.addClass("text-danger");
54-
};
55-
};
5656

57-
// Reconnects to WebSocket server if needed
58-
var wsReconnect = function() {
59-
if (!ws || ws.readyState === WebSocket.CLOSED) {
60-
wsConnect();
61-
}
62-
};
57+
// Reconnects to WebSocket server if needed
58+
var wsReconnect = function() {
59+
if (!ws || ws.readyState === WebSocket.CLOSED) {
60+
wsConnect();
61+
}
62+
};
6363

64-
// Connect
65-
wsConnect();
66-
// Attempt to reconnect every 5s if necessary
67-
setInterval(wsReconnect, 5000);
64+
// Connect
65+
wsConnect();
66+
// Attempt to reconnect every 5s if necessary
67+
setInterval(wsReconnect, 5000);
68+
});

0 commit comments

Comments
 (0)