|
5 | 5 | import { formatDate } from '$lib/utilities/format-date'; |
6 | 6 |
|
7 | 7 | import EmptyState from '$lib/holocene/empty-state.svelte'; |
| 8 | + import Table from '$lib/holocene/table/table.svelte'; |
| 9 | + import TableHeaderRow from '$lib/holocene/table/table-header-row.svelte'; |
8 | 10 | import type { GetPollersResponse } from '$lib/services/pollers-service'; |
9 | 11 |
|
10 | 12 | export let taskQueue: string; |
11 | 13 | export let workers: GetPollersResponse; |
12 | 14 | </script> |
13 | 15 |
|
14 | 16 | <section class="flex flex-col gap-4"> |
15 | | - <h3 class="text-lg font-medium"> |
| 17 | + <h2 class="text-lg font-medium"> |
16 | 18 | Task Queue: <span class="select-all font-normal">{taskQueue}</span> |
17 | | - </h3> |
18 | | - <section |
19 | | - class="flex w-full flex-col rounded-lg border-[3px] border-gray-900 bg-white" |
20 | | - > |
21 | | - <div class="flex flex-row bg-gray-900 p-2 text-white"> |
22 | | - <div class="w-6/12 text-left">ID</div> |
23 | | - <div class="w-2/12 text-left">Last Accessed</div> |
24 | | - <div class="w-2/12 text-center">Workflow Task Handler</div> |
25 | | - <div class="w-2/12 text-center">Activity Handler</div> |
26 | | - </div> |
| 19 | + </h2> |
| 20 | + <Table class="mb-6 w-full min-w-[600px] table-fixed"> |
| 21 | + <TableHeaderRow slot="headers"> |
| 22 | + <th class="table-cell w-6/12">ID</th> |
| 23 | + <th class="table-cell w-2/12">Last Accessed</th> |
| 24 | + <th class="table-cell w-2/12"> |
| 25 | + <p class="text-center">Workflow Task Handler</p> |
| 26 | + </th> |
| 27 | + <th class="table-cell w-2/12 text-center"> |
| 28 | + <p class="text-center">Activity Handler</p> |
| 29 | + </th> |
| 30 | + </TableHeaderRow> |
27 | 31 | {#each workers?.pollers as poller (poller.identity)} |
28 | | - <div |
29 | | - class="flex h-full w-full flex-row border-b-2 p-2 no-underline last:border-b-0" |
30 | | - data-cy="worker-row" |
31 | | - > |
32 | | - <div class="links w-6/12 text-left" data-cy="worker-identity"> |
| 32 | + <tr class="table-row w-full" data-cy="worker-row"> |
| 33 | + <td /> |
| 34 | + <td class="text-left" data-cy="worker-identity"> |
33 | 35 | <p class="select-all">{poller.identity}</p> |
34 | | - </div> |
35 | | - <div class="links w-2/12 text-left" data-cy="worker-last-access-time"> |
36 | | - <h3> |
37 | | - <p class="select-all"> |
38 | | - {formatDate(poller.lastAccessTime, $timeFormat)} |
39 | | - </p> |
40 | | - </h3> |
41 | | - </div> |
42 | | - <div class="flex w-2/12 justify-center" data-cy="workflow-poller"> |
| 36 | + </td> |
| 37 | + <td class="text-left" data-cy="worker-last-access-time"> |
| 38 | + <p class="select-all"> |
| 39 | + {formatDate(poller.lastAccessTime, $timeFormat)} |
| 40 | + </p> |
| 41 | + </td> |
| 42 | + <td data-cy="workflow-poller"> |
43 | 43 | {#if poller.taskQueueTypes.includes('WORKFLOW')} |
44 | | - <Icon name="checkmark" class="text-blue-700" /> |
| 44 | + <Icon name="checkmark" class="m-auto text-blue-700" title="yes" /> |
45 | 45 | {:else} |
46 | | - <Icon name="close" class="text-primary" /> |
| 46 | + <Icon name="close" class="m-auto text-primary" title="no" /> |
47 | 47 | {/if} |
48 | | - </div> |
49 | | - <div class="flex w-2/12 justify-center" data-cy="activity-poller"> |
| 48 | + </td> |
| 49 | + <td data-cy="activity-poller"> |
50 | 50 | {#if poller.taskQueueTypes.includes('ACTIVITY')} |
51 | | - <Icon name="checkmark" class="text-blue-700" /> |
| 51 | + <Icon name="checkmark" class="m-auto text-blue-700" title="yes" /> |
52 | 52 | {:else} |
53 | | - <Icon name="close" class="text-primary" /> |
| 53 | + <Icon name="close" class="m-auto text-primary" title="no" /> |
54 | 54 | {/if} |
55 | | - </div> |
56 | | - </div> |
| 55 | + </td> |
| 56 | + <td /> |
| 57 | + </tr> |
57 | 58 | {:else} |
58 | 59 | <EmptyState title={'No Workers Found'} /> |
59 | 60 | {/each} |
60 | | - </section> |
| 61 | + </Table> |
61 | 62 | </section> |
0 commit comments