From ccc3308b4ceb56eeef0479509048a02ef2e139d4 Mon Sep 17 00:00:00 2001 From: Faton Ramadani Date: Tue, 18 Jun 2024 17:18:16 +0200 Subject: [PATCH] feat(frontend): worker page improvements (#3921) * feat(frontend): wip * feat(frontend): wip * feat(frontend): add search * feat(frontend): fix style * feat(frontend): display a select when the number of worker groups is above 5 * feat(frontend): add number of workers in the select * fix(frontend): flatten header and rows * feat(frontend): improve worker header design * feat(frontend): improve worker header design * feat(frontend): fix search * feat(frontend): fix dark theme --- .../lib/components/DefaultTagsInner.svelte | 2 +- .../src/lib/components/WorkspaceGroup.svelte | 22 +- .../common/button/ButtonDropdown.svelte | 1 + .../(root)/(logged)/workers/+page.svelte | 385 ++++++++++++------ 4 files changed, 269 insertions(+), 141 deletions(-) diff --git a/frontend/src/lib/components/DefaultTagsInner.svelte b/frontend/src/lib/components/DefaultTagsInner.svelte index 7bb0de8661..ec0954a12a 100644 --- a/frontend/src/lib/components/DefaultTagsInner.svelte +++ b/frontend/src/lib/components/DefaultTagsInner.svelte @@ -24,7 +24,7 @@
{#if !$enterpriseLicense} -
+
EE only Enterprise Edition only feature
diff --git a/frontend/src/lib/components/WorkspaceGroup.svelte b/frontend/src/lib/components/WorkspaceGroup.svelte index dd01ef7843..aa0ddeb7c6 100644 --- a/frontend/src/lib/components/WorkspaceGroup.svelte +++ b/frontend/src/lib/components/WorkspaceGroup.svelte @@ -1,5 +1,5 @@ {#if $superadmin} @@ -280,7 +321,8 @@ ] : undefined} > - New group config + + Worker Group configs are propagated to every workers in the worker group @@ -309,140 +351,227 @@
{/if}
- {#each groupedWorkers as worker_group (worker_group[0])} - {@const config = (workerGroups ?? {})[worker_group[0]]} - {@const activeWorkers = worker_group?.[1].flatMap((x) => - x[1]?.filter((y) => (y.last_ping ?? 0) < 15) - )} - { - loadWorkerGroups() - }} - activeWorkers={activeWorkers?.length ?? 0} - {defaultTagPerWorkspace} - /> - - - - Worker - -
- Worker Tags - - If defined, the workers only pull jobs with the same corresponding tag - -
- - Last ping - Worker start - Jobs ran - {#if (!config || config?.dedicated_worker == undefined) && $superadmin} - Current job - Occupancy rate - {/if} - Memory usage
(Windmill) - Limits - Version - Liveness - - - - {#each worker_group[1] as [section, workers]} - - - Instance: {section?.split(splitter)?.[0]} - IP: {workers[0].ip} - {#if workers?.length > 1} - {workers?.length} Workers + {#if Object.keys(workerGroups ?? {}).length > 5} +
+ +
+ {:else} + + {#each Object.keys(workerGroups ?? {}) as name (name)} + {@const worker_group = groupedWorkers.find((x) => x[0] == name)} + + {#if worker_group} + {@const activeWorkers = worker_group?.[1].flatMap((x) => + x[1]?.filter((y) => (y.last_ping ?? 0) < 15) + )} + + {`${worker_group[0]} - ${pluralize(activeWorkers?.length, 'worker')}`} + Number of workers active in the last 15s + + {:else} + + {name} (0 worker) + + {/if} + {/each} + + {/if} + +
+ {#if worker_group} + {@const config = (workerGroups ?? {})[worker_group[0]]} + {@const activeWorkers = worker_group?.[1].flatMap((x) => + x[1]?.filter((y) => (y.last_ping ?? 0) < 15) + )} + { + loadWorkerGroups() + }} + activeWorkers={activeWorkers?.length ?? 0} + {defaultTagPerWorkspace} + /> + +
+ + +
+ {#if worker_group?.[1].length == 0 && search} +
+ No workers found. Reset the search to see all workers. +
+ {:else} + + + + Worker + +
+ Worker Tags + + If defined, the workers only pull jobs with the same corresponding tag + +
+ + Last ping + Worker start + Jobs ran + {#if (!config || config?.dedicated_worker == undefined) && $superadmin} + Current job + Occupancy rate {/if} - - - - {#if workers} - {#each workers as { worker, custom_tags, last_ping, started_at, jobs_executed, current_job_id, current_job_workspace_id, occupancy_rate, wm_version, vcpus, memory, memory_usage, wm_memory_usage }} - - {worker} - - {#if custom_tags && custom_tags?.length > 2} - {truncate(custom_tags?.join(', ') ?? '', 10)} - {custom_tags?.join(', ')} - {:else} - {custom_tags?.join(', ') ?? ''} - {/if} - - {last_ping != undefined ? last_ping + timeSinceLastPing : -1}s ago - {displayDate(started_at)} - {jobs_executed} - {#if (!config || config?.dedicated_worker == undefined) && $superadmin} - - {#if current_job_id} - - View job - -
- (workspace {current_job_workspace_id}) - {/if} - - - {Math.ceil(occupancy_rate ?? 0 * 100)}% - - {/if} + Memory usage
(Windmill) + Limits + Version + Liveness + + + + {#each worker_group[1] as [section, workers]} + {memory_usage ? Math.round(memory_usage / 1024 / 1024) + 'MB' : '--'}
({wm_memory_usage - ? Math.round(wm_memory_usage / 1024 / 1024) + 'MB' - : '--'}) - - {vcpus ? (vcpus / 100000).toFixed(1) + ' vCPUs' : '--'} - / {memory ? Math.round(memory / 1024 / 1024) + 'MB' : '--'} - - -
- {wm_version.split('-')[0]}{wm_version} +
+
+ Host: + {section?.split(splitter)?.[0]} +
+ IP: + {workers[0].ip} + {#if workers?.length > 1} + {workers?.length} Workers + {/if}
- - - {last_ping != undefined ? (last_ping < 60 ? 'Alive' : 'Dead') : 'Unknown'} - - + + {#if workers} + {#each workers as { worker, custom_tags, last_ping, started_at, jobs_executed, current_job_id, current_job_workspace_id, occupancy_rate, wm_version, vcpus, memory, memory_usage, wm_memory_usage }} + + {worker} + + {#if custom_tags && custom_tags?.length > 2} + {truncate(custom_tags?.join(', ') ?? '', 10)} + {custom_tags?.join(', ')} + {:else} + {custom_tags?.join(', ') ?? ''} + {/if} + + {last_ping != undefined ? last_ping + timeSinceLastPing : -1}s ago + {displayDate(started_at)} + {jobs_executed} + {#if (!config || config?.dedicated_worker == undefined) && $superadmin} + + {#if current_job_id} + + View job + +
+ (workspace {current_job_workspace_id}) + {/if} + + + {Math.ceil(occupancy_rate ?? 0 * 100)}% + + {/if} + +
+
+ {memory_usage ? Math.round(memory_usage / 1024 / 1024) + 'MB' : '--'} +
+
+ ({wm_memory_usage + ? Math.round(wm_memory_usage / 1024 / 1024) + 'MB' + : '--'}) +
+
+ + +
+
+ {vcpus ? (vcpus / 100000).toFixed(1) + ' vCPUs' : '--'} +
+
+ {memory ? Math.round(memory / 1024 / 1024) + 'MB' : '--'} +
+
+ + +
+ {wm_version.split('-')[0]}{wm_version} +
+ + + + {last_ping != undefined ? (last_ping < 60 ? 'Alive' : 'Dead') : 'Unknown'} + + + + {/each} + {/if} {/each} - {/if} - {/each} - - -
- {/each} + + + {/if} + {:else} + {@const worker_group = Object.entries(workerGroups ?? {}) + .filter((x) => !groupedWorkers.some((y) => y[0] == x[0])) + .find((x) => x[0] == selectedTab)} + {#if worker_group} + { + loadWorkerGroups() + }} + name={worker_group[0]} + config={worker_group[1]} + activeWorkers={0} + /> +
No workers currently in this worker group
+ {/if} + {/if} +
- - {#each Object.entries(workerGroups ?? {}).filter((x) => !groupedWorkers.some((y) => y[0] == x[0])) as worker_group (worker_group[0])} - { - loadWorkerGroups() - }} - name={worker_group[0]} - config={worker_group[1]} - activeWorkers={0} - /> -
No workers currently in this worker group
- {/each} {:else}
{#each new Array(4) as _}