Add GitLab CI Runner Status Page

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rebenchdb",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "description": "A Web-Based Database for ReBench Results",
   "main": "index.js",
   "author": {
@@ -19,12 +19,14 @@
     "chartjs-plugin-annotation": "3.1.0",
     "decimal.js": "10.6.0",
     "ejs": "6.0.1",
+    "graphql": "16.14.2",
+    "graphql-request": "7.4.0",
     "join-images": "1.1.5",
     "koa": "3.2.1",
     "koa-body": "8.0.0",
     "pg": "8.21.0",
     "promisify-child-process": "5.0.1",
-    "sharp": "0.35.1",
+    "sharp": "0.35.2",
     "tslog": "4.10.2",
     "uplot": "1.6.32"
   },
@@ -54,6 +56,7 @@
     "eslint-plugin-prettier": "5.5.6",
     "globals": "17.6.0",
     "jest": "30.4.2",
+    "nock": "14.0.15",
     "nodemon": "3.1.14",
     "patch-package": "8.0.1",
     "pixelmatch": "7.2.0",

resources/gitlab-runner.css

@@ -0,0 +1,242 @@
+:root {
+  --bg: #ffffff;
+  --surface: #f8fafc;
+  --surface2: #eef2f7;
+  --border: #d0d7de;
+  --text: #1f2328;
+  --text-dim: #59636e;
+  --accent: #0969da;
+  --green: #2da44e;
+  --red: #cf222e;
+  --orange: #bf8700;
+  --muted-gray: #8b949e;
+}
+
+[data-bs-theme="dark"] {
+  --bg: #0d1117;
+  --surface: #161b22;
+  --surface2: #21262d;
+  --border: #30363d;
+  --text: #e6edf3;
+  --text-dim: #8b949e;
+  --accent: #58a6ff;
+}
+
+.status-all-jobs, .status-running { color: var(--accent); }
+.status-pending { color: var(--orange); }
+.status-created { color: var(--muted-gray); }
+.status-success { color: var(--green); }
+.status-failed { color: var(--red); }
+.status-skipped, .status-canceled { color: var(--text-dim); }
+.status-online { color: var(--green); }
+.status-offline { color: var(--red); }
+.status-paused { color: var(--orange); }
+
+.job-status-running { color: var(--accent); }
+.job-status-success { color: var(--green); }
+.job-status-failed { color: var(--red); }
+.job-status-pending { color: var(--orange); }
+.job-status-canceled { color: var(--muted-gray); }
+
+.badge-created { background-color: var(--muted-gray); }
+.badge-running { background-color: var(--accent); }
+.badge-failed { background-color: var(--red); }
+.badge-pending { background-color: var(--orange); }
+.badge-canceled { background-color: var(--muted-gray); }
+.badge-success { background-color: var(--green); }
+.badge-online { background-color: var(--green); }
+.badge-offline { background-color: var(--red); }
+.badge-stale { background-color: var(--muted-gray); }
+.badge-never_contacted { background-color: var(--muted-gray); }
+.badge-skipped { background-color: var(--muted-gray); }
+.badge-paused { background-color: var(--orange); }
+
+@media (min-width: 1200px) {
+  main {
+    max-width: 100% !important;
+  }
+}
+
+.no-tag { color:var(--text-dim); }
+
+.summary {
+    display: flex; gap: 8px; margin: 0; flex-wrap: wrap;
+}
+.summary-card {
+    background-color: var(--surface2);
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    padding: 8px 12px;
+    min-width: 108px;
+    text-align: center;
+}
+.summary-card .number {
+    font-size: 1.15rem; font-weight: 700;
+}
+.summary-card .label {
+    font-size: 0.68rem; color: var(--text-dim); text-transform: uppercase;
+    letter-spacing: 0.05em;
+}
+.job-summary-bar {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin-bottom: 16px;
+    padding: 10px;
+    background-color: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 10px;
+}
+.status-drawer {
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 12px 12px 0 0;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
+    z-index: 100;
+    overflow: hidden;
+}
+.status-drawer > summary {
+    list-style: none;
+    cursor: pointer;
+    padding: 10px 12px;
+    user-select: none;
+    display: flex;
+    align-items: center;
+}
+.status-drawer > summary::-webkit-details-marker {
+    display: none;
+}
+.status-drawer > summary::after {
+    content: "▴";
+    margin-left: auto;
+    font-size: 1rem;
+    font-weight: 700;
+    line-height: 1;
+    color: var(--text-dim);
+}
+.status-drawer[open] > summary::after {
+    content: "▾";
+}
+.status-drawer-content {
+    border-top: 1px solid var(--border);
+    padding: 12px;
+    max-height: 55vh;
+    overflow: auto;
+}
+.status-drawer-content h2 {
+    font-size: 1rem;
+    margin-bottom: 10px;
+    padding-bottom: 8px;
+    border-bottom: 1px solid var(--border);
+}
+table {
+    width: 100%; border-collapse: collapse;
+    background-color: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    overflow: hidden;
+    font-size: 0.88rem;
+}
+th, td {
+    padding: 10px 14px; text-align: left;
+    border-bottom: 1px solid var(--border);
+}
+th {
+    background-color: var(--surface2);
+    font-weight: 600;
+    font-size: 0.8rem;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    color: var(--text-dim);
+}
+tr:last-child td { border-bottom: none; }
+tr:hover td { background-color: var(--surface2); }
+.badge {
+    display: inline-block;
+    padding: 2px 10px;
+    border-radius: 12px;
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: #fff;
+    text-transform: uppercase;
+    min-width: 8em;
+}
+.tag {
+    white-space: nowrap;
+    background-color: var(--surface2);
+    border: 1px solid var(--border);
+    padding: 1px 8px;
+    border-radius: 4px;
+    font-size: 0.75rem;
+    color: var(--text-dim);
+}
+.job-card {
+    background-color: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    padding: 16px;
+    margin-bottom: 12px;
+}
+.job-card h3 {
+    font-size: 1rem; margin-bottom: 8px;
+}
+.job-grid {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 2px;
+    margin: 8px -16px -16px;
+}
+.job-line {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    min-width: 0;
+    padding: 5px 16px;
+    border-radius: 0;
+    background: transparent;
+    font-size: 0.86rem;
+}
+.job-line:hover {
+    background: color-mix(in srgb, var(--surface2) 60%, transparent);
+}
+.job-grid > .job-line:nth-child(odd) {
+    background: color-mix(in srgb, var(--surface2) 100%, transparent);
+}
+.job-grid > .job-line:nth-child(even) {
+    background: transparent;
+}
+.job-line-name {
+    min-width: 0;
+    white-space: nowrap;
+    overflow: scroll;
+    font-weight: 600;
+}
+.job-line-meta {
+    min-width: 0;
+    white-space: nowrap;
+    overflow: scroll;
+    color: var(--text-dim);
+    font-size: 0.8rem;
+}
+.runner-label {
+    font-size: 0.8rem;
+    color: var(--text-dim);
+    margin-bottom: 8px;
+}
+.empty-state {
+    text-align: center;
+    padding: 48px 24px;
+    color: var(--text-dim);
+    font-size: 1.1rem;
+}
+@media (max-width: 768px) {
+    body { padding: 12px; padding-bottom: 120px; }
+    .job-grid { grid-template-columns: 1fr; }
+    table { font-size: 0.8rem; }
+    th, td { padding: 6px 8px; }
+    .status-drawer-content { max-height: 62vh; }
+}

