denozord/vps-tracker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): привести таблицы к стилю ReUI PRO
Docker / build (push) Failing after 23s
Details

Browse Source 
Статусы через ReUI Badge, колонка действий — outline-меню без pin-slab.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Denozordec
2026-09-01 00:14:36 +07:00
co-authored by Cursor
parent 573ca097aa
commit 29325179f4
14 changed files with 284 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/data-grid-cells.tsx
+40 -3
View File
@@ -1,7 +1,9 @@
import type { LucideIcon } from 'lucide-react'
import type { ReactNode } from 'react'
import { cn } from '@cfdm/ui/lib/utils'
import { IconTile } from '@/components/reui/icon-tile'
import { TruncatedText } from '@/components/truncated-text'
import { cn } from '@cfdm/ui/lib/utils'
export function dataGridCellStack(
primary: ReactNode,
@@ -26,14 +28,49 @@ export function dataGridCellStack(
)
}
/**
* Name cell DNA — IconTile elevated size-10.5 + truncate.
* Preview: https://reui.io/preview/base/stats-12
* Docs: https://reui.io/docs/components/base/icon-tile
*/
export function DataGridNameCell({
icon: Icon,
title,
subtitle,
iconClassName = 'text-muted-foreground',
className,
}: {
icon: LucideIcon
title: ReactNode
subtitle?: ReactNode
iconClassName?: string
className?: string
}) {
return (
<div className={cn('flex min-w-0 items-center gap-2.5', className)}>
<IconTile variant="elevated" className="size-10.5" aria-hidden>
<Icon className={iconClassName} />
</IconTile>
<div className="flex min-w-0 flex-col gap-0.5">
<span className="truncate font-medium">{title}</span>
{subtitle ? (
<span className="truncate text-xs text-muted-foreground">{subtitle}</span>
) : null}
</div>
</div>
)
}
export function dataGridCellWithIcon(
icon: ReactNode,
children: ReactNode,
className?: string,
) {
return (
<div className={cn('flex items-center gap-2', className)}>
<span className="shrink-0 text-muted-foreground">{icon}</span>
<div className={cn('flex min-w-0 items-center gap-2.5', className)}>
<IconTile variant="elevated" className="size-10.5" aria-hidden>
{icon}
</IconTile>
{children}
</div>
)
apps/web/src/components/row-actions.tsx
+67 -16
View File
@@ -1,8 +1,25 @@
import type { ReactNode } from 'react'
import { PencilIcon, Trash2Icon } from 'lucide-react'
import { useState, type ReactNode } from 'react'
import type { LucideIcon } from 'lucide-react'
import { MoreHorizontalIcon, PencilIcon, Trash2Icon } from 'lucide-react'
import { Button } from '@cfdm/ui/components/button'
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from '@cfdm/ui/components/dropdown-menu'
import { cn } from '@cfdm/ui/lib/utils'
import { ConfirmDialog } from './confirm-dialog'
export interface RowActionExtra {
label: string
icon?: LucideIcon
onSelect: () => void
disabled?: boolean
}
interface RowActionsProps {
onEdit?: () => void
onDelete?: () => void
@@ -10,10 +27,15 @@ interface RowActionsProps {
deleteTitle?: string
deleteDescription?: ReactNode
deleteLabel?: string
extra?: ReactNode
extra?: RowActionExtra[]
className?: string
}
/**
* Data-grid row actions — outline ⋯ menu.
* Preview: https://reui.io/preview/base/components/c-dropdown-menu-12
* Docs: https://reui.io/docs/components/base/dropdown-menu
*/
export function RowActions({
onEdit,
onDelete,
@@ -24,23 +46,52 @@ export function RowActions({
extra,
className,
}: RowActionsProps) {
if (!onEdit && !onDelete && !extra) return null
const [deleteOpen, setDeleteOpen] = useState(false)
const extras = extra ?? []
if (!onEdit && !onDelete && extras.length === 0) return null
return (
<div className={`flex justify-end gap-1 ${className ?? ''}`}>
{extra}
{onEdit ? (
<Button variant="ghost" size="icon-sm" onClick={onEdit} aria-label={editLabel}>
<PencilIcon />
</Button>
) : null}
<div className={cn('flex justify-end', className)}>
<DropdownMenu>
<DropdownMenuTrigger
render={
<Button type="button" variant="outline" size="icon-sm" aria-label="Действия" />
}
>
<MoreHorizontalIcon className="size-4" aria-hidden />
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="min-w-40">
{extras.map((item) => {
const Icon = item.icon
return (
<DropdownMenuItem
key={item.label}
disabled={item.disabled}
onClick={item.onSelect}
>
{Icon ? <Icon aria-hidden /> : null}
{item.label}
</DropdownMenuItem>
)
})}
{onEdit ? (
<DropdownMenuItem onClick={onEdit}>
<PencilIcon aria-hidden />
{editLabel}
</DropdownMenuItem>
) : null}
{onDelete ? (
<DropdownMenuItem variant="destructive" onClick={() => setDeleteOpen(true)}>
<Trash2Icon aria-hidden />
{deleteLabel}
</DropdownMenuItem>
) : null}
</DropdownMenuContent>
</DropdownMenu>
{onDelete ? (
<ConfirmDialog
trigger={
<Button variant="ghost" size="icon-sm" aria-label="Удалить">
<Trash2Icon />
</Button>
}
open={deleteOpen}
onOpenChange={setDeleteOpen}
title={deleteTitle}
description={deleteDescription}
destructive
apps/web/src/components/status-badge.tsx
+39 -17
View File
@@ -1,40 +1,62 @@
import type { ComponentProps } from 'react'
import { cn } from '@cfdm/ui/lib/utils'
import { Badge } from '@/components/reui/badge'
type BadgeVariant = NonNullable<ComponentProps<typeof Badge>['variant']>
const STATUS_VARIANT: Record<string, BadgeVariant> = {
active: 'success',
ok: 'success',
paid: 'success',
available: 'success',
complete: 'success',
paused: 'secondary',
active: 'success-light',
ok: 'success-light',
up: 'success-light',
paid: 'success-light',
available: 'success-light',
complete: 'success-light',
paused: 'invert-light',
archived: 'outline',
error: 'destructive',
denied: 'destructive',
blocked: 'destructive',
running: 'info',
overdue: 'warning',
stale: 'warning',
timeout: 'warning',
redirected: 'warning',
partial: 'warning',
error: 'destructive-light',
denied: 'destructive-light',
blocked: 'destructive-light',
down: 'destructive-light',
running: 'info-light',
overdue: 'warning-light',
stale: 'warning-light',
timeout: 'warning-light',
redirected: 'warning-light',
partial: 'warning-light',
}
const DOT_COLOR: Record<string, string> = {
'success-light': 'bg-success',
success: 'bg-success',
'info-light': 'bg-info',
info: 'bg-info',
'warning-light': 'bg-warning',
warning: 'bg-warning',
'destructive-light': 'bg-destructive',
destructive: 'bg-destructive',
'invert-light': 'bg-muted-foreground',
secondary: 'bg-muted-foreground',
outline: 'bg-muted-foreground',
}
export function StatusBadge({
status,
label,
size = 'default',
size = 'sm',
className,
}: {
status: string
label?: string
size?: NonNullable<ComponentProps<typeof Badge>['size']>
className?: string
}) {
const variant = STATUS_VARIANT[status] ?? 'outline'
const dotColor = DOT_COLOR[variant] ?? 'bg-muted-foreground'
return (
<Badge variant={variant} size={size}>
<Badge variant={variant} size={size} radius="full" className={cn('gap-1.5', className)}>
<span className={cn('size-1.5 shrink-0 rounded-full', dotColor)} aria-hidden />
{label ?? status}
</Badge>
)
apps/web/src/lib/custom-fields.tsx
+2 -2
View File
@@ -8,7 +8,7 @@ export {
} from '@cfdm/shared/contracts/custom-fields'
import type { ReactNode } from 'react'
import { Badge } from '@cfdm/ui/components/badge'
import { Badge } from '@/components/reui/badge'
import {
type CustomFieldDef,
formatCustomFieldValue,
@@ -39,7 +39,7 @@ export function buildCustomFieldColumns<T extends { customData?: unknown }>(
}
if (def.type === 'bool') {
return (
<Badge variant={val ? 'default' : 'outline'}>
<Badge variant={val ? 'success-light' : 'outline'} size="sm" radius="full">
{formatCustomFieldValue(def, val)}
</Badge>
)
apps/web/src/routes/_auth/accounts.tsx
+31 -24
View File
@@ -20,10 +20,10 @@ import { buildApiCredentials } from '@cfdm/shared/utils/api-credentials'
import { snapshotQueryOptions } from '@/queries/snapshot'
import { api, ApiError } from '@/lib/api-client'
import { Button } from '@cfdm/ui/components/button'
import { Badge } from '@cfdm/ui/components/badge'
import { Badge } from '@/components/reui/badge'
import { ResourcePage, columnDefFromDataGrid, KpiStatGrid } from '@/components/reui-kit'
import type { DataGridColumn } from '@/components/data-grid-types'
import { dataGridCellStack } from '@/components/data-grid-cells'
import { dataGridCellStack, DataGridNameCell } from '@/components/data-grid-cells'
import { CrudListPage } from '@/components/crud-list-page'
import { RowActions } from '@/components/row-actions'
import { HealthModeBanner } from '@/components/health-mode-banner'
@@ -62,10 +62,13 @@ const accountsSearchSchema = z.object({
health: z.string().optional(),
})
const HEALTH_BADGE_VARIANT: Record<AccountHealthFlag, 'default' | 'secondary' | 'destructive' | 'outline'> = {
'stale-sync': 'secondary',
'low-balance': 'destructive',
'balance-mismatch': 'outline',
const HEALTH_BADGE_VARIANT: Record<
AccountHealthFlag,
'warning-light' | 'destructive-light' | 'outline'
> = {
'stale-sync': 'warning-light',
'low-balance': 'destructive-light',
'balance-mismatch': 'warning-light',
'no-creds': 'outline',
}
@@ -267,7 +270,13 @@ function AccountsPage() {
key: 'name',
header: 'Аккаунт',
icon: UserRoundIcon,
cell: (a) => dataGridCellStack(a.name, providerById.get(a.providerId)?.name ?? '—'),
cell: (a) => (
<DataGridNameCell
icon={UserRoundIcon}
title={a.name}
subtitle={providerById.get(a.providerId)?.name ?? '—'}
/>
),
},
{
key: 'login',
@@ -285,12 +294,12 @@ function AccountsPage() {
cell: (a) => {
const flags = getAccountHealthFlags(a, healthCtx)
if (!flags.length) {
return <Badge variant="outline">OK</Badge>
return <Badge variant="success-light" size="sm" radius="full">OK</Badge>
}
return (
<div className="flex flex-wrap gap-1">
{flags.map((flag) => (
<Badge key={flag} variant={HEALTH_BADGE_VARIANT[flag]}>
<Badge key={flag} variant={HEALTH_BADGE_VARIANT[flag]} size="sm" radius="full">
{ACCOUNT_HEALTH_LABELS[flag]}
</Badge>
))}
@@ -303,7 +312,7 @@ function AccountsPage() {
header: 'API-доступ',
icon: PlugIcon,
cell: (a) => (
<Badge variant={a.apiCredentialsSet ? 'default' : 'outline'}>
<Badge variant={a.apiCredentialsSet ? 'success-light' : 'outline'} size="sm" radius="full">
{a.apiCredentialsSet ? 'установлены' : 'нет'}
</Badge>
),
@@ -323,7 +332,7 @@ function AccountsPage() {
sortValue: (a) => vpsCountByAccount.get(a.id) ?? 0,
cell: (a) => {
const count = vpsCountByAccount.get(a.id) ?? 0
return count ? <Badge variant="secondary">{count}</Badge> : <span className="text-muted-foreground">0</span>
return count ? <Badge variant="secondary" size="sm" radius="full">{count}</Badge> : <span className="text-muted-foreground">0</span>
},
},
{
@@ -358,7 +367,7 @@ function AccountsPage() {
key: 'actions',
header: '',
sortable: false,
className: 'w-32 text-right',
className: 'w-12 text-right',
cell: (a) => {
const provider = providerById.get(a.providerId)
const canSync = accountBillmanagerUiReady(a, provider)
@@ -369,17 +378,16 @@ function AccountsPage() {
deleteTitle="Удалить аккаунт?"
deleteDescription={`«${a.name}» будет удалён.`}
extra={
canSync ? (
<Button
variant="ghost"
size="icon-sm"
aria-label="Синхронизировать"
disabled={syncMut.isPending && syncMut.variables === a.id}
onClick={() => syncMut.mutate(a.id)}
>
<RefreshCwIcon />
</Button>
) : null
canSync
? [
{
label: 'Синхронизировать',
icon: RefreshCwIcon,
disabled: syncMut.isPending && syncMut.variables === a.id,
onSelect: () => syncMut.mutate(a.id),
},
]
: undefined
}
/>
)
@@ -450,7 +458,6 @@ function AccountsPage() {
columns={columnDefFromDataGrid(columns)}
data={filteredAccounts}
getRowId={(a) => a.id}
pinLastColumn
emptyTitle={health || hasActiveAccountFilters(filters) ? 'Нет аккаунтов с этими фильтрами' : 'Нет записей'}
emptyDescription={
health || hasActiveAccountFilters(filters)
apps/web/src/routes/_auth/balance.tsx
+6 -3
View File
@@ -19,7 +19,7 @@ import { toast } from 'sonner'
import { snapshotQueryOptions, ratesQueryOptions } from '@/queries/snapshot'
import { api, ApiError } from '@/lib/api-client'
import { Button } from '@cfdm/ui/components/button'
import { Badge } from '@cfdm/ui/components/badge'
import { Badge } from '@/components/reui/badge'
import { ResourcePage, columnDefFromDataGrid } from '@/components/reui-kit'
import type { DataGridColumn } from '@/components/data-grid-types'
import { dataGridCellStack } from '@/components/data-grid-cells'
@@ -100,7 +100,11 @@ function BalancePage() {
header: 'Движение',
icon: ArrowLeftRightIcon,
cell: (r) => (
<Badge variant={r.direction === 'credit' ? 'default' : 'destructive'}>
<Badge
variant={r.direction === 'credit' ? 'success-light' : 'destructive-light'}
size="sm"
radius="full"
>
<ArrowDownUpIcon data-icon="inline-start" />
{r.direction === 'credit' ? 'Приход' : 'Списание'}
</Badge>
@@ -236,7 +240,6 @@ function BalancePage() {
columns={columnDefFromDataGrid(columns)}
data={rows}
getRowId={(r) => r.id}
pinLastColumn
footerContent={
<div className="flex flex-wrap justify-end gap-6 px-3 py-2 text-sm tabular-nums">
<span>
apps/web/src/routes/_auth/dashboard.tsx
+13 -7
View File
@@ -277,7 +277,7 @@ function DashboardPage() {
iconClassName: 'text-primary',
to: '/vps',
footer: (
<Badge variant="outline" size="sm">
<Badge variant="outline" size="sm" radius="full">
{totalCount} всего
</Badge>
),
@@ -290,7 +290,7 @@ function DashboardPage() {
iconClassName: 'text-info',
to: '/reports',
footer: (
<Badge variant="info-light" size="sm">
<Badge variant="info-light" size="sm" radius="full">
оценка
</Badge>
),
@@ -308,7 +308,7 @@ function DashboardPage() {
iconClassName: 'text-success',
to: '/accounts',
footer: (
<Badge variant="success-light" size="sm">
<Badge variant="success-light" size="sm" radius="full">
API
</Badge>
),
@@ -322,11 +322,11 @@ function DashboardPage() {
variant: runwayLow ? 'warning' : 'default',
to: '/accounts',
footer: runwayLow ? (
<Badge variant="warning-light" size="sm">
<Badge variant="warning-light" size="sm" radius="full">
&lt; 14 дн
</Badge>
) : (
<Badge variant="outline" size="sm">
<Badge variant="outline" size="sm" radius="full">
запас
</Badge>
),
@@ -343,6 +343,7 @@ function DashboardPage() {
<Badge
variant={expiringCount > 0 ? 'warning-light' : 'success-light'}
size="sm"
radius="full"
>
{expiringCount > 0 ? 'скоро' : 'в норме'}
</Badge>
@@ -360,6 +361,7 @@ function DashboardPage() {
<Badge
variant={issuesCount > 0 ? 'destructive-light' : 'success-light'}
size="sm"
radius="full"
>
{issuesCount > 0 ? 'требует внимания' : 'в норме'}
</Badge>
@@ -406,7 +408,9 @@ function DashboardPage() {
<TabsTrigger value="issues" className={cn(DASHBOARD_TAB_TRIGGER_CLASS, 'gap-2')}>
Проблемы
{issues.length > 0 ? (
<Badge variant="secondary">{issues.length}</Badge>
<Badge variant="secondary" size="sm" radius="full">
{issues.length}
</Badge>
) : null}
</TabsTrigger>
<TabsTrigger value="recent" className={DASHBOARD_TAB_TRIGGER_CLASS}>
@@ -415,7 +419,9 @@ function DashboardPage() {
<TabsTrigger value="risk" className={cn(DASHBOARD_TAB_TRIGGER_CLASS, 'gap-2')}>
Аккаунты
{atRisk.length > 0 ? (
<Badge variant="outline">{atRisk.length}</Badge>
<Badge variant="outline" size="sm" radius="full">
{atRisk.length}
</Badge>
) : null}
</TabsTrigger>
</TabsList>
apps/web/src/routes/_auth/payments.tsx
+1 -2
View File
@@ -143,7 +143,7 @@ function PaymentsPage() {
key: 'actions',
header: '',
sortable: false,
className: 'w-24 text-right',
className: 'w-12 text-right',
cell: (p) => (
<RowActions
onEdit={() => openEdit(p)}
@@ -250,7 +250,6 @@ function PaymentsPage() {
columns={columnDefFromDataGrid(columns)}
data={sorted}
getRowId={(p) => p.id}
pinLastColumn
virtualization={sorted.length > 200}
height={560}
footerContent={
apps/web/src/routes/_auth/projects.tsx
+3 -4
View File
@@ -25,7 +25,7 @@ import {
type ProjectFiltersState,
} from '@/components/project-filters'
import { Button } from '@cfdm/ui/components/button'
import { Badge } from '@cfdm/ui/components/badge'
import { Badge } from '@/components/reui/badge'
import { EmptyState } from '@/components/empty-state'
import { ProjectColorDot } from '@/components/project-color-dot'
import { ProjectEditSheet, projectFormDefaults } from '@/components/domain/project-edit-sheet'
@@ -153,7 +153,7 @@ function ProjectsPage() {
className: 'text-right tabular-nums',
sortValue: (row) => row.vpsTotal,
cell: (row) => (
<Badge variant="secondary">
<Badge variant="secondary" size="sm" radius="full">
{row.vpsActive}/{row.vpsTotal}
</Badge>
),
@@ -183,7 +183,7 @@ function ProjectsPage() {
key: 'actions',
header: '',
sortable: false,
className: 'w-24 text-right',
className: 'w-12 text-right',
cell: (row) => (
<div onClick={(e) => e.stopPropagation()}>
<RowActions
@@ -298,7 +298,6 @@ function ProjectsPage() {
columns={columnDefFromDataGrid(columns)}
data={rows}
getRowId={(r) => r.id}
pinLastColumn
onRowClick={(row) =>
void navigate({
to: '/projects/$projectId',
apps/web/src/routes/_auth/providers.tsx
+11 -13
View File
@@ -7,15 +7,14 @@ import { toast } from 'sonner'
import { snapshotQueryOptions } from '@/queries/snapshot'
import { api, ApiError } from '@/lib/api-client'
import { Button } from '@cfdm/ui/components/button'
import { Badge } from '@cfdm/ui/components/badge'
import { Badge } from '@/components/reui/badge'
import { ResourcePage, columnDefFromDataGrid } from '@/components/reui-kit'
import type { DataGridColumn } from '@/components/data-grid-types'
import { dataGridCellWithIcon } from '@/components/data-grid-cells'
import { DataGridNameCell } from '@/components/data-grid-cells'
import { CrudListPage } from '@/components/crud-list-page'
import { RowActions } from '@/components/row-actions'
import { ProviderEditSheet, providerFormDefaults } from '@/components/domain/provider-edit-sheet'
import type { ProviderFormValues } from '@/lib/schemas'
import { faviconUrlFromWebsite } from '@/lib/format'
import type { Provider } from '@/types/entities'
export const Route = createFileRoute('/_auth/providers')({
@@ -79,20 +78,19 @@ function ProvidersPage() {
key: 'name',
header: 'Хостер',
icon: BuildingIcon,
cell: (p) => {
const icon = p.website ? (
<img src={faviconUrlFromWebsite(p.website)} alt="" className="size-4 rounded-sm" />
) : (
<BuildingIcon />
)
return dataGridCellWithIcon(icon, <span className="font-medium">{p.name}</span>)
},
cell: (p) => (
<DataGridNameCell
icon={BuildingIcon}
title={p.name}
subtitle={p.website || undefined}
/>
),
},
{
key: 'api',
header: 'API',
icon: PlugIcon,
cell: (p) => <Badge variant="outline">{p.apiType}</Badge>,
cell: (p) => <Badge variant="outline" size="sm" radius="full">{p.apiType}</Badge>,
},
{
key: 'cur',
@@ -104,7 +102,7 @@ function ProvidersPage() {
key: 'actions',
header: '',
sortable: false,
className: 'w-24 text-right',
className: 'w-12 text-right',
cell: (p) => (
<RowActions
onEdit={() => openEdit(p)}
apps/web/src/routes/_auth/renewals.tsx
+6 -2
View File
@@ -16,7 +16,7 @@ import {
FramePanel,
FrameTitle,
} from '@/components/reui/frame'
import { Badge } from '@cfdm/ui/components/badge'
import { Badge } from '@/components/reui/badge'
import { Button } from '@cfdm/ui/components/button'
import { SelectField } from '@/components/select-field'
import { getPaidUntilDate } from '@/lib/paid-until'
@@ -197,7 +197,11 @@ function RenewalsPage() {
<span className="text-xs text-muted-foreground">{item.sublabel}</span>
</div>
<div className="flex items-center gap-2">
{item.overdue ? <Badge variant="destructive">Просрочено</Badge> : null}
{item.overdue ? (
<Badge variant="destructive-light" size="sm" radius="full">
Просрочено
</Badge>
) : null}
<span className="tabular-nums text-sm">{item.date.toLocaleDateString('ru-RU')}</span>
</div>
</div>
apps/web/src/routes/_auth/tariffs.tsx
+2 -2
View File
@@ -6,7 +6,7 @@ import { toast } from 'sonner'
import { snapshotQueryOptions } from '@/queries/snapshot'
import { api, ApiError } from '@/lib/api-client'
import { Alert, AlertDescription, AlertTitle } from '@cfdm/ui/components/alert'
import { Badge } from '@cfdm/ui/components/badge'
import { Badge } from '@/components/reui/badge'
import { ResourcePage, columnDefFromDataGrid, loadStoredColumnVisibility, dataGridColumnVisibilityOptions } from '@/components/reui-kit'
import type { ColumnVisibilityState } from '@tanstack/react-table'
import type { DataGridColumn } from '@/components/data-grid-types'
@@ -224,7 +224,7 @@ function TariffsPage() {
header: 'Диск',
icon: HardDriveIcon,
sortValue: (t) => t.diskType ?? '',
cell: (t) => <Badge variant="outline">{t.diskType ?? '—'}</Badge>,
cell: (t) => <Badge variant="outline" size="sm" radius="full">{t.diskType ?? '—'}</Badge>,
},
{
key: 'location',
apps/web/src/routes/_auth/vps.$vpsId.tsx
+11 -3
View File
@@ -17,7 +17,7 @@ import { QueryState } from '@/components/query-state'
import { StatusBadge } from '@/components/status-badge'
import { Skeleton } from '@cfdm/ui/components/skeleton'
import { Button } from '@cfdm/ui/components/button'
import { Badge } from '@cfdm/ui/components/badge'
import { Badge } from '@/components/reui/badge'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@cfdm/ui/components/tabs'
import {
Frame,
@@ -200,8 +200,16 @@ function VpsDetailPage() {
<TabsContent value="overview" className="flex flex-col gap-4">
<div className="flex flex-wrap gap-2">
<StatusBadge status={row.status} label={vpsStatusLabel(row.status)} />
{row.project ? <Badge variant="outline">{row.project}</Badge> : null}
{row.environment ? <Badge variant="outline">{row.environment}</Badge> : null}
{row.project ? (
<Badge variant="outline" size="sm" radius="full">
{row.project}
</Badge>
) : null}
{row.environment ? (
<Badge variant="outline" size="sm" radius="full">
{row.environment}
</Badge>
) : null}
</div>
<div className="grid gap-4 md:grid-cols-2">
<DetailFrame title="Сеть" icon={<GlobeIcon className="size-4" />}>
apps/web/src/routes/_auth/vps.tsx
+52 -48
View File
@@ -10,11 +10,12 @@ import { normalizeRatesPayload, effectiveVpsTariffCurrency, formatInProviderCurr
import { PageShell } from '@/components/page-shell'
import { PageHeader } from '@/components/page-header'
import { Button } from '@cfdm/ui/components/button'
import { Badge } from '@cfdm/ui/components/badge'
import { Badge } from '@/components/reui/badge'
import { ResourcePage, columnDefFromDataGrid, loadStoredColumnVisibility, dataGridColumnVisibilityOptions } from '@/components/reui-kit'
import type { ColumnVisibilityState } from '@tanstack/react-table'
import type { DataGridColumn } from '@/components/data-grid-types'
import { dataGridCellStack, dataGridCellWithFlag } from '@/components/data-grid-cells'
import { DataGridNameCell, dataGridCellStack, dataGridCellWithFlag } from '@/components/data-grid-cells'
import { StatusBadge } from '@/components/status-badge'
import { CountryFlag } from '@/components/country-flag'
import { QueryState } from '@/components/query-state'
import { EmptyState } from '@/components/empty-state'
@@ -344,30 +345,35 @@ function VpsPage() {
header: 'IP / DNS',
icon: GlobeIcon,
sortValue: (v) => v.ip || v.dns || '',
cell: (v) =>
dataGridCellStack(
v.ip ? (
<Button
type="button"
variant="link"
className="h-auto p-0 font-normal"
onClick={() => void copyText(v.ip, 'IP скопирован')}
>
{v.ip}
</Button>
) : (
<span className="text-muted-foreground">—</span>
),
v.dns ? (
<Button
variant="link"
className="text-muted-foreground h-auto p-0 text-xs font-normal"
render={<Link to="/vps/$vpsId" params={{ vpsId: v.id }} />}
>
{v.dns}
</Button>
) : undefined,
),
cell: (v) => (
<DataGridNameCell
icon={GlobeIcon}
title={
v.ip ? (
<button
type="button"
className="truncate text-left font-medium hover:underline"
onClick={() => void copyText(v.ip, 'IP скопирован')}
>
{v.ip}
</button>
) : (
<span className="text-muted-foreground">—</span>
)
}
subtitle={
v.dns ? (
<Link
to="/vps/$vpsId"
params={{ vpsId: v.id }}
className="truncate hover:underline"
>
{v.dns}
</Link>
) : undefined
}
/>
),
},
{
key: 'domains',
@@ -439,11 +445,11 @@ function VpsPage() {
cell: (v) => (
<div className="flex items-center gap-1.5">
{v.access === 'shared' ? (
<Badge variant="outline">Общий</Badge>
<Badge variant="outline" size="sm" radius="full">
Общий
</Badge>
) : null}
<Badge variant={v.status === 'active' ? 'default' : v.status === 'archived' ? 'outline' : 'secondary'}>
{vpsStatusLabel(v.status)}
</Badge>
<StatusBadge status={v.status} label={vpsStatusLabel(v.status)} />
</div>
),
},
@@ -484,9 +490,9 @@ function VpsPage() {
cell: (v) => {
const ext = v as Vps & { lastHealthStatus?: string; monitoringEnabled?: boolean }
if (!ext.monitoringEnabled) return <span className="text-muted-foreground">—</span>
if (ext.lastHealthStatus === 'up') return <Badge variant="default">up</Badge>
if (ext.lastHealthStatus === 'down') return <Badge variant="destructive">down</Badge>
return <Badge variant="outline">—</Badge>
if (ext.lastHealthStatus === 'up') return <StatusBadge status="up" label="up" />
if (ext.lastHealthStatus === 'down') return <StatusBadge status="down" label="down" />
return <span className="text-muted-foreground">—</span>
},
},
{
@@ -529,7 +535,7 @@ function VpsPage() {
header: '',
sortable: false,
enableHiding: false,
className: 'w-24 text-right',
className: 'w-12 text-right',
cell: (v) => (
<RowActions
onEdit={v.access === 'shared' && v.grantPermission !== 'write' ? undefined : () => openEdit(v)}
@@ -537,19 +543,18 @@ function VpsPage() {
deleteTitle="Удалить VPS?"
deleteDescription={`IP ${v.ip} будет удалён безвозвратно.`}
extra={
v.access !== 'shared' ? (
<Button
variant="ghost"
size="icon-sm"
aria-label="Доступ"
onClick={() => {
setAccessVps(v)
setAccessOpen(true)
}}
>
<Share2Icon />
</Button>
) : null
v.access !== 'shared'
? [
{
label: 'Доступ',
icon: Share2Icon,
onSelect: () => {
setAccessVps(v)
setAccessOpen(true)
},
},
]
: undefined
}
/>
),
@@ -683,7 +688,6 @@ function VpsPage() {
data={section.items}
getRowId={(v) => v.id}
emptyTitle="VPS не найдены"
pinLastColumn
dense={filters.tableCompact}
enableRowSelection
onRowSelectionChange={setSelectedIds}