refactor(lookup): remove LookupSummaryKpi component and update LookupWizard
Deleted the LookupSummaryKpi component to streamline the lookup functionality. Updated the LookupWizard component to remove references to the deleted component and adjusted the layout to incorporate FrameFooter for improved user interaction. Modified API type documentation to reflect changes in the lookup membership wizard.
This commit is contained in:
Denozordec
@@ -1,62 +0,0 @@
|
||||
import { Globe, Layers, ListChecks, Radar } from 'lucide-react'
|
||||
|
||||
import { KpiStatGrid, type KpiStatItem } from '@/components/reui-kit'
|
||||
import type { LookupResponse } from '@/types/api'
|
||||
|
||||
/**
|
||||
* Lookup summary KPI — stats-12 via KpiStatGrid.
|
||||
* @see https://reui.io/preview/base/stats-12
|
||||
*/
|
||||
export function LookupSummaryKpi({ data }: { data: LookupResponse }) {
|
||||
const entryCount = data.matches.filter((m) => m.layer === 'entry').length
|
||||
const snapshotCount = data.matches.filter((m) => m.layer === 'snapshot').length
|
||||
const resolvedCount = data.resolved_ips?.length ?? 0
|
||||
|
||||
const items: KpiStatItem[] = [
|
||||
{
|
||||
id: 'matched',
|
||||
label: 'Результат',
|
||||
value: data.matched ? 'Найдено' : 'Не найдено',
|
||||
hint: data.normalized,
|
||||
icon: <Radar aria-hidden />,
|
||||
iconClassName: data.matched
|
||||
? 'bg-success text-success-foreground [&_svg]:text-success-foreground'
|
||||
: 'bg-muted text-muted-foreground [&_svg]:text-muted-foreground',
|
||||
variant: data.matched ? 'default' : 'warning',
|
||||
},
|
||||
{
|
||||
id: 'entry',
|
||||
label: 'Слой entry',
|
||||
value: entryCount,
|
||||
hint: 'сырые списки',
|
||||
icon: <ListChecks aria-hidden />,
|
||||
iconClassName: 'bg-info text-info-foreground [&_svg]:text-info-foreground',
|
||||
},
|
||||
{
|
||||
id: 'snapshot',
|
||||
label: 'Слой snapshot',
|
||||
value: snapshotCount,
|
||||
hint: 'материализация',
|
||||
icon: <Layers aria-hidden />,
|
||||
iconClassName: 'bg-focus text-focus-foreground [&_svg]:text-focus-foreground',
|
||||
},
|
||||
]
|
||||
|
||||
if (data.query_kind === 'domain') {
|
||||
items.push({
|
||||
id: 'resolved',
|
||||
label: 'DNS IP',
|
||||
value: resolvedCount,
|
||||
hint: resolvedCount > 0 ? data.resolved_ips?.slice(0, 3).join(', ') : 'нет A/AAAA',
|
||||
icon: <Globe aria-hidden />,
|
||||
iconClassName: 'bg-primary text-primary-foreground [&_svg]:text-primary-foreground',
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<KpiStatGrid
|
||||
items={items}
|
||||
aria-label={`Запрос: ${data.query_kind} · ${data.query}`}
|
||||
/>
|
||||
)
|
||||
}
|
||||
@@ -7,12 +7,10 @@ import { Button } from '@evobgp/ui/components/button'
|
||||
import { LookupAddStep } from '@/components/lookup/lookup-add-step'
|
||||
import { LookupMatchesGrid } from '@/components/lookup/lookup-matches-grid'
|
||||
import { LookupSearchForm } from '@/components/lookup/lookup-search-form'
|
||||
import { LookupSummaryKpi } from '@/components/lookup/lookup-summary-kpi'
|
||||
import { EmptyState } from '@/components/empty-state'
|
||||
import { QueryState } from '@/components/query-state'
|
||||
import {
|
||||
Alert,
|
||||
AlertAction,
|
||||
AlertDescription,
|
||||
AlertTitle,
|
||||
} from '@/components/reui/alert'
|
||||
@@ -31,11 +29,12 @@ import {
|
||||
import {
|
||||
Frame,
|
||||
FrameDescription,
|
||||
FrameFooter,
|
||||
FrameHeader,
|
||||
FramePanel,
|
||||
FrameTitle,
|
||||
} from '@/components/reui/frame'
|
||||
import { SectionCardsSkeleton, TableSkeleton } from '@/components/skeletons'
|
||||
import { TableSkeleton } from '@/components/skeletons'
|
||||
import { sessionCanWriteModules } from '@/lib/auth'
|
||||
import { authSessionQueryOptions } from '@/queries/auth'
|
||||
import { directoriesCommunitiesQueryOptions } from '@/queries/directories'
|
||||
@@ -44,10 +43,10 @@ import { modulesListQueryOptions } from '@/queries/modules'
|
||||
|
||||
/**
|
||||
* Lookup membership wizard — check → result → optional add.
|
||||
* DNA: wizard-2 · surface frame · stepper.
|
||||
* DNA: wizard-2 · surface frame · stepper · FrameFooter CTAs.
|
||||
* @see https://reui.io/preview/base/wizard-2
|
||||
* @see https://reui.io/docs/components/base/stepper
|
||||
* @see https://reui.io/preview/base/stats-12
|
||||
* @see https://reui.io/docs/components/base/frame
|
||||
* @see https://reui.io/preview/base/data-grid-filtering-2
|
||||
*/
|
||||
|
||||
@@ -216,12 +215,7 @@ export function LookupWizard({
|
||||
isError={lookupQ.isError}
|
||||
error={lookupQ.error}
|
||||
onRetry={() => void lookupQ.refetch()}
|
||||
skeleton={
|
||||
<div className="flex flex-col gap-4 md:gap-6">
|
||||
<SectionCardsSkeleton />
|
||||
<TableSkeleton rows={5} />
|
||||
</div>
|
||||
}
|
||||
skeleton={<TableSkeleton rows={5} />}
|
||||
>
|
||||
{(result) => (
|
||||
<div className="flex flex-col gap-4 md:gap-6">
|
||||
@@ -231,7 +225,6 @@ export function LookupWizard({
|
||||
isPending={lookupQ.isFetching}
|
||||
onSubmit={onSubmitQuery}
|
||||
/>
|
||||
<LookupSummaryKpi data={result} />
|
||||
|
||||
{result.matched ? (
|
||||
<>
|
||||
@@ -242,66 +235,69 @@ export function LookupWizard({
|
||||
«{result.normalized}» найден в entries и/или snapshots
|
||||
({result.match_count} совпад.).
|
||||
</AlertDescription>
|
||||
<AlertAction>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="xs"
|
||||
onClick={resetToQuery}
|
||||
>
|
||||
Новая проверка
|
||||
</Button>
|
||||
</AlertAction>
|
||||
</Alert>
|
||||
<LookupMatchesGrid
|
||||
items={result.matches}
|
||||
isLoading={lookupQ.isFetching}
|
||||
/>
|
||||
<Frame spacing="sm" className="w-full">
|
||||
<FrameFooter className="flex flex-wrap items-center justify-end gap-2">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={resetToQuery}
|
||||
>
|
||||
Новая проверка
|
||||
</Button>
|
||||
</FrameFooter>
|
||||
</Frame>
|
||||
</>
|
||||
) : canWrite ? (
|
||||
<Alert variant="info">
|
||||
<Plus className="size-4" />
|
||||
<AlertTitle>Не найдено в списках</AlertTitle>
|
||||
<AlertDescription>
|
||||
«{result.normalized}» отсутствует. Добавить запись?
|
||||
</AlertDescription>
|
||||
<AlertAction>
|
||||
<Button
|
||||
type="button"
|
||||
size="xs"
|
||||
onClick={() => void goToAdd()}
|
||||
>
|
||||
Добавить
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="xs"
|
||||
onClick={resetToQuery}
|
||||
>
|
||||
Новая проверка
|
||||
</Button>
|
||||
</AlertAction>
|
||||
</Alert>
|
||||
<>
|
||||
<Alert variant="info">
|
||||
<Plus className="size-4" />
|
||||
<AlertTitle>Не найдено в списках</AlertTitle>
|
||||
<AlertDescription>
|
||||
«{result.normalized}» отсутствует. Добавить запись?
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
<Frame spacing="sm" className="w-full">
|
||||
<FrameFooter className="flex flex-wrap items-center justify-end gap-2">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={resetToQuery}
|
||||
>
|
||||
Новая проверка
|
||||
</Button>
|
||||
<Button type="button" onClick={() => goToAdd()}>
|
||||
Добавить
|
||||
</Button>
|
||||
</FrameFooter>
|
||||
</Frame>
|
||||
</>
|
||||
) : (
|
||||
<Alert variant="warning">
|
||||
<ShieldAlert className="size-4" />
|
||||
<AlertTitle>Не найдено</AlertTitle>
|
||||
<AlertDescription>
|
||||
«{result.normalized}» отсутствует в списках. У вас нет
|
||||
права добавлять записи (нужно bgp:modules:write).
|
||||
</AlertDescription>
|
||||
<AlertAction>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="xs"
|
||||
onClick={resetToQuery}
|
||||
>
|
||||
Новая проверка
|
||||
</Button>
|
||||
</AlertAction>
|
||||
</Alert>
|
||||
<>
|
||||
<Alert variant="warning">
|
||||
<ShieldAlert className="size-4" />
|
||||
<AlertTitle>Не найдено</AlertTitle>
|
||||
<AlertDescription>
|
||||
«{result.normalized}» отсутствует в списках. У вас нет
|
||||
права добавлять записи (нужно bgp:modules:write).
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
<Frame spacing="sm" className="w-full">
|
||||
<FrameFooter className="flex flex-wrap items-center justify-end gap-2">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={resetToQuery}
|
||||
>
|
||||
Новая проверка
|
||||
</Button>
|
||||
</FrameFooter>
|
||||
</Frame>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
@@ -340,35 +336,27 @@ export function LookupWizard({
|
||||
Повторная проверка обновлена. Можно посмотреть совпадения или
|
||||
начать новый запрос.
|
||||
</AlertDescription>
|
||||
<AlertAction>
|
||||
<Button
|
||||
type="button"
|
||||
size="xs"
|
||||
onClick={() => setStep(STEP_RESULT)}
|
||||
>
|
||||
К результату
|
||||
</Button>
|
||||
</Alert>
|
||||
{lookupQ.data?.matched ? (
|
||||
<LookupMatchesGrid
|
||||
items={lookupQ.data.matches}
|
||||
isLoading={lookupQ.isFetching}
|
||||
/>
|
||||
) : null}
|
||||
<Frame spacing="sm" className="w-full">
|
||||
<FrameFooter className="flex flex-wrap items-center justify-end gap-2">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="xs"
|
||||
onClick={resetToQuery}
|
||||
>
|
||||
Новая проверка
|
||||
</Button>
|
||||
</AlertAction>
|
||||
</Alert>
|
||||
{lookupQ.data ? (
|
||||
<>
|
||||
<LookupSummaryKpi data={lookupQ.data} />
|
||||
{lookupQ.data.matched ? (
|
||||
<LookupMatchesGrid
|
||||
items={lookupQ.data.matches}
|
||||
isLoading={lookupQ.isFetching}
|
||||
/>
|
||||
) : null}
|
||||
</>
|
||||
) : null}
|
||||
<Button type="button" onClick={() => setStep(STEP_RESULT)}>
|
||||
К результату
|
||||
</Button>
|
||||
</FrameFooter>
|
||||
</Frame>
|
||||
</div>
|
||||
</StepperContent>
|
||||
</StepperPanel>
|
||||
|
||||
@@ -162,7 +162,7 @@ export type BgpCommunityPatch = Partial<BgpCommunityCreate>
|
||||
export type CommunitiesResponse = Page<BgpCommunity>
|
||||
|
||||
// ---- Lookup (GET /v1/lookup) ----
|
||||
/** @see https://reui.io/preview/base/stats-12 — KPI summary on /lookup */
|
||||
/** @see https://reui.io/preview/base/wizard-2 — lookup membership wizard */
|
||||
export type LookupQueryKind = 'ip' | 'domain' | 'cidr'
|
||||
export type LookupLayer = 'entry' | 'snapshot'
|
||||
export type LookupMatchKind = 'ip_range' | 'domain' | 'prefix'
|
||||
|
||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user