{% extends "baseTemplate/index.html" %}
{% load static %}

{# MySQL Manager: server status + live process list. Administrator only -- #}
{# see databases.views.admin_only / mysqlManager. #}

{% block title %}MySQL Manager{% endblock %}

{% block content %}
<div ng-controller="mysqlManager">

  <div class="cp-page-head">
    <div>
      <h1 class="cp-page-head__title"><i class="fa-solid fa-database" aria-hidden="true"></i> MySQL Manager</h1>
      <p class="cp-page-head__sub">
        Live MariaDB status and connections. This page is administrator only:
        every row here belongs to the server, not to one customer.
      </p>
    </div>
    <div class="cp-page-head__actions">
      <button type="button" class="cp-btn cp-btn--ghost" ng-click="refreshAll()" ng-disabled="busy">
        <i class="fa-solid fa-rotate" aria-hidden="true"></i> Refresh
      </button>
    </div>
  </div>

  <div class="cp-alert cp-alert--danger" ng-if="status.reachable === false">
    <i class="fa-solid fa-triangle-exclamation" aria-hidden="true"></i>
    <p>MariaDB did not answer the status query. It may be down, or the panel's
      database account may be missing the <span class="cp-mono">PROCESS</span> privilege.</p>
  </div>

  <div class="cp-stat-grid">
    <div class="cp-stat">
      <span class="cp-stat__icon"><i class="fa-solid fa-code-branch" aria-hidden="true"></i></span>
      <span class="cp-stat__body">
        <span class="cp-stat__value">{$ status.version || '—' $}</span>
        <span class="cp-stat__label">Server version</span>
        <span class="cp-stat__meta" ng-if="status.uptimeSeconds">up {$ formatUptime(status.uptimeSeconds) $}</span>
      </span>
    </div>
    <div class="cp-stat cp-stat--accent">
      <span class="cp-stat__icon"><i class="fa-solid fa-link" aria-hidden="true"></i></span>
      <span class="cp-stat__body">
        <span class="cp-stat__value">{$ status.connections || 0 $}</span>
        <span class="cp-stat__label">Connections</span>
        <span class="cp-stat__meta" ng-if="status.maxConnections">of {$ status.maxConnections $} allowed</span>
      </span>
    </div>
    <div class="cp-stat cp-stat--info">
      <span class="cp-stat__icon"><i class="fa-solid fa-gauge-high" aria-hidden="true"></i></span>
      <span class="cp-stat__body">
        <span class="cp-stat__value">{$ status.threadsRunning || 0 $}</span>
        <span class="cp-stat__label">Threads running</span>
      </span>
    </div>
    <div class="cp-stat cp-stat--success">
      <span class="cp-stat__icon"><i class="fa-solid fa-bolt" aria-hidden="true"></i></span>
      <span class="cp-stat__body">
        <span class="cp-stat__value">{$ status.queriesPerSecond || 0 $}</span>
        <span class="cp-stat__label">Queries / sec</span>
        <span class="cp-stat__meta">{$ status.questions || 0 $} total</span>
      </span>
    </div>
    <div class="cp-stat cp-stat--warning">
      <span class="cp-stat__icon"><i class="fa-solid fa-hourglass-half" aria-hidden="true"></i></span>
      <span class="cp-stat__body">
        <span class="cp-stat__value">{$ status.slowQueries || 0 $}</span>
        <span class="cp-stat__label">Slow queries</span>
      </span>
    </div>
    <div class="cp-stat">
      <span class="cp-stat__icon"><i class="fa-solid fa-layer-group" aria-hidden="true"></i></span>
      <span class="cp-stat__body">
        <span class="cp-stat__value">{$ status.bufferPoolUsagePercent || 0 $}%</span>
        <span class="cp-stat__label">InnoDB buffer pool used</span>
        <span class="cp-stat__meta" ng-if="status.bufferPoolSizeMB">{$ status.bufferPoolSizeMB $} MB total</span>
      </span>
    </div>
  </div>

  <div class="cp-card">
    <div class="cp-card__head">
      <div>
        <h2 class="cp-card__title">Process list</h2>
        <p class="cp-card__sub">
          <span ng-bind="processes.length"></span> connection<span ng-if="processes.length !== 1">s</span> right now.
        </p>
      </div>
    </div>

    <div class="cp-card__body cp-card__body--flush">
      <div class="cp-empty" ng-if="firstLoad">
        <span class="cp-spinner" aria-hidden="true"></span> Loading…
      </div>
      <div class="cp-empty" ng-if="!firstLoad && !processes.length">
        <p>No connections were reported.</p>
      </div>

      <div class="cp-table-wrap" ng-if="!firstLoad && processes.length">
        <table class="cp-table">
          <thead>
            <tr>
              <th scope="col">Id</th>
              <th scope="col">User</th>
              <th scope="col">Host</th>
              <th scope="col">Database</th>
              <th scope="col">Command</th>
              <th scope="col" class="cp-nowrap">Time (s)</th>
              <th scope="col">State</th>
              <th scope="col">Info</th>
              <th scope="col" class="cp-table__actions">Actions</th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="proc in processes">
              <td class="cp-mono">{$ proc.id $}</td>
              <td class="cp-mono">
                {$ proc.user $}
                <span class="cp-badge" ng-if="proc.isSystem">system</span>
              </td>
              <td>{$ proc.host $}</td>
              <td>{$ proc.db || '—' $}</td>
              <td>{$ proc.command $}</td>
              <td class="cp-nowrap">{$ proc.time $}</td>
              <td>{$ proc.state || '—' $}</td>
              <td class="cp-mono cp-faint" title="{$ proc.info $}">
                {$ (proc.info || '—').slice(0, 80) $}
              </td>
              <td class="cp-table__actions">
                <button type="button" class="cp-btn cp-btn--danger cp-btn--sm"
                        ng-click="kill(proc)" ng-disabled="proc.isSystem" title="Kill connection">
                  <i class="fa-solid fa-skull-crossbones" aria-hidden="true"></i>
                </button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>

</div>
{% endblock %}

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