Веб-UI: логи kind create, старт/стоп кластеров, документация README

- Потоковые логи в job_store и UI; kind create через Popen с построчным выводом
- POST /clusters/{name}/start|stop; create по сохранённому kind-config.yaml
- Страница /documentation: GET /api/v1/docs/readme, marked+DOMPurify из static/vendor
- Иконки действий, плавающие подсказки, модалка подтверждения вместо confirm
- Makefile: make docker|podman rebuild; compose: монтирование README.md
- Dockerfile: COPY README.md; readme_doc: несколько путей к README

Автор: Сергей Антропов — https://devops.org.ru

app/templates/base.html

@@ -21,10 +21,10 @@
       <div class="nav-brand">
         <span class="nav-logo" aria-hidden="true">◈</span>
         <span class="nav-title">{{ app_title }}</span>
-        <span class="nav-tag muted">kind · локальные кластеры</span>
       </div>
       <nav class="nav-links" aria-label="Разделы">
         <a href="/" class="nav-link nav-pill nav-pill--home">Панель</a>
+        <a href="/documentation" class="nav-link nav-pill">Документация</a>
         <a href="/docs" class="nav-link nav-pill nav-pill--ext" data-open-window="kind_swagger">Swagger</a>
         <a href="/redoc" class="nav-link nav-pill nav-pill--ext" data-open-window="kind_redoc">ReDoc</a>
         <a href="/api/v1/health" class="nav-link nav-pill nav-pill--ext" data-open-window="kind_health">Health</a>
@@ -33,6 +33,8 @@
   </header>
 
   <div id="toast" class="toast hidden" role="status" aria-live="polite"></div>
