diff --git a/gui/dashboard/app.svelte b/gui/dashboard/app.svelte index 526fb3c..2231678 100644 --- a/gui/dashboard/app.svelte +++ b/gui/dashboard/app.svelte @@ -16,6 +16,7 @@ title: service.name.en, subtitle: service.cluster, date: service.lastBeat?.date ? new Date(service.lastBeat.date) : undefined, + since: service.checked ? new Date(service.checked) : undefined, }; if (!service.lastBeat?.date) { diff --git a/gui/dashboard/lib.js b/gui/dashboard/lib.js index d19ccfd..e8d6cfd 100644 --- a/gui/dashboard/lib.js +++ b/gui/dashboard/lib.js @@ -41,3 +41,21 @@ export function ringBell() { const bell = new Audio('http://__SERVER__/statusdashboard/sound'); bell.addEventListener('canplaythrough', () => bell.play()); } + +export function formatDuration(ms) { + // modified from https://www.30secondsofcode.org/js/s/format-duration + + if (ms < 0) { + ms = -ms; + } + const time = { + d: Math.floor(ms / 86400000), + h: Math.floor(ms / 3600000) % 24, + m: Math.floor(ms / 60000) % 60, + s: Math.floor(ms / 1000) % 60, + }; + return Object.entries(time) + .filter(val => val[1] !== 0) + .map(([ key, val ]) => `${val} ${key}`) + .join(' '); +} diff --git a/gui/dashboard/tile-rawvalue.svelte b/gui/dashboard/tile-rawvalue.svelte index 7d03c68..2d2cadd 100644 --- a/gui/dashboard/tile-rawvalue.svelte +++ b/gui/dashboard/tile-rawvalue.svelte @@ -6,11 +6,12 @@ export let color; export let value; export let date; + export let since; export let center = false; export let weight = 600; - +
{value}
diff --git a/gui/dashboard/tile.svelte b/gui/dashboard/tile.svelte index 4bf51e5..4649767 100644 --- a/gui/dashboard/tile.svelte +++ b/gui/dashboard/tile.svelte @@ -1,9 +1,32 @@
@@ -19,10 +42,12 @@ {/if}
- {#if date} -
{date.toLocaleTimeString('en-GB', { - timeStyle: 'short', - })}
+ {#if date || since} +
+ {formattedDate} + {#if date && since}
{/if} + {formattedDuration} +
{/if} {/if} @@ -79,6 +104,7 @@ opacity: 0.6; margin-left: auto; font-size: 1.3vw; + text-align: right; } .content { diff --git a/lib/dashboard/socket.js b/lib/dashboard/socket.js index 7d34758..80c19f9 100644 --- a/lib/dashboard/socket.js +++ b/lib/dashboard/socket.js @@ -12,6 +12,7 @@ const mapService = (s, beat) => ({ name: s.name, cluster: s.cluster, lastBeat: beat, + checked: s.lastChecked, }); async function createDashboardSocket(server) {