Update ping component via DOM manipulation

ui/components/ping.ts

@@ -17,58 +17,62 @@
  * along with GenieACS.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { ClosureComponent, Component } from "mithril";
+import { ClosureComponent, Component, VnodeDOM } from "mithril";
 import { m } from "../components";
 import * as store from "../store";
 
 const REFRESH_INTERVAL = 3000;
 
-const component: ClosureComponent = (): Component => {
+const component: ClosureComponent = (vn): Component => {
+  let interval: ReturnType<typeof setInterval>;
+  let host: string;
+
+  const refresh = async (): Promise<void> => {
+    let status = "";
+    if (host) {
+      try {
+        const res = await store.ping(host);
+        if (res["avg"] != null) status = `${Math.trunc(res["avg"])} ms`;
+        else status = "Unreachable";
+      } catch (err) {
+        setTimeout(() => {
+          throw err;
+        }, 0);
+      }
+    }
+
+    const dom = (vn as VnodeDOM).dom;
+
+    if (dom) dom.innerHTML = `Pinging ${host}: ${status}`;
+  };
+
   return {
-    oninit: vnode => {
+    onremove: () => {
-      vnode.state["timestamp"] = 0;
+      clearInterval(interval);
-      vnode.state["ping"] = null;
-      vnode.state["host"] = null;
-      vnode.state["timeout"] = null;
     },
     view: vnode => {
-      const refresh = (): void => {
       const device = vnode.attrs["device"];
       let param =
         device["InternetGatewayDevice.ManagementServer.ConnectionRequestURL"];
       if (!param)
         param = device["Device.ManagementServer.ConnectionRequestURL"];
-        if (!param || !param.value) return;
 
+      let h;
+      if (param && param.value) {
         const url = new URL(param.value[0]);
-        vnode.state["host"] = url.hostname;
+        h = url.hostname;
-        vnode.state["timestamp"] = Date.now();
-        store
-          .ping(vnode.state["host"])
-          .then(res => {
-            vnode.state["ping"] = res;
-          })
-          .catch(() => {
-            // Do nothing
-          });
-      };
-
-      const 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}`);
+      if (host !== h) {
+        host = h;
+        clearInterval(interval);
+        if (host) {
+          refresh();
+          interval = setInterval(refresh, REFRESH_INTERVAL);
         }
-      return null;
+      }
+
+      return m("div", `Pinging ${host}:`);
     }
   };
 };

ui/store.ts

@@ -693,6 +693,7 @@ export function logOut(): Promise<void> {
 
 export function ping(host): Promise<{}> {
   return xhrRequest({
-    url: `/api/ping/${encodeURIComponent(host)}`
+    url: `/api/ping/${encodeURIComponent(host)}`,
+    background: true
   });
 }