Develop #3

Merged
Liosha84 merged 3 commits from develop into master 2026-10-29 00:52:20 +01:00
Showing only changes of commit ed48cacfbc - Show all commits
+59 -58
View File
@@ -2,10 +2,10 @@
![htop-web](htop-web.gif) ![htop-web](htop-web.gif)
**Пользовательский веб-дашборд для мониторинга системы на базе Angular и Spring Boot.** **A self-hosted, browser-based system monitoring dashboard powered by Angular and Spring Boot.**
htop-web объединяет фронтенд на Angular и бэкенд на Spring Boot WebFlux в одном Docker-контейнере, предоставляя веб-интерфейс для просмотра метрик системы и информации о процессах.
htop-web packages its Angular frontend and Spring Boot WebFlux backend into a single Docker container, providing a web interface for viewing system metrics and process information.
<p align="center"> <p align="center">
<img alt="Java 21" src="https://img.shields.io/badge/Java-21-orange?logo=openjdk&logoColor=white"> <img alt="Java 21" src="https://img.shields.io/badge/Java-21-orange?logo=openjdk&logoColor=white">
<img alt="Spring Boot" src="https://img.shields.io/badge/Spring%20Boot-WebFlux-6DB33F?logo=springboot&logoColor=white"> <img alt="Spring Boot" src="https://img.shields.io/badge/Spring%20Boot-WebFlux-6DB33F?logo=springboot&logoColor=white">
@@ -13,55 +13,55 @@ htop-web объединяет фронтенд на Angular и бэкенд на
<img alt="Docker" src="https://img.shields.io/badge/Docker-Compose-2496ED?logo=docker&logoColor=white"> <img alt="Docker" src="https://img.shields.io/badge/Docker-Compose-2496ED?logo=docker&logoColor=white">
</p> </p>
## Демо ## Demo
https://htop-web.jambotron.com/ https://htop-web.jambotron.com/
## Возможности ## Features
- **Системный дашборд** — просмотр информации о системе через браузер. - **System dashboard** — inspect system information through a browser.
- **Метрики CPU и памяти** — просмотр показателей использования ресурсов. - **CPU and memory metrics** — view resource measurements exposed by the backend.
- **Информация о процессах** — просмотр деталей системных процессов. - **Process information** — inspect available system process details.
- **Информация о Linux-системе** — дополнительные метрики операционной системы. - **Linux system information** — collect additional operating-system metrics.
- **Реактивный бэкенд** — реализован на Spring WebFlux. - **Reactive backend** — built with Spring WebFlux.
- **Архитектура одного контейнера** — статические файлы Angular обслуживаются Spring Boot. - **Single-container architecture** — Angular production assets are served by Spring Boot.
- **Развёртывание через Docker Compose** — сборка, запуск, просмотр и остановка приложения стандартными командами Docker. - **Docker Compose deployment** — build, start, inspect and stop the application with standard Docker commands.
> **Область мониторинга:** метрики зависят от операционной системы, среды контейнера и предоставленных прав. Docker Desktop на Windows запускает Linux-контейнеры в виртуальной среде; метрики из контейнера не обязательно отражают полную картину Windows-хоста. > **Monitoring scope:** metrics depend on the operating system, container runtime and granted permissions. Docker Desktop on Windows runs Linux containers in a virtualized environment; metrics from a container should not be assumed to represent the complete Windows host.
## Технологический стек ## Technology Stack
| Слой | Технология | | Layer | Technology |
|---|---| |---|---|
| Фронтенд | Angular 22, TypeScript, RxJS | | Frontend | Angular 22, TypeScript, RxJS |
| Бэкенд | Java 21, Spring Boot, Spring WebFlux | | Backend | Java 21, Spring Boot, Spring WebFlux |
| Сбор метрик | OSHI | | System inspection | OSHI |
| Сборка | Gradle, npm | | Build | Gradle, npm |
| Развёртывание | Docker, Docker Compose | | Deployment | Docker, Docker Compose |
## Архитектура ## Architecture
```text ```text
Браузер Browser
| |
v v
+----------------------+ +----------------------+
| контейнер htop-web | | htop-web container |
| | | |
| Spring Boot | | Spring Boot |
| WebFlux | | WebFlux |
| | | | | |
| +-- REST API | | +-- REST API |
| +-- Метрики | | +-- System data |
| +-- Процессы | | +-- Process data |
| | | |
| Angular (статика) | | Angular assets |
+----------------------+ +----------------------+
``` ```
Фронтенд на Angular собирается в production-режиме и упаковывается в статические ресурсы Spring Boot. Обе части развёртываются вместе как один контейнер. The Angular frontend is built for production and packaged into the Spring Boot application's static resources. Both parts are deployed together as one application container.
## Пример использования ## Simple Scenario of using
```yaml ```yaml
services: services:
@@ -101,32 +101,33 @@ networks:
docker compose up -d docker compose up -d
``` ```
## Быстрый старт
### Требования ## Quick Start
- Docker Engine или Docker Desktop. ### Requirements
- Docker Engine or Docker Desktop.
- Docker Compose. - Docker Compose.
Локальная установка Java или Node.js не требуется — Dockerfile использует multi-stage сборку, которая компилирует всё внутри Docker. No local Java or Node.js is required — the Dockerfile uses multi-stage build to compile everything inside Docker.
### 1. Сборка и запуск контейнера ### 1. Build and start the container
Из корня репозитория выполните одну команду: From the repository root, run a single command:
```bash ```bash
docker compose up -d --build docker compose up -d --build
``` ```
Флаг `--build` запускает multi-stage сборку Docker, которая компилирует фронтенд на Angular и бэкенд на Spring Boot внутри Docker. The `--build` flag triggers the multi-stage Docker build that compiles both the Angular frontend and the Spring Boot backend inside Docker.
По умолчанию конфигурация Compose маппит порт `8088` хоста на порт `8080` контейнера. The default Compose configuration maps host port `8088` to container port `8080`.
Откройте [http://localhost:8088](http://localhost:8088). Open [http://localhost:8088](http://localhost:8088).
### Альтернатива: локальная сборка через Gradle (требуется Java 21 и Node.js) ### Alternative: Local Gradle build (requires Java 21 and Node.js)
Если нужно собрать локально (например, для запуска тестов): If you need to build locally (for example, to run tests):
**Linux:** **Linux:**
@@ -144,22 +145,22 @@ cd backend
cd .. cd ..
``` ```
Настроенная сборка Gradle собирает фронтенд и упаковывает его production-активы вместе с бэкендом. The configured Gradle build builds the frontend and packages its production assets with the backend.
### 3. Просмотр логов ### 3. Inspect logs
```bash ```bash
docker compose ps docker compose ps
docker compose logs -f htop-web docker compose logs -f htop-web
``` ```
### 4. Остановка приложения ### 4. Stop the application
```bash ```bash
docker compose down docker compose down
``` ```
## Структура проекта ## Project Structure
```text ```text
htop-web/ htop-web/
@@ -183,24 +184,24 @@ htop-web/
└── README.md └── README.md
``` ```
## Документация ## Documentation
- [Установка](docs/INSTALLATION.md) - [Installation](docs/INSTALLATION.md)
- [Конфигурация](docs/CONFIGURATION.md) - [Configuration](docs/CONFIGURATION.md)
- [Архитектура](docs/ARCHITECTURE.md) - [Architecture](docs/ARCHITECTURE.md)
- [Разработка](docs/DEVELOPMENT.md) - [Development](docs/DEVELOPMENT.md)
- [Список изменений](CHANGELOG.md) - [Changelog](CHANGELOG.md)
- [Участие в проекте](CONTRIBUTING.md) - [Contributing](CONTRIBUTING.md)
## Безопасность ## Security
Данные мониторинга системы могут раскрыть конфиденциальную информацию об окружении. Перед тем как сделать htop-web доступным за пределами доверенной сети: System monitoring data can reveal sensitive information about the environment. Before exposing htop-web beyond a trusted network:
- Разместите его за аутентификацией и контролем доступа. - Put it behind appropriate authentication and access controls.
- Используйте HTTPS при доступе через недоверенную сеть. - Use HTTPS when accessed over an untrusted network.
- Предоставляйте контейнеру только те права и доступ к хосту, которые действительно нужны. - Grant the container only the permissions and host access it actually needs.
- Избегайте публикации учётных данных, приватных ключей или конфиденциальной конфигурации окружения. - Avoid publishing credentials, private keys or sensitive environment configuration.
## Лицензия ## License
Лицензия ещё не указана. Пока лицензия не добавлена, не считайте исходный код доступным для неограниченного повторного использования или распространения. No license has been declared yet. Until a license is added, do not assume that the source code is available for unrestricted reuse or redistribution.