+  {# Плавающие подсказки для иконок (position:fixed; не режутся overflow таблицы). #}
+  <div id="action-tooltip" class="action-tooltip-floating hidden" role="tooltip"></div>
 
   <main id="main-content" class="app-main" tabindex="-1">
     {% block content %}{% endblock %}

app/templates/dashboard.html

@@ -9,81 +9,87 @@
     Документация API: <code>app/docs/api_routes.md</code> · том данных <code>clusters/</code> (не в Git)
   </p>
   <p class="footer-copyright">
-    © kind-k8s-develop ·
+    © {{ app_title }} ·
     <a href="https://devops.org.ru" target="_blank" rel="noopener">devops.org.ru</a>
   </p>
 </div>
 {% endblock %}
 
 {% block content %}
-<section class="card hero-panel" id="hero-panel" aria-labelledby="hero-title">
-  <div class="hero-panel-main">
-    <h1 class="page-title" id="hero-title">Панель управления</h1>
-    <p class="muted page-lead">
-      Создание и удаление кластеров kind, kubeconfig и просмотр узлов/подов через kubectl внутри контейнера.
-      Данные обновляются автоматически.
-    </p>
-  </div>
-  <div
-    id="status-banner"
-    class="hero-panel-status muted"
-    role="status"
-    aria-live="polite"
-  >
-    Проверка среды…
-  </div>
-</section>
-
-<section class="grid">
-  <div class="card">
-    <h2>Статистика</h2>
-    <dl id="stats-dl" class="stats-dl" aria-label="Сводка по кластерам и заданиям"></dl>
-    <p id="stats-err" class="msg hidden" role="alert"></p>
-  </div>
-
-  <div class="card">
-    <h2>Создать кластер</h2>
-    <form id="form-create" novalidate>
-      <label for="fld-name">Имя (a-z0-9-)</label>
-      <input
-        id="fld-name"
-        name="name"
-        required
-        pattern="[a-z0-9]([-a-z0-9]*[a-z0-9])?"
-        maxlength="63"
-        placeholder="dev"
-        autocomplete="off"
-      />
-
-      <label for="version-select">Тег образа kindest/node (подсказка)</label>
-      <div class="row">
-        <select id="version-select" name="kubernetes_version_preset" aria-describedby="ver-hint">
-          <option value="">— загрузить список —</option>
-        </select>
-      </div>
-      <p id="ver-hint" class="muted" style="margin:0.25rem 0 0;font-size:0.85rem">
-        Можно ввести версию вручную ниже.
+<div class="top-dashboard-row">
+  <section class="card hero-panel" id="hero-panel" aria-labelledby="hero-title">
+    <div class="hero-panel-main">
+      <h1 class="page-title" id="hero-title">Панель управления</h1>
+      <p class="muted page-lead">
+        Создание и удаление кластеров kind, kubeconfig и просмотр узлов/подов через kubectl внутри контейнера.
+        Данные обновляются автоматически.
       </p>
-      <label for="kubernetes_version">Версия Kubernetes / тег node</label>
-      <input
-        name="kubernetes_version"
-        id="kubernetes_version"
-        required
-        placeholder="1.29.4 или v1.29.4"
-        autocomplete="off"
-      />
+    </div>
+    <div
+      id="status-banner"
+      class="hero-panel-status muted"
+      role="status"
+      aria-live="polite"
+    >
+      Проверка среды…
+    </div>
+  </section>
 
-      <label for="fld-workers">Worker-ноды (0–20)</label>
-      <input id="fld-workers" name="workers" type="number" min="0" max="20" value="2" />
+  <aside class="card stats-side-card" aria-labelledby="stats-heading">
+    <h2 id="stats-heading">Статистика</h2>
+    <dl id="stats-dl" class="stats-dl stats-dl--compact" aria-label="Сводка по кластерам и заданиям"></dl>
+    <p id="stats-err" class="msg hidden" role="alert"></p>
+  </aside>
+</div>
 
-      <div class="row create-actions">
-        <button type="submit">Создать кластер</button>
+<section class="card create-cluster-card">
+  <h2>Создать кластер</h2>
+  <form id="form-create" novalidate>
+    <div class="create-form-grid">
+      <div class="create-form-col">
+        <label for="fld-name">Имя (a-z0-9-)</label>
+        <input
+          id="fld-name"
+          name="name"
+          required
+          pattern="[a-z0-9]([-a-z0-9]*[a-z0-9])?"
+          maxlength="63"
+          placeholder="dev"
+          autocomplete="off"
+        />
+
+        <label for="fld-workers">Worker-ноды (0–20)</label>
+        <input id="fld-workers" name="workers" type="number" min="0" max="20" value="2" />
       </div>
-    </form>
+
+      <div class="create-form-col">
+        <label for="version-select">Тег образа kindest/node (подсказка) или введите версию вручную ниже</label>
+        <div class="row">
+          <select id="version-select" name="kubernetes_version_preset" aria-describedby="ver-hint">
+            <option value="">— загрузить список —</option>
+          </select>
+        </div>
+        <label for="kubernetes_version">Версия Kubernetes / тег node</label>
+        <input
+          name="kubernetes_version"
+          id="kubernetes_version"
+          required
+          placeholder="1.29.4 или v1.29.4"
+          autocomplete="off"
+        />
+      </div>
+
+      <div class="create-form-span">
+        <div class="row create-actions">
+          <button type="submit">Создать кластер</button>
+        </div>
+      </div>
+    </div>
 
     <div id="create-progress-wrap" class="create-progress-wrap hidden" aria-hidden="true">
       <p class="create-progress-hint muted" id="create-progress-hint">
-        Идёт создание — шаг <code>kind create</code> может занять несколько минут при первом pull образов.
+        Идёт операция — шаг <code>kind create</code> может занять несколько минут при первом pull образов.
+        Ниже выводится журнал (скачивание образов и подъём нод).
       </p>
       <div
         class="progress-track"
@@ -97,7 +103,17 @@
         <div class="progress-bar" id="create-progress-bar" style="width:0%"></div>
       </div>
       <p class="progress-label" id="create-progress-label">—</p>
-      <button type="button" id="btn-cancel-create" class="btn-secondary">Отменить создание</button>
+      <div class="job-log-panel-wrap">
+        <label for="job-log-panel" class="job-log-label muted">Журнал задания</label>
+        <pre
+          id="job-log-panel"
+          class="mono job-log-panel"
+          role="log"
+          aria-live="polite"
+          aria-relevant="additions"
+        ></pre>
+      </div>
+      <button type="button" id="btn-cancel-create" class="btn-secondary">Отменить между этапами</button>
     </div>
 
     <p id="create-msg" class="msg" aria-live="polite"></p>
@@ -105,7 +121,7 @@
       <summary>Технические детали (JSON)</summary>
       <pre id="job-json" class="mono job-json-pre" tabindex="0"></pre>
     </details>
-  </div>
+  </form>
 </section>
 
 <section class="card clusters-card">
@@ -113,7 +129,7 @@
   <p class="muted git-hint">
     Каталог <code>clusters/</code> в Git не коммитится — только локальные kubeconfig и meta.
   </p>
-  <div class="table-wrap" data-busy="clusters">
+  <div class="table-wrap">
     <table id="tbl-clusters" aria-label="Список кластеров">
       <thead>
         <tr>
@@ -122,7 +138,7 @@
           <th>kubeconfig</th>
           <th>Версия</th>
           <th>Workers</th>
-          <th>Действия</th>
+          <th class="col-actions">Действия</th>
         </tr>
       </thead>
       <tbody></tbody>
@@ -133,7 +149,7 @@
 
 <section class="card jobs-card">
   <h2>Последние задания</h2>
-  <div class="table-wrap" data-busy="jobs">
+  <div class="table-wrap">
     <table id="tbl-jobs" aria-label="Последние задания создания">
       <thead>
         <tr>
@@ -161,6 +177,22 @@
       <h3 id="modal-title" class="modal-title-text">Состояние кластера</h3>
       <button type="button" class="modal-close btn-secondary" id="modal-close">Закрыть</button>
     </div>
+    <div id="modal-dl-wrap" class="modal-dl-wrap hidden">
+      <span
+        class="icon-tooltip-host"
+        data-tooltip="Скачать kubeconfig для использования с kubectl на хосте"
+      >
+        <button
+          type="button"
+          class="icon-btn"
+          id="modal-btn-kubeconfig"
+          aria-label="Скачать kubeconfig для kubectl на хосте"
+        >
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
+        </button>
+      </span>
+      <span class="muted modal-dl-hint">kubeconfig</span>
+    </div>
     <div id="modal-spinner" class="modal-spinner hidden" aria-hidden="true">
       <span class="spinner" aria-label="Загрузка"></span>
       <span class="muted">Запрос kubectl…</span>
@@ -172,6 +204,25 @@
     <pre id="modal-pods" class="mono" role="region" aria-label="Вывод kubectl get pods"></pre>
   </div>
 </div>
+
+{# Модальное подтверждение вместо window.confirm (удаление, остановка узлов). #}
+<div
+  id="confirm-modal-overlay"
+  class="modal-overlay confirm-modal-overlay hidden"
+  role="alertdialog"
+  aria-modal="true"
+  aria-labelledby="confirm-modal-title"
+  aria-describedby="confirm-modal-message"
+>
+  <div class="modal-box modal-box--confirm">
+    <h3 id="confirm-modal-title" class="modal-title-text confirm-modal-title">Подтвердите действие</h3>
+    <p id="confirm-modal-message" class="modal-sub confirm-modal-message"></p>
+    <div class="confirm-modal-actions row spread">
+      <button type="button" class="btn-secondary" id="confirm-modal-cancel">Отмена</button>
+      <button type="button" id="confirm-modal-ok">Подтвердить</button>
+    </div>
+  </div>
+</div>
 {% endblock %}
 
 {% block scripts %}

app/templates/documentation.html

@@ -0,0 +1,27 @@
+{# Документация: README.md через GET /api/v1/docs/readme + marked + DOMPurify из static/vendor.
+   Автор: Сергей Антропов — https://devops.org.ru #}
+{% extends "base.html" %}
+
+{% block page_title %}Документация{% endblock %}
+
+{% block content %}
+<section class="card readme-doc-card" aria-labelledby="readme-doc-heading">
+  <div class="readme-doc-toolbar row spread">
+    <h1 class="page-title" id="readme-doc-heading">Документация</h1>
+    <a href="/" class="nav-link nav-pill nav-pill--home">← Панель</a>
+  </div>
+  <p class="muted readme-doc-lead">
+    Текст загружается из <code>README.md</code> (эндпоинт <code>/api/v1/docs/readme</code>).
+    Разбор Markdown выполняется в браузере библиотеками из каталога <code>app/static/js/vendor/</code> (без внешних CDN).
+  </p>
+  <p id="readme-loading" class="muted readme-doc-loading">Загрузка документации…</p>
+  <p id="readme-error" class="msg hidden" role="alert"></p>
+  <article id="readme-doc-article" class="readme-doc markdown-body" hidden></article>
+</section>
+{% endblock %}
+
+{% block scripts %}
+<script src="/static/js/vendor/marked.min.js"></script>
+<script src="/static/js/vendor/purify.min.js"></script>
+<script src="/static/js/documentation.js" defer></script>
+{% endblock %}