anonymous_github/public/partials/admin/overview.htm

<div class="container paper-page admin-page overview-page">
  <div class="paper-crumbs">Admin &middot; System Health</div>

  <div class="ov-header">
    <h1 class="paper-page-title">Overview</h1>
  </div>

  <nav class="admin-nav">
    <a href="/admin/" class="active"><svg class="ui-icon" aria-hidden="true"><use href="#ui-icon-chart"></use></svg> Overview</a>
    <a href="/admin/repositories"><svg class="ui-icon" aria-hidden="true"><use href="#project-type-repo"></use></svg> Repositories</a>
    <a href="/admin/users"><svg class="ui-icon" aria-hidden="true"><use href="#ui-icon-users"></use></svg> Users</a>
    <a href="/admin/conferences"><svg class="ui-icon" aria-hidden="true"><use href="#project-icon-conference"></use></svg> Conferences</a>
    <a href="/admin/queues"><svg class="ui-icon" aria-hidden="true"><use href="#ui-icon-list"></use></svg> Queues</a>
    <a href="/admin/errors"><svg class="ui-icon" aria-hidden="true"><use href="#ui-icon-bug"></use></svg> Errors</a>
  </nav>

  <div class="admin-empty" v-if="loading">Loading overview&hellip;</div>
  <div class="alert alert-danger" style="margin:12px 0" v-if="error"><svg class="ui-icon" aria-hidden="true"><use href="#ui-icon-warning"></use></svg> {{ error }}</div>

  <section class="ov-panel-card" style="margin:16px 0">
    <div class="ov-panel-head">
      <span class="ov-panel-title">Request performance</span>
      <select v-model.number="performanceMinutes" @change="loadPerformance()" aria-label="Performance time range">
        <option :value="15">Last 15 minutes</option><option :value="60">Last hour</option>
      </select>
    </div>
    <p v-if="performanceError" class="alert alert-warning">{{ performanceError }}</p>
    <p v-if="!performance &amp;&amp; !performanceError">Loading performance monitoring&hellip;</p>
    <div v-if="performance?.available">
      <p>Latency includes upstream waits and response transfer. Percentiles show histogram bucket upper bounds. Samples refresh every 30 seconds.</p>
      <div class="table-responsive">
        <table class="table table-sm">
          <thead><tr><th>Service</th><th>Route</th><th>Requests</th><th>Average</th><th>First byte p95</th><th>p95</th><th>p99</th><th>Interrupted</th><th>5xx</th><th>Slow</th></tr></thead>
          <tbody><tr v-for="row in performance.routes" :key="row.service + row.method + row.route">
            <td>{{ row.service }}</td><td>{{ row.method }} {{ row.route }}</td><td>{{ row.count }}</td><td>{{ row.avgMs }} ms</td>
            <td>{{ firstByteBound(row) }}</td><td>{{ latencyBound(row, 'p95UpperMs') }}</td><td>{{ latencyBound(row, 'p99UpperMs') }}</td>
            <td>{{ row.aborted }}</td><td>{{ row.errors }}</td><td>{{ row.slow }}</td>
          </tr></tbody>
        </table>
      </div>
      <p v-if="!performance.routes?.length">No recorded requests in this window yet.</p>
      <h3>API and streamer processes</h3>
      <p v-if="!performance.instances?.length" class="alert alert-warning">No recent process samples. Monitoring coverage is incomplete.</p>
      <div class="table-responsive">
        <table class="table table-sm">
          <thead><tr><th>Process</th><th>RSS / limit</th><th>Peak RSS in window</th><th>CPU</th><th>Event loop p95</th><th>Active requests</th><th>Sockets / CLOSE_WAIT</th><th>Workers / waiting</th><th>Sample age</th><th>Dropped batches / metrics</th></tr></thead>
          <tbody><tr v-for="sample in performance.instances" :key="sample.instance" :class="{'table-warning': performanceWarning(sample)}">
            <td>{{ sample.instance }}</td><td>{{ humanBytes(sample.memory.rss) }} / {{ humanBytes(sample.memoryLimitBytes) }}</td>
            <td>{{ humanBytes(peakRss(sample)) }}</td><td>{{ sample.cpuPercent.toFixed(1) }}%</td><td>{{ sample.eventLoop.p95Ms.toFixed(1) }} ms</td>
            <td>{{ sample.activeRequests }}</td><td>{{ sample.sockets?.descriptors ?? 'Unavailable' }} / {{ sample.sockets?.closeWait ?? 'Unavailable' }}</td>
            <td>{{ sample.workers?.running ?? 0 }} / {{ sample.workers?.waiting ?? 0 }}</td><td>{{ sampleAge(sample) }} s</td>
            <td>{{ sample.droppedBatches }} / {{ sample.droppedMetrics }}</td>
          </tr></tbody>
        </table>
      </div>
      <h3>Work stages and cache results</h3>
      <div class="table-responsive">
        <table class="table table-sm">
          <thead><tr><th>Service</th><th>Stage</th><th>Samples</th><th>Average</th><th>p95</th></tr></thead>
          <tbody><tr v-for="row in performance.stages.filter(row =&gt; row.metric !== 'first_byte')" :key="row.service + row.metric">
            <td>{{ row.service }}</td><td>{{ row.metric }}</td><td>{{ row.count }}</td><td>{{ row.avgMs }} ms</td><td>{{ latencyBound(row, 'p95UpperMs') }}</td>
          </tr></tbody>
        </table>
      </div>
    </div>
  </section>

  <div v-if="data">

    <!-- ── Top KPI row ──────────────────────────────────────────── -->
    <section class="ov-kpi-row">
      <div class="ov-kpi-card">
        <div class="ov-kpi-label">Repositories <span class="ov-dot ov-dot-ok"></span></div>
        <div class="ov-kpi-value">{{ humanNum(data?.repos?.total) }}</div>
        <div class="ov-kpi-sub">+{{ data?.repos?.newRepos24h }} &middot; last 24h</div>
      </div>
      <div class="ov-kpi-card">
        <div class="ov-kpi-label">CPU</div>
        <div class="ov-kpi-value" :class="{&#x27;ov-val-warn&#x27;: data?.system?.cpuPercent &gt; 80}">{{ data?.system?.cpuPercent }}%</div>
        <div class="ov-kpi-sub">{{ data?.system?.cpuCount }} cores &middot; load {{ data?.system?.loadAvg?.[0]?.toFixed(1) }}</div>
      </div>
      <div class="ov-kpi-card">
        <div class="ov-kpi-label">Memory</div>
        <div class="ov-kpi-value" :class="{&#x27;ov-val-warn&#x27;: data?.system?.memPercent &gt; 85}">{{ data?.system?.memPercent }}%</div>
        <div class="ov-kpi-sub">{{ humanBytes(data?.system?.memUsed) }} / {{ humanBytes(data?.system?.memTotal) }}</div>
      </div>
      <div class="ov-kpi-card">
        <div class="ov-kpi-label">Disk</div>
        <div class="ov-kpi-value" :class="{&#x27;ov-val-warn&#x27;: data?.system?.diskPercent &gt; 85}">{{ data?.system?.diskPercent }}%</div>
        <div class="ov-kpi-sub">{{ humanBytes(data?.system?.diskUsed) }} / {{ humanBytes(data?.system?.diskTotal) }} &middot; {{ data?.system?.diskMount }}</div>
      </div>
      <div class="ov-kpi-card">
        <div class="ov-kpi-label">Uptime</div>
        <div class="ov-kpi-value">{{ humanDuration(data?.system?.uptime) }}</div>
        <div class="ov-kpi-sub">{{ data?.system?.nodeVersion }} &middot; {{ data?.system?.platform }}</div>
      </div>
    </section>

    <!-- ── Daily activity highlights ───────────────────────────── -->
    <section class="ov-daily-row">
      <div class="ov-daily-card">
        <div class="ov-daily-label">New repos today</div>
        <div class="ov-daily-value">+{{ fmt?.number(data?.daily?.today?.repositories) }}</div>
        <div class="ov-daily-sub">since yesterday</div>
      </div>
      <div class="ov-daily-card">
        <div class="ov-daily-label">New users today</div>
        <div class="ov-daily-value">+{{ fmt?.number(data?.daily?.today?.users) }}</div>
        <div class="ov-daily-sub">{{ fmt?.number(data?.users?.total) }} total users</div>
      </div>
      <div class="ov-daily-card">
        <div class="ov-daily-label">Page views today</div>
        <div class="ov-daily-value">+{{ fmt?.number(data?.daily?.today?.pageViews) }}</div>
        <div class="ov-daily-sub">since yesterday</div>
      </div>
    </section>

    <!-- ── Daily charts ─────────────────────────────────────────── -->
    <section class="ov-chart-row">
      <div class="ov-chart-card">
        <div class="ov-chart-head">
          <span class="ov-chart-title">Daily page views &middot; 30d</span>
          <span class="ov-chart-legend"><span class="ov-dot-legend ov-dot-accent"></span>views/day</span>
        </div>
        <div class="ov-spark-bars" v-if="data?.history?.length">
          <div class="ov-spark-col has-tip" v-for="(d, index) in data?.history" :key="index" :data-tip="(historyLabel(d)) + &quot;: +&quot; + (fmt?.number(d?.dailyPageViews)) + &quot; views&quot;" :aria-label="(historyLabel(d)) + &quot;: +&quot; + (fmt?.number(d?.dailyPageViews)) + &quot; views&quot;">
            <span class="ov-spark-fill" :style="{height: historyBarH(d, &#x27;dailyPageViews&#x27;) + &#x27;px&#x27;}"></span>
          </div>
        </div>
        <div class="ov-spark-x" v-if="data?.history?.length">
          <span>{{ historyLabel(data?.history[0]) }}</span>
          <span>{{ historyLabel(data?.history[Math?.floor(data?.history?.length/2)]) }}</span>
          <span>{{ historyLabel(data?.history[data?.history?.length - 1]) }}</span>
        </div>
      </div>
      <div class="ov-chart-card">
        <div class="ov-chart-head">
          <span class="ov-chart-title">New repos &middot; 30d</span>
          <span class="ov-chart-legend"><span class="ov-dot-legend ov-dot-ok-fill"></span>repos/day</span>
        </div>
        <div class="ov-spark-bars" v-if="data?.history?.length">
          <div class="ov-spark-col has-tip" v-for="(d, index) in data?.history" :key="index" :data-tip="(historyLabel(d)) + &quot;: +&quot; + (fmt?.number(d?.dailyRepositories)) + &quot; repos&quot;" :aria-label="(historyLabel(d)) + &quot;: +&quot; + (fmt?.number(d?.dailyRepositories)) + &quot; repos&quot;">
            <span class="ov-spark-fill ov-spark-fill-alt" :style="{height: historyBarH(d, &#x27;dailyRepositories&#x27;) + &#x27;px&#x27;}"></span>
          </div>
        </div>
        <div class="ov-spark-x" v-if="data?.history?.length">
          <span>{{ historyLabel(data?.history[0]) }}</span>
          <span>{{ historyLabel(data?.history[Math?.floor(data?.history?.length/2)]) }}</span>
          <span>{{ historyLabel(data?.history[data?.history?.length - 1]) }}</span>
        </div>
      </div>
      <div class="ov-chart-card">
        <div class="ov-chart-head">
          <span class="ov-chart-title">Users &middot; 30d</span>
          <span class="ov-chart-legend"><span class="ov-dot-legend ov-dot-user-fill"></span>total users</span>
        </div>
        <div class="ov-spark-bars" v-if="data?.history?.length">
          <div class="ov-spark-col has-tip" v-for="(d, index) in data?.history" :key="index" :data-tip="(historyLabel(d)) + &quot;: &quot; + (fmt?.number(d?.nbUsers)) + &quot; users&quot;" :aria-label="(historyLabel(d)) + &quot;: &quot; + (fmt?.number(d?.nbUsers)) + &quot; users&quot;">
            <span class="ov-spark-fill ov-spark-fill-user" :style="{height: historyBarH(d, &#x27;nbUsers&#x27;) + &#x27;px&#x27;}"></span>
          </div>
        </div>
        <div class="ov-spark-x" v-if="data?.history?.length">
          <span>{{ historyLabel(data?.history[0]) }}</span>
          <span>{{ historyLabel(data?.history[Math?.floor(data?.history?.length/2)]) }}</span>
          <span>{{ historyLabel(data?.history[data?.history?.length - 1]) }}</span>
        </div>
      </div>
      <div class="ov-chart-card">
        <div class="ov-chart-head">
          <span class="ov-chart-title">New users &middot; 30d</span>
          <span class="ov-chart-legend"><span class="ov-dot-legend ov-dot-new-user-fill"></span>users/day</span>
        </div>
        <div class="ov-spark-bars" v-if="data?.history?.length">
          <div class="ov-spark-col has-tip" v-for="(d, index) in data?.history" :key="index" :data-tip="(historyLabel(d)) + &quot;: +&quot; + (fmt?.number(d?.dailyUsers)) + &quot; users&quot;" :aria-label="(historyLabel(d)) + &quot;: +&quot; + (fmt?.number(d?.dailyUsers)) + &quot; users&quot;">
            <span class="ov-spark-fill ov-spark-fill-new-user" :style="{height: historyBarH(d, &#x27;dailyUsers&#x27;) + &#x27;px&#x27;}"></span>
          </div>
        </div>
        <div class="ov-spark-x" v-if="data?.history?.length">
          <span>{{ historyLabel(data?.history[0]) }}</span>
          <span>{{ historyLabel(data?.history[Math?.floor(data?.history?.length/2)]) }}</span>
          <span>{{ historyLabel(data?.history[data?.history?.length - 1]) }}</span>
        </div>
      </div>
    </section>

    <!-- ── Three-panel row: Status / Errors / Queues ────────────── -->
    <section class="ov-triple-row">

      <!-- Repo status breakdown -->
      <div class="ov-panel-card">
        <div class="ov-panel-head">
          <span class="ov-panel-title">Repo status</span>
          <span class="ov-panel-meta">{{ fmt?.number(data?.repos?.total) }} total</span>
        </div>
        <div class="ov-stacked-bar">
          <span class="ov-bar-seg ov-bar-ready" title="Ready" :style="{width: barPct(&#x27;ready&#x27;) + &#x27;%&#x27;}"></span>
          <span class="ov-bar-seg ov-bar-preparing" title="Preparing" :style="{width: barPct(&#x27;preparing&#x27;) + &#x27;%&#x27;}"></span>
          <span class="ov-bar-seg ov-bar-error" title="Error" :style="{width: barPct(&#x27;error&#x27;) + &#x27;%&#x27;}"></span>
          <span class="ov-bar-seg ov-bar-expired" title="Expired" :style="{width: barPct(&#x27;expired&#x27;) + &#x27;%&#x27;}"></span>
          <span class="ov-bar-seg ov-bar-removed" title="Removed" :style="{width: barPct(&#x27;removed&#x27;) + &#x27;%&#x27;}"></span>
        </div>
        <div class="ov-bar-legend">
          <a href="/admin/repositories" class="ov-legend-item"><span class="ov-swatch ov-bar-ready"></span> ready <span class="ov-legend-n">{{ fmt?.number(statusCount('ready')) }}</span></a>
          <a href="/admin/repositories" class="ov-legend-item"><span class="ov-swatch ov-bar-preparing"></span> preparing <span class="ov-legend-n">{{ fmt?.number(statusCount('preparing') + statusCount('download')) }}</span></a>
          <a href="/admin/repositories" class="ov-legend-item"><span class="ov-swatch ov-bar-error"></span> error <span class="ov-legend-n">{{ fmt?.number(statusCount('error')) }}</span></a>
          <a href="/admin/repositories" class="ov-legend-item"><span class="ov-swatch ov-bar-expired"></span> expired <span class="ov-legend-n">{{ fmt?.number(statusCount('expired') + statusCount('expiring')) }}</span></a>
          <a href="/admin/repositories" class="ov-legend-item"><span class="ov-swatch ov-bar-removed"></span> removed <span class="ov-legend-n">{{ fmt?.number(statusCount('removed') + statusCount('removing')) }}</span></a>
        </div>
      </div>

      <!-- Error breakdown -->
      <div class="ov-panel-card">
        <div class="ov-panel-head">
          <span class="ov-panel-title">Errors &middot; 24h</span>
          <span class="ov-panel-meta">{{ data?.errors?.last24h }} total</span>
        </div>
        <div class="ov-error-bars">
          <div class="ov-ebar-row">
            <span class="ov-ebar-label">5xx</span>
            <span class="ov-ebar-track"><span class="ov-ebar-fill ov-ebar-error" :style="{width: errPct(&#x27;error&#x27;) + &#x27;%&#x27;}"></span></span>
            <span class="ov-ebar-n">{{ data?.errors?.severity?.error }}</span>
          </div>
          <div class="ov-ebar-row">
            <span class="ov-ebar-label">4xx</span>
            <span class="ov-ebar-track"><span class="ov-ebar-fill ov-ebar-warn" :style="{width: errPct(&#x27;warn&#x27;) + &#x27;%&#x27;}"></span></span>
            <span class="ov-ebar-n">{{ data?.errors?.severity?.warn }}</span>
          </div>
          <div class="ov-ebar-row">
            <span class="ov-ebar-label">Info</span>
            <span class="ov-ebar-track"><span class="ov-ebar-fill ov-ebar-info" :style="{width: errPct(&#x27;info&#x27;) + &#x27;%&#x27;}"></span></span>
            <span class="ov-ebar-n">{{ data?.errors?.severity?.info }}</span>
          </div>
        </div>
        <div class="ov-panel-foot" v-if="data?.repos?.recentErrors24h">
          <a href="/admin/errors">{{ data?.repos?.recentErrors24h }} repos in error state &rarr;</a>
        </div>
      </div>

      <!-- Top routes / queues -->
      <div class="ov-panel-card">
        <div class="ov-panel-head">
          <span class="ov-panel-title">Queues</span>
          <span class="ov-panel-meta">by state</span>
        </div>
        <div class="ov-routes-table">
          <div class="ov-route-row ov-route-head">
            <span class="ov-route-name">Queue</span>
            <span class="ov-route-n">Active</span>
            <span class="ov-route-n">Wait</span>
            <span class="ov-route-n ov-route-lat">Failed</span>
          </div>
          <a class="ov-route-row" href="/admin/queues">
            <span class="ov-route-name">download</span>
            <span class="ov-route-n">{{ data?.queues?.download?.active }}</span>
            <span class="ov-route-n">{{ data?.queues?.download?.waiting }}</span>
            <span class="ov-route-n ov-route-lat" :class="{&#x27;ov-n-bad&#x27;: data?.queues?.download?.failed &gt; 0}">{{ data?.queues?.download?.failed }}</span>
          </a>
          <a class="ov-route-row" href="/admin/queues">
            <span class="ov-route-name">remove</span>
            <span class="ov-route-n">{{ data?.queues?.remove?.active }}</span>
            <span class="ov-route-n">{{ data?.queues?.remove?.waiting }}</span>
            <span class="ov-route-n ov-route-lat" :class="{&#x27;ov-n-bad&#x27;: data?.queues?.remove?.failed &gt; 0}">{{ data?.queues?.remove?.failed }}</span>
          </a>
          <a class="ov-route-row" href="/admin/queues">
            <span class="ov-route-name">cache</span>
            <span class="ov-route-n">{{ data?.queues?.cache?.active }}</span>
            <span class="ov-route-n">{{ data?.queues?.cache?.waiting }}</span>
            <span class="ov-route-n ov-route-lat" :class="{&#x27;ov-n-bad&#x27;: data?.queues?.cache?.failed &gt; 0}">{{ data?.queues?.cache?.failed }}</span>
          </a>
        </div>
      </div>

    </section>

    <!-- ── Services bar ─────────────────────────────────────────── -->
    <section class="ov-services-card">
      <div class="ov-services-head">
        <span class="ov-panel-title">Services</span>
        <span class="ov-panel-meta">{{ fmt?.number(data?.users?.total) }} users &middot; {{ data?.conferences?.total }} conferences</span>
      </div>
      <div class="ov-services-grid">
        <div class="ov-svc">
          <span class="ov-svc-dot ov-dot-ok"></span>
          <div class="ov-svc-info">
            <span class="ov-svc-name">web</span>
            <span class="ov-svc-meta">{{ data?.system?.nodeVersion }}</span>
          </div>
          <span class="ov-svc-detail">uptime {{ humanDuration(data?.system?.uptime) }}</span>
        </div>
        <div class="ov-svc">
          <span class="ov-svc-dot" :class="queueTotal(data?.queues?.download) &gt; 0 ? &#x27;ov-dot-ok&#x27; : &#x27;ov-dot-idle&#x27;"></span>
          <div class="ov-svc-info">
            <span class="ov-svc-name">download</span>
            <span class="ov-svc-meta" v-if="queueTotal(data?.queues?.download)">{{ queueTotal(data?.queues?.download) }} jobs</span>
            <span class="ov-svc-meta" v-if="!queueTotal(data?.queues?.download)">idle</span>
          </div>
        </div>
        <div class="ov-svc">
          <span class="ov-svc-dot" :class="queueTotal(data?.queues?.cache) &gt; 0 ? &#x27;ov-dot-ok&#x27; : &#x27;ov-dot-idle&#x27;"></span>
          <div class="ov-svc-info">
            <span class="ov-svc-name">cache</span>
            <span class="ov-svc-meta" v-if="queueTotal(data?.queues?.cache)">{{ queueTotal(data?.queues?.cache) }} jobs</span>
            <span class="ov-svc-meta" v-if="!queueTotal(data?.queues?.cache)">idle</span>
          </div>
        </div>
        <div class="ov-svc">
          <span class="ov-svc-dot" :class="queueTotal(data?.queues?.remove) &gt; 0 ? &#x27;ov-dot-ok&#x27; : &#x27;ov-dot-idle&#x27;"></span>
          <div class="ov-svc-info">
            <span class="ov-svc-name">remove</span>
            <span class="ov-svc-meta" v-if="queueTotal(data?.queues?.remove)">{{ queueTotal(data?.queues?.remove) }} jobs</span>
            <span class="ov-svc-meta" v-if="!queueTotal(data?.queues?.remove)">idle</span>
          </div>
        </div>
        <div class="ov-svc">
          <span class="ov-svc-dot" :class="data?.repos?.recentErrors24h &gt; 10 ? &#x27;ov-dot-warn&#x27; : &#x27;ov-dot-ok&#x27;"></span>
          <div class="ov-svc-info">
            <span class="ov-svc-name">errors</span>
            <span class="ov-svc-meta">{{ data?.errors?.last24h }} / 24h</span>
          </div>
        </div>
      </div>
    </section>

  </div>
</div>