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

feat: Добавлена поддержка AS и рефакторинг UI на вкладки
Publish Docker image / build-and-push (push) Successful in 1m38s
Details

Browse Source
This commit is contained in:
denozord
2025-07-07 15:37:26 +07:00
parent 92684736f9
commit f110f53a52
3 changed files with 294 additions and 228 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/App.jsx
+20 -228
View File
@@ -1,97 +1,7 @@
import { useState, useEffect } from 'react'
import axios from 'axios'
import {
Container, Navbar, Table, Button, Form, InputGroup, Row, Col, Card, Alert
} from 'react-bootstrap'
const API_URL = '/api'
import { Container, Navbar, Tabs, Tab } from 'react-bootstrap';
import DataManager from './DataManager';
function App() {
const [domains, setDomains] = useState([])
const [newDomain, setNewDomain] = useState({ domain: '', type: 'SharkFIN' })
const [error, setError] = useState('')
const [success, setSuccess] = useState('')
const [searchTerm, setSearchTerm] = useState('')
const [editingDomain, setEditingDomain] = useState(null)
const [editingValue, setEditingValue] = useState('')
const [bulkFrom, setBulkFrom] = useState('SharkFIN')
const [bulkTo, setBulkTo] = useState('SharkAM')
useEffect(() => {
fetchDomains()
}, [])
const fetchDomains = async () => {
try {
const response = await axios.get(`${API_URL}/domains`)
setDomains(response.data)
} catch (error) {
console.error('Error fetching domains:', error)
setError('Не удалось загрузить домены. Проверьте, запущен ли бэкенд.')
}
}
const handleAddDomain = () => {
if (newDomain.domain.trim() === '') {
setError('Имя домена не может быть пустым.')
return
}
setError('')
setDomains([...domains, newDomain])
setNewDomain({ domain: '', type: 'SharkFIN' })
}
const handleEdit = (domain) => {
setEditingDomain(domain.domain)
setEditingValue(domain.type)
}
const handleSaveEdit = (domainName) => {
const updatedDomains = domains.map(d =>
d.domain === domainName ? { ...d, type: editingValue } : d
)
setDomains(updatedDomains)
setEditingDomain(null)
}
const handleCancelEdit = () => {
setEditingDomain(null)
}
const handleDeleteDomain = (domainNameToDelete) => {
setDomains(domains.filter(d => d.domain !== domainNameToDelete))
}
const handleSaveChanges = async () => {
try {
await axios.post(`${API_URL}/domains`, { domains })
setSuccess('Изменения успешно сохранены!')
setTimeout(() => setSuccess(''), 3000)
} catch (error) {
console.error('Error saving changes:', error)
setError('Не удалось сохранить изменения.')
}
}
const handleBulkUpdate = () => {
if (!bulkFrom || !bulkTo) {
setError('Оба поля для массового обновления должны быть заполнены.')
return
}
const confirm = window.confirm(`Вы уверены, что хотите заменить все шлюзы "${bulkFrom}" на "${bulkTo}"? Это действие необратимо.`)
if (confirm) {
const updatedDomains = domains.map(d =>
d.type === bulkFrom ? { ...d, type: bulkTo } : d
)
setDomains(updatedDomains)
setSuccess(`Шлюзы "${bulkFrom}" были успешно заменены на "${bulkTo}". Не забудьте сохранить изменения.`)
}
}
const filteredDomains = domains.filter(d =>
d.domain.toLowerCase().includes(searchTerm.toLowerCase())
)
return (
<>
<Navbar bg="dark" variant="dark" expand="lg">
@@ -101,149 +11,31 @@ function App() {
<path d="M4.928 1.428a.5.5 0 0 0-.01.02H2.5A1.5 1.5 0 0 0 1 3v1.5a.5.5 0 0 0 1 0V3a.5.5 0 0 1 .5-.5h2.418a.5.5 0 0 0 .01-.02zM7.5 2.5a.5.5 0 0 1 .5-.5h3.5a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-1 0v-1h-3a.5.5 0 0 1-.5-.5zM.5 5a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-1 0v-3a.5.5 0 0 1 .5-.5zm15 0a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-1 0v-3a.5.5 0 0 1 .5-.5zM2 7.5a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/>
<path d="M1.5 14a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 1 0v-1a.5.5 0 0 0-.5-.5zM3 14.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zM13.5 14a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 1 0v-1a.5.5 0 0 0-.5-.5z"/>
</svg>
S3 Менеджер Доменов
S3 Lists Manager
</Navbar.Brand>
</Container>
</Navbar>
<Container className="mt-4">
{error && <Alert variant="danger" onClose={() => setError('')} dismissible>{error}</Alert>}
{success && <Alert variant="success" onClose={() => setSuccess('')} dismissible>{success}</Alert>}
<Card className="mb-4">
<Card.Header as="h5">Добавить новый домен</Card.Header>
<Card.Body>
<Form onSubmit={(e) => { e.preventDefault(); handleAddDomain(); }}>
<Row className="align-items-end">
<Col md={7}>
<Form.Group>
<Form.Label>Имя домена</Form.Label>
<Form.Control
type="text"
placeholder="example.com"
value={newDomain.domain}
onChange={(e) => setNewDomain({ ...newDomain, domain: e.target.value })}
/>
</Form.Group>
</Col>
<Col md={3}>
<Form.Group>
<Form.Label>Шлюз</Form.Label>
<Form.Control
type="text"
value={newDomain.type}
onChange={(e) => setNewDomain({ ...newDomain, type: e.target.value })}
/>
</Form.Group>
</Col>
<Col md={2}>
<Button variant="primary" type="submit" className="w-100">Добавить</Button>
</Col>
</Row>
</Form>
</Card.Body>
</Card>
<Card className="mb-4">
<Card.Header as="h5">Массовое обновление шлюзов</Card.Header>
<Card.Body>
<Row className="align-items-end">
<Col>
<Form.Group>
<Form.Label>Заменить с</Form.Label>
<Form.Control type="text" value={bulkFrom} onChange={e => setBulkFrom(e.target.value)} />
</Form.Group>
</Col>
<Col>
<Form.Group>
<Form.Label>Заменить на</Form.Label>
<Form.Control type="text" value={bulkTo} onChange={e => setBulkTo(e.target.value)} />
</Form.Group>
</Col>
<Col md={3}>
<Button variant="warning" onClick={handleBulkUpdate} className="w-100">Выполнить замену</Button>
</Col>
</Row>
</Card.Body>
</Card>
<Card>
<Card.Header>
<div className="d-flex justify-content-between align-items-center">
<h5 className="mb-0">Список доменов</h5>
<Button variant="success" onClick={handleSaveChanges} disabled={domains.length === 0}>
Сохранить все изменения в S3
</Button>
</div>
</Card.Header>
<Card.Body>
<Form.Control
type="text"
placeholder="Поиск по домену..."
className="mb-3"
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
<Tabs defaultActiveKey="domains" id="main-tabs" className="mb-3" fill>
<Tab eventKey="domains" title="Домены">
<DataManager
entityName="домен"
entityKey="domains"
placeholder="example.com"
/>
<Table striped bordered hover responsive>
<thead>
<tr>
<th>#</th>
<th>Домен</th>
<th>Шлюз</th>
<th className="text-center">Действия</th>
</tr>
</thead>
<tbody>
{filteredDomains.map((d, index) => (
<tr key={d.domain}>
<td>{index + 1}</td>
<td>{d.domain}</td>
<td>
{editingDomain === d.domain ? (
<Form.Control
type="text"
value={editingValue}
onChange={(e) => setEditingValue(e.target.value)}
autoFocus
/>
) : (
d.type
)}
</td>
<td className="text-center">
{editingDomain === d.domain ? (
<>
<Button variant="success" size="sm" className="me-2" onClick={() => handleSaveEdit(d.domain)}>
Сохранить
</Button>
<Button variant="secondary" size="sm" onClick={handleCancelEdit}>
Отмена
</Button>
</>
) : (
<>
<Button variant="info" size="sm" className="me-2" onClick={() => handleEdit(d)}>
Изменить
</Button>
<Button variant="danger" size="sm" onClick={() => handleDeleteDomain(d.domain)}>
Удалить
</Button>
</>
)}
</td>
</tr>
))}
</tbody>
</Table>
{domains.length > 0 && filteredDomains.length === 0 && (
<p className="text-center text-muted">По вашему запросу ничего не найдено.</p>
)}
{domains.length === 0 && <p className="text-center text-muted">Домены не найдены. Добавьте новый домен в форме выше.</p>}
</Card.Body>
</Card>
</Tab>
<Tab eventKey="asns" title="AS">
<DataManager
entityName="AS"
entityKey="asns"
placeholder="AS12345"
/>
</Tab>
</Tabs>
</Container>
</>
)
);
}
export default App
export default App;