src/backend/gitlab/graphql-api.ts

@@ -0,0 +1,103 @@
+interface LifecycleDates {
+  createdAt: string;
+  startedAt?: string;
+  finishedAt?: string;
+}
+
+interface Commit {
+  sha?: string;
+  message?: string;
+  authorEmail?: string;
+  authorName?: string;
+}
+
+interface User {
+  name?: string;
+  username?: string;
+}
+
+interface PageInfo {
+  hasNextPage: boolean;
+  endCursor: string;
+}
+
+export interface Job extends LifecycleDates {
+  id: string;
+  name?: string;
+  status: string;
+  queuedDuration?: string | number;
+  stage?: {
+    name?: string;
+  };
+  tags?: string[];
+  runner?: {
+    id?: string;
+  };
+  webPath?: string;
+
+  /* link to pipeline will be set when processing the data. */
+  pipeline?: Pipeline;
+}
+
+export interface Pipeline extends LifecycleDates {
+  /** id in the format of `gid://gitlab/Ci::Pipeline/10853` */
+  id: string;
+  /** Internal ID within the response. */
+  iid?: string;
+  commit?: Commit;
+  status?: string;
+  ref?: string;
+  user?: User;
+  jobs: { nodes: Job[] };
+
+  /* link to project will be set when processing the data. */
+  project?: Project;
+  hasActiveJobs?: boolean;
+
+  /** extracted numeric id from `id` */
+  pipelineId?: number;
+}
+
+export interface Project {
+  name?: string;
+  fullPath?: string;
+  webUrl?: string;
+  pipelines: {
+    nodes: Pipeline[];
+    pageInfo?: PageInfo;
+  };
+}
+
+export interface ProjectsResponse {
+  group: {
+    projects: {
+      pageInfo: PageInfo;
+      nodes: Project[];
+    };
+  } | null;
+}
+
+export interface RunnersResponse {
+  group: {
+    runners: {
+      pageInfo: PageInfo;
+      nodes: Runner[];
+    };
+  } | null;
+}
+
+export interface Runner {
+  id: string;
+  description: string;
+  active: boolean;
+  paused: boolean;
+  status: string;
+  tagList: string[];
+  architectureName: string;
+  platformName: string;
+  version: string;
+  revision: string;
+  contactedAt: string;
+  maximumTimeout: number | null;
+  accessLevel: string;
+}