{% extends "base.html" %} {#
============================================================ 节点管理页 路由:
GET /nodes ============================================================ #} {%
block title %}节点管理{% endblock %} {% block breadcrumb_title %}节点管理{%
endblock %} {# ══════════════════════════════════════════════════════════
主体内容 ══════════════════════════════════════════════════════════ #} {% block
content %}

<!-- 页面标题行 -->
<div
    style="
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 24px;
    "
>
    <h2 style="font-size: 28px; font-weight: 700">Slurm 节点管理</h2>
    <div style="display: flex; gap: 12px">
        <button onclick="loadNodes()" class="btn btn-secondary">
            <svg
                style="
                    width: 16px;
                    height: 16px;
                    display: inline-block;
                    margin-right: 4px;
                    vertical-align: -3px;
                "
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
            >
                <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
                />
            </svg>
            刷新
        </button>
        <button
            onclick="showAddNodeModal()"
            class="btn"
            style="background-color: #dc3023; color: white"
        >
            <svg
                style="
                    width: 16px;
                    height: 16px;
                    display: inline-block;
                    margin-right: 4px;
                    vertical-align: -3px;
                "
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
            >
                <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M12 4v16m8-8H4"
                />
            </svg>
            添加节点
        </button>
    </div>
</div>

<!-- 节点列表卡片 -->
<div class="card">
    <div
        style="
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;
        "
    >
        <h3 class="card-title">节点列表</h3>
        <div style="font-size: 14px; color: #6b7280">
            配置文件:
            <code
                style="
                    background-color: #f3f4f6;
                    padding: 2px 6px;
                    border-radius: 4px;
                "
            >
                /etc/slurm/node.conf
            </code>
        </div>
    </div>

    <div id="nodeSelectionToolbar" style="display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:16px">
        <span id="nodeSelectionCount" role="status" aria-live="polite">已选 0 个节点</span>
        <button id="nodeDrainSelected" class="btn btn-secondary" onclick="runSelectedNodeAction('drain')" disabled>下线</button>
        <button id="nodeResumeSelected" class="btn btn-secondary" onclick="runSelectedNodeAction('resume')" disabled>上线</button>
        <button id="nodeEditSelected" class="btn btn-secondary" onclick="editSelectedNode()" disabled>编辑</button>
        <button id="nodeDeleteSelected" class="btn btn-secondary" onclick="runSelectedNodeAction('delete')" disabled>删除</button>
        <button id="nodeClearSelected" class="btn btn-secondary" onclick="selectAllNodes(false)" disabled>取消选择</button>
        <span style="font-size:13px; color:#6b7280">编辑需单选；编辑和删除需有对应节点配置。</span>
    </div>
    <style>
        #nodeSelectionToolbar button:disabled { opacity: .45; cursor: not-allowed; }
        #nodesTableBody tr.node-selected { background-color: #eff6ff; }
    </style>

    <div class="data-table-scroll" role="region" aria-label="节点列表" tabindex="0">
        <table class="table data-table data-table--wide">
            <thead>
                <tr>
                    <th style="width:44px"><input id="selectAllNodes" type="checkbox" aria-label="选择全部节点" onchange="selectAllNodes(this.checked)"></th>
                    <th>节点名称</th>
                    <th class="col-status">状态</th>
                    <th class="col-number">CPUs</th>
                    <th class="col-number">内存 (MB)</th>
                    <th>分区</th>
                    <th>Gres</th>
                </tr>
            </thead>
            <tbody id="nodesTableBody">
                <tr>
                    <td colspan="7" class="text-center text-gray-500 py-8">
                        <svg
                            class="inline-block w-8 h-8 animate-spin text-gray-400"
                            fill="none"
                            viewBox="0 0 24 24"
                        >
                            <circle
                                class="opacity-25"
                                cx="12"
                                cy="12"
                                r="10"
                                stroke="currentColor"
                                stroke-width="4"
                            ></circle>
                            <path
                                class="opacity-75"
                                fill="currentColor"
                                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                            />
                        </svg>
                        <div style="margin-top: 8px">加载中…</div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

<!-- 说明信息卡片 -->
<div
    class="card"
    style="
        margin-top: 20px;
        background-color: #eff6ff;
        border-left: 4px solid #3b82f6;
    "
>
    <h3
        style="
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 8px;
            color: #1e40af;
        "
    >
        <svg
            style="
                width: 20px;
                height: 20px;
                display: inline-block;
                margin-right: 8px;
                vertical-align: -4px;
            "
            fill="currentColor"
            viewBox="0 0 20 20"
        >
            <path
                fill-rule="evenodd"
                d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
                clip-rule="evenodd"
            />
        </svg>
        节点管理说明
    </h3>
    <ul
        style="
            list-style: disc;
            margin-left: 24px;
            color: #1e40af;
            font-size: 14px;
            line-height: 1.8;
        "
    >
        <li>所有节点配置存储在 <code>/etc/slurm/node.conf</code> 文件中</li>
        <li>
            添加、编辑或删除节点后会自动执行
            <code>scontrol reconfigure</code> 重新加载配置
        </li>
        <li>
            节点名称格式支持: <code>node[01-08]</code> 或
            <code>node1,node2,node3</code>
        </li>
        <li>下线（DRAIN）：节点停止接受新作业，等待现有作业完成</li>
        <li>上线（RESUME）：恢复节点正常运行，可以接受新作业</li>
    </ul>
</div>

{% endblock %} {# ══════════════════════════════════════════════════════════
页面专属外部脚本 ══════════════════════════════════════════════════════════ #}
{% block extra_scripts %}
<script src="/static/nodes.js?v=5"></script>
{% endblock %}