Implement ping component

client/components.js

@@ -10,6 +10,7 @@ import deviceFaults from "./components/device-faults";
 import allParameters from "./components/all-parameters";
 import deviceActions from "./components/device-actions";
 import tags from "./components/tags";
+import ping from "./components/ping";
 
 function get(name) {
   if (name === "parameter") return parameter;
@@ -22,6 +23,7 @@ function get(name) {
   else if (name === "all-parameters") return allParameters;
   else if (name === "device-actions") return deviceActions;
   else if (name === "tags") return tags;
+  else if (name === "ping") return ping;
   else throw new Error(`No such component '${name}'`);
 }
 

client/components/ping.js

@@ -0,0 +1,54 @@
+"use strict";
+
+import m from "mithril";
+import * as store from "../store";
+
+const REFRESH_INTERVAL = 3000;
+
+const component = {
+  oninit: vnode => {
+    vnode.state.timestamp = 0;
+    vnode.state.ping = null;
+    vnode.state.host = null;
+    vnode.state.timeout = null;
+  },
+  view: vnode => {
+    let refresh = () => {
+      const device = vnode.attrs.device;
+      let param =
+        device["InternetGatewayDevice.ManagementServer.ConnectionRequestURL"];
+      if (!param)
+        param = device["Device.ManagementServer.ConnectionRequestURL"];
+      if (!param || !param.value) return;
+
+      const url = new URL(param.value[0]);
+      vnode.state.host = url.hostname;
+      vnode.state.timestamp = Date.now();
+      store
+        .ping(vnode.state.host)
+        .then(res => {
+          vnode.state.ping = res;
+        })
+        .catch(() => {
+          // Do nothing
+        });
+    };
+
+    let t = vnode.state.timestamp + REFRESH_INTERVAL - Date.now();
+    clearTimeout(vnode.state.timeout);
+    if (t <= 0) refresh();
+    else vnode.state.timeout = setTimeout(refresh, t);
+
+    if (vnode.state.host) {
+      let status = "";
+      if (vnode.state.ping)
+        if (vnode.state.ping.avg != null)
+          status = `${Math.trunc(vnode.state.ping.avg)} ms`;
+        else status = "Unreachable";
+
+      return m("div", `Pinging ${vnode.state.host}: ${status}`);
+    }
+  }
+};
+
+export default component;

client/css/app.css

@@ -397,8 +397,10 @@ input {
 }
 
 table.parameter-list {
+  border-spacing: 0;
   text-align: left;
   & th {
+    padding: 0;
     padding-right: 1em;
   }
 }

client/store.js

@@ -400,6 +400,12 @@ function logOut() {
   });
 }
 
+function ping(host) {
+  return m.request({
+    url: `/api/ping/${encodeURIComponent(host)}`
+  });
+}
+
 export {
   count,
   fetch,
@@ -411,5 +417,6 @@ export {
   deleteResource,
   evaluateExpression,
   logIn,
-  logOut
+  logOut,
+  ping
 };