Enhance IP server display in IP details page
Publish telemt-api gateway Docker image / test (push) Successful in 24s
Publish telemt-api gateway Docker image / build-and-push (push) Successful in 2m12s

- Improved the rendering of active and recent servers associated with each IP, providing clearer visual feedback.
- Introduced badges for active and recent servers, including a distinction for primary servers, enhancing user understanding of server status.
- Refactored the UI logic to conditionally display server information, improving overall clarity and usability in the IP details table.
This commit is contained in:
Denozordec
2026-03-30 15:18:37 +07:00
parent a45edcc9b5
commit b69f2dd0e4
+29 -6
View File
@@ -96,13 +96,36 @@
<Badge variant="outline" class="ml-1">AS{ip.asn}</Badge>
{/if}
</Table.Cell>
<Table.Cell class="max-w-[240px] text-xs text-muted-foreground">
active: {(ip.active_on_servers ?? []).join(', ') || '—'}
{#if (ip.recent_on_servers?.length ?? 0) > 0}
<br />recent: {(ip.recent_on_servers ?? []).join(', ')}
<Table.Cell class="max-w-[240px] text-xs">
{@const activeServers = (ip.active_on_servers ?? []).filter(Boolean)}
{@const recentServers = (ip.recent_on_servers ?? []).filter(Boolean)}
{@const primaryServer = ip.primary_server ?? null}
{@const recentOnly = recentServers.filter((s) => !activeServers.includes(s))}
{#if activeServers.length === 0}
<span class="text-muted-foreground"></span>
{:else}
<div class="flex flex-wrap items-center gap-1">
{#each activeServers as srv (srv)}
<Badge variant="secondary" class="font-normal px-2 py-0.5">
{srv}
</Badge>
{#if primaryServer && srv === primaryServer}
<Badge class="font-normal px-2 py-0.5">primary</Badge>
{/if}
{/each}
</div>
{/if}
{#if ip.primary_server}
<br />primary: {ip.primary_server}
{#if recentOnly.length > 0}
<div class="mt-1 flex flex-wrap items-center gap-1">
<Badge variant="outline" class="font-normal px-2 py-0.5">recent</Badge>
{#each recentOnly as srv (srv)}
<Badge variant="outline" class="font-normal px-2 py-0.5">
{srv}
</Badge>
{/each}
</div>
{/if}
</Table.Cell>
</Table.Row>