feat: Добавлена поддержка AS и рефакторинг UI на вкладки

backend/server.js

@@ -76,6 +76,56 @@ app.post('/api/domains', async (req, res) => {
     }
 });
 
+// --- ASNs Routes ---
+
+// Get ASNs from S3
+app.get('/api/asns', async (req, res) => {
+    const params = {
+        Bucket: BUCKET_NAME,
+        Key: 'asns.txt',
+    };
+
+    try {
+        const data = await s3.getObject(params).promise();
+        const fileContent = data.Body.toString('utf-8');
+        const asns = fileContent.split('\n').filter(line => line).map(line => {
+            const parts = line.trim().split(/\s+/);
+            const domain = parts[0] || ''; // Keep name 'domain' for consistency in component
+            const type = parts[1] || '';
+            return { domain, type };
+        });
+        res.json(asns);
+    } catch (error) {
+        if (error.code === 'NoSuchKey') {
+            res.json([]);
+        } else {
+            console.error(error);
+            res.status(500).send('Error reading from S3');
+        }
+    }
+});
+
+// Update ASNs in S3
+app.post('/api/asns', async (req, res) => {
+    const { domains: asns } = req.body; // Keep name 'domains' for consistency
+    const fileContent = asns.map(a => `${a.domain} ${a.type}`).join('\n');
+
+    const params = {
+        Bucket: BUCKET_NAME,
+        Key: 'asns.txt',
+        Body: fileContent,
+        ContentType: 'text/plain',
+    };
+
+    try {
+        await s3.putObject(params).promise();
+        res.send('File updated successfully');
+    } catch (error) {
+        console.error(error);
+        res.status(500).send('Error writing to S3');
+    }
+});
+
 // The "catchall" handler: for any request that doesn't
 // match one above, send back React's index.html file.
 app.get('*', (req, res) => {

frontend/src/App.jsx

@@ -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;

frontend/src/DataManager.jsx

@@ -0,0 +1,224 @@
+import { useState, useEffect } from 'react';
+import axios from 'axios';
+import { Table, Button, Form, Row, Col, Card, Alert } from 'react-bootstrap';
+
+const API_URL = '/api';
+
+function DataManager({ entityName, entityKey, placeholder }) {
+  const [items, setItems] = useState([]);
+  const [newItem, setNewItem] = 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(() => {
+    fetchItems();
+  }, []);
+
+  const fetchItems = async () => {
+    try {
+      const response = await axios.get(`${API_URL}/${entityKey}`);
+      setItems(response.data);
+    } catch (error) {
+      console.error(`Error fetching ${entityKey}:`, error);
+      setError(`Не удалось загрузить ${entityName}. Проверьте, запущен ли бэкенд.`);
+    }
+  };
+
+  const handleAddItem = () => {
+    if (newItem.domain.trim() === '') {
+      setError(`Имя ${entityName} не может быть пустым.`);
+      return;
+    }
+    setError('');
+    setItems([...items, newItem]);
+    setNewItem({ domain: '', type: 'SharkFIN' });
+  };
+
+  const handleEdit = (item) => {
+    setEditingDomain(item.domain);
+    setEditingValue(item.type);
+  };
+
+  const handleSaveEdit = (domainName) => {
+    const updatedItems = items.map(i =>
+      i.domain === domainName ? { ...i, type: editingValue } : i
+    );
+    setItems(updatedItems);
+    setEditingDomain(null);
+  };
+
+  const handleCancelEdit = () => {
+    setEditingDomain(null);
+  };
+
+  const handleDeleteItem = (domainNameToDelete) => {
+    setItems(items.filter(i => i.domain !== domainNameToDelete));
+  };
+
+  const handleSaveChanges = async () => {
+    try {
+      // The backend expects a payload with a 'domains' key for both endpoints.
+      await axios.post(`${API_URL}/${entityKey}`, { domains: items });
+      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 updatedItems = items.map(i =>
+        i.type === bulkFrom ? { ...i, type: bulkTo } : i
+      );
+      setItems(updatedItems);
+      setSuccess(`Шлюзы "${bulkFrom}" были успешно заменены на "${bulkTo}". Не забудьте сохранить изменения.`);
+    }
+  };
+
+  const filteredItems = items.filter(i =>
+    i.domain.toLowerCase().includes(searchTerm.toLowerCase())
+  );
+
+  return (
+    <>
+      {error && <Alert variant="danger" onClose={() => setError('')} dismissible>{error}</Alert>}
+      {success && <Alert variant="success" onClose={() => setSuccess('')} dismissible>{success}</Alert>}
+
+      <Row>
+        <Col lg={4}>
+          <Card className="mb-4">
+            <Card.Header as="h5">Добавить новый {entityName}</Card.Header>
+            <Card.Body>
+              <Form onSubmit={(e) => { e.preventDefault(); handleAddItem(); }}>
+                <Form.Group className="mb-3">
+                  <Form.Label>Имя {entityName}</Form.Label>
+                  <Form.Control
+                    type="text"
+                    placeholder={placeholder}
+                    value={newItem.domain}
+                    onChange={(e) => setNewItem({ ...newItem, domain: e.target.value })}
+                  />
+                </Form.Group>
+                <Form.Group className="mb-3">
+                  <Form.Label>Шлюз</Form.Label>
+                  <Form.Control
+                    type="text"
+                    value={newItem.type}
+                    onChange={(e) => setNewItem({ ...newItem, type: e.target.value })}
+                  />
+                </Form.Group>
+                <Button variant="primary" type="submit" className="w-100">Добавить</Button>
+              </Form>
+            </Card.Body>
+          </Card>
+
+          <Card className="mb-4">
+            <Card.Header as="h5">Массовое обновление</Card.Header>
+            <Card.Body>
+              <Form.Group className="mb-2">
+                <Form.Label>Заменить с</Form.Label>
+                <Form.Control type="text" value={bulkFrom} onChange={e => setBulkFrom(e.target.value)} />
+              </Form.Group>
+              <Form.Group className="mb-3">
+                <Form.Label>Заменить на</Form.Label>
+                <Form.Control type="text" value={bulkTo} onChange={e => setBulkTo(e.target.value)} />
+              </Form.Group>
+              <Button variant="warning" onClick={handleBulkUpdate} className="w-100">Выполнить замену</Button>
+            </Card.Body>
+          </Card>
+        </Col>
+
+        <Col lg={8}>
+          <Card>
+            <Card.Header>
+              <div className="d-flex justify-content-between align-items-center">
+                <h5 className="mb-0">Список: {entityName}</h5>
+                <Button variant="success" onClick={handleSaveChanges} disabled={items.length === 0}>
+                  Сохранить все изменения в S3
+                </Button>
+              </div>
+            </Card.Header>
+            <Card.Body>
+              <Form.Control
+                type="text"
+                placeholder={`Поиск по ${entityName}...`}
+                className="mb-3"
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)}
+              />
+              <Table striped bordered hover responsive>
+                <thead>
+                  <tr>
+                    <th>#</th>
+                    <th>{entityName}</th>
+                    <th>Шлюз</th>
+                    <th className="text-center">Действия</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {filteredItems.map((item, index) => (
+                    <tr key={item.domain}>
+                      <td>{index + 1}</td>
+                      <td>{item.domain}</td>
+                      <td>
+                        {editingDomain === item.domain ? (
+                          <Form.Control
+                            type="text"
+                            value={editingValue}
+                            onChange={(e) => setEditingValue(e.target.value)}
+                            autoFocus
+                          />
+                        ) : (
+                          item.type
+                        )}
+                      </td>
+                      <td className="text-center">
+                        {editingDomain === item.domain ? (
+                          <>
+                            <Button variant="success" size="sm" className="me-2" onClick={() => handleSaveEdit(item.domain)}>
+                              Сохранить
+                            </Button>
+                            <Button variant="secondary" size="sm" onClick={handleCancelEdit}>
+                              Отмена
+                            </Button>
+                          </>
+                        ) : (
+                          <>
+                            <Button variant="info" size="sm" className="me-2" onClick={() => handleEdit(item)}>
+                              Изменить
+                            </Button>
+                            <Button variant="danger" size="sm" onClick={() => handleDeleteItem(item.domain)}>
+                              Удалить
+                            </Button>
+                          </>
+                        )}
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </Table>
+              {items.length > 0 && filteredItems.length === 0 && (
+                <p className="text-center text-muted">По вашему запросу ничего не найдено.</p>
+              )}
+              {items.length === 0 && <p className="text-center text-muted">Список пуст. Добавьте новый элемент.</p>}
+            </Card.Body>
+          </Card>
+        </Col>
+      </Row>
+    </>
+  );
+}
+
+export default DataManager;