diff --git a/ui/components/ping.ts b/ui/components/ping.ts index d25ee41..5f19675 100644 --- a/ui/components/ping.ts +++ b/ui/components/ping.ts @@ -17,58 +17,62 @@ * along with GenieACS. If not, see . */ -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; + let host: string; + + const refresh = async (): Promise => { + 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 => { - vnode.state["timestamp"] = 0; - vnode.state["ping"] = null; - vnode.state["host"] = null; - vnode.state["timeout"] = null; + onremove: () => { + clearInterval(interval); }, 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; + const device = vnode.attrs["device"]; + let param = + device["InternetGatewayDevice.ManagementServer.ConnectionRequestURL"]; + if (!param) + param = device["Device.ManagementServer.ConnectionRequestURL"]; + let h; + if (param && param.value) { 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 - }); - }; - - 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}`); + h = url.hostname; } - return null; + + if (host !== h) { + host = h; + clearInterval(interval); + if (host) { + refresh(); + interval = setInterval(refresh, REFRESH_INTERVAL); + } + } + + return m("div", `Pinging ${host}:`); } }; }; diff --git a/ui/store.ts b/ui/store.ts index a5d8b76..467e092 100644 --- a/ui/store.ts +++ b/ui/store.ts @@ -693,6 +693,7 @@ export function logOut(): Promise { export function ping(host): Promise<{}> { return xhrRequest({ - url: `/api/ping/${encodeURIComponent(host)}` + url: `/api/ping/${encodeURIComponent(host)}`, + background: true }); }