feat: Integrate ASNsNewManager component for ASN management in routing

frontend/src/ASNsNewManager.jsx

@@ -0,0 +1,429 @@
+import { useState, useEffect, useRef } from 'react';
+import axios from 'axios';
+import {
+  IconPlus,
+  IconSearch,
+  IconEdit,
+  IconTrash,
+  IconCheck,
+  IconX,
+  IconDatabase,
+  IconRefresh
+} from '@tabler/icons-react';
+
+const API_URL = '/api';
+
+function ASNsNewManager() {
+  const [items, setItems] = useState([]);
+  const [newItem, setNewItem] = useState({ asn: '', community: '' });
+  const [error, setError] = useState('');
+  const [success, setSuccess] = useState('');
+  const [searchTerm, setSearchTerm] = useState('');
+  const [editingAsn, setEditingAsn] = 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 [sortField, setSortField] = useState('asn');
+  const [sortOrder, setSortOrder] = useState('asc');
+  const [filterCommunity, setFilterCommunity] = useState('');
+  const editInputRef = useRef(null);
+  const pageSize = 10;
+
+  useEffect(() => {
+    fetchItems();
+  }, []);
+
+  const fetchItems = async () => {
+    setLoading(true);
+    try {
+      const response = await axios.get(`${API_URL}/asns`);
+      setItems(response.data.map(item => ({ asn: item.domain, community: item.type })));
+      setError('');
+    } catch (error) {
+      console.error('Error fetching ASNs:', error);
+      setError('Не удалось загрузить список ASN. Проверьте, запущен ли бэкенд.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleAddItem = () => {
+    if (newItem.asn.trim() === '') {
+      setError('Номер AS не может быть пустым.');
+      return;
+    }
+    if (newItem.community.trim() === '') {
+      setError('Community не может быть пустым.');
+      return;
+    }
+    setError('');
+    setItems([...items, newItem]);
+    setNewItem({ asn: '', community: '' });
+  };
+
+  const handleEdit = (item) => {
+    setEditingAsn(item.asn);
+    setEditingValue(item.community);
+  };
+
+  const handleSaveEdit = (asn) => {
+    const updatedItems = items.map(i =>
+      i.asn === asn ? { ...i, community: editingValue } : i
+    );
+    setItems(updatedItems);
+    setEditingAsn(null);
+  };
+
+  const handleCancelEdit = () => {
+    setEditingAsn(null);
+  };
+
+  const handleDeleteItem = (asnToDelete) => {
+    setItems(items.filter(i => i.asn !== asnToDelete));
+  };
+
+  const confirmDelete = (item) => {
+    setItemToDelete(item);
+    setShowDeleteModal(true);
+  };
+
+  const executeDelete = () => {
+    if (itemToDelete) {
+      handleDeleteItem(itemToDelete.asn);
+      setShowDeleteModal(false);
+      setItemToDelete(null);
+    }
+  };
+
+  const handleSaveChanges = async () => {
+    setLoading(true);
+    try {
+      // API ожидает domains: [{domain, type}]
+      await axios.post(`${API_URL}/asns`, { domains: items.map(i => ({ domain: i.asn, type: i.community })) });
+      setSuccess('Изменения успешно сохранены!');
+      setTimeout(() => setSuccess(''), 3000);
+    } catch (error) {
+      console.error('Error saving changes:', error);
+      setError('Не удалось сохранить изменения.');
+    } finally {
+      setLoading(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;
+  });
+
+  // Фильтрация по community
+  const filteredByCommunity = filterCommunity
+    ? sortedItems.filter(i => i.community === filterCommunity)
+    : sortedItems;
+
+  // Поиск
+  const filteredItems = filteredByCommunity.filter(i =>
+    i.asn.toLowerCase().includes(searchTerm.toLowerCase())
+  );
+
+  // Пагинация
+  const totalPages = Math.ceil(filteredItems.length / pageSize);
+  const paginatedItems = filteredItems.slice((currentPage - 1) * pageSize, currentPage * pageSize);
+
+  // Для фильтра - список всех уникальных community
+  const allCommunities = Array.from(new Set(items.map(i => i.community)));
+
+  // Сортировка по клику
+  const handleSort = (field) => {
+    if (sortField === field) {
+      setSortOrder(sortOrder === 'asc' ? 'desc' : 'asc');
+    } else {
+      setSortField(field);
+      setSortOrder('asc');
+    }
+  };
+
+  // Улучшенный инлайн-редакт
+  useEffect(() => {
+    if (editingAsn && editInputRef.current) {
+      editInputRef.current.focus();
+    }
+  }, [editingAsn]);
+
+  const handleEditKeyDown = (e, asn) => {
+    if (e.key === 'Enter') handleSaveEdit(asn);
+    if (e.key === 'Escape') handleCancelEdit();
+  };
+
+  return (
+    <>
+      {error && (
+        <div className="alert alert-danger alert-dismissible" role="alert">
+          <div className="d-flex">
+            <div>
+              <IconX className="icon alert-icon" />
+            </div>
+            <div>
+              {error}
+            </div>
+          </div>
+          <a className="btn-close" onClick={() => setError('')}></a>
+        </div>
+      )}
+      
+      {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>
+          <a className="btn-close" onClick={() => setSuccess('')}></a>
+        </div>
+      )}
+
+      <div className="row">
+        <div className="col-lg-3">
+          {/* Add New ASN Card */}
+          <div className="card card-md">
+            <div className="card-header">
+              <h3 className="card-title">
+                <IconPlus className="icon me-2" />
+                Добавить новый ASN
+              </h3>
+            </div>
+            <div className="card-body">
+              <form onSubmit={(e) => { e.preventDefault(); handleAddItem(); }}>
+                <div className="mb-3">
+                  <label className="form-label">Номер AS</label>
+                  <input
+                    type="text"
+                    className="form-control"
+                    placeholder="12345"
+                    value={newItem.asn}
+                    onChange={(e) => setNewItem({ ...newItem, asn: e.target.value })}
+                  />
+                </div>
+                <div className="mb-3">
+                  <label className="form-label">Community</label>
+                  <input
+                    type="text"
+                    className="form-control"
+                    placeholder="112"
+                    value={newItem.community}
+                    onChange={(e) => setNewItem({ ...newItem, community: e.target.value })}
+                  />
+                </div>
+                <div className="form-footer">
+                  <button type="submit" className="btn btn-primary w-100">
+                    <IconPlus className="icon me-2" />
+                    Добавить
+                  </button>
+                </div>
+              </form>
+            </div>
+          </div>
+
+          {/* Actions Card */}
+          <div className="card card-md">
+            <div className="card-header">
+              <h3 className="card-title">
+                <IconDatabase className="icon me-2" />
+                Действия
+              </h3>
+            </div>
+            <div className="card-body">
+              <div className="d-grid gap-2">
+                <button 
+                  className="btn btn-primary"
+                  onClick={handleSaveChanges}
+                  disabled={loading}
+                >
+                  {loading ? (
+                    <>
+                      <span className="spinner-border spinner-border-sm me-2" role="status"></span>
+                      Сохранение...
+                    </>
+                  ) : (
+                    <>
+                      <IconDatabase className="icon me-2" />
+                      Сохранить в S3
+                    </>
+                  )}
+                </button>
+                <button 
+                  className="btn btn-outline-secondary"
+                  onClick={fetchItems}
+                  disabled={loading}
+                >
+                  <IconRefresh className="icon me-2" />
+                  Обновить
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className="col-lg-9">
+          <div className="card">
+            <div className="card-header d-flex justify-content-between align-items-center">
+              <h3 className="card-title mb-0">Список ASN</h3>
+              <div className="d-flex gap-2 w-50">
+                {/* Фильтр по community */}
+                <select className="form-select w-auto" value={filterCommunity} onChange={e => { setFilterCommunity(e.target.value); setCurrentPage(1); }}>
+                  <option value="">Все community</option>
+                  {allCommunities.map(community => (
+                    <option key={community} value={community}>{community}</option>
+                  ))}
+                </select>
+                {/* Поиск */}
+                <div className="input-icon flex-grow-1">
+                  <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); }}
+                  />
+                </div>
+              </div>
+            </div>
+            <div className="table-responsive">
+              <table className="table card-table table-vcenter table-nowrap mb-0">
+                <thead>
+                  <tr>
+                    <th style={{cursor:'pointer'}} onClick={() => handleSort('asn')}>
+                      Номер AS
+                      {sortField === 'asn' && (
+                        <span className="ms-1">
+                          {sortOrder === 'asc' ? '▲' : '▼'}
+                        </span>
+                      )}
+                    </th>
+                    <th style={{cursor:'pointer'}} onClick={() => handleSort('community')}>
+                      Community
+                      {sortField === 'community' && (
+                        <span className="ms-1">
+                          {sortOrder === 'asc' ? '▲' : '▼'}
+                        </span>
+                      )}
+                    </th>
+                    <th className="text-end"> </th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {paginatedItems.map((item) => (
+                    <tr key={item.asn} className={editingAsn === item.asn ? 'table-info' : ''}>
+                      <td>{item.asn}</td>
+                      <td><span className="badge bg-blue-lt text-blue">{item.community}</span></td>
+                      <td className="text-end">
+                        {editingAsn === item.asn ? (
+                          <>
+                            <input
+                              type="text"
+                              className="form-control d-inline-block w-auto me-2"
+                              value={editingValue}
+                              ref={editInputRef}
+                              onChange={e => setEditingValue(e.target.value)}
+                              onKeyDown={e => handleEditKeyDown(e, item.asn)}
+                              style={{maxWidth: 120}}
+                            />
+                            <button className="btn btn-success btn-icon me-1" onClick={() => handleSaveEdit(item.asn)}><IconCheck size={18} /></button>
+                            <button className="btn btn-secondary btn-icon" onClick={handleCancelEdit}><IconX size={18} /></button>
+                          </>
+                        ) : (
+                          <>
+                            <button className="btn btn-outline-primary btn-icon me-1" onClick={() => handleEdit(item)}><IconEdit size={18} /></button>
+                            <button className="btn btn-outline-danger btn-icon" onClick={() => confirmDelete(item)}><IconTrash size={18} /></button>
+                          </>
+                        )}
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+            {/* Пагинация */}
+            {totalPages > 1 && (
+              <div className="card-footer d-flex justify-content-center">
+                <ul className="pagination m-0">
+                  <li className={`page-item${currentPage === 1 ? ' disabled' : ''}`}>
+                    <button className="page-link" onClick={() => setCurrentPage(currentPage - 1)} tabIndex={-1} disabled={currentPage === 1}>&laquo;</button>
+                  </li>
+                  {Array.from({length: totalPages}, (_, i) => i + 1).map(page => (
+                    <li key={page} className={`page-item${currentPage === page ? ' active' : ''}`}>
+                      <button className="page-link" onClick={() => setCurrentPage(page)}>{page}</button>
+                    </li>
+                  ))}
+                  <li className={`page-item${currentPage === totalPages ? ' disabled' : ''}`}>
+                    <button className="page-link" onClick={() => setCurrentPage(currentPage + 1)} tabIndex={-1} disabled={currentPage === totalPages}>&raquo;</button>
+                  </li>
+                </ul>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Delete Confirmation Modal */}
+      {showDeleteModal && (
+        <div className="modal modal-blur fade show" style={{display: 'block'}} tabIndex="-1">
+          <div className="modal-dialog modal-sm modal-dialog-centered" role="document">
+            <div className="modal-content">
+              <button 
+                type="button" 
+                className="btn-close" 
+                onClick={() => setShowDeleteModal(false)}
+              ></button>
+              <div className="modal-status bg-danger"></div>
+              <div className="modal-body text-center py-4">
+                <IconTrash className="icon mb-2 text-danger icon-lg" />
+                <h3>Удалить ASN?</h3>
+                <div className="text-muted">
+                  Вы уверены, что хотите удалить "{itemToDelete?.asn}"? Это действие необратимо.
+                </div>
+              </div>
+              <div className="modal-footer">
+                <div className="w-100">
+                  <div className="row">
+                    <div className="col">
+                      <button 
+                        className="btn w-100" 
+                        onClick={() => setShowDeleteModal(false)}
+                      >
+                        Отмена
+                      </button>
+                    </div>
+                    <div className="col">
+                      <button 
+                        className="btn btn-danger w-100" 
+                        onClick={executeDelete}
+                      >
+                        Удалить
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}
+
+export default ASNsNewManager; 

frontend/src/App.jsx

@@ -24,6 +24,7 @@ import ServerManager from './ServerManager';
 import FilterManager from './FilterManager';
 import DomainsNewManager from './DomainsNewManager';
 import IPRangesManager from './IPRangesManager';
+import ASNsNewManager from './ASNsNewManager';
 import './App.css';
 import axios from 'axios';
 import {
@@ -101,13 +102,7 @@ function MainLayout() {
           } />
           <Route path="/domains-new" element={<DomainsNewManager />} />
           <Route path="/ip-ranges" element={<IPRangesManager />} />
-          <Route path="/asns" element={
-            <DataManager
-              entityName="AS"
-              entityKey="asns"
-              placeholder="AS12345"
-            />
-          } />
+          <Route path="/asns" element={<ASNsNewManager />} />
           <Route path="/servers" element={<ServerManager />} />
           <Route path="/filters" element={<FilterManager />} />
           <Route path="/" element={<Navigate to="/domains" replace />} />