feat(services): enhance service health logging and component structure
quality / commitlint (push) Skipped
CD / update-wiki (push) Successful in 6s
quality / changes (push) Successful in 9s
quality / docker-check (push) Skipped
quality / web (push) Successful in 59s
quality / api (push) Successful in 44s
CD / quality (push) Successful in 2m0s
CD / publish (push) Successful in 1m37s
quality / commitlint (push) Skipped
CD / update-wiki (push) Successful in 6s
quality / changes (push) Successful in 9s
quality / docker-check (push) Skipped
quality / web (push) Successful in 59s
quality / api (push) Successful in 44s
CD / quality (push) Successful in 2m0s
CD / publish (push) Successful in 1m37s
- Updated the service health log retrieval to include a limit parameter, improving performance and control over log data. - Refactored the ServiceUnitCard component to export the LbModeTile function, enhancing reusability across the application. - Simplified routing for service health and nodes pages by redirecting to the service overview, improving user navigation. - Enhanced the service detail page with additional state management and mutation hooks for better service configuration handling. - Removed unused components and streamlined the service routing and subdomains pages for improved clarity and maintainability.
This commit is contained in:
Denozordec
@@ -1,3 +1,4 @@
|
||||
export { UptimeChart, type UptimeProbe } from './uptime-chart'
|
||||
export { applyFiltersToData, getActiveFilters, renderSingleSelectedLabel } from './filter-utils'
|
||||
export { CertStatusChart, GroupDomainsChart } from './dashboard-analytics'
|
||||
export { ResourcePage, type ResourcePageProps, type ResourcePageTab } from './resource-page'
|
||||
|
||||
@@ -0,0 +1,301 @@
|
||||
import { useId, useMemo, useState } from 'react'
|
||||
import { ActivityIcon, InfoIcon, TrendingDownIcon, TrendingUpIcon } from 'lucide-react'
|
||||
import { Area, AreaChart, XAxis } from 'recharts'
|
||||
|
||||
import { EmptyState } from '@/components/empty-state'
|
||||
import { Badge } from '@/components/reui/badge'
|
||||
import { Frame, FramePanel } from '@/components/reui/frame'
|
||||
import { IconTile } from '@/components/reui/icon-tile'
|
||||
import { formatDate, sqliteUtcToIso } from '@/lib/format'
|
||||
import { Button } from '@cfdm/ui/components/button'
|
||||
import {
|
||||
ChartContainer,
|
||||
ChartTooltip,
|
||||
type ChartConfig,
|
||||
} from '@cfdm/ui/components/chart'
|
||||
import { Tabs, TabsList, TabsTrigger } from '@cfdm/ui/components/tabs'
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipProvider,
|
||||
TooltipTrigger,
|
||||
} from '@cfdm/ui/components/tooltip'
|
||||
|
||||
/**
|
||||
* Uptime monitoring card — chart-17 DNA (Frame + value + AreaChart + period tabs).
|
||||
* Preview: https://reui.io/preview/base/chart-17
|
||||
* Frame: https://reui.io/docs/components/base/frame
|
||||
* Chart: shadcn Chart + Recharts AreaChart
|
||||
*/
|
||||
|
||||
export interface UptimeProbe {
|
||||
id: number
|
||||
status: 'up' | 'down' | 'degraded' | 'unknown'
|
||||
ok: boolean
|
||||
latency_ms: number | null
|
||||
checked_at: string
|
||||
}
|
||||
|
||||
export type UptimePeriodKey = '5D' | '2W' | '1M'
|
||||
|
||||
const PERIODS: { key: UptimePeriodKey; label: string; days: number }[] = [
|
||||
{ key: '5D', label: '5D', days: 5 },
|
||||
{ key: '2W', label: '2W', days: 14 },
|
||||
{ key: '1M', label: '1M', days: 30 },
|
||||
]
|
||||
|
||||
const chartConfig = {
|
||||
latency: {
|
||||
label: 'Задержка',
|
||||
color: 'var(--chart-1)',
|
||||
},
|
||||
} satisfies ChartConfig
|
||||
|
||||
interface ChartPoint {
|
||||
period: string
|
||||
latency: number
|
||||
ok: boolean
|
||||
at: string
|
||||
status: UptimeProbe['status']
|
||||
}
|
||||
|
||||
function probeTime(checkedAt: string): number {
|
||||
const iso = sqliteUtcToIso(checkedAt) ?? checkedAt
|
||||
const time = new Date(iso).getTime()
|
||||
return Number.isNaN(time) ? 0 : time
|
||||
}
|
||||
|
||||
function filterByPeriod(items: UptimeProbe[], days: number): UptimeProbe[] {
|
||||
const cutoff = Date.now() - days * 86_400_000
|
||||
return items.filter((item) => probeTime(item.checked_at) >= cutoff)
|
||||
}
|
||||
|
||||
function toSeries(items: UptimeProbe[]): ChartPoint[] {
|
||||
return [...items]
|
||||
.sort((a, b) => probeTime(a.checked_at) - probeTime(b.checked_at))
|
||||
.map((item) => ({
|
||||
period: formatDate(item.checked_at),
|
||||
latency: item.latency_ms ?? 0,
|
||||
ok: item.ok && item.status !== 'down',
|
||||
at: item.checked_at,
|
||||
status: item.status,
|
||||
}))
|
||||
}
|
||||
|
||||
function uptimePercent(points: ChartPoint[]): number | null {
|
||||
if (points.length === 0) return null
|
||||
const okCount = points.filter((point) => point.ok).length
|
||||
return (okCount / points.length) * 100
|
||||
}
|
||||
|
||||
function deltaPercent(points: ChartPoint[]): number | null {
|
||||
if (points.length < 4) return null
|
||||
const mid = Math.floor(points.length / 2)
|
||||
const prev = uptimePercent(points.slice(0, mid))
|
||||
const next = uptimePercent(points.slice(mid))
|
||||
if (prev == null || next == null) return null
|
||||
return next - prev
|
||||
}
|
||||
|
||||
interface UptimeTooltipProps {
|
||||
active?: boolean
|
||||
payload?: Array<{ payload: ChartPoint }>
|
||||
}
|
||||
|
||||
function UptimeTooltip({ active, payload }: UptimeTooltipProps) {
|
||||
if (!active || !payload?.[0]) return null
|
||||
const point = payload[0].payload
|
||||
return (
|
||||
<div className="bg-popover text-popover-foreground rounded-md px-3 py-2 text-sm shadow-md">
|
||||
<p className="font-medium tabular-nums">
|
||||
{point.latency} мс · {point.ok ? 'OK' : 'Down'}
|
||||
</p>
|
||||
<p className="text-muted-foreground text-xs">{point.period}</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
interface UptimeChartProps {
|
||||
items: UptimeProbe[]
|
||||
isLoading?: boolean
|
||||
}
|
||||
|
||||
export function UptimeChart({ items, isLoading = false }: UptimeChartProps) {
|
||||
const gradientId = useId().replace(/:/g, '')
|
||||
const [period, setPeriod] = useState<UptimePeriodKey>('5D')
|
||||
const days = PERIODS.find((entry) => entry.key === period)?.days ?? 5
|
||||
|
||||
const points = useMemo(
|
||||
() => toSeries(filterByPeriod(items, days)),
|
||||
[items, days],
|
||||
)
|
||||
const uptime = uptimePercent(points)
|
||||
const delta = deltaPercent(points)
|
||||
const lastOk = points.at(-1)?.ok ?? true
|
||||
const tileClass = lastOk ? 'text-success' : 'text-destructive'
|
||||
|
||||
return (
|
||||
<Frame spacing="sm" className="min-w-0 w-full">
|
||||
<FramePanel className="flex flex-col gap-6">
|
||||
<div className="border-border flex items-center justify-between gap-2 border-b border-dashed pb-4">
|
||||
<div className="flex items-center gap-2.5">
|
||||
<IconTile
|
||||
variant="elevated"
|
||||
className={`size-10.5 ${tileClass}`}
|
||||
aria-hidden="true"
|
||||
>
|
||||
<ActivityIcon />
|
||||
</IconTile>
|
||||
<div className="flex flex-col justify-center">
|
||||
<h3 className="text-base font-semibold">Uptime</h3>
|
||||
<p className="text-muted-foreground text-sm">
|
||||
Пробы health-check за период
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<TooltipProvider delay={150}>
|
||||
<Tooltip>
|
||||
<TooltipTrigger
|
||||
render={
|
||||
<Button
|
||||
aria-label="О графике uptime"
|
||||
className="text-muted-foreground/70 -mr-1"
|
||||
size="icon-sm"
|
||||
type="button"
|
||||
variant="ghost"
|
||||
/>
|
||||
}
|
||||
>
|
||||
<InfoIcon data-icon="inline-start" aria-hidden="true" />
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="top" sideOffset={8}>
|
||||
<p>Доля успешных проб и задержка (мс) по журналу health-log.</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
</div>
|
||||
|
||||
{isLoading ? (
|
||||
<div className="bg-muted h-40 w-full animate-pulse rounded-xl" />
|
||||
) : points.length === 0 ? (
|
||||
<EmptyState
|
||||
icon={ActivityIcon}
|
||||
title="Нет проб за период"
|
||||
description="Результаты появятся после health-check"
|
||||
stackedIcon={false}
|
||||
centered={false}
|
||||
/>
|
||||
) : (
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="flex flex-col gap-1">
|
||||
<div className="text-foreground text-3xl font-semibold tabular-nums">
|
||||
{uptime == null ? '—' : `${uptime.toFixed(uptime >= 99.95 ? 2 : 1)}%`}
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
{delta == null ? (
|
||||
<Badge variant="outline" size="sm">
|
||||
{points.length} проб
|
||||
</Badge>
|
||||
) : delta >= 0 ? (
|
||||
<>
|
||||
<TrendingUpIcon className="text-success size-4" aria-hidden="true" />
|
||||
<span className="text-success font-medium">
|
||||
+{delta.toFixed(1)} п.п.
|
||||
</span>
|
||||
<span className="text-muted-foreground">к первой половине окна</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<TrendingDownIcon className="text-destructive size-4" aria-hidden="true" />
|
||||
<span className="text-destructive font-medium">
|
||||
{delta.toFixed(1)} п.п.
|
||||
</span>
|
||||
<span className="text-muted-foreground">к первой половине окна</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="h-40 w-full">
|
||||
<ChartContainer
|
||||
config={chartConfig}
|
||||
className="h-full w-full overflow-hidden rounded-b-xl"
|
||||
initialDimension={{ width: 320, height: 160 }}
|
||||
>
|
||||
<AreaChart
|
||||
data={points}
|
||||
margin={{ top: 10, left: 0, right: 0, bottom: 0 }}
|
||||
>
|
||||
<defs>
|
||||
<linearGradient id={gradientId} x1="0" y1="0" x2="0" y2="1">
|
||||
<stop
|
||||
offset="5%"
|
||||
stopColor="var(--color-latency)"
|
||||
stopOpacity={0.8}
|
||||
/>
|
||||
<stop
|
||||
offset="95%"
|
||||
stopColor="var(--color-latency)"
|
||||
stopOpacity={0.1}
|
||||
/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<XAxis dataKey="period" hide />
|
||||
<ChartTooltip content={<UptimeTooltip />} />
|
||||
<Area
|
||||
dataKey="latency"
|
||||
type="natural"
|
||||
fill={`url(#${gradientId})`}
|
||||
stroke="var(--color-latency)"
|
||||
strokeWidth={2}
|
||||
dot={(dotProps) => {
|
||||
const { cx, cy, payload, index } = dotProps as {
|
||||
cx?: number
|
||||
cy?: number
|
||||
index?: number
|
||||
payload?: ChartPoint
|
||||
}
|
||||
if (cx == null || cy == null) return <g key={index} />
|
||||
const fill = payload?.ok
|
||||
? 'var(--color-latency)'
|
||||
: 'var(--destructive)'
|
||||
return (
|
||||
<circle
|
||||
key={index}
|
||||
cx={cx}
|
||||
cy={cy}
|
||||
r={4}
|
||||
fill={fill}
|
||||
stroke="var(--background)"
|
||||
strokeWidth={2}
|
||||
/>
|
||||
)
|
||||
}}
|
||||
activeDot={{
|
||||
r: 6,
|
||||
stroke: 'var(--background)',
|
||||
strokeWidth: 2,
|
||||
}}
|
||||
/>
|
||||
</AreaChart>
|
||||
</ChartContainer>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Tabs
|
||||
value={period}
|
||||
onValueChange={(value) => setPeriod(value as UptimePeriodKey)}
|
||||
>
|
||||
<TabsList className="w-full">
|
||||
{PERIODS.map((entry) => (
|
||||
<TabsTrigger key={entry.key} value={entry.key} className="flex-1">
|
||||
{entry.label}
|
||||
</TabsTrigger>
|
||||
))}
|
||||
</TabsList>
|
||||
</Tabs>
|
||||
</FramePanel>
|
||||
</Frame>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,572 @@
|
||||
import { useMemo, useState, type ReactNode } from 'react'
|
||||
import type { ColumnDef } from '@tanstack/react-table'
|
||||
import {
|
||||
GlobeIcon,
|
||||
NetworkIcon,
|
||||
PlusIcon,
|
||||
SearchIcon,
|
||||
ServerIcon,
|
||||
} from 'lucide-react'
|
||||
|
||||
import { HealthCheckBadge } from '@/components/health-check-badge'
|
||||
import { StatusBadge } from '@/components/status-badge'
|
||||
import { Badge } from '@/components/reui/badge'
|
||||
import { DataGridColumnHeader } from '@/components/reui/data-grid/data-grid-column-header'
|
||||
import { IconTile } from '@/components/reui/icon-tile'
|
||||
import { createFilter, type Filter, type FilterFieldConfig } from '@/components/reui/filters'
|
||||
import { ResourcePage } from '@/components/reui-kit'
|
||||
import type { ServiceView } from '@/lib/schemas'
|
||||
import { Button } from '@cfdm/ui/components/button'
|
||||
import { Switch } from '@cfdm/ui/components/switch'
|
||||
|
||||
type HealthStatus = 'up' | 'down' | 'degraded' | 'unknown'
|
||||
|
||||
interface ServiceIpRow {
|
||||
id: string
|
||||
ip: string
|
||||
status: HealthStatus
|
||||
enabled: boolean
|
||||
active: boolean
|
||||
weight: number
|
||||
priority: number
|
||||
latency_ms: number | null
|
||||
last_checked_at: string | null
|
||||
last_error: string | null
|
||||
colo: string | null
|
||||
provider: string | null
|
||||
}
|
||||
|
||||
export interface ServiceFqdnRow {
|
||||
id: string
|
||||
fqdn: string
|
||||
zone_name: string
|
||||
target_ips: string[]
|
||||
binding_id: number
|
||||
domain_id: number
|
||||
}
|
||||
|
||||
interface ServiceNodeRow {
|
||||
id: string
|
||||
nodeId: number
|
||||
address: string
|
||||
protocol: string
|
||||
port: number | null
|
||||
health_status: HealthStatus
|
||||
weight: number
|
||||
priority: number
|
||||
}
|
||||
|
||||
const TABS = [
|
||||
{ id: 'ip', label: 'IP' },
|
||||
{ id: 'fqdn', label: 'FQDN' },
|
||||
{ id: 'nodes', label: 'Ноды' },
|
||||
] as const
|
||||
|
||||
const HEALTH_OPTIONS = [
|
||||
{ value: 'up', label: 'OK' },
|
||||
{ value: 'degraded', label: 'Slow' },
|
||||
{ value: 'down', label: 'Down' },
|
||||
{ value: 'unknown', label: '—' },
|
||||
]
|
||||
|
||||
function mapNodeHealth(status: string): HealthStatus {
|
||||
if (status === 'healthy' || status === 'up') return 'up'
|
||||
if (status === 'unhealthy' || status === 'down') return 'down'
|
||||
if (status === 'degraded') return 'degraded'
|
||||
return 'unknown'
|
||||
}
|
||||
|
||||
function buildIpRows(service: ServiceView): ServiceIpRow[] {
|
||||
const healthByIp = new Map(service.ip_health.map((row) => [row.ip, row]))
|
||||
const weights = Object.assign(
|
||||
{},
|
||||
...service.domains.map((domain) => domain.target_ip_weights ?? {}),
|
||||
) as Record<string, number>
|
||||
const priorities = Object.assign(
|
||||
{},
|
||||
...service.domains.map((domain) => domain.target_ip_priorities ?? {}),
|
||||
) as Record<string, number>
|
||||
const activeSet = new Set(service.active_ips)
|
||||
|
||||
return service.ips.map((ip) => {
|
||||
const health = healthByIp.get(ip)
|
||||
return {
|
||||
id: ip,
|
||||
ip,
|
||||
status: health?.status ?? 'unknown',
|
||||
enabled: service.ip_enabled[ip] !== false,
|
||||
active: activeSet.has(ip),
|
||||
weight: weights[ip] ?? 1,
|
||||
priority: priorities[ip] ?? 1,
|
||||
latency_ms: health?.latency_ms ?? null,
|
||||
last_checked_at: health?.last_checked_at ?? null,
|
||||
last_error: health?.last_error ?? null,
|
||||
colo: health?.colo ?? null,
|
||||
provider: health?.provider ?? null,
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function buildFqdnRows(service: ServiceView): ServiceFqdnRow[] {
|
||||
return service.domains.map((domain) => ({
|
||||
id: String(domain.binding_id),
|
||||
fqdn: domain.fqdn,
|
||||
zone_name: domain.zone_name,
|
||||
target_ips: domain.target_ips ?? [],
|
||||
binding_id: domain.binding_id,
|
||||
domain_id: domain.domain_id,
|
||||
}))
|
||||
}
|
||||
|
||||
function buildNodeRows(
|
||||
nodes: Array<{
|
||||
id: number
|
||||
address: string
|
||||
protocol: string
|
||||
port: number | null
|
||||
health_status: string
|
||||
weight: number
|
||||
priority: number
|
||||
}>,
|
||||
): ServiceNodeRow[] {
|
||||
return nodes.map((node) => ({
|
||||
id: String(node.id),
|
||||
nodeId: node.id,
|
||||
address: node.address,
|
||||
protocol: node.protocol,
|
||||
port: node.port,
|
||||
health_status: mapNodeHealth(node.health_status),
|
||||
weight: node.weight,
|
||||
priority: node.priority,
|
||||
}))
|
||||
}
|
||||
|
||||
function NameCell({
|
||||
icon,
|
||||
label,
|
||||
iconClassName,
|
||||
}: {
|
||||
icon: ReactNode
|
||||
label: string
|
||||
iconClassName?: string
|
||||
}) {
|
||||
return (
|
||||
<div className="flex min-w-0 items-center gap-2">
|
||||
<IconTile
|
||||
variant="elevated"
|
||||
size="xs"
|
||||
className={iconClassName ?? 'text-muted-foreground'}
|
||||
aria-hidden="true"
|
||||
>
|
||||
{icon}
|
||||
</IconTile>
|
||||
<span className="truncate font-mono text-sm">{label}</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
interface ServiceDetailGridProps {
|
||||
service: ServiceView
|
||||
nodes: Array<{
|
||||
id: number
|
||||
address: string
|
||||
protocol: string
|
||||
port: number | null
|
||||
health_status: string
|
||||
weight: number
|
||||
priority: number
|
||||
}>
|
||||
togglingIp: string | null
|
||||
onToggleIp: (ip: string, enabled: boolean) => void
|
||||
onChangeIp: (row: ServiceFqdnRow) => void
|
||||
onChangeDomain: () => void
|
||||
onAddNode: () => void
|
||||
onDeleteNode: (nodeId: number) => void
|
||||
isLoading?: boolean
|
||||
}
|
||||
|
||||
export function ServiceDetailGrid({
|
||||
service,
|
||||
nodes,
|
||||
togglingIp,
|
||||
onToggleIp,
|
||||
onChangeIp,
|
||||
onChangeDomain,
|
||||
onAddNode,
|
||||
onDeleteNode,
|
||||
isLoading = false,
|
||||
}: ServiceDetailGridProps) {
|
||||
const [tab, setTab] = useState<(typeof TABS)[number]['id']>('ip')
|
||||
const [ipFilters, setIpFilters] = useState<Filter[]>(() => [
|
||||
createFilter('ip', 'contains', ['']),
|
||||
createFilter('status', 'is', ['']),
|
||||
])
|
||||
const [fqdnFilters, setFqdnFilters] = useState<Filter[]>(() => [
|
||||
createFilter('fqdn', 'contains', ['']),
|
||||
])
|
||||
const [nodeFilters, setNodeFilters] = useState<Filter[]>(() => [
|
||||
createFilter('address', 'contains', ['']),
|
||||
createFilter('health_status', 'is', ['']),
|
||||
])
|
||||
|
||||
const ipRows = useMemo(() => buildIpRows(service), [service])
|
||||
const fqdnRows = useMemo(() => buildFqdnRows(service), [service])
|
||||
const nodeRows = useMemo(() => buildNodeRows(nodes), [nodes])
|
||||
const markActive = service.lb_mode === 'failover' || service.lb_mode === 'weighted'
|
||||
|
||||
const tabs = TABS.map((entry) => ({
|
||||
...entry,
|
||||
count:
|
||||
entry.id === 'ip'
|
||||
? ipRows.length
|
||||
: entry.id === 'fqdn'
|
||||
? fqdnRows.length
|
||||
: nodeRows.length,
|
||||
}))
|
||||
|
||||
const ipFilterFields = useMemo<FilterFieldConfig[]>(
|
||||
() => [
|
||||
{
|
||||
key: 'ip',
|
||||
label: 'IP',
|
||||
icon: <SearchIcon className="size-3.5" aria-hidden />,
|
||||
type: 'text',
|
||||
className: 'w-52',
|
||||
placeholder: 'Поиск по IP…',
|
||||
},
|
||||
{
|
||||
key: 'status',
|
||||
label: 'Статус',
|
||||
type: 'select',
|
||||
searchable: true,
|
||||
className: 'w-[168px]',
|
||||
options: HEALTH_OPTIONS,
|
||||
},
|
||||
],
|
||||
[],
|
||||
)
|
||||
|
||||
const fqdnFilterFields = useMemo<FilterFieldConfig[]>(
|
||||
() => [
|
||||
{
|
||||
key: 'fqdn',
|
||||
label: 'FQDN',
|
||||
icon: <SearchIcon className="size-3.5" aria-hidden />,
|
||||
type: 'text',
|
||||
className: 'w-52',
|
||||
placeholder: 'Поиск по FQDN…',
|
||||
},
|
||||
],
|
||||
[],
|
||||
)
|
||||
|
||||
const nodeFilterFields = useMemo<FilterFieldConfig[]>(
|
||||
() => [
|
||||
{
|
||||
key: 'address',
|
||||
label: 'Адрес',
|
||||
icon: <SearchIcon className="size-3.5" aria-hidden />,
|
||||
type: 'text',
|
||||
className: 'w-52',
|
||||
placeholder: 'Поиск по адресу…',
|
||||
},
|
||||
{
|
||||
key: 'health_status',
|
||||
label: 'Статус',
|
||||
type: 'select',
|
||||
searchable: true,
|
||||
className: 'w-[168px]',
|
||||
options: HEALTH_OPTIONS,
|
||||
},
|
||||
],
|
||||
[],
|
||||
)
|
||||
|
||||
const ipColumns = useMemo<ColumnDef<ServiceIpRow>[]>(
|
||||
() => [
|
||||
{
|
||||
id: 'ip',
|
||||
accessorKey: 'ip',
|
||||
header: ({ column }) => (
|
||||
<DataGridColumnHeader column={column} title="IP" />
|
||||
),
|
||||
cell: ({ row }) => (
|
||||
<NameCell
|
||||
icon={<NetworkIcon />}
|
||||
label={row.original.ip}
|
||||
iconClassName="text-info"
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: 'status',
|
||||
accessorKey: 'status',
|
||||
header: 'Health',
|
||||
cell: ({ row }) => (
|
||||
<HealthCheckBadge
|
||||
status={row.original.status}
|
||||
latencyMs={row.original.latency_ms}
|
||||
lastCheckedAt={row.original.last_checked_at}
|
||||
lastError={row.original.last_error}
|
||||
colo={row.original.colo}
|
||||
provider={row.original.provider}
|
||||
size="xs"
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: 'active',
|
||||
header: 'Пул',
|
||||
cell: ({ row }) =>
|
||||
markActive && row.original.active ? (
|
||||
<StatusBadge status="active" />
|
||||
) : (
|
||||
<span className="text-muted-foreground">—</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: 'weight',
|
||||
accessorKey: 'weight',
|
||||
header: ({ column }) => (
|
||||
<DataGridColumnHeader column={column} title="Вес" />
|
||||
),
|
||||
cell: ({ row }) => (
|
||||
<span className="tabular-nums">
|
||||
{service.lb_mode === 'weighted' ? `w${row.original.weight}` : row.original.weight}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: 'priority',
|
||||
accessorKey: 'priority',
|
||||
header: ({ column }) => (
|
||||
<DataGridColumnHeader column={column} title="Приоритет" />
|
||||
),
|
||||
cell: ({ row }) => (
|
||||
<span className="tabular-nums">{row.original.priority}</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: 'enabled',
|
||||
header: 'Вкл',
|
||||
cell: ({ row }) => (
|
||||
<Switch
|
||||
size="sm"
|
||||
checked={row.original.enabled}
|
||||
disabled={togglingIp === row.original.ip}
|
||||
onCheckedChange={(checked) =>
|
||||
onToggleIp(row.original.ip, Boolean(checked))
|
||||
}
|
||||
aria-label={
|
||||
row.original.enabled
|
||||
? `Выключить IP ${row.original.ip}`
|
||||
: `Включить IP ${row.original.ip}`
|
||||
}
|
||||
/>
|
||||
),
|
||||
},
|
||||
],
|
||||
[markActive, onToggleIp, service.lb_mode, togglingIp],
|
||||
)
|
||||
|
||||
const fqdnColumns = useMemo<ColumnDef<ServiceFqdnRow>[]>(
|
||||
() => [
|
||||
{
|
||||
id: 'fqdn',
|
||||
accessorKey: 'fqdn',
|
||||
header: ({ column }) => (
|
||||
<DataGridColumnHeader column={column} title="FQDN" />
|
||||
),
|
||||
cell: ({ row }) => (
|
||||
<NameCell
|
||||
icon={<GlobeIcon />}
|
||||
label={row.original.fqdn}
|
||||
iconClassName="text-foreground"
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: 'zone',
|
||||
accessorKey: 'zone_name',
|
||||
header: 'Зона',
|
||||
},
|
||||
{
|
||||
id: 'ips',
|
||||
header: 'Target IP',
|
||||
cell: ({ row }) => (
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-muted-foreground font-mono text-xs">
|
||||
{row.original.target_ips.join(', ') || '—'}
|
||||
</span>
|
||||
<Badge variant="outline" size="xs">
|
||||
{row.original.target_ips.length} IP
|
||||
</Badge>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: 'actions',
|
||||
header: '',
|
||||
cell: ({ row }) => (
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={() => onChangeIp(row.original)}
|
||||
>
|
||||
Сменить IP
|
||||
</Button>
|
||||
),
|
||||
},
|
||||
],
|
||||
[onChangeIp],
|
||||
)
|
||||
|
||||
const nodeColumns = useMemo<ColumnDef<ServiceNodeRow>[]>(
|
||||
() => [
|
||||
{
|
||||
id: 'address',
|
||||
accessorKey: 'address',
|
||||
header: ({ column }) => (
|
||||
<DataGridColumnHeader column={column} title="Адрес" />
|
||||
),
|
||||
cell: ({ row }) => (
|
||||
<NameCell
|
||||
icon={<ServerIcon />}
|
||||
label={row.original.address}
|
||||
iconClassName="text-foreground"
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: 'health',
|
||||
accessorKey: 'health_status',
|
||||
header: 'Health',
|
||||
cell: ({ row }) => (
|
||||
<HealthCheckBadge status={row.original.health_status} size="xs" />
|
||||
),
|
||||
},
|
||||
{
|
||||
id: 'meta',
|
||||
header: 'Вес / приоритет',
|
||||
cell: ({ row }) => (
|
||||
<span className="text-muted-foreground text-xs tabular-nums">
|
||||
{row.original.protocol}
|
||||
{row.original.port ? `:${row.original.port}` : ''} · w
|
||||
{row.original.weight} · p{row.original.priority}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: 'actions',
|
||||
header: '',
|
||||
cell: ({ row }) => (
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={() => onDeleteNode(row.original.nodeId)}
|
||||
>
|
||||
Удалить
|
||||
</Button>
|
||||
),
|
||||
},
|
||||
],
|
||||
[onDeleteNode],
|
||||
)
|
||||
|
||||
const sharedTabs = {
|
||||
tabs,
|
||||
activeTab: tab,
|
||||
onTabChange: (id: string) => setTab(id as typeof tab),
|
||||
}
|
||||
|
||||
if (tab === 'fqdn') {
|
||||
return (
|
||||
<ResourcePage
|
||||
title="Активы сервиса"
|
||||
description="IP, FQDN и ноды этого сервиса"
|
||||
{...sharedTabs}
|
||||
filterFields={fqdnFilterFields}
|
||||
filters={fqdnFilters}
|
||||
onFiltersChange={setFqdnFilters}
|
||||
onClearFilters={() => setFqdnFilters([createFilter('fqdn', 'contains', [''])])}
|
||||
getFilterFieldValue={(item, field) =>
|
||||
field === 'fqdn' ? `${item.fqdn} ${item.zone_name}` : ''
|
||||
}
|
||||
columns={fqdnColumns}
|
||||
data={fqdnRows}
|
||||
getRowId={(row) => row.id}
|
||||
isLoading={isLoading}
|
||||
primaryAction={
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={onChangeDomain}
|
||||
disabled={fqdnRows.length === 0}
|
||||
>
|
||||
Сменить домен
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
if (tab === 'nodes') {
|
||||
return (
|
||||
<ResourcePage
|
||||
title="Активы сервиса"
|
||||
description="IP, FQDN и ноды этого сервиса"
|
||||
{...sharedTabs}
|
||||
filterFields={nodeFilterFields}
|
||||
filters={nodeFilters}
|
||||
onFiltersChange={setNodeFilters}
|
||||
onClearFilters={() =>
|
||||
setNodeFilters([
|
||||
createFilter('address', 'contains', ['']),
|
||||
createFilter('health_status', 'is', ['']),
|
||||
])
|
||||
}
|
||||
getFilterFieldValue={(item, field) => {
|
||||
if (field === 'address') return item.address
|
||||
if (field === 'health_status') return item.health_status
|
||||
return ''
|
||||
}}
|
||||
columns={nodeColumns}
|
||||
data={nodeRows}
|
||||
getRowId={(row) => row.id}
|
||||
isLoading={isLoading}
|
||||
primaryAction={
|
||||
<Button size="sm" onClick={onAddNode}>
|
||||
<PlusIcon className="size-4" aria-hidden />
|
||||
Добавить ноду
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<ResourcePage
|
||||
title="Активы сервиса"
|
||||
description="IP, FQDN и ноды этого сервиса"
|
||||
{...sharedTabs}
|
||||
filterFields={ipFilterFields}
|
||||
filters={ipFilters}
|
||||
onFiltersChange={setIpFilters}
|
||||
onClearFilters={() =>
|
||||
setIpFilters([
|
||||
createFilter('ip', 'contains', ['']),
|
||||
createFilter('status', 'is', ['']),
|
||||
])
|
||||
}
|
||||
getFilterFieldValue={(item, field) => {
|
||||
if (field === 'ip') return item.ip
|
||||
if (field === 'status') return item.status
|
||||
return ''
|
||||
}}
|
||||
columns={ipColumns}
|
||||
data={ipRows}
|
||||
getRowId={(row) => row.id}
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
)
|
||||
}
|
||||
@@ -75,7 +75,7 @@ const LB_MODE_META: Record<
|
||||
},
|
||||
}
|
||||
|
||||
function LbModeTile({ mode }: { mode: LbMode }) {
|
||||
export function LbModeTile({ mode }: { mode: LbMode }) {
|
||||
const meta = LB_MODE_META[mode]
|
||||
const Icon = meta.icon
|
||||
|
||||
|
||||
Reference in New Issue
Block a user