ewoooc/templates/admin/host_health.html

{% extends "base.html" %}

{% block title %}主機健康監控{% endblock %}

{% block content %}
<div class="container-fluid mt-3">
  <h2 class="mb-3"><i class="fas fa-heartbeat me-2"></i>主機健康監控
    <small class="text-muted">三主機 Ollama + MCP + 成本節流即時狀態</small>
  </h2>

  <!-- Ollama 三主機 -->
  <div class="card mb-3">
    <div class="card-header"><strong><i class="fas fa-server me-2"></i>Ollama 三主機（HTTP /api/tags 即時 probe）</strong></div>
    <div class="card-body p-0">
      <table class="table mb-0">
        <thead class="table-light">
          <tr><th>角色</th><th>主機</th><th>HTTP 健康</th><th>異常標記</th><th>已載入模型</th></tr>
        </thead>
        <tbody>
          {% for h in ollama_hosts %}
            <tr>
              <td><strong>{{ h.label }}</strong></td>
              <td><code>{{ h.host }}</code></td>
              <td>
                {% if h.healthy %}
                  <span class="badge bg-success"><i class="fas fa-check me-1"></i>HTTP 正常</span>
                {% else %}
                  <span class="badge bg-danger"><i class="fas fa-times me-1"></i>離線</span>
                {% endif %}
              </td>
              <td>
                {% if h.unhealthy_mark %}
                  <span class="badge bg-warning"><i class="fas fa-exclamation-triangle me-1"></i>已標記異常（30 秒）</span>
                {% else %}
                  <span class="badge bg-light text-dark">—</span>
                {% endif %}
              </td>
              <td>
                {% for m in h.models %}
                  <span class="badge bg-info text-dark me-1">{{ m }}</span>
                {% endfor %}
                {% if not h.models %}<small class="text-muted">無 / 未連線</small>{% endif %}
              </td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>

  <!-- MCP servers -->
  <div class="card mb-3">
    <div class="card-header"><strong><i class="fas fa-plug me-2"></i>MCP 服務（Phase 10/10.5）</strong></div>
    <div class="card-body p-0">
      <table class="table mb-0">
        <thead class="table-light">
          <tr><th>服務名稱</th><th>狀態</th></tr>
        </thead>
        <tbody>
          {% for server, healthy in mcp_status.items() %}
            <tr>
              <td><code>{{ server }}</code></td>
              <td>
                {% if healthy %}
                  <span class="badge bg-success"><i class="fas fa-check me-1"></i>正常</span>
                {% else %}
                  <span class="badge bg-secondary">— 未啟用 / 離線</span>
                {% endif %}
              </td>
            </tr>
          {% else %}
            <tr><td colspan="2" class="text-muted small">MCP_ROUTER_ENABLED=false 或 mcp-stack 未部署</td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>

  <!-- Cost Throttle 狀態（Phase 20） -->
  <div class="card mb-3">
    <div class="card-header"><strong><i class="fas fa-dollar-sign me-2"></i>成本節流狀態（Phase 20）</strong></div>
    <div class="card-body p-0">
      {% if throttle_state %}
        <table class="table mb-0">
          <thead class="table-light">
            <tr><th>供應商</th><th>已花費</th><th>預算</th><th>月底推估</th><th>使用率</th><th>狀態</th></tr>
          </thead>
          <tbody>
            {% for provider, info in throttle_state.items() %}
              <tr {% if info.throttled %}class="table-warning"{% endif %}>
                <td><code>{{ provider }}</code></td>
                <td>${{ "%.2f"|format(info.spent) }}</td>
                <td>${{ "%.2f"|format(info.budget) }}</td>
                <td>${{ "%.2f"|format(info.projected) }}</td>
                <td>{{ "%.0f"|format(info.ratio * 100) }}%</td>
                <td>
                  {% if info.throttled %}
                    <span class="badge bg-danger"><i class="fas fa-exclamation-triangle me-1"></i>已節流</span>
                  {% else %}
                    <span class="badge bg-success"><i class="fas fa-check me-1"></i>正常</span>
                  {% endif %}
                </td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      {% else %}
        <p class="text-muted m-3 small">
          COST_THROTTLE_ENABLED=false 或尚未首次評估（每小時 cron 執行）
        </p>
      {% endif %}
    </div>
  </div>

  <!-- 過去 24h 健康趨勢（Phase 38 新增） -->
  {% if health_history %}
  <div class="card mb-3">
    <div class="card-header"><strong><i class="fas fa-chart-line me-2"></i>過去 24 小時健康趨勢</strong>
      <small class="text-muted">資料來源：host_health_probes（每次刷新自動寫入）</small>
    </div>
    <div class="card-body p-0">
      <table class="table mb-0">
        <thead class="table-light">
          <tr>
            <th>角色</th>
            <th class="text-end">總探針次數</th>
            <th class="text-end">正常次數</th>
            <th class="text-end">離線次數</th>
            <th class="text-end">在線率</th>
            <th class="text-end">平均回應 ms</th>
          </tr>
        </thead>
        <tbody>
          {% for h in health_history %}
            <tr>
              <td><strong>{{ h.host_label }}</strong></td>
              <td class="text-end">{{ h.total }}</td>
              <td class="text-end text-success">{{ h.up_count }}</td>
              <td class="text-end text-danger">{{ h.down_count }}</td>
              <td class="text-end">
                <strong class="{% if h.uptime_pct >= 99 %}text-success{% elif h.uptime_pct >= 90 %}text-warning{% else %}text-danger{% endif %}">
                  {{ "%.1f"|format(h.uptime_pct) }}%
                </strong>
              </td>
              <td class="text-end">{{ h.avg_ms }}</td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
  {% endif %}

  <p class="text-muted mt-3"><small>
    <i class="fas fa-robot me-1"></i>Operation Ollama-First v5.0 / Phase 38 — 主機健康監控（含 24h 歷史）
  </small></p>
</div>
{% endblock %}