Веб-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
This commit is contained in:
Sergey Antropoff
+118
-67
@@ -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 %}
|
||||
|
||||
Reference in New Issue
Block a user