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 style="display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem;">
  <h2 style="margin:0;">{{ replica.name }}</h2>
  <div style="display:flex; gap:0.5rem; flex-wrap:wrap;">
    <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()">
      ⟳ 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="outline" style="margin-left:auto;" onclick="openPromoteDialog()">
      Promote to Master
    </button>
    {% endif %}
  </div>
</div>

<span id="conn-result" style="margin-left:0.5rem;"></span>

<div style="display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:1rem; margin: 1.5rem 0;">
  <article style="padding:1rem;">
    <header style="margin-bottom:0.25rem;"><small class="muted">URL</small></header>
    <code>{{ replica.url }}</code>
  </article>
  <article style="padding:1rem;">
    <header style="margin-bottom:0.25rem;"><small class="muted">Status</small></header>
    {% if replica.suspended_at %}
      <span class="badge badge-suspended">suspended</span>
      <br><small class="muted">{{ replica.consecutive_failures }} consecutive failures</small>
    {% elif replica.last_sync_ts %}
      <span class="badge badge-synced">synced</span>
    {% else %}
      <span class="badge badge-pending">pending</span>
    {% endif %}
  </article>
  <article style="padding:1rem;">
    <header style="margin-bottom:0.25rem;"><small class="muted">Last sync</small></header>
    {% if replica.last_sync_ts %}
      {{ replica.last_sync_ts.strftime('%Y-%m-%d %H:%M:%S') }} UTC
      <br><small class="muted">{{ lag }}</small>
    {% else %}
      <small class="muted">never</small>
    {% endif %}
  </article>
  <article style="padding:1rem;">
    <header style="margin-bottom:0.25rem;"><small class="muted">Interval</small></header>
    {% if replica.sync_interval_seconds %}{{ replica.sync_interval_seconds }}s{% else %}global{% endif %}
  </article>
</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>{{ run.id }}</td>
      <td>{{ run.started_at.strftime('%Y-%m-%d %H:%M:%S') if run.started_at else '—' }}</td>
      <td>
        {% 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 %}
          running…
        {% else %}—{% endif %}
      </td>
      <td>{{ 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 %}0{% 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>{{ entry.master_doc_id }}</td>
      <td>{{ entry.replica_doc_id or '—' }}</td>
      <td><span class="badge badge-{{ entry.status }}">{{ entry.status }}</span></td>
      <td>{{ entry.last_synced.strftime('%Y-%m-%d %H:%M') if entry.last_synced else '—' }}</td>
      <td>{{ entry.retry_count }}</td>
      <td><small>{{ 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 style="margin-top:2rem;">
  <summary>Danger Zone</summary>
  <div style="padding:1rem; border:1px solid var(--pico-del-color); border-radius:0.5rem; margin-top:0.5rem;">
    <p>Full resync wipes the sync map for this replica and re-syncs everything from scratch.</p>
    <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" style="margin-left:0.5rem;"></span>
  </div>
</details>

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

    <div id="promote-preflight-content" style="min-height:6rem;">
      <progress></progress>
      <p class="muted">Checking pre-flight conditions…</p>
    </div>

    <footer style="display:flex; justify-content:flex-end; gap:0.5rem; padding:0; margin-top:1.25rem;">
      <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">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:0.75rem 1rem; background:#fff5f5; border-radius:0.4rem; border-left:3px solid var(--pico-del-color);">';
    html += '<strong>' + (data.error || 'Cannot promote') + '</strong><br>';
    html += '<small>' + (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:0.75rem; margin-bottom:1rem;">';
  html += '<div style="padding:0.6rem 0.75rem; background:var(--pico-card-sectionning-background-color); border-radius:0.4rem; text-align:center;">';
  html += '<small class="muted">Master docs</small><br><strong>' + (data.master_doc_count ?? '?') + '</strong></div>';
  html += '<div style="padding:0.6rem 0.75rem; background:var(--pico-card-sectionning-background-color); border-radius:0.4rem; text-align:center;">';
  html += '<small class="muted">Replica docs</small><br><strong>' + (data.replica_doc_count ?? '?') + '</strong></div>';
  html += '<div style="padding:0.6rem 0.75rem; background:var(--pico-card-sectionning-background-color); border-radius:0.4rem; text-align:center;">';
  html += '<small class="muted">Mappings to rebuild</small><br><strong>' + data.ok_entries + '</strong></div>';
  html += '</div>';

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

  // Warnings with ack checkboxes
  if (data.pending_entries > 0) {
    html += '<label style="display:flex; gap:0.5rem; align-items:flex-start; margin-bottom:0.5rem; cursor:pointer;">';
    html += '<input type="checkbox" id="ack-pending" onchange="updateConfirmBtn()" style="margin-top:0.1rem; 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:0.5rem; align-items:flex-start; margin-bottom:0.5rem; cursor:pointer;">';
    html += '<input type="checkbox" id="ack-errors" onchange="updateConfirmBtn()" style="margin-top:0.1rem; 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:0.75rem 0 0; font-size:0.875em; color:var(--pico-muted-color);">The current master will be added as a new replica and will sync from <strong>' + 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';
      const content = document.getElementById('promote-preflight-content');
      content.innerHTML += '<p style="margin-top:0.75rem;"><span class="badge badge-error">Error</span> ' + detail + '</p>';
      btn.disabled = false;
      btn.removeAttribute('aria-busy');
      btn.textContent = 'Promote to Master';
    }
  } catch (err) {
    const content = document.getElementById('promote-preflight-content');
    content.innerHTML += '<p style="margin-top:0.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 %}