{% extends "baseTemplate/index.html" %}
{% load static %}
{% comment %}
/cache/redis — Redis statistics.

Administrators see the server-wide counters. Everyone else sees the counters for
one of their own sites: memory, client and eviction numbers describe every
tenant on the box, so /cache/fetchRedisStats refuses to hand them to a customer
rather than this page hiding them after the fact.
{% endcomment %}

{% block title %}Redis{% endblock %}

{% block styles %}
  {% include "cacheManager/_styles.html" %}
{% endblock %}

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

  {{ domains|json_script:"cpCacheDomains" }}
  {{ isAdmin|json_script:"cpCacheIsAdmin" }}
  {{ siteCacheDB|json_script:"cpCacheDB" }}

  <div class="d-flex flex-wrap align-items-start justify-content-between gap-2 mb-4">
    <div>
      <h1 class="h4 mb-1">Redis</h1>
      <p class="cpc-muted mb-0 small">
        The shared in-memory store behind every site's object cache.
      </p>
    </div>
    <div class="d-flex flex-wrap gap-2">
      <a href="/cache/" class="btn btn-outline-secondary btn-sm">
        <i class="fas fa-arrow-left me-1"></i>All caches
      </a>
      <button type="button" class="btn btn-outline-secondary btn-sm"
              ng-click="load()" ng-disabled="busy">
        <i class="fas fa-rotate me-1"></i>Refresh
      </button>
    </div>
  </div>

  <div class="alert alert-danger py-2 px-3" ng-show="errorMessage" ng-cloak role="alert">
    <i class="fas fa-triangle-exclamation me-1"></i><span ng-bind="errorMessage"></span>
  </div>
  <div class="alert alert-success py-2 px-3" ng-show="okMessage" ng-cloak role="alert">
    <i class="fas fa-circle-check me-1"></i><span ng-bind="okMessage"></span>
  </div>

  <!-- Customers pick one of their own sites; administrators get the server. -->
  <div class="card mb-4" ng-show="!isAdmin" ng-cloak>
    <div class="card-body">
      <label class="form-label" for="cpcRedisDomain">Website</label>
      <select class="form-select" id="cpcRedisDomain" ng-model="domain"
              ng-change="load()" ng-options="item as item for item in domains">
        <option value="">Choose a website…</option>
      </select>
      <div class="form-text">
        Server-wide Redis statistics are administrator-only: they describe every
        website on this server, not just yours.
      </div>
    </div>
  </div>

  <div ng-show="busy" ng-cloak class="text-center cpc-muted py-5">
    <i class="fas fa-circle-notch fa-spin fa-2x"></i>
  </div>

  <!-- ------------------------------------------------------------------ -->
  <!-- Server scope                                                        -->
  <!-- ------------------------------------------------------------------ -->
  <div ng-show="!busy && scope === 'server'" ng-cloak>
    <div class="row g-3 mb-4">
      <div class="col-6 col-lg-3">
        <div class="cpc-stat">
          <div class="cpc-stat-value"><span ng-bind="stats.hitRate"></span>%</div>
          <div class="cpc-stat-label">Hit rate</div>
          <div class="cpc-bar mt-2">
            <span ng-style="{width: (stats.hitRate || 0) + '%'}"></span>
          </div>
        </div>
      </div>
      <div class="col-6 col-lg-3">
        <div class="cpc-stat">
          <div class="cpc-stat-value" ng-bind="stats.usedMemoryHuman"></div>
          <div class="cpc-stat-label">Memory used</div>
          <div class="cpc-muted small mt-1">
            peak <span ng-bind="stats.peakMemoryHuman"></span>
          </div>
        </div>
      </div>
      <div class="col-6 col-lg-3">
        <div class="cpc-stat">
          <div class="cpc-stat-value" ng-bind="stats.evictions"></div>
          <div class="cpc-stat-label">Evictions</div>
          <div class="cpc-muted small mt-1" ng-bind="stats.maxMemoryPolicy"></div>
        </div>
      </div>
      <div class="col-6 col-lg-3">
        <div class="cpc-stat">
          <div class="cpc-stat-value" ng-bind="stats.connectedClients"></div>
          <div class="cpc-stat-label">Connected clients</div>
        </div>
      </div>
      <div class="col-6 col-lg-3">
        <div class="cpc-stat">
          <div class="cpc-stat-value" ng-bind="uptime()"></div>
          <div class="cpc-stat-label">Uptime</div>
        </div>
      </div>
      <div class="col-6 col-lg-3">
        <div class="cpc-stat">
          <div class="cpc-stat-value" ng-bind="stats.siteCacheKeys"></div>
          <div class="cpc-stat-label">Keys in db <span ng-bind="stats.siteCacheDB"></span></div>
        </div>
      </div>
      <div class="col-6 col-lg-3">
        <div class="cpc-stat">
          <div class="cpc-stat-value" ng-bind="trackedSites"></div>
          <div class="cpc-stat-label">Sites using Redis</div>
        </div>
      </div>
      <div class="col-6 col-lg-3">
        <div class="cpc-stat">
          <div class="cpc-stat-value" ng-bind="stats.version"></div>
          <div class="cpc-stat-label">Version</div>
        </div>
      </div>
    </div>

    <div class="cpc-panel p-3 p-md-4 mb-4">
      <h2 class="h6 mb-3"><i class="fas fa-plug me-1"></i>How the panel connects</h2>
      <div class="table-responsive">
        <table class="table table-sm align-middle mb-0">
          <tbody>
            <tr><th scope="row" class="w-25">Bind address</th>
                <td class="cpc-mono" ng-bind="connection.host + ':' + connection.port"></td></tr>
            <tr><th scope="row">Unix socket</th>
                <td class="cpc-mono">
                  <span ng-bind="connection.socket"></span>
                  <span class="badge cpc-pill ms-2"
                        ng-class="connection.socketInUse ? 'bg-success' : 'bg-secondary'"
                        ng-bind="connection.socketInUse ? 'in use' : 'not present'"></span>
                </td></tr>
            <tr><th scope="row">Tenant namespace</th>
                <td class="cpc-mono" ng-bind="namespace + '*'"></td></tr>
            <tr><th scope="row">Lookups</th>
                <td>
                  <span ng-bind="stats.hits"></span> hits /
                  <span ng-bind="stats.misses"></span> misses
                </td></tr>
            <tr><th scope="row">Commands processed</th>
                <td ng-bind="stats.totalCommands"></td></tr>
          </tbody>
        </table>
      </div>
    </div>

    <div class="cpc-panel p-3 p-md-4">
      <h2 class="h6 mb-3"><i class="fas fa-broom me-1"></i>Flush tenant caches</h2>
      <p class="cpc-muted small">
        Removes every key under <span class="cpc-mono" ng-bind="namespace + '*'"></span>.
        This is not a <span class="cpc-mono">FLUSHALL</span>: the panel's own session
        throttling and the Celery queues live in other databases and are left alone.
        Every site whose cache is emptied simply rebuilds it on the next request.
      </p>
      <div class="row g-2 align-items-end">
        <div class="col-md-8">
          <label class="form-label" for="cpcFlushDomain">Limit to one website (optional)</label>
          <select class="form-select" id="cpcFlushDomain" ng-model="flushDomain"
                  ng-options="item as item for item in domains">
            <option value="">Every website on this server</option>
          </select>
        </div>
        <div class="col-md-4 text-md-end">
          <button type="button" class="btn btn-outline-danger"
                  ng-click="flush()" ng-disabled="saving">
            <i class="fas fa-broom me-1"></i>Flush
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- ------------------------------------------------------------------ -->
  <!-- Site scope                                                          -->
  <!-- ------------------------------------------------------------------ -->
  <div ng-show="!busy && scope === 'site'" ng-cloak>
    <div class="row g-3 mb-4">
      <div class="col-6 col-lg-3">
        <div class="cpc-stat">
          <div class="cpc-stat-value" ng-bind="site.keys"></div>
          <div class="cpc-stat-label">Your cached entries</div>
        </div>
      </div>
      <div class="col-6 col-lg-3">
        <div class="cpc-stat">
          <div class="cpc-stat-value">
            <i class="fas" ng-class="site.enabled ? 'fa-circle-check' : 'fa-circle-xmark'"></i>
          </div>
          <div class="cpc-stat-label">Object cache</div>
        </div>
      </div>
      <div class="col-6 col-lg-3">
        <div class="cpc-stat">
          <div class="cpc-stat-value">
            <i class="fas" ng-class="site.aclApplied ? 'fa-lock' : 'fa-lock-open'"></i>
          </div>
          <div class="cpc-stat-label">Key isolation</div>
        </div>
      </div>
      <div class="col-6 col-lg-3">
        <div class="cpc-stat">
          <div class="cpc-stat-value" ng-bind="site.siteCacheDB"></div>
          <div class="cpc-stat-label">Redis database</div>
        </div>
      </div>
    </div>

    <div class="cpc-panel p-3 p-md-4">
      <h2 class="h6 mb-2">Your key namespace</h2>
      <div class="cpc-key">
        <div class="cpc-mono" ng-bind="site.prefix + '*'"></div>
      </div>
      <p class="cpc-muted small mb-0 mt-3">
        Redis refuses any request from this site for a key outside that pattern, so
        no other website on this server can read or delete your cache entries — and
        you cannot read theirs. Manage this site's cache from the
        <a href="/cache/objectCache">object cache page</a>.
      </p>
    </div>
  </div>

  <div ng-show="!busy && !scope" ng-cloak class="text-center cpc-muted py-5">
    <div class="fs-2 mb-2"><i class="fa-regular fa-hand-pointer"></i></div>
    <p class="mb-0">Choose a website to see its Redis usage.</p>
  </div>
</div>
{% endblock %}

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