feat(web): расписание, каналы уведомлений, история проверок, drift-badge
This commit is contained in:
@@ -3,10 +3,12 @@ import { Routes, Route, Navigate } from "react-router-dom"
|
||||
import { ProtectedRoute } from "@/auth/ProtectedRoute"
|
||||
import { Layout } from "@/components/Layout"
|
||||
import { AccountsPage } from "@/pages/AccountsPage"
|
||||
import { ChannelsPage } from "@/pages/ChannelsPage"
|
||||
import { DomainDiffPage } from "@/pages/DomainDiffPage"
|
||||
import { DomainsPage } from "@/pages/DomainsPage"
|
||||
import { LoginPage } from "@/pages/LoginPage"
|
||||
import { RegisterPage } from "@/pages/RegisterPage"
|
||||
import { SchedulePage } from "@/pages/SchedulePage"
|
||||
import { TemplatesPage } from "@/pages/TemplatesPage"
|
||||
|
||||
// Every non-auth route shares the same guard + chrome; wrapping here keeps
|
||||
@@ -29,6 +31,8 @@ export function App() {
|
||||
<Route path="/domains/:id" element={<Protected><DomainDiffPage /></Protected>} />
|
||||
<Route path="/accounts" element={<Protected><AccountsPage /></Protected>} />
|
||||
<Route path="/templates" element={<Protected><TemplatesPage /></Protected>} />
|
||||
<Route path="/schedule" element={<Protected><SchedulePage /></Protected>} />
|
||||
<Route path="/channels" element={<Protected><ChannelsPage /></Protected>} />
|
||||
</Routes>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -0,0 +1,47 @@
|
||||
import { render, screen } from "@testing-library/react"
|
||||
import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
|
||||
import { AuthProvider } from "@/auth/AuthContext"
|
||||
import { api } from "@/api/client"
|
||||
import { vi, beforeEach, test, expect } from "vitest"
|
||||
import { DomainHistory } from "./DomainHistory"
|
||||
|
||||
const PROJECT_ID = "p1"
|
||||
|
||||
function renderComponent() {
|
||||
const qc = new QueryClient()
|
||||
return render(
|
||||
<QueryClientProvider client={qc}>
|
||||
<AuthProvider>
|
||||
<DomainHistory domainId="d1" />
|
||||
</AuthProvider>
|
||||
</QueryClientProvider>,
|
||||
)
|
||||
}
|
||||
|
||||
beforeEach(() => {
|
||||
vi.restoreAllMocks()
|
||||
vi.spyOn(api.auth, "me").mockResolvedValue({
|
||||
user: { id: "u1", email: "a@b.com" },
|
||||
project: { id: PROJECT_ID, name: "Default" },
|
||||
})
|
||||
})
|
||||
|
||||
test("отрисовывает список проверок со сводкой updates/prunes", async () => {
|
||||
vi.spyOn(api, "domainHistory").mockResolvedValue([
|
||||
{ id: "r1", createdAt: "2026-07-01T10:00:00Z", result: { updates: 2, prunes: 1 } },
|
||||
{ id: "r2", createdAt: "2026-06-30T10:00:00Z", result: { updates: 0, prunes: 0 } },
|
||||
])
|
||||
|
||||
renderComponent()
|
||||
|
||||
expect(await screen.findByText(/updates:\s*2/i)).toBeInTheDocument()
|
||||
expect(screen.getByText(/prunes:\s*1/i)).toBeInTheDocument()
|
||||
})
|
||||
|
||||
test("пустое состояние при отсутствии истории", async () => {
|
||||
vi.spyOn(api, "domainHistory").mockResolvedValue([])
|
||||
|
||||
renderComponent()
|
||||
|
||||
expect(await screen.findByText(/проверок пока нет/i)).toBeInTheDocument()
|
||||
})
|
||||
@@ -0,0 +1,66 @@
|
||||
import { History, Loader2 } from "lucide-react"
|
||||
import { useDomainHistory } from "@/hooks/useApi"
|
||||
|
||||
// check_runs.result is a provider-neutral JSON summary written by
|
||||
// store.SaveCheckRun (Фаза 3, T1/T4): {"updates": N, "prunes": N}. We read it
|
||||
// defensively since it's typed as `object` end-to-end and older/foreign rows
|
||||
// could in principle omit a key.
|
||||
function summarize(result: object): string {
|
||||
const r = result as Record<string, unknown>
|
||||
const updates = typeof r.updates === "number" ? r.updates : 0
|
||||
const prunes = typeof r.prunes === "number" ? r.prunes : 0
|
||||
return `updates: ${updates} · prunes: ${prunes}`
|
||||
}
|
||||
|
||||
function formatTimestamp(iso: string): string {
|
||||
const date = new Date(iso)
|
||||
if (Number.isNaN(date.getTime())) return iso
|
||||
return date.toLocaleString("ru-RU", {
|
||||
day: "2-digit",
|
||||
month: "2-digit",
|
||||
year: "numeric",
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
})
|
||||
}
|
||||
|
||||
export function DomainHistory({ domainId }: { domainId: string }) {
|
||||
const history = useDomainHistory(domainId)
|
||||
const runs = history.data ?? []
|
||||
|
||||
return (
|
||||
<section className="flex flex-col gap-2">
|
||||
<header className="flex items-center gap-2 px-0.5">
|
||||
<History className="size-3.5 text-muted-foreground" strokeWidth={1.75} />
|
||||
<h2 className="text-xs font-semibold tracking-wide text-foreground uppercase">
|
||||
История проверок
|
||||
</h2>
|
||||
</header>
|
||||
|
||||
{history.isPending ? (
|
||||
<div className="flex items-center gap-2 rounded-lg border border-border bg-card px-4 py-4 text-sm text-muted-foreground">
|
||||
<Loader2 className="size-4 animate-spin" strokeWidth={1.75} />
|
||||
Загружаю историю…
|
||||
</div>
|
||||
) : runs.length === 0 ? (
|
||||
<p className="rounded-lg border border-dashed border-border px-3 py-2.5 text-sm text-muted-foreground/70">
|
||||
Проверок пока нет — история появится после первого запуска планировщика.
|
||||
</p>
|
||||
) : (
|
||||
<div className="flex flex-col divide-y divide-border rounded-lg bg-card ring-1 ring-border">
|
||||
{runs.map((run, i) => (
|
||||
<div
|
||||
key={run.id ?? i}
|
||||
className="flex items-center justify-between gap-3 px-3 py-2 text-sm"
|
||||
>
|
||||
<span className="font-dns text-xs text-muted-foreground">
|
||||
{formatTimestamp(run.createdAt)}
|
||||
</span>
|
||||
<span className="font-dns text-xs text-foreground">{summarize(run.result)}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
)
|
||||
}
|
||||
@@ -1,6 +1,6 @@
|
||||
import type { ReactNode } from "react"
|
||||
import { NavLink, useLocation, useNavigate } from "react-router-dom"
|
||||
import { Globe, LogOut, Users, LayoutTemplate, SquareTerminal } from "lucide-react"
|
||||
import { BellRing, CalendarClock, Globe, LogOut, Users, LayoutTemplate, SquareTerminal } from "lucide-react"
|
||||
import { useAuth } from "@/auth/AuthContext"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { cn } from "@/lib/utils"
|
||||
@@ -9,6 +9,8 @@ const NAV = [
|
||||
{ to: "/domains", label: "Domains", icon: Globe },
|
||||
{ to: "/accounts", label: "Accounts", icon: Users },
|
||||
{ to: "/templates", label: "Templates", icon: LayoutTemplate },
|
||||
{ to: "/schedule", label: "Schedule", icon: CalendarClock },
|
||||
{ to: "/channels", label: "Channels", icon: BellRing },
|
||||
] as const
|
||||
|
||||
export function Layout({ children }: { children: ReactNode }) {
|
||||
|
||||
@@ -0,0 +1,39 @@
|
||||
import { render, screen } from "@testing-library/react"
|
||||
import { test, expect } from "vitest"
|
||||
import { StatusBadge } from "./StatusBadge"
|
||||
|
||||
test("in_sync — emerald, текст «in sync»", () => {
|
||||
render(<StatusBadge status="in_sync" />)
|
||||
expect(screen.getByText("in sync")).toBeInTheDocument()
|
||||
const badge = screen.getByText("in sync").closest('[data-slot="status-badge"]')
|
||||
expect(badge).toHaveAttribute("data-status", "in_sync")
|
||||
expect(screen.getByTestId("status-dot")).toHaveStyle({ background: "var(--diff-add)" })
|
||||
})
|
||||
|
||||
test("drift — amber, текст «drift»", () => {
|
||||
render(<StatusBadge status="drift" />)
|
||||
expect(screen.getByText("drift")).toBeInTheDocument()
|
||||
expect(screen.getByTestId("status-dot")).toHaveStyle({ background: "var(--diff-update)" })
|
||||
})
|
||||
|
||||
test("error — rose, текст «error»", () => {
|
||||
render(<StatusBadge status="error" />)
|
||||
expect(screen.getByText("error")).toBeInTheDocument()
|
||||
expect(screen.getByTestId("status-dot")).toHaveStyle({ background: "var(--diff-delete)" })
|
||||
})
|
||||
|
||||
test("unknown — muted, текст «unknown»", () => {
|
||||
render(<StatusBadge status="unknown" />)
|
||||
expect(screen.getByText("unknown")).toBeInTheDocument()
|
||||
expect(screen.getByTestId("status-dot")).toHaveStyle({ background: "var(--diff-readonly)" })
|
||||
})
|
||||
|
||||
test("отсутствие статуса трактуется как unknown", () => {
|
||||
render(<StatusBadge />)
|
||||
expect(screen.getByText("unknown")).toBeInTheDocument()
|
||||
})
|
||||
|
||||
test("неизвестное значение статуса не падает и рендерит unknown", () => {
|
||||
render(<StatusBadge status="bogus" />)
|
||||
expect(screen.getByText("unknown")).toBeInTheDocument()
|
||||
})
|
||||
@@ -0,0 +1,42 @@
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
// Mirrors backend check status (store.Domain.LastCheckStatus / T4-T5):
|
||||
// unknown | in_sync | drift | error. Colors reuse the diff-* tokens already
|
||||
// established for the domain-diff console so a drifted zone reads the same
|
||||
// "amber" whether you're looking at the list or the diff view.
|
||||
export type CheckStatus = "unknown" | "in_sync" | "drift" | "error"
|
||||
|
||||
const STATUS_META: Record<CheckStatus, { label: string; color: string }> = {
|
||||
in_sync: { label: "in sync", color: "var(--diff-add)" },
|
||||
drift: { label: "drift", color: "var(--diff-update)" },
|
||||
error: { label: "error", color: "var(--diff-delete)" },
|
||||
unknown: { label: "unknown", color: "var(--diff-readonly)" },
|
||||
}
|
||||
|
||||
function resolveStatus(status?: string): CheckStatus {
|
||||
if (status === "in_sync" || status === "drift" || status === "error") return status
|
||||
return "unknown"
|
||||
}
|
||||
|
||||
export function StatusBadge({ status, className }: { status?: string; className?: string }) {
|
||||
const resolved = resolveStatus(status)
|
||||
const meta = STATUS_META[resolved]
|
||||
|
||||
return (
|
||||
<Badge
|
||||
variant="outline"
|
||||
data-slot="status-badge"
|
||||
data-status={resolved}
|
||||
className={cn("font-dns gap-1.5 border-border text-foreground", className)}
|
||||
>
|
||||
<span
|
||||
data-testid="status-dot"
|
||||
className="size-1.5 shrink-0 rounded-full"
|
||||
style={{ background: meta.color }}
|
||||
aria-hidden
|
||||
/>
|
||||
{meta.label}
|
||||
</Badge>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,146 @@
|
||||
import { render, screen, waitFor } from "@testing-library/react"
|
||||
import userEvent from "@testing-library/user-event"
|
||||
import { MemoryRouter } from "react-router-dom"
|
||||
import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
|
||||
import { ChannelsPage } from "./ChannelsPage"
|
||||
import { AuthProvider } from "@/auth/AuthContext"
|
||||
import { api } from "@/api/client"
|
||||
import { vi, beforeEach, test, expect } from "vitest"
|
||||
import type { Channel } from "@/api/types"
|
||||
|
||||
const PROJECT_ID = "p1"
|
||||
const channels: Channel[] = [
|
||||
{ id: "c1", type: "telegram", config: { chat_id: "123456" }, enabled: true },
|
||||
{ id: "c2", type: "webhook", config: { url: "https://hooks.example.com/x" }, enabled: false },
|
||||
]
|
||||
|
||||
function renderPage() {
|
||||
const qc = new QueryClient()
|
||||
return render(
|
||||
<QueryClientProvider client={qc}>
|
||||
<AuthProvider>
|
||||
<MemoryRouter initialEntries={["/channels"]}>
|
||||
<ChannelsPage />
|
||||
</MemoryRouter>
|
||||
</AuthProvider>
|
||||
</QueryClientProvider>,
|
||||
)
|
||||
}
|
||||
|
||||
beforeEach(() => {
|
||||
vi.restoreAllMocks()
|
||||
vi.spyOn(api.auth, "me").mockResolvedValue({
|
||||
user: { id: "u1", email: "a@b.com" },
|
||||
project: { id: PROJECT_ID, name: "Default" },
|
||||
})
|
||||
vi.spyOn(api, "listChannels").mockResolvedValue(channels)
|
||||
})
|
||||
|
||||
test("отрисовывает список каналов без секрета", async () => {
|
||||
renderPage()
|
||||
|
||||
expect(await screen.findByText("telegram")).toBeInTheDocument()
|
||||
expect(screen.getByText("webhook")).toBeInTheDocument()
|
||||
expect(screen.getByText(/123456/)).toBeInTheDocument()
|
||||
expect(screen.getByText(/hooks\.example\.com/)).toBeInTheDocument()
|
||||
|
||||
expect(document.body.textContent).not.toMatch(/bot_token/i)
|
||||
expect(screen.queryByDisplayValue(/123456/)).not.toBeInTheDocument()
|
||||
})
|
||||
|
||||
test("создание telegram-канала собирает config.chat_id + secret=bot_token", async () => {
|
||||
const createSpy = vi.spyOn(api, "createChannel").mockResolvedValue({
|
||||
id: "c3", type: "telegram", config: { chat_id: "999" }, enabled: true,
|
||||
})
|
||||
const user = userEvent.setup()
|
||||
renderPage()
|
||||
|
||||
await screen.findByText("telegram")
|
||||
|
||||
await user.click(screen.getByRole("combobox", { name: /тип канала/i }))
|
||||
await user.click(await screen.findByRole("option", { name: /telegram/i }))
|
||||
|
||||
await user.type(screen.getByLabelText(/chat id/i), "999")
|
||||
await user.type(screen.getByLabelText(/bot token/i), "SECRET_TOKEN")
|
||||
await user.click(screen.getByRole("button", { name: /добавить канал/i }))
|
||||
|
||||
await waitFor(() =>
|
||||
expect(createSpy).toHaveBeenCalledWith(PROJECT_ID, {
|
||||
type: "telegram",
|
||||
config: { chat_id: "999" },
|
||||
secret: "SECRET_TOKEN",
|
||||
}),
|
||||
)
|
||||
|
||||
expect(document.body.textContent).not.toMatch(/SECRET_TOKEN/)
|
||||
})
|
||||
|
||||
test("создание webhook-канала собирает config.url без секрета", async () => {
|
||||
const createSpy = vi.spyOn(api, "createChannel").mockResolvedValue({
|
||||
id: "c4", type: "webhook", config: { url: "https://hooks.example.com/y" }, enabled: true,
|
||||
})
|
||||
const user = userEvent.setup()
|
||||
renderPage()
|
||||
|
||||
await screen.findByText("telegram")
|
||||
|
||||
await user.click(screen.getByRole("combobox", { name: /тип канала/i }))
|
||||
await user.click(await screen.findByRole("option", { name: /webhook/i }))
|
||||
|
||||
await user.type(screen.getByLabelText(/url/i), "https://hooks.example.com/y")
|
||||
await user.click(screen.getByRole("button", { name: /добавить канал/i }))
|
||||
|
||||
await waitFor(() =>
|
||||
expect(createSpy).toHaveBeenCalledWith(PROJECT_ID, {
|
||||
type: "webhook",
|
||||
config: { url: "https://hooks.example.com/y" },
|
||||
secret: "",
|
||||
}),
|
||||
)
|
||||
})
|
||||
|
||||
test("удаление канала вызывает api.deleteChannel", async () => {
|
||||
const deleteSpy = vi.spyOn(api, "deleteChannel").mockResolvedValue(undefined)
|
||||
vi.spyOn(window, "confirm").mockReturnValue(true)
|
||||
const user = userEvent.setup()
|
||||
renderPage()
|
||||
|
||||
await screen.findByText("telegram")
|
||||
|
||||
await user.click(screen.getByRole("button", { name: /удалить канал telegram/i }))
|
||||
|
||||
await waitFor(() => expect(deleteSpy).toHaveBeenCalledWith(PROJECT_ID, "c1"))
|
||||
})
|
||||
|
||||
test("кнопка «Тест» вызывает api.testChannel", async () => {
|
||||
const testSpy = vi.spyOn(api, "testChannel").mockResolvedValue({ status: "ok" })
|
||||
const user = userEvent.setup()
|
||||
renderPage()
|
||||
|
||||
await screen.findByText("telegram")
|
||||
|
||||
const testButtons = screen.getAllByRole("button", { name: /тест/i })
|
||||
await user.click(testButtons[0])
|
||||
|
||||
await waitFor(() => expect(testSpy).toHaveBeenCalledWith(PROJECT_ID, "c1"))
|
||||
})
|
||||
|
||||
test("ошибка тест-отправки отображается как alert", async () => {
|
||||
vi.spyOn(api, "testChannel").mockRejectedValue(new Error("Канал не отвечает"))
|
||||
const user = userEvent.setup()
|
||||
renderPage()
|
||||
|
||||
await screen.findByText("telegram")
|
||||
|
||||
const testButtons = screen.getAllByRole("button", { name: /тест/i })
|
||||
await user.click(testButtons[0])
|
||||
|
||||
expect(await screen.findByRole("alert")).toHaveTextContent("Канал не отвечает")
|
||||
})
|
||||
|
||||
test("пустое состояние при отсутствии каналов", async () => {
|
||||
vi.spyOn(api, "listChannels").mockResolvedValue([])
|
||||
renderPage()
|
||||
|
||||
expect(await screen.findByText(/каналов пока нет/i)).toBeInTheDocument()
|
||||
})
|
||||
@@ -0,0 +1,342 @@
|
||||
import { useId, useState } from "react"
|
||||
import { Controller, useForm, useWatch } from "react-hook-form"
|
||||
import { zodResolver } from "@hookform/resolvers/zod"
|
||||
import { z } from "zod"
|
||||
import { Inbox, Loader2, Plus, Send, Trash2 } from "lucide-react"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import {
|
||||
Field,
|
||||
FieldContent,
|
||||
FieldError,
|
||||
FieldGroup,
|
||||
FieldLabel,
|
||||
FieldSet,
|
||||
} from "@/components/ui/field"
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select"
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table"
|
||||
import { useChannels, useCreateChannel, useDeleteChannel, useTestChannel } from "@/hooks/useApi"
|
||||
import { cn } from "@/lib/utils"
|
||||
import type { Channel, CreateChannelInput } from "@/api/types"
|
||||
|
||||
const CHANNEL_TYPES = [
|
||||
{ value: "telegram", label: "Telegram" },
|
||||
{ value: "webhook", label: "Webhook" },
|
||||
] as const
|
||||
|
||||
const channelFormSchema = z
|
||||
.object({
|
||||
type: z.enum(["telegram", "webhook"]),
|
||||
chatId: z.string(),
|
||||
botToken: z.string(),
|
||||
url: z.string(),
|
||||
})
|
||||
.superRefine((values, ctx) => {
|
||||
if (values.type === "telegram") {
|
||||
if (!values.chatId.trim()) {
|
||||
ctx.addIssue({ code: "custom", path: ["chatId"], message: "Укажите chat_id" })
|
||||
}
|
||||
if (!values.botToken.trim()) {
|
||||
ctx.addIssue({ code: "custom", path: ["botToken"], message: "Укажите bot token" })
|
||||
}
|
||||
return
|
||||
}
|
||||
if (!values.url.trim()) {
|
||||
ctx.addIssue({ code: "custom", path: ["url"], message: "Укажите URL" })
|
||||
return
|
||||
}
|
||||
try {
|
||||
new URL(values.url)
|
||||
} catch {
|
||||
ctx.addIssue({ code: "custom", path: ["url"], message: "Некорректный URL, включая протокол http(s)://" })
|
||||
}
|
||||
})
|
||||
|
||||
type ChannelForm = z.infer<typeof channelFormSchema>
|
||||
|
||||
const EMPTY_FORM: ChannelForm = { type: "telegram", chatId: "", botToken: "", url: "" }
|
||||
|
||||
// Channel.config is a generic `object` end-to-end (T5/T7) — it never carries
|
||||
// the secret (bot_token/signing key), only the public half (chat_id/url), so
|
||||
// rendering every key is always safe to show in the list.
|
||||
function formatConfig(config: object): string {
|
||||
const entries = Object.entries(config as Record<string, unknown>)
|
||||
if (entries.length === 0) return "—"
|
||||
return entries.map(([k, v]) => `${k}=${String(v)}`).join(" · ")
|
||||
}
|
||||
|
||||
function ChannelForm({ onCreated }: { onCreated: () => void }) {
|
||||
const createChannel = useCreateChannel()
|
||||
const typeFieldId = useId()
|
||||
const chatIdFieldId = useId()
|
||||
const botTokenFieldId = useId()
|
||||
const urlFieldId = useId()
|
||||
|
||||
const {
|
||||
control,
|
||||
handleSubmit,
|
||||
reset,
|
||||
formState: { errors },
|
||||
} = useForm<ChannelForm>({
|
||||
resolver: zodResolver(channelFormSchema),
|
||||
defaultValues: EMPTY_FORM,
|
||||
})
|
||||
|
||||
const type = useWatch({ control, name: "type" })
|
||||
|
||||
function onSubmit(values: ChannelForm) {
|
||||
const input: CreateChannelInput =
|
||||
values.type === "telegram"
|
||||
? { type: "telegram", config: { chat_id: values.chatId.trim() }, secret: values.botToken.trim() }
|
||||
: { type: "webhook", config: { url: values.url.trim() }, secret: "" }
|
||||
|
||||
createChannel.mutate(input, {
|
||||
onSuccess: () => {
|
||||
reset(EMPTY_FORM)
|
||||
onCreated()
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<form
|
||||
onSubmit={handleSubmit(onSubmit)}
|
||||
noValidate
|
||||
className="flex flex-col gap-4 rounded-xl border border-border bg-card/60 p-4"
|
||||
>
|
||||
<FieldSet className="gap-3">
|
||||
<FieldGroup className="flex-row flex-wrap items-start gap-3">
|
||||
<Field className="w-40">
|
||||
<FieldLabel htmlFor={typeFieldId}>Тип канала</FieldLabel>
|
||||
<FieldContent>
|
||||
<Controller
|
||||
control={control}
|
||||
name="type"
|
||||
render={({ field }) => (
|
||||
<Select
|
||||
items={CHANNEL_TYPES}
|
||||
value={field.value}
|
||||
onValueChange={(v) => field.onChange(v)}
|
||||
>
|
||||
<SelectTrigger id={typeFieldId} aria-label="Тип канала" className="w-full">
|
||||
<SelectValue placeholder="Выберите тип" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{CHANNEL_TYPES.map((item) => (
|
||||
<SelectItem key={item.value} value={item.value}>
|
||||
{item.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
)}
|
||||
/>
|
||||
</FieldContent>
|
||||
</Field>
|
||||
|
||||
{type === "telegram" ? (
|
||||
<>
|
||||
<Field className="w-56">
|
||||
<FieldLabel htmlFor={chatIdFieldId}>Chat ID</FieldLabel>
|
||||
<FieldContent>
|
||||
<Controller
|
||||
control={control}
|
||||
name="chatId"
|
||||
render={({ field }) => (
|
||||
<Input
|
||||
{...field}
|
||||
id={chatIdFieldId}
|
||||
placeholder="123456789"
|
||||
className="font-dns"
|
||||
aria-invalid={!!errors.chatId}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<FieldError errors={[errors.chatId]} />
|
||||
</FieldContent>
|
||||
</Field>
|
||||
<Field className="w-64">
|
||||
<FieldLabel htmlFor={botTokenFieldId}>Bot token</FieldLabel>
|
||||
<FieldContent>
|
||||
<Controller
|
||||
control={control}
|
||||
name="botToken"
|
||||
render={({ field }) => (
|
||||
<Input
|
||||
{...field}
|
||||
id={botTokenFieldId}
|
||||
type="password"
|
||||
autoComplete="off"
|
||||
placeholder="123456:ABC-DEF…"
|
||||
className="font-dns"
|
||||
aria-invalid={!!errors.botToken}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<FieldError errors={[errors.botToken]} />
|
||||
</FieldContent>
|
||||
</Field>
|
||||
</>
|
||||
) : (
|
||||
<Field className="w-80">
|
||||
<FieldLabel htmlFor={urlFieldId}>URL</FieldLabel>
|
||||
<FieldContent>
|
||||
<Controller
|
||||
control={control}
|
||||
name="url"
|
||||
render={({ field }) => (
|
||||
<Input
|
||||
{...field}
|
||||
id={urlFieldId}
|
||||
placeholder="https://hooks.example.com/…"
|
||||
className="font-dns"
|
||||
aria-invalid={!!errors.url}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<FieldError errors={[errors.url]} />
|
||||
</FieldContent>
|
||||
</Field>
|
||||
)}
|
||||
</FieldGroup>
|
||||
</FieldSet>
|
||||
|
||||
<div className="flex items-center justify-between gap-3 border-t border-border pt-3">
|
||||
{createChannel.isError && (
|
||||
<span role="alert" className="font-dns text-xs text-destructive">
|
||||
{createChannel.error.message}
|
||||
</span>
|
||||
)}
|
||||
<Button type="submit" disabled={createChannel.isPending} className="ml-auto">
|
||||
{createChannel.isPending ? (
|
||||
<Loader2 className="size-4 animate-spin" strokeWidth={1.75} />
|
||||
) : (
|
||||
<Plus className="size-4" strokeWidth={1.75} />
|
||||
)}
|
||||
Добавить канал
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
)
|
||||
}
|
||||
|
||||
export function ChannelsPage() {
|
||||
const channels = useChannels()
|
||||
const deleteChannel = useDeleteChannel()
|
||||
const testChannel = useTestChannel()
|
||||
const [testingId, setTestingId] = useState<string | null>(null)
|
||||
|
||||
const channelList = channels.data ?? []
|
||||
|
||||
function onDelete(channel: Channel) {
|
||||
if (window.confirm(`Удалить канал «${channel.type}»? Действие необратимо.`)) {
|
||||
deleteChannel.mutate(channel.id)
|
||||
}
|
||||
}
|
||||
|
||||
function onTest(channel: Channel) {
|
||||
setTestingId(channel.id)
|
||||
testChannel.mutate(channel.id)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="mx-auto flex max-w-4xl flex-col gap-6 px-6 py-8">
|
||||
<header className="flex flex-col gap-1">
|
||||
<span className="font-dns text-[11px] tracking-wider text-muted-foreground uppercase">
|
||||
notifications
|
||||
</span>
|
||||
<h1 className="text-xl font-semibold tracking-tight text-foreground">Каналы уведомлений</h1>
|
||||
</header>
|
||||
|
||||
<ChannelForm onCreated={() => setTestingId(null)} />
|
||||
|
||||
{deleteChannel.isError && (
|
||||
<span role="alert" className="font-dns text-xs text-destructive">
|
||||
{deleteChannel.error.message}
|
||||
</span>
|
||||
)}
|
||||
{testChannel.isError && (
|
||||
<span role="alert" className="font-dns text-xs text-destructive">
|
||||
{testChannel.error.message}
|
||||
</span>
|
||||
)}
|
||||
|
||||
{channelList.length === 0 ? (
|
||||
<div className="flex flex-col items-center gap-2 rounded-xl border border-dashed border-border px-4 py-12 text-center text-sm text-muted-foreground">
|
||||
<Inbox className="size-6" strokeWidth={1.5} />
|
||||
Каналов пока нет — добавьте Telegram или Webhook выше.
|
||||
</div>
|
||||
) : (
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Тип</TableHead>
|
||||
<TableHead>Конфигурация</TableHead>
|
||||
<TableHead>Статус</TableHead>
|
||||
<TableHead className="text-right">Действия</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{channelList.map((c) => (
|
||||
<TableRow key={c.id}>
|
||||
<TableCell className="font-dns">{c.type}</TableCell>
|
||||
<TableCell className="font-dns text-xs text-muted-foreground">
|
||||
{formatConfig(c.config)}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<span
|
||||
className={cn(
|
||||
"font-dns text-xs",
|
||||
c.enabled ? "text-foreground" : "text-muted-foreground",
|
||||
)}
|
||||
>
|
||||
{c.enabled ? "включён" : "выключен"}
|
||||
</span>
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<div className="flex justify-end gap-1.5">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => onTest(c)}
|
||||
disabled={testChannel.isPending && testingId === c.id}
|
||||
>
|
||||
{testChannel.isPending && testingId === c.id ? (
|
||||
<Loader2 className="size-3.5 animate-spin" strokeWidth={1.75} />
|
||||
) : (
|
||||
<Send className="size-3.5" strokeWidth={1.75} />
|
||||
)}
|
||||
Тест
|
||||
</Button>
|
||||
<Button
|
||||
variant="destructive"
|
||||
size="icon-sm"
|
||||
aria-label={`Удалить канал ${c.type}`}
|
||||
onClick={() => onDelete(c)}
|
||||
disabled={deleteChannel.isPending}
|
||||
>
|
||||
<Trash2 className="size-3.5" strokeWidth={1.75} />
|
||||
</Button>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -28,6 +28,7 @@ beforeEach(() => {
|
||||
user: { id: "u1", email: "a@b.com" },
|
||||
project: { id: PROJECT_ID, name: "Default" },
|
||||
})
|
||||
vi.spyOn(api, "domainHistory").mockResolvedValue([])
|
||||
})
|
||||
|
||||
test("apply sends applyPrunes=false by default, true only after opting in", async () => {
|
||||
|
||||
@@ -2,6 +2,7 @@ import { useId, useState } from "react"
|
||||
import { useParams } from "react-router-dom"
|
||||
import { AlertTriangle, Loader2, Play, RefreshCw, TriangleAlert } from "lucide-react"
|
||||
import { DiffView } from "@/components/DiffView"
|
||||
import { DomainHistory } from "@/components/DomainHistory"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Checkbox } from "@/components/ui/checkbox"
|
||||
import { Label } from "@/components/ui/label"
|
||||
@@ -137,6 +138,8 @@ export function DomainDiffPage() {
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
<DomainHistory domainId={id} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -18,8 +18,8 @@ const templates: Template[] = [
|
||||
{ id: "t2", name: "Minimal", records: [], version: 1 },
|
||||
]
|
||||
const domains: Domain[] = [
|
||||
{ id: "d1", providerAccountId: "acc1", zoneName: "example.com.", zoneId: "z1", templateId: null },
|
||||
{ id: "d2", providerAccountId: "acc2", zoneName: "test.org.", zoneId: "z2", templateId: "t1" },
|
||||
{ id: "d1", providerAccountId: "acc1", zoneName: "example.com.", zoneId: "z1", templateId: null, lastCheckStatus: "drift" },
|
||||
{ id: "d2", providerAccountId: "acc2", zoneName: "test.org.", zoneId: "z2", templateId: "t1", lastCheckStatus: "in_sync" },
|
||||
]
|
||||
|
||||
function renderPage() {
|
||||
@@ -108,3 +108,12 @@ test("пустое состояние при отсутствии доменов
|
||||
|
||||
expect(await screen.findByText(/доменов пока нет/i)).toBeInTheDocument()
|
||||
})
|
||||
|
||||
test("drift-badge отражает lastCheckStatus каждого домена", async () => {
|
||||
renderPage()
|
||||
|
||||
await screen.findByText("example.com.")
|
||||
|
||||
expect(screen.getByText("drift")).toBeInTheDocument()
|
||||
expect(screen.getByText("in sync")).toBeInTheDocument()
|
||||
})
|
||||
|
||||
@@ -2,6 +2,7 @@ import { useState } from "react"
|
||||
import { Link } from "react-router-dom"
|
||||
import { Inbox, Loader2, Trash2, Upload } from "lucide-react"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { StatusBadge } from "@/components/StatusBadge"
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
@@ -134,6 +135,7 @@ export function DomainsPage() {
|
||||
<TableHead>Zone</TableHead>
|
||||
<TableHead>Учётка</TableHead>
|
||||
<TableHead>Шаблон</TableHead>
|
||||
<TableHead>Статус</TableHead>
|
||||
<TableHead className="text-right">Действия</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
@@ -167,6 +169,9 @@ export function DomainsPage() {
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<StatusBadge status={d.lastCheckStatus} />
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<div className="flex justify-end gap-1.5">
|
||||
<Button variant="outline" size="sm" render={<Link to={`/domains/${d.id}`} />}>
|
||||
|
||||
@@ -0,0 +1,83 @@
|
||||
import { render, screen, waitFor } from "@testing-library/react"
|
||||
import userEvent from "@testing-library/user-event"
|
||||
import { MemoryRouter } from "react-router-dom"
|
||||
import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
|
||||
import { SchedulePage } from "./SchedulePage"
|
||||
import { AuthProvider } from "@/auth/AuthContext"
|
||||
import { api } from "@/api/client"
|
||||
import { vi, beforeEach, test, expect } from "vitest"
|
||||
|
||||
const PROJECT_ID = "p1"
|
||||
|
||||
function renderPage() {
|
||||
const qc = new QueryClient()
|
||||
return render(
|
||||
<QueryClientProvider client={qc}>
|
||||
<AuthProvider>
|
||||
<MemoryRouter initialEntries={["/schedule"]}>
|
||||
<SchedulePage />
|
||||
</MemoryRouter>
|
||||
</AuthProvider>
|
||||
</QueryClientProvider>,
|
||||
)
|
||||
}
|
||||
|
||||
beforeEach(() => {
|
||||
vi.restoreAllMocks()
|
||||
vi.spyOn(api.auth, "me").mockResolvedValue({
|
||||
user: { id: "u1", email: "a@b.com" },
|
||||
project: { id: PROJECT_ID, name: "Default" },
|
||||
})
|
||||
vi.spyOn(api, "getSchedule").mockResolvedValue({ intervalSeconds: 120, enabled: true })
|
||||
})
|
||||
|
||||
test("показывает текущий интервал и enabled", async () => {
|
||||
renderPage()
|
||||
|
||||
const intervalInput = await screen.findByLabelText(/интервал/i)
|
||||
expect(intervalInput).toHaveValue(120)
|
||||
expect(screen.getByRole("checkbox", { name: /включ/i })).toBeChecked()
|
||||
})
|
||||
|
||||
test("сохранение вызывает updateSchedule с новыми значениями", async () => {
|
||||
const updateSpy = vi.spyOn(api, "putSchedule").mockResolvedValue({ intervalSeconds: 300, enabled: false })
|
||||
const user = userEvent.setup()
|
||||
renderPage()
|
||||
|
||||
const intervalInput = await screen.findByLabelText(/интервал/i)
|
||||
await user.clear(intervalInput)
|
||||
await user.type(intervalInput, "300")
|
||||
await user.click(screen.getByRole("checkbox", { name: /включ/i }))
|
||||
await user.click(screen.getByRole("button", { name: /сохранить/i }))
|
||||
|
||||
await waitFor(() =>
|
||||
expect(updateSpy).toHaveBeenCalledWith(PROJECT_ID, { intervalSeconds: 300, enabled: false }),
|
||||
)
|
||||
})
|
||||
|
||||
test("валидация: интервал меньше 60 блокирует сохранение", async () => {
|
||||
const updateSpy = vi.spyOn(api, "putSchedule").mockResolvedValue({ intervalSeconds: 120, enabled: true })
|
||||
const user = userEvent.setup()
|
||||
renderPage()
|
||||
|
||||
const intervalInput = await screen.findByLabelText(/интервал/i)
|
||||
await user.clear(intervalInput)
|
||||
await user.type(intervalInput, "30")
|
||||
await user.click(screen.getByRole("button", { name: /сохранить/i }))
|
||||
|
||||
expect(await screen.findByRole("alert")).toHaveTextContent(/60/)
|
||||
expect(updateSpy).not.toHaveBeenCalled()
|
||||
})
|
||||
|
||||
test("ошибка сохранения отображается пользователю", async () => {
|
||||
vi.spyOn(api, "putSchedule").mockRejectedValue(new Error("Не удалось сохранить расписание"))
|
||||
const user = userEvent.setup()
|
||||
renderPage()
|
||||
|
||||
const intervalInput = await screen.findByLabelText(/интервал/i)
|
||||
await user.clear(intervalInput)
|
||||
await user.type(intervalInput, "180")
|
||||
await user.click(screen.getByRole("button", { name: /сохранить/i }))
|
||||
|
||||
expect(await screen.findByRole("alert")).toHaveTextContent("Не удалось сохранить расписание")
|
||||
})
|
||||
@@ -0,0 +1,145 @@
|
||||
import { useId } from "react"
|
||||
import { Controller, useForm } from "react-hook-form"
|
||||
import { zodResolver } from "@hookform/resolvers/zod"
|
||||
import { z } from "zod"
|
||||
import { Loader2, Save } from "lucide-react"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Checkbox } from "@/components/ui/checkbox"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import {
|
||||
Field,
|
||||
FieldContent,
|
||||
FieldError,
|
||||
FieldGroup,
|
||||
FieldLabel,
|
||||
FieldSet,
|
||||
} from "@/components/ui/field"
|
||||
import { useSchedule, useUpdateSchedule } from "@/hooks/useApi"
|
||||
import type { Schedule } from "@/api/types"
|
||||
|
||||
const scheduleFormSchema = z.object({
|
||||
intervalSeconds: z
|
||||
.number({ error: "Укажите интервал в секундах" })
|
||||
.int("Интервал — целое число секунд")
|
||||
.min(60, "Интервал не может быть меньше 60 секунд"),
|
||||
enabled: z.boolean(),
|
||||
})
|
||||
|
||||
type ScheduleForm = z.infer<typeof scheduleFormSchema>
|
||||
|
||||
const DEFAULT_SCHEDULE: Schedule = { intervalSeconds: 300, enabled: false }
|
||||
|
||||
// Rendered only once the current schedule is loaded, so useForm's
|
||||
// defaultValues (a one-time snapshot in react-hook-form) are always seeded
|
||||
// with the real values — no reset()-after-fetch race between the query and
|
||||
// the form's first render.
|
||||
function ScheduleFormCard({ initial }: { initial: Schedule }) {
|
||||
const updateSchedule = useUpdateSchedule()
|
||||
const intervalFieldId = useId()
|
||||
|
||||
const {
|
||||
control,
|
||||
handleSubmit,
|
||||
formState: { errors },
|
||||
} = useForm<ScheduleForm>({
|
||||
resolver: zodResolver(scheduleFormSchema),
|
||||
defaultValues: initial,
|
||||
})
|
||||
|
||||
function onSubmit(values: ScheduleForm) {
|
||||
updateSchedule.mutate(values)
|
||||
}
|
||||
|
||||
return (
|
||||
<form
|
||||
onSubmit={handleSubmit(onSubmit)}
|
||||
noValidate
|
||||
className="flex flex-col gap-4 rounded-xl border border-border bg-card/60 p-4"
|
||||
>
|
||||
<FieldSet className="gap-3">
|
||||
<FieldGroup className="gap-3">
|
||||
<Field className="sm:max-w-56">
|
||||
<FieldLabel htmlFor={intervalFieldId}>Интервал (секунд)</FieldLabel>
|
||||
<FieldContent>
|
||||
<Controller
|
||||
control={control}
|
||||
name="intervalSeconds"
|
||||
render={({ field }) => (
|
||||
<Input
|
||||
{...field}
|
||||
id={intervalFieldId}
|
||||
type="number"
|
||||
min={60}
|
||||
step={1}
|
||||
className="font-dns"
|
||||
aria-invalid={!!errors.intervalSeconds}
|
||||
onChange={(e) => field.onChange(e.target.valueAsNumber)}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<FieldError errors={[errors.intervalSeconds]} />
|
||||
</FieldContent>
|
||||
</Field>
|
||||
|
||||
<Field>
|
||||
<Controller
|
||||
control={control}
|
||||
name="enabled"
|
||||
render={({ field }) => (
|
||||
<Label className="flex items-center gap-2.5 text-sm font-normal">
|
||||
<Checkbox
|
||||
aria-label="Включено"
|
||||
checked={field.value}
|
||||
onCheckedChange={(v) => field.onChange(v === true)}
|
||||
/>
|
||||
Автоматические проверки включены
|
||||
</Label>
|
||||
)}
|
||||
/>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
</FieldSet>
|
||||
|
||||
<div className="flex items-center justify-between gap-3 border-t border-border pt-3">
|
||||
{updateSchedule.isError && (
|
||||
<span role="alert" className="font-dns text-xs text-destructive">
|
||||
{updateSchedule.error.message}
|
||||
</span>
|
||||
)}
|
||||
<Button type="submit" disabled={updateSchedule.isPending} className="ml-auto">
|
||||
{updateSchedule.isPending ? (
|
||||
<Loader2 className="size-4 animate-spin" strokeWidth={1.75} />
|
||||
) : (
|
||||
<Save className="size-4" strokeWidth={1.75} />
|
||||
)}
|
||||
Сохранить расписание
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
)
|
||||
}
|
||||
|
||||
export function SchedulePage() {
|
||||
const schedule = useSchedule()
|
||||
|
||||
return (
|
||||
<div className="mx-auto flex max-w-2xl flex-col gap-6 px-6 py-8">
|
||||
<header className="flex flex-col gap-1">
|
||||
<span className="font-dns text-[11px] tracking-wider text-muted-foreground uppercase">
|
||||
scheduler
|
||||
</span>
|
||||
<h1 className="text-xl font-semibold tracking-tight text-foreground">Расписание проверок</h1>
|
||||
</header>
|
||||
|
||||
{schedule.isPending ? (
|
||||
<div className="flex items-center gap-2 rounded-lg border border-border bg-card px-4 py-8 text-sm text-muted-foreground">
|
||||
<Loader2 className="size-4 animate-spin" strokeWidth={1.75} />
|
||||
Загружаю расписание…
|
||||
</div>
|
||||
) : (
|
||||
<ScheduleFormCard initial={schedule.data ?? DEFAULT_SCHEDULE} />
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user