# htop-web

![htop-web](htop-web.gif)

**Пользовательский веб-дашборд для мониторинга системы на базе Angular и Spring Boot.**

htop-web объединяет фронтенд на Angular и бэкенд на Spring Boot WebFlux в одном Docker-контейнере, предоставляя веб-интерфейс для просмотра метрик системы и информации о процессах.

<p align="center">
  <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="Angular" src="https://img.shields.io/badge/Angular-22-DD0031?logo=angular&logoColor=white">
  <img alt="Docker" src="https://img.shields.io/badge/Docker-Compose-2496ED?logo=docker&logoColor=white">
</p>

## Демо

https://htop-web.jambotron.com/

## Возможности

- **Системный дашборд** — просмотр информации о системе через браузер.
- **Метрики CPU и памяти** — просмотр показателей использования ресурсов.
- **Информация о процессах** — просмотр деталей системных процессов.
- **Информация о Linux-системе** — дополнительные метрики операционной системы.
- **Реактивный бэкенд** — реализован на Spring WebFlux.
- **Архитектура одного контейнера** — статические файлы Angular обслуживаются Spring Boot.
- **Развёртывание через Docker Compose** — сборка, запуск, просмотр и остановка приложения стандартными командами Docker.

> **Область мониторинга:** метрики зависят от операционной системы, среды контейнера и предоставленных прав. Docker Desktop на Windows запускает Linux-контейнеры в виртуальной среде; метрики из контейнера не обязательно отражают полную картину Windows-хоста.

## Технологический стек

| Слой | Технология |
|---|---|
| Фронтенд | Angular 22, TypeScript, RxJS |
| Бэкенд | Java 21, Spring Boot, Spring WebFlux |
| Сбор метрик | OSHI |
| Сборка | Gradle, npm |
| Развёртывание | Docker, Docker Compose |

## Архитектура

```text
                         Браузер
                            |
                            v
                 +----------------------+
                 |  контейнер htop-web  |
                 |                      |
                 |  Spring Boot         |
                 |  WebFlux             |
                 |     |                |
                 |     +-- REST API     |
                 |     +-- Метрики      |
                 |     +-- Процессы     |
                 |                      |
                 |  Angular (статика)   |
                 +----------------------+
```

Фронтенд на Angular собирается в production-режиме и упаковывается в статические ресурсы Spring Boot. Обе части развёртываются вместе как один контейнер.

## Пример использования

```yaml
services:
  htop-web:
    image: gitea.jambotron.com/liosha84/htop-web:latest
    container_name: htop-web
    restart: unless-stopped
    pid: host
    read_only: true
    security_opt:
      - no-new-privileges:true
    tmpfs:
      - /tmp:noexec,nosuid,size=64m
    volumes:
      - /proc:/host/proc:ro
      - /sys:/host/sys:ro
      - /etc/hostname:/host/etc/hostname:ro
      - /etc/os-release:/host/etc/os-release:ro
      - /var:/host/var:ro
      - /home:/host/home:ro
      - /opt:/host/opt:ro
      - /tmp:/host/tmp:ro
      - /srv:/host/srv:ro
      - /usr:/host/usr:ro
    labels:
      caddy: htop-web.jambotron.com
      caddy.reverse_proxy: "{{upstreams 8080}}"
    networks:
      - jambotron-net

networks:
  jambotron-net:
    external: true
```

```bash
docker compose up -d
```

## Быстрый старт

### Требования

- Docker Engine или Docker Desktop.
- Docker Compose.

Локальная установка Java или Node.js не требуется — Dockerfile использует multi-stage сборку, которая компилирует всё внутри Docker.

### 1. Сборка и запуск контейнера

Из корня репозитория выполните одну команду:

```bash
docker compose up -d --build
```

Флаг `--build` запускает multi-stage сборку Docker, которая компилирует фронтенд на Angular и бэкенд на Spring Boot внутри Docker.

По умолчанию конфигурация Compose маппит порт `8088` хоста на порт `8080` контейнера.

Откройте [http://localhost:8088](http://localhost:8088).

### Альтернатива: локальная сборка через Gradle (требуется Java 21 и Node.js)

Если нужно собрать локально (например, для запуска тестов):

**Linux:**

```bash
cd backend
./gradlew clean build
cd ..
```

**Windows PowerShell:**

```powershell
cd backend
.\gradlew.bat clean build
cd ..
```

Настроенная сборка Gradle собирает фронтенд и упаковывает его production-активы вместе с бэкендом.

### 3. Просмотр логов

```bash
docker compose ps
docker compose logs -f htop-web
```

### 4. Остановка приложения

```bash
docker compose down
```

## Структура проекта

```text
htop-web/
├── backend/
│   ├── src/main/java/com/htopweb/
│   ├── src/main/resources/
│   └── build.gradle
├── frontend/
│   ├── src/app/
│   ├── package.json
│   └── angular.json
├── docs/
│   ├── INSTALLATION.md
│   ├── CONFIGURATION.md
│   ├── ARCHITECTURE.md
│   └── DEVELOPMENT.md
├── Dockerfile
├── docker-compose.yml
├── CONTRIBUTING.md
├── CHANGELOG.md
└── README.md
```

## Документация

- [Установка](docs/INSTALLATION.md)
- [Конфигурация](docs/CONFIGURATION.md)
- [Архитектура](docs/ARCHITECTURE.md)
- [Разработка](docs/DEVELOPMENT.md)
- [Список изменений](CHANGELOG.md)
- [Участие в проекте](CONTRIBUTING.md)

## Безопасность

Данные мониторинга системы могут раскрыть конфиденциальную информацию об окружении. Перед тем как сделать htop-web доступным за пределами доверенной сети:

- Разместите его за аутентификацией и контролем доступа.
- Используйте HTTPS при доступе через недоверенную сеть.
- Предоставляйте контейнеру только те права и доступ к хосту, которые действительно нужны.
- Избегайте публикации учётных данных, приватных ключей или конфиденциальной конфигурации окружения.

## Лицензия

Лицензия ещё не указана. Пока лицензия не добавлена, не считайте исходный код доступным для неограниченного повторного использования или распространения.