{#if loading}
Slug
Type
Name
State
Health
{#each skeletonSlugWidths as slugWidth, i}
{/each}
{:else}
{#snippet sortHead(key: SortKey, label: string)}
sortBy(key)}>
{label}
{#if sortKey === key}
{#if sortDir === 'asc'}
{/snippet}
{#snippet row(entity: Entity, level: number, ancestors: Set)}
{@const ancestorsWithSelf = new Set(ancestors).add(entity.slug)}
{@const children = (childrenByParent.get(entity.slug) ?? []).filter((c) => !ancestorsWithSelf.has(c.slug))}
0 ? !collapsedNodes.has(entity.slug) : undefined}
tabindex={0}
onclick={() => onSelect(entity.slug)}
onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onSelect(entity.slug) } }}
>
{#if children.length > 0}
toggleNode(entity.slug, e)}
aria-label={collapsedNodes.has(entity.slug) ? `Expand ${entity.slug}` : `Collapse ${entity.slug}`}
>
{#if collapsedNodes.has(entity.slug)}
{/if}
{entity.slug}
{#if children.length > 0}
({children.length})
{/if}
{entity.type} {entity.name}
{#if entity.state}
{entity.state}
{:else}
—
{/if}
{#if entity.health}
{relativeTime(entity.last_check_at)}
{:else}
—
{/if}
{#if children.length > 0 && !collapsedNodes.has(entity.slug)}
{#each children as child (child.id)}
{@render row(child, level + 1, ancestorsWithSelf)}
{/each}
{/if}
{/snippet}
{@render sortHead('slug', 'Slug')}
{@render sortHead('type', 'Type')}
{@render sortHead('name', 'Name')}
{@render sortHead('state', 'State')}
{@render sortHead('health', 'Health')}
{#each topLevelEntities as entity (entity.id)}
{@render row(entity, 1, new Set())}
{:else}
No entities in this layer match the filter.
{/each}
{/if}