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

{% block title %}DNS Clustering{% endblock %}

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

  <ul class="cp-breadcrumb">
    <li>DNS</li>
    <li>Clustering</li>
  </ul>

  <div class="cp-page-head">
    <div>
      <h1 class="cp-page-head__title">
        <i class="fa-solid fa-network-wired"></i> DNS Clustering
      </h1>
      <p class="cp-page-head__sub">
        Replication between this server and your other nameservers: are the slaves actually
        carrying your current zones?
      </p>
    </div>
    <div class="cp-page-head__actions">
      <a class="cp-btn cp-btn--ghost" href="/dns/slaveZones">
        <i class="fa-solid fa-download"></i> Slave zones
      </a>
      <a class="cp-btn cp-btn--ghost" href="/dns/listZones">
        <i class="fa-solid fa-list"></i> All zones
      </a>
    </div>
  </div>

  <div class="cp-alert cp-alert--warning">
    <i class="fa-solid fa-triangle-exclamation"></i>
    <p>
      Everything on this page is <strong>server-wide</strong>. A supermaster can create zones here
      on its own, and <code>allow-axfr-ips</code> applies to every zone on the box &mdash; including
      every customer's. Nothing here is scoped to a single account.
    </p>
  </div>

  {# --------------------------------------------------------------- tabs #}
  <div class="cp-tabs" role="tablist">
    <button type="button" class="cp-tabs__item" ng-class="{'is-active': tab === 'status'}"
            ng-click="setTab('status')" role="tab" aria-selected="{$ tab === 'status' $}">
      <i class="fa-solid fa-heart-pulse"></i> Cluster status
    </button>
    <button type="button" class="cp-tabs__item" ng-class="{'is-active': tab === 'supermasters'}"
            ng-click="setTab('supermasters')" role="tab" aria-selected="{$ tab === 'supermasters' $}">
      <i class="fa-solid fa-tower-broadcast"></i> Supermasters
    </button>
    <button type="button" class="cp-tabs__item" ng-class="{'is-active': tab === 'axfr'}"
            ng-click="setTab('axfr')" role="tab" aria-selected="{$ tab === 'axfr' $}">
      <i class="fa-solid fa-shield-halved"></i> Zone transfers
    </button>
  </div>

  {# ------------------------------------------------------- cluster status #}
  <div ng-if="tab === 'status'">

    <div class="cp-stat-grid">
      <div class="cp-stat cp-stat--success">
        <span class="cp-stat__icon"><i class="fa-solid fa-circle-check"></i></span>
        <span class="cp-stat__body">
          <span class="cp-stat__value" ng-bind="summary.insync || 0"></span>
          <span class="cp-stat__label">In sync</span>
          <span class="cp-stat__meta">every peer holds our serial</span>
        </span>
      </div>
      <div class="cp-stat cp-stat--warning">
        <span class="cp-stat__icon"><i class="fa-solid fa-hourglass-half"></i></span>
        <span class="cp-stat__body">
          <span class="cp-stat__value" ng-bind="(summary.behind || 0) + (summary.ahead || 0)"></span>
          <span class="cp-stat__label">Out of step</span>
          <span class="cp-stat__meta">serial drift on at least one peer</span>
        </span>
      </div>
      <div class="cp-stat cp-stat--danger">
        <span class="cp-stat__icon"><i class="fa-solid fa-plug-circle-xmark"></i></span>
        <span class="cp-stat__body">
          <span class="cp-stat__value"
                ng-bind="(summary.unreachable || 0) + (summary.missing || 0)"></span>
          <span class="cp-stat__label">Unreachable</span>
          <span class="cp-stat__meta">no usable SOA answer</span>
        </span>
      </div>
      <div class="cp-stat cp-stat--info">
        <span class="cp-stat__icon"><i class="fa-solid fa-circle-minus"></i></span>
        <span class="cp-stat__body">
          <span class="cp-stat__value" ng-bind="summary.nopeers || 0"></span>
          <span class="cp-stat__label">No peers</span>
          <span class="cp-stat__meta">nothing to compare against</span>
        </span>
      </div>
    </div>

    <div class="cp-card">
      <div class="cp-card__head">
        <div>
          <h2 class="cp-card__title"><i class="fa-solid fa-heart-pulse"></i> Zone replication</h2>
          <p class="cp-card__sub" ng-bind="statusSummary()"></p>
        </div>
        <div class="cp-page-head__actions">
          <div class="cp-table-search">
            <i class="fa-solid fa-magnifying-glass"></i>
            <input type="search" class="cp-input" ng-model="statusSearch"
                   placeholder="Filter zones&hellip;" aria-label="Filter zones">
          </div>
          <button type="button" class="cp-btn cp-btn--ghost" ng-click="loadStatus(0)"
                  ng-disabled="statusBusy">
            <i class="fa-solid fa-rotate" ng-class="{'fa-spin': statusBusy}"></i> Check now
          </button>
          <button type="button" class="cp-btn cp-btn--primary" ng-click="notifyAll()"
                  ng-disabled="statusBusy || notifyBusy">
            <i class="fa-solid fa-bullhorn" ng-class="{'fa-spin': notifyBusy}"></i> NOTIFY all zones
          </button>
        </div>
      </div>

      <div class="cp-card__body cp-card__body--flush">
        <div class="cp-table-wrap" ng-if="!statusBusy && clusterZones.length">
          <table class="cp-table cp-table--compact">
            <thead>
              <tr>
                <th scope="col">Zone</th>
                <th scope="col">Role</th>
                <th scope="col" class="cp-num">Our serial</th>
                <th scope="col">Peers</th>
                <th scope="col">Verdict</th>
                <th scope="col" class="cp-nowrap">Actions</th>
              </tr>
            </thead>
            <tbody>
              <tr ng-repeat-start="zone in clusterZones | filter:statusSearch">
                <td>
                  <a class="cp-mono" ng-href="/dns/addDeleteDNSRecords?zone={$ zone.name $}"
                     ng-bind="zone.name"></a>
                </td>
                <td><span class="cp-badge cp-badge--info" ng-bind="zone.type"></span></td>
                <td class="cp-num cp-mono" ng-bind="zone.serial"></td>
                <td>
                  <button type="button" class="cp-btn cp-btn--link cp-btn--sm"
                          ng-click="toggle(zone)" ng-if="zone.peerCount">
                    <i class="fa-solid" ng-class="open[zone.name] ? 'fa-caret-down' : 'fa-caret-right'"></i>
                    {$ zone.peerCount $} peer<span ng-if="zone.peerCount !== 1">s</span>
                  </button>
                  <span class="cp-muted" ng-if="!zone.peerCount">none</span>
                </td>
                <td>
                  <span class="cp-badge" ng-class="stateClass(zone.state)">
                    <i class="fa-solid" ng-class="stateIcon(zone.state)"></i>
                    {$ stateLabel(zone.state) $}
                  </span>
                </td>
                <td class="cp-nowrap">
                  <div class="cp-btn-group">
                    <button type="button" class="cp-btn cp-btn--ghost cp-btn--sm"
                            ng-if="zone.canNotify" ng-click="notifyZone(zone)"
                            ng-disabled="notifyBusy" title="Tell the slaves to re-check this zone">
                      <i class="fa-solid fa-bullhorn"></i> NOTIFY
                    </button>
                    <button type="button" class="cp-btn cp-btn--ghost cp-btn--sm"
                            ng-if="zone.canRetrieve" ng-click="retrieve(zone)"
                            ng-disabled="notifyBusy" title="Pull this zone from its master now">
                      <i class="fa-solid fa-download"></i> Retrieve
                    </button>
                    <button type="button" class="cp-btn cp-btn--ghost cp-btn--sm"
                            ng-click="recheck(zone)" ng-disabled="statusBusy">
                      <i class="fa-solid fa-rotate"></i> Re-check
                    </button>
                  </div>
                </td>
              </tr>
              <tr ng-repeat-end ng-show="open[zone.name] && zone.peerCount">
                <td colspan="6">
                  <table class="cp-table cp-table--compact">
                    <thead>
                      <tr>
                        <th scope="col">Peer</th>
                        <th scope="col">Address</th>
                        <th scope="col">Learned from</th>
                        <th scope="col" class="cp-num">Their serial</th>
                        <th scope="col" class="cp-num">Drift</th>
                        <th scope="col">State</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr ng-repeat="peer in zone.peers">
                        <td class="cp-mono" ng-bind="peer.host"></td>
                        <td class="cp-mono">
                          {$ peer.address $}<span ng-if="peer.port !== 53">:{$ peer.port $}</span>
                        </td>
                        <td><span class="cp-badge" ng-bind="peer.source"></span></td>
                        <td class="cp-num cp-mono" ng-bind="peer.serial || '—'"></td>
                        <td class="cp-num cp-mono" ng-bind="peer.drift || '0'"></td>
                        <td>
                          <span class="cp-badge" ng-class="stateClass(peer.state)"
                                title="{$ peer.message $}">
                            <i class="fa-solid" ng-class="stateIcon(peer.state)"></i>
                            {$ peerStateLabel(peer) $}
                          </span>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                  <p class="cp-help" ng-if="zone.lastCheckAge >= 0">
                    PowerDNS last checked this zone at {$ zone.lastCheckText $}.
                  </p>
                </td>
              </tr>
            </tbody>
          </table>
        </div>

        <div class="cp-empty" ng-if="statusBusy">
          <span class="cp-spinner cp-spinner--lg"></span>
          <p>Probing peers&hellip; each zone is queried directly, so this can take a moment.</p>
        </div>

        <div class="cp-empty" ng-if="!statusBusy && !clusterZones.length">
          <i class="fa-solid fa-network-wired"></i>
          <h4>Nothing to compare yet</h4>
          <p>
            Create a zone, or add ALSO-NOTIFY metadata / apex NS records pointing at your other
            nameservers, and their serials will be compared here.
          </p>
        </div>
      </div>

      <div class="cp-card__foot" ng-if="!statusBusy && total > limit">
        <span class="cp-muted">
          Showing {$ offset + 1 $}&ndash;{$ offset + clusterZones.length $} of {$ total $} zones.
        </span>
        <div class="cp-btn-group">
          <button type="button" class="cp-btn cp-btn--ghost cp-btn--sm"
                  ng-click="loadStatus(offset - limit)" ng-disabled="offset <= 0 || statusBusy">
            <i class="fa-solid fa-angle-left"></i> Previous
          </button>
          <button type="button" class="cp-btn cp-btn--ghost cp-btn--sm"
                  ng-click="loadStatus(offset + limit)" ng-disabled="!hasMore || statusBusy">
            Next <i class="fa-solid fa-angle-right"></i>
          </button>
        </div>
      </div>
    </div>

    <div class="cp-alert cp-alert--info">
      <i class="fa-solid fa-circle-info"></i>
      <p>
        Peers come from two places: <code>ALSO-NOTIFY</code> zone metadata, and any apex
        <code>NS</code> record that is not <strong>{{ ns1 }}</strong> or <strong>{{ ns2 }}</strong>.
        Each is asked for the zone's SOA with a direct, non-recursive query &mdash; a
        <em>behind</em> verdict on a zone you master means that slave has not transferred your
        latest change yet.
      </p>
    </div>
  </div>

  {# --------------------------------------------------------- supermasters #}
  <div ng-if="tab === 'supermasters'">

    <div class="cp-alert cp-alert--danger">
      <i class="fa-solid fa-triangle-exclamation"></i>
      <p>
        A supermaster may <strong>create zones on this server by itself</strong>. When the listed
        address sends a NOTIFY for a zone whose NS set contains the listed nameserver, PowerDNS
        provisions that zone as a slave without asking anyone. Only list hosts you operate.
      </p>
    </div>

    <div class="cp-dash-split">
      <div class="cp-card">
        <div class="cp-card__head">
          <h2 class="cp-card__title"><i class="fa-solid fa-plus"></i> Add a supermaster</h2>
        </div>
        <div class="cp-card__body">
          <form novalidate ng-submit="addSupermaster()">
            <div class="cp-field">
              <label class="cp-label" for="smIp">Master IP address <span class="cp-req">*</span></label>
              <input id="smIp" type="text" class="cp-input cp-mono" ng-model="smForm.ip"
                     autocomplete="off" spellcheck="false" placeholder="203.0.113.10">
              <p class="cp-help">The address this server will accept NOTIFY packets from.</p>
            </div>

            <div class="cp-field">
              <label class="cp-label" for="smNs">Nameserver hostname <span class="cp-req">*</span></label>
              <input id="smNs" type="text" class="cp-input cp-mono" ng-model="smForm.nameserver"
                     autocomplete="off" spellcheck="false" placeholder="ns1.example.com">
              <p class="cp-help">
                Must appear in the NS set of every zone this master provisions, or PowerDNS refuses
                the zone.
              </p>
            </div>

            <div class="cp-field">
              <label class="cp-label" for="smAccount">Account (optional)</label>
              <input id="smAccount" type="text" class="cp-input cp-mono" ng-model="smForm.account"
                     autocomplete="off" spellcheck="false" placeholder="leave blank for none">
              <p class="cp-help">
                A CloudPanel username, stamped on the zones this master creates. Zones created this
                way still get no panel ownership record, so only an administrator will see them
                until one is assigned.
              </p>
            </div>

            <button type="submit" class="cp-btn cp-btn--primary cp-btn--block"
                    ng-disabled="smBusy">
              <i class="fa-solid fa-plus" ng-class="{'fa-spin fa-spinner': smBusy}"></i>
              Add supermaster
            </button>
          </form>
        </div>
      </div>

      <div class="cp-card">
        <div class="cp-card__head">
          <div>
            <h2 class="cp-card__title">
              <i class="fa-solid fa-tower-broadcast"></i> Configured supermasters
            </h2>
            <p class="cp-card__sub" ng-bind="supermasterSummary()"></p>
          </div>
          <button type="button" class="cp-btn cp-btn--ghost cp-btn--sm"
                  ng-click="loadSupermasters()" ng-disabled="smBusy">
            <i class="fa-solid fa-rotate" ng-class="{'fa-spin': smBusy}"></i> Refresh
          </button>
        </div>

        <div class="cp-card__body cp-card__body--flush">
          <div class="cp-table-wrap" ng-if="!smBusy && supermasters.length">
            <table class="cp-table">
              <thead>
                <tr>
                  <th scope="col">Master IP</th>
                  <th scope="col">Nameserver</th>
                  <th scope="col">Account</th>
                  <th scope="col" class="cp-nowrap">Actions</th>
                </tr>
              </thead>
              <tbody>
                <tr ng-repeat="entry in supermasters">
                  <td class="cp-mono" ng-bind="entry.ip"></td>
                  <td class="cp-mono" ng-bind="entry.nameserver"></td>
                  <td>
                    <span ng-if="entry.account" ng-bind="entry.account"></span>
                    <span class="cp-muted" ng-if="!entry.account">none</span>
                  </td>
                  <td class="cp-nowrap">
                    <button type="button" class="cp-btn cp-btn--danger cp-btn--sm"
                            ng-click="removeSupermaster(entry)" ng-disabled="smBusy">
                      <i class="fa-solid fa-trash"></i> Remove
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>

          <div class="cp-empty" ng-if="smBusy">
            <span class="cp-spinner cp-spinner--lg"></span>
            <p>Loading supermasters&hellip;</p>
          </div>

          <div class="cp-empty" ng-if="!smBusy && !supermasters.length">
            <i class="fa-solid fa-tower-broadcast"></i>
            <h4>No supermasters configured</h4>
            <p>
              That is the safe default: no remote host can provision zones here. Add one only if
              you run a hidden primary that should push zones to this server automatically.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>

  {# ------------------------------------------------------------ axfr #}
  <div ng-if="tab === 'axfr'">

    <div class="cp-card">
      <div class="cp-card__head">
        <div>
          <h2 class="cp-card__title">
            <i class="fa-solid fa-shield-halved"></i> allow-axfr-ips
          </h2>
          <p class="cp-card__sub">
            Who may pull a full copy of a zone from this server.
          </p>
        </div>
        <button type="button" class="cp-btn cp-btn--ghost cp-btn--sm" ng-click="loadAxfr()"
                ng-disabled="axfrBusy">
          <i class="fa-solid fa-rotate" ng-class="{'fa-spin': axfrBusy}"></i> Reload
        </button>
      </div>

      <div class="cp-card__body">
        <div class="cp-alert cp-alert--danger">
          <i class="fa-solid fa-triangle-exclamation"></i>
          <p ng-bind="axfr.danger"></p>
        </div>

        <div class="cp-alert cp-alert--warning" ng-repeat="warning in axfr.warnings track by $index">
          <i class="fa-solid fa-circle-exclamation"></i>
          <p ng-bind="warning"></p>
        </div>

        <div class="cp-form-grid">
          <div class="cp-field">
            <label class="cp-label">Currently effective value</label>
            <p class="cp-pre cp-mono" ng-bind="axfr.value || '(not set — PowerDNS default)'"></p>
            <p class="cp-help">
              Read from <code ng-bind="axfr.source === 'cloudpanel' ? axfr.overridePath : axfr.mainPath"></code>.
            </p>
          </div>

          <div class="cp-field">
            <label class="cp-label">Where it is defined</label>
            <p>
              <span class="cp-badge cp-badge--info" ng-bind="axfr.source"></span>
            </p>
            <p class="cp-help">
              CloudPanel writes its value to <code>{{ axfrPath }}</code>, which PowerDNS reads
              through <code>include-dir</code>. The value in <code>pdns.conf</code> is left alone.
            </p>
          </div>
        </div>

        <form novalidate ng-submit="saveAxfr()" ng-if="axfr.editable">
          <div class="cp-field">
            <label class="cp-label" for="axfrValue">New value</label>
            <textarea id="axfrValue" class="cp-textarea cp-mono" rows="3" ng-model="axfrForm.value"
                      spellcheck="false"
                      placeholder="203.0.113.10, 198.51.100.0/28"></textarea>
            <p class="cp-help">
              Comma or space separated IP addresses and CIDR ranges. Prefix an entry with
              <code>!</code> to deny it. Leave the box empty to allow no transfers at all, which is
              the safe setting when you run no secondaries.
            </p>
          </div>

          <div class="cp-field">
            <label class="cp-check">
              <input type="checkbox" ng-model="axfrForm.acknowledgeWide">
              <span>
                I understand a wide range exposes every zone on this server, and I want to write it
                anyway.
              </span>
            </label>
          </div>

          <div class="cp-btn-group">
            <button type="submit" class="cp-btn cp-btn--danger" ng-disabled="axfrBusy">
              <i class="fa-solid fa-floppy-disk" ng-class="{'fa-spin fa-spinner': axfrBusy}"></i>
              Save and restart PowerDNS
            </button>
            <button type="button" class="cp-btn cp-btn--ghost" ng-click="resetAxfr()"
                    ng-disabled="axfrBusy">
              <i class="fa-solid fa-arrow-rotate-left"></i> Reset
            </button>
          </div>

          <p class="cp-help">
            <strong>allow-axfr-ips is only read at startup</strong>, so saving restarts the
            <code>{{ pdnsService }}</code> service. Resolution stops for a second or two while it
            comes back.
          </p>
        </form>

        <div class="cp-alert cp-alert--info" ng-if="!axfr.editable">
          <i class="fa-solid fa-lock"></i>
          <p>
            Only a server administrator can change this value. You can see it, but not edit it.
          </p>
        </div>
      </div>
    </div>

    <div class="cp-alert cp-alert--info">
      <i class="fa-solid fa-circle-info"></i>
      <p>
        A per-zone exception is cleaner than widening this list: set the
        <code>ALLOW-AXFR-FROM</code> metadata on the single zone that needs it instead of opening
        every zone on the server.
      </p>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
  window.CP_DNS_CLUSTER = {
    ns1: "{{ ns1|escapejs }}",
    ns2: "{{ ns2|escapejs }}",
    serverIP: "{{ serverIP|escapejs }}",
    isAdmin: {% if isAdmin %}true{% else %}false{% endif %},
    zoneLimit: {{ zoneLimit }},
    axfrPath: "{{ axfrPath|escapejs }}",
    pdnsService: "{{ pdnsService|escapejs }}"
  };
</script>
<script src="{% static 'dnsManager/dnsManager.js' %}"></script>
{% endblock %}