starred/windmill
1
0
Fork 0
mirror of https://github.com/windmill-labs/windmill.git synced 2026-09-11 08:07:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

use skeleton for workers page

Browse Source
This commit is contained in:
Ruben Fiszel
2023-04-08 14:08:56 +02:00
parent 617220d75a
commit a7c4c5d0a8
1 changed files with 46 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/routes/(root)/(logged)/workers/+page.svelte
+46 -37
View File
@@ -1,5 +1,6 @@
<script lang="ts">
import CenteredPage from '$lib/components/CenteredPage.svelte'
import { Skeleton } from '$lib/components/common'
import Badge from '$lib/components/common/badge/Badge.svelte'
import PageHeader from '$lib/components/PageHeader.svelte'
import TableCustom from '$lib/components/TableCustom.svelte'
@@ -7,12 +8,12 @@
import { displayDate, groupBy, sendUserToast } from '$lib/utils'
import { onDestroy, onMount } from 'svelte'
let workers: WorkerPing[] = []
let workers: WorkerPing[] | undefined = undefined
let filteredWorkers: WorkerPing[] = []
let groupedWorkers: [string, WorkerPing[]][] = []
let intervalId: NodeJS.Timer | undefined
$: filteredWorkers = workers.filter((x) => (x.last_ping ?? 0) < 300)
$: filteredWorkers = (workers ?? []).filter((x) => (x.last_ping ?? 0) < 300)
$: groupedWorkers = groupBy(filteredWorkers, (wp: WorkerPing) => wp.worker_instance)
let timeSinceLastPing = 0
@@ -52,40 +53,48 @@
This page enables you to know their IP in case you need whitelisting and also display liveness information"
/>
{#if groupedWorkers.length == 0}
<p>No workers seems to be available</p>
{/if}
{#each groupedWorkers as [section, workers]}
<div class="mt-6">
Instance: {section} | IP:
<Badge large color="gray">{workers[0].ip}</Badge>
</div>
{#if workers != undefined}
{#if groupedWorkers.length == 0}
<p>No workers seems to be available</p>
{/if}
{#each groupedWorkers as [section, workers]}
<div class="mt-6">
Instance: {section} | IP:
<Badge large color="gray">{workers[0].ip}</Badge>
</div>
<TableCustom>
<tr slot="header-row">
<th>Worker</th>
<th>Last ping</th>
<th>Worker start</th>
<th>Nb of jobs executed</th>
<th>Liveness</th>
</tr>
<tbody slot="body">
{#if workers}
{#each workers as { worker, last_ping, started_at, jobs_executed }}
<tr>
<td class="py-1">{worker}</td>
<td class="py-1"
>{last_ping != undefined ? last_ping + timeSinceLastPing : -1}s ago</td
>
<td class="py-1">{displayDate(started_at)}</td>
<td class="py-1">{jobs_executed}</td>
<td class="py-1"
>{last_ping != undefined ? (last_ping < 60 ? 'Alive' : 'Dead') : 'Unknown'}</td
>
</tr>
{/each}
{/if}
</tbody>
</TableCustom>
{/each}
<TableCustom>
<tr slot="header-row">
<th>Worker</th>
<th>Last ping</th>
<th>Worker start</th>
<th>Nb of jobs executed</th>
<th>Liveness</th>
</tr>
<tbody slot="body">
{#if workers}
{#each workers as { worker, last_ping, started_at, jobs_executed }}
<tr>
<td class="py-1">{worker}</td>
<td class="py-1"
>{last_ping != undefined ? last_ping + timeSinceLastPing : -1}s ago</td
>
<td class="py-1">{displayDate(started_at)}</td>
<td class="py-1">{jobs_executed}</td>
<td class="py-1"
>{last_ping != undefined ? (last_ping < 60 ? 'Alive' : 'Dead') : 'Unknown'}</td
>
</tr>
{/each}
{/if}
</tbody>
</TableCustom>
{/each}
{:else}
<div class="flex flex-col">
{#each new Array(4) as _}
<Skeleton layout={[[8], 1]} />
{/each}
</div>
{/if}
</CenteredPage>