364 lines
12 KiB
TypeScript
364 lines
12 KiB
TypeScript
'use client';
|
|
|
|
import { ProTable, ProTableActions } from '@/components/pro-table';
|
|
import {
|
|
createServer,
|
|
deleteServer,
|
|
filterServerList,
|
|
hasMigrateSeverNode,
|
|
migrateServerNode,
|
|
resetSortWithServer,
|
|
updateServer,
|
|
} from '@/services/admin/server';
|
|
import { useNode } from '@/store/node';
|
|
import { useServer } from '@/store/server';
|
|
import { useQuery } from '@tanstack/react-query';
|
|
import { Badge } from '@workspace/ui/components/badge';
|
|
import { Button } from '@workspace/ui/components/button';
|
|
import { ConfirmButton } from '@workspace/ui/custom-components/confirm-button';
|
|
import { cn } from '@workspace/ui/lib/utils';
|
|
import { useTranslations } from 'next-intl';
|
|
import { useRef, useState } from 'react';
|
|
import { toast } from 'sonner';
|
|
import DynamicMultiplier from './dynamic-multiplier';
|
|
import OnlineUsersCell from './online-users-cell';
|
|
import ServerConfig from './server-config';
|
|
import ServerForm from './server-form';
|
|
|
|
function PctBar({ value }: { value: number }) {
|
|
const v = value.toFixed(2);
|
|
return (
|
|
<div className='min-w-24'>
|
|
<div className='text-xs leading-none'>{v}%</div>
|
|
<div className='bg-muted h-1.5 w-full rounded'>
|
|
<div className='bg-primary h-1.5 rounded' style={{ width: `${v}%` }} />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function RegionIpCell({
|
|
country,
|
|
city,
|
|
ip,
|
|
t,
|
|
}: {
|
|
country?: string;
|
|
city?: string;
|
|
ip?: string;
|
|
t: (key: string) => string;
|
|
}) {
|
|
const region = [country, city].filter(Boolean).join(' / ') || t('notAvailable');
|
|
return (
|
|
<div className='flex items-center gap-1'>
|
|
<Badge variant='outline'>{region}</Badge>
|
|
<Badge variant='secondary'>{ip || t('notAvailable')}</Badge>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function ServersPage() {
|
|
const t = useTranslations('servers');
|
|
const { isServerReferencedByNodes } = useNode();
|
|
const { fetchServers } = useServer();
|
|
|
|
const [loading, setLoading] = useState(false);
|
|
const [migrating, setMigrating] = useState(false);
|
|
const ref = useRef<ProTableActions>(null);
|
|
|
|
const { data: hasMigrate, refetch: refetchHasMigrate } = useQuery({
|
|
queryKey: ['hasMigrateSeverNode'],
|
|
queryFn: async () => {
|
|
const { data } = await hasMigrateSeverNode();
|
|
return data.data?.has_migrate;
|
|
},
|
|
});
|
|
|
|
const handleMigrate = async () => {
|
|
setMigrating(true);
|
|
try {
|
|
const { data } = await migrateServerNode();
|
|
const fail = data.data?.fail || 0;
|
|
if (fail > 0) {
|
|
toast.error(data.data?.message);
|
|
} else {
|
|
toast.success(t('migrated'));
|
|
}
|
|
refetchHasMigrate();
|
|
ref.current?.refresh();
|
|
} catch (error) {
|
|
toast.error(t('migrateFailed'));
|
|
} finally {
|
|
setMigrating(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className='space-y-4'>
|
|
<div className='grid grid-cols-1 gap-4 md:grid-cols-2'>
|
|
<DynamicMultiplier />
|
|
<ServerConfig />
|
|
</div>
|
|
<ProTable<API.Server, { search: string }>
|
|
action={ref}
|
|
header={{
|
|
title: t('pageTitle'),
|
|
toolbar: (
|
|
<div className='flex gap-2'>
|
|
{hasMigrate && (
|
|
<Button variant='outline' onClick={handleMigrate} disabled={migrating}>
|
|
{migrating ? t('migrating') : t('migrate')}
|
|
</Button>
|
|
)}
|
|
<ServerForm
|
|
trigger={t('create')}
|
|
title={t('drawerCreateTitle')}
|
|
loading={loading}
|
|
onSubmit={async (values) => {
|
|
setLoading(true);
|
|
try {
|
|
await createServer(values as unknown as API.CreateServerRequest);
|
|
toast.success(t('created'));
|
|
ref.current?.refresh();
|
|
fetchServers();
|
|
setLoading(false);
|
|
return true;
|
|
} catch (e) {
|
|
setLoading(false);
|
|
return false;
|
|
}
|
|
}}
|
|
/>
|
|
</div>
|
|
),
|
|
}}
|
|
columns={[
|
|
{
|
|
accessorKey: 'id',
|
|
header: t('id'),
|
|
cell: ({ row }) => <Badge>{row.getValue('id')}</Badge>,
|
|
},
|
|
{ accessorKey: 'name', header: t('name') },
|
|
{
|
|
id: 'region_ip',
|
|
header: t('address'),
|
|
cell: ({ row }) => (
|
|
<RegionIpCell
|
|
country={row.original.country as unknown as string}
|
|
city={row.original.city as unknown as string}
|
|
ip={row.original.address as unknown as string}
|
|
t={t}
|
|
/>
|
|
),
|
|
},
|
|
{
|
|
accessorKey: 'protocols',
|
|
header: t('protocols'),
|
|
cell: ({ row }) => {
|
|
const list = row.original.protocols.filter(
|
|
(p) => p.enable !== false,
|
|
) as API.Protocol[];
|
|
if (!list.length) return '—';
|
|
return (
|
|
<div className='flex flex-col gap-1'>
|
|
{list.map((p, idx) => {
|
|
const ratio = Number(p.ratio ?? 1) || 1;
|
|
return (
|
|
<div key={idx} className='flex items-center gap-2'>
|
|
<Badge variant='outline'>{ratio.toFixed(2)}x</Badge>
|
|
<Badge variant='secondary'>{p.type}</Badge>
|
|
<Badge variant='secondary'>{p.port}</Badge>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
},
|
|
},
|
|
|
|
{
|
|
id: 'status',
|
|
header: t('status'),
|
|
cell: ({ row }) => {
|
|
const offline = row.original.status.status === 'offline';
|
|
return (
|
|
<div className='flex items-center gap-2'>
|
|
<span
|
|
className={cn(
|
|
'inline-block h-2.5 w-2.5 rounded-full',
|
|
offline ? 'bg-zinc-400' : 'bg-emerald-500',
|
|
)}
|
|
/>
|
|
<span className='text-sm'>{offline ? t('offline') : t('online')}</span>
|
|
</div>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
id: 'cpu',
|
|
header: t('cpu'),
|
|
cell: ({ row }) => (
|
|
<PctBar value={(row.original.status?.cpu as unknown as number) ?? 0} />
|
|
),
|
|
},
|
|
{
|
|
id: 'mem',
|
|
header: t('memory'),
|
|
cell: ({ row }) => (
|
|
<PctBar value={(row.original.status?.mem as unknown as number) ?? 0} />
|
|
),
|
|
},
|
|
{
|
|
id: 'disk',
|
|
header: t('disk'),
|
|
cell: ({ row }) => (
|
|
<PctBar value={(row.original.status?.disk as unknown as number) ?? 0} />
|
|
),
|
|
},
|
|
|
|
{
|
|
id: 'online_users',
|
|
header: t('onlineUsers'),
|
|
cell: ({ row }) => <OnlineUsersCell status={row.original.status as API.ServerStatus} />,
|
|
},
|
|
// traffic ratio moved to per-protocol configs; column removed
|
|
]}
|
|
params={[{ key: 'search' }]}
|
|
request={async (pagination, filter) => {
|
|
const { data } = await filterServerList({
|
|
page: pagination.page,
|
|
size: pagination.size,
|
|
search: filter?.search || undefined,
|
|
});
|
|
const list = (data?.data?.list || []) as API.Server[];
|
|
const total = (data?.data?.total ?? list.length) as number;
|
|
return { list, total };
|
|
}}
|
|
actions={{
|
|
render: (row) => [
|
|
<ServerForm
|
|
key='edit'
|
|
trigger={t('edit')}
|
|
title={t('drawerEditTitle')}
|
|
initialValues={row}
|
|
loading={loading}
|
|
onSubmit={async (values) => {
|
|
setLoading(true);
|
|
try {
|
|
// ServerForm already returns API-shaped body; add id for update
|
|
await updateServer({
|
|
id: row.id,
|
|
...(values as unknown as Omit<API.UpdateServerRequest, 'id'>),
|
|
});
|
|
toast.success(t('updated'));
|
|
ref.current?.refresh();
|
|
fetchServers();
|
|
setLoading(false);
|
|
return true;
|
|
} catch (e) {
|
|
setLoading(false);
|
|
return false;
|
|
}
|
|
}}
|
|
/>,
|
|
<ConfirmButton
|
|
key='delete'
|
|
trigger={
|
|
<Button variant='destructive' disabled={isServerReferencedByNodes(row.id)}>
|
|
{t('delete')}
|
|
</Button>
|
|
}
|
|
title={t('confirmDeleteTitle')}
|
|
description={t('confirmDeleteDesc')}
|
|
onConfirm={async () => {
|
|
await deleteServer({ id: row.id } as any);
|
|
toast.success(t('deleted'));
|
|
ref.current?.refresh();
|
|
fetchServers();
|
|
}}
|
|
cancelText={t('cancel')}
|
|
confirmText={t('confirm')}
|
|
/>,
|
|
<Button
|
|
key='copy'
|
|
variant='outline'
|
|
onClick={async () => {
|
|
setLoading(true);
|
|
const { id, created_at, updated_at, last_reported_at, status, ...others } =
|
|
row as any;
|
|
const body: API.CreateServerRequest = {
|
|
name: others.name,
|
|
country: others.country,
|
|
city: others.city,
|
|
address: others.address,
|
|
protocols: others.protocols || [],
|
|
};
|
|
await createServer(body);
|
|
toast.success(t('copied'));
|
|
ref.current?.refresh();
|
|
fetchServers();
|
|
setLoading(false);
|
|
}}
|
|
>
|
|
{t('copy')}
|
|
</Button>,
|
|
],
|
|
batchRender(rows) {
|
|
const hasReferencedServers = rows.some((row) => isServerReferencedByNodes(row.id));
|
|
return [
|
|
<ConfirmButton
|
|
key='delete'
|
|
trigger={
|
|
<Button variant='destructive' disabled={hasReferencedServers}>
|
|
{t('delete')}
|
|
</Button>
|
|
}
|
|
title={t('confirmDeleteTitle')}
|
|
description={t('confirmDeleteDesc')}
|
|
onConfirm={async () => {
|
|
await Promise.all(rows.map((r) => deleteServer({ id: r.id })));
|
|
toast.success(t('deleted'));
|
|
ref.current?.refresh();
|
|
fetchServers();
|
|
}}
|
|
cancelText={t('cancel')}
|
|
confirmText={t('confirm')}
|
|
/>,
|
|
];
|
|
},
|
|
}}
|
|
onSort={async (source, target, items) => {
|
|
const sourceIndex = items.findIndex((item) => String(item.id) === source);
|
|
const targetIndex = items.findIndex((item) => String(item.id) === target);
|
|
|
|
const originalSorts = items.map((item) => item.sort);
|
|
|
|
const [movedItem] = items.splice(sourceIndex, 1);
|
|
items.splice(targetIndex, 0, movedItem!);
|
|
|
|
const updatedItems = items.map((item, index) => {
|
|
const originalSort = originalSorts[index];
|
|
const newSort = originalSort !== undefined ? originalSort : item.sort;
|
|
return { ...item, sort: newSort };
|
|
});
|
|
|
|
const changedItems = updatedItems.filter((item, index) => {
|
|
return item.sort !== items[index]?.sort;
|
|
});
|
|
|
|
if (changedItems.length > 0) {
|
|
resetSortWithServer({
|
|
sort: changedItems.map((item) => ({
|
|
id: item.id,
|
|
sort: item.sort,
|
|
})) as API.SortItem[],
|
|
});
|
|
toast.success(t('sorted_success'));
|
|
}
|
|
return updatedItems;
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|