denozord
6dfcaa584d
Publish Fast Tabler Docker image / build-and-push-fast (push) Successful in 1m46s
1062 lines
47 KiB
React
1062 lines
47 KiB
React
import { useState, useEffect, useRef } from 'react';
|
||
import api from './lib/api.js';
|
||
import CommunityAutocompleteInput from './components/CommunityAutocompleteInput.jsx';
|
||
import CommunityBadge from './components/CommunityBadge.jsx';
|
||
import ConfirmModal from './components/ConfirmModal.jsx';
|
||
import {
|
||
IconPlus,
|
||
IconSearch,
|
||
IconEdit,
|
||
IconTrash,
|
||
IconCheck,
|
||
IconX,
|
||
IconDatabase,
|
||
IconRefresh,
|
||
IconUpload,
|
||
IconDownload,
|
||
IconDeviceFloppy,
|
||
IconHash,
|
||
IconClock,
|
||
IconFileText,
|
||
IconFilter,
|
||
IconWorld,
|
||
IconTrendingUp,
|
||
IconUsers,
|
||
IconArrowUp,
|
||
IconArrowDown,
|
||
IconCopy
|
||
} from '@tabler/icons-react';
|
||
import TableSkeleton, { TableEmpty } from './components/TableSkeleton.jsx';
|
||
import PageHeader from './components/PageHeader.jsx';
|
||
import EmptyState from './components/EmptyState.jsx';
|
||
import Breadcrumbs from './components/Breadcrumbs.jsx';
|
||
import { IconAlertTriangle } from '@tabler/icons-react';
|
||
import S3MetaBar from './components/S3MetaBar.jsx';
|
||
import PageHeaderActions from './components/PageHeaderActions.jsx';
|
||
import ConfirmDialog from './components/ConfirmDialog.jsx';
|
||
import WsUpdateModal from './components/WsUpdateModal.jsx';
|
||
import ConfirmDiffModal from './components/ConfirmDiffModal.jsx';
|
||
import HistoryModal from './components/HistoryModal.jsx';
|
||
import ErrorAlert from './components/ErrorAlert.jsx';
|
||
import { notifyMutationSuccess } from './components/NotifyProvider.jsx';
|
||
import ImportModal from './components/ImportModal.jsx';
|
||
import QuickAddBar from './components/QuickAddBar.jsx';
|
||
import AccordionCard from './components/AccordionCard.jsx';
|
||
import SavedFilters from './components/SavedFilters.jsx';
|
||
import BulkActionsBar from './components/BulkActionsBar.jsx';
|
||
import FormField from './components/FormField.jsx';
|
||
import Tooltip from './components/Tooltip.jsx';
|
||
import Pagination from './components/Pagination.jsx';
|
||
import { useToast } from './components/ToastContainer.jsx';
|
||
|
||
const API_URL = '/api';
|
||
|
||
function DomainsNewManager() {
|
||
const toast = useToast();
|
||
const [items, setItems] = useState([]);
|
||
const [originalItems, setOriginalItems] = useState([]);
|
||
const [etag, setEtag] = useState('');
|
||
const [lastModified, setLastModified] = useState('');
|
||
const [contentLength, setContentLength] = useState(null);
|
||
const [newItem, setNewItem] = useState({ domain: '', community: '' });
|
||
const [newInvalid, setNewInvalid] = useState({ domain: false, community: false });
|
||
const [error, setError] = useState('');
|
||
const [success, setSuccess] = useState('');
|
||
const [searchTerm, setSearchTerm] = useState('');
|
||
const searchTimer = useRef(null);
|
||
const didInit = useRef(false);
|
||
const [editingDomain, setEditingDomain] = useState(null);
|
||
const [editingValue, setEditingValue] = useState('');
|
||
const [loading, setLoading] = useState(false);
|
||
const [showDeleteModal, setShowDeleteModal] = useState(false);
|
||
const [itemToDelete, setItemToDelete] = useState(null);
|
||
const [currentPage, setCurrentPage] = useState(1);
|
||
const [totalItems, setTotalItems] = useState(0);
|
||
const [sortField, setSortField] = useState('domain');
|
||
const [sortOrder, setSortOrder] = useState('asc');
|
||
const [filterCommunity, setFilterCommunity] = useState('');
|
||
const editInputRef = useRef(null);
|
||
const pageSize = 10;
|
||
|
||
// Bulk operations
|
||
const [selectedDomains, setSelectedDomains] = useState(new Set());
|
||
|
||
// Справочник community для подсказок
|
||
const [communities, setCommunities] = useState([]);
|
||
useEffect(() => {
|
||
(async () => {
|
||
try {
|
||
const res = await api.get(`/communities`);
|
||
setCommunities(Array.isArray(res.data) ? res.data : []);
|
||
} catch (e) {
|
||
// тихо игнорируем
|
||
}
|
||
})();
|
||
}, []);
|
||
|
||
const renderCommunityBadge = (value) => (<CommunityBadge value={value} communities={communities} />);
|
||
|
||
const isValidDomain = (value) => {
|
||
const v = String(value).trim().toLowerCase();
|
||
// Простой валидатор FQDN: sub.domain.tld
|
||
return /^([a-z0-9-]+\.)+[a-z]{2,}$/i.test(v);
|
||
};
|
||
|
||
// Допускаем как числовые, так и строковые (AS:NNN) community
|
||
const isValidCommunity = (value) => /^(\d+|\d+:\d+)$/.test(String(value).trim());
|
||
|
||
const [wsOpen, setWsOpen] = useState(false);
|
||
const [wsUrl, setWsUrl] = useState('');
|
||
|
||
useEffect(() => {
|
||
(async () => { try { const r = await api.get('/ws/url'); setWsUrl(String(r.data?.url || '')); } catch {} })();
|
||
}, []);
|
||
|
||
const fetchItems = async () => {
|
||
setLoading(true);
|
||
try {
|
||
const response = await api.get(`/domains-new`, { params: { offset: 0, limit: 0, format: 'std' } });
|
||
const payload = Array.isArray(response.data?.items) ? response.data.items : [];
|
||
const total = payload.length;
|
||
setItems(payload);
|
||
setOriginalItems(payload);
|
||
setTotalItems(Number.isFinite(total) ? total : 0);
|
||
setEtag(response.headers?.etag || '');
|
||
setLastModified(response.headers?.['last-modified'] || '');
|
||
const lengthHeader = response.headers?.['content-length-source'];
|
||
setContentLength(typeof lengthHeader !== 'undefined' ? Number(lengthHeader) : null);
|
||
setError('');
|
||
} catch (error) {
|
||
console.error('Error fetching domains-new:', error);
|
||
setError('Не удалось загрузить домены. Проверьте, запущен ли бэкенд.');
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
// Подгрузка при изменении страницы/поиска/фильтра
|
||
useEffect(() => { if (!didInit.current) { didInit.current = true; fetchItems(); } }, []);
|
||
|
||
const handleAddItem = () => {
|
||
const domainOk = isValidDomain(newItem.domain);
|
||
const communityOk = isValidCommunity(newItem.community);
|
||
setNewInvalid({ domain: !domainOk, community: !communityOk });
|
||
if (!domainOk || !communityOk) {
|
||
setError('Заполните корректный домен (example.com) и числовой community.');
|
||
return;
|
||
}
|
||
setError('');
|
||
setItems([...items, { domain: newItem.domain.trim().toLowerCase(), community: String(newItem.community).trim() }]);
|
||
setNewItem({ domain: '', community: '' });
|
||
setNewInvalid({ domain: false, community: false });
|
||
};
|
||
|
||
const handleEdit = (item) => {
|
||
setEditingDomain(item.domain);
|
||
setEditingValue(item.community);
|
||
};
|
||
|
||
const handleSaveEdit = (domainName) => {
|
||
if (!isValidCommunity(editingValue)) {
|
||
setError('Community должен быть числом.');
|
||
return;
|
||
}
|
||
const updatedItems = items.map(i =>
|
||
i.domain === domainName ? { ...i, community: String(editingValue).trim() } : i
|
||
);
|
||
setItems(updatedItems);
|
||
setEditingDomain(null);
|
||
};
|
||
|
||
const handleCancelEdit = () => {
|
||
setEditingDomain(null);
|
||
};
|
||
|
||
const handleDeleteItem = (domainNameToDelete) => {
|
||
setItems(items.filter(i => i.domain !== domainNameToDelete));
|
||
setSelectedDomains(prev => {
|
||
const next = new Set(prev);
|
||
next.delete(domainNameToDelete);
|
||
return next;
|
||
});
|
||
};
|
||
|
||
const copyToClipboard = (text) => {
|
||
navigator.clipboard.writeText(text).then(() => {
|
||
toast.success('Скопировано в буфер обмена');
|
||
}).catch(() => {
|
||
toast.error('Не удалось скопировать');
|
||
});
|
||
};
|
||
|
||
const confirmDelete = (item) => {
|
||
setItemToDelete(item);
|
||
setShowDeleteModal(true);
|
||
};
|
||
|
||
const executeDelete = () => {
|
||
if (itemToDelete) {
|
||
handleDeleteItem(itemToDelete.domain);
|
||
setShowDeleteModal(false);
|
||
setItemToDelete(null);
|
||
}
|
||
};
|
||
|
||
const deduplicate = (arr) => {
|
||
const seen = new Set();
|
||
const out = [];
|
||
for (const i of arr) {
|
||
const key = String(i.domain).trim().toLowerCase();
|
||
if (!key) continue;
|
||
if (seen.has(key)) continue;
|
||
seen.add(key);
|
||
out.push({ domain: key, community: String(i.community || '').trim() });
|
||
}
|
||
return out;
|
||
};
|
||
|
||
const computeDiff = (before, after) => {
|
||
const mapBefore = new Map(before.map(i => [i.domain, i]));
|
||
const mapAfter = new Map(after.map(i => [i.domain, i]));
|
||
const added = [];
|
||
const removed = [];
|
||
const changed = [];
|
||
for (const [k, v] of mapAfter) {
|
||
if (!mapBefore.has(k)) { added.push(v); continue; }
|
||
const prev = mapBefore.get(k);
|
||
if (String(prev.community) !== String(v.community)) changed.push({ from: prev, to: v });
|
||
}
|
||
for (const [k, v] of mapBefore) {
|
||
if (!mapAfter.has(k)) removed.push(v);
|
||
}
|
||
return { added, removed, changed };
|
||
};
|
||
|
||
const [showDiff, setShowDiff] = useState(false);
|
||
const [diff, setDiff] = useState({ added: [], removed: [], changed: [] });
|
||
const [confirmSaveOpen, setConfirmSaveOpen] = useState(false);
|
||
const [historyOpen, setHistoryOpen] = useState(false);
|
||
const [clearCommunitiesOpen, setClearCommunitiesOpen] = useState(false);
|
||
|
||
const handlePreviewDiff = () => {
|
||
const valid = items.filter(i => i != null && isValidDomain(i.domain) && isValidCommunity(i.community))
|
||
.map(i => ({ domain: i.domain.trim().toLowerCase(), community: String(i.community).trim() }));
|
||
const unique = deduplicate(valid);
|
||
setDiff(computeDiff(originalItems, unique));
|
||
setShowDiff(true);
|
||
};
|
||
|
||
const handleSaveChanges = async () => {
|
||
// подготовим diff и спросим подтверждение только при массовых изменениях (>10)
|
||
const valid = items.filter(i => i != null && isValidDomain(i.domain) && isValidCommunity(i.community))
|
||
.map(i => ({ domain: i.domain.trim().toLowerCase(), community: String(i.community).trim() }));
|
||
const unique = deduplicate(valid);
|
||
const diffData = computeDiff(originalItems, unique);
|
||
setDiff(diffData);
|
||
|
||
// Умное подтверждение: показываем модалку только при массовых изменениях
|
||
const totalChanges = (diffData.added?.length || 0) + (diffData.removed?.length || 0) + (diffData.changed?.length || 0);
|
||
|
||
if (totalChanges > 10) {
|
||
// Массовое изменение - требуется подтверждение
|
||
setConfirmSaveOpen(true);
|
||
} else {
|
||
// Малое изменение - сохраняем сразу
|
||
performSave();
|
||
}
|
||
};
|
||
|
||
const performSave = async () => {
|
||
setConfirmSaveOpen(false);
|
||
setLoading(true);
|
||
try {
|
||
const valid = items.filter(i => isValidDomain(i.domain) && isValidCommunity(i.community))
|
||
.map(i => ({ domain: i.domain.trim().toLowerCase(), community: String(i.community).trim() }));
|
||
const unique = deduplicate(valid);
|
||
|
||
// Подгружаем весь список, применяем изменения текущей страницы и сохраняем полные данные
|
||
const fullRes = await api.get(`/domains-new`, { params: { offset: 0, limit: 0, format: 'std' } });
|
||
const full = Array.isArray(fullRes.data?.items) ? fullRes.data.items : (Array.isArray(fullRes.data) ? fullRes.data : []);
|
||
const fullMap = new Map(full.filter(i => i != null).map(i => [String(i.domain || '').trim().toLowerCase(), { domain: String(i.domain || '').trim().toLowerCase(), community: String(i.community || '').trim() }]));
|
||
const originalPageMap = new Map(originalItems.map(i => [String(i.domain).trim().toLowerCase(), true]));
|
||
const uniqueMap = new Map(unique.map(i => [String(i.domain).trim().toLowerCase(), { domain: String(i.domain).trim().toLowerCase(), community: String(i.community).trim() }]));
|
||
// Удаления: всё, что было на странице, но отсутствует в изменённом наборе
|
||
for (const key of originalPageMap.keys()) {
|
||
if (!uniqueMap.has(key)) fullMap.delete(key);
|
||
}
|
||
// Добавления/изменения
|
||
for (const [key, val] of uniqueMap.entries()) fullMap.set(key, val);
|
||
const fullToSave = Array.from(fullMap.values());
|
||
|
||
const et = fullRes?.headers?.etag || etag;
|
||
const response = await api.post(`/domains-new`, { domains: fullToSave, etag: et }, { validateStatus: () => true });
|
||
if (response.status === 412) {
|
||
setError('Данные изменились в S3 (ETag mismatch). Обновите список и попробуйте снова.');
|
||
return;
|
||
}
|
||
if (response.status >= 400) {
|
||
throw new Error(`Save failed with status ${response.status}`);
|
||
}
|
||
setEtag(response.headers?.etag || et);
|
||
// После сохранения перезагрузим текущую страницу для консистентности
|
||
await fetchItems();
|
||
setSuccess('Изменения успешно сохранены!');
|
||
setTimeout(() => setSuccess(''), 3000);
|
||
notifyMutationSuccess('Изменения сохранены');
|
||
} catch (error) {
|
||
console.error('Error saving changes:', error);
|
||
setError('Не удалось сохранить изменения.');
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
// Drag&Drop импорт
|
||
const onDropImport = async (e) => {
|
||
e.preventDefault();
|
||
const file = e.dataTransfer?.files?.[0];
|
||
if (!file) return;
|
||
const text = await file.text();
|
||
const lines = text.split(/\r?\n/).map(l => l.trim()).filter(Boolean);
|
||
const parsed = lines.map(l => {
|
||
const [d, c] = l.split(/\s+/);
|
||
return { domain: (d || '').toLowerCase(), community: (c || '').trim() };
|
||
}).filter(i => i != null && isValidDomain(i.domain) && isValidCommunity(i.community));
|
||
setItems(prev => {
|
||
const merged = [...prev, ...parsed];
|
||
const map = new Map();
|
||
for (const it of merged) {
|
||
const key = String(it.domain).trim().toLowerCase();
|
||
if (!map.has(key)) map.set(key, { domain: key, community: String(it.community).trim() });
|
||
}
|
||
return Array.from(map.values());
|
||
});
|
||
};
|
||
|
||
const handleImport = () => {
|
||
setImportOpen(true);
|
||
};
|
||
|
||
const handleExport = async () => {
|
||
try {
|
||
const effectiveQ = searchTerm ? searchTerm : (filterCommunity ? filterCommunity : '');
|
||
const response = await api.get(`/domains-new`, { params: { q: effectiveQ, offset: 0, limit: 0, format: 'std' } });
|
||
const all = Array.isArray(response.data?.items) ? response.data.items : (Array.isArray(response.data) ? response.data : []);
|
||
const header = ['domain', 'community'];
|
||
const csv = [header, ...all.filter(i => i != null).map(i => [i.domain || '', i.community || ''])]
|
||
.map(r => r.map(x => `"${(x ?? '').toString().replace(/"/g, '""')}"`).join(','))
|
||
.join('\n');
|
||
const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
|
||
const url = URL.createObjectURL(blob);
|
||
const a = document.createElement('a');
|
||
a.href = url;
|
||
a.download = `domains_${new Date().toISOString().split('T')[0]}.csv`;
|
||
a.click();
|
||
URL.revokeObjectURL(url);
|
||
} catch (e) {
|
||
window.notify?.error('Экспорт доменов не удался', String(e?.message || e));
|
||
}
|
||
};
|
||
|
||
const clearInvalid = () => {
|
||
setItems(prev => prev.filter(i => i != null && (i.domain || i.community))
|
||
.filter(i => isValidDomain(i.domain) && isValidCommunity(i.community))
|
||
);
|
||
};
|
||
|
||
// ===== Импорт через модалку =====
|
||
const [importOpen, setImportOpen] = useState(false);
|
||
const parseLine = (line) => {
|
||
const [d, c] = String(line).split(/\s+/);
|
||
return { domain: (d || '').toLowerCase(), community: (c || '').trim() };
|
||
};
|
||
const validateItem = (obj) => isValidDomain(obj.domain) && isValidCommunity(obj.community);
|
||
const applyImportedItems = (list) => {
|
||
setItems(prev => {
|
||
const merged = [...prev, ...list];
|
||
const map = new Map();
|
||
for (const it of merged) {
|
||
const key = String(it.domain).trim().toLowerCase();
|
||
if (!map.has(key)) map.set(key, { domain: key, community: String(it.community).trim() });
|
||
}
|
||
return Array.from(map.values());
|
||
});
|
||
setImportOpen(false);
|
||
};
|
||
|
||
// Сортировка
|
||
const sortedItems = [...items].sort((a, b) => {
|
||
let valA = a[sortField] || '';
|
||
let valB = b[sortField] || '';
|
||
if (typeof valA === 'string') valA = valA.toLowerCase();
|
||
if (typeof valB === 'string') valB = valB.toLowerCase();
|
||
if (valA < valB) return sortOrder === 'asc' ? -1 : 1;
|
||
if (valA > valB) return sortOrder === 'asc' ? 1 : -1;
|
||
return 0;
|
||
});
|
||
|
||
// Локальная фильтрация и пагинация
|
||
const filtered = sortedItems.filter(i => {
|
||
if (!i) return false;
|
||
const byCommunity = !filterCommunity || i.community === filterCommunity;
|
||
const term = String(searchTerm || '').toLowerCase();
|
||
const bySearch = !term || String(i.domain || '').toLowerCase().includes(term);
|
||
return byCommunity && bySearch;
|
||
});
|
||
const totalPages = Math.max(1, Math.ceil(filtered.length / pageSize));
|
||
const paginatedItems = filtered.slice((currentPage - 1) * pageSize, (currentPage) * pageSize);
|
||
|
||
// Для фильтра - список всех уникальных community
|
||
const allCommunities = Array.from(new Set(items.filter(i => i != null).map(i => i.community).filter(c => c != null)));
|
||
|
||
// Сортировка по клику
|
||
const handleSort = (field) => {
|
||
if (sortField === field) {
|
||
setSortOrder(sortOrder === 'asc' ? 'desc' : 'asc');
|
||
} else {
|
||
setSortField(field);
|
||
setSortOrder('asc');
|
||
}
|
||
};
|
||
|
||
// Улучшенный инлайн-редакт
|
||
useEffect(() => {
|
||
if (editingDomain && editInputRef.current) {
|
||
editInputRef.current.focus();
|
||
}
|
||
}, [editingDomain]);
|
||
|
||
// Глобальные хоткеи: Ctrl+S — сохранить изменения
|
||
useEffect(() => {
|
||
const onKey = (e) => {
|
||
if ((e.ctrlKey || e.metaKey) && (e.key === 's' || e.key === 'S')) {
|
||
e.preventDefault();
|
||
if (!loading) handleSaveChanges();
|
||
}
|
||
};
|
||
window.addEventListener('keydown', onKey);
|
||
return () => window.removeEventListener('keydown', onKey);
|
||
}, [loading, items, originalItems, etag, sortField, sortOrder, filterCommunity]);
|
||
|
||
const handleEditKeyDown = (e, domainName) => {
|
||
if (e.key === 'Enter') handleSaveEdit(domainName);
|
||
if (e.key === 'Escape') handleCancelEdit();
|
||
};
|
||
|
||
// Bulk operations handlers
|
||
const handleSelectAll = () => {
|
||
setSelectedDomains(new Set(paginatedItems.map(i => i.domain)));
|
||
};
|
||
|
||
const handleDeselectAll = () => {
|
||
setSelectedDomains(new Set());
|
||
};
|
||
|
||
const handleToggleSelect = (domain) => {
|
||
const newSet = new Set(selectedDomains);
|
||
if (newSet.has(domain)) {
|
||
newSet.delete(domain);
|
||
} else {
|
||
newSet.add(domain);
|
||
}
|
||
setSelectedDomains(newSet);
|
||
};
|
||
|
||
const handleBulkDelete = () => {
|
||
if (selectedDomains.size === 0) return;
|
||
const count = selectedDomains.size;
|
||
const newItems = items.filter(i => !selectedDomains.has(i.domain));
|
||
setItems(newItems);
|
||
setSelectedDomains(new Set());
|
||
toast.success(`Удалено ${count} доменов`);
|
||
};
|
||
|
||
const handleBulkExport = () => {
|
||
if (selectedDomains.size === 0) return;
|
||
const selectedItems = items.filter(i => i != null && selectedDomains.has(i.domain));
|
||
const text = selectedItems.map(i => `${i.domain || ''} ${i.community || ''}`).join('\n');
|
||
const blob = new Blob([text], { type: 'text/plain' });
|
||
const url = URL.createObjectURL(blob);
|
||
const a = document.createElement('a');
|
||
a.href = url;
|
||
a.download = `domains-selected-${selectedDomains.size}.txt`;
|
||
a.click();
|
||
URL.revokeObjectURL(url);
|
||
toast.success(`Экспортировано ${selectedDomains.size} доменов`);
|
||
};
|
||
|
||
return (
|
||
<>
|
||
{error && (
|
||
<ErrorAlert message={error} onClose={() => setError('')} />
|
||
)}
|
||
|
||
{success && (
|
||
<div className="alert alert-success alert-dismissible" role="alert">
|
||
<div className="d-flex">
|
||
<div>
|
||
<IconCheck className="icon alert-icon" />
|
||
</div>
|
||
<div>
|
||
{success}
|
||
</div>
|
||
</div>
|
||
<button type="button" className="btn-close" onClick={() => setSuccess('')}></button>
|
||
</div>
|
||
)}
|
||
|
||
<PageHeader
|
||
title="Домены"
|
||
pretitle={(
|
||
<Breadcrumbs
|
||
items={[
|
||
{ label: 'Главная', to: '/dashboard' },
|
||
{ label: 'Данные' },
|
||
{ label: 'Домены', count: filtered.length },
|
||
]}
|
||
showBack={false}
|
||
filterInfo={filterCommunity ? `Community: ${filterCommunity}` : (searchTerm ? `Поиск: "${searchTerm}"` : null)}
|
||
count={filtered.length}
|
||
/>
|
||
)}
|
||
actions={(
|
||
<PageHeaderActions
|
||
loading={loading}
|
||
onPreview={handlePreviewDiff}
|
||
disablePreview={loading || items.length === 0}
|
||
onRefresh={fetchItems}
|
||
disableRefresh={loading}
|
||
onImport={handleImport}
|
||
onExport={handleExport}
|
||
disableExport={items.length === 0}
|
||
onClear={clearInvalid}
|
||
disableClear={items.length === 0}
|
||
onClearCommunities={() => { if (!filterCommunity) { setError('Выберите community в фильтре для очистки'); return; } setClearCommunitiesOpen(true); }}
|
||
disableClearCommunities={items.length === 0 || !filterCommunity}
|
||
onSave={handleSaveChanges}
|
||
disableSave={loading}
|
||
onHistory={() => setHistoryOpen(true)}
|
||
onOnlineUpdate={() => setWsOpen(true)}
|
||
onBackgroundUpdate={async () => {
|
||
try {
|
||
const res = await fetch('/api/update-bgp/background', { method: 'POST' });
|
||
const data = await res.json().catch(() => ({}));
|
||
if (!res.ok || data.ok === false) {
|
||
throw new Error(data?.message || `HTTP ${res.status}`);
|
||
}
|
||
notifyMutationSuccess('Фоновое обновление запущено', data);
|
||
} catch (e) {
|
||
window.notify?.error('Не удалось запустить фоновое обновление', String(e));
|
||
}
|
||
}}
|
||
/>
|
||
)}
|
||
/>
|
||
|
||
<div className="row">
|
||
<div className="col-lg-3">
|
||
{/* Classic Add New Domain Card (improved) */}
|
||
<div className="card card-md animate-in">
|
||
<div className="card-header bg-primary-lt">
|
||
<h3 className="card-title text-primary">
|
||
<IconPlus className="icon me-2" />
|
||
Добавить новый домен
|
||
</h3>
|
||
</div>
|
||
<div className="card-body">
|
||
<form onSubmit={(e) => { e.preventDefault(); handleAddItem(); }}>
|
||
<div className="mb-3">
|
||
<label className="form-label required">Домен</label>
|
||
<div className="input-icon">
|
||
<span className="input-icon-addon">
|
||
<IconWorld size={18} />
|
||
</span>
|
||
<input
|
||
type="text"
|
||
className={`form-control${newInvalid.domain ? ' is-invalid' : isValidDomain(newItem.domain) ? ' is-valid' : ''}`}
|
||
placeholder="example.com"
|
||
value={newItem.domain}
|
||
onChange={(e) => setNewItem({ ...newItem, domain: e.target.value })}
|
||
/>
|
||
</div>
|
||
{newInvalid.domain && <div className="invalid-feedback">Неверный формат домена</div>}
|
||
{isValidDomain(newItem.domain) && !newInvalid.domain && (
|
||
<div className="valid-feedback">Корректный формат домена</div>
|
||
)}
|
||
<div className="form-text text-muted small">
|
||
Формат: sub.domain.tld (например foo.example.org)
|
||
</div>
|
||
</div>
|
||
<div className="mb-3">
|
||
<label className="form-label required">Community</label>
|
||
<div className="input-icon">
|
||
<span className="input-icon-addon">
|
||
<IconHash size={18} />
|
||
</span>
|
||
<CommunityAutocompleteInput
|
||
value={newItem.community}
|
||
onChange={(v) => setNewItem({ ...newItem, community: v })}
|
||
communities={communities}
|
||
placeholder="Начните вводить номер или имя"
|
||
className={`form-control${newInvalid.community ? ' is-invalid' : isValidCommunity(newItem.community) ? ' is-valid' : ''}`}
|
||
useShortValue={true}
|
||
/>
|
||
</div>
|
||
{newInvalid.community && <div className="invalid-feedback">Неверный формат community</div>}
|
||
{isValidCommunity(newItem.community) && !newInvalid.community && (
|
||
<div className="valid-feedback">Корректный формат community</div>
|
||
)}
|
||
<div className="form-text text-muted small">
|
||
Формат: N или N:N (например 65000:100)
|
||
</div>
|
||
{(() => {
|
||
const match = communities.find(c => c.value === String(newItem.community).trim());
|
||
if (!match) return null;
|
||
return (
|
||
<div className="alert alert-info alert-dismissible mt-2 mb-0" role="alert">
|
||
<div className="d-flex">
|
||
<div>
|
||
<strong>{match.name || match.value}</strong>
|
||
{match.description && <div className="text-muted small">{match.description}</div>}
|
||
{match.tags && match.tags.length > 0 && (
|
||
<div className="mt-1">
|
||
{match.tags.map((tag, idx) => (
|
||
<span key={idx} className="badge bg-blue-lt text-blue me-1">{tag}</span>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
})()}
|
||
</div>
|
||
<div className="form-footer">
|
||
<button
|
||
type="submit"
|
||
className="btn btn-primary w-100"
|
||
disabled={!isValidDomain(newItem.domain) || !isValidCommunity(newItem.community)}
|
||
>
|
||
<IconPlus className="icon me-2" />
|
||
Добавить домен
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Дополнительные варианты */}
|
||
<AccordionCard title={'Дополнительные варианты'} defaultOpen={false} className="animate-in" style={{animationDelay: '0.1s'}}>
|
||
<QuickAddBar
|
||
placeholder={'example.com 65000:100'}
|
||
help={'Вставьте строки: DOMAIN ПРОБЕЛ COMMUNITY'}
|
||
parseLine={(line) => { const [d, c] = String(line).split(/\s+/); return { domain: (d||'').toLowerCase(), community: (c||'').trim() }; }}
|
||
validateItem={(obj) => isValidDomain(obj.domain) && isValidCommunity(obj.community)}
|
||
onApply={(list) => {
|
||
setItems(prev => {
|
||
const merged = [...prev, ...list];
|
||
const map = new Map();
|
||
for (const it of merged) {
|
||
const key = String(it.domain).trim().toLowerCase();
|
||
if (!map.has(key)) map.set(key, { domain: key, community: String(it.community).trim() });
|
||
}
|
||
return Array.from(map.values());
|
||
});
|
||
}}
|
||
/>
|
||
<div
|
||
className="card card-md border-dashed mt-3 animate-in"
|
||
style={{animationDelay: '0.15s'}}
|
||
onDragOver={(e) => { e.preventDefault(); e.currentTarget.style.borderColor = 'var(--tblr-primary)'; }}
|
||
onDragLeave={(e) => { e.currentTarget.style.borderColor = ''; }}
|
||
onDrop={(e) => { e.currentTarget.style.borderColor = ''; onDropImport(e); }}
|
||
>
|
||
<div className="card-body text-center text-muted py-4">
|
||
<IconUpload size={32} className="mb-2 text-muted" />
|
||
<div className="fw-medium">Перетащите файл TXT/CSV сюда</div>
|
||
<div className="small">Формат: domain community</div>
|
||
</div>
|
||
</div>
|
||
</AccordionCard>
|
||
</div>
|
||
|
||
<div className="col-lg-9">
|
||
{/* Bulk Actions Bar */}
|
||
<BulkActionsBar
|
||
selectedCount={selectedDomains.size}
|
||
totalCount={paginatedItems.length}
|
||
onSelectAll={handleSelectAll}
|
||
onDeselectAll={handleDeselectAll}
|
||
onDelete={handleBulkDelete}
|
||
onExport={handleBulkExport}
|
||
/>
|
||
|
||
<div className="card animate-in" style={{animationDelay: '0.3s'}}>
|
||
<div className="card-header">
|
||
<div className="row align-items-center w-100 g-2">
|
||
<div className="col-auto">
|
||
<h3 className="card-title mb-0">
|
||
<IconWorld className="icon me-2" size={20} />
|
||
Список доменов
|
||
<span className="badge bg-blue-lt text-blue ms-2">{filtered.length}</span>
|
||
</h3>
|
||
</div>
|
||
<div className="col">
|
||
<div className="d-flex gap-2 flex-wrap">
|
||
{/* Сохранённые фильтры */}
|
||
<SavedFilters
|
||
pageKey="domains"
|
||
currentFilters={{ searchTerm, filterCommunity, sortField, sortOrder }}
|
||
onApplyFilter={(filters) => {
|
||
if (filters.searchTerm !== undefined) setSearchTerm(filters.searchTerm);
|
||
if (filters.filterCommunity !== undefined) setFilterCommunity(filters.filterCommunity);
|
||
if (filters.sortField !== undefined) setSortField(filters.sortField);
|
||
if (filters.sortOrder !== undefined) setSortOrder(filters.sortOrder);
|
||
setCurrentPage(1);
|
||
}}
|
||
/>
|
||
|
||
{/* Фильтр по community */}
|
||
<div className="input-icon">
|
||
<span className="input-icon-addon">
|
||
<IconFilter size={18} />
|
||
</span>
|
||
<select
|
||
className="form-select"
|
||
style={{ minWidth: '200px' }}
|
||
value={filterCommunity}
|
||
onChange={e => { setFilterCommunity(e.target.value); setCurrentPage(1); }}
|
||
title={(() => {
|
||
const meta = communities.find(c => c.value === filterCommunity);
|
||
if (!meta) return 'Все community';
|
||
const name = meta.name ? meta.name + ' — ' : '';
|
||
const desc = meta.description || '';
|
||
const tags = meta.tags && meta.tags.length ? ' (' + meta.tags.join(', ') + ')' : '';
|
||
return name + desc + tags;
|
||
})()}
|
||
>
|
||
<option value="">Все community</option>
|
||
{allCommunities.map(community => {
|
||
const meta = communities.find(c => c.value === community);
|
||
const label = meta && meta.name ? `${community} — ${meta.name}` : community;
|
||
const title = meta ? `${meta.name ? meta.name + ' — ' : ''}${meta.description || ''}${meta.tags && meta.tags.length ? ' (' + meta.tags.join(', ') + ')' : ''}` : community;
|
||
return (
|
||
<option key={community} value={community} title={title}>{label}</option>
|
||
);
|
||
})}
|
||
</select>
|
||
</div>
|
||
|
||
{/* Поиск */}
|
||
<div className="input-icon flex-grow-1" style={{ minWidth: '200px', position: 'relative' }}>
|
||
<span className="input-icon-addon">
|
||
<IconSearch size={18} />
|
||
</span>
|
||
<input
|
||
type="text"
|
||
className="form-control"
|
||
placeholder="Поиск домена..."
|
||
value={searchTerm}
|
||
onChange={e => { setSearchTerm(e.target.value); setCurrentPage(1); }}
|
||
aria-label="Поиск домена"
|
||
style={{ paddingRight: searchTerm ? '2.5rem' : undefined }}
|
||
/>
|
||
{searchTerm && (
|
||
<button
|
||
type="button"
|
||
className="btn btn-ghost-secondary btn-icon btn-sm"
|
||
style={{
|
||
position: 'absolute',
|
||
right: '0.25rem',
|
||
top: '50%',
|
||
transform: 'translateY(-50%)',
|
||
zIndex: 2
|
||
}}
|
||
onClick={() => { setSearchTerm(''); setCurrentPage(1); }}
|
||
aria-label="Очистить поиск"
|
||
>
|
||
<IconX size={16} />
|
||
</button>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{/* Мета-информация будет показана внизу карточки */}
|
||
{loading ? (
|
||
<TableSkeleton rows={10} cols={4} hasCheckbox={true} />
|
||
) : paginatedItems.length === 0 ? (
|
||
<TableEmpty cols={3}>
|
||
<EmptyState
|
||
title="Нет доменов"
|
||
description="Импортируйте или добавьте записи, чтобы начать."
|
||
action={<button className="btn btn-primary" onClick={handleImport}>Импорт</button>}
|
||
secondaryAction={<button className="btn btn-outline-primary" onClick={() => {
|
||
const header = ['domain','community'];
|
||
const lines = [header, ['example.com','65000:100']].map(r => r.map(x => `"${(x ?? '').toString().replace(/"/g, '""')}"`).join(',')).join('\n');
|
||
const blob = new Blob([lines], { type: 'text/csv;charset=utf-8;' });
|
||
const url = URL.createObjectURL(blob);
|
||
const a = document.createElement('a'); a.href = url; a.download = 'domains_sample.csv'; a.click(); URL.revokeObjectURL(url);
|
||
}}>Шаблон CSV</button>}
|
||
/>
|
||
</TableEmpty>
|
||
) : (
|
||
<div className="table-responsive">
|
||
<table className="table card-table table-vcenter table-nowrap mb-0">
|
||
<thead>
|
||
<tr>
|
||
<th style={{ width: '40px' }}>
|
||
<input
|
||
type="checkbox"
|
||
className="form-check-input"
|
||
checked={selectedDomains.size === paginatedItems.length && paginatedItems.length > 0}
|
||
onChange={(e) => e.target.checked ? handleSelectAll() : handleDeselectAll()}
|
||
/>
|
||
</th>
|
||
<th className="cursor-pointer user-select-none" onClick={() => handleSort('domain')}>
|
||
<div className="d-flex align-items-center">
|
||
<IconWorld size={16} className="me-1 text-muted" />
|
||
Домен
|
||
{sortField === 'domain' && (
|
||
<span className="ms-1">
|
||
{sortOrder === 'asc' ? <IconArrowUp size={14} /> : <IconArrowDown size={14} />}
|
||
</span>
|
||
)}
|
||
</div>
|
||
</th>
|
||
<th className="cursor-pointer user-select-none" onClick={() => handleSort('community')}>
|
||
<div className="d-flex align-items-center">
|
||
<IconHash size={16} className="me-1 text-muted" />
|
||
Community
|
||
{sortField === 'community' && (
|
||
<span className="ms-1">
|
||
{sortOrder === 'asc' ? <IconArrowUp size={14} /> : <IconArrowDown size={14} />}
|
||
</span>
|
||
)}
|
||
</div>
|
||
</th>
|
||
<th className="text-end">Действия</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{paginatedItems.map((item, idx) => (
|
||
<tr
|
||
key={item.domain}
|
||
className={editingDomain === item.domain ? 'table-active' : (selectedDomains.has(item.domain) ? 'table-selected' : '')}
|
||
style={{
|
||
animation: `fadeIn 0.3s ease ${idx * 0.02}s both`
|
||
}}
|
||
>
|
||
<td>
|
||
<input
|
||
type="checkbox"
|
||
className="form-check-input"
|
||
checked={selectedDomains.has(item.domain)}
|
||
onChange={() => handleToggleSelect(item.domain)}
|
||
aria-label={`Выбрать ${item.domain}`}
|
||
onClick={(e) => e.stopPropagation()}
|
||
/>
|
||
</td>
|
||
<td>
|
||
<div className="d-flex align-items-center">
|
||
<IconWorld size={16} className="me-2 text-muted" />
|
||
<span className="font-monospace">{item.domain}</span>
|
||
<Tooltip content="Копировать домен" position="top">
|
||
<button
|
||
className="btn btn-ghost-secondary btn-icon btn-sm ms-2"
|
||
onClick={() => copyToClipboard(item.domain)}
|
||
aria-label="Копировать"
|
||
title="Копировать домен"
|
||
>
|
||
<IconCopy size={14} />
|
||
</button>
|
||
</Tooltip>
|
||
</div>
|
||
</td>
|
||
<td>
|
||
<div className="d-flex align-items-center">
|
||
{renderCommunityBadge(item.community)}
|
||
</div>
|
||
</td>
|
||
<td className="text-end">
|
||
<div className="btn-group">
|
||
{editingDomain === item.domain ? (
|
||
<>
|
||
<CommunityAutocompleteInput
|
||
value={editingValue}
|
||
onChange={setEditingValue}
|
||
communities={communities}
|
||
onKeyDown={(e) => handleEditKeyDown(e, item.domain)}
|
||
className={`form-control d-inline-block me-2${isValidCommunity(editingValue) ? '' : ' is-invalid'}`}
|
||
style={{ width: '150px' }}
|
||
useShortValue={true}
|
||
/>
|
||
<Tooltip content="Сохранить (Enter)">
|
||
<button
|
||
className="btn btn-success btn-icon btn-sm"
|
||
onClick={() => handleSaveEdit(item.domain)}
|
||
disabled={!isValidCommunity(editingValue)}
|
||
aria-label="Сохранить"
|
||
>
|
||
<IconCheck size={16} />
|
||
</button>
|
||
</Tooltip>
|
||
<Tooltip content="Отмена (Esc)">
|
||
<button
|
||
className="btn btn-secondary btn-icon btn-sm"
|
||
onClick={handleCancelEdit}
|
||
aria-label="Отмена"
|
||
>
|
||
<IconX size={16} />
|
||
</button>
|
||
</Tooltip>
|
||
</>
|
||
) : (
|
||
<>
|
||
<Tooltip content="Редактировать" position="top">
|
||
<button
|
||
className="btn btn-outline-primary btn-icon btn-sm"
|
||
aria-label="Редактировать"
|
||
onClick={() => handleEdit(item)}
|
||
title="Редактировать"
|
||
>
|
||
<IconEdit size={16} />
|
||
</button>
|
||
</Tooltip>
|
||
<Tooltip content="Копировать" position="top">
|
||
<button
|
||
className="btn btn-outline-secondary btn-icon btn-sm"
|
||
aria-label="Копировать"
|
||
onClick={() => copyToClipboard(`${item.domain} ${item.community}`)}
|
||
title="Копировать"
|
||
>
|
||
<IconCopy size={16} />
|
||
</button>
|
||
</Tooltip>
|
||
<Tooltip content="Удалить" position="top">
|
||
<button
|
||
className="btn btn-outline-danger btn-icon btn-sm"
|
||
aria-label="Удалить"
|
||
onClick={() => confirmDelete(item)}
|
||
title="Удалить"
|
||
>
|
||
<IconTrash size={16} />
|
||
</button>
|
||
</Tooltip>
|
||
</>
|
||
)}
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
)}
|
||
{/* Пагинация */}
|
||
<Pagination
|
||
currentPage={currentPage}
|
||
totalPages={totalPages}
|
||
totalItems={totalItems || filtered.length}
|
||
pageSize={pageSize}
|
||
onPageChange={setCurrentPage}
|
||
/>
|
||
<S3MetaBar keys={["domainsNew"]} />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<ConfirmModal
|
||
show={showDeleteModal}
|
||
onClose={() => setShowDeleteModal(false)}
|
||
onConfirm={executeDelete}
|
||
title="Удалить домен?"
|
||
message={
|
||
itemToDelete ? (
|
||
<>
|
||
<p>Вы уверены, что хотите удалить <strong>"{itemToDelete.domain}"</strong>?</p>
|
||
<p className="text-muted mb-0">Это действие необратимо.</p>
|
||
</>
|
||
) : null
|
||
}
|
||
confirmLabel="Удалить"
|
||
variant="danger"
|
||
icon={IconTrash}
|
||
/>
|
||
{/* Confirm Save Modal */}
|
||
<ConfirmDiffModal
|
||
show={confirmSaveOpen}
|
||
diff={diff}
|
||
onConfirm={performSave}
|
||
onClose={() => setConfirmSaveOpen(false)}
|
||
/>
|
||
<ImportModal
|
||
show={importOpen}
|
||
title={'Импорт доменов'}
|
||
description={'Формат: DOMAIN ПРОБЕЛ COMMUNITY'}
|
||
parseLine={parseLine}
|
||
validateItem={validateItem}
|
||
onConfirm={applyImportedItems}
|
||
onClose={() => setImportOpen(false)}
|
||
sampleHeader={['domain','community']}
|
||
placeholder={'example.com 65000:100'}
|
||
/>
|
||
<HistoryModal
|
||
resource="domains-new"
|
||
show={historyOpen}
|
||
onClose={() => setHistoryOpen(false)}
|
||
onRolledBack={() => fetchItems()}
|
||
/>
|
||
<WsUpdateModal
|
||
show={wsOpen}
|
||
url={wsUrl}
|
||
onClose={() => setWsOpen(false)}
|
||
/>
|
||
<ConfirmModal
|
||
show={clearCommunitiesOpen}
|
||
onClose={() => setClearCommunitiesOpen(false)}
|
||
onConfirm={() => {
|
||
setItems(prev => prev.filter(i => i != null && i.community !== filterCommunity));
|
||
setClearCommunitiesOpen(false);
|
||
}}
|
||
title="Удалить записи community?"
|
||
message={
|
||
<>
|
||
<p>Будут удалены все домены с community <strong>"{filterCommunity}"</strong>.</p>
|
||
<p className="text-warning mb-0">
|
||
<IconAlertTriangle size={16} className="me-1" />
|
||
Действие НЕ сохраняет изменения автоматически.
|
||
</p>
|
||
</>
|
||
}
|
||
confirmLabel="Удалить"
|
||
variant="warning"
|
||
/>
|
||
{/* Diff Modal */}
|
||
{showDiff && (
|
||
<div className="modal modal-blur fade show" style={{display: 'block'}} tabIndex="-1">
|
||
<div className="modal-dialog modal-lg modal-dialog-centered" role="document">
|
||
<div className="modal-content">
|
||
<button type="button" className="btn-close" onClick={() => setShowDiff(false)}></button>
|
||
<div className="modal-header"><h3 className="modal-title">Изменения</h3></div>
|
||
<div className="modal-body">
|
||
<div className="row g-3">
|
||
<div className="col-md-4"><div className="card"><div className="card-body"><strong>Добавлено</strong><div className="text-muted">{diff.added.length}</div></div></div></div>
|
||
<div className="col-md-4"><div className="card"><div className="card-body"><strong>Удалено</strong><div className="text-muted">{diff.removed.length}</div></div></div></div>
|
||
<div className="col-md-4"><div className="card"><div className="card-body"><strong>Изменено</strong><div className="text-muted">{diff.changed.length}</div></div></div></div>
|
||
</div>
|
||
</div>
|
||
<div className="modal-footer">
|
||
<button className="btn" onClick={() => setShowDiff(false)}>Закрыть</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
{/* datalist больше не нужен, т.к. используем кастомный автокомплит */}
|
||
</>
|
||
);
|
||
}
|
||
|
||
export default DomainsNewManager; |