KindClustersDashboard/app/templates/cluster_detail.html

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

{% block page_title %}Кластер {{ cluster_name }}{% endblock %}

{% block body_extra_class %} cluster-detail-page cluster-page-loading{% endblock %}

{% block body_attrs %}data-dashboard-mode="cluster" data-cluster-name="{{ cluster_name | e }}"{% 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 %}
{# Полноэкранный спиннер до первой загрузки overview; скрывается в dashboard.js #}
<div
  id="cluster-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>

<p class="cluster-detail-breadcrumb muted" aria-label="Навигация">
  <a href="/clusters">Кластеры</a>
  <span aria-hidden="true"> / </span>
  <span>Кластер <code>{{ cluster_name | e }}</code></span>
</p>

<section class="card cluster-detail-hero-card" aria-labelledby="cluster-detail-title">
  <div class="cluster-detail-hero-layout">
    <div class="cluster-detail-hero-left">
      <h1 class="page-title" id="cluster-detail-title">Кластер <code>{{ cluster_name | e }}</code></h1>
      <div class="cluster-detail-actions-card" aria-label="Панель действий">
        <div
          id="cluster-detail-toolbar"
          class="actions-toolbar cluster-detail-toolbar"
          role="toolbar"
          aria-label="Действия над кластером"
        ></div>
      </div>
      <p id="cluster-overview-msg" class="msg muted cluster-overview-msg" role="status" aria-live="polite"></p>
    </div>
    <aside class="cluster-detail-hero-meta" aria-label="Сводка кластера">
      <div id="cluster-detail-meta" class="cluster-detail-meta" aria-live="polite"></div>
    </aside>
  </div>
</section>

<section id="cluster-aggregate-donuts-section" class="card aggregate-donuts-card" aria-labelledby="cluster-donuts-heading">
  <h2 id="cluster-donuts-heading" class="donuts-card-title">Ресурсы узлов (сводка)</h2>
  <div id="cluster-page-aggregate-donuts" class="aggregate-donuts" aria-live="polite"></div>
</section>

<section class="card cluster-detail-nodes-card" aria-labelledby="cluster-nodes-heading">
  <h2 id="cluster-nodes-heading" class="cluster-detail-section-title">Ресурсы узлов</h2>
  <div
    id="cluster-page-node-cards"
    class="cluster-nodes-resources__cards-row cluster-page-node-cards--wide"
    aria-live="polite"
  ></div>
</section>

<section class="card cluster-k8s-intro-card" aria-labelledby="cluster-k8s-heading">
  <h2 id="cluster-k8s-heading" class="cluster-detail-section-title">Kubernetes (kubectl)</h2>
  <p class="muted cluster-k8s-scope-hint">
    Данные по <strong>всему кластеру</strong>: ресурсы в namespace — со всех пространств имён; узлы и список
    namespace — без ограничения по отдельному ns. В карточках ресурсов выпадающий список справа от заголовка
    содержит все namespace из ответа API и из фактических объектов в таблицах; при выборе «Все namespace» строки
    таблицы упорядочены по namespace, затем по имени ресурса.
  </p>
  <p id="cluster-kube-global-hint" class="muted cluster-kube-hint hidden" role="status"></p>
</section>

<section class="card cluster-k8s-resource-card" aria-labelledby="k8s-nodes-title">
  <h2 class="cluster-detail-section-title" id="k8s-nodes-title">Узлы</h2>
  <div id="cluster-k8s-nodes-root" class="cluster-k8s-root" role="region" aria-label="Узлы кластера"></div>
</section>

<section class="card cluster-k8s-resource-card" aria-labelledby="k8s-ns-title">
  <h2 class="cluster-detail-section-title" id="k8s-ns-title">Namespaces</h2>
  <div id="cluster-k8s-namespaces-root" class="cluster-k8s-root" role="region" aria-label="Namespaces"></div>
</section>

<section class="card cluster-k8s-resource-card" aria-labelledby="k8s-pods-title">
  <div class="cluster-k8s-card-header">
    <h2 class="cluster-detail-section-title" id="k8s-pods-title">Поды</h2>
    <div class="cluster-k8s-ns-filter-wrap">
      <label for="cluster-k8s-filter-pods" class="sr-only">Поды: фильтр по namespace</label>
      <select
        id="cluster-k8s-filter-pods"
        class="cluster-k8s-ns-select"
        data-cluster-k8s-ns-filter="pods"
        aria-label="Поды: фильтр по namespace"
      >
        <option value="">Все namespace</option>
      </select>
    </div>
  </div>
  <div id="cluster-k8s-pods-root" class="cluster-k8s-root" role="region" aria-label="Поды"></div>
</section>

<section class="card cluster-k8s-resource-card" aria-labelledby="k8s-deploy-title">
  <div class="cluster-k8s-card-header">
    <h2 class="cluster-detail-section-title" id="k8s-deploy-title">Deployments</h2>
    <div class="cluster-k8s-ns-filter-wrap">
      <label for="cluster-k8s-filter-deployments" class="sr-only">Deployments: фильтр по namespace</label>
      <select
        id="cluster-k8s-filter-deployments"
        class="cluster-k8s-ns-select"
        data-cluster-k8s-ns-filter="deployments"
        aria-label="Deployments: фильтр по namespace"
      >
        <option value="">Все namespace</option>
      </select>
    </div>
  </div>
  <div id="cluster-k8s-deployments-root" class="cluster-k8s-root" role="region"></div>
</section>

<section class="card cluster-k8s-resource-card" aria-labelledby="k8s-sts-title">
  <div class="cluster-k8s-card-header">
    <h2 class="cluster-detail-section-title" id="k8s-sts-title">StatefulSets</h2>
    <div class="cluster-k8s-ns-filter-wrap">
      <label for="cluster-k8s-filter-statefulsets" class="sr-only">StatefulSets: фильтр по namespace</label>
      <select
        id="cluster-k8s-filter-statefulsets"
        class="cluster-k8s-ns-select"
        data-cluster-k8s-ns-filter="statefulsets"
        aria-label="StatefulSets: фильтр по namespace"
      >
        <option value="">Все namespace</option>
      </select>
    </div>
  </div>
  <div id="cluster-k8s-statefulsets-root" class="cluster-k8s-root" role="region"></div>
</section>

<section class="card cluster-k8s-resource-card" aria-labelledby="k8s-ds-title">
  <div class="cluster-k8s-card-header">
    <h2 class="cluster-detail-section-title" id="k8s-ds-title">DaemonSets</h2>
    <div class="cluster-k8s-ns-filter-wrap">
      <label for="cluster-k8s-filter-daemonsets" class="sr-only">DaemonSets: фильтр по namespace</label>
      <select
        id="cluster-k8s-filter-daemonsets"
        class="cluster-k8s-ns-select"
        data-cluster-k8s-ns-filter="daemonsets"
        aria-label="DaemonSets: фильтр по namespace"
      >
        <option value="">Все namespace</option>
      </select>
    </div>
  </div>
  <div id="cluster-k8s-daemonsets-root" class="cluster-k8s-root" role="region"></div>
</section>

<section class="card cluster-k8s-resource-card" aria-labelledby="k8s-rs-title">
  <div class="cluster-k8s-card-header">
    <h2 class="cluster-detail-section-title" id="k8s-rs-title">ReplicaSets</h2>
    <div class="cluster-k8s-ns-filter-wrap">
      <label for="cluster-k8s-filter-replicasets" class="sr-only">ReplicaSets: фильтр по namespace</label>
      <select
        id="cluster-k8s-filter-replicasets"
        class="cluster-k8s-ns-select"
        data-cluster-k8s-ns-filter="replicasets"
        aria-label="ReplicaSets: фильтр по namespace"
      >
        <option value="">Все namespace</option>
      </select>
    </div>
  </div>
  <div id="cluster-k8s-replicasets-root" class="cluster-k8s-root" role="region"></div>
</section>

<section class="card cluster-k8s-resource-card" aria-labelledby="k8s-jobs-title">
  <div class="cluster-k8s-card-header">
    <h2 class="cluster-detail-section-title" id="k8s-jobs-title">Jobs</h2>
    <div class="cluster-k8s-ns-filter-wrap">
      <label for="cluster-k8s-filter-jobs" class="sr-only">Jobs: фильтр по namespace</label>
      <select
        id="cluster-k8s-filter-jobs"
        class="cluster-k8s-ns-select"
        data-cluster-k8s-ns-filter="jobs"
        aria-label="Jobs: фильтр по namespace"
      >
        <option value="">Все namespace</option>
      </select>
    </div>
  </div>
  <div id="cluster-k8s-jobs-root" class="cluster-k8s-root" role="region"></div>
</section>

<section class="card cluster-k8s-resource-card" aria-labelledby="k8s-cj-title">
  <div class="cluster-k8s-card-header">
    <h2 class="cluster-detail-section-title" id="k8s-cj-title">CronJobs</h2>
    <div class="cluster-k8s-ns-filter-wrap">
      <label for="cluster-k8s-filter-cronjobs" class="sr-only">CronJobs: фильтр по namespace</label>
      <select
        id="cluster-k8s-filter-cronjobs"
        class="cluster-k8s-ns-select"
        data-cluster-k8s-ns-filter="cronjobs"
        aria-label="CronJobs: фильтр по namespace"
      >
        <option value="">Все namespace</option>
      </select>
    </div>
  </div>
  <div id="cluster-k8s-cronjobs-root" class="cluster-k8s-root" role="region"></div>
</section>

<section class="card cluster-k8s-resource-card" aria-labelledby="k8s-svc-title">
  <div class="cluster-k8s-card-header">
    <h2 class="cluster-detail-section-title" id="k8s-svc-title">Сервисы</h2>
    <div class="cluster-k8s-ns-filter-wrap">
      <label for="cluster-k8s-filter-services" class="sr-only">Сервисы: фильтр по namespace</label>
      <select
        id="cluster-k8s-filter-services"
        class="cluster-k8s-ns-select"
        data-cluster-k8s-ns-filter="services"
        aria-label="Сервисы: фильтр по namespace"
      >
        <option value="">Все namespace</option>
      </select>
    </div>
  </div>
  <div id="cluster-k8s-services-root" class="cluster-k8s-root" role="region"></div>
</section>

<section class="card cluster-k8s-resource-card" aria-labelledby="k8s-ing-title">
  <div class="cluster-k8s-card-header">
    <h2 class="cluster-detail-section-title" id="k8s-ing-title">Ingresses</h2>
    <div class="cluster-k8s-ns-filter-wrap">
      <label for="cluster-k8s-filter-ingresses" class="sr-only">Ingresses: фильтр по namespace</label>
      <select
        id="cluster-k8s-filter-ingresses"
        class="cluster-k8s-ns-select"
        data-cluster-k8s-ns-filter="ingresses"
        aria-label="Ingresses: фильтр по namespace"
      >
        <option value="">Все namespace</option>
      </select>
    </div>
  </div>
  <div id="cluster-k8s-ingresses-root" class="cluster-k8s-root" role="region"></div>
</section>

<section class="card cluster-k8s-resource-card" aria-labelledby="k8s-pvc-title">
  <div class="cluster-k8s-card-header">
    <h2 class="cluster-detail-section-title" id="k8s-pvc-title">PVC</h2>
    <div class="cluster-k8s-ns-filter-wrap">
      <label for="cluster-k8s-filter-pvcs" class="sr-only">PVC: фильтр по namespace</label>
      <select
        id="cluster-k8s-filter-pvcs"
        class="cluster-k8s-ns-select"
        data-cluster-k8s-ns-filter="pvcs"
        aria-label="PVC: фильтр по namespace"
      >
        <option value="">Все namespace</option>
      </select>
    </div>
  </div>
  <div id="cluster-k8s-pvcs-root" class="cluster-k8s-root" role="region" aria-label="PersistentVolumeClaim"></div>
</section>

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

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