feat(mcp): подготовить сервер и доступ к приёмке
This commit is contained in:
Denozordec committed
commit
bf3d50e1ff
3835 files changed
+537122
No files matched your search
@@ -0,0 +1,456 @@
|
||||
"use client"
|
||||
|
||||
import { useEffect, useMemo, useRef, useState, useId, type KeyboardEvent, type ReactNode } from "react"
|
||||
import type { ServerStatus, ServerType } from "@/lib/data"
|
||||
import { Flag } from "@/components/flag"
|
||||
import { StatusDot } from "@/components/status-dot"
|
||||
import { Badge } from "@/components/reui/badge"
|
||||
import { IconTile } from "@/components/reui/icon-tile"
|
||||
import {
|
||||
Frame,
|
||||
FrameHeader,
|
||||
FramePanel,
|
||||
FrameTitle,
|
||||
} from "@/components/reui/frame"
|
||||
import {
|
||||
Item,
|
||||
ItemActions,
|
||||
ItemContent,
|
||||
ItemMedia,
|
||||
ItemTitle,
|
||||
} from "@/components/ui/item"
|
||||
import { ScrollArea } from "@/components/ui/scroll-area"
|
||||
import { Spinner } from "@/components/ui/spinner"
|
||||
import {
|
||||
InputGroup,
|
||||
InputGroupAddon,
|
||||
InputGroupInput,
|
||||
} from "@/components/ui/input-group"
|
||||
import { cn } from "@/lib/utils"
|
||||
import { useTable } from "@tanstack/react-table"
|
||||
import { DataGrid, DataGridPagination, dataGridFeatures } from "@/components/reui/data-grid"
|
||||
import { DATA_GRID_LABELS_RU } from "@/lib/data-grid-labels-ru"
|
||||
import { LayersIcon, SearchIcon, ServerIcon } from "lucide-react"
|
||||
|
||||
/** Preview: https://reui.io/preview/base/list-9 · https://reui.io/docs/components/base/icon-tile · https://reui.io/docs/components/base/frame · https://reui.io/docs/components/base/badge */
|
||||
export const ALL_SERVERS_ID = "all"
|
||||
|
||||
// Device URL changes can remount the page. Keep only the current keyboard intent,
|
||||
// and never restore it after the user has focused another control.
|
||||
let pendingKeyboardFocus: { path: string; id: string; source: Element | null; until: number } | null = null
|
||||
|
||||
export interface ServerTileItem {
|
||||
id: string
|
||||
name: string
|
||||
country?: string
|
||||
status?: ServerStatus
|
||||
type?: ServerType
|
||||
count?: number
|
||||
enabled?: boolean
|
||||
selectable?: boolean
|
||||
title?: string
|
||||
site?: string
|
||||
host?: string
|
||||
meta?: string
|
||||
}
|
||||
|
||||
function typeBadgeVariant(
|
||||
type: ServerType,
|
||||
): "focus-light" | "info-light" | "success-light" {
|
||||
if (type === "jump-host") return "focus-light"
|
||||
if (type === "home-router") return "success-light"
|
||||
return "info-light"
|
||||
}
|
||||
|
||||
function typeBadgeLabel(type: ServerType): string {
|
||||
if (type === "jump-host") return "JH"
|
||||
if (type === "home-router") return "HR"
|
||||
return "EN"
|
||||
}
|
||||
|
||||
function ServerTypeBadge({ type }: { type: ServerType }) {
|
||||
return (
|
||||
<Badge variant={typeBadgeVariant(type)} size="xs" className="font-mono text-foreground">
|
||||
{typeBadgeLabel(type)}
|
||||
</Badge>
|
||||
)
|
||||
}
|
||||
|
||||
function hostnameOf(item: ServerTileItem): string {
|
||||
return item.name || item.host || ""
|
||||
}
|
||||
|
||||
function matchesQuery(item: ServerTileItem, q: string): boolean {
|
||||
if (!q) return true
|
||||
const hay = [item.name, item.title ?? "", item.host ?? "", item.site ?? "", item.country ?? ""]
|
||||
.join(" ")
|
||||
.toLowerCase()
|
||||
return hay.includes(q)
|
||||
}
|
||||
|
||||
function isSelectable(item: ServerTileItem): boolean {
|
||||
return item.selectable !== false
|
||||
}
|
||||
|
||||
function ServerTileRail({
|
||||
items,
|
||||
selectedId,
|
||||
onSelect,
|
||||
allCount = 0,
|
||||
showHeader = true,
|
||||
showAll = true,
|
||||
showCount = true,
|
||||
showType = true,
|
||||
headerRight,
|
||||
loading = false,
|
||||
preserveSelection = false,
|
||||
className,
|
||||
}: {
|
||||
items: ServerTileItem[]
|
||||
selectedId: string
|
||||
onSelect: (id: string) => void
|
||||
allCount?: number
|
||||
showHeader?: boolean
|
||||
showAll?: boolean
|
||||
showCount?: boolean
|
||||
showType?: boolean
|
||||
headerRight?: ReactNode
|
||||
loading?: boolean
|
||||
preserveSelection?: boolean
|
||||
className?: string
|
||||
}) {
|
||||
const railId = useId()
|
||||
const [query, setQuery] = useState("")
|
||||
const q = query.trim().toLowerCase()
|
||||
const listRef = useRef<HTMLDivElement>(null)
|
||||
|
||||
const filtered = useMemo(
|
||||
() => items.filter((item) => matchesQuery(item, q)),
|
||||
[items, q],
|
||||
)
|
||||
|
||||
const uniqueSites = useMemo(() => {
|
||||
const sites = new Set(
|
||||
filtered.map((item) => item.site?.trim()).filter((site): site is string => Boolean(site)),
|
||||
)
|
||||
return sites.size
|
||||
}, [filtered])
|
||||
|
||||
const groupBySite = uniqueSites >= 2 && !q
|
||||
|
||||
const groups = useMemo(() => {
|
||||
if (!groupBySite) {
|
||||
return [{ site: "", items: filtered }]
|
||||
}
|
||||
const bySite = new Map<string, ServerTileItem[]>()
|
||||
for (const item of filtered) {
|
||||
const site = item.site?.trim() || "—"
|
||||
const list = bySite.get(site)
|
||||
if (list) list.push(item)
|
||||
else bySite.set(site, [item])
|
||||
}
|
||||
return [...bySite.entries()].map(([site, siteItems]) => ({ site, items: siteItems }))
|
||||
}, [filtered, groupBySite])
|
||||
|
||||
const showAllTile = showAll && !q
|
||||
|
||||
const resolvedId = useMemo(() => {
|
||||
if (showAll && selectedId === ALL_SERVERS_ID) return ALL_SERVERS_ID
|
||||
if (items.some((item) => item.id === selectedId)) return selectedId
|
||||
if (preserveSelection) return ""
|
||||
if (showAll) return ALL_SERVERS_ID
|
||||
return items.find(isSelectable)?.id ?? items[0]?.id ?? ""
|
||||
}, [items, selectedId, showAll, preserveSelection])
|
||||
|
||||
useEffect(() => {
|
||||
if (resolvedId && resolvedId !== selectedId) onSelect(resolvedId)
|
||||
}, [onSelect, resolvedId, selectedId])
|
||||
|
||||
const orderedItems = useMemo(() => groups.flatMap(group => group.items), [groups])
|
||||
const table = useTable({
|
||||
features: dataGridFeatures,
|
||||
data: orderedItems,
|
||||
columns: [],
|
||||
getRowId: item => item.id,
|
||||
manualPagination: false,
|
||||
autoResetPageIndex: false,
|
||||
initialState: { pagination: { pageIndex: 0, pageSize: 50 } },
|
||||
})
|
||||
const { pageIndex, pageSize } = table.state.pagination
|
||||
useEffect(() => {
|
||||
const lastPage = Math.max(0, Math.ceil(orderedItems.length / pageSize) - 1)
|
||||
if (pageIndex > lastPage) table.setPageIndex(lastPage)
|
||||
}, [orderedItems.length, pageIndex, pageSize, table])
|
||||
const setPageIndex = table.setPageIndex
|
||||
const selectedIndex = orderedItems.findIndex(item => item.id === resolvedId)
|
||||
useEffect(() => {
|
||||
setPageIndex(selectedIndex < 0 ? 0 : Math.floor(selectedIndex / pageSize))
|
||||
}, [resolvedId, selectedIndex, q, pageSize, setPageIndex])
|
||||
useEffect(() => {
|
||||
const viewport = listRef.current?.closest<HTMLElement>('[data-slot="scroll-area-viewport"]')
|
||||
viewport?.scrollTo({ top: 0 })
|
||||
const selected = listRef.current?.querySelector<HTMLElement>('[aria-selected="true"]')
|
||||
selected?.scrollIntoView({ block: "nearest" })
|
||||
const pending = pendingKeyboardFocus
|
||||
if (pending && (pending.until < performance.now() || pending.path !== window.location.pathname)) {
|
||||
pendingKeyboardFocus = null
|
||||
} else if (pending && pending.id === resolvedId && selected?.getClientRects().length) {
|
||||
if (document.activeElement === document.body || document.activeElement === pending.source) selected.focus({ preventScroll: true })
|
||||
pendingKeyboardFocus = null
|
||||
}
|
||||
}, [pageIndex, resolvedId, q, pageSize])
|
||||
const visibleIds = new Set(table.getRowModel().rows.map(row => row.id))
|
||||
const visibleGroups = groups.map(group => ({ ...group, items: group.items.filter(item => visibleIds.has(item.id)) })).filter(group => group.items.length > 0)
|
||||
const activeId = resolvedId === ALL_SERVERS_ID && showAllTile || visibleIds.has(resolvedId) ? resolvedId : undefined
|
||||
|
||||
const selectableIds = useMemo(() => {
|
||||
const ids: string[] = []
|
||||
if (showAllTile) ids.push(ALL_SERVERS_ID)
|
||||
for (const item of filtered) {
|
||||
if (isSelectable(item)) ids.push(item.id)
|
||||
}
|
||||
return ids
|
||||
}, [filtered, showAllTile])
|
||||
|
||||
const tabStopId = activeId && selectableIds.includes(activeId)
|
||||
? activeId
|
||||
: showAllTile ? ALL_SERVERS_ID : table.getRowModel().rows.find(row => isSelectable(row.original))?.id
|
||||
|
||||
function selectWithKeyboard(id: string) {
|
||||
if (id === resolvedId) {
|
||||
listRef.current?.querySelector<HTMLElement>('[aria-selected="true"]')?.focus()
|
||||
return
|
||||
}
|
||||
pendingKeyboardFocus = { path: window.location.pathname, id, source: document.activeElement, until: performance.now() + 10000 }
|
||||
onSelect(id)
|
||||
}
|
||||
|
||||
function moveSelection(delta: number) {
|
||||
if (selectableIds.length === 0) return
|
||||
const idx = selectableIds.indexOf(resolvedId)
|
||||
const nextIdx =
|
||||
idx < 0
|
||||
? delta > 0 ? 0 : selectableIds.length - 1
|
||||
: Math.min(selectableIds.length - 1, Math.max(0, idx + delta))
|
||||
const nextId = selectableIds[nextIdx]
|
||||
if (nextId) selectWithKeyboard(nextId)
|
||||
}
|
||||
|
||||
function handleListKeyDown(event: KeyboardEvent<HTMLDivElement>) {
|
||||
if (loading) return
|
||||
if (event.key === "ArrowDown") {
|
||||
event.preventDefault()
|
||||
moveSelection(1)
|
||||
return
|
||||
}
|
||||
if (event.key === "ArrowUp") {
|
||||
event.preventDefault()
|
||||
moveSelection(-1)
|
||||
return
|
||||
}
|
||||
if (event.key === "Home") {
|
||||
event.preventDefault()
|
||||
if (selectableIds[0]) selectWithKeyboard(selectableIds[0])
|
||||
return
|
||||
}
|
||||
if (event.key === "End") {
|
||||
event.preventDefault()
|
||||
const last = selectableIds[selectableIds.length - 1]
|
||||
if (last) selectWithKeyboard(last)
|
||||
}
|
||||
}
|
||||
|
||||
const allItem: ServerTileItem = {
|
||||
id: ALL_SERVERS_ID,
|
||||
name: "Все серверы",
|
||||
title: "Все серверы",
|
||||
count: allCount,
|
||||
meta: String(allCount),
|
||||
}
|
||||
|
||||
return (
|
||||
<DataGrid table={table} recordCount={orderedItems.length} i18n={{ labels: { ...DATA_GRID_LABELS_RU, goToPage: page => `Страница устройств ${page}` } }}>
|
||||
<Frame dense spacing="sm" className={cn("flex h-full min-h-0 w-full flex-col", className)}>
|
||||
<FramePanel className="flex min-h-0 flex-1 flex-col gap-0 p-0">
|
||||
<FrameHeader className="flex flex-col gap-2 border-b px-3 py-2">
|
||||
{showHeader ? (
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<FrameTitle className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
|
||||
Серверы
|
||||
</FrameTitle>
|
||||
<span className="flex items-center gap-1.5">
|
||||
{loading ? <Spinner className="size-3.5 text-muted-foreground" /> : null}
|
||||
{headerRight}
|
||||
</span>
|
||||
</div>
|
||||
) : headerRight || loading ? (
|
||||
<div className="flex justify-end gap-1.5">
|
||||
{loading ? <Spinner className="size-3.5 text-muted-foreground" /> : null}
|
||||
{headerRight}
|
||||
</div>
|
||||
) : null}
|
||||
<InputGroup>
|
||||
<InputGroupAddon>
|
||||
<SearchIcon className="size-3.5" />
|
||||
</InputGroupAddon>
|
||||
<InputGroupInput
|
||||
value={query}
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
placeholder="Поиск…"
|
||||
aria-label="Поиск сервера"
|
||||
disabled={loading}
|
||||
/>
|
||||
</InputGroup>
|
||||
</FrameHeader>
|
||||
<ScrollArea className="min-h-0 flex-1">
|
||||
<div
|
||||
ref={listRef}
|
||||
className="flex flex-col gap-0.5 p-1.5"
|
||||
role="listbox"
|
||||
aria-label="Серверы"
|
||||
onKeyDown={handleListKeyDown}
|
||||
>
|
||||
{showAllTile ? (
|
||||
<ServerTileButton
|
||||
id={`${railId}-server-tile-${ALL_SERVERS_ID}`}
|
||||
item={allItem}
|
||||
selected={resolvedId === ALL_SERVERS_ID}
|
||||
tabStop={tabStopId === ALL_SERVERS_ID}
|
||||
onSelect={() => onSelect(ALL_SERVERS_ID)}
|
||||
showCount={showCount}
|
||||
showType={false}
|
||||
icon={
|
||||
<IconTile variant="elevated" size="sm" aria-hidden="true">
|
||||
<LayersIcon className="text-muted-foreground" />
|
||||
</IconTile>
|
||||
}
|
||||
/>
|
||||
) : null}
|
||||
{visibleGroups.map((group) => (
|
||||
<div key={group.site || "__flat__"} className="flex flex-col gap-0.5">
|
||||
{groupBySite && group.site ? (
|
||||
<p className="sticky top-0 z-[1] bg-background/95 px-2 py-1 text-[10px] font-bold uppercase tracking-wide text-muted-foreground backdrop-blur-sm">
|
||||
{group.site}
|
||||
</p>
|
||||
) : null}
|
||||
{group.items.map((item) => (
|
||||
<ServerTileButton
|
||||
key={item.id}
|
||||
id={`${railId}-server-tile-${item.id}`}
|
||||
item={item}
|
||||
selected={resolvedId === item.id}
|
||||
tabStop={tabStopId === item.id}
|
||||
onSelect={() => onSelect(item.id)}
|
||||
showCount={showCount}
|
||||
showType={showType}
|
||||
showSite={!groupBySite}
|
||||
icon={
|
||||
<IconTile variant="elevated" size="sm" aria-hidden="true">
|
||||
{item.country ? (
|
||||
<Flag code={item.country} size={16} />
|
||||
) : (
|
||||
<ServerIcon className="text-muted-foreground" />
|
||||
)}
|
||||
</IconTile>
|
||||
}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
{filtered.length === 0 && !showAllTile ? (
|
||||
<p className="px-2 py-3 text-center text-xs text-muted-foreground">
|
||||
{loading
|
||||
? "Загрузка серверов…"
|
||||
: items.length === 0
|
||||
? "Нет доступных серверов"
|
||||
: "Ничего не найдено"}
|
||||
</p>
|
||||
) : null}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
{(orderedItems.length > 50 || pageSize !== 50) && <DataGridPagination moreLimit={3} sizes={[25, 50, 100]} rowsPerPageLabel="Устройств на странице" previousPageLabel="Предыдущие устройства" nextPageLabel="Следующие устройства" className="grow-0 shrink-0 border-t px-2 sm:flex-col [&>div]:flex-col [&>div]:gap-2" />}
|
||||
</FramePanel>
|
||||
</Frame>
|
||||
</DataGrid>
|
||||
)
|
||||
}
|
||||
|
||||
function ServerTileButton({
|
||||
id,
|
||||
item,
|
||||
selected,
|
||||
tabStop,
|
||||
onSelect,
|
||||
showCount,
|
||||
showType,
|
||||
showSite = true,
|
||||
icon,
|
||||
}: {
|
||||
id: string
|
||||
item: ServerTileItem
|
||||
selected: boolean
|
||||
tabStop: boolean
|
||||
onSelect: () => void
|
||||
showCount: boolean
|
||||
showType: boolean
|
||||
showSite?: boolean
|
||||
icon: ReactNode
|
||||
}) {
|
||||
const isAll = item.id === ALL_SERVERS_ID
|
||||
const selectable = isSelectable(item)
|
||||
const hostname = isAll ? "Все серверы" : hostnameOf(item)
|
||||
const meta = item.meta ?? (showCount && item.count != null ? String(item.count) : undefined)
|
||||
const showStatus = Boolean(item.status && item.status !== "online")
|
||||
|
||||
return (
|
||||
<Item
|
||||
id={id}
|
||||
size="xs"
|
||||
variant={selected ? "muted" : "default"}
|
||||
render={
|
||||
<button
|
||||
type="button"
|
||||
role="option"
|
||||
aria-selected={selected}
|
||||
tabIndex={tabStop ? 0 : -1}
|
||||
title={item.title ?? hostname}
|
||||
disabled={!selectable}
|
||||
onClick={onSelect}
|
||||
/>
|
||||
}
|
||||
className={cn(
|
||||
"h-11 min-h-11 flex-nowrap rounded-md py-0",
|
||||
selected && "ring-1 ring-border",
|
||||
item.enabled === false && !selected && "opacity-40",
|
||||
!selectable && "cursor-not-allowed opacity-40 hover:bg-transparent",
|
||||
)}
|
||||
>
|
||||
<ItemMedia>{icon}</ItemMedia>
|
||||
<ItemContent className="min-w-0">
|
||||
<ItemTitle className="max-w-full min-w-0 gap-1.5 font-mono text-[11px]">
|
||||
{showStatus ? <StatusDot status={item.status!} /> : null}
|
||||
<span className="min-w-0 truncate">{hostname}</span>
|
||||
{!isAll && showSite && item.site ? (
|
||||
<Badge variant="outline" size="xs" className="shrink-0 font-mono uppercase">
|
||||
{item.site}
|
||||
</Badge>
|
||||
) : null}
|
||||
{!isAll && showType && item.type ? <ServerTypeBadge type={item.type} /> : null}
|
||||
</ItemTitle>
|
||||
</ItemContent>
|
||||
{meta ? (
|
||||
<ItemActions>
|
||||
<Badge
|
||||
variant={selected ? "secondary" : "outline"}
|
||||
size="xs"
|
||||
className="tabular-nums"
|
||||
>
|
||||
{meta}
|
||||
</Badge>
|
||||
</ItemActions>
|
||||
) : null}
|
||||
</Item>
|
||||
)
|
||||
}
|
||||
|
||||
export { ServerTileRail, ServerTypeBadge, hostnameOf }
|
||||
Reference in new issue
Block a user