UI: автообновление, прогресс, отмена; порт 8080; меню-пилюли и отдельные окна

- Порт хоста по умолчанию 8080 (Chrome ERR_UNSAFE_PORT на 6000); compose, setup, config, README. - Дашборд: одна hero-карточка, прогресс создания, POST /jobs/{id}/cancel, JobView progress_*. - job_store: отмена и прогресс (thread-safe); cluster_lifecycle этапы и откат. - Навигация: стили nav-pill; Swagger/ReDoc/Health через window.open. - main.py: TemplateResponse(request, …) для Starlette. - Документация: README, app/docs (api_routes, README); Makefile ps; .gitignore clusters.
2026-04-04 05:58:11 +03:00
parent 74538423d5
commit 02f4c655b9
17 changed files with 618 additions and 181 deletions
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 # kind-k8s-develop — локальные кластеры Kubernetes (kind)

-Образ **kind-k8s-tools:local** и **Makefile** поднимают **веб-интерфейс** (FastAPI) на порту **6000** на хосте (или значении **`KIND_K8S_WEB_PORT`** в `.env`): через браузер создаёте и удаляете кластеры, смотрите статистику и вывод `kubectl`. **kubeconfig** сохраняется в `clusters/<имя>/`. На хосте достаточно **Docker** (или Podman) и **make**; **kind** и **kubectl** — внутри контейнера.
+Образ **kind-k8s-tools:local** и **Makefile** поднимают **веб-интерфейс** (FastAPI) на порту **8080** на хосте по умолчанию (или **`KIND_K8S_WEB_PORT`** в `.env`; внутри контейнера приложение слушает **6000**). Порт **6000 на хосте** не используем по умолчанию: Chrome и другие браузеры на Chromium отдают **ERR_UNSAFE_PORT**. Через браузер создаёте и удаляете кластеры, смотрите статистику и вывод `kubectl`. **kubeconfig** сохраняется в `clusters/<имя>/`. На хосте достаточно **Docker** (или Podman) и **make**; **kind** и **kubectl** — внутри контейнера.

 **Автор:** Сергей Антропов — [devops.org.ru](https://devops.org.ru)

@@ -10,7 +10,7 @@
 |--------|----------|
 | **[app/docs/api_routes.md](app/docs/api_routes.md)** | Описание REST API `/api/v1/*` с примерами JSON (для фронтенда и интеграций) |
 | **[app/docs/README.md](app/docs/README.md)** | Указатель по каталогу `app/docs/` |
-| **`/docs`** (Swagger) и **`/redoc`** | Интерактивная OpenAPI-документация на том же порту, что и UI |
+| **`/docs`** (Swagger), **`/redoc`**, **`/api/v1/health`** | На панели открываются в **отдельном окне** браузера (`window.open`); прямой URL — тот же порт, что и UI (по умолчанию **8080**) |

 Шаблона **`env.example`** в репозитории нет: переменные для `.env` задаются интерактивно скриптом **`scripts/setup_env_interactive.py`** (`make setup`).

@@ -23,14 +23,18 @@

 ## Веб-интерфейс

- Плашка **состояния среды**: наличие `kind`/`kubectl`, доступность Docker/Podman API по сокету.
+- Верхняя **единая карточка**: заголовок, краткое описание и строка **состояния среды** (`kind` / `kubectl` / Docker или Podman API).
 - **Статистика**: число кластеров в kind, локальных каталогов, сумма workers из `meta.json`, счётчики фоновых заданий.
 - **Создание кластера**: форма с подсказкой тегов `kindest/node` (`GET /api/v1/versions`), фоновое задание и опрос статуса (JSON в сворачиваемом блоке).
 - **Таблица кластеров**: признаки регистрации в kind и наличия kubeconfig, скачивание kubeconfig, просмотр узлов/подов в модальном окне, удаление.
 - **Последние задания** создания (данные в памяти процесса; после перезапуска контейнера история сбрасывается).
- Кнопки обновления, опциональное **автообновление каждые 15 с**, уведомления (toast) при успехе/ошибке.
+- **Автообновление** таблиц и плашки среды каждые ~3,5 с (fetch к API без перезагрузки страницы).
+- При создании кластера — **прогресс-бар** и текст текущего этапа; кнопка **«Отменить создание»** (между этапами; шаг `kind create` до конца не прерывается).
+- Уведомления (toast) при успехе/ошибке; в подвале — копирайт и ссылка на **devops.org.ru**.

-**Структура фронтенда:** `app/templates/base.html` (шапка, ссылки на Swagger/ReDoc/Health), `app/templates/dashboard.html`, стили `app/static/style.css`, логика `app/static/js/dashboard.js` (базовый префикс API из `data-api-base` на `<body>`, по умолчанию `/api/v1`).
+**Шапка:** навигация в виде **пилюль** (стили `.nav-pill`); пункты **Swagger**, **ReDoc** и **Health** открывают страницу в **отдельном именованном окне** (~1240×840), чтобы не уходить с панели (см. скрипт в `base.html`).
+
+**Структура фронтенда:** `app/templates/base.html` (шапка и меню), `app/templates/dashboard.html`, `app/static/style.css`, `app/static/js/dashboard.js` (префикс API: `data-api-base` на `<body>`, по умолчанию `/api/v1`).

 ## Требования на хосте

@@ -54,12 +58,12 @@ cd kind-k8s-develop
 make setup           # опционально: интерактивно создать .env (Enter — дефолты из скрипта)
 make docker check-docker    # или: make podman check-docker
 make docker up       # или: make podman up
-# Браузер: http://127.0.0.1:6000  (порт: KIND_K8S_WEB_PORT в .env)
+# Браузер: http://127.0.0.1:8080  (порт: KIND_K8S_WEB_PORT в .env; не 6000 на хосте — Chrome ERR_UNSAFE_PORT)
 ```

 Из родительского каталога: `make -C kind-k8s-develop docker up`.

-**Логи и остановка:** `make docker logs` / `make podman logs`, `make docker down` / `make podman down`.
+**Логи, статус и остановка:** `make docker logs` / `make podman logs` (follow), `make docker ps` / `make podman ps`, `make docker down` / `make podman down`.

 ### Разработка UI и API без пересборки образа

@@ -92,14 +96,15 @@ docker compose run --rm --entrypoint python3 kind-k8s-web \
 | `make help` | Краткая справка |
 | `make docker up` / `make podman up` | Поднять веб-UI (`kind-k8s-web`) |
 | `make docker down` / `make podman down` | Остановить compose в каталоге репозитория |
-| `make docker logs` / `make podman logs` | Логи `kind-k8s-web` |
+| `make docker logs` / `make podman logs` | Логи `kind-k8s-web` (stream, `-f`) |
+| `make docker ps` / `make podman ps` | Статус контейнеров текущего compose-проекта |
 | `make docker compose-build` / `make podman compose-build` | Собрать образ `kind-k8s-tools:local` |
 | `make docker check-docker` / `make podman check-docker` | Проверить выбранный CLI и `compose version` |
 | `make setup` | Интерактивно создать `.env` (список переменных в `scripts/setup_env_interactive.py`) |
 | `make clusters-dir` | Создать каталог `clusters/` |
-| `make docker …` / `make podman …` | Префикс **обязателен** для целей `up`, `down`, `logs`, `compose-build`, `check-docker` |
+| `make docker …` / `make podman …` | Префикс **обязателен** для целей `up`, `down`, `logs`, `ps`, `compose-build`, `check-docker` |

-Цели `up`, `down`, `logs`, `compose-build` и `check-docker` **без** `docker`/`podman` в той же команде завершатся с подсказкой.
+Цели `up`, `down`, `logs`, `ps`, `compose-build` и `check-docker` **без** `docker`/`podman` в той же команде завершатся с подсказкой.

 ## Переменные окружения

@@ -111,7 +116,7 @@ docker compose run --rm --entrypoint python3 kind-k8s-web \
 |------------|------------------|------------|
 | **`KIND_VERSION`** | build-arg | Версия бинарника kind при сборке образа |
 | **`KUBECTL_VERSION`** | build-arg | Версия kubectl в образе; пусто в compose → в Dockerfile подставляется `stable.txt` при сборке; `make setup` предлагает закреплённый тег |
-| **`KIND_K8S_WEB_PORT`** | ports | Порт **на хосте** для веб-UI (в контейнере 6000) |
+| **`KIND_K8S_WEB_PORT`** | ports | Порт **на хосте** для веб-UI (по умолчанию **8080**; в контейнере публикация идёт на процесс на **6000**) |
 | **`KIND_K8S_WEB_HOST`** | локальный uvicorn / Settings | Хост привязки при запуске вне compose (в контейнере задаётся entrypoint) |
 | **`KIND_K8S_UVICORN_RELOAD`** | контейнер | `1` (по умолчанию) — hot-reload при правках в `./app`; `0` — без reload |
 | **`KIND_K8S_APP_TITLE`** | контейнер / Settings | Заголовок OpenAPI и HTML; пустое значение из compose не ломает приложение (`env_ignore_empty`, fallback) |