diff --git a/ПРИЛОЖЕНИЕ ГоNETS Материалы/files/0196e7bd-eb42-705b-8687-109629f6b87c/diagram.drawio.svg b/assets/diagram.drawio.1.svg similarity index 100% rename from ПРИЛОЖЕНИЕ ГоNETS Материалы/files/0196e7bd-eb42-705b-8687-109629f6b87c/diagram.drawio.svg rename to assets/diagram.drawio.1.svg diff --git a/ПРИЛОЖЕНИЕ ГоNETS Материалы/files/0196e746-976b-715f-a3d2-7feb5c9ec7e4/diagram.drawio.svg b/assets/diagram.drawio.2.svg similarity index 100% rename from ПРИЛОЖЕНИЕ ГоNETS Материалы/files/0196e746-976b-715f-a3d2-7feb5c9ec7e4/diagram.drawio.svg rename to assets/diagram.drawio.2.svg diff --git a/ПРИЛОЖЕНИЕ ГоNETS Материалы/files/0196e897-241a-73ea-857a-b7bbb0ce9fa7/diagram.drawio.svg b/assets/diagram.drawio.3.svg similarity index 100% rename from ПРИЛОЖЕНИЕ ГоNETS Материалы/files/0196e897-241a-73ea-857a-b7bbb0ce9fa7/diagram.drawio.svg rename to assets/diagram.drawio.3.svg diff --git a/ПРИЛОЖЕНИЕ ГоNETS Материалы/files/019720a6-2ad6-7428-ac14-cb1cbdc8709e/diagram.drawio.svg b/assets/diagram.drawio.4.svg similarity index 100% rename from ПРИЛОЖЕНИЕ ГоNETS Материалы/files/019720a6-2ad6-7428-ac14-cb1cbdc8709e/diagram.drawio.svg rename to assets/diagram.drawio.4.svg diff --git a/ПРИЛОЖЕНИЕ ГоNETS Материалы/files/0196d849-f396-7538-989c-7343b21a11f1/diagram.drawio.svg b/assets/diagram.drawio.svg similarity index 100% rename from ПРИЛОЖЕНИЕ ГоNETS Материалы/files/0196d849-f396-7538-989c-7343b21a11f1/diagram.drawio.svg rename to assets/diagram.drawio.svg diff --git a/files/0197ab7b-da2e-73cf-9733-973d460bc39c/image.png b/assets/image 1.png similarity index 100% rename from files/0197ab7b-da2e-73cf-9733-973d460bc39c/image.png rename to assets/image 1.png diff --git a/files/0197ab88-3038-700c-ae44-757394012bc3/image.png b/assets/image 10.png similarity index 100% rename from files/0197ab88-3038-700c-ae44-757394012bc3/image.png rename to assets/image 10.png diff --git a/files/0197ab88-a7ee-75be-82d5-4d64ccf6a6bb/image.png b/assets/image 11.png similarity index 100% rename from files/0197ab88-a7ee-75be-82d5-4d64ccf6a6bb/image.png rename to assets/image 11.png diff --git a/files/0197ab88-fa67-7010-b1c3-1c674c67e802/image.png b/assets/image 12.png similarity index 100% rename from files/0197ab88-fa67-7010-b1c3-1c674c67e802/image.png rename to assets/image 12.png diff --git a/files/0197abf8-3196-759b-a88f-b63cba046934/image.png b/assets/image 13.png similarity index 100% rename from files/0197abf8-3196-759b-a88f-b63cba046934/image.png rename to assets/image 13.png diff --git a/files/0197abf8-a5ae-748a-8f63-de7246553959/image.png b/assets/image 14.png similarity index 100% rename from files/0197abf8-a5ae-748a-8f63-de7246553959/image.png rename to assets/image 14.png diff --git a/files/0197abf8-da73-721b-a70f-6117ea0c0c77/image.png b/assets/image 15.png similarity index 100% rename from files/0197abf8-da73-721b-a70f-6117ea0c0c77/image.png rename to assets/image 15.png diff --git a/files/0197abf9-c0f5-71f7-a92f-e7f9431d636d/image.png b/assets/image 16.png similarity index 100% rename from files/0197abf9-c0f5-71f7-a92f-e7f9431d636d/image.png rename to assets/image 16.png diff --git a/files/0197abf9-e076-7627-8298-2388154fd9c8/image.png b/assets/image 17.png similarity index 100% rename from files/0197abf9-e076-7627-8298-2388154fd9c8/image.png rename to assets/image 17.png diff --git a/files/0197abfb-7b47-756d-9b68-5b18461d0e41/image.png b/assets/image 18.png similarity index 100% rename from files/0197abfb-7b47-756d-9b68-5b18461d0e41/image.png rename to assets/image 18.png diff --git a/files/0197ac00-b9ef-706b-ab71-404ac887ca26/image.png b/assets/image 19.png similarity index 100% rename from files/0197ac00-b9ef-706b-ab71-404ac887ca26/image.png rename to assets/image 19.png diff --git a/files/0197ab7d-343e-763c-abbf-7104d42807e1/image.png b/assets/image 2.png similarity index 100% rename from files/0197ab7d-343e-763c-abbf-7104d42807e1/image.png rename to assets/image 2.png diff --git a/files/0197ac01-545d-76ce-8d8c-2a7e402d8b59/image.png b/assets/image 20.png similarity index 100% rename from files/0197ac01-545d-76ce-8d8c-2a7e402d8b59/image.png rename to assets/image 20.png diff --git a/files/0197ab81-6a47-761b-9fa2-2b83972d30af/image.png b/assets/image 3.png similarity index 100% rename from files/0197ab81-6a47-761b-9fa2-2b83972d30af/image.png rename to assets/image 3.png diff --git a/files/0197ab81-99b0-743c-8f3e-fd786991acda/image.png b/assets/image 4.png similarity index 100% rename from files/0197ab81-99b0-743c-8f3e-fd786991acda/image.png rename to assets/image 4.png diff --git a/files/0197ab83-e584-74d7-8437-24ab032fc6ff/image.png b/assets/image 5.png similarity index 100% rename from files/0197ab83-e584-74d7-8437-24ab032fc6ff/image.png rename to assets/image 5.png diff --git a/files/0197ab84-aff1-7785-aca8-4dae706127de/image.png b/assets/image 6.png similarity index 100% rename from files/0197ab84-aff1-7785-aca8-4dae706127de/image.png rename to assets/image 6.png diff --git a/files/0197ab85-79dd-7798-b0cf-7d852836f5cb/image.png b/assets/image 7.png similarity index 100% rename from files/0197ab85-79dd-7798-b0cf-7d852836f5cb/image.png rename to assets/image 7.png diff --git a/files/0197ab85-bfa6-745c-813d-1d256fdd0538/image.png b/assets/image 8.png similarity index 100% rename from files/0197ab85-bfa6-745c-813d-1d256fdd0538/image.png rename to assets/image 8.png diff --git a/files/0197ab86-3327-758d-ad70-f43a66a685ed/image.png b/assets/image 9.png similarity index 100% rename from files/0197ab86-3327-758d-ad70-f43a66a685ed/image.png rename to assets/image 9.png diff --git a/files/0197ab7a-99a0-70cc-a5c1-079143687d24/image.png b/assets/image.png similarity index 100% rename from files/0197ab7a-99a0-70cc-a5c1-079143687d24/image.png rename to assets/image.png diff --git a/ПРИЛОЖЕНИЕ ГоNETS Материалы.md b/Документация.md similarity index 58% rename from ПРИЛОЖЕНИЕ ГоNETS Материалы.md rename to Документация.md index cd74818..896d460 100644 --- a/ПРИЛОЖЕНИЕ ГоNETS Материалы.md +++ b/Документация.md @@ -1,75 +1,75 @@ -# ПРИЛОЖЕНИЕ ГоNETS Материалы +# Курс по использованию ГоNETS При первом запуске ГоNETS необходимо настроить пользователя оператор для дальнейшей работы с приложением. -![](files/0197ab7a-99a0-70cc-a5c1-079143687d24/image.png) +![](image.png) О программе -![](files/0197ac00-b9ef-706b-ab71-404ac887ca26/image.png) +![](image%2019.png) Новая страница о программе (на рассмотрении) -![](files/0197ac01-545d-76ce-8d8c-2a7e402d8b59/image.png) +![](image%2020.png) Основное полотно приложения с текущими сетевыми интерфейсами на системе -![](files/0197ab7b-da2e-73cf-9733-973d460bc39c/image.png) +![](image%201.png) Для комфортного восприятия дальше скриншоты будут в светлой теме, переключить тему можно в левом нижнем углу кликнув на специальную иконку. Поддерживается темная, светлая и системная темы. -![](files/0197ab7d-343e-763c-abbf-7104d42807e1/image.png) +![](image%202.png) Далее отображается нынешний узел с возможностью подключиться к другому узлу -![](files/0197ab81-6a47-761b-9fa2-2b83972d30af/image.png) +![](image%203.png) -![](files/0197ab81-99b0-743c-8f3e-fd786991acda/image.png) +![](image%204.png) Введя данные узел будет подключен и отображаться в левом списке доступных узлов. На следующем скриншоте отображается полотное узла к которому мы подключились -![](files/0197ab83-e584-74d7-8437-24ab032fc6ff/image.png) +![](image%205.png) Окно сканирования узлов в подсети -![](files/0197ab84-aff1-7785-aca8-4dae706127de/image.png) +![](image%206.png) Список просканированных узлов подсети В виде таблицы -![](files/0197ab85-79dd-7798-b0cf-7d852836f5cb/image.png) +![](image%207.png) Списком -![](files/0197ab85-bfa6-745c-813d-1d256fdd0538/image.png) +![](image%208.png) Возможность добавить заметку к узлу -![](files/0197ab86-3327-758d-ad70-f43a66a685ed/image.png) +![](image%209.png) Сканирование точек доступа Wi-Fi -![](files/0197ab88-3038-700c-ae44-757394012bc3/image.png) +![](image%2010.png) Просканированные точки доступа Wi-Fi -![](files/0197ab88-a7ee-75be-82d5-4d64ccf6a6bb/image.png)![](files/0197ab88-fa67-7010-b1c3-1c674c67e802/image.png) +![](image%2011.png)![](image%2012.png) Изменение IP-адреса у сетевого интерфейса -![](files/0197abf8-3196-759b-a88f-b63cba046934/image.png) +![](image%2013.png) Предупреждение об необходимости авторизоваться под администратором -![](files/0197abf8-a5ae-748a-8f63-de7246553959/image.png) +![](image%2014.png) -![](files/0197abf8-da73-721b-a70f-6117ea0c0c77/image.png)![](files/0197abf9-0abe-740d-9f2a-3ea3fdd425d0/image.png) +![](image%2015.png)![](files/0197abf9-0abe-740d-9f2a-3ea3fdd425d0/image.png) Проверка доступности вводимых данных -![](files/0197abf9-c0f5-71f7-a92f-e7f9431d636d/image.png) +![](image%2016.png) -![](files/0197abf9-e076-7627-8298-2388154fd9c8/image.png) +![](image%2017.png) -![](files/0197abfb-7b47-756d-9b68-5b18461d0e41/image.png) \ No newline at end of file +![](image%2018.png) \ No newline at end of file diff --git a/ПРИЛОЖЕНИЕ ГоNETS Материалы/API.md b/ПРИЛОЖЕНИЕ ГоNETS Материалы/API.md new file mode 100644 index 0000000..0bf32b0 --- /dev/null +++ b/ПРИЛОЖЕНИЕ ГоNETS Материалы/API.md @@ -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), чтобы избежать ошибок подключения. \ No newline at end of file diff --git a/ПРИЛОЖЕНИЕ ГоNETS Материалы/ГоNets итог.md b/ПРИЛОЖЕНИЕ ГоNETS Материалы/ГоNets итог.md index 959f470..8f9fa2e 100644 --- a/ПРИЛОЖЕНИЕ ГоNETS Материалы/ГоNets итог.md +++ b/ПРИЛОЖЕНИЕ ГоNETS Материалы/ГоNets итог.md @@ -1,3 +1,3 @@ # ГоNets итог -![diagram.drawio.svg](files/0196e897-241a-73ea-857a-b7bbb0ce9fa7/diagram.drawio.svg?t=1747737260475) \ No newline at end of file +![diagram.drawio.svg](assets/diagram.drawio.3.svg) diff --git a/ПРИЛОЖЕНИЕ ГоNETS Материалы/Инструкция по запуску и сборке клиента.md b/ПРИЛОЖЕНИЕ ГоNETS Материалы/Инструкция по запуску и сборке клиента.md new file mode 100644 index 0000000..aabe612 --- /dev/null +++ b/ПРИЛОЖЕНИЕ ГоNETS Материалы/Инструкция по запуску и сборке клиента.md @@ -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), чтобы избежать ошибок подключения \ No newline at end of file diff --git a/ПРИЛОЖЕНИЕ ГоNETS Материалы/Инструкция по пользованию.md b/ПРИЛОЖЕНИЕ ГоNETS Материалы/Инструкция по пользованию.md new file mode 100644 index 0000000..c2498d6 --- /dev/null +++ b/ПРИЛОЖЕНИЕ ГоNETS Материалы/Инструкция по пользованию.md @@ -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-адреса, добавлять новые узлы и управлять ими, а также изменять параметры интерфейсов без необходимости использовать командную строку. + +Для получения дополнительной информации и подробных инструкций, пожалуйста, ознакомьтесь с документацией и скриншотами, которые будут добавлены в следующей версии. \ No newline at end of file diff --git a/ПРИЛОЖЕНИЕ ГоNETS Материалы/Итерация 1 WIFI SCANNER.md b/ПРИЛОЖЕНИЕ ГоNETS Материалы/Итерация 1 WIFI SCANNER.md index 3d8159e..d634fa5 100644 --- a/ПРИЛОЖЕНИЕ ГоNETS Материалы/Итерация 1 WIFI SCANNER.md +++ b/ПРИЛОЖЕНИЕ ГоNETS Материалы/Итерация 1 WIFI SCANNER.md @@ -1,3 +1,3 @@ # Итерация 1 WIFI SCANNER -![diagram.drawio.svg](files/019720a6-2ad6-7428-ac14-cb1cbdc8709e/diagram.drawio.svg?t=1748599450330) \ No newline at end of file +![diagram.drawio.svg](assets/diagram.drawio.4.svg) \ No newline at end of file diff --git a/ПРИЛОЖЕНИЕ ГоNETS Материалы/Общее описание кода клиентской части.md b/ПРИЛОЖЕНИЕ ГоNETS Материалы/Общее описание кода клиентской части.md new file mode 100644 index 0000000..7e90c8a --- /dev/null +++ b/ПРИЛОЖЕНИЕ ГоNETS Материалы/Общее описание кода клиентской части.md @@ -0,0 +1,212 @@ +# Общее описание кода клиентской части + +Клиент ГоNets — это одностраничное веб-приложение, разработанное на TypeScript с использованием фреймворка React. Код организован по принципам компонентно-ориентированной архитектуры, разделён на модули и компоненты для упрощения разработки, поддержки и масштабирования. Приложение использует localStorage, библиотеку Zustand и React Context для управления состоянием, а также HTTPS и WebSocket для взаимодействия с сервером. + +### 1\. Входная точка приложения + +Точка входа — файл index.tsx, где инициализируется корневой компонент приложения. Здесь подключаются роутер и компонент модальных окон: + +```tsx +return ( + <> + + + +); +``` + +Приложение оборачивается в провайдеры ThemeProvider и ModalProvider, которые обеспечивают глобальный доступ к темам и модальным окнам: + +```tsx +root.render( + + + + + + + +); +``` + +### 2\. Роутинг + +Роутинг реализован в файле router.tsx с использованием библиотеки react-router-dom. Несмотря на одностраничную природу приложения, роутинг управляет условной загрузкой компонентов в зависимости от конфигурации: + +```tsx +if (configExists === null) { + return ; +} +if (configExists === false) { + return ; +} +return ( + + } /> + +); +``` + +### 3\. Рабочее пространство + +Рабочее пространство (workspace.tsx) — центральная часть приложения, где происходит отрисовка интерфейса и взаимодействие с пользователем. Оно включает: + +- Боковую панель (SideBar) — отвечает за навигацию и управление. +- Модули — динамически подключаемые компоненты, отображаемые на основе значения из localStorage. + +Логика отображения модулей: + +```tsx +return ( +
+ + + {workModule === workSpaceNames[1] && } + {workModule === workSpaceNames[2] && } + {workModule === workSpaceNames[4] && } + {workModule === workSpaceNames[3] && ( + +
+ + + + + )} + +
+); +``` + +#### 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", "загрузка данных"). \ No newline at end of file diff --git a/ПРИЛОЖЕНИЕ ГоNETS Материалы/Описание работы c сетевыми интерфейсами.md b/ПРИЛОЖЕНИЕ ГоNETS Материалы/Описание работы c сетевыми интерфейсами.md new file mode 100644 index 0000000..9dd52ba --- /dev/null +++ b/ПРИЛОЖЕНИЕ ГоNETS Материалы/Описание работы c сетевыми интерфейсами.md @@ -0,0 +1,387 @@ +# Описание работы c сетевыми интерфейсами + +На данный момент главным рабочим модулем приложения является модуль работы с сетевыми интерфейсами. Данный модуль позволяет отображать сетевые интерфейсы хоста в графическом виде и управлять IP адресами интерфейсов. В основе работы модуля лежит достаточно большая библиотека ReactFlow, которая позволяет строить различные графы по средством блоков и связей между ними. Далее для удобства блоки будут называться нодами (node), связи эджами (edge), а само поле ReactFlow холстом + +### 1\. Подключение модуля в рабочее пространство + +Работа модуля начинается с файла /src/components/workSpace/workspace.tsx, здесь в рабочее пространство приложения подключаются сами модули. + +``` +{workModule === workSpaceNames[3] && + +
+ + + + + } +``` + +В данном блоке этого файла подключается модуль сетевых интерфейсов в рабочее пространство. Из 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 рендерит холст. +- Параметры: Ноды, эджи, обработчики, фон, зум (0–4), сетка (20x20), перетаскивание по isPanDisabled, кастомные ноды. +- Дочерние: Background (сетка), Controls (кнопки для управления зумом). \ No newline at end of file diff --git a/ПРИЛОЖЕНИЕ ГоNETS Материалы/Сервер от меня.md b/ПРИЛОЖЕНИЕ ГоNETS Материалы/Сервер от меня.md index e753d46..4c09ac9 100644 --- a/ПРИЛОЖЕНИЕ ГоNETS Материалы/Сервер от меня.md +++ b/ПРИЛОЖЕНИЕ ГоNETS Материалы/Сервер от меня.md @@ -1,3 +1,3 @@ # Сервер от меня -![diagram.drawio.svg](files/0196e7bd-eb42-705b-8687-109629f6b87c/diagram.drawio.svg?t=1747645174767) \ No newline at end of file +![diagram.drawio.svg](assets/diagram.drawio.1.svg) \ No newline at end of file diff --git a/ПРИЛОЖЕНИЕ ГоNETS Материалы/Структура исходного кода клиентской части.md b/ПРИЛОЖЕНИЕ ГоNETS Материалы/Структура исходного кода клиентской части.md new file mode 100644 index 0000000..fa958c8 --- /dev/null +++ b/ПРИЛОЖЕНИЕ ГоNETS Материалы/Структура исходного кода клиентской части.md @@ -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 +``` \ No newline at end of file diff --git a/ПРИЛОЖЕНИЕ ГоNETS Материалы/Схема общей структуры клиентской части.md b/ПРИЛОЖЕНИЕ ГоNETS Материалы/Схема общей структуры клиентской части.md index 7753d71..74f33fc 100644 --- a/ПРИЛОЖЕНИЕ ГоNETS Материалы/Схема общей структуры клиентской части.md +++ b/ПРИЛОЖЕНИЕ ГоNETS Материалы/Схема общей структуры клиентской части.md @@ -1,3 +1,3 @@ # Схема общей структуры клиентской части -![diagram.drawio.svg](files/0196d849-f396-7538-989c-7343b21a11f1/diagram.drawio.svg?t=1747644961562) \ No newline at end of file +![diagram.drawio.svg](assets/diagram.drawio.2.svg) \ No newline at end of file diff --git a/ПРИЛОЖЕНИЕ ГоNETS Материалы/Схема общей структуры сервера.md b/ПРИЛОЖЕНИЕ ГоNETS Материалы/Схема общей структуры сервера.md index ade277a..6b8cf4c 100644 --- a/ПРИЛОЖЕНИЕ ГоNETS Материалы/Схема общей структуры сервера.md +++ b/ПРИЛОЖЕНИЕ ГоNETS Материалы/Схема общей структуры сервера.md @@ -1,6 +1,6 @@ # Схема общей структуры сервера -![diagram.drawio.svg](files/0196e746-976b-715f-a3d2-7feb5c9ec7e4/diagram.drawio.svg?t=1747657032358) +![diagram.drawio.svg](assets/diagram.drawio.2.svg) ### Зависимости сервера (AGPL Нету): @@ -63,4 +63,4 @@ | _uvicorn_ | _0.32.1_ | _The lightning-fast ASGI server._ | _BSD-3-Clause_ | | _uvloop_ | _0.21.0_ | _Fast implementation of asyncio event loop on top of libuv_ | _MIT AND Apache-2.0_ | | _watchfiles_ | _1.0.4_ | _Simple, modern and high performance file watching and code reload in python._ | _MIT_ | -| _websockets_ | _14.1_ | _An implementation of the WebSocket Protocol (RFC 6455 & 7692)_ | _BSD-3-Clause_ | \ No newline at end of file +| _websockets_ | _14.1_ | _An implementation of the WebSocket Protocol (RFC 6455 & 7692)_ | _BSD-3-Clause_ |