KindClustersDashboard/app/templates/cluster_create.html

{# Создание кластера, журнал задания и последние задания.
   Автор: Сергей Антропов — https://devops.org.ru #}
{% extends "base.html" %}

{% block body_extra_class %} dashboard-create-loading{% endblock %}

{% block body_attrs %}data-dashboard-mode="create"{% endblock %}

{% block footer %}
<div class="footer-inner">
  <p class="footer-copyright">
    © {{ app_title }} ·
    <a href="https://devops.org.ru" target="_blank" rel="noopener">devops.org.ru</a>
  </p>
</div>
{% endblock %}

{% block content %}
<div
  id="create-page-loading-overlay"
  class="page-loading-overlay"
  role="status"
  aria-live="polite"
  aria-busy="true"
  aria-label="Загрузка страницы создания кластера"
>
  <div class="page-loading-backdrop" aria-hidden="true"></div>
  <div class="page-loading-center">
    <span class="spinner page-loading-spinner" aria-hidden="true"></span>
    <span class="page-loading-label">Загрузка страницы…</span>
  </div>
</div>

<section class="card hero-panel cluster-create-hero" aria-labelledby="create-hero-title">
  <h1 class="page-title" id="create-hero-title">Создание кластера</h1>
  <p class="muted page-lead">
    Укажите имя, версию образа kindest/node и число worker-нод. Операция выполняется в фоне.<br>Ход смотрите в журнале ниже.
  </p>
</section>

<section class="card create-cluster-card">
  <h2 class="create-cluster-card__title">Новый кластер</h2>
  <form id="form-create" novalidate>
    <div class="create-form-grid">
      <div class="create-form-field">
        <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"
        />
      </div>

      <div class="create-form-field">
        <label for="version-select">
          <a
            href="https://hub.docker.com/r/kindest/node/tags"
            target="_blank"
            rel="noopener noreferrer"
            class="create-form-doc-link"
            title="Список тегов kindest/node на Docker Hub (новое окно)"
            >Тег образа</a><span class="create-form-doc-link__ext" aria-hidden="true">↗</span>
          <span class="create-form-label-rest">
            kindest/node — список или версия вручную ниже</span>
        </label>
        <select id="version-select" name="kubernetes_version_preset">
          <option value="">— загрузить список —</option>
        </select>
      </div>

      <div class="create-form-field">
        <label for="fld-workers">Worker-ноды (0–20)</label>
        <input id="fld-workers" name="workers" type="number" min="0" max="20" step="1" value="2" />
      </div>

      <div class="create-form-field">
        <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 образов.
        Ниже выводится журнал (скачивание образов и подъём нод).
      </p>
      <div
        class="progress-track"
        role="progressbar"
        aria-valuemin="0"
        aria-valuemax="100"
        aria-valuenow="0"
        aria-labelledby="create-progress-label"
        id="create-progress-track"
      >
        <div class="progress-bar" id="create-progress-bar" style="width:0%"></div>
      </div>
      <p class="progress-label" id="create-progress-label">—</p>
      <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>
    <details id="job-details" class="job-details hidden">
      <summary>Технические детали (JSON)</summary>
      <pre id="job-json" class="mono job-json-pre" tabindex="0"></pre>
    </details>
  </form>
</section>

<section class="card jobs-card">
  <div class="row spread jobs-card-toolbar">
    <h2 id="jobs-heading" class="jobs-card-title">Последние задания</h2>
    <button type="button" id="btn-jobs-refresh" class="btn-secondary">Обновить</button>
  </div>
  <div class="table-wrap journal-table-wrap">
    <table id="tbl-jobs" class="journal-table" aria-label="Последние задания из журналов кластеров">
      <thead>
        <tr>
          <th scope="col">Завершено (UTC)</th>
          <th scope="col">Кластер</th>
          <th scope="col">Тип задания</th>
          <th scope="col">Статус</th>
          <th scope="col">Сообщение</th>
          <th scope="col">Лог</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
  </div>
  <p id="jobs-msg" class="msg muted"></p>
</section>

{% include "partials/dashboard_modals.html" %}
{% endblock %}

{% block scripts %}
<script src="/static/js/dashboard.js" defer></script>
{% endblock %}