pngx-sync/app/templates/replica_detail.html

{% extends "base.html" %}
{% block title %}{{ replica.name }} — pngx-controller{% endblock %}
{% block content %}

<nav aria-label="breadcrumb">
  <ul>
    <li><a href="/replicas">Replicas</a></li>
    <li>{{ replica.name }}</li>
  </ul>
</nav>

<div class="page-hd">
  <h2>{{ replica.name }}</h2>
  <div class="page-actions">
    <button class="secondary outline"
      hx-post="/api/replicas/{{ replica.id }}/test"
      hx-target="#conn-result" hx-swap="innerHTML">
      Test Connection
    </button>
    <button
      hx-post="/api/sync?replica_id={{ replica.id }}"
      hx-swap="none"
      hx-on::after-request="window.location.reload()">
      <svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M10 6A4 4 0 112 3.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/><path d="M2 1.5V3.5H4" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
      Sync Now
    </button>
    {% if replica.suspended_at %}
    <button class="contrast"
      hx-post="/api/replicas/{{ replica.id }}/unsuspend"
      hx-on::after-request="window.location.reload()">
      Re-enable
    </button>
    {% endif %}
    {% if replica.enabled and not replica.suspended_at %}
    <button class="secondary outline" onclick="openPromoteDialog()">
      Promote to Master
    </button>
    {% endif %}
  </div>
</div>

<span id="conn-result"></span>

<div class="stat-cards">
  <div class="stat-card">
    <div class="stat-card-label">URL</div>
    <div class="stat-card-value"><code style="font-size:.78rem;">{{ replica.url }}</code></div>
  </div>
  <div class="stat-card">
    <div class="stat-card-label">Status</div>
    <div class="stat-card-value">
      {% if replica.suspended_at %}
        <span class="badge badge-suspended">suspended</span>
        <div class="stat-card-sub">{{ replica.consecutive_failures }} consecutive failures</div>
      {% elif replica.last_sync_ts %}
        <span class="badge badge-synced">synced</span>
      {% else %}
        <span class="badge badge-pending">pending</span>
      {% endif %}
    </div>
  </div>
  <div class="stat-card">
    <div class="stat-card-label">Last sync</div>
    <div class="stat-card-value" style="font-size:.88rem;">
      {% if replica.last_sync_ts %}
        {{ replica.last_sync_ts.strftime('%Y-%m-%d %H:%M:%S') }} UTC
        <div class="stat-card-sub">{{ lag }}</div>
      {% else %}
        <span class="muted">never</span>
      {% endif %}
    </div>
  </div>
  <div class="stat-card">
    <div class="stat-card-label">Interval</div>
    <div class="stat-card-value">{% if replica.sync_interval_seconds %}{{ replica.sync_interval_seconds }}s{% else %}<span style="color:var(--text-2);">global</span>{% endif %}</div>
  </div>
</div>

