modelgrid/ts_web/app.js

// ModelGrid UI — vanilla client. Bundled into ts_bundled/bundle.ts for
// the single-binary build, or served from disk in dev mode.

const VIEWS = [
  'overview',
  'cluster',
  'gpus',
  'deployments',
  'models',
  'access',
  'logs',
  'metrics',
  'settings',
];

const view = document.getElementById('view');
const nodeIdent = document.getElementById('node-ident');
const nodeVersion = document.getElementById('node-version');

function parseHash() {
  const raw = location.hash.replace(/^#\/?/, '');
  const [top = 'overview'] = raw.split('/').filter(Boolean);
  return VIEWS.includes(top) ? top : 'overview';
}

function setActive(current) {
  document.querySelectorAll('.nav-items a').forEach((el) => {
    el.classList.toggle('active', el.dataset.view === current);
  });
}

async function fetchHealth() {
  const res = await fetch('/_ui/overview', { headers: { accept: 'application/json' } });
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
  return res.json();
}

function statusDot(status) {
  const ok = status === 'ok';
  const warn = status === 'degraded';
  const cls = ok ? 'ok' : warn ? 'warn' : 'err';
  return `<span class="status-dot ${cls}"></span>`;
}

async function renderOverview() {
  view.innerHTML = `<h1>Overview</h1><div id="ovstate" class="placeholder">Loading…</div>`;
  try {
    const data = await fetchHealth();
    const health = data.health;
    const containers = health.containers || 0;
    const models = health.models || 0;
    const gpus = health.gpus || 0;
    const uptime = health.uptime || 0;
    const detailEntries = Object.entries(health.details?.containers || {});
    const runningContainers = detailEntries.filter(([, v]) => v === 'healthy').length;

    view.innerHTML = `
      <h1>Overview</h1>
      <div class="cards">
        <div class="card">
          <div class="card-label">Fleet</div>
          <div class="card-value">${statusDot(health.status)}${health.status}</div>
          <div class="card-sub">v${health.version} · up ${formatUptime(uptime)}</div>
        </div>
        <div class="card">
          <div class="card-label">Deployments</div>
          <div class="card-value">${runningContainers} / ${containers}</div>
          <div class="card-sub">${containers === 0 ? 'no deployments' : `${runningContainers} healthy`}</div>
        </div>
        <div class="card">
          <div class="card-label">GPUs</div>
          <div class="card-value">${gpus}</div>
          <div class="card-sub">${gpus === 0 ? 'no GPU detected' : 'detected'}</div>
        </div>
        <div class="card">
          <div class="card-label">Models</div>
          <div class="card-value">${models}</div>
          <div class="card-sub">served via OpenAI API</div>
        </div>
      </div>
      <h1 style="margin-top:24px">Deployments</h1>
      ${renderContainerTable(detailEntries)}
    `;
    if (data.node) {
      nodeIdent.textContent = `${data.node.name} · ${data.node.role}`;
      nodeVersion.textContent = `v${data.node.version}`;
    }
  } catch (err) {
    view.innerHTML = `<h1>Overview</h1><div class="error">Failed to load: ${escapeHtml(String(err.message || err))}</div>`;
  }
}

function renderContainerTable(entries) {
  if (entries.length === 0) {
    return `<div class="placeholder">No deployments configured. Add one with <code>modelgrid run &lt;model&gt;</code>.</div>`;
  }
  const rows = entries.map(([id, state]) => `
    <tr>
      <td>${escapeHtml(id)}</td>
      <td>${statusDot(state === 'healthy' ? 'ok' : 'err')}${escapeHtml(state)}</td>
    </tr>
  `).join('');
  return `<table><thead><tr><th>Container</th><th>Health</th></tr></thead><tbody>${rows}</tbody></table>`;
}

function renderPlaceholder(name) {
  view.innerHTML = `
    <h1>${name}</h1>
    <div class="placeholder">
      This view is part of the UI concept (see <code>readme.ui.md</code>) but is not implemented yet.
      Use the CLI for now: <code>modelgrid ${cliHint(name)}</code>.
    </div>
  `;
}

function cliHint(view) {
  const map = {
    Cluster: 'cluster status',
    GPUs: 'gpu list',
    Deployments: 'ps',
    Models: 'model list',
    Access: 'config apikey list',
    Logs: 'service logs',
    Metrics: 'service status',
    Settings: 'config show',
  };
  return map[view] || '--help';
}

function formatUptime(s) {
  if (s < 60) return `${s}s`;
  if (s < 3600) return `${Math.floor(s / 60)}m`;
  if (s < 86400) return `${Math.floor(s / 3600)}h`;
  return `${Math.floor(s / 86400)}d`;
}

function escapeHtml(s) {
  return s.replace(/[&<>"']/g, (c) => ({
    '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;',
  }[c]));
}

function route() {
  const current = parseHash();
  setActive(current);
  switch (current) {
    case 'overview':    return renderOverview();
    case 'cluster':     return renderPlaceholder('Cluster');
    case 'gpus':        return renderPlaceholder('GPUs');
    case 'deployments': return renderPlaceholder('Deployments');
    case 'models':      return renderPlaceholder('Models');
    case 'access':      return renderPlaceholder('Access');
    case 'logs':        return renderPlaceholder('Logs');
    case 'metrics':     return renderPlaceholder('Metrics');
    case 'settings':    return renderPlaceholder('Settings');
  }
}

window.addEventListener('hashchange', route);
if (!location.hash) location.hash = '#/overview';
route();