fix(web): parse string readiness checks on monitoring System tab

Исправляет ложные «Ошибки проверок»: GET /v1/ready отдаёт строки ok/memory, а не boolean. Уплотнён ReUI Frame/donut layout на вкладке Система. Co-authored-by: Cursor <cursoragent@cursor.com>
feat(directories): edit communities and DoH via row actions menu
2026-08-12 13:41:58 +07:00 · 2026-08-12 12:42:01 +07:00 · 2026-08-12 12:24:10 +07:00
16 changed files with 771 additions and 88 deletions
@@ -40,7 +40,7 @@ export function ChartDonutMetric({
  }

  return (
-    <div className={cn('flex items-center gap-6', className)}>
+    <div className={cn('flex flex-col items-center justify-start gap-4 sm:flex-row sm:gap-6', className)}>
      <ChartContainer config={chartConfig} className="mx-0 aspect-square h-44 w-44 shrink-0">
        <PieChart>
          <Pie
@@ -75,7 +75,7 @@ export function ChartDonutMetric({
        </PieChart>
      </ChartContainer>

-      <ul className="min-w-0 flex-1 space-y-3">
+      <ul className="flex w-full min-w-0 max-w-xs flex-col gap-3 sm:w-auto sm:min-w-[10rem]">
        {slices.map((slice) => {
          const pct = total > 0 ? ((slice.count / total) * 100).toFixed(1) : '0'
          return (
@@ -0,0 +1,111 @@
+import { useEffect, useState } from 'react'
+import { toast } from 'sonner'
+
+import { Button } from '@evobgp/ui/components/button'
+import { Input } from '@evobgp/ui/components/input'
+import { Label } from '@evobgp/ui/components/label'
+
+import { FormDrawer } from '@/components/form-drawer'
+import { LoadingButton } from '@/components/loading-button'
+import {
+  useCreateCommunityMutation,
+  useUpdateCommunityMutation,
+} from '@/queries/directories'
+import type { BgpCommunity, BgpCommunityCreate, BgpCommunityPatch } from '@/types/api'
+
+interface CommunityFormDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  editTarget?: BgpCommunity | null
+}
+
+/** @see https://reui.io/preview/base/form-7 */
+export function CommunityFormDialog({
+  open,
+  onOpenChange,
+  editTarget = null,
+}: CommunityFormDialogProps) {
+  const createMutation = useCreateCommunityMutation()
+  const updateMutation = useUpdateCommunityMutation()
+  const saving = createMutation.isPending || updateMutation.isPending
+  const [community, setCommunity] = useState('')
+  const [title, setTitle] = useState('')
+
+  useEffect(() => {
+    if (!open) return
+    if (editTarget) {
+      setCommunity(editTarget.community ?? '')
+      setTitle(editTarget.title ?? '')
+    } else {
+      setCommunity('')
+      setTitle('')
+    }
+  }, [editTarget, open])
+
+  async function save() {
+    const value = community.trim()
+    if (!value) {
+      toast.error('Укажите community')
+      return
+    }
+    const titleTrimmed = title.trim()
+    try {
+      if (editTarget) {
+        const body: BgpCommunityPatch = {
+          community: value,
+          title: titleTrimmed || '',
+        }
+        await updateMutation.mutateAsync({ id: editTarget.id, body })
+      } else {
+        const body: BgpCommunityCreate = { community: value }
+        if (titleTrimmed) body.title = titleTrimmed
+        await createMutation.mutateAsync(body)
+      }
+      onOpenChange(false)
+    } catch {
+      // toast in mutation
+    }
+  }
+
+  return (
+    <FormDrawer
+      open={open}
+      onOpenChange={onOpenChange}
+      title={editTarget ? 'Редактировать сообщество' : 'Новое сообщество BGP'}
+      description="Тег для префиксов в фильтрах BIRD"
+      className="sm:max-w-sm"
+      footer={
+        <>
+          <Button variant="outline" type="button" onClick={() => onOpenChange(false)}>
+            Отмена
+          </Button>
+          <LoadingButton type="button" loading={saving} onClick={() => void save()}>
+            {editTarget ? 'Сохранить' : 'Создать'}
+          </LoadingButton>
+        </>
+      }
+    >
+      <div className="flex flex-col gap-2">
+        <Label htmlFor="comm-value">Community</Label>
+        <Input
+          id="comm-value"
+          placeholder="65000:100"
+          value={community}
+          onChange={(e) => setCommunity(e.target.value)}
+        />
+      </div>
+      <div className="flex flex-col gap-2">
+        <Label htmlFor="comm-title">Название (опционально)</Label>
+        <Input
+          id="comm-title"
+          placeholder="Отображаемое имя"
+          value={title}
+          onChange={(e) => setTitle(e.target.value)}
+        />
+      </div>
+    </FormDrawer>
+  )
+}
+
+/** @deprecated Use CommunityFormDialog */
+export const CommunityCreateDialog = CommunityFormDialog
@@ -4,6 +4,7 @@ import { useMemo } from 'react'
 import { CategoryBadge } from '@/components/category-badge'
 import { DataGridPrimaryCell } from '@/components/data-grid-cell'
 import { DataGridSection } from '@/components/data-grid-shell'
+import { DirectoriesRowActions } from '@/components/directories/directories-row-actions'
 import { DataGridColumnHeader } from '@/components/reui/data-grid/data-grid-column-header'
 import { useClientDataGrid } from '@/hooks/use-client-data-grid'
 import type { BgpCommunity } from '@/types/api'
@@ -11,12 +12,16 @@ import type { BgpCommunity } from '@/types/api'
 export function DirectoriesCommunitiesGrid({
  items,
  isLoading = false,
+  canWrite = false,
+  onEdit,
 }: {
  items: BgpCommunity[]
  isLoading?: boolean
+  canWrite?: boolean
+  onEdit?: (row: BgpCommunity) => void
 }) {
-  const columns = useMemo<ColumnDef<BgpCommunity>[]>(
-    () => [
+  const columns = useMemo<ColumnDef<BgpCommunity>[]>(() => {
+    const cols: ColumnDef<BgpCommunity>[] = [
      {
        accessorKey: 'title',
        header: ({ column }) => <DataGridColumnHeader column={column} title="Название" />,
@@ -38,9 +43,23 @@ export function DirectoriesCommunitiesGrid({
        cell: () => <CategoryBadge>community</CategoryBadge>,
        meta: { headerTitle: 'Тип' },
      },
-    ],
-    [],
-  )
+    ]
+
+    if (canWrite && onEdit) {
+      cols.push({
+        id: 'actions',
+        enableSorting: false,
+        enableHiding: false,
+        header: () => <span className="sr-only">Действия</span>,
+        cell: ({ row }) => (
+          <DirectoriesRowActions onEdit={() => onEdit(row.original)} />
+        ),
+        meta: { headerTitle: 'Действия' },
+      })
+    }
+
+    return cols
+  }, [canWrite, onEdit])

  const { table, globalFilter, setGlobalFilter, filteredCount } = useClientDataGrid({
    data: items,
@@ -4,6 +4,7 @@ import { useMemo } from 'react'
 import { CategoryBadge } from '@/components/category-badge'
 import { DataGridPrimaryCell } from '@/components/data-grid-cell'
 import { DataGridSection } from '@/components/data-grid-shell'
+import { DirectoriesRowActions } from '@/components/directories/directories-row-actions'
 import { DataGridColumnHeader } from '@/components/reui/data-grid/data-grid-column-header'
 import { useClientDataGrid } from '@/hooks/use-client-data-grid'
 import type { DohProfile } from '@/types/api'
@@ -11,12 +12,16 @@ import type { DohProfile } from '@/types/api'
 export function DirectoriesDohGrid({
  items,
  isLoading = false,
+  canWrite = false,
+  onEdit,
 }: {
  items: DohProfile[]
  isLoading?: boolean
+  canWrite?: boolean
+  onEdit?: (row: DohProfile) => void
 }) {
-  const columns = useMemo<ColumnDef<DohProfile>[]>(
-    () => [
+  const columns = useMemo<ColumnDef<DohProfile>[]>(() => {
+    const cols: ColumnDef<DohProfile>[] = [
      {
        id: 'name',
        accessorFn: (row) => row.name ?? row.url,
@@ -43,9 +48,23 @@ export function DirectoriesDohGrid({
        cell: () => <CategoryBadge>—</CategoryBadge>,
        meta: { headerTitle: 'По умолчанию' },
      },
-    ],
-    [],
-  )
+    ]
+
+    if (canWrite && onEdit) {
+      cols.push({
+        id: 'actions',
+        enableSorting: false,
+        enableHiding: false,
+        header: () => <span className="sr-only">Действия</span>,
+        cell: ({ row }) => (
+          <DirectoriesRowActions onEdit={() => onEdit(row.original)} />
+        ),
+        meta: { headerTitle: 'Действия' },
+      })
+    }
+
+    return cols
+  }, [canWrite, onEdit])

  const { table, globalFilter, setGlobalFilter, filteredCount } = useClientDataGrid({
    data: items,
@@ -0,0 +1,36 @@
+import { MoreHorizontalIcon, PencilIcon } from 'lucide-react'
+
+import { Button } from '@evobgp/ui/components/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@evobgp/ui/components/dropdown-menu'
+
+/**
+ * Data-grid row actions — ⋯ menu (ReUI / shadcn DropdownMenu).
+ * @see https://reui.io/preview/base/components/c-dropdown-menu-12
+ * @see https://reui.io/docs/components/base/dropdown-menu
+ */
+export function DirectoriesRowActions({ onEdit }: { onEdit: () => void }) {
+  return (
+    <div className="flex justify-end">
+      <DropdownMenu modal={false}>
+        <DropdownMenuTrigger
+          render={
+            <Button type="button" variant="ghost" size="icon-sm" aria-label="Действия">
+              <MoreHorizontalIcon className="size-4" aria-hidden />
+            </Button>
+          }
+        />
+        <DropdownMenuContent align="end" className="min-w-40">
+          <DropdownMenuItem onClick={onEdit}>
+            <PencilIcon aria-hidden />
+            Редактировать
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  )
+}
@@ -0,0 +1,154 @@
+import { useEffect, useState } from 'react'
+import { toast } from 'sonner'
+
+import { Button } from '@evobgp/ui/components/button'
+import { Input } from '@evobgp/ui/components/input'
+import { Label } from '@evobgp/ui/components/label'
+
+import { FormDrawer } from '@/components/form-drawer'
+import { LoadingButton } from '@/components/loading-button'
+import {
+  useCreateDohProfileMutation,
+  useUpdateDohProfileMutation,
+} from '@/queries/directories'
+import type { DohProfile, DohProfileCreate, DohProfilePatch } from '@/types/api'
+
+interface DohProfileFormDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  editTarget?: DohProfile | null
+}
+
+/** @see https://reui.io/preview/base/form-7 */
+export function DohProfileFormDialog({
+  open,
+  onOpenChange,
+  editTarget = null,
+}: DohProfileFormDialogProps) {
+  const createMutation = useCreateDohProfileMutation()
+  const updateMutation = useUpdateDohProfileMutation()
+  const saving = createMutation.isPending || updateMutation.isPending
+  const [name, setName] = useState('')
+  const [url, setUrl] = useState('')
+  const [timeoutMs, setTimeoutMs] = useState('')
+
+  useEffect(() => {
+    if (!open) return
+    if (editTarget) {
+      setName(editTarget.name ?? '')
+      setUrl(editTarget.url ?? '')
+      setTimeoutMs(
+        editTarget.timeout_ms === null || editTarget.timeout_ms === undefined
+          ? ''
+          : String(editTarget.timeout_ms),
+      )
+    } else {
+      setName('')
+      setUrl('')
+      setTimeoutMs('')
+    }
+  }, [editTarget, open])
+
+  async function save() {
+    const trimmedUrl = url.trim()
+    if (!trimmedUrl) {
+      toast.error('Укажите URL DoH')
+      return
+    }
+    let urlOk = true
+    try {
+      new URL(trimmedUrl)
+    } catch {
+      urlOk = false
+    }
+    if (!urlOk) {
+      toast.error('Некорректный URL')
+      return
+    }
+
+    let timeout: number | null = null
+    if (timeoutMs.trim() !== '') {
+      const ms = Number(timeoutMs)
+      if (!Number.isFinite(ms) || !Number.isInteger(ms) || ms <= 0) {
+        toast.error('Timeout должен быть целым числом > 0')
+        return
+      }
+      timeout = ms
+    }
+
+    const nameTrimmed = name.trim()
+
+    try {
+      if (editTarget) {
+        const body: DohProfilePatch = {
+          url: trimmedUrl,
+          name: nameTrimmed || undefined,
+          timeout_ms: timeout,
+        }
+        await updateMutation.mutateAsync({ id: editTarget.id, body })
+      } else {
+        const body: DohProfileCreate = { url: trimmedUrl }
+        if (nameTrimmed) body.name = nameTrimmed
+        if (timeout !== null) body.timeout_ms = timeout
+        await createMutation.mutateAsync(body)
+      }
+      onOpenChange(false)
+    } catch {
+      // toast in mutation
+    }
+  }
+
+  return (
+    <FormDrawer
+      open={open}
+      onOpenChange={onOpenChange}
+      title={editTarget ? 'Редактировать DoH-профиль' : 'Новый DoH-профиль'}
+      description="Резолвер DNS-over-HTTPS для доменных модулей"
+      className="sm:max-w-sm"
+      footer={
+        <>
+          <Button variant="outline" type="button" onClick={() => onOpenChange(false)}>
+            Отмена
+          </Button>
+          <LoadingButton type="button" loading={saving} onClick={() => void save()}>
+            {editTarget ? 'Сохранить' : 'Создать'}
+          </LoadingButton>
+        </>
+      }
+    >
+      <div className="flex flex-col gap-2">
+        <Label htmlFor="doh-name">Имя (опционально)</Label>
+        <Input
+          id="doh-name"
+          placeholder="Control D / AdGuard"
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+        />
+      </div>
+      <div className="flex flex-col gap-2">
+        <Label htmlFor="doh-url">URL</Label>
+        <Input
+          id="doh-url"
+          type="url"
+          placeholder="https://dns.example/dns-query"
+          value={url}
+          onChange={(e) => setUrl(e.target.value)}
+        />
+      </div>
+      <div className="flex flex-col gap-2">
+        <Label htmlFor="doh-timeout">Timeout, мс (опционально)</Label>
+        <Input
+          id="doh-timeout"
+          type="number"
+          min={1}
+          placeholder="5000"
+          value={timeoutMs}
+          onChange={(e) => setTimeoutMs(e.target.value)}
+        />
+      </div>
+    </FormDrawer>
+  )
+}
+
+/** @deprecated Use DohProfileFormDialog */
+export const DohProfileCreateDialog = DohProfileFormDialog
@@ -7,12 +7,20 @@ import { DataGridSection } from '@/components/data-grid-shell'
 import { StatusBadge } from '@/components/status-badge'
 import { DataGridColumnHeader } from '@/components/reui/data-grid/data-grid-column-header'
 import { useClientDataGrid } from '@/hooks/use-client-data-grid'
-import { jobStatusRu, readyCheckRu } from '@/lib/ui-labels'
+import {
+  isReadyCheckOk,
+  isSystemReady,
+  readyCheckStatusLabel,
+} from '@/lib/metrics'
+import { readyCheckRu } from '@/lib/ui-labels'
 import type { ReadyStatus } from '@/queries/monitoring'
+import { Item, ItemMedia } from '@evobgp/ui/components/item'
+import { cn } from '@evobgp/ui/lib/utils'

 const READY_CHECK_ICONS: Record<string, typeof Database> = {
  postgres: Database,
  store: HardDrive,
+  store_backend: HardDrive,
  jobs: ListTodo,
 }

@@ -21,6 +29,7 @@ interface ReadyCheckRow {
  label: string
  subtitle?: string
  icon: typeof Database
+  iconClassName?: string
  status: string
  statusLabel: string
 }
@@ -34,12 +43,14 @@ export function MonitoringReadyGrid({
 }) {
  const data = useMemo<ReadyCheckRow[]>(() => {
    const checks = ready.checks ?? {}
+    const systemReady = isSystemReady(ready.status)
    const rows: ReadyCheckRow[] = [
      {
        id: 'liveness',
        label: 'Живучесть',
        subtitle: '/v1/health',
        icon: HeartPulse,
+        iconClassName: health?.ok ? 'text-success' : 'text-destructive',
        status: health?.ok ? 'ok' : 'error',
        statusLabel: health?.ok ? 'В норме' : 'Ошибка',
      },
@@ -48,19 +59,21 @@ export function MonitoringReadyGrid({
        label: 'Готовность',
        subtitle: '/v1/ready',
        icon: ShieldCheck,
-        status: ready.status === 'ok' ? 'ok' : 'warning',
-        statusLabel: ready.status === 'ok' ? 'Готов' : jobStatusRu(ready.status ?? 'pending'),
+        iconClassName: systemReady ? 'text-success' : 'text-warning',
+        status: systemReady ? 'ok' : 'warning',
+        statusLabel: systemReady ? 'Готов' : 'Не готов',
      },
    ]
    for (const key of Object.keys(checks)) {
      const value = checks[key]
-      const ok = typeof value === 'boolean' ? value : value?.ok !== false
+      const ok = isReadyCheckOk(value)
      rows.push({
        id: key,
        label: readyCheckRu(key),
        icon: READY_CHECK_ICONS[key] ?? ListTodo,
+        iconClassName: ok ? 'text-success' : 'text-destructive',
        status: ok ? 'ok' : 'error',
-        statusLabel: ok ? 'В норме' : 'Ошибка',
+        statusLabel: readyCheckStatusLabel(value, ok),
      })
    }
    return rows
@@ -74,8 +87,17 @@ export function MonitoringReadyGrid({
        cell: ({ row }) => {
          const Icon = row.original.icon
          return (
-            <div className="flex items-center gap-2">
-              <Icon className="size-4 shrink-0 text-muted-foreground" />
+            <div className="flex min-w-0 items-center gap-2.5 py-0.5">
+              <Item
+                className={cn(
+                  'border-background bg-muted flex size-8 shrink-0 items-center justify-center border-2 p-0 shadow-[0_1px_3px_0_rgba(0,0,0,0.14)] dark:border [&_svg]:size-3.5',
+                  row.original.iconClassName,
+                )}
+              >
+                <ItemMedia variant="icon" className="size-auto">
+                  <Icon />
+                </ItemMedia>
+              </Item>
              <DataGridPrimaryCell
                title={row.original.label}
                subtitle={row.original.subtitle}
@@ -90,7 +112,9 @@ export function MonitoringReadyGrid({
        enableSorting: false,
        header: 'Статус',
        cell: ({ row }) => (
-          <StatusBadge status={row.original.status} label={row.original.statusLabel} />
+          <div className="flex justify-start">
+            <StatusBadge status={row.original.status} label={row.original.statusLabel} />
+          </div>
        ),
        meta: { headerTitle: 'Статус' },
      },
@@ -8,7 +8,7 @@ import {
 } from '@evobgp/ui/components/chart'
 import type { BreakdownSlice } from '@/lib/metrics'

-/** chart-27 / chart-13 inspired donut in PanelCard. */
+/** chart-27 / chart-13 inspired donut in PanelCard (Frame surface). */
 export function DonutBreakdownCard({
  title,
  description,
@@ -30,13 +30,24 @@ export function DonutBreakdownCard({
  const data = slices.map((slice) => ({ ...slice, fill: slice.color, share: slice.count }))

  return (
-    <PanelCard title={title} description={description} className="h-full">
-      <div className="flex flex-col gap-4 p-4 sm:flex-row sm:items-center">
+    <PanelCard
+      title={title}
+      description={description}
+      className="h-full"
+      actions={
+        badge ? (
+          <Badge variant="success-light" className="hidden sm:inline-flex">
+            {badge}
+          </Badge>
+        ) : undefined
+      }
+    >
+      <div className="flex flex-col items-center justify-start gap-4 p-4 sm:flex-row sm:items-center sm:justify-start sm:gap-6">
        {total === 0 ? (
          <p className="text-muted-foreground w-full py-8 text-center text-sm">Нет данных</p>
        ) : (
          <>
-            <div className="relative mx-auto size-36 shrink-0">
+            <div className="relative mx-auto size-36 shrink-0 sm:mx-0">
              <ChartContainer config={chartConfig} className="aspect-square size-36">
                <PieChart>
                  <Pie
@@ -59,11 +70,11 @@ export function DonutBreakdownCard({
                <span className="text-lg font-semibold tabular-nums">{total}</span>
              </div>
            </div>
-            <ul className="min-w-0 flex-1 space-y-2">
+            <ul className="flex w-full min-w-0 max-w-xs flex-col gap-2 sm:w-auto sm:min-w-[10rem]">
              {slices.map((slice) => {
                const pct = total > 0 ? ((slice.count / total) * 100).toFixed(1) : '0'
                return (
-                  <li key={slice.key} className="flex items-center justify-between gap-2 text-sm">
+                  <li key={slice.key} className="flex items-center justify-between gap-3 text-sm">
                    <span className="flex min-w-0 items-center gap-2">
                      <span
                        className="size-2.5 shrink-0 rounded-full"
@@ -81,11 +92,6 @@ export function DonutBreakdownCard({
            </ul>
          </>
        )}
-        {badge ? (
-          <Badge variant="success-light" className="absolute top-4 right-4 hidden sm:flex">
-            {badge}
-          </Badge>
-        ) : null}
      </div>
    </PanelCard>
  )
@@ -308,6 +308,31 @@ export function sessionCanWriteModules(session: {
  return role === 'editor' || role === 'operator'
 }

+/**
+ * Whether session may create/update directories (`bgp:directories:write`).
+ * Mirrors backend `requirePerm` for JWT (is_admin / permissions) and API-key editor+.
+ */
+export function sessionCanWriteDirectories(session: {
+  role?: string
+  kind?: string
+  is_admin?: boolean
+  permissions?: readonly string[]
+} | null | undefined): boolean {
+  if (!session) return false
+  const jwtPath =
+    session.kind === 'jwt' ||
+    session.is_admin === true ||
+    (session.permissions?.length ?? 0) > 0
+  if (jwtPath) {
+    return (
+      session.is_admin === true ||
+      hasPermission(session.permissions ?? [], 'bgp:directories:write')
+    )
+  }
+  const role = (session.role ?? '').toLowerCase()
+  return role === 'editor' || role === 'operator'
+}
+
 /** Nav path → minimum permission to show the item. Sync with app-shell NAV. */
 export function permissionForPath(pathname: string): string | null {
  if (pathname === '/' || pathname.startsWith('/dashboard')) {
@@ -0,0 +1,78 @@
+import { describe, expect, it } from 'vitest'
+
+import {
+  isReadyCheckOk,
+  isSystemReady,
+  readinessBreakdown,
+  readyCheckStatusLabel,
+} from '@/lib/metrics/readiness-breakdown'
+
+describe('isSystemReady', () => {
+  it('accepts ready and ok', () => {
+    expect(isSystemReady('ready')).toBe(true)
+    expect(isSystemReady('ok')).toBe(true)
+    expect(isSystemReady('READY')).toBe(true)
+  })
+
+  it('rejects not_ready and empty', () => {
+    expect(isSystemReady('not_ready')).toBe(false)
+    expect(isSystemReady(undefined)).toBe(false)
+    expect(isSystemReady('')).toBe(false)
+  })
+})
+
+describe('isReadyCheckOk', () => {
+  it('parses backend string checks as ok', () => {
+    expect(isReadyCheckOk('ok')).toBe(true)
+    expect(isReadyCheckOk('memory')).toBe(true)
+    expect(isReadyCheckOk('unavailable')).toBe(false)
+  })
+
+  it('parses boolean and object forms', () => {
+    expect(isReadyCheckOk(true)).toBe(true)
+    expect(isReadyCheckOk(false)).toBe(false)
+    expect(isReadyCheckOk({ ok: true })).toBe(true)
+    expect(isReadyCheckOk({ ok: false, error: 'down' })).toBe(false)
+  })
+})
+
+describe('readyCheckStatusLabel', () => {
+  it('labels memory and failures', () => {
+    expect(readyCheckStatusLabel('memory', true)).toBe('Memory')
+    expect(readyCheckStatusLabel('ok', true)).toBe('В норме')
+    expect(readyCheckStatusLabel('unavailable', false)).toBe('Недоступно')
+  })
+})
+
+describe('readinessBreakdown', () => {
+  it('counts healthy handleReady payload without false failures', () => {
+    const slices = readinessBreakdown(
+      {
+        status: 'ready',
+        checks: { store: 'ok', jobs: 'memory', postgres: 'ok' },
+      },
+      true,
+    )
+    expect(slices.find((s) => s.key === 'checks-fail')).toBeUndefined()
+    expect(slices.find((s) => s.key === 'checks-ok')?.count).toBe(3)
+    expect(slices.find((s) => s.key === 'health')?.count).toBe(1)
+  })
+
+  it('counts unavailable checks as failures', () => {
+    const slices = readinessBreakdown(
+      {
+        status: 'not_ready',
+        checks: { store: 'unavailable', jobs: 'memory' },
+      },
+      true,
+    )
+    expect(slices.find((s) => s.key === 'checks-fail')?.count).toBe(1)
+    expect(slices.find((s) => s.key === 'checks-ok')?.count).toBe(1)
+  })
+
+  it('returns API down slice when health fails', () => {
+    const slices = readinessBreakdown({ status: 'ready', checks: { store: 'ok' } }, false)
+    expect(slices).toHaveLength(1)
+    expect(slices[0]?.key).toBe('health-fail')
+  })
+})
@@ -2,12 +2,65 @@ import type { ReadyStatus } from '@/queries/monitoring'

 import type { BreakdownSlice } from './types'

-function checkOk(value: boolean | { ok?: boolean; error?: string } | undefined): boolean {
+/** Значение check из GET /v1/ready (строка, boolean или объект). */
+export type ReadyCheckValue = boolean | string | { ok?: boolean; error?: string } | null | undefined
+
+const OK_STRINGS = new Set(['ok', 'ready', 'memory', 'true', 'healthy', 'up'])
+const FAIL_STRINGS = new Set([
+  'unavailable',
+  'error',
+  'not_ready',
+  'failed',
+  'down',
+  'false',
+  'unhealthy',
+])
+
+/** Top-level status GET /v1/ready: API отдаёт `ready`, не `ok`. */
+export function isSystemReady(status: string | null | undefined): boolean {
+  if (!status) return false
+  const normalized = status.trim().toLowerCase()
+  return normalized === 'ready' || normalized === 'ok'
+}
+
+/**
+ * Интерпретация check value по контракту handleReady:
+ * store/postgres → "ok" | "unavailable"; jobs → "memory"; store_backend → "memory".
+ */
+export function isReadyCheckOk(value: ReadyCheckValue): boolean {
  if (typeof value === 'boolean') return value
+  if (typeof value === 'string') {
+    const normalized = value.trim().toLowerCase()
+    if (OK_STRINGS.has(normalized)) return true
+    if (FAIL_STRINGS.has(normalized)) return false
+    // неизвестная непустая строка — считать OK (информативный статус бэкенда)
+    return normalized.length > 0
+  }
  if (value && typeof value === 'object') return value.ok === true
  return false
 }

+/** Человекочитаемый статус check для UI. */
+export function readyCheckStatusLabel(value: ReadyCheckValue, ok: boolean): string {
+  if (!ok) {
+    if (typeof value === 'string' && value.trim()) {
+      const n = value.trim().toLowerCase()
+      if (n === 'unavailable') return 'Недоступно'
+      if (n === 'not_ready') return 'Не готов'
+      return value
+    }
+    if (value && typeof value === 'object' && value.error) return value.error
+    return 'Ошибка'
+  }
+  if (typeof value === 'string') {
+    const n = value.trim().toLowerCase()
+    if (n === 'memory') return 'Memory'
+    if (n === 'ok' || n === 'ready' || n === 'healthy' || n === 'true') return 'В норме'
+    if (n) return value
+  }
+  return 'В норме'
+}
+
 export function readinessBreakdown(
  ready: ReadyStatus | null | undefined,
  healthOk: boolean,
@@ -28,7 +81,7 @@ export function readinessBreakdown(
  let failCount = 0

  for (const value of Object.values(checks)) {
-    if (checkOk(value)) okCount += 1
+    if (isReadyCheckOk(value)) okCount += 1
    else failCount += 1
  }

@@ -61,9 +114,11 @@ export function readinessBreakdown(
  if (slices.length === 1 && okCount === 0 && failCount === 0) {
    slices.push({
      key: 'ready',
-      label: ready?.status === 'ok' ? 'Готов' : 'Ожидает готовности',
+      label: isSystemReady(ready?.status) ? 'Готов' : 'Не готов',
      count: 1,
-      color: 'var(--color-chart-4)',
+      color: isSystemReady(ready?.status)
+        ? 'var(--color-chart-1)'
+        : 'var(--color-warning)',
    })
  }

@@ -117,6 +117,8 @@ export function readyCheckRu(key: string): string {
      return 'Хранилище'
    case 'jobs':
      return 'Очередь задач'
+    case 'store_backend':
+      return 'Бэкенд хранилища'
    default:
      return key
  }
@@ -1,6 +1,17 @@
-import { queryOptions } from '@tanstack/react-query'
-import { apiJSON } from '@/lib/api-client'
-import type { CommunitiesResponse, DohProfilesResponse } from '@/types/api'
+import { queryOptions, useMutation, useQueryClient } from '@tanstack/react-query'
+import { toast } from 'sonner'
+
+import { apiJSON, apiMutate } from '@/lib/api-client'
+import type {
+  BgpCommunity,
+  BgpCommunityCreate,
+  BgpCommunityPatch,
+  CommunitiesResponse,
+  DohProfile,
+  DohProfileCreate,
+  DohProfilePatch,
+  DohProfilesResponse,
+} from '@/types/api'

 export const directoriesKeys = {
  all: ['directories'] as const,
@@ -23,3 +34,59 @@ export function directoriesDohQueryOptions() {
    staleTime: 30_000,
  })
 }
+
+export function useCreateCommunityMutation() {
+  const qc = useQueryClient()
+  return useMutation({
+    mutationFn: (body: BgpCommunityCreate) =>
+      apiMutate<BgpCommunity>('/v1/communities', 'POST', body, { idempotent: false }),
+    onSuccess: () => {
+      toast.success('Сообщество создано')
+      void qc.invalidateQueries({ queryKey: directoriesKeys.communities() })
+    },
+    onError: (e) =>
+      toast.error(e instanceof Error ? e.message : 'Не удалось создать сообщество'),
+  })
+}
+
+export function useUpdateCommunityMutation() {
+  const qc = useQueryClient()
+  return useMutation({
+    mutationFn: ({ id, body }: { id: string; body: BgpCommunityPatch }) =>
+      apiMutate<BgpCommunity>(`/v1/communities/${id}`, 'PATCH', body, { idempotent: false }),
+    onSuccess: () => {
+      toast.success('Сообщество обновлено')
+      void qc.invalidateQueries({ queryKey: directoriesKeys.communities() })
+    },
+    onError: (e) =>
+      toast.error(e instanceof Error ? e.message : 'Не удалось обновить сообщество'),
+  })
+}
+
+export function useCreateDohProfileMutation() {
+  const qc = useQueryClient()
+  return useMutation({
+    mutationFn: (body: DohProfileCreate) =>
+      apiMutate<DohProfile>('/v1/doh-profiles', 'POST', body, { idempotent: false }),
+    onSuccess: () => {
+      toast.success('DoH-профиль создан')
+      void qc.invalidateQueries({ queryKey: directoriesKeys.doh() })
+    },
+    onError: (e) =>
+      toast.error(e instanceof Error ? e.message : 'Не удалось создать DoH-профиль'),
+  })
+}
+
+export function useUpdateDohProfileMutation() {
+  const qc = useQueryClient()
+  return useMutation({
+    mutationFn: ({ id, body }: { id: string; body: DohProfilePatch }) =>
+      apiMutate<DohProfile>(`/v1/doh-profiles/${id}`, 'PATCH', body, { idempotent: false }),
+    onSuccess: () => {
+      toast.success('DoH-профиль обновлён')
+      void qc.invalidateQueries({ queryKey: directoriesKeys.doh() })
+    },
+    onError: (e) =>
+      toast.error(e instanceof Error ? e.message : 'Не удалось обновить DoH-профиль'),
+  })
+}
@@ -9,7 +9,8 @@ export interface HealthStatus {

 export interface ReadyStatus {
  status?: string
-  checks?: Record<string, boolean | { ok?: boolean; error?: string }>
+  /** Backend: string ("ok"|"memory"|"unavailable"), boolean, or { ok, error }. */
+  checks?: Record<string, boolean | string | { ok?: boolean; error?: string }>
 }

 export interface VersionInfo {
@@ -1,23 +1,41 @@
 import { createFileRoute } from '@tanstack/react-router'
 import { useQuery } from '@tanstack/react-query'
-import { BookText, Globe, RefreshCw, Tags } from 'lucide-react'
+import { BookText, Globe, Plus, RefreshCw, Tags } from 'lucide-react'
+import { useState } from 'react'

 import { Button } from '@evobgp/ui/components/button'
-import { Badge } from '@/components/reui/badge'
 import { BadgeTabs, TabsContent } from '@/components/badge-tabs'
-import { FrameDataGrid, KpiStatGrid, type KpiStatItem } from '@/components/reui-kit'
+import {
+  CommunityFormDialog,
+} from '@/components/directories/community-create-dialog'
 import { DirectoriesCommunitiesGrid } from '@/components/directories/directories-communities-grid'
 import { DirectoriesDohGrid } from '@/components/directories/directories-doh-grid'
+import {
+  DohProfileFormDialog,
+} from '@/components/directories/doh-profile-create-dialog'
 import { PageHeader } from '@/components/page-header'
 import { QueryState } from '@/components/query-state'
+import { Badge } from '@/components/reui/badge'
+import { FrameDataGrid, KpiStatGrid, type KpiStatItem } from '@/components/reui-kit'
 import { SectionCardsSkeleton, TableSkeleton } from '@/components/skeletons'
+import { sessionCanWriteDirectories } from '@/lib/auth'
+import { authSessionQueryOptions } from '@/queries/auth'
 import { directoriesCommunitiesQueryOptions, directoriesDohQueryOptions } from '@/queries/directories'
+import type { BgpCommunity, DohProfile } from '@/types/api'

 export const Route = createFileRoute('/_auth/directories')({
  component: DirectoriesComponent,
 })

 function DirectoriesComponent() {
+  const [communityOpen, setCommunityOpen] = useState(false)
+  const [communityEdit, setCommunityEdit] = useState<BgpCommunity | null>(null)
+  const [dohOpen, setDohOpen] = useState(false)
+  const [dohEdit, setDohEdit] = useState<DohProfile | null>(null)
+
+  const sessionQ = useQuery(authSessionQueryOptions())
+  const canWrite = sessionCanWriteDirectories(sessionQ.data)
+
  const communitiesQ = useQuery(directoriesCommunitiesQueryOptions())
  const dohQ = useQuery(directoriesDohQueryOptions())

@@ -58,6 +76,40 @@ function DirectoriesComponent() {
    },
  ]

+  function openCreateCommunity() {
+    setCommunityEdit(null)
+    setCommunityOpen(true)
+  }
+
+  function openEditCommunity(row: BgpCommunity) {
+    setCommunityEdit(row)
+    setCommunityOpen(true)
+  }
+
+  function openCreateDoh() {
+    setDohEdit(null)
+    setDohOpen(true)
+  }
+
+  function openEditDoh(row: DohProfile) {
+    setDohEdit(row)
+    setDohOpen(true)
+  }
+
+  const addCommunityButton = canWrite ? (
+    <Button size="sm" type="button" onClick={openCreateCommunity}>
+      <Plus />
+      Добавить
+    </Button>
+  ) : null
+
+  const addDohButton = canWrite ? (
+    <Button size="sm" type="button" onClick={openCreateDoh}>
+      <Plus />
+      Добавить
+    </Button>
+  ) : null
+
  return (
    <div className="flex flex-col gap-6">
      <PageHeader
@@ -92,6 +144,7 @@ function DirectoriesComponent() {
          <FrameDataGrid
            title="Сообщества BGP"
            description="Теги для префиксов в фильтрах BIRD"
+            actions={addCommunityButton}
          >
            <QueryState
              data={communities}
@@ -100,13 +153,16 @@ function DirectoriesComponent() {
              error={communitiesQ.error}
              empty={communities.length === 0}
              emptyTitle="Нет сообществ"
+              emptyAction={addCommunityButton}
              skeleton={<TableSkeleton rows={4} cols={3} />}
              onRetry={() => communitiesQ.refetch()}
            >
-              {(items) => (
+              {(rows) => (
                <DirectoriesCommunitiesGrid
-                  items={items}
+                  items={rows}
                  isLoading={communitiesQ.isFetching && !communitiesQ.isLoading}
+                  canWrite={canWrite}
+                  onEdit={openEditCommunity}
                />
              )}
            </QueryState>
@@ -114,7 +170,11 @@ function DirectoriesComponent() {
        </TabsContent>

        <TabsContent value="doh" className="mt-0">
-          <FrameDataGrid title="DoH профили" description="Резолверы DNS-over-HTTPS для доменных модулей">
+          <FrameDataGrid
+            title="DoH профили"
+            description="Резолверы DNS-over-HTTPS для доменных модулей"
+            actions={addDohButton}
+          >
            <QueryState
              data={dohProfiles}
              isLoading={dohQ.isLoading}
@@ -122,19 +182,43 @@ function DirectoriesComponent() {
              error={dohQ.error}
              empty={dohProfiles.length === 0}
              emptyTitle="Нет DoH профилей"
+              emptyAction={addDohButton}
              skeleton={<TableSkeleton rows={4} cols={3} />}
              onRetry={() => dohQ.refetch()}
            >
-              {(items) => (
+              {(rows) => (
                <DirectoriesDohGrid
-                  items={items}
+                  items={rows}
                  isLoading={dohQ.isFetching && !dohQ.isLoading}
+                  canWrite={canWrite}
+                  onEdit={openEditDoh}
                />
              )}
            </QueryState>
          </FrameDataGrid>
        </TabsContent>
      </BadgeTabs>
+
+      {canWrite ? (
+        <>
+          <CommunityFormDialog
+            open={communityOpen}
+            onOpenChange={(open) => {
+              setCommunityOpen(open)
+              if (!open) setCommunityEdit(null)
+            }}
+            editTarget={communityEdit}
+          />
+          <DohProfileFormDialog
+            open={dohOpen}
+            onOpenChange={(open) => {
+              setDohOpen(open)
+              if (!open) setDohEdit(null)
+            }}
+            editTarget={dohEdit}
+          />
+        </>
+      ) : null}
    </div>
  )
 }
@@ -81,7 +81,7 @@ function MonitoringComponent() {
    .slice(0, 5)

  return (
-    <div className="flex flex-col gap-6">
+    <div className="flex flex-col gap-2 md:gap-3">
      <PageHeader
        title="Мониторинг"
        description={`Состояние API, BGP и задач для диагностики инцидентов${
@@ -110,11 +110,11 @@ function MonitoringComponent() {
          { value: 'runtime-logs', label: 'Файловые логи' },
        ]}
      >
-        <TabsContent value="system" className="mt-0 flex flex-col gap-6">
+        <TabsContent value="system" className="mt-0 flex flex-col gap-2 md:gap-3">
          {analyticsLoading ? (
            <AnalyticsDashboardSkeleton />
          ) : (
-            <div className="grid gap-4 lg:grid-cols-2">
+            <div className="grid items-stretch gap-2 md:gap-3 lg:grid-cols-2">
              <MonitoringHealthCard
                healthOk={healthQ.data?.ok ?? false}
                ready={readyQ.data}
@@ -124,7 +124,7 @@ function MonitoringComponent() {
            </div>
          )}

-          <div className="grid gap-4 lg:grid-cols-2">
+          <div className="grid items-stretch gap-2 md:gap-3 lg:grid-cols-2">
            <FrameDataGrid
              title="Доступность и готовность"
              description="GET /v1/health · GET /v1/ready"
@@ -149,23 +149,24 @@ function MonitoringComponent() {
                </span>
              }
              description="GET /v1/bird/status"
-              contentClassName="py-4"
+              className="h-full"
+              contentClassName="px-5 py-4"
            >
-                <QueryState
-                  data={birdQ.data}
-                  isLoading={birdQ.isLoading}
-                  isError={birdQ.isError}
-                  error={birdQ.error}
-                  skeleton={<div className="h-40" />}
-                  onRetry={() => birdQ.refetch()}
-                >
-                  {(bird) => <BirdSummary bird={bird} />}
-                </QueryState>
+              <QueryState
+                data={birdQ.data}
+                isLoading={birdQ.isLoading}
+                isError={birdQ.isError}
+                error={birdQ.error}
+                skeleton={<div className="h-40" />}
+                onRetry={() => birdQ.refetch()}
+              >
+                {(bird) => <BirdSummary bird={bird} />}
+              </QueryState>
            </PanelCard>
          </div>

-          <div className="grid gap-4 lg:grid-cols-2">
-            <div className="flex flex-col gap-4">
+          <div className="grid items-stretch gap-2 md:gap-3 lg:grid-cols-2">
+            <div className="flex flex-col gap-2 md:gap-3">
              <SegmentedProgressCard
                title="Задачи"
                description="Последние 100 задач · GET /v1/jobs"
@@ -189,8 +190,8 @@ function MonitoringComponent() {
                footer={`В выборке: ${jobs.length} задач`}
              />
              {failedJobs.length > 0 ? (
-                <PanelCard title="Последние ошибки" contentClassName="space-y-2 py-4">
-                  <ul className="space-y-2">
+                <PanelCard title="Последние ошибки" contentClassName="px-5 py-4">
+                  <ul className="flex flex-col gap-2">
                    {failedJobs.map((job) => (
                      <li key={job.job_id} className="rounded-lg border px-3 py-2 text-sm">
                        <div className="flex items-start justify-between gap-2">
@@ -218,28 +219,29 @@ function MonitoringComponent() {
                </span>
              }
              description="Краткая шпаргалка для первичной диагностики"
-              contentClassName="py-4"
+              className="h-full"
+              contentClassName="px-5 py-4"
            >
-                <ul className="space-y-3 text-sm text-muted-foreground">
-                  <li>
-                    <span className="font-medium text-foreground">API недоступен.</span> Если{' '}
-                    <code className="text-xs">/v1/health</code> возвращает ошибку — проверьте процесс API и
-                    его логи.
-                  </li>
-                  <li>
-                    <span className="font-medium text-foreground">Готовность не «Готов».</span> Сначала{' '}
-                    <code className="text-xs">postgres</code>, затем <code className="text-xs">store</code>{' '}
-                    и <code className="text-xs">jobs</code> в проверках.
-                  </li>
-                  <li>
-                    <span className="font-medium text-foreground">Низкий ratio BGP.</span> Проверьте{' '}
-                    <code className="text-xs">/v1/bird/status</code>, затем состояние пиров в Сети.
-                  </li>
-                  <li>
-                    <span className="font-medium text-foreground">Ошибки задач.</span> Откройте Операции и
-                    проверьте последние неуспешные задачи.
-                  </li>
-                </ul>
+              <ul className="flex flex-col gap-3 text-sm text-muted-foreground">
+                <li>
+                  <span className="font-medium text-foreground">API недоступен.</span> Если{' '}
+                  <code className="text-xs">/v1/health</code> возвращает ошибку — проверьте процесс API и
+                  его логи.
+                </li>
+                <li>
+                  <span className="font-medium text-foreground">Готовность не «Готов».</span> Сначала{' '}
+                  <code className="text-xs">postgres</code>, затем <code className="text-xs">store</code>{' '}
+                  и <code className="text-xs">jobs</code> в проверках.
+                </li>
+                <li>
+                  <span className="font-medium text-foreground">Низкий ratio BGP.</span> Проверьте{' '}
+                  <code className="text-xs">/v1/bird/status</code>, затем состояние пиров в Сети.
+                </li>
+                <li>
+                  <span className="font-medium text-foreground">Ошибки задач.</span> Откройте Операции и
+                  проверьте последние неуспешные задачи.
+                </li>
+              </ul>
            </PanelCard>
          </div>
        </TabsContent>
@@ -282,7 +284,7 @@ function BirdSummary({ bird }: { bird: import('@/types/api').BirdStatus }) {
      ? Math.round((bird.bgp_established / bird.bgp_sessions_total) * 100)
      : null
  return (
-    <div className="space-y-2">
+    <div className="flex flex-col gap-2">
      <div className="flex items-center justify-between text-sm">
        <span className="text-muted-foreground">Установлено / всего</span>
        <span className="font-medium tabular-nums">
Author	SHA1	Message	Date
DenozordecandCursor	6a25a3d137	fix(web): parse string readiness checks on monitoring System tab CI / changes (push) Successful in 6s Details CI / commitlint (push) Skipped Details CI / go (push) Skipped Details CI / bird2 (push) Skipped Details CI / openapi (push) Successful in 38s Details CI / web (push) Successful in 54s Details CI / release (push) Successful in 3m59s Details Исправляет ложные «Ошибки проверок»: GET /v1/ready отдаёт строки ok/memory, а не boolean. Уплотнён ReUI Frame/donut layout на вкладке Система. Co-authored-by: Cursor <cursoragent@cursor.com>	2026-08-12 13:41:58 +07:00
DenozordecandCursor	32d9dc6acb	feat(directories): edit communities and DoH via row actions menu CI / changes (push) Successful in 6s Details CI / commitlint (push) Skipped Details CI / go (push) Skipped Details CI / bird2 (push) Skipped Details CI / openapi (push) Successful in 36s Details CI / web (push) Successful in 55s Details CI / release (push) Successful in 4m28s Details В data-grid справочников добавлено меню «⋯» с пунктом «Редактировать» и FormDrawer на PATCH /v1/communities/{id} и /v1/doh-profiles/{id}. Co-authored-by: Cursor <cursoragent@cursor.com>	2026-08-12 12:42:01 +07:00
DenozordecandCursor	fc4f234cc5	feat(directories): add create dialogs for communities and DoH profiles CI / changes (push) Successful in 6s Details CI / commitlint (push) Skipped Details CI / go (push) Skipped Details CI / bird2 (push) Skipped Details CI / openapi (push) Successful in 41s Details CI / web (push) Successful in 1m13s Details CI / release (push) Successful in 4m35s Details На странице Справочники добавлены кнопки «Добавить» и FormDrawer для POST /v1/communities и /v1/doh-profiles. Доступ ограничен bgp:directories:write (sessionCanWriteDirectories). Co-authored-by: Cursor <cursoragent@cursor.com>	2026-08-12 12:24:10 +07:00