terdut-server/internal/web/static/js/app.js

// Entry point: session, routing, badges and keyboard.

import * as api from './api.js';
import * as ui from './ui.js';
import * as poll from './poll.js';
import { state, reset, loadTeams } from './state.js';
import * as queue from './queue.js';
import * as incident from './incident.js';
import * as oncall from './oncall.js';
import * as alerts from './alerts.js';
import * as account from './account.js';
import * as admin from './admin.js';

const $ = (id) => document.getElementById(id);

// One route per section; /incidents/{id} is the queue with a detail open.
const SECTIONS = {
  queue: { title: 'Queue', view: queue },
  oncall: { title: 'On-call', view: oncall },
  alerts: { title: 'Alerts', view: alerts },
  admin: { title: 'Admin', view: admin },
  more: { title: 'Account', view: account },
};

function parseRoute(pathname) {
  const m = pathname.match(/^\/incidents\/(\d+)\/?$/);
  if (m) return { section: 'queue', incident: Number(m[1]) };
  const name = pathname.replace(/^\/|\/$/g, '');
  if (name === 'oncall' || name === 'alerts' || name === 'admin' || name === 'more') return { section: name };
  return { section: 'queue', incident: null };
}

let route = parseRoute(location.pathname);
// How many in-app navigations deep we are, so Back can use the browser's
// history when there is somewhere to go back to, and the queue otherwise.
let depth = 0;
let listScroll = 0;

export function navigate(path, { replace = false } = {}) {
  if (path === location.pathname + location.search) return;
  if (replace) {
    history.replaceState({ depth }, '', path);
  } else {
    depth += 1;
    history.pushState({ depth }, '', path);
  }
  render();
}

export function back() {
  if (depth > 0) history.back();
  else navigate('/', { replace: true });
}

window.addEventListener('popstate', (e) => {
  depth = (e.state && e.state.depth) || 0;
  render();
});

function render() {
  const prev = route;
  route = parseRoute(location.pathname);
  const app = $('app');

  for (const [name, s] of Object.entries(SECTIONS)) {
    const el = $(`view-${name}`);
    el.hidden = name !== route.section;
    if (name === route.section) $('topbar-title').textContent = s.title;
  }
  for (const link of document.querySelectorAll('.nav-link')) {
    if (link.dataset.section === route.section) link.setAttribute('aria-current', 'page');
    else link.removeAttribute('aria-current');
  }

  const detailOpen = route.section === 'queue' && route.incident != null;
  const wasOpen = prev.section === 'queue' && prev.incident != null;
  if (detailOpen && !wasOpen) listScroll = window.scrollY;
  app.classList.toggle('detail-open', detailOpen);
  $('view-queue').classList.toggle('has-detail', detailOpen);

  if (route.section === 'queue') {
    queue.show(route.incident);
    incident.show(route.incident);
  } else {
    incident.show(null);
    SECTIONS[route.section].view.show();
  }

  if (detailOpen && !wasOpen) window.scrollTo(0, 0);
  else if (!detailOpen && wasOpen) requestAnimationFrame(() => window.scrollTo(0, listScroll));
  else if (prev.section !== route.section) window.scrollTo(0, 0);

  updateTitle();
}

// ---------- refresh + badges ----------

async function refresh() {
  state.open = await api.incidents({ sort: 'severity' });
  updateBadges();
  const jobs = [];
  if (route.section === 'queue') {
    jobs.push(queue.refresh());
    if (route.incident != null) jobs.push(incident.refresh());
  } else {
    const v = SECTIONS[route.section].view;
    if (v.refresh) jobs.push(v.refresh());
  }
  await Promise.allSettled(jobs);
}

function updateBadges() {
  const open = state.open.length;
  const triggered = state.open.filter((i) => i.status === 'triggered').length;

  const pill = $('open-pill');
  pill.hidden = false;
  pill.textContent = open ? `${open} open` : 'All clear';
  pill.classList.toggle('has-triggered', triggered > 0);
  pill.classList.toggle('all-acked', open > 0 && triggered === 0);

  const badge = document.querySelector('[data-badge]');
  badge.hidden = triggered === 0;
  badge.textContent = String(triggered);
  updateTitle();
}

function updateTitle() {
  const triggered = state.open.filter((i) => i.status === 'triggered').length;
  const section = SECTIONS[route.section].title;
  const base = route.section === 'queue' && route.incident == null ? 'terdut' : `${section} · terdut`;
  document.title = triggered ? `(${triggered}) ${base}` : base;
}

// ---------- session ----------

async function boot() {
  ui.initSheet();
  api.setUnauthorizedHandler(showLogin);
  document.addEventListener('click', interceptLinks);
  document.addEventListener('keydown', onKey);
  $('login-form').addEventListener('submit', onLogin);

  try {
    state.me = await api.me();
    await loadTeams();
    // The Admin tab exists only for an administrator. Somebody who types /admin
    // anyway gets the view's own "ask an administrator" card, not a blank page.
    $('nav-admin').hidden = !state.me?.user?.is_admin;
    showApp();
  } catch (err) {
    if (err.status === 401) showLogin();
    else showBootError(err);
  }
}

function showBootError(err) {
  ui.clear($('boot'), ui.emptyState('Cannot load terdut', err.message));
  $('boot').append(ui.h('button', { class: 'btn', onclick: () => location.reload(), text: 'Retry' }));
}

function showLogin() {
  poll.stop();
  ui.closeSheet(null);
  reset();
  $('boot').hidden = true;
  $('app').hidden = true;
  $('login').hidden = false;
  const form = $('login-form');
  form.querySelector('.form-error').hidden = true;
  form.password.value = '';
  (form.username.value ? form.password : form.username).focus();
}

async function onLogin(e) {
  e.preventDefault();
  const form = e.currentTarget;
  const err = form.querySelector('.form-error');
  const btn = form.querySelector('button[type=submit]');
  err.hidden = true;
  btn.disabled = true;
  try {
    state.me = await api.login(form.username.value.trim(), form.password.value);
    form.password.value = '';
    showApp();
  } catch (ex) {
    err.textContent = ex.message;
    err.hidden = false;
  } finally {
    btn.disabled = false;
  }
}

export async function signOut() {
  try {
    await api.logout();
  } catch {
    /* the cookie is cleared server-side or already gone */
  }
  showLogin();
}

function showApp() {
  $('boot').hidden = true;
  $('login').hidden = true;
  $('app').hidden = false;
  render();
  poll.start(refresh);
  poll.now();
}

// ---------- links + keys ----------

function interceptLinks(e) {
  if (e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
  const a = e.target.closest('a[href]');
  if (!a || a.target || a.origin !== location.origin || a.pathname.startsWith('/api/')) return;
  e.preventDefault();
  navigate(a.pathname + a.search);
}

function onKey(e) {
  if (e.metaKey || e.ctrlKey || e.altKey || ui.sheetIsOpen() || $('app').hidden) return;
  const tag = e.target.tagName;
  if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') return;

  if (e.key === 'r') {
    poll.now();
    e.preventDefault();
    return;
  }
  if (route.section !== 'queue') return;
  if (route.incident != null && incident.key(e)) {
    e.preventDefault();
    return;
  }
  if (queue.key(e)) e.preventDefault();
}

boot();