denozord/EvoBGP
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 131 Wiki Activity

feat: enhance job detail UI with improved overflow handling and layout adjustments. Update card components to manage overflow and ensure better readability of job reports and details, enhancing the overall user experience.

Browse Source
This commit is contained in:
Denozordec
2026-04-06 22:36:23 +07:00
parent 88226f6dd9
commit 67ce135b46
1 changed files with 12 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/lib/components/operations/OperationsJobsTab.svelte
+12 -12
View File
@@ -64,7 +64,7 @@
<CardContent class="space-y-3 p-3 sm:p-4"> <CardContent class="space-y-3 p-3 sm:p-4">
{#each jobs as job (job.job_id)} {#each jobs as job (job.job_id)}
<div class="bg-card min-w-0 rounded-lg border"> <div class="bg-card min-w-0 overflow-hidden rounded-lg border">
<div class="flex min-w-0 flex-col gap-3 p-3 sm:p-4"> <div class="flex min-w-0 flex-col gap-3 p-3 sm:p-4">
<div class="flex min-w-0 flex-wrap items-start justify-between gap-2"> <div class="flex min-w-0 flex-wrap items-start justify-between gap-2">
<div class="min-w-0 flex items-center gap-2"> <div class="min-w-0 flex items-center gap-2">
@@ -129,7 +129,7 @@
{@const logEntries = getJobLogEntries(detailedJob)} {@const logEntries = getJobLogEntries(detailedJob)}
{@const logTotal = getJobLogTotal(detailedJob, logEntries)} {@const logTotal = getJobLogTotal(detailedJob, logEntries)}
<div class="border-t bg-muted/10 p-3 sm:p-4"> <div class="border-t bg-muted/10 p-3 sm:p-4">
<div class="space-y-3"> <div class="max-h-[70vh] space-y-3 overflow-y-auto pr-1">
{#if isDetailsLoading} {#if isDetailsLoading}
<p class="text-muted-foreground text-xs">Догружаем свежие детали задачи…</p> <p class="text-muted-foreground text-xs">Догружаем свежие детали задачи…</p>
{/if} {/if}
@@ -209,20 +209,20 @@
{/if} {/if}
</div> </div>
</div> </div>
<div class="grid gap-2 md:grid-cols-2 xl:grid-cols-4"> <div class="grid min-w-0 gap-2 md:grid-cols-2 xl:grid-cols-4">
<div class="rounded-md border bg-muted/40 p-2.5"> <div class="min-w-0 overflow-hidden rounded-md border bg-muted/40 p-2.5">
<p class="text-muted-foreground text-[11px] uppercase">Агрегация</p> <p class="text-muted-foreground text-[11px] uppercase">Агрегация</p>
<p class="text-sm font-semibold">{jobReport.aggregationTotal} префиксов</p> <p class="text-sm font-semibold">{jobReport.aggregationTotal} префиксов</p>
</div> </div>
<div class="rounded-md border bg-muted/40 p-2.5"> <div class="min-w-0 overflow-hidden rounded-md border bg-muted/40 p-2.5">
<p class="text-muted-foreground text-[11px] uppercase">Домены</p> <p class="text-muted-foreground text-[11px] uppercase">Домены</p>
<p class="text-sm font-semibold">{jobReport.domains.length}</p> <p class="text-sm font-semibold">{jobReport.domains.length}</p>
</div> </div>
<div class="rounded-md border bg-muted/40 p-2.5"> <div class="min-w-0 overflow-hidden rounded-md border bg-muted/40 p-2.5">
<p class="text-muted-foreground text-[11px] uppercase">ASN</p> <p class="text-muted-foreground text-[11px] uppercase">ASN</p>
<p class="text-sm font-semibold">{jobReport.asn.length}</p> <p class="text-sm font-semibold">{jobReport.asn.length}</p>
</div> </div>
<div class="rounded-md border bg-muted/40 p-2.5"> <div class="min-w-0 overflow-hidden rounded-md border bg-muted/40 p-2.5">
<p class="text-muted-foreground text-[11px] uppercase">CDN/IP Range</p> <p class="text-muted-foreground text-[11px] uppercase">CDN/IP Range</p>
<p class="text-sm font-semibold">{jobReport.cdn.length}/{jobReport.ipRanges.length}</p> <p class="text-sm font-semibold">{jobReport.cdn.length}/{jobReport.ipRanges.length}</p>
</div> </div>
@@ -238,8 +238,8 @@
</div> </div>
{/if} {/if}
<div class="grid gap-3 xl:grid-cols-2"> <div class="grid min-w-0 gap-3 xl:grid-cols-2">
<div class="space-y-1.5 rounded-lg border p-3"> <div class="min-w-0 overflow-hidden space-y-1.5 rounded-lg border p-3">
<p class="text-sm font-medium">Домены: какой домен какие IP/префиксы вернул</p> <p class="text-sm font-medium">Домены: какой домен какие IP/префиксы вернул</p>
<ScrollArea class="max-h-44 rounded border bg-muted/25 p-2"> <ScrollArea class="max-h-44 rounded border bg-muted/25 p-2">
{#each jobReport.domains as row (`${job.job_id}-domain-${row.source}`)} {#each jobReport.domains as row (`${job.job_id}-domain-${row.source}`)}
@@ -253,7 +253,7 @@
{/each} {/each}
</ScrollArea> </ScrollArea>
</div> </div>
<div class="space-y-1.5 rounded-lg border p-3"> <div class="min-w-0 overflow-hidden space-y-1.5 rounded-lg border p-3">
<p class="text-sm font-medium">ASN: сколько префиксов получено по AS</p> <p class="text-sm font-medium">ASN: сколько префиксов получено по AS</p>
<ScrollArea class="max-h-44 rounded border bg-muted/25 p-2"> <ScrollArea class="max-h-44 rounded border bg-muted/25 p-2">
{#each jobReport.asn as row (`${job.job_id}-asn-${row.asn}`)} {#each jobReport.asn as row (`${job.job_id}-asn-${row.asn}`)}
@@ -266,7 +266,7 @@
{/each} {/each}
</ScrollArea> </ScrollArea>
</div> </div>
<div class="space-y-1.5 rounded-lg border p-3"> <div class="min-w-0 overflow-hidden space-y-1.5 rounded-lg border p-3">
<p class="text-sm font-medium">CDN: из каждой ссылки полученные IP/префиксы</p> <p class="text-sm font-medium">CDN: из каждой ссылки полученные IP/префиксы</p>
<ScrollArea class="max-h-44 rounded border bg-muted/25 p-2"> <ScrollArea class="max-h-44 rounded border bg-muted/25 p-2">
{#each jobReport.cdn as row (`${job.job_id}-cdn-${row.source}`)} {#each jobReport.cdn as row (`${job.job_id}-cdn-${row.source}`)}
@@ -280,7 +280,7 @@
{/each} {/each}
</ScrollArea> </ScrollArea>
</div> </div>
<div class="space-y-1.5 rounded-lg border p-3"> <div class="min-w-0 overflow-hidden space-y-1.5 rounded-lg border p-3">
<p class="text-sm font-medium">IP range: итог по статическим диапазонам</p> <p class="text-sm font-medium">IP range: итог по статическим диапазонам</p>
<ScrollArea class="max-h-44 rounded border bg-muted/25 p-2"> <ScrollArea class="max-h-44 rounded border bg-muted/25 p-2">
{#each jobReport.ipRanges as row (`${job.job_id}-ipr-${row.source}`)} {#each jobReport.ipRanges as row (`${job.job_id}-ipr-${row.source}`)}