Enhance IP server display in IP details page
- 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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user