<h3>Sync Run History (last 20)</h3>
{% if recent_runs %}
<div class="overflow-auto">
<table>
  <thead>
    <tr><th>#</th><th>Started</th><th>Duration</th><th>Synced</th><th>Failed</th><th>Triggered by</th><th></th></tr>
  </thead>
  <tbody>
    {% for run in recent_runs %}
    <tr>
      <td style="color:var(--text-3); font-size:.8rem;">{{ run.id }}</td>
      <td style="font-size:.82rem;">{{ run.started_at.strftime('%Y-%m-%d %H:%M:%S') if run.started_at else '—' }}</td>
      <td style="font-size:.82rem; color:var(--text-2);">
        {% if run.started_at and run.finished_at %}
          {% set dur = (run.finished_at - run.started_at).total_seconds()|int %}
          {% if dur < 60 %}{{ dur }}s
          {% else %}{{ dur // 60 }}m {{ dur % 60 }}s{% endif %}
        {% elif run.started_at %}
          <span class="badge badge-syncing">running</span>
        {% else %}—{% endif %}
      </td>
      <td style="color:var(--ok);">{{ run.docs_synced }}</td>
      <td>
        {% if run.docs_failed %}
          <a href="/logs?replica_id={{ replica.id }}" class="badge badge-error">{{ run.docs_failed }}</a>
        {% else %}<span style="color:var(--text-3);">0</span>{% endif %}
      </td>
      <td><code>{{ run.triggered_by }}</code></td>
      <td>{% if run.timed_out %}<span class="badge badge-warning">timed out</span>{% endif %}</td>
    </tr>
    {% endfor %}
  </tbody>
</table>
</div>
{% else %}
<p><small class="muted">No sync runs yet.</small></p>
{% endif %}

<h3>Sync Map (last 50)</h3>
{% if sync_map_page %}
<div class="overflow-auto">
<table>
  <thead>
    <tr><th>Master ID</th><th>Replica ID</th><th>Status</th><th>Last synced</th><th>Retries</th><th>Error</th></tr>
  </thead>
  <tbody>
    {% for entry in sync_map_page %}
    <tr>
      <td style="font-family:var(--mono); font-size:.82rem;">{{ entry.master_doc_id }}</td>
      <td style="font-family:var(--mono); font-size:.82rem;">{{ entry.replica_doc_id or '—' }}</td>
      <td><span class="badge badge-{{ entry.status }}">{{ entry.status }}</span></td>
      <td style="font-size:.82rem; color:var(--text-2);">{{ entry.last_synced.strftime('%Y-%m-%d %H:%M') if entry.last_synced else '—' }}</td>
      <td style="color:var(--text-3);">{{ entry.retry_count }}</td>
      <td><small style="color:var(--text-2);">{{ entry.error_msg or '' }}</small></td>
    </tr>
    {% endfor %}
  </tbody>
</table>
</div>
{% else %}
<p><small class="muted">No sync map entries yet.</small></p>
{% endif %}

<details>
  <summary>Danger Zone</summary>
  <div class="danger-zone" style="margin-top:.75rem;">
    <p>Full resync wipes the sync map for this replica and re-syncs everything from scratch.</p>
    <div style="display:flex; gap:.5rem; flex-wrap:wrap; align-items:center;">
      <button class="contrast"
        hx-post="/api/replicas/{{ replica.id }}/resync"
        hx-confirm="Wipe sync map and trigger full resync for {{ replica.name }}?"
        hx-on::after-request="window.location.reload()">
        Full Resync
      </button>
      <button class="secondary"
        hx-post="/api/replicas/{{ replica.id }}/reconcile"
        hx-confirm="Run reconcile for {{ replica.name }}? This matches existing documents without re-uploading."
        hx-target="#reconcile-result" hx-swap="innerHTML">
        Reconcile
      </button>
      <span id="reconcile-result"></span>
    </div>
  </div>
</details>

<!-- Promote to Master dialog -->
<dialog id="promote-dialog">
  <article>
    <header>
      <button aria-label="Close" onclick="document.getElementById('promote-dialog').close()"></button>
      <h3>Promote <strong>{{ replica.name }}</strong> to Master</h3>
      <p style="margin:.2rem 0 0; font-size:.78rem; color:var(--text-3);">{{ replica.url }}</p>
    </header>

    <div id="promote-preflight-content" style="min-height:6rem; padding:1.15rem 1.4rem;">
      <progress></progress>
      <p class="muted" style="font-size:.83rem;">Checking pre-flight conditions&hellip;</p>
    </div>

    <footer style="display:flex; justify-content:flex-end; gap:.5rem;">
      <button class="secondary outline" onclick="document.getElementById('promote-dialog').close()">Cancel</button>
      <button id="promote-confirm-btn" disabled onclick="doPromote()">Promote to Master</button>
    </footer>
  </article>
</dialog>

<script>
const REPLICA_ID = {{ replica.id }};
const REPLICA_NAME = {{ replica.name | tojson }};
let _preflightData = null;

async function openPromoteDialog() {
  const dialog = document.getElementById('promote-dialog');
  const content = document.getElementById('promote-preflight-content');
  const btn = document.getElementById('promote-confirm-btn');
  content.innerHTML = '<progress></progress><p class="muted" style="font-size:.83rem;">Checking pre-flight conditions\u2026</p>';
  btn.disabled = true;
  _preflightData = null;
  dialog.showModal();

  try {
    const resp = await fetch('/api/master/promote/' + REPLICA_ID + '/preflight');
    _preflightData = await resp.json();
    renderPreflight(_preflightData);
  } catch (err) {
    content.innerHTML = '<p><span class="badge badge-error">Error</span> ' + err + '</p>';
  }
}

function renderPreflight(data) {
  const content = document.getElementById('promote-preflight-content');
  const btn = document.getElementById('promote-confirm-btn');
  let html = '';

  if (!data.can_promote) {
    html += '<div style="padding:.75rem 1rem; background:rgba(244,112,103,.08); border-radius:4px; border-left:3px solid #f47067;">';
    html += '<strong>' + (data.error || 'Cannot promote') + '</strong><br>';
    html += '<small style="color:var(--text-2);">' + (data.detail || '') + '</small>';
    html += '</div>';
    content.innerHTML = html;
    btn.disabled = true;
    return;
  }

  // Summary cards
  html += '<div style="display:grid; grid-template-columns:repeat(3,1fr); gap:.65rem; margin-bottom:1rem;">';
  [
    ['Master docs', data.master_doc_count ?? '?'],
    ['Replica docs', data.replica_doc_count ?? '?'],
    ['Mappings to rebuild', data.ok_entries],
  ].forEach(function([label, val]) {
    html += '<div style="padding:.55rem .75rem; background:#1d2235; border-radius:4px; text-align:center;">';
    html += '<div style="font-size:.68rem; text-transform:uppercase; letter-spacing:.07em; color:var(--text-3); margin-bottom:.25rem;">' + label + '</div>';
    html += '<strong style="font-size:1.1rem;">' + val + '</strong></div>';
  });
  html += '</div>';

  // Old master name
  html += '<label style="display:block; margin-bottom:.75rem;">Name for the current master (it becomes a new replica)<input type="text" id="old-master-name" value="old-master" required oninput="updateConfirmBtn()"></label>';

  // Ack checkboxes
  if (data.pending_entries > 0) {
    html += '<label style="display:flex; gap:.5rem; align-items:flex-start; margin-bottom:.5rem; cursor:pointer; font-size:.85rem;">';
    html += '<input type="checkbox" id="ack-pending" onchange="updateConfirmBtn()" style="margin-top:.15rem; flex-shrink:0;">';
    html += '<span><strong>' + data.pending_entries + ' pending entries</strong> \u2014 these documents may be re-uploaded after promotion.</span>';
    html += '</label>';
  }
  if (data.error_entries > 0) {
    html += '<label style="display:flex; gap:.5rem; align-items:flex-start; margin-bottom:.5rem; cursor:pointer; font-size:.85rem;">';
    html += '<input type="checkbox" id="ack-errors" onchange="updateConfirmBtn()" style="margin-top:.15rem; flex-shrink:0;">';
    html += '<span><strong>' + data.error_entries + ' error entries</strong> \u2014 these documents will be re-synced after promotion.</span>';
    html += '</label>';
  }

  html += '<p style="margin:.75rem 0 0; font-size:.8rem; color:var(--text-3);">The current master will be added as a new replica and will sync from <strong style="color:var(--text-2);">' + REPLICA_NAME + '</strong> going forward.</p>';

  content.innerHTML = html;
  updateConfirmBtn();
}

function updateConfirmBtn() {
  if (!_preflightData || !_preflightData.can_promote) return;
  const btn = document.getElementById('promote-confirm-btn');
  const nameOk = (document.getElementById('old-master-name')?.value || '').trim().length > 0;
  const pendingOk = _preflightData.pending_entries === 0 || document.getElementById('ack-pending')?.checked;
  const errorsOk = _preflightData.error_entries === 0 || document.getElementById('ack-errors')?.checked;
  btn.disabled = !(nameOk && pendingOk && errorsOk);
}

async function doPromote() {
  const btn = document.getElementById('promote-confirm-btn');
  const oldMasterName = (document.getElementById('old-master-name')?.value || '').trim();
  const ackPending = !!document.getElementById('ack-pending')?.checked;
  const ackErrors = !!document.getElementById('ack-errors')?.checked;

  btn.disabled = true;
  btn.setAttribute('aria-busy', 'true');
  btn.textContent = 'Promoting\u2026';

  try {
    const resp = await fetch('/api/master/promote/' + REPLICA_ID, {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({
        old_master_name: oldMasterName,
        acknowledge_pending: ackPending,
        acknowledge_errors: ackErrors,
      }),
    });

    if (resp.ok) {
      const result = await resp.json();
      const msg = 'Promoted\u00a0' + (result.new_master?.name || REPLICA_NAME) +
                  '\u00a0to master.\u00a0' + oldMasterName + '\u00a0added as replica.\u00a0' +
                  result.sync_map_rebuilt.entries_mapped + '\u00a0document mappings rebuilt.';
      window.location.href = '/?flash=' + encodeURIComponent(msg);
    } else {
      const err = await resp.json();
      const detail = err.detail?.detail || err.detail || 'Unknown error';
      document.getElementById('promote-preflight-content').innerHTML +=
        '<p style="margin-top:.75rem;"><span class="badge badge-error">Error</span> ' + detail + '</p>';
      btn.disabled = false;
      btn.removeAttribute('aria-busy');
      btn.textContent = 'Promote to Master';
    }
  } catch (err) {
    document.getElementById('promote-preflight-content').innerHTML +=
      '<p style="margin-top:.75rem;"><span class="badge badge-error">Network error</span> ' + err + '</p>';
    btn.disabled = false;
    btn.removeAttribute('aria-busy');
    btn.textContent = 'Promote to Master';
  }
}
</script>

{% endblock %}