denozord/router-lists-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(ASNsNewManager): enhance JSX formatting and structure for improved readability and consistency in component layout
Publish Fast Tabler Docker image / build-and-push-fast (push) Successful in 1m50s
Details

Browse Source
This commit is contained in:
denozord
2026-02-16 19:02:37 +07:00
parent 4ce3bf4a9f
commit 700e6674e5
1 changed files with 323 additions and 255 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/ASNsNewManager.jsx
+323 -255
View File
@@ -510,25 +510,27 @@ function ASNsNewManager() {
{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>{success}</div>
</div>
<button type="button" className="btn-close" onClick={() => setSuccess('')}></button>
<button
type="button"
className="btn-close"
onClick={() => setSuccess('')}
></button>
</div>
)}
<PageHeader
title="ASNs"
meta={<LastSaved timestamp={lastModified} variant="compact" />}
actions={(
actions={
<PageHeaderActions
loading={loading}
onPreview={handlePreviewDiff}
@@ -540,7 +542,13 @@ function ASNsNewManager() {
disableExport={items.length === 0}
onClear={clearInvalid}
disableClear={items.length === 0}
onClearCommunities={() => { if (!filterCommunity) { setError('Выберите community в фильтре для очистки'); return; } setClearCommunitiesOpen(true); }}
onClearCommunities={() => {
if (!filterCommunity) {
setError('Выберите community в фильтре для очистки');
return;
}
setClearCommunitiesOpen(true);
}}
disableClearCommunities={items.length === 0 || !filterCommunity}
onSave={handleSaveChanges}
disableSave={loading}
@@ -549,18 +557,23 @@ function ASNsNewManager() {
onOnlineUpdate={() => setWsOpen(true)}
onBackgroundUpdate={async () => {
try {
const res = await fetch('/api/update-bgp/background', { method: 'POST' });
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));
window.notify?.error(
'Не удалось запустить фоновое обновление',
String(e),
);
}
}}
/>
)}
}
/>
<AddItemModal
@@ -572,257 +585,302 @@ function ASNsNewManager() {
loading={loading}
/>
<div className="row">
<div className="col-12">
{/* BulkActionsBar */}
<BulkActionsBar
selectedCount={selectedItems.size}
totalCount={paginatedItems.length}
onSelectAll={selectAll}
onDeselectAll={deselectAll}
onDelete={selectedItems.size > 0 ? () => {
if (confirm(`Удалить ${selectedItems.size} записей?`)) {
handleBulkDelete();
}
} : null}
onExport={selectedItems.size > 0 ? handleBulkExport : null}
/>
<div className="card card-flat">
<div className="card-header">
<div className="row align-items-center w-100 g-2">
<div className="col">
<div className="d-flex align-items-center justify-content-between flex-wrap gap-2">
<div className="d-flex align-items-center gap-2">
<IconHash className="icon text-muted" size={18} />
<span className="text-muted text-uppercase small">Список</span>
<span className="badge bg-blue-lt text-blue">{filtered.length}</span>
</div>
<div className="d-none d-md-block text-muted small">
Всего записей: {filtered.length}
</div>
</div>
</div>
<div className="col-12 mt-2"></div>
<div className="col d-flex gap-2 flex-wrap align-items-center">
<SavedFilters
pageKey="asns"
currentFilters={{ searchTerm, filterCommunity, sortField, sortOrder }}
onApplyFilter={(filters) => {
setSearchTerm(filters.searchTerm || '');
setFilterCommunity(filters.filterCommunity || '');
setSortField(filters.sortField || 'asn');
setSortOrder(filters.sortOrder || 'asc');
setCurrentPage(1);
}}
/>
{/* Фильтр по community */}
<div className="input-icon">
<span className="input-icon-addon">
<IconFilter size={18} />
<div className="card card-flat">
<div className="card-header">
<div className="row align-items-center w-100 g-2">
<div className="col">
<div className="d-flex align-items-center justify-content-between flex-wrap gap-2">
<div className="d-flex align-items-center gap-2">
<IconHash className="icon text-muted" size={18} />
<span className="text-muted text-uppercase small">Список</span>
<span className="badge bg-blue-lt text-blue">
{filtered.length}
</span>
<select
className="form-select"
style={{ minWidth: '200px' }}
value={filterCommunity}
onChange={e => { setFilterCommunity(e.target.value); setCurrentPage(1); }}
title={(() => {
const meta = communities.find(c => String(c.value) === String(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 => String(c.value) === String(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={String(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="Поиск ASN..."
value={searchTerm}
onChange={e => { setSearchTerm(e.target.value); setCurrentPage(1); }}
aria-label="Поиск ASN"
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 }}
aria-label="Очистить поиск"
onClick={() => { setSearchTerm(''); setCurrentPage(1); }}
>
<IconX size={16} />
</button>
)}
<div className="d-none d-md-block text-muted small">
Всего записей: {filtered.length}
</div>
<button
className="btn btn-primary"
onClick={() => setAddModalOpen(true)}
title="Добавить новый ASN"
>
<IconPlus className="me-1" size={18} />
Добавить
</button>
</div>
</div>
<div className="card-body p-0">
{/* Таблица на лёгкой карточной подложке */}
{loading ? (
<TableSkeleton rows={10} cols={3} flat />
) : paginatedItems.length === 0 ? (
<TableEmpty cols={3} flat>
<EmptyState
title="Нет ASN"
description="Импортируйте или добавьте записи, чтобы начать."
action={<button className="btn btn-primary" onClick={handleImport}>Импорт</button>}
secondaryAction={<button className="btn btn-outline-primary" onClick={() => {
const header = ['asn','community'];
const lines = [header, ['12345','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 = 'asns_sample.csv'; a.click(); URL.revokeObjectURL(url);
}}>Шаблон CSV</button>}
/>
</TableEmpty>
) : (
<div className="table-responsive">
<table className="table table-flat table-vcenter table-nowrap mb-0">
<thead>
<tr>
<th style={{width: '40px'}}>
<input
type="checkbox"
className="form-check-input"
checked={paginatedItems.length > 0 && paginatedItems.every(i => selectedItems.has(i.asn))}
onChange={(e) => {
if (e.target.checked) {
selectAll();
} else {
deselectAll();
}
}}
title="Выбрать все на странице"
/>
</th>
<th className="cursor-pointer user-select-none" onClick={() => handleSort('asn')}>
<div className="d-flex align-items-center">
<IconHash size={16} className="me-1 text-muted" />
Номер AS
{sortField === 'asn' && (
<span className="ms-1">
{sortOrder === 'asc' ? <IconArrowUp size={14} /> : <IconArrowDown size={14} />}
</span>
)}
</div>
</th>
<th>
Имя AS
</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.asn} className={selectedItems.has(item.asn) ? 'table-selected' : ''} style={{ animation: `fadeIn 0.3s ease ${idx * 0.02}s both` }}>
<td>
<input
type="checkbox"
className="form-check-input"
checked={selectedItems.has(item.asn)}
onChange={() => toggleSelectItem(item.asn)}
onClick={(e) => e.stopPropagation()}
/>
</td>
<td className="font-monospace" title="ASN">
<div className="d-flex align-items-center">
<IconHash size={16} className="me-2 text-muted" />
<span>{item.asn}</span>
<Tooltip content="Копировать ASN" position="top">
<button
className="btn btn-ghost-secondary btn-icon btn-sm ms-2"
onClick={() => copyToClipboard(item.asn)}
aria-label="Копировать"
title="Копировать ASN"
>
<IconCopy size={14} />
</button>
</Tooltip>
</div>
</td>
<td title={asnNameMap[item.asn] || ''}>
{asnNameMap[item.asn] ? (
<span>{asnNameMap[item.asn]}</span>
) : (
<span className="text-muted">—</span>
)}
</td>
<td>{renderCommunityBadge(item.community)}</td>
<td className="text-end">
<div className="btn-group btn-group-sm" role="group" aria-label={`Действия с ASN ${item.asn}`}>
<Tooltip content="Редактировать" position="top">
<button className="btn btn-icon btn-outline-primary me-1" aria-label="Редактировать" onClick={() => handleEdit(item)} title="Редактировать">
<IconEdit size={16} />
</button>
</Tooltip>
<Tooltip content="Удалить" position="top">
<button className="btn btn-icon btn-outline-danger" aria-label="Удалить" onClick={() => confirmDelete(item)} title="Удалить">
<IconTrash size={16} />
</button>
</Tooltip>
</div>
</td>
</tr>
))}
</tbody>
</table>
</div>
)}
</div>
<div className="card-footer border-top-0">
<Pagination
currentPage={currentPage}
totalPages={totalPages}
totalItems={totalItems || filtered.length}
pageSize={pageSize}
onPageChange={setCurrentPage}
/>
<div className="col-12 mt-2"></div>
<div className="col d-flex gap-2 flex-wrap align-items-center">
<div className="input-icon" style={{ minWidth: '200px' }}>
<span className="input-icon-addon">
<IconFilter size={18} />
</span>
<select
className="form-select"
value={filterCommunity}
onChange={(e) => {
setFilterCommunity(e.target.value);
setCurrentPage(1);
}}
>
<option value="">Все community</option>
{allCommunities.map((community) => (
<option key={community} value={String(community)}>
{community}
</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="Поиск ASN..."
value={searchTerm}
onChange={(e) => {
setSearchTerm(e.target.value);
setCurrentPage(1);
}}
aria-label="Поиск ASN"
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,
}}
aria-label="Очистить поиск"
onClick={() => {
setSearchTerm('');
setCurrentPage(1);
}}
>
<IconX size={16} />
</button>
)}
</div>
<button
className="btn btn-primary"
onClick={() => setAddModalOpen(true)}
title="Добавить новый ASN"
>
<IconPlus className="me-1" size={18} />
Добавить
</button>
</div>
</div>
</div>
<div className="card-body p-0">
{loading ? (
<TableSkeleton rows={10} cols={3} flat />
) : paginatedItems.length === 0 ? (
<TableEmpty cols={3} flat>
<EmptyState
title="Нет ASN"
description="Импортируйте или добавьте записи, чтобы начать."
action={
<button className="btn btn-primary" onClick={handleImport}>
Импорт
</button>
}
secondaryAction={
<button
className="btn btn-outline-primary"
onClick={() => {
const header = ['asn', 'community'];
const lines = [header, ['12345', '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 = 'asns_sample.csv';
a.click();
URL.revokeObjectURL(url);
}}
>
Шаблон CSV
</button>
}
/>
</TableEmpty>
) : (
<div className="table-responsive">
<table className="table table-flat table-vcenter table-nowrap mb-0">
<thead>
<tr>
<th style={{ width: '40px' }}>
<input
type="checkbox"
className="form-check-input"
checked={
paginatedItems.length > 0 &&
paginatedItems.every((i) => selectedItems.has(i.asn))
}
onChange={(e) => {
if (e.target.checked) {
selectAll();
} else {
deselectAll();
}
}}
title="Выбрать все на странице"
/>
</th>
<th
className="cursor-pointer user-select-none"
onClick={() => handleSort('asn')}
>
<div className="d-flex align-items-center">
<IconHash size={16} className="me-1 text-muted" />
Номер AS
{sortField === 'asn' && (
<span className="ms-1">
{sortOrder === 'asc' ? (
<IconArrowUp size={14} />
) : (
<IconArrowDown size={14} />
)}
</span>
)}
</div>
</th>
<th>Имя AS</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.asn}
className={
selectedItems.has(item.asn) ? 'table-selected' : ''
}
style={{
animation: `fadeIn 0.3s ease ${idx * 0.02}s both`,
}}
>
<td>
<input
type="checkbox"
className="form-check-input"
checked={selectedItems.has(item.asn)}
onChange={() => toggleSelectItem(item.asn)}
onClick={(e) => e.stopPropagation()}
/>
</td>
<td className="font-monospace" title="ASN">
<div className="d-flex align-items-center">
<IconHash size={16} className="me-2 text-muted" />
<span>{item.asn}</span>
<Tooltip content="Копировать ASN" position="top">
<button
className="btn btn-ghost-secondary btn-icon btn-sm ms-2"
onClick={() => copyToClipboard(item.asn)}
aria-label="Копировать"
title="Копировать ASN"
>
<IconCopy size={14} />
</button>
</Tooltip>
</div>
</td>
<td title={asnNameMap[item.asn] || ''}>
{asnNameMap[item.asn] ? (
<span>{asnNameMap[item.asn]}</span>
) : (
<span className="text-muted">—</span>
)}
</td>
<td>{renderCommunityBadge(item.community)}</td>
<td className="text-end">
<div
className="btn-group btn-group-sm"
role="group"
aria-label={`Действия с ASN ${item.asn}`}
>
<Tooltip content="Редактировать" position="top">
<button
className="btn btn-icon btn-outline-primary me-1"
aria-label="Редактировать"
onClick={() => handleEdit(item)}
title="Редактировать"
>
<IconEdit size={16} />
</button>
</Tooltip>
<Tooltip content="Удалить" position="top">
<button
className="btn btn-icon btn-outline-danger"
aria-label="Удалить"
onClick={() => confirmDelete(item)}
title="Удалить"
>
<IconTrash size={16} />
</button>
</Tooltip>
</div>
</td>
</tr>
))}
</tbody>
</table>
</div>
)}
</div>
<div className="card-footer border-top-0">
<Pagination
currentPage={currentPage}
totalPages={totalPages}
totalItems={totalItems || filtered.length}
pageSize={pageSize}
onPageChange={setCurrentPage}
/>
</div>
</div>
<ConfirmDialog
open={showDeleteModal}
title={'Удалить ASN?'}
message={!itemToDelete ? '' : `Вы уверены, что хотите удалить "${itemToDelete.asn}"? Это действие необратимо.`}
message={
!itemToDelete
? ''
: `Вы уверены, что хотите удалить "${itemToDelete.asn}"? Это действие необратимо.`
}
confirmText={'Удалить'}
cancelText={'Отмена'}
destructive
@@ -830,12 +888,14 @@ function ASNsNewManager() {
onConfirm={executeDelete}
onCancel={() => setShowDeleteModal(false)}
/>
<ConfirmDiffModal
show={confirmSaveOpen}
diff={diff}
onConfirm={performSave}
onClose={() => setConfirmSaveOpen(false)}
/>
<ImportModal
show={importOpen}
title={'Импорт ASN'}
@@ -844,10 +904,10 @@ function ASNsNewManager() {
validateItem={validateItem}
onConfirm={applyImportedItems}
onClose={() => setImportOpen(false)}
sampleHeader={['asn','community']}
sampleHeader={['asn', 'community']}
placeholder={'12345 65000:100'}
/>
{/* Модальное окно редактирования community */}
<FormModal
show={editModalOpen && !!itemBeingEdited}
onClose={handleCancelEdit}
@@ -862,7 +922,8 @@ function ASNsNewManager() {
{itemBeingEdited && (
<>
<p className="text-muted mb-2">
ASN: <span className="font-monospace">{itemBeingEdited.asn}</span>
ASN:{' '}
<span className="font-monospace">{itemBeingEdited.asn}</span>
</p>
<div className="mb-3">
<label className="form-label">Community</label>
@@ -871,7 +932,9 @@ function ASNsNewManager() {
onChange={setEditingValue}
communities={communities}
onKeyDown={handleEditKeyDown}
className={`form-control${isValidCommunity(editingValue) ? '' : ' is-invalid'}`}
className={`form-control${
isValidCommunity(editingValue) ? '' : ' is-invalid'
}`}
useShortValue={true}
/>
{!isValidCommunity(editingValue) && (
@@ -883,29 +946,34 @@ function ASNsNewManager() {
</>
)}
</FormModal>
<HistoryModal
resource="asns"
show={historyOpen}
onClose={() => setHistoryOpen(false)}
onRolledBack={() => fetchItems()}
/>
<WsUpdateModal
show={wsOpen}
url={wsUrl}
onClose={() => setWsOpen(false)}
/>
<ConfirmDialog
open={clearCommunitiesOpen}
title={'Удалить записи community'}
message={`Будут удалены все записи с community "${filterCommunity}". Действие НЕ сохраняет изменения автоматически.`}
confirmText={'Удалить'}
cancelText={'Отмена'}
onConfirm={() => { setItems(prev => prev.filter(i => i.community !== filterCommunity)); setClearCommunitiesOpen(false); }}
onConfirm={() => {
setItems((prev) => prev.filter((i) => i.community !== filterCommunity));
setClearCommunitiesOpen(false);
}}
onCancel={() => setClearCommunitiesOpen(false)}
/>
{/* datalist больше не нужен, т.к. используем кастомный автокомплит */}
</div>
);
}
export default ASNsNewManager;
export default ASNsNewManager;