Api-Gateway/app/templates/requests.html

{% extends "base.html" %}
{% block title %}Requests · API Gateway{% endblock %}
{% block content %}
<h1>Requests</h1>

<div class="req-split">
<div class="card">
  <form method="get" action="/admin/requests" class="row" id="filter-form">
    <select name="service_id" style="max-width:160px">
      <option value="">All services</option>
      {% for s in services %}<option value="{{ s.id }}" {% if f.service_id == s.id %}selected{% endif %}>{{ s.name }}</option>{% endfor %}
    </select>
    <select name="user_id" style="max-width:140px">
      <option value="">All users</option>
      {% for u in users %}<option value="{{ u.id }}" {% if f.user_id == u.id %}selected{% endif %}>{{ u.username }}</option>{% endfor %}
    </select>
    <select name="key_id" style="max-width:150px">
      <option value="">All keys</option>
      {% for k in keys %}<option value="{{ k.id }}" {% if f.key_id == k.id %}selected{% endif %}>{{ k.name }}</option>{% endfor %}
    </select>
    <select name="status_class" style="max-width:120px">
      <option value="">All statuses</option>
      {% for c in ['2', '3', '4', '5'] %}
      <option value="{{ c }}" {% if f.status_class == c %}selected{% endif %}>{{ c }}xx</option>
      {% endfor %}
    </select>
    <input type="text" name="q" value="{{ f.q }}" placeholder="Path contains…" style="max-width:200px">
    <span class="right hint">{{ total }} request{{ '' if total == 1 else 's' }}</span>
  </form>
</div>

<div class="card req-list">
  <div class="table-scroll">
  <table id="req-table">
    <thead><tr><th>Time (UTC)</th><th>Service</th><th>Key</th><th>Request</th><th>Status</th><th>Latency</th></tr></thead>
    <tbody>
      {% for log in logs %}
      <tr class="req-row" data-id="{{ log.id }}" tabindex="0" role="button"
          aria-label="Inspect request {{ log.id }}">
        <td>{{ log.timestamp.strftime("%Y-%m-%d %H:%M:%S") }}</td>
        <td class="strong">{{ log.service.name if log.service else "–" }}</td>
        <td>{{ log.api_key.name if log.api_key else "–" }}</td>
        <td>{{ log.method }} {{ log.path[:60] }}{% if log.query_string %}?{{ log.query_string[:30] }}{% endif %}</td>
        <td class="status-{{ log.status_code // 100 }}xx">{{ log.status_code }}</td>
        <td>{{ "%.1f" | format(log.latency_ms) }} ms</td>
      </tr>
      {% else %}
      <tr><td colspan="6">No requests match these filters.</td></tr>
      {% endfor %}
    </tbody>
  </table>
  </div>

  {% if pages > 1 %}
  {% set base = '/admin/requests?service_id=' ~ (f.service_id or '') ~ '&user_id=' ~ (f.user_id or '') ~ '&key_id=' ~ (f.key_id or '') ~ '&status_class=' ~ f.status_class ~ '&q=' ~ f.q %}
  <div class="row" style="margin-top:12px">
    {% if page > 1 %}<a class="btn ghost" href="{{ base }}&page={{ page - 1 }}" style="padding:5px 10px">← Newer</a>{% endif %}
    <span class="hint">Page {{ page }} of {{ pages }}</span>
    {% if page < pages %}<a class="btn ghost" href="{{ base }}&page={{ page + 1 }}" style="padding:5px 10px">Older →</a>{% endif %}
  </div>
  {% endif %}
</div>

<div class="card" id="inspector" hidden>
  <div class="row" style="margin-bottom:12px">
    <h2 style="margin:0">Request <span id="i-id"></span></h2>
    <span id="i-status" class="badge"></span>
    <span class="hint" id="i-latency"></span>
    <span class="hint" id="i-time"></span>
    <button type="button" class="icon right" id="i-close" title="Close inspector" aria-label="Close inspector">
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
    </button>
  </div>
  <div class="inspector-body">
  <table style="margin-bottom:16px">
    <tbody>
      <tr><td class="strong" style="width:160px">Gateway request</td><td><code id="i-gwreq"></code></td></tr>
      <tr><td class="strong">Forwarded to</td><td><code id="i-fwd"></code></td></tr>
      <tr><td class="strong">Service</td><td id="i-service"></td></tr>
      <tr><td class="strong">Matched endpoint</td><td id="i-endpoint"></td></tr>
      <tr><td class="strong">API key</td><td id="i-key"></td></tr>
      <tr><td class="strong">User</td><td id="i-user"></td></tr>
      <tr><td class="strong">Client IP</td><td id="i-ip"></td></tr>
    </tbody>
  </table>
  <div class="grid cols-2">
    <div>
      <h2>Request payload</h2>
      <pre id="i-reqbody"></pre>
    </div>
    <div>
      <h2>Response payload</h2>
      <pre id="i-resbody"></pre>
    </div>
  </div>
  </div>
</div>
</div>
{% endblock %}

{% block scripts %}
<script>
const inspector = document.getElementById('inspector');
const $ = id => document.getElementById(id);

async function inspect(id) {
  const r = await fetch(`/admin/requests/${id}/data`);
  if (!r.ok) return;
  const d = await r.json();

  $('i-id').textContent = '#' + d.id;
  $('i-status').textContent = d.status;
  $('i-status').className = `badge status-${Math.floor(d.status / 100)}xx`;
  $('i-latency').textContent = d.latency_ms + ' ms';
  $('i-time').textContent = d.time + ' UTC';
  const qs = d.query_string ? '?' + d.query_string : '';
  $('i-gwreq').textContent = `${d.method} /${d.slug ?? '?'}${d.path}${qs}`;
  $('i-fwd').textContent = d.forwarded_to ?? '–';
  $('i-service').textContent = d.service ?? '–';
  $('i-endpoint').textContent = d.endpoint
    ? d.endpoint + (d.endpoint_description ? ' — ' + d.endpoint_description : '') : '–';
  $('i-key').textContent = d.key ? `${d.key} (${d.key_prefix}…)` : '–';
  $('i-user').textContent = d.user ?? '–';
  $('i-ip').textContent = d.client_ip || '–';
  $('i-reqbody').textContent = d.request_body || 'No request body.';
  $('i-resbody').textContent = d.response_body || 'No response body captured.';

  document.querySelectorAll('.req-row').forEach(row =>
    row.classList.toggle('selected', +row.dataset.id === d.id));
  inspector.hidden = false;
  inspector.querySelector('.inspector-body').scrollTop = 0;

  const url = new URL(location);
  url.searchParams.set('inspect', d.id);
  history.replaceState(null, '', url);
}

document.querySelectorAll('.req-row').forEach(row => {
  row.addEventListener('click', () => inspect(+row.dataset.id));
  row.addEventListener('keydown', e => {
    if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); inspect(+row.dataset.id); }
  });
});

document.getElementById('i-close').addEventListener('click', () => {
  inspector.hidden = true;
  document.querySelectorAll('.req-row.selected').forEach(r => r.classList.remove('selected'));
  const url = new URL(location);
  url.searchParams.delete('inspect');
  history.replaceState(null, '', url);
});

const preselected = new URLSearchParams(location.search).get('inspect');
if (preselected) inspect(+preselected);

// Filters apply immediately; empty fields are omitted from the URL.
const filterForm = document.getElementById('filter-form');
function applyFilters() {
  const p = new URLSearchParams();
  for (const el of filterForm.elements) {
    if (el.name && el.value) p.set(el.name, el.value);
  }
  location.href = '/admin/requests' + (p.size ? '?' + p.toString() : '');
}
filterForm.addEventListener('submit', e => { e.preventDefault(); applyFilters(); });
filterForm.querySelectorAll('select').forEach(s => s.addEventListener('change', applyFilters));
let debounce;
filterForm.querySelector('input[name=q]').addEventListener('input', () => {
  clearTimeout(debounce);
  debounce = setTimeout(applyFilters, 500);
});
</script>
{% endblock %}