all docs and guides for gonets
This commit is contained in:
Merelden
parent
f48486d427
commit
61865905a1
38 changed files with 1114 additions and 27 deletions
|
Before Width: | Height: | Size: 67 KiB After Width: | Height: | Size: 67 KiB |
|
Before Width: | Height: | Size: 67 KiB After Width: | Height: | Size: 67 KiB |
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 22 KiB |
|
Before Width: | Height: | Size: 7 KiB After Width: | Height: | Size: 7 KiB |
|
Before Width: | Height: | Size: 38 KiB After Width: | Height: | Size: 38 KiB |
|
Before Width: | Height: | Size: 154 KiB After Width: | Height: | Size: 154 KiB |
|
Before Width: | Height: | Size: 102 KiB After Width: | Height: | Size: 102 KiB |
|
Before Width: | Height: | Size: 60 KiB After Width: | Height: | Size: 60 KiB |
|
Before Width: | Height: | Size: 74 KiB After Width: | Height: | Size: 74 KiB |
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 14 KiB |
|
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 16 KiB |
|
Before Width: | Height: | Size: 26 KiB After Width: | Height: | Size: 26 KiB |
|
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 25 KiB |
|
Before Width: | Height: | Size: 27 KiB After Width: | Height: | Size: 27 KiB |
|
Before Width: | Height: | Size: 114 KiB After Width: | Height: | Size: 114 KiB |
|
Before Width: | Height: | Size: 150 KiB After Width: | Height: | Size: 150 KiB |
|
Before Width: | Height: | Size: 199 KiB After Width: | Height: | Size: 199 KiB |
|
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 10 KiB |
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 160 KiB After Width: | Height: | Size: 160 KiB |
|
Before Width: | Height: | Size: 94 KiB After Width: | Height: | Size: 94 KiB |
|
Before Width: | Height: | Size: 104 KiB After Width: | Height: | Size: 104 KiB |
|
Before Width: | Height: | Size: 83 KiB After Width: | Height: | Size: 83 KiB |
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
|
Before Width: | Height: | Size: 65 KiB After Width: | Height: | Size: 65 KiB |
|
|
@ -1,75 +1,75 @@
|
|||
# ПРИЛОЖЕНИЕ ГоNETS Материалы
|
||||
# Курс по использованию ГоNETS
|
||||
|
||||
При первом запуске ГоNETS необходимо настроить пользователя оператор для дальнейшей работы с приложением.
|
||||
|
||||
|
||||
|
||||
|
||||
О программе
|
||||
|
||||
|
||||
|
||||
|
||||
Новая страница о программе (на рассмотрении)
|
||||
|
||||
|
||||
|
||||
|
||||
Основное полотно приложения с текущими сетевыми интерфейсами на системе
|
||||
|
||||
|
||||
|
||||
|
||||
Для комфортного восприятия дальше скриншоты будут в светлой теме, переключить тему можно в левом нижнем углу кликнув на специальную иконку. Поддерживается темная, светлая и системная темы.
|
||||
|
||||
|
||||
|
||||
|
||||
Далее отображается нынешний узел с возможностью подключиться к другому узлу
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Введя данные узел будет подключен и отображаться в левом списке доступных узлов. На следующем скриншоте отображается полотное узла к которому мы подключились
|
||||
|
||||
|
||||
|
||||
|
||||
Окно сканирования узлов в подсети
|
||||
|
||||
|
||||
|
||||
|
||||
Список просканированных узлов подсети
|
||||
|
||||
В виде таблицы
|
||||
|
||||
|
||||
|
||||
|
||||
Списком
|
||||
|
||||
|
||||
|
||||
|
||||
Возможность добавить заметку к узлу
|
||||
|
||||
|
||||
|
||||
|
||||
Сканирование точек доступа Wi-Fi
|
||||
|
||||
|
||||
|
||||
|
||||
Просканированные точки доступа Wi-Fi
|
||||
|
||||
|
||||
|
||||
|
||||
Изменение IP-адреса у сетевого интерфейса
|
||||
|
||||
|
||||
|
||||
|
||||
Предупреждение об необходимости авторизоваться под администратором
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Проверка доступности вводимых данных
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
44
ПРИЛОЖЕНИЕ ГоNETS Материалы/API.md
Normal file
44
ПРИЛОЖЕНИЕ ГоNETS Материалы/API.md
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
# API
|
||||
|
||||
Клиентская часть приложения взаимодействует с сервером через HTTPS-запросы и WebSocket-соединение. Большинство запросов могут выполняться с любого подключённого узла (например, https://192.168.1.147:8001/ip/check_ip), за исключением запроса /network/get_hostname, который ограничен локальным хостом (localhost:8001), так как возвращает hostname корневого устройства, с которого запущен клиент.
|
||||
|
||||
Все HTTPS-запросы реализованы в файле /src/api/request.ts. WebSocket-соединение для работы с сетевыми интерфейсами настроено в файле /src/components/workSpace/modules/workModules/networkInterfaces.tsx.
|
||||
|
||||
(По-хорошему настройку WebSocket подключения нужно будет переносить тоже в /src/api, так будет лучше, когда будет писаться больше модулей рабочего пространства)
|
||||
|
||||
Список API-запросов
|
||||
|
||||
1. Проверка доступности IP-адреса
|
||||
- Эндпоинт: https://<host>:8001/ip/check_ip
|
||||
- Описание: Проверяет доступность указанного IP-адреса.
|
||||
2. Сохранение изменений IP-адреса
|
||||
- Эндпоинт: https://<host>:8001/ip/apply_ip
|
||||
- Описание: Применяет изменения конфигурации IP-адреса.
|
||||
3. Получение hostname корневого устройства
|
||||
- Эндпоинт: https://localhost:8001/network/get_hostname
|
||||
- Описание: Возвращает hostname устройства, с которого запущен клиент. Запрос ограничен локальным хостом.
|
||||
4. Регистрация пользователя
|
||||
- Эндпоинт: https://<host>:8001/auth/register
|
||||
- Описание: Создаёт нового пользователя (устанавливает пароль оператора).
|
||||
5. Авторизация пользователя
|
||||
- Эндпоинт: https://<host>:8001/auth/login
|
||||
- Описание: Выполняет вход пользователя, повышая его права до уровня оператора.
|
||||
6. Выход пользователя
|
||||
- Эндпоинт: https://<host>:8001/auth/logout
|
||||
- Описание: Выполняет выход пользователя, снижая его права.
|
||||
7. Проверка прав пользователя
|
||||
- Эндпоинт: https://<host>:8001/auth/me
|
||||
- Описание: Проверяет текущие права авторизованного пользователя.
|
||||
8. Проверка наличия пользователя
|
||||
- Эндпоинт: https://<host>:8001/auth/check_json
|
||||
- Описание: Проверяет, существует ли пользователь на устройстве.
|
||||
|
||||
WebSocket-соединение
|
||||
|
||||
- Эндпоинт: wss://<host>:8001/api/v1
|
||||
- Описание: Устанавливает WebSocket-соединение для получения данных о сетевых интерфейсах в реальном времени. Реализовано в файле /src/components/workSpace/modules/workModules/networkInterfaces.tsx.
|
||||
|
||||
Замечания для разработки и тестирования
|
||||
|
||||
- В режиме разработки (npm run dev) можно переключать протоколы с https на http и с wss на ws, если сервер настроен на поддержку HTTP-запросов.
|
||||
- Убедитесь, что сервер работает в соответствующем режиме (HTTP или HTTPS), чтобы избежать ошибок подключения.
|
||||
|
|
@ -1,3 +1,3 @@
|
|||
# ГоNets итог
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,58 @@
|
|||
# Инструкция по запуску и сборке клиента
|
||||
|
||||
### Общие сведения.
|
||||
|
||||
Клиент приложения ГоNets написан на языке Typescript с использованием фреймворка React. Для более понятного отображения информации была выбрана библиотека ReatFlow, позволяющая легко и просто выстраивать различные графы, схемы, блоки и их связи. Так же, для того, чтобы приложение запускалось как десктопное был выбран метод обёртки собранной (build) версии в облочку Electron.
|
||||
|
||||
### Зависимости клиентской части
|
||||
|
||||
Далее будет представлен список необходимых npm зависимостей для разработки приложения. Уточню, что необходимы они исключительно во время разработки и сборки, собранная версия работает спокойно без них.
|
||||
|
||||
Зависимости при разработки:
|
||||
|
||||
```
|
||||
"dependencies": {
|
||||
"@iconify/icons-ic": "^1.2.13",
|
||||
"@iconify/react": "^5.2.0",
|
||||
"@reduxjs/toolkit": "^2.6.0",
|
||||
"@xyflow/react": "^12.3.5",
|
||||
"axios": "^1.7.9",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1",
|
||||
"react-flow-renderer": "^10.3.17",
|
||||
"react-redux": "^9.2.0",
|
||||
"react-router-dom": "^7.0.2",
|
||||
"styled-components": "^6.1.13",
|
||||
"zustand": "^5.0.3"
|
||||
},
|
||||
|
||||
"devDependencies": {
|
||||
"@iconify-json/ic": "^1.2.2",
|
||||
"@types/react": "^18.0.28",
|
||||
"@types/react-dom": "^18.0.11",
|
||||
"@vitejs/plugin-basic-ssl": "^2.0.0",
|
||||
"@vitejs/plugin-react": "^4.4.1",
|
||||
"electron": "^34.0.2",
|
||||
"electron-packager": "^17.1.2",
|
||||
"esbuild-wasm": "^0.17.12",
|
||||
"typescript": "^4.9.5",
|
||||
"vite": "^6.3.4"
|
||||
}
|
||||
```
|
||||
|
||||
### Запуск и сборка
|
||||
|
||||
Для того, чтобы работать с исходным кодом, необходимо склонировать проект с ветки frontend, перейти в директорию `FRONT/DEV/` и выполнить установку зависимостей с помощью `npm install`, возможно потребуется сделать после этого `npm audit --fix` Весь исходный код, находится непосредственно в директории `DEV`, собранная же версия в директории `BUILD`.
|
||||
|
||||
Для сборки приложения и обёртки его в электрон необходимо выполнить команду `npm run package`, далее перейти в созданную после команды директорию `dist`, от туда в `gonets-for-linux-64x/resources/app`, здесь нужно выполнить `npm run build`, в появившейся директории `dist` отредактировать файл `index.html`, таким образом, что везде где стоит `/assets` нужно прописать `./assets`. Проверить запуск приложения, можно прописав в терминале `./gonets` из директории `FRONT/DEV/dist/gonets-for-linux-64x`, где и лежит исполняемвый файл.
|
||||
|
||||
После удачного билда можно переместить всё содержимое `FRONT/DEV/dist/gonets-for-linux-64x/` в `/FRONT/BUILD`
|
||||
|
||||
Дополнительно отмечу, что входной точкой/файлом настройки самого электрона является файл `main.js`
|
||||
|
||||
### Замечания для разработки
|
||||
|
||||
- В dev режиме можно менять https запросы и wss подключение на http и ws соответственно. Меняется это в файлах:
|
||||
- /FRONT/DEV/src/api/request.ts - Здесь основные http запросы
|
||||
- /FRONT/DEV/src/components/workSpace/workModule/networkInterfaces.tsx - Здесь главное WebSocket подключение
|
||||
- Стоит убедиться, что сервер работает в соответствующем режиме (HTTP или HTTPS), чтобы избежать ошибок подключения
|
||||
199
ПРИЛОЖЕНИЕ ГоNETS Материалы/Инструкция по пользованию.md
Normal file
199
ПРИЛОЖЕНИЕ ГоNETS Материалы/Инструкция по пользованию.md
Normal file
|
|
@ -0,0 +1,199 @@
|
|||
# Инструкция по пользованию
|
||||
|
||||
## Описание
|
||||
|
||||
**GoNets** — это приложение для удобного и эффективного управления сетями в Linux с интуитивно понятным графическим интерфейсом. Оно помогает пользователям работать с сетевыми интерфейсами и узлами через визуальные блоки, что упрощает настройку и управление сетью без необходимости использования множества команд в терминале.
|
||||
|
||||
### Основные компоненты приложения:
|
||||
|
||||
- **Клиентская часть**: веб-приложение, использующее современные подходы веб-разработки для отображения сетевых интерфейсов и их связей в виде узлов и соединений. Приложение обёрнуто в Electron, что позволяет запускать приложение как десктопное.
|
||||
- **Серверная часть**: сервис на Python, который взаимодействует с операционной системой через D-Bus и передает данные клиенту через WebSocket.
|
||||
|
||||
## Установка
|
||||
|
||||
1. **Скачивание и установка**:
|
||||
Скачайте DEB-пакет GoNets и установите его на вашу систему Linux. Установка автоматически запустит серверную часть как системный сервис на адресе https://localhost:8001.
|
||||
2. **Запуск клиента**:
|
||||
Запустите клиентскую часть через Electron, которая подключится к серверу и начнёт отображать сетевые интерфейсы.
|
||||
|
||||
## Первы запуск приложения
|
||||
|
||||
### 1\. Настройка пароля администратора
|
||||
|
||||
При первом запуске необходимо создать пароль администратора. Он будет использоваться для доступа к функциям с повышенными правами (например, изменение IP-адресов).
|
||||
|
||||
В окне создания пароля доступны также:
|
||||
|
||||
- Переключение темы интерфейса.
|
||||
- Переход на страницу «О приложении».
|
||||
- Кнопка возврата на корневой узел (если происходит регистрация подключённого узла).
|
||||
|
||||
**Что такое узел?**
|
||||
В контексте GoNets **узел** — это отдельное, подключённое к общей сети и управляемый через приложение. Узел может быть **корневым** (локальный компьютер, с которого запущено приложение) или **подключённым** (удалённая система, подключённая к корневому узлу).
|
||||
|
||||
**Особенности пароля:**
|
||||
|
||||
- У каждого узла (корневого или подключённого) — свой уникальный пароль администратора.
|
||||
- Пример для корневого узла: `securePass2025`
|
||||
- Пример для подключённого узла: \`adminNet123
|
||||
- Если на подключённом узле пароль ещё не задан, система предложит создать его при первом подключении.
|
||||
|
||||
## Интерфейс и работа с приложением
|
||||
|
||||
### 1\. Рабочее пространство
|
||||
|
||||
После успешной настройки пароля открывается стартовое приветственное окно, из которого осуществляется переход к основным модулям приложения. В текущей версии доступен один модуль — **Настройки сети**.
|
||||
|
||||
Рабочее пространство включает два постоянных элемента:
|
||||
|
||||
- **Боковая панель** — основной элемент навигации, доступен во всех разделах приложения.
|
||||
- **Рабочая область** — в ней отображаются модули и интерфейсы, связанные с выбранным разделом.
|
||||
|
||||
#### 1.1 Боковая панель
|
||||
|
||||
Боковая панель размещена слева и предоставляет быстрый доступ к следующим функциям:
|
||||
|
||||
- **Управление узлами** — кнопка с иконкой _Монитора_, открывает меню управления устройствами.
|
||||
- **Смена темы оформления** — переключение между светлой, тёмной и системной темой.
|
||||
- **Профиль пользователя** — отображает текущий уровень доступа (пользователь / администратор) с возможностью смены.
|
||||
- **О программе** — отображает информацию о версии и дате выпуска.
|
||||
|
||||
##### 1.2 Настройки сети
|
||||
|
||||
Этот модуль представляет собой интерактивный холст, на котором в графической форме отображаются сетевые интерфейсы и их связи. Такой подход обеспечивает наглядное и удобное управление сетевой конфигурацией.
|
||||
|
||||
Элементы на холсте можно перемещать для лучшего отображения. Положение элементов будет сохраняться даже при выходе из приложения. Чтобы вернуть все элементы в исходное положение, в хэдере холста нажмите на иконку сброса. Чтобы закрыть холст, нажмите на иконку закрытия и вы попадёте обратно на приветственное окно
|
||||
|
||||
На холсте отображаются следующие элементы:
|
||||
|
||||
1. **Группы интерфейсов**
|
||||
Все сетевые интерфейсы распределяются на две группы: **активные** и **неактивные**.Каждая группа оформлена в виде рамки с заголовком и кнопкой «Скрыть/Показать», позволяющей сворачивать или разворачивать список интерфейсов.
|
||||
2. **Блок сетевого интерфейса**
|
||||
Каждый интерфейс отображается в отдельном блоке, содержащем:
|
||||
- **Заголовок** — название интерфейса, его тип (например, ethernet, wifi или VPN), а также текущий статус, который представлен цветом заголовка интерфейса.
|
||||
- **Конфигурацию** — MAC-адрес и значение MTU.
|
||||
- **Блоки IP-адресов** (опционально) — один или несколько блоков с информацией о назначенных IP-адресах.
|
||||
3. **Блок IP-адреса**Каждый блок IP-адреса включает:
|
||||
- **Заголовок** — указывается метод получения адреса: `DHCP` или `Static`, а также кнопка редактирования.
|
||||
- **Параметры** — строки с IP-адресом, шлюзом и DNS-серверами.
|
||||
- При активации редактирования, строки заменяются на поля ввода. В заголовке блока при этом появляются кнопки подтверждения и отмены изменений.
|
||||
|
||||
### 2\. Управление узлами
|
||||
|
||||
Управление узлами осуществляется через **боковую панель**. Для этого нажмите на иконку _Монитора_ — откроется меню с перечнем доступных устройств.
|
||||
|
||||
В меню узлов отображаются:
|
||||
|
||||
1. **Корневой узел** — локальное устройство, на котором запущено приложение. Его имя берётся из системного `hostname`.
|
||||
2. **Список подключённых узлов** — отображаются в порядке добавления.
|
||||
3. **Кнопка добавления нового узла** — представлена в виде блока с символом "+".
|
||||
|
||||
#### 2.1 Добавление нового узла
|
||||
|
||||
При нажатии на кнопку **"+"** откроется модальное окно, в котором потребуется указать адрес подключаемого устройства.
|
||||
В текущей версии приложения поддерживается подключение только к узлам, находящимся в одной локальной сети с корневым.
|
||||
|
||||
После ввода адреса и подтверждения, приложение попытается установить соединение с выбранным узлом. Если на нём установлено приложение GoNets, соединение будет успешно установлено, и узел появится в списке. В противном случае подключение не состоится, и переключение на данный узел будет невозможно.
|
||||
|
||||
#### 2.2 Пароль администратора на узлах
|
||||
|
||||
При первом переходе на подключённый узел система проверит, задан ли на нём пароль администратора GoNets.
|
||||
Если пароль отсутствует, появится предложение создать его. Этот пароль требуется для выполнения действий с повышенными правами, таких как изменение IP-адресов или управление интерфейсами.
|
||||
|
||||
> **Важно**: проверка пароля выполняется один раз — при первом запуске GoNets на каждом устройстве. Установленный пароль сохраняется на узле и в дальнейшем используется без повторной настройки.
|
||||
|
||||
#### 2.3. Возврат к корневому узлу
|
||||
|
||||
Чтобы вернуться на корневой узел просто нажмите на него в списке узлов, он всегда будет первым.
|
||||
|
||||
### 3\. Права пользователя приложения
|
||||
|
||||
В приложении реализована двухуровневая система прав доступа:
|
||||
|
||||
- **Ограниченные права** — режим по умолчанию при входе в приложение, даже после создания пароля администратора.
|
||||
- **Администраторский доступ** — расширенные права, необходимые для изменения конфигурации сетевых параметров.
|
||||
|
||||
Даже после создания пароля администратора Пользователь попадает в приложение с ограниченными правами.
|
||||
|
||||
#### 3.1 Ограниченный режим
|
||||
|
||||
В ограниченном режиме пользователь может просматривать сетевую конфигурацию, но **не имеет доступа к редактированию IP-адресов** интерфейсов. При попытке изменить параметры IP, шлюза или DNS, будет отображено уведомление о невозможности выполнения действия без прав администратора.
|
||||
|
||||
#### 3.2 Повышение прав до администратора
|
||||
|
||||
Для получения прав администратора:
|
||||
|
||||
1. Нажмите на иконку перечёркнутого щита в **боковой панели**.
|
||||
2. В открывшемся модальном окне введите **администраторский пароль** для текущего узла.
|
||||
Важно: пароль должен соответствовать именно тому узлу, с которым Вы работаете в данный момент.
|
||||
3. После успешного ввода:
|
||||
- Появится уведомление об успешной авторизации. Оно автоматически исчезнет через 3 секунды или может быть закрыто вручную.
|
||||
- Иконка в боковой панели изменится, отображая текущий статус пользователя (администратор или ограниченный доступ).
|
||||
4.
|
||||
|
||||
#### 3.3 Возврат в ограниченный режим
|
||||
|
||||
Чтобы отключить расширенные права:
|
||||
|
||||
1. Снова нажмите на иконку доступа в боковой панели.
|
||||
2. В модальном окне нажмите кнопку **«Ограничить»**.
|
||||
3. После этого права пользователя будут понижены, и доступ к редактированию IP-адресов будет снова ограничен.
|
||||
|
||||
### 4\. Взаимодействие с IP-адресами
|
||||
|
||||
Приложение предоставляет удобный способ управления IP-адресами сетевых интерфейсов. Все изменения доступны **только при наличии административных прав доступа**.
|
||||
|
||||
#### 4.1 Переход в режим редактирования
|
||||
|
||||
Чтобы изменить параметры IP-адреса:
|
||||
|
||||
1. Убедитесь, что Вы находитесь в **режиме администратора**.
|
||||
2. Найдите нужный интерфейс в группе **активных интерфейсов**.
|
||||
3. Нажмите на кнопку с иконкой **карандаша** в заголовке блока IP-адреса.
|
||||
|
||||
После этого строки с параметрами IP-адреса преобразуются в с поля ввода для редактирования:
|
||||
|
||||
- **IP-адрес**
|
||||
- **Шлюз**
|
||||
- **DNS-серверы**
|
||||
|
||||
В заголовке блока IP-Адреса появятся две кнопки: **Подтвердить** и **Отменить изменения**.
|
||||
|
||||
#### 4.2 Требования к данным
|
||||
|
||||
Перед подтверждением убедитесь, что:
|
||||
|
||||
- Указанные IP-адрес, шлюз и DNS-серверы находятся **в одной подсети**.
|
||||
- Все поля заполнены корректно.
|
||||
|
||||
Если данные не соответствуют требованиям, появится предупреждение
|
||||
|
||||
#### 4.3 Проверка и подтверждение изменений
|
||||
|
||||
После ввода корректных данных:
|
||||
|
||||
1. Нажмите кнопку **подтверждения**.
|
||||
2. Отобразится **экран загрузки**, во время которого приложение производит сканирование локальной сети, чтобы:
|
||||
- Проверить доступность указанного IP-адреса.
|
||||
- Убедиться, что адрес **не занят другим устройством**.
|
||||
|
||||
Если IP-адрес уже используется, появится уведомление, и изменения применить не удастся, это уведомление можно будет закрыть.
|
||||
|
||||
Если адрес свободен:
|
||||
|
||||
1. Откроется **модальное окно подтверждения**, в котором отображаются:
|
||||
- **Текущие параметры** IP-адреса.
|
||||
- **Новые параметры**, введённые пользователем.
|
||||
- Здесь Вы можете либо **отменить изменения**, либо **сохранить** их.
|
||||
|
||||
> Обратите внимание: в процессе могут несколько раз отображаться **экраны загрузки** — это нормально. Сервер динамически обрабатывает изменения и проверяет доступность указанных параметров.
|
||||
|
||||
#### 4.4 Изменение адреса подключённого узла
|
||||
|
||||
Если редактирование IP-адреса выполняется **у подключённого узла**, то при успешном применении новый адрес автоматически **обновится в списке узлов** в боковой панели. Это необходимо для корректной работы приложения и исключения путаницы.
|
||||
|
||||
## Заключение
|
||||
|
||||
GoNets значительно упрощает управление сетями в Linux, предоставляя удобный графический интерфейс для работы с сетевыми интерфейсами и узлами. Вы можете легко настраивать IP-адреса, добавлять новые узлы и управлять ими, а также изменять параметры интерфейсов без необходимости использовать командную строку.
|
||||
|
||||
Для получения дополнительной информации и подробных инструкций, пожалуйста, ознакомьтесь с документацией и скриншотами, которые будут добавлены в следующей версии.
|
||||
|
|
@ -1,3 +1,3 @@
|
|||
# Итерация 1 WIFI SCANNER
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,212 @@
|
|||
# Общее описание кода клиентской части
|
||||
|
||||
Клиент ГоNets — это одностраничное веб-приложение, разработанное на TypeScript с использованием фреймворка React. Код организован по принципам компонентно-ориентированной архитектуры, разделён на модули и компоненты для упрощения разработки, поддержки и масштабирования. Приложение использует localStorage, библиотеку Zustand и React Context для управления состоянием, а также HTTPS и WebSocket для взаимодействия с сервером.
|
||||
|
||||
### 1\. Входная точка приложения
|
||||
|
||||
Точка входа — файл index.tsx, где инициализируется корневой компонент приложения. Здесь подключаются роутер и компонент модальных окон:
|
||||
|
||||
```tsx
|
||||
return (
|
||||
<>
|
||||
<WindowComponent isOpen={isOpen} type={modalType} data={modalData} />
|
||||
<Router />
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
Приложение оборачивается в провайдеры ThemeProvider и ModalProvider, которые обеспечивают глобальный доступ к темам и модальным окнам:
|
||||
|
||||
```tsx
|
||||
root.render(
|
||||
<ThemeProvider>
|
||||
<HashRouter>
|
||||
<ModalProvider>
|
||||
<MainComponent />
|
||||
</ModalProvider>
|
||||
</HashRouter>
|
||||
</ThemeProvider>
|
||||
);
|
||||
```
|
||||
|
||||
### 2\. Роутинг
|
||||
|
||||
Роутинг реализован в файле router.tsx с использованием библиотеки react-router-dom. Несмотря на одностраничную природу приложения, роутинг управляет условной загрузкой компонентов в зависимости от конфигурации:
|
||||
|
||||
```tsx
|
||||
if (configExists === null) {
|
||||
return <RouterLoader loaderText="Идёт загрузка данных" />;
|
||||
}
|
||||
if (configExists === false) {
|
||||
return <CreateUser />;
|
||||
}
|
||||
return (
|
||||
<Routes>
|
||||
<Route path="/" element={<WorkSpace />} />
|
||||
</Routes>
|
||||
);
|
||||
```
|
||||
|
||||
### 3\. Рабочее пространство
|
||||
|
||||
Рабочее пространство (workspace.tsx) — центральная часть приложения, где происходит отрисовка интерфейса и взаимодействие с пользователем. Оно включает:
|
||||
|
||||
- Боковую панель (SideBar) — отвечает за навигацию и управление.
|
||||
- Модули — динамически подключаемые компоненты, отображаемые на основе значения из localStorage.
|
||||
|
||||
Логика отображения модулей:
|
||||
|
||||
```tsx
|
||||
return (
|
||||
<Section>
|
||||
<FlowContainer>
|
||||
<SideBar />
|
||||
{workModule === workSpaceNames[1] && <HelloWindow />}
|
||||
{workModule === workSpaceNames[2] && <About from="workSpace" />}
|
||||
{workModule === workSpaceNames[4] && <About from="helloWindow" />}
|
||||
{workModule === workSpaceNames[3] && (
|
||||
<WorkSection>
|
||||
<Header />
|
||||
<ReactFlowProvider>
|
||||
<NetworkInterfaces
|
||||
key={currentWs}
|
||||
startConnection={true}
|
||||
ws={currentWs}
|
||||
/>
|
||||
</ReactFlowProvider>
|
||||
</WorkSection>
|
||||
)}
|
||||
</FlowContainer>
|
||||
</Section>
|
||||
);
|
||||
```
|
||||
|
||||
#### 3.1. Модули рабочего пространства
|
||||
|
||||
Рабочее пространство приложения построено с акцентом на модульность, что позволяет разделять функциональность на независимые компоненты. Модули делятся на два типа:
|
||||
|
||||
- Модули приложения (AppModules): Глобальные и информационные модули, отвечающие за общую функциональность и представление данных. Примеры:
|
||||
- HelloWindow — приветственное окно.
|
||||
- About — страница с информацией о приложении.
|
||||
- Рабочие модули: Узкоспециализированные модули, предназначенные для выполнения конкретных задач. На данный момент реализован один такой модуль:
|
||||
- NetworkInterfaces (networkInterfaces.tsx) — управляет сетевыми интерфейсами и визуализацией данных с помощью React Flow. (Более подробно ознакомиться можно в файле “Описание работы модуля сетевых интерфейсов“)
|
||||
|
||||
Модули хранятся в /src/componens/workSpace/workSpaceModules/
|
||||
|
||||
### 4\. Хранилища данных
|
||||
|
||||
Приложение использует localStorage для и библиотеку Zustand с React Context для управления состоянием. Zustand-хранилища синхронизируются с localStorage через persist, а некоторые хранилища управляют временным состоянием без сохранения.
|
||||
|
||||
Все хранилища располагаются в директории /src/store
|
||||
|
||||
#### 4.1. Хранилища в localStorage
|
||||
|
||||
1. currentIp-storage (строка): Хранит IP-адрес текущего хоста или "[localhost](http://localhost)". Пример: "192.168.1.147".
|
||||
2. connectedDevices-storage (массив объектов Device): Список подключённых хостов.
|
||||
|
||||
```tsx
|
||||
interface Device { number: number; address: string; }
|
||||
```
|
||||
|
||||
Пример: \[{ number: 1, address: "192.168.1.147" }\].
|
||||
3. menus-storage (массив объектов Menu): Состояние меню (открыто/закрыто, активно/неактивно).
|
||||
|
||||
```tsx
|
||||
interface Menu { id: string; isOpen: boolean; isActive?: boolean; }
|
||||
```
|
||||
|
||||
Пример: \[{ id: "menu1", isOpen: true, isActive: true }\].
|
||||
4. toolBar-storage (объект ToolBar): Состояние боковой панели и текущий активный пункт.
|
||||
|
||||
```tsx
|
||||
interface ToolSpace { id: string; isOpen: boolean; isActive?: boolean; }
|
||||
interface ToolBar { toolSpace: ToolSpace[]; current: string; }
|
||||
```
|
||||
|
||||
Пример: { toolSpace: \[{ id: "tool1", isOpen: true, isActive: true }\], current: "tool1" }.
|
||||
5. workSpace-storage (строка): Название активного модуля из /src/const/workSpace/names.ts. Пример: "networkInterfaces".
|
||||
6. theme (строка): Текущая тема приложения ("light", "dark", "system"). Пример: "dark".
|
||||
|
||||
#### 4.2. Zustand-хранилища, связанные с localStorage
|
||||
|
||||
1. useIpStore (currentIp-storage): Управляет IP-адресом хоста.
|
||||
- Методы: setIpAddress(newIp: string).
|
||||
- Пример: "[localhost](http://localhost)".
|
||||
2. useDevicesStore (connectedDevices-storage): Управляет списком устройств.
|
||||
- Методы: addDevice(address: string), deleteDevice(number: number).
|
||||
- Пример: \[{ number: 1, address: "192.168.1.147" }\].
|
||||
3. useMenuStore (menus-storage): Управляет состоянием меню.
|
||||
- Методы: toggleMenu(menuId: string).
|
||||
- Пример: \[{ id: "menu1", isOpen: true, isActive: true }\].
|
||||
4. useToolBarStore (toolBar-storage): Управляет боковой панелью.
|
||||
- Методы: toggleMenu(menuId: string), initialize().
|
||||
- Пример: { toolSpace: \[{ id: "tool1", isOpen: true }\], current: "tool1" }.
|
||||
5. useWorkSpaceStore (workSpace-storage): Хранит активный модуль.
|
||||
- Методы: setWorkModule(newModule: string), initialize().
|
||||
- Пример: "networkInterfaces".
|
||||
|
||||
#### 4.3. Zustand-хранилища (без localStorage)
|
||||
|
||||
1. useAdminStore: Управляет административными правами.
|
||||
- Тип: Булево значение (isAdmin).
|
||||
- Методы: setAdmin(isAdmin: boolean).
|
||||
- Пример: isAdmin: true.
|
||||
2. useGroupStore: Управляет группами нод в React Flow.
|
||||
- Тип: Массив объектов { id: string; click: boolean }.
|
||||
- Методы: setGroups(groups: { id: string; click: boolean }\[\]).
|
||||
- Пример: \[{ id: "group1", click: true }\].
|
||||
3. usePosStore: Хранит флаг для сброса позиций нод в React Flow.
|
||||
- Тип: Булево значение (isNullPos).
|
||||
- Методы: setNullPos(isNullPos: boolean).
|
||||
- Пример: isNullPos: false.
|
||||
4. React Контексты
|
||||
|
||||
#### 4.4. Контекст темы (ThemeProvider)
|
||||
|
||||
- Назначение: Управляет темой приложения ("light", "dark", "system") и её переключением.
|
||||
- Хранилище localStorage: theme.
|
||||
- Интерфейс:
|
||||
|
||||
```tsx
|
||||
type ThemeContextType = {
|
||||
theme: "light" | "dark" | "system";
|
||||
toggleTheme: () => void;
|
||||
};
|
||||
```
|
||||
|
||||
- Методы: toggleTheme() — переключает тему в порядке: system → light → dark.
|
||||
- Особенности:
|
||||
- По умолчанию используется "system", подстраивающаяся под prefers-color-scheme.
|
||||
- Интеграция с styled-components для стилизации через StyledTheme и GlobalStyle.
|
||||
- Тема сохраняется в localStorage для восстановления.
|
||||
- Пример: "dark".
|
||||
|
||||
Более подробно о теме можно ознакомиться в файле (Описание работы с темой)
|
||||
|
||||
#### 4.5. Контекст модальных окон (ModalProvider)
|
||||
|
||||
- Назначение: Управляет отображением модальных окон.
|
||||
- Интерфейс:
|
||||
|
||||
```tsx
|
||||
interface ModalContextType {
|
||||
isOpen: boolean;
|
||||
modalType: string;
|
||||
modalData: any;
|
||||
openModal: (modalType: string, modalData?: any) => void;
|
||||
closeModal: () => void;
|
||||
closeLoader: () => void;
|
||||
}
|
||||
```
|
||||
|
||||
- Методы:
|
||||
- openModal(modalType: string, modalData?: any) — открывает окно с указанным типом и данными.
|
||||
- closeModal() — закрывает окно с перезагрузкой страницы.
|
||||
- closeLoader() — закрывает окно без перезагрузки.
|
||||
- Особенности:
|
||||
- Оборачивает приложение в index.tsx, доступ через useModalContext.
|
||||
- Блокирует прокрутку страницы при открытии окна (overflow: hidden).
|
||||
- Типы окон определены в /src/components/modalwindows/windowsType.ts.
|
||||
- Логика отображения — в /src/components/modalwindows/modalWindow.tsx.
|
||||
- Контейнеры хранятся в /src/components/modalwindows/modalContainers.
|
||||
- Пример: openModal("loader", "загрузка данных").
|
||||
|
|
@ -0,0 +1,387 @@
|
|||
# Описание работы c сетевыми интерфейсами
|
||||
|
||||
На данный момент главным рабочим модулем приложения является модуль работы с сетевыми интерфейсами. Данный модуль позволяет отображать сетевые интерфейсы хоста в графическом виде и управлять IP адресами интерфейсов. В основе работы модуля лежит достаточно большая библиотека ReactFlow, которая позволяет строить различные графы по средством блоков и связей между ними. Далее для удобства блоки будут называться нодами (node), связи эджами (edge), а само поле ReactFlow холстом
|
||||
|
||||
### 1\. Подключение модуля в рабочее пространство
|
||||
|
||||
Работа модуля начинается с файла /src/components/workSpace/workspace.tsx, здесь в рабочее пространство приложения подключаются сами модули.
|
||||
|
||||
```
|
||||
{workModule === workSpaceNames[3] &&
|
||||
<WorkSection>
|
||||
<Header />
|
||||
<ReactFlowProvider>
|
||||
<NetworkInterfaces
|
||||
key={currentWs}
|
||||
startConnection={true}
|
||||
ws={currentWs}
|
||||
/>
|
||||
</ReactFlowProvider>
|
||||
</WorkSection>
|
||||
}
|
||||
```
|
||||
|
||||
В данном блоке этого файла подключается модуль сетевых интерфейсов в рабочее пространство. Из localstorage берётся название текущего модуля, который должен быть подключён, в этом случаи это ‘networkInterfaces‘ и по названию определяется необходимый модуль.
|
||||
|
||||
Здесь
|
||||
|
||||
<Header/> - это верхняя панель для управления холстом
|
||||
|
||||
<NetWorkInterfaces/> - Сам компонент работы с сетевыми интерфейсами, в нём пропсы key - ключ компонента, будет равен текущему ip хоста, startConnection - флаг, при передачи которого начинается работа компонента, ws - передача ip текущего хоста для создания WebSocket подключения
|
||||
|
||||
### 2\. Компонент NetworkInterfaces
|
||||
|
||||
Рассмотрение компонента логично начать с обзора его переменных состояния, которых в этом компоненте присутствует немало.
|
||||
|
||||
#### 2.1. Переменные состояния компонента NetworkInterfaces
|
||||
|
||||
1. initializationAttempt
|
||||
- Тип: React.useRef<number>
|
||||
- Описание: Счетчик попыток инициализации данных, хранящийся в useRef. Используется для отслеживания статуса начальной загрузки нод и эджей. Начальное значение — 0. После успешной инициализации устанавливается в 1. Позволяет избежать повторных попыток инициализации или перезагрузки страницы при сбоях.
|
||||
2. requestError
|
||||
- Тип: { status: boolean, message: string }
|
||||
- Описание: Состояние для отслеживания ошибок при установлении WebSocket-соединения или загрузке данных. Содержит флаг status (true, если ошибка произошла) и поле message с текстом ошибки (например, "Соединение с сервером разорвано" или "Превышено время ожидания"). Используется для отображения ошибок через модальное окно.
|
||||
3. { openModal, closeLoader }
|
||||
- Тип: Методы из useModalContext
|
||||
- Описание: Функции, полученные из контекста ModalWindowContext, для управления модальными окнами. openModal открывает модальное окно с указанным типом и параметрами (например, для отображения ошибок или уведомлений о загрузке). closeLoader закрывает экран загрузки после завершения инициализации данных.
|
||||
4. loader
|
||||
- Тип: boolean
|
||||
- Описание: Флаг, управляющий отображением экрана загрузки. Изначально установлен в true, что указывает на процесс загрузки данных. После успешной инициализации нод и эджей устанавливается в false, и экран загрузки скрывается с помощью closeLoader.
|
||||
5. socket
|
||||
- Тип: WebSocket | null
|
||||
- Описание: Состояние для хранения объекта WebSocket, используемого для связи с сервером по адресу ws://192.168.1.147:8001/api/v1. Изначально null. После успешного подключения сохраняет экземпляр WebSocket, позволяя отправлять и получать данные о сетевых интерфейсах.
|
||||
6. data
|
||||
- Тип: ResponseData\[\]
|
||||
- Описание: Массив данных, полученных через WebSocket. Содержит два элемента: данные об активных (activation) и неактивных (deactivation) сетевых интерфейсах. Используется как источник для преобразования в ноды и эджи для отображения на холсте ReactFlow.
|
||||
7. wifiData
|
||||
- Тип: ResponseNetwork | undefined
|
||||
- Описание: Состояние для хранения информации о Wi-Fi интерфейсе, извлеченной из активных данных (activation). Обновляется, если в полученных данных присутствует интерфейс с типом WIFI. Используется для специфической обработки и отображения Wi-Fi нод на холсте.
|
||||
8. hasInited
|
||||
- Тип: boolean
|
||||
- Описание: Флаг, указывающий, были ли данные (ноды и эджи) успешно инициализированы. Изначально false. Устанавливается в true после первичной обработки данных и вызова handleInit из useInitCanvas, чтобы предотвратить повторную инициализацию.
|
||||
9. { initedNodes, initedEdges, handleInit }
|
||||
- Тип: Значения и метод из useInitCanvas
|
||||
- Описание: Данные и функция из пользовательского хука useInitCanvas. initedNodes и initedEdges содержат инициализированные ноды и эджи, подготовленные для отображения на холсте. handleInit выполняет начальную обработку edgeData и interfaces для создания этих структур.
|
||||
10. interfaces
|
||||
- Тип: Interfaces\[\]
|
||||
- Описание: Состояние для хранения преобразованных данных о сетевых интерфейсах, полученных из data с помощью функции initNetworkIntData. Содержит структурированные объекты, описывающие интерфейсы, в формате, удобном для построения нод на холсте ReactFlow.
|
||||
11. edgeData
|
||||
- Тип: IEdge\[\]
|
||||
- Описание: Состояние для хранения преобразованных данных о связях (эджи) между сетевыми интерфейсами, полученных из data с помощью initNetworkIntData. Используется как промежуточный формат перед финальной инициализацией эджей для отображения.
|
||||
12. nodes
|
||||
- Тип: Массив нод для ReactFlow
|
||||
- Описание: Состояние, управляемое хуком useNodesState, для хранения и отображения нод (блоков) на холсте ReactFlow. Инициализируется пустым массивом и заполняется данными из initedNodes после обработки. Обновляется при изменении позиций, групп или Wi-Fi данных.
|
||||
13. edges
|
||||
- Тип: Массив эджей для ReactFlow
|
||||
- Описание: Состояние, управляемое хуком useEdgesState, для хранения и отображения связей (эджей) между нодами на холсте ReactFlow. Изначально пустой массив, заполняется из initedEdges после инициализации и обновляется при добавлении новых связей.
|
||||
14. isPanDisabled
|
||||
- Тип: boolean
|
||||
- Описание: Флаг, полученный из хука usePannableStore, определяющий, отключена ли возможность перемещения (прокрутки) холста ReactFlow. Если true, пользователь не может перемещать холст, что полезно для фиксации вида при определенных действиях.
|
||||
15. changeArray
|
||||
- Тип: any\[\]
|
||||
- Описание: Массив для временного хранения изменений позиций нод, полученных через processNodeChanges. Накапливает данные о перемещениях, которые затем отправляются на сервер через autosavePosition с интервалом в 1 секунду для сохранения позиций.
|
||||
16. groups
|
||||
- Тип: Данные из useGroupStore
|
||||
- Описание: Состояние, полученное из хука useGroupStore, содержащее информацию о группах сетевых интерфейсов (например, активные и неактивные). Используется для сортировки и сворачивания/разворачивания групп нод на холсте с помощью groupSort и collapseGroup.
|
||||
17. { isNullPos, setNullPos }
|
||||
- Тип: Значения и метод из usePosStore
|
||||
- Описание: Состояние и функция из хука usePosStore. isNullPos — флаг, указывающий, нужно ли сбросить позиции нод. setNullPos — метод для управления этим флагом. При активации сбрасывает позиции нод через resetPosition, отправляя запрос по WebSocket.
|
||||
|
||||
#### 2.2. Методы
|
||||
|
||||
Функции и эффекты
|
||||
|
||||
1. Первый useEffect — Подключение к WebSocket
|
||||
|
||||
```jsx
|
||||
useEffect(() => {
|
||||
if (startConnection) {
|
||||
openModal(ModalMap['2'], 'Идет загрузка данных');
|
||||
setNodes([]);
|
||||
setEdges([]);
|
||||
setHasInited(false);
|
||||
initializationAttempt.current = 0;
|
||||
const newSocket = new WebSocket(`ws://192.168.1.147:8001/api/v1`);
|
||||
let connectionTimeout;
|
||||
setSocket(newSocket);
|
||||
connectionTimeout = setTimeout(() => {
|
||||
if (newSocket.readyState !== WebSocket.OPEN) {
|
||||
newSocket.close();
|
||||
}
|
||||
}, 5000);
|
||||
newSocket.onopen = () => {
|
||||
console.log('WebSocket connection established');
|
||||
};
|
||||
newSocket.onmessage = (event) => {
|
||||
const newData = JSON.parse(event.data);
|
||||
setData(() => [newData.activation, newData.deactivation]);
|
||||
};
|
||||
newSocket.onerror = (error) => {
|
||||
console.error('WebSocket error:', error);
|
||||
};
|
||||
newSocket.onclose = () => {
|
||||
console.log('WebSocket connection closed');
|
||||
setRequestError({ status: true, message: 'Соединение с сервером разорвано' });
|
||||
};
|
||||
return () => {
|
||||
newSocket.close();
|
||||
closeLoader();
|
||||
};
|
||||
}
|
||||
}, [startConnection, ws]);
|
||||
```
|
||||
|
||||
- Условие: Срабатывает при изменении startConnection или ws.
|
||||
- Логика: Открывает модальное окно загрузки, сбрасывает ноды, эджи и флаги. Создает WebSocket, устанавливает тайм-аут (5 сек) для проверки соединения. Обрабатывает открытие, получение данных, ошибки и закрытие.
|
||||
- Очистка: Закрывает WebSocket и загрузчик.
|
||||
- Цель: Установить связь с сервером и получить данные.
|
||||
2. Второй useEffect — Обработка данных из WebSocket
|
||||
|
||||
```jsx
|
||||
useEffect(() => {
|
||||
if (data.length > 0) {
|
||||
const { interfaces: newInterfaces, edgeData: newEdgeData } = initNetworkIntData(data);
|
||||
const activationData = data[0].interfaces;
|
||||
const wifi = activationData.find((el: any) => el.type === 'WIFI');
|
||||
setInterfaces(newInterfaces);
|
||||
setEdgeData(newEdgeData);
|
||||
if (wifi) { setWifi(wifi); }
|
||||
}
|
||||
}, [data]);
|
||||
```
|
||||
|
||||
- Условие: Срабатывает при изменении data.
|
||||
- Логика: Преобразует data в interfaces и edgeData через initNetworkIntData. Ищет Wi-Fi интерфейс в активных данных, обновляет состояния.
|
||||
- Цель: Подготовить данные для холст.
|
||||
3. Третий useEffect — Инициализация нод и эджей
|
||||
|
||||
```jsx
|
||||
useEffect(() => {
|
||||
if (interfaces.length > 0 && !hasInited) {
|
||||
handleInit(edgeData, interfaces);
|
||||
setHasInited(true);
|
||||
}
|
||||
}, [interfaces, edgeData, hasInited]);
|
||||
```
|
||||
|
||||
- Условие: Срабатывает при изменении interfaces, edgeData, hasInited.
|
||||
- Логика: Если данные есть и инициализация не выполнена, вызывает handleInit для подготовки нод и эджей, затем устанавливает hasInited в true.
|
||||
- Цель: Инициализировать холст.
|
||||
4. Четвертый useEffect — Мониторинг инициализации
|
||||
|
||||
```jsx
|
||||
useEffect(() => {
|
||||
if (initializationAttempt.current === 0 && !requestError.status) {
|
||||
const checkInterval = setInterval(() => {
|
||||
setTimeout(() => {
|
||||
if (!initedNodes.some(node => node.id === 'g0_nw0_rx0_ip0')) {
|
||||
window.location.reload();
|
||||
}
|
||||
}, 500);
|
||||
if (initedNodes.length > 0 && initedEdges.length > 0) {
|
||||
setNodes(initedNodes);
|
||||
setEdges(initedEdges);
|
||||
console.log("Ноды и эджи успешно инициализированы");
|
||||
initializationAttempt.current = 1;
|
||||
clearInterval(checkInterval);
|
||||
clearTimeout(timeoutId);
|
||||
} else {
|
||||
console.log("Попытка инициализации нод и эджей...");
|
||||
}
|
||||
}, 1000);
|
||||
const timeoutId = setTimeout(() => {
|
||||
console.error("Ошибка: слишком долгая загрузка данных");
|
||||
clearInterval(checkInterval);
|
||||
setRequestError({ status: true, message: 'Превышено время ожидания' });
|
||||
}, 30000);
|
||||
return () => {
|
||||
clearInterval(checkInterval);
|
||||
clearTimeout(timeoutId);
|
||||
};
|
||||
}
|
||||
}, [initedNodes, initedEdges, requestError]);
|
||||
```
|
||||
|
||||
- Условие: Срабатывает при изменении initedNodes, initedEdges, requestError.
|
||||
- Логика: Проверяет каждую секунду наличие инициализированных данных. Через 500 мс проверяет ключевую ноду; если нет — перезагрузка. При успехе обновляет nodes, edges, логирует, останавливает проверки. Тайм-аут (30 сек) фиксирует ошибку.
|
||||
- Очистка: Удаляет интервал и тайм-аут.
|
||||
- Цель: Гарантировать успешную инициализацию.
|
||||
5. Пятый useEffect — Обновление счетчика попыток
|
||||
|
||||
```jsx
|
||||
useEffect(() => {
|
||||
if (nodes.length === 0) {
|
||||
initializationAttempt.current = 0;
|
||||
} else {
|
||||
initializationAttempt.current = 1;
|
||||
}
|
||||
}, [nodes]);
|
||||
```
|
||||
|
||||
- Условие: Срабатывает при изменении nodes.
|
||||
- Логика: Сбрасывает initializationAttempt в 0, если нод нет, иначе устанавливает 1.
|
||||
- Цель: Отслеживать состояние инициализации.
|
||||
6. Шестой useEffect — Управление загрузчиком
|
||||
|
||||
```jsx
|
||||
useEffect(() => {
|
||||
if (nodes.length > 0 && loader == true) {
|
||||
setLoader(false);
|
||||
closeLoader();
|
||||
}
|
||||
}, [nodes, loader]);
|
||||
```
|
||||
|
||||
- Условие: Срабатывает при изменении nodes, loader.
|
||||
- Логика: Если ноды есть и загрузчик активен, скрывает его.
|
||||
- Цель: Убрать экран загрузки после рендера.
|
||||
7. Функция onEdgesChange
|
||||
|
||||
```jsx
|
||||
const onEdgesChange = useCallback(
|
||||
(changes: any) => setEdges((eds) => applyEdgeChanges(changes, eds)),
|
||||
[setEdges]
|
||||
);
|
||||
```
|
||||
|
||||
- Тип: useCallback
|
||||
- Вход: changes — массив изменений эджей.
|
||||
- Логика: Применяет изменения к эджам через applyEdgeChanges, обновляет edges.
|
||||
- Цель: Обработать изменения связей.
|
||||
8. Функция onConnect
|
||||
|
||||
```jsx
|
||||
const onConnect = useCallback(
|
||||
(connection: any) => setEdges((eds) => addEdge(connection, eds)),
|
||||
[setEdges]
|
||||
);
|
||||
```
|
||||
|
||||
- Тип: useCallback
|
||||
- Вход: connection — объект новой связи.
|
||||
- Логика: Добавляет связь через addEdge, обновляет edges.
|
||||
- Цель: Создавать новые связи на холсте.
|
||||
9. Функция handleNodesChange
|
||||
|
||||
```jsx
|
||||
const handleNodesChange = (changes: any) => {
|
||||
onNodesChange(changes);
|
||||
const newData = processNodeChanges(changes, data);
|
||||
if (newData) {
|
||||
setChangeArray((prevArray) => [...prevArray, newData]);
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
- Вход: changes — массив изменений нод.
|
||||
- Логика: Обновляет ноды через onNodesChange, извлекает изменения позиций через processNodeChanges, добавляет в changeArray.
|
||||
- Цель: Отслеживать перемещения нод.
|
||||
10. Седьмой useEffect — Автосохранение позиций
|
||||
|
||||
```jsx
|
||||
useEffect(() => {
|
||||
const interval = setInterval(() => {
|
||||
if (socket && socket.readyState === WebSocket.OPEN) {
|
||||
autosavePosition(changeArray, socket);
|
||||
}
|
||||
setChangeArray([]);
|
||||
}, 1000);
|
||||
return () => {
|
||||
clearInterval(interval);
|
||||
};
|
||||
}, [changeArray, socket]);
|
||||
```
|
||||
|
||||
- Условие: Срабатывает при изменении changeArray, socket.
|
||||
- Логика: Каждую секунду отправляет изменения позиций через autosavePosition, очищает changeArray.
|
||||
- Очистка: Удаляет интервал.
|
||||
- Цель: Сохранять позиции на сервере.
|
||||
11. Восьмой useEffect — Обработка групп
|
||||
|
||||
```jsx
|
||||
useEffect(() => {
|
||||
const sortedGroups = groupSort(groups, nodes);
|
||||
setNodes(collapseGroup(sortedGroups, nodes));
|
||||
}, [groups]);
|
||||
```
|
||||
|
||||
- Условие: Срабатывает при изменении groups.
|
||||
- Логика: Сортирует ноды по группам через groupSort, сворачивает/разворачивает через collapseGroup, обновляет nodes.
|
||||
- Цель: Организовать ноды по группам.
|
||||
12. Девятый useEffect — Обновление Wi-Fi
|
||||
|
||||
```jsx
|
||||
useEffect(() => {
|
||||
if (wifiData) {
|
||||
setNodes(updateWifiData(wifiData, nodes));
|
||||
}
|
||||
}, [wifiData]);
|
||||
```
|
||||
|
||||
- Условие: Срабатывает при изменении wifiData.
|
||||
- Логика: Обновляет ноды с учетом Wi-Fi через updateWifiData.
|
||||
- Цель: Отобразить Wi-Fi данные.
|
||||
13. Десятый useEffect — Обработка ошибок
|
||||
|
||||
```jsx
|
||||
useEffect(() => {
|
||||
if (requestError.status) {
|
||||
setTimeout(() => {
|
||||
openModal(ModalMap['3'], { message: requestError.message });
|
||||
}, 1000);
|
||||
}
|
||||
}, [requestError]);
|
||||
```
|
||||
|
||||
- Условие: Срабатывает при изменении requestError.
|
||||
- Логика: При ошибке через 1 сек открывает модальное окно с сообщением.
|
||||
- Цель: Уведомить об ошибках.
|
||||
14. Одиннадцатый useEffect — Сброс позиций
|
||||
|
||||
```jsx
|
||||
useEffect(() => {
|
||||
if (isNullPos) {
|
||||
if (socket && socket.readyState === WebSocket.OPEN) {
|
||||
resetPosition(socket, setNullPos, nodes, setNodes);
|
||||
}
|
||||
}
|
||||
}, [isNullPos]);
|
||||
```
|
||||
|
||||
- Условие: Срабатывает при изменении isNullPos.
|
||||
- Логика: При истинном isNullPos сбрасывает позиции через resetPosition, обновляет ноды.
|
||||
- Цель: Вернуть исходные позиции.
|
||||
|
||||
#### 2.3. Рендеринг
|
||||
|
||||
```jsx
|
||||
return (
|
||||
<>
|
||||
<ReactFlow
|
||||
nodes={nodes}
|
||||
edges={edges}
|
||||
onNodesChange={handleNodesChange}
|
||||
onEdgesChange={onEdgesChange}
|
||||
onConnect={onConnect}
|
||||
style={{ background: '#F7F9FB' }}
|
||||
minZoom={0}
|
||||
maxZoom={4}
|
||||
fitView
|
||||
fitViewOptions={{ padding: 0.1 }}
|
||||
attributionPosition="bottom-left"
|
||||
snapToGrid
|
||||
snapGrid={[20, 20]}
|
||||
panOnDrag={!isPanDisabled}
|
||||
nodeTypes={nodeTypes}
|
||||
proOptions={proOptions}
|
||||
>
|
||||
<Background gap={20} size={1} bgColor={theme.background} />
|
||||
<Controls fitViewOptions={{ padding: 0.1 }} />
|
||||
</ReactFlow>
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
- Компонент: ReactFlow рендерит холст.
|
||||
- Параметры: Ноды, эджи, обработчики, фон, зум (0–4), сетка (20x20), перетаскивание по isPanDisabled, кастомные ноды.
|
||||
- Дочерние: Background (сетка), Controls (кнопки для управления зумом).
|
||||
|
|
@ -1,3 +1,3 @@
|
|||
# Сервер от меня
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,187 @@
|
|||
# Структура исходного кода клиентской части
|
||||
|
||||
### Структура исходного кода клиенсткой части
|
||||
|
||||
```
|
||||
FRONT/
|
||||
BUILD/ # Сближенная версия приложения
|
||||
DEV/ # Исходный код приложения
|
||||
assets/
|
||||
icon.png # Иконка для самого приложения
|
||||
public/
|
||||
assets/
|
||||
images/ # SVG-иконки и изображения для UI
|
||||
back1.svg
|
||||
bigLogo.svg
|
||||
bukvi.svg
|
||||
cancel.svg
|
||||
check.svg
|
||||
edit.svg
|
||||
ethernet.svg
|
||||
gossys.png
|
||||
logo.svg
|
||||
signal.svg
|
||||
vite.svg
|
||||
vpn.svg
|
||||
wifi.svg
|
||||
src/ # Основной исходный код приложения
|
||||
api/
|
||||
request.ts # Функции для HTTP-запросов
|
||||
assets/
|
||||
css/ # Стили приложения
|
||||
flow.css # Стили для React Flow
|
||||
index.css # Глобальные стили приложения
|
||||
components/
|
||||
customeNodes/ # Кастомные ноды для React Flow
|
||||
nodes/
|
||||
baseForm/ # Базовые формы нод
|
||||
circle/
|
||||
circleNode.tsx # Компонент ноды в форме круга
|
||||
style.ts
|
||||
default/
|
||||
defaultNode.tsx # Компонент ноды по умолчанию
|
||||
style.ts
|
||||
diamond/
|
||||
diamondNode.tsx # Компонент ноды в форме ромба
|
||||
style.ts
|
||||
paralelogram/
|
||||
paralelogramNode.tsx # Компонент ноды в форме параллелограмма
|
||||
style.ts
|
||||
pill/
|
||||
pillNode.tsx # Компонент ноды в форме таблетки
|
||||
style.ts
|
||||
networkInterface/ # Ноды для представления сетевых интерфейсов
|
||||
ipGroup/
|
||||
ipGroup.tsx # Компонент ноды групп IP-адресов
|
||||
style.ts
|
||||
ipNode/
|
||||
ipNode.tsx # Компонент ноды IP-адреса
|
||||
style.ts
|
||||
networkGroup/
|
||||
nodeGroup.tsx # Компонент ноды групп сетевых интерфейсов
|
||||
style.ts
|
||||
networkNode/
|
||||
networkNode.tsx # Компонент ноды сетевого интерфейса
|
||||
style.ts
|
||||
portNode/
|
||||
portNode.tsx # Компонент ноды порта
|
||||
style.ts
|
||||
index.ts
|
||||
types/
|
||||
colors.ts # Константы цветов для нод
|
||||
types.ts # Общие типы для нод
|
||||
modalwindows/
|
||||
modalContainers/ # Контейнеры для модальных окон
|
||||
addDevice.tsx
|
||||
connectionError.tsx
|
||||
ipConfirm.tsx
|
||||
rightsConfirm.tsx
|
||||
index.ts
|
||||
modal.tsx # Базовый компонент модального окна
|
||||
modalWindow.tsx # Основной компонент для рендеринга модальных окон
|
||||
style.ts # Стили для модальных окон
|
||||
windowsType.ts # Типы для модальных окон
|
||||
UI/ # Общие UI-компоненты
|
||||
buttons/
|
||||
mainButton.tsx # Основная кнопка приложения
|
||||
quitButton.tsx # Кнопка выхода
|
||||
toggletheme.tsx # Кнопка переключения темы
|
||||
inputs/
|
||||
input.tsx # Компонент поля ввода
|
||||
animDot.tsx # Анимированная точка
|
||||
loader.tsx # Компонент загрузки
|
||||
routerLoader.tsx # Лоадер для маршрутизации
|
||||
signalSvg.tsx # SVG-компонент для индикатора сигнала
|
||||
workSpace/ # Компоненты рабочего пространства
|
||||
modules/
|
||||
appModules/ # Общие модули приложения
|
||||
about.tsx # Страница/компонент "О программе"
|
||||
header.tsx # Компонент хэдера
|
||||
helloWindow.tsx # Приветственное окно
|
||||
workModules/
|
||||
networkInterfaces.tsx # Модуль для управления сетевыми интерфейсами
|
||||
sideBar/ # Боковая панель
|
||||
toolBar/
|
||||
toolBar-button.tsx # Компонент кнопки панели инструментов
|
||||
toolBar.tsx # Панель инструментов
|
||||
toolSpace/
|
||||
devicesBar.tsx # Меню управление подключённых хостов
|
||||
toolSpace.tsx # Компонент пространства инструментов
|
||||
sideBar.tsx # Основной компонент боковой панели
|
||||
workSpace.tsx # Основной компонент рабочего пространства
|
||||
register.tsx # Компонент регистрации пользователя(создания пароля)
|
||||
const/ # Константы и конфигурации
|
||||
buttons/
|
||||
icons.tsx # Иконки для кнопок
|
||||
names.ts # Названия кнопок
|
||||
menus/
|
||||
othersMenus/
|
||||
data.ts # Данные для прочих меню
|
||||
names.ts # Названия прочих меню
|
||||
sideBar/
|
||||
components.tsx # Компоненты для боковой панели
|
||||
data.ts # Данные для боковой панели
|
||||
icons.tsx # Иконки боковой панели
|
||||
names.ts # Названия пунктов боковой панели
|
||||
modals/
|
||||
names.ts # Названия модальных окон
|
||||
theme/
|
||||
globalStyles.ts # Глобальные стили темы
|
||||
icons.tsx # Иконки для темы
|
||||
names.ts # Названия тем
|
||||
theme.ts # Конфигурация темы
|
||||
types/
|
||||
types.ts # Общие типы приложения
|
||||
workspace/
|
||||
names.ts # Названия для рабочего пространства
|
||||
hooks/
|
||||
useMenu.ts # Хук для управления меню
|
||||
useToolBar.ts # Хук для управления панелью инструментов
|
||||
store/
|
||||
adminStore.ts # Хранилище для админских данных
|
||||
devicesStore.ts # Хранилище для данных об подключённых хостах
|
||||
flowStore.ts # Хранилище для React Flow
|
||||
groupStore.ts # Хранилище для групп нод
|
||||
index.ts # Экспорт всех хранилищ
|
||||
ipStore.ts # Хранилище для IP-адресов
|
||||
menusStore.ts # Хранилище для меню
|
||||
modalContext.tsx # Контекст для управления модальными окнами
|
||||
pannableStore.ts # Хранилище для перемещения холста
|
||||
posStore.ts # Хранилище для позиций нод
|
||||
themeContext.tsx # Контекст для управления темой
|
||||
toolBarStore.ts # Хранилище для панели инструментов
|
||||
workSpaceStore.ts # Хранилище для рабочего пространства
|
||||
utils/ # Утилитарные функции
|
||||
nodeController/ # Утилиты для управления узлами
|
||||
nodeCreator/
|
||||
inits/
|
||||
initEdges.ts # Инициализация связей (эджей)
|
||||
initIpArray.ts # Инициализация массива IP-адресов
|
||||
initNodes.ts # Инициализация нод
|
||||
initor.ts # Общий инициализатор
|
||||
autosavePosition.ts # Автосохранение позиций нод
|
||||
collapseGroup.ts # Сворачивание групп нод
|
||||
groupSort.ts # Сортировка групп
|
||||
index.ts # Экспорт утилит
|
||||
initNetIntData.ts # Инициализация данных сетевых интерфейсов
|
||||
updateWifiData.ts # Обновление данных Wi-Fi
|
||||
validator.ts # Валидация данных
|
||||
checkAdmin.ts # Проверка прав администратора
|
||||
pageReloads.ts # Утилиты для управления перезагрузкой страниц
|
||||
electron.d.ts # Типы для Electron
|
||||
router.tsx # Маршрутизация (React Router)
|
||||
.gitignore
|
||||
eslint.config.js
|
||||
index.html # Главный HTML-файл
|
||||
index.tsx # Точка входа для React-приложения
|
||||
main.js # Главный файл для Electron
|
||||
package-lock.json
|
||||
package.json
|
||||
preload.js # Preload-скрипт для Electron
|
||||
tsconfig.app.json
|
||||
tsconfig.json
|
||||
tsconfig.node.json
|
||||
vite-env.d.ts
|
||||
vite.config.ts
|
||||
yarn.lock
|
||||
```
|
||||
|
|
@ -1,3 +1,3 @@
|
|||
# Схема общей структуры клиентской части
|
||||
|
||||
|
||||
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
# Схема общей структуры сервера
|
||||
|
||||
|
||||
|
||||
|
||||
### Зависимости сервера (AGPL Нету):
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue