feat: add machine liveness indicator to home

Kaixhin · Oct 30, 2015 · 825897a · 825897a
1 parent 92e953a
commit 825897a
Show file tree

Hide file tree

Showing 4 changed files with 102 additions and 58 deletions.
diff --git a/lab.js b/lab.js
@@ -523,7 +523,7 @@ app.get("/files/:id", function(req, res, next) {
 // List projects and machines on homepage
 app.get("/", function(req, res, next) {
   var projP = db.projects.find({}, {name: 1}).sort({name: 1}).toArrayAsync(); // Get project names
-  var macP = db.machines.find({}, {hostname: 1}).sort({hostname: 1}).toArrayAsync(); // Get machine hostnames
+  var macP = db.machines.find({}, {address: 1, hostname: 1}).sort({hostname: 1}).toArrayAsync(); // Get machine addresses and hostnames
   Promise.all([projP, macP])
   .then(function(results) {
     return res.render("index", {projects: results[0], machines: results[1]});

diff --git a/views/index.jade b/views/index.jade
@@ -50,6 +50,8 @@ block content
           li
             button.btn.btn-danger-outline.btn-sm.delete(data-type="machines", data-id="#{machine._id}", type="button") #[span.octicon.octicon-trashcan]
             | &nbsp;
+            span(id="machine-status-#{machine._id}") ●
+            | &nbsp;
             a(href="/machines/" + machine._id) #{machine.hostname}
 
 block scripts
@@ -126,4 +128,43 @@ block scripts
         }
         return false; // Stop event and propagation
       });
+
+
+      // Parse from string instead prior to accessing internal objects via Jade
+      var machines = !{JSON.stringify(machines)};
+      for (var i = 0; i < machines.length; i++) {
+        // Indicate status of machines
+        var host = machines[i].address.replace(/^http/, 'ws'); // WebSocket server address
+        var ws = null; // WebSocket
+        var $status = $("#machine-status-" + machines[i]._id); // Machine status icon
+
+        // Connects to WebSocket server
+        var wsConnect = function() {
+          ws = new WebSocket(host); // Attempt to connect
+
+          // Set server status as on
+          ws.onopen = function(event) {
+            $status.removeClass("text-danger");
+            $status.addClass("text-success");
+          };
+          // Set server status as off
+          ws.onclose = function(event) {
+            // Set status
+            $status.removeClass("text-success");
+            $status.addClass("text-danger");
+          };
+        };
+
+        // Reconnects to WebSocket server if needed
+        var wsReconnect = function() {
+          if (!ws || ws.readyState === WebSocket.CLOSED) {
+            wsConnect();
+          }
+        };
+
+        // Connect 
+        wsConnect();
+        // Attempt to reconnect every 5s if necessary
+        setInterval(wsReconnect, 5000);
+      }
     });
diff --git a/views/layout.jade b/views/layout.jade
@@ -23,41 +23,43 @@ html(lang="en")
           a.nav-link(href="javascript:history.forward()") #[span.octicon.octicon-chevron-right]
       ul.nav.navbar-nav.pull-right
         li.nav-item
-          a.nav-link #[span#server-status.octicon.octicon-server.text-success]
+          a.nav-link #[span#server-status.octicon.octicon-server]
     .container
       block content
     script(src="/bower_components/jquery/dist/jquery.min.js")
     script.
-      var host = location.origin.replace(/^http/, 'ws'); // WebSocket server address
-      var ws = null; // WebSocket
-      var $status = $("#server-status"); // Server status icon
+      $(function() {
+        var host = location.origin.replace(/^http/, 'ws'); // WebSocket server address
+        var ws = null; // WebSocket
+        var $status = $("#server-status"); // Server status icon
 
-      // Connects to WebSocket server
-      var wsConnect = function() {
-        ws = new WebSocket(host); // Attempt to connect
+        // Connects to WebSocket server
+        var wsConnect = function() {
+          ws = new WebSocket(host); // Attempt to connect
 
-        // Set server status as on
-        ws.onopen = function(event) {
-          $status.removeClass("text-danger");
-          $status.addClass("text-success");
+          // Set server status as on
+          ws.onopen = function(event) {
+            $status.removeClass("text-danger");
+            $status.addClass("text-success");
+          };
+          // Set server status as off
+          ws.onclose = function(event) {
+            // Set status
+            $status.removeClass("text-success");
+            $status.addClass("text-danger");
+          };
         };
-        // Set server status as off
-        ws.onclose = function(event) {
-          // Set status
-          $status.removeClass("text-success");
-          $status.addClass("text-danger");
-        };
-      };
 
-      // Reconnects to WebSocket server if needed
-      var wsReconnect = function() {
-        if (!ws || ws.readyState === WebSocket.CLOSED) {
-          wsConnect();
-        }
-      };
+        // Reconnects to WebSocket server if needed
+        var wsReconnect = function() {
+          if (!ws || ws.readyState === WebSocket.CLOSED) {
+            wsConnect();
+          }
+        };
 
-      // Connect 
-      wsConnect();
-      // Attempt to reconnect every 5s if necessary
-      setInterval(wsReconnect, 5000);
+        // Connect 
+        wsConnect();
+        // Attempt to reconnect every 5s if necessary
+        setInterval(wsReconnect, 5000);
+      });
     block scripts
diff --git a/views/machine.jade b/views/machine.jade
@@ -4,8 +4,7 @@ block title
   title FGLab: Machine #{machine.hostname}
 
 block content
-  h1 #[span.mega-octicon.octicon-device-desktop] Machine: #{machine.hostname} #[small.text-muted (#{machine._id})]
-  h2 Status #[span#machine-status.mega-octicon.octicon-device-desktop]
+  h1 #[span#machine-status.mega-octicon.octicon-device-desktop] Machine: #{machine.hostname} #[small.text-muted (#{machine._id})]
   h2 Specifications
   dl.dl-horizontal
     dt.col-sm-3 Hostname
@@ -33,35 +32,37 @@ block content
 
 block scripts
   script.
-    var host = "#{machine.address}".replace(/^http/, 'ws'); // WebSocket server address
-    var ws = null; // WebSocket
-    var $status = $("#machine-status"); // Machine status icon
+    $(function() {
+      var host = "#{machine.address}".replace(/^http/, 'ws'); // WebSocket server address
+      var ws = null; // WebSocket
+      var $status = $("#machine-status"); // Machine status icon
 
-    // Connects to WebSocket server
-    var wsConnect = function() {
-      ws = new WebSocket(host); // Attempt to connect
+      // Connects to WebSocket server
+      var wsConnect = function() {
+        ws = new WebSocket(host); // Attempt to connect
 
-      // Set server status as on
-      ws.onopen = function(event) {
-        $status.removeClass("text-danger");
-        $status.addClass("text-success");
+        // Set server status as on
+        ws.onopen = function(event) {
+          $status.removeClass("text-danger");
+          $status.addClass("text-success");
+        };
+        // Set server status as off
+        ws.onclose = function(event) {
+          // Set status
+          $status.removeClass("text-success");
+          $status.addClass("text-danger");
+        };
       };
-      // Set server status as off
-      ws.onclose = function(event) {
-        // Set status
-        $status.removeClass("text-success");
-        $status.addClass("text-danger");
-      };
-    };
 
-    // Reconnects to WebSocket server if needed
-    var wsReconnect = function() {
-      if (!ws || ws.readyState === WebSocket.CLOSED) {
-        wsConnect();
-      }
-    };
+      // Reconnects to WebSocket server if needed
+      var wsReconnect = function() {
+        if (!ws || ws.readyState === WebSocket.CLOSED) {
+          wsConnect();
+        }
+      };
 
-    // Connect 
-    wsConnect();
-    // Attempt to reconnect every 5s if necessary
-    setInterval(wsReconnect, 5000);
+      // Connect 
+      wsConnect();
+      // Attempt to reconnect every 5s if necessary
+      setInterval(wsReconnect, 5000);
+    });