718 lines
27 KiB
TypeScript
718 lines
27 KiB
TypeScript
import {
|
||
ApiOutlined,
|
||
DeleteOutlined,
|
||
EditOutlined,
|
||
FileTextOutlined,
|
||
GoogleOutlined,
|
||
PlusOutlined,
|
||
SyncOutlined,
|
||
ThunderboltOutlined,
|
||
UploadOutlined,
|
||
} from '@ant-design/icons'
|
||
import {
|
||
Alert,
|
||
Breadcrumb,
|
||
Button,
|
||
Checkbox,
|
||
Col,
|
||
Descriptions,
|
||
Divider,
|
||
Form,
|
||
Input,
|
||
InputNumber,
|
||
Modal,
|
||
Popconfirm,
|
||
Row,
|
||
Select,
|
||
Space,
|
||
Spin,
|
||
Table,
|
||
Tag,
|
||
Tooltip,
|
||
Typography,
|
||
Upload,
|
||
message,
|
||
} from 'antd'
|
||
import type { UploadFile } from 'antd'
|
||
import { useMemo, useState } from 'react'
|
||
import { useNavigate, useParams } from 'react-router-dom'
|
||
import {
|
||
useCreateDevice,
|
||
useDeleteDevice,
|
||
useDiscoverObject,
|
||
useUpdateDevice,
|
||
useDevices,
|
||
useImportCSV,
|
||
useObject,
|
||
usePreviewCSV,
|
||
useSyncObject,
|
||
useSyncSheets,
|
||
type DeviceImportPreview,
|
||
type DeviceItem,
|
||
} from '../api/objects'
|
||
import { useRacks, useCreateRack, useDeleteRack, type RackItem } from '../api/racks'
|
||
import { useZones, useCreateZone, useDeleteZone, type ZoneItem } from '../api/zones'
|
||
import { CategoryTag, DeviceStatusBadge } from '../components/StatusBadge'
|
||
import { stripEmpty } from '../utils/form'
|
||
import dayjs from 'dayjs'
|
||
|
||
const DEVICE_CATEGORIES = [
|
||
{ value: 'main_server', label: 'Главный сервер' },
|
||
{ value: 'vm', label: 'Виртуалка / сервис' },
|
||
{ value: 'router', label: 'Роутер / шлюз' },
|
||
{ value: 'embedded', label: 'Пром-ПК (embedded)' },
|
||
{ value: 'camera', label: 'Камера' },
|
||
{ value: 'io_board', label: 'Модуль ввода/вывода' },
|
||
{ value: 'bank_terminal', label: 'Банковский терминал' },
|
||
{ value: 'cash_register', label: 'ККТ' },
|
||
{ value: 'other', label: 'Другое' },
|
||
]
|
||
|
||
const DEVICE_ROLES = [
|
||
{ value: 'plate', label: 'ГРЗ (номерная)' },
|
||
{ value: 'face', label: 'Лицевая / обзорная' },
|
||
{ value: 'overview', label: 'Обзорная (улица)' },
|
||
{ value: 'other', label: 'Другое' },
|
||
]
|
||
|
||
const DEVICE_LOCATIONS = [
|
||
{ value: 'server_room', label: 'Серверная' },
|
||
{ value: 'street', label: 'Улица' },
|
||
]
|
||
|
||
export function InventoryObjectDetailPage() {
|
||
const { id } = useParams<{ id: string }>()
|
||
const objId = Number(id)
|
||
const navigate = useNavigate()
|
||
|
||
const { data: obj, isLoading: objLoading } = useObject(objId)
|
||
const { data: devices, isLoading: devLoading } = useDevices(objId)
|
||
const { data: racks } = useRacks(objId)
|
||
const { data: zones } = useZones(objId)
|
||
const syncMutation = useSyncObject(objId)
|
||
const discoverMutation = useDiscoverObject(objId)
|
||
const syncSheetsMutation = useSyncSheets(objId)
|
||
const createDevice = useCreateDevice(objId)
|
||
const updateDevice = useUpdateDevice(objId)
|
||
const deleteDevice = useDeleteDevice(objId)
|
||
const previewCSV = usePreviewCSV(objId)
|
||
const importCSV = useImportCSV(objId)
|
||
const createRack = useCreateRack(objId)
|
||
const deleteRack = useDeleteRack(objId)
|
||
const createZone = useCreateZone(objId)
|
||
const deleteZone = useDeleteZone(objId)
|
||
|
||
const [deviceModal, setDeviceModal] = useState(false)
|
||
const [editDevice, setEditDevice] = useState<DeviceItem | null>(null)
|
||
const [csvModal, setCsvModal] = useState(false)
|
||
const [rackModal, setRackModal] = useState(false)
|
||
const [sheetsModal, setSheetsModal] = useState(false)
|
||
const [csvFile, setCsvFile] = useState<File | null>(null)
|
||
const [csvPreview, setCsvPreview] = useState<DeviceImportPreview | null>(null)
|
||
const [searchText, setSearchText] = useState('')
|
||
|
||
const [deviceForm] = Form.useForm()
|
||
const [rackForm] = Form.useForm()
|
||
const [zoneForm] = Form.useForm()
|
||
const [sheetsForm] = Form.useForm()
|
||
|
||
const rackOptions = useMemo(
|
||
() => (racks ?? []).map((r) => ({ value: r.id, label: r.name })),
|
||
[racks]
|
||
)
|
||
|
||
const handleSync = async () => {
|
||
try {
|
||
const result = await syncMutation.mutateAsync()
|
||
message.success(`Синхронизировано: +${result.created} новых, ${result.updated} обновлено`)
|
||
} catch {
|
||
message.error('Ошибка синхронизации')
|
||
}
|
||
}
|
||
|
||
const handleDiscover = async () => {
|
||
try {
|
||
const result = await discoverMutation.mutateAsync()
|
||
const msg = `SSH Discovery: +${result.created} найдено, ${result.updated} обновлено`
|
||
if (result.errors.length > 0) {
|
||
message.warning(`${msg}. Ошибки: ${result.errors.join('; ')}`)
|
||
} else {
|
||
message.success(msg)
|
||
}
|
||
} catch {
|
||
message.error('Ошибка SSH discovery')
|
||
}
|
||
}
|
||
|
||
const handleSyncSheets = async () => {
|
||
try {
|
||
const values = await sheetsForm.validateFields()
|
||
const result = await syncSheetsMutation.mutateAsync({
|
||
spreadsheet_id: values.spreadsheet_id,
|
||
sheet_name: values.sheet_name || undefined,
|
||
})
|
||
message.success(`Google Sheets: +${result.created} создано, ${result.updated} обновлено`)
|
||
setSheetsModal(false)
|
||
sheetsForm.resetFields()
|
||
} catch (err: any) {
|
||
const detail = err?.response?.data?.detail
|
||
if (detail) message.error(detail)
|
||
}
|
||
}
|
||
|
||
const openAddDevice = () => {
|
||
deviceForm.resetFields()
|
||
setEditDevice(null)
|
||
setDeviceModal(true)
|
||
}
|
||
|
||
const openEditDevice = (row: DeviceItem) => {
|
||
deviceForm.resetFields()
|
||
deviceForm.setFieldsValue({
|
||
ip: row.ip,
|
||
hostname: row.hostname ?? '',
|
||
category: row.category,
|
||
role: row.role,
|
||
vendor: (row as any).vendor ?? '',
|
||
model: row.model ?? '',
|
||
mac: row.mac ?? '',
|
||
rack_id: row.rack_id ?? undefined,
|
||
location: (row as any).location ?? undefined,
|
||
monitor_enabled: row.monitor_enabled ?? false,
|
||
ssh_user_override: row.ssh_user_override ?? '',
|
||
ssh_port_override: row.ssh_port_override ?? undefined,
|
||
})
|
||
setEditDevice(row)
|
||
setDeviceModal(true)
|
||
}
|
||
|
||
const handleSaveDevice = async () => {
|
||
const values = await deviceForm.validateFields()
|
||
const payload = stripEmpty(values)
|
||
if ('rack_id' in values && values.rack_id === undefined) {
|
||
payload.rack_id = null
|
||
}
|
||
try {
|
||
if (editDevice) {
|
||
await updateDevice.mutateAsync({ id: editDevice.id, body: payload as any })
|
||
message.success('Устройство обновлено')
|
||
} else {
|
||
await createDevice.mutateAsync(payload as any)
|
||
message.success('Устройство добавлено')
|
||
}
|
||
setDeviceModal(false)
|
||
setEditDevice(null)
|
||
deviceForm.resetFields()
|
||
} catch {
|
||
message.error(editDevice ? 'Ошибка при обновлении' : 'Ошибка при добавлении')
|
||
}
|
||
}
|
||
|
||
const handleDeleteDevice = async (row: DeviceItem) => {
|
||
try {
|
||
await deleteDevice.mutateAsync(row.id)
|
||
message.success(`Устройство ${row.ip} удалено`)
|
||
} catch {
|
||
message.error('Ошибка при удалении устройства')
|
||
}
|
||
}
|
||
|
||
const handleCsvPreview = async () => {
|
||
if (!csvFile) return
|
||
try {
|
||
const preview = await previewCSV.mutateAsync(csvFile)
|
||
setCsvPreview(preview)
|
||
} catch {
|
||
message.error('Не удалось разобрать CSV')
|
||
}
|
||
}
|
||
|
||
const handleCsvImport = async () => {
|
||
if (!csvFile) return
|
||
try {
|
||
const result = await importCSV.mutateAsync(csvFile)
|
||
message.success(`Импортировано: +${result.created} создано, ${result.updated} обновлено`)
|
||
setCsvModal(false)
|
||
setCsvFile(null)
|
||
setCsvPreview(null)
|
||
} catch {
|
||
message.error('Ошибка при импорте CSV')
|
||
}
|
||
}
|
||
|
||
const closeCsvModal = () => {
|
||
setCsvModal(false)
|
||
setCsvFile(null)
|
||
setCsvPreview(null)
|
||
}
|
||
|
||
const handleAddZone = async () => {
|
||
const values = await zoneForm.validateFields()
|
||
try {
|
||
await createZone.mutateAsync(stripEmpty(values) as any)
|
||
message.success('Зона добавлена')
|
||
zoneForm.resetFields()
|
||
} catch {
|
||
message.error('Ошибка при добавлении зоны')
|
||
}
|
||
}
|
||
|
||
const handleAddRack = async () => {
|
||
const values = await rackForm.validateFields()
|
||
try {
|
||
await createRack.mutateAsync(stripEmpty(values) as any)
|
||
message.success('Стойка добавлена')
|
||
rackForm.resetFields()
|
||
} catch {
|
||
message.error('Ошибка при добавлении стойки')
|
||
}
|
||
}
|
||
|
||
const filteredDevices = useMemo(() => {
|
||
if (!searchText) return devices ?? []
|
||
const q = searchText.toLowerCase()
|
||
return (devices ?? []).filter(
|
||
(d) => d.ip.toLowerCase().includes(q) || (d.hostname ?? '').toLowerCase().includes(q)
|
||
)
|
||
}, [devices, searchText])
|
||
|
||
if (objLoading) return <Spin />
|
||
|
||
const deviceColumns = [
|
||
{
|
||
title: 'IP',
|
||
dataIndex: 'ip',
|
||
key: 'ip',
|
||
render: (ip: string) => <code>{ip}</code>,
|
||
},
|
||
{
|
||
title: 'Hostname',
|
||
dataIndex: 'hostname',
|
||
key: 'hostname',
|
||
render: (h: string | null) => h ?? '—',
|
||
},
|
||
{
|
||
title: 'Стойка / локация',
|
||
key: 'location',
|
||
render: (_: unknown, row: DeviceItem) => {
|
||
if (row.rack_name) return <Tag color="blue">{row.rack_name}</Tag>
|
||
const loc = (row as any).location
|
||
if (loc === 'server_room') return <Tag color="purple">Серверная</Tag>
|
||
if (loc === 'street') return <Tag color="orange">Улица</Tag>
|
||
return <Typography.Text type="secondary">—</Typography.Text>
|
||
},
|
||
filters: [
|
||
{ text: 'Без привязки', value: '__none__' },
|
||
{ text: 'Серверная', value: 'server_room' },
|
||
{ text: 'Улица', value: 'street' },
|
||
...(racks ?? []).map((r) => ({ text: r.name, value: `rack:${r.name}` })),
|
||
],
|
||
onFilter: (value: unknown, record: DeviceItem) => {
|
||
if (value === '__none__') return !record.rack_name && !(record as any).location
|
||
if (value === 'server_room') return (record as any).location === 'server_room'
|
||
if (value === 'street') return (record as any).location === 'street'
|
||
if (typeof value === 'string' && value.startsWith('rack:'))
|
||
return record.rack_name === value.slice(5)
|
||
return false
|
||
},
|
||
},
|
||
{
|
||
title: 'Категория',
|
||
dataIndex: 'category',
|
||
key: 'category',
|
||
render: (c: string) => <CategoryTag category={c} />,
|
||
filters: DEVICE_CATEGORIES.map((c) => ({ text: c.label, value: c.value })),
|
||
onFilter: (value: unknown, record: DeviceItem) => record.category === value,
|
||
},
|
||
{
|
||
title: 'Статус',
|
||
dataIndex: 'status',
|
||
key: 'status',
|
||
render: (s: string) => <DeviceStatusBadge status={s} />,
|
||
},
|
||
{
|
||
title: 'Последний ping',
|
||
dataIndex: 'last_seen',
|
||
key: 'last_seen',
|
||
render: (ts: string | null, row: DeviceItem) =>
|
||
ts ? (
|
||
<Tooltip title={dayjs(ts).format('DD.MM.YYYY HH:mm:ss')}>
|
||
<span>{row.last_ping_ms}ms</span>
|
||
</Tooltip>
|
||
) : '—',
|
||
},
|
||
{
|
||
title: 'Источник',
|
||
dataIndex: 'source',
|
||
key: 'source',
|
||
render: (s: string) => <Typography.Text type="secondary" style={{ fontSize: 12 }}>{s}</Typography.Text>,
|
||
},
|
||
{
|
||
title: '',
|
||
key: 'actions',
|
||
width: 100,
|
||
render: (_: unknown, row: DeviceItem) => (
|
||
<Space>
|
||
<Button size="small" icon={<EditOutlined />} onClick={() => openEditDevice(row)} />
|
||
<Popconfirm
|
||
title="Удалить устройство?"
|
||
okText="Удалить"
|
||
cancelText="Отмена"
|
||
okButtonProps={{ danger: true }}
|
||
onConfirm={() => handleDeleteDevice(row)}
|
||
>
|
||
<Button size="small" danger icon={<DeleteOutlined />} loading={deleteDevice.isPending} />
|
||
</Popconfirm>
|
||
</Space>
|
||
),
|
||
},
|
||
]
|
||
|
||
const zoneColumns = [
|
||
{ title: 'Название', dataIndex: 'name', key: 'name' },
|
||
{ title: 'Описание', dataIndex: 'description', key: 'description', render: (v: string | null) => v ?? '—' },
|
||
{
|
||
title: '',
|
||
key: 'actions',
|
||
width: 60,
|
||
render: (_: unknown, row: ZoneItem) => (
|
||
<Popconfirm
|
||
title="Удалить зону?"
|
||
description="Стойки останутся, привязка к зоне будет снята."
|
||
okText="Удалить"
|
||
cancelText="Отмена"
|
||
okButtonProps={{ danger: true }}
|
||
onConfirm={() => deleteZone.mutateAsync(row.id).catch(() => message.error('Ошибка удаления зоны'))}
|
||
>
|
||
<Button size="small" danger icon={<DeleteOutlined />} />
|
||
</Popconfirm>
|
||
),
|
||
},
|
||
]
|
||
|
||
const rackColumns = [
|
||
{ title: 'Название', dataIndex: 'name', key: 'name' },
|
||
{ title: 'Зона', dataIndex: 'zone_name', key: 'zone_name', render: (v: string | null) => v ? <Tag>{v}</Tag> : '—' },
|
||
{ title: 'Расположение', dataIndex: 'location', key: 'location', render: (v: string | null) => v ?? '—' },
|
||
{
|
||
title: '',
|
||
key: 'actions',
|
||
width: 60,
|
||
render: (_: unknown, row: RackItem) => (
|
||
<Popconfirm
|
||
title="Удалить стойку?"
|
||
description="Устройства останутся, привязка к стойке будет снята."
|
||
okText="Удалить"
|
||
cancelText="Отмена"
|
||
okButtonProps={{ danger: true }}
|
||
onConfirm={() => deleteRack.mutateAsync(row.id).catch(() => message.error('Ошибка удаления стойки'))}
|
||
>
|
||
<Button size="small" danger icon={<DeleteOutlined />} />
|
||
</Popconfirm>
|
||
),
|
||
},
|
||
]
|
||
|
||
const previewCreateCols = [
|
||
{ title: 'IP', dataIndex: 'ip', key: 'ip', render: (v: string) => <code>{v}</code> },
|
||
{ title: 'Hostname', dataIndex: 'hostname', key: 'hostname', render: (v: string) => v ?? '—' },
|
||
{ title: 'Категория', dataIndex: 'category', key: 'category' },
|
||
{ title: 'Роль', dataIndex: 'role', key: 'role' },
|
||
]
|
||
const previewUpdateCols = [
|
||
{ title: 'IP', dataIndex: 'ip', key: 'ip', render: (v: string) => <code>{v}</code> },
|
||
{
|
||
title: 'Изменения',
|
||
dataIndex: 'changes',
|
||
key: 'changes',
|
||
render: (changes: Record<string, { from: unknown; to: unknown }>) =>
|
||
Object.entries(changes).map(([k, v]) => `${k}: ${v.from} → ${v.to}`).join(', ') || '—',
|
||
},
|
||
]
|
||
|
||
// Breadcrumb items: Инвентарь → [City →] Object
|
||
const breadcrumbItems = [
|
||
{ title: <a onClick={() => navigate('/inventory/objects')}>Инвентарь</a> },
|
||
...(obj?.city ? [{ title: <a onClick={() => navigate('/inventory/objects')}>{obj.city}</a> }] : []),
|
||
{ title: obj?.name },
|
||
]
|
||
|
||
return (
|
||
<div>
|
||
<Breadcrumb style={{ marginBottom: 16 }} items={breadcrumbItems} />
|
||
|
||
<Row gutter={16} style={{ marginBottom: 16 }}>
|
||
<Col flex="auto">
|
||
<Descriptions size="small" bordered column={4}>
|
||
<Descriptions.Item label="Сервер">{obj?.server_ip ?? '—'}</Descriptions.Item>
|
||
<Descriptions.Item label="SSH">{obj?.ssh_user ?? '—'}</Descriptions.Item>
|
||
<Descriptions.Item label="БД">{obj?.db_host ?? '—'}</Descriptions.Item>
|
||
<Descriptions.Item label="Клиент">{obj?.client ?? '—'}</Descriptions.Item>
|
||
</Descriptions>
|
||
</Col>
|
||
<Col>
|
||
<Space wrap>
|
||
<Button icon={<SyncOutlined />} loading={syncMutation.isPending} onClick={handleSync}>
|
||
Синхронизировать из БД
|
||
</Button>
|
||
<Button icon={<ApiOutlined />} loading={discoverMutation.isPending} onClick={handleDiscover}>
|
||
SSH Discovery
|
||
</Button>
|
||
<Button icon={<UploadOutlined />} onClick={() => setCsvModal(true)}>
|
||
Импорт CSV
|
||
</Button>
|
||
<Button icon={<GoogleOutlined />} onClick={() => setSheetsModal(true)}>
|
||
Google Sheets
|
||
</Button>
|
||
<Button icon={<PlusOutlined />} type="primary" onClick={openAddDevice}>
|
||
Добавить устройство
|
||
</Button>
|
||
<Button icon={<FileTextOutlined />} onClick={() => navigate(`/inventory/objects/${objId}/snapshots`)}>
|
||
Снапшоты
|
||
</Button>
|
||
<Button icon={<ThunderboltOutlined />} onClick={() => setRackModal(true)}>
|
||
Стойки и зоны
|
||
</Button>
|
||
</Space>
|
||
</Col>
|
||
</Row>
|
||
|
||
<Input.Search
|
||
placeholder="Поиск по IP или hostname..."
|
||
allowClear
|
||
style={{ marginBottom: 12, maxWidth: 360 }}
|
||
onChange={(e) => setSearchText(e.target.value)}
|
||
/>
|
||
|
||
<Table
|
||
dataSource={filteredDevices}
|
||
columns={deviceColumns}
|
||
rowKey="id"
|
||
loading={devLoading}
|
||
size="middle"
|
||
pagination={{ pageSize: 50 }}
|
||
/>
|
||
|
||
{/* Rack & Zone Management Modal */}
|
||
<Modal
|
||
title="Стойки и зоны"
|
||
open={rackModal}
|
||
onCancel={() => { setRackModal(false); rackForm.resetFields(); zoneForm.resetFields() }}
|
||
footer={null}
|
||
width={820}
|
||
>
|
||
<Typography.Title level={5} style={{ marginTop: 0 }}>Зоны</Typography.Title>
|
||
<Form form={zoneForm} layout="inline" style={{ marginBottom: 12 }}>
|
||
<Form.Item name="name" rules={[{ required: true, message: 'Введите название' }]}>
|
||
<Input placeholder="Название зоны" style={{ width: 200 }} />
|
||
</Form.Item>
|
||
<Form.Item name="description">
|
||
<Input placeholder="Описание (опц.)" style={{ width: 180 }} />
|
||
</Form.Item>
|
||
<Form.Item>
|
||
<Button type="primary" icon={<PlusOutlined />} onClick={handleAddZone} loading={createZone.isPending}>
|
||
Добавить зону
|
||
</Button>
|
||
</Form.Item>
|
||
</Form>
|
||
<Table dataSource={zones ?? []} columns={zoneColumns} rowKey="id" size="small" pagination={false} locale={{ emptyText: 'Нет зон' }} style={{ marginBottom: 24 }} />
|
||
|
||
<Divider />
|
||
|
||
<Typography.Title level={5}>Стойки</Typography.Title>
|
||
<Form form={rackForm} layout="inline" style={{ marginBottom: 12 }}>
|
||
<Form.Item name="name" rules={[{ required: true, message: 'Введите название' }]}>
|
||
<Input placeholder="Название стойки" style={{ width: 180 }} />
|
||
</Form.Item>
|
||
<Form.Item name="zone_id">
|
||
<Select placeholder="Зона (опц.)" allowClear style={{ width: 150 }} options={(zones ?? []).map((z) => ({ value: z.id, label: z.name }))} />
|
||
</Form.Item>
|
||
<Form.Item name="location">
|
||
<Input placeholder="Расположение (опц.)" style={{ width: 150 }} />
|
||
</Form.Item>
|
||
<Form.Item>
|
||
<Button type="primary" icon={<PlusOutlined />} onClick={handleAddRack} loading={createRack.isPending}>
|
||
Добавить стойку
|
||
</Button>
|
||
</Form.Item>
|
||
</Form>
|
||
<Table dataSource={racks ?? []} columns={rackColumns} rowKey="id" size="small" pagination={false} locale={{ emptyText: 'Нет стоек' }} />
|
||
</Modal>
|
||
|
||
{/* CSV Import Modal */}
|
||
<Modal
|
||
title="Импорт устройств из CSV"
|
||
open={csvModal}
|
||
onCancel={closeCsvModal}
|
||
width={700}
|
||
footer={
|
||
<Space>
|
||
<Button onClick={closeCsvModal}>Отмена</Button>
|
||
{!csvPreview && <Button onClick={handleCsvPreview} loading={previewCSV.isPending} disabled={!csvFile}>Предпросмотр</Button>}
|
||
{csvPreview && <Button type="primary" onClick={handleCsvImport} loading={importCSV.isPending}>Импортировать</Button>}
|
||
</Space>
|
||
}
|
||
>
|
||
{!csvPreview ? (
|
||
<>
|
||
<Typography.Paragraph type="secondary" style={{ marginBottom: 12 }}>
|
||
Формат CSV: <code>ip, hostname, category, role, model, mac, notes</code>
|
||
</Typography.Paragraph>
|
||
<Upload.Dragger
|
||
accept=".csv"
|
||
maxCount={1}
|
||
beforeUpload={(file) => { setCsvFile(file); return false }}
|
||
onRemove={() => setCsvFile(null)}
|
||
fileList={csvFile ? [{ uid: '1', name: csvFile.name, status: 'done' } as UploadFile] : []}
|
||
>
|
||
<p className="ant-upload-drag-icon"><UploadOutlined style={{ fontSize: 32, color: '#1677ff' }} /></p>
|
||
<p className="ant-upload-text">Перетащите CSV-файл или нажмите для выбора</p>
|
||
</Upload.Dragger>
|
||
</>
|
||
) : (
|
||
<>
|
||
{csvPreview.errors.length > 0 && (
|
||
<Alert type="warning" style={{ marginBottom: 12 }} message={`${csvPreview.errors.length} строк с ошибками`} description={csvPreview.errors.map((e) => `Строка ${e.row}: ${e.error}`).join('\n')} />
|
||
)}
|
||
{csvPreview.would_create.length > 0 && (
|
||
<>
|
||
<Typography.Text strong>Будет создано: {csvPreview.would_create.length}</Typography.Text>
|
||
<Table size="small" dataSource={csvPreview.would_create} columns={previewCreateCols} rowKey="ip" pagination={false} style={{ marginTop: 8, marginBottom: 16 }} />
|
||
</>
|
||
)}
|
||
{csvPreview.would_update.length > 0 && (
|
||
<>
|
||
<Typography.Text strong>Будет обновлено: {csvPreview.would_update.length}</Typography.Text>
|
||
<Table size="small" dataSource={csvPreview.would_update} columns={previewUpdateCols} rowKey="ip" pagination={false} style={{ marginTop: 8 }} />
|
||
</>
|
||
)}
|
||
</>
|
||
)}
|
||
</Modal>
|
||
|
||
{/* Add / Edit Device Modal */}
|
||
<Modal
|
||
title={editDevice ? `Редактировать: ${editDevice.hostname ?? editDevice.ip}` : 'Добавить устройство'}
|
||
open={deviceModal}
|
||
onCancel={() => { setDeviceModal(false); setEditDevice(null); deviceForm.resetFields() }}
|
||
onOk={handleSaveDevice}
|
||
confirmLoading={createDevice.isPending || updateDevice.isPending}
|
||
okText={editDevice ? 'Сохранить' : 'Добавить'}
|
||
width={640}
|
||
>
|
||
<Form form={deviceForm} layout="vertical" style={{ marginTop: 16 }}>
|
||
<Row gutter={16}>
|
||
<Col span={12}>
|
||
<Form.Item name="ip" label="IP-адрес" rules={[{ required: true, message: 'Обязательное поле' }]}>
|
||
<Input placeholder="192.168.1.100" />
|
||
</Form.Item>
|
||
</Col>
|
||
<Col span={12}>
|
||
<Form.Item name="hostname" label="Hostname">
|
||
<Input placeholder="camera-01" />
|
||
</Form.Item>
|
||
</Col>
|
||
</Row>
|
||
|
||
<Row gutter={16}>
|
||
<Col span={12}>
|
||
<Form.Item name="category" label="Категория" rules={[{ required: true }]}>
|
||
<Select placeholder="Выберите категорию" options={DEVICE_CATEGORIES} />
|
||
</Form.Item>
|
||
</Col>
|
||
<Col span={12}>
|
||
<Form.Item name="role" label="Роль">
|
||
<Select placeholder="Выберите роль" allowClear options={DEVICE_ROLES} />
|
||
</Form.Item>
|
||
</Col>
|
||
</Row>
|
||
|
||
<Row gutter={16}>
|
||
<Col span={12}>
|
||
<Form.Item name="vendor" label="Производитель">
|
||
<Input placeholder="Iptronic, Овен, PAX..." />
|
||
</Form.Item>
|
||
</Col>
|
||
<Col span={12}>
|
||
<Form.Item name="model" label="Модель">
|
||
<Input placeholder="IPT-IPL1080S" />
|
||
</Form.Item>
|
||
</Col>
|
||
</Row>
|
||
|
||
<Row gutter={16}>
|
||
<Col span={12}>
|
||
<Form.Item name="rack_id" label="Стойка">
|
||
<Select placeholder="Без стойки" allowClear options={rackOptions} />
|
||
</Form.Item>
|
||
</Col>
|
||
<Col span={12}>
|
||
<Form.Item name="location" label="Локация (если не в стойке)">
|
||
<Select placeholder="Не задана" allowClear options={DEVICE_LOCATIONS} />
|
||
</Form.Item>
|
||
</Col>
|
||
</Row>
|
||
|
||
<Row gutter={16}>
|
||
<Col span={12}>
|
||
<Form.Item name="mac" label="MAC">
|
||
<Input placeholder="AA:BB:CC:DD:EE:FF" />
|
||
</Form.Item>
|
||
</Col>
|
||
</Row>
|
||
|
||
<Form.Item name="monitor_enabled" valuePropName="checked">
|
||
<Checkbox>Мониторинг (автоматический ping)</Checkbox>
|
||
</Form.Item>
|
||
|
||
<Divider orientation="left" plain>SSH (переопределить настройки объекта)</Divider>
|
||
|
||
<Row gutter={16}>
|
||
<Col span={8}>
|
||
<Form.Item name="ssh_user_override" label="Логин">
|
||
<Input placeholder="caps" />
|
||
</Form.Item>
|
||
</Col>
|
||
<Col span={10}>
|
||
<Form.Item name="ssh_password_override" label="Пароль">
|
||
<Input.Password placeholder="••••••••" />
|
||
</Form.Item>
|
||
</Col>
|
||
<Col span={6}>
|
||
<Form.Item name="ssh_port_override" label="Порт">
|
||
<InputNumber style={{ width: '100%' }} min={1} max={65535} placeholder="22" />
|
||
</Form.Item>
|
||
</Col>
|
||
</Row>
|
||
</Form>
|
||
</Modal>
|
||
|
||
{/* Google Sheets Sync Modal */}
|
||
<Modal
|
||
title="Синхронизация из Google Sheets"
|
||
open={sheetsModal}
|
||
onCancel={() => { setSheetsModal(false); sheetsForm.resetFields() }}
|
||
onOk={handleSyncSheets}
|
||
confirmLoading={syncSheetsMutation.isPending}
|
||
okText="Синхронизировать"
|
||
>
|
||
<Form form={sheetsForm} layout="vertical" style={{ marginTop: 16 }}>
|
||
<Form.Item
|
||
name="spreadsheet_id"
|
||
label="ID таблицы Google Sheets"
|
||
rules={[{ required: true, message: 'Введите ID таблицы' }]}
|
||
extra="Часть URL после /spreadsheets/d/ и перед /edit"
|
||
>
|
||
<Input placeholder="1BxiMVs0XRA5nFMdKvBdBZjgmUUqptlbs74OgVE2upms" />
|
||
</Form.Item>
|
||
<Form.Item name="sheet_name" label="Название листа (необязательно)" extra="По умолчанию используется первый лист">
|
||
<Input placeholder="Sheet1" />
|
||
</Form.Item>
|
||
</Form>
|
||
<Typography.Text type="secondary" style={{ fontSize: 12 }}>
|
||
Ожидаемые столбцы: ip, hostname, category, role, model, mac, notes
|
||
</Typography.Text>
|
||
</Modal>
|
||
</div>
|
||
)
|
||
}
|