gitlab-radiator 5.1.0 → 5.2.0

package/.github/copilot-instructions.md

@@ -0,0 +1,55 @@
+This repository is a small Node.js + React radiator that fetches CI pipelines from GitLab and serves a live dashboard.
+
+Purpose for an AI coding agent
+- Help maintain and extend the server-side polling & GitLab API logic in `src/gitlab/*`.
+- Help evolve the client UI in `src/client/*` while preserving the Socket.IO state contract.
+- Be conservative: prefer minimal, focused changes that keep the current runtime behavior and configuration semantics.
+
+Big picture
+- The server (`src/app.js`) loads a YAML config (`~/.gitlab-radiator.yml` or `GITLAB_RADIATOR_CONFIG`) and repeatedly calls `update(config)` from `src/gitlab/index.js` to produce a `globalState` object.
+- The server emits `state` via Socket.IO to clients. The client entry is `src/client/index.tsx` which listens for the `state` event and renders via React components such as `groupedProjects.tsx`.
+- GitLab API interactions are implemented under `src/gitlab` (`client.js`, `projects.js`, `pipelines.js`, `runners.js`). `client.js` uses axios with a cached client per GitLab URL and passes `ca` into the https.Agent when configured.
+
+Key files (examples)
+- Server start / main loop: `src/app.js` (socket gating, `runUpdate()`, error handling)
+- Config loading & normalization: `src/config.js` (YAML file loading, env overrides, interval/port normalization)
+- GitLab API client: `src/gitlab/client.js` (lazy client cache, `gitlabRequest()`)
+- GitLab update orchestration: `src/gitlab/index.js` (fetch projects + pipelines, filtering)
+- Frontend entry and Socket.IO usage: `src/client/index.tsx` (listens to `state` and applies `argumentsFromDocumentUrl()`)
+- CLI / installable binary: `bin/gitlab-radiator.js` (installed via npm `bin` in `package.json`)
+
+Build / run / test commands (exact)
+- Use `nvm use` always first to select correct Node.js version as per `.nvmrc`.
+- Start server in dev/prod: `npm start` (runs `node src/app.js`).
+- Build distribution: `npm run build` (invokes `./build-npm` wrapper in the repo root).
+- Lint and auto-fix: `npm run eslint`.
+- Typecheck: `npm run typecheck`.
+- Run tests: `npm test` (Mocha, timeout 20s). Tests live under `test/*.js`.
+- When talking to an on-prem GitLab with self-signed certs, either set `gitlabs[].caFile` in config or run: `NODE_TLS_REJECT_UNAUTHORIZED=0 gitlab-radiator`.
+
+Project conventions and patterns
+- ESM modules: `package.json` has `"type": "module"` — use `import`/`export` style and avoid CommonJS `require` unless very deliberate.
+- All code is in TypeScript (`.ts`/`.tsx`), but runtime type checks are not enforced; treat types as documentation and IDE assistance. No need to transpile or use ts-node for backend code.
+- Config-first: almost all behavior is driven by `~/.gitlab-radiator.yml`. `src/config.ts` maps YAML values to normalized runtime values (note: `interval` is converted to milliseconds).
+- Socket contract is stable: server emits `state` (object with `projects`, `now`, `error`, `zoom`, `columns`, `projectsOrder`, `horizontal`, `groupSuccessfulProjects`); the client expects that shape. Changing the contract requires coordinated server+client changes.
+- GitLab clients are cached by URL in `src/gitlab/client.ts`; create clients via `lazyClient(gitlab)` to reuse keep-alive connections.
+- CA handling: `config.gitlabs[].caFile` is read in `src/config.ts` and passed as `ca` to axios `https.Agent` in `client.js`.
+
+Safe edit guidance for agents
+- Small, isolated changes preferred. When changing data shapes emitted as `state`, update `src/client/*` in the same PR to keep runtime compatibility.
+- Preserve environment-driven behavior: `GITLAB_ACCESS_TOKEN`, `GITLAB_RADIATOR_CONFIG`, and `NODE_TLS_REJECT_UNAUTHORIZED` are intentionally supported; prefer config changes over hardcoding tokens.
+- When adding new dependencies, ensure they are added to `package.json` and usage fits ESM. Use exact versions as per existing dependencies.
+- Keep `package.json` sorted alphabetically in `dependencies` and `devDependencies`.
+- Follow existing style: minimal new inline comments, keep utility functions small, and do not rework CI/test harnesses unless requested.
+
+Debugging notes
+- To reproduce the runtime locally, create a `~/.gitlab-radiator.yml` with at least one `gitlabs` entry with `url` and `access-token` (or set `GITLAB_ACCESS_TOKEN`).
+- Logs and errors are printed on the server console; network timeouts are 30s in `src/gitlab/client.ts`.
+- Dev mode: `src/dev-assets.ts` is loaded when `NODE_ENV !== 'production'` and `./src/dev-assets.ts` exists — use it to bind webpack dev middleware for frontend HMR.
+
+When to ask for human guidance
+- Any change that modifies the `state` emitted to clients, the YAML config schema, or the HTTP endpoints should be flagged for review.
+- Changes touching authentication flows or handling of GitLab tokens/CA files should be reviewed for security implications.
+
+References
+- See `src/app.ts`, `src/config.ts`, `src/gitlab/*`, and `src/client/*` as primary examples of the runtime and data flow.

package/.github/workflows/test.yml

@@ -0,0 +1,22 @@
+name: Run tests
+
+on: [push, pull_request]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [22.x, 24.x]
+    steps:
+      - uses: actions/checkout@v5
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v5
+        with:
+          node-version: ${{ matrix.node-version }}
+      - run: npm ci
+      - run: npm audit
+      - run: npm run eslint
+      - run: npm run typecheck
+      - run: npm test
+      - run: npm run build

package/.nvmrc

@@ -0,0 +1 @@
+22.18.0

package/README.md

@@ -84,6 +84,7 @@ Optional configuration properties:
 - `gitlabs / projects / excludePipelineStatus` - Array of pipeline statuses, that should be excluded (i.e. hidden) (available statuses are `running, pending, success, failed, canceled, skipped`).
 - `gitlabs / maxNonFailedJobsVisible` - Number of non-failed jobs visible for a stage at maximum. Helps with highly concurrent project pipelines becoming uncomfortably high. Default values is unlimited.
 - `gitlabs / branch` - Explicitly select the git branch to show pipelines for. Default value is empty, meaning pipelines for any branch are shown.
+- `gitlabs / commitAsTitle` - If set to `true` commit title used as block title instead of repository name. Default value is `false`.
 - `gitlabs / caFile` - CA file location to be passed to the request library when accessing the gitlab instance.
 - `gitlabs / ignoreArchived` - Ignore archived projects. Default value is `true`
 - `gitlabs / offlineRunners` - Report any offline CI runners. Set to `all` to include shared runners (requires administrator or auditor access), or `none` to ignore runner status completely. Set to `default` or leave out to report only on group / project runners available to the user.

package/build-npm

@@ -0,0 +1,22 @@
+#!/bin/bash
+
+set -e
+
+rm -fr build
+mkdir -p build/src
+
+# Copy static resources
+cp -r public build
+
+# Copy LICENSE, README and package.json
+cp LICENSE package.json README.md build
+
+# Copy bin script
+cp -r bin build
+
+# Transpile server
+tsc --build tsconfig.build.json
+rm -f build/src/dev-assets.ts
+
+# Bundle and minify client JS
+npx webpack --config webpack.prod.cjs

package/eslint.config.mjs

@@ -0,0 +1,31 @@
+import globals from 'globals'
+import mocha from 'eslint-plugin-mocha'
+import react from 'eslint-plugin-react'
+import reactHooks from 'eslint-plugin-react-hooks'
+import tseslint from 'typescript-eslint'
+
+export default [
+  ...tseslint.configs.recommended,
+  mocha.configs.recommended,
+  react.configs.flat.recommended,
+  reactHooks.configs.flat.recommended,
+  {
+    rules: {
+      'mocha/no-mocha-arrows': 'off'
+    }
+  },
+  {
+    languageOptions: {
+      globals: {
+        ...globals.node,
+        ...globals.browser,
+        ...globals.mocha
+      }
+    },
+    settings: {
+      react: {
+        version: 'detect'
+      }
+    }
+  }
+]

package/package.json

@@ -6,7 +6,7 @@
   },
   "type": "module",
   "description": "The missing GitLab build radiator view",
-  "version": "5.1.0",
+  "version": "5.2.0",
   "license": "MIT",
   "bin": {
     "gitlab-radiator": "bin/gitlab-radiator.js"
@@ -51,7 +51,7 @@
     "moment": "2.30.1",
     "regenerator-runtime": "0.14.1",
     "socket.io": "4.8.3",
-    "zod": "4.3.4"
+    "zod": "4.3.5"
   },
   "devDependencies": {
     "@types/basic-auth": "1.1.8",
@@ -61,7 +61,7 @@
     "@types/js-yaml": "4.0.9",
     "@types/less": "3.0.8",
     "@types/mocha": "10.0.10",
-    "@types/react": "19.2.7",
+    "@types/react": "19.2.8",
     "@types/react-dom": "19.2.3",
     "@types/webpack-env": "1.18.8",
     "@types/webpack-hot-middleware": "2.25.12",
@@ -82,7 +82,7 @@
     "style-loader": "4.0.0",
     "ts-loader": "9.5.4",
     "typescript": "5.9.3",
-    "typescript-eslint": "8.51.0",
+    "typescript-eslint": "8.52.0",
     "webpack": "5.104.1",
     "webpack-cli": "6.0.1",
     "webpack-dev-middleware": "7.4.5",

package/public/client.less

@@ -120,6 +120,10 @@ ol.projects {
       text-overflow: ellipsis;
       white-space: nowrap;
       line-height: 1.2em;
+
+      &.commit_title {
+        text-transform: none;
+      }
     }
 
     h4,

package/src/app.ts

@@ -0,0 +1,85 @@
+import {basicAuth} from './auth.ts'
+import compression from 'compression'
+import {config} from './config.ts'
+import express from 'express'
+import fs from 'fs'
+import {fetchOfflineRunners} from './gitlab/runners.ts'
+import http from 'http'
+import {serveLessAsCss} from './less.ts'
+import {Server} from 'socket.io'
+import {update} from './gitlab/index.ts'
+import type {GlobalState} from './common/gitlab-types.d.ts'
+
+const app = express()
+const httpServer = new http.Server(app)
+const socketIoServer = new Server(httpServer)
+
+if (process.env.NODE_ENV !== 'production' && fs.existsSync('./src/dev-assets.ts')) {
+  const {bindDevAssets} = await import('./dev-assets.ts')
+  bindDevAssets(app)
+}
+
+app.disable('x-powered-by')
+app.get('/client.css', serveLessAsCss)
+app.use(express.static('public'))
+app.use(compression())
+app.use(basicAuth(config.auth))
+
+httpServer.listen(config.port, () => {
+  console.log(`Listening on port *:${config.port}`)
+})
+
+const globalState: Omit<GlobalState, 'now'> = {
+  projects: null,
+  error: null,
+  zoom: config.zoom,
+  projectsOrder: config.projectsOrder,
+  columns: config.columns,
+  horizontal: config.horizontal,
+  rotateRunningPipelines: config.rotateRunningPipelines,
+  groupSuccessfulProjects: config.groupSuccessfulProjects
+}
+
+socketIoServer.on('connection', (socket) => {
+  socket.emit('state', withDate(globalState))
+})
+
+async function runUpdate() {
+  try {
+    globalState.projects = await update(config.gitlabs, config.rotateRunningPipelines > 0)
+    globalState.error = await errorIfRunnerOffline()
+    socketIoServer.emit('state', withDate(globalState))
+  } catch (error: unknown) {
+    const message = error instanceof Error ? error.message : String(error)
+    console.error(message)
+    globalState.error = `Failed to communicate with GitLab API: ${message}`
+    socketIoServer.emit('state', withDate(globalState))
+  }
+  setTimeout(runUpdate, config.interval)
+}
+
+async function errorIfRunnerOffline() {
+  const offlineRunnersPerGitlab = await Promise.all(config.gitlabs.map(fetchOfflineRunners))
+  const {offline, totalCount} = offlineRunnersPerGitlab.reduce((acc, runner) => {
+    return {
+      offline: acc.offline.concat(runner.offline),
+      totalCount: acc.totalCount + runner.totalCount
+    }
+  }, {offline: [], totalCount: 0})
+
+  if (offline.length > 0) {
+    const names = offline.map(r => r.name).sort().join(', ')
+    const counts = offline.length === totalCount ? 'All' : `${offline.length}/${totalCount}`
+    return `${counts} runners offline: ${names}`
+  }
+  return null
+}
+
+await runUpdate()
+
+function withDate(state: Omit<GlobalState, 'now'>): GlobalState {
+  return {
+    ...state,
+    now: Date.now()
+  }
+}

package/src/auth.ts

@@ -0,0 +1,20 @@
+import authenticate from 'basic-auth'
+import type {NextFunction, Request, Response} from 'express'
+
+export function basicAuth(auth: {username: string; password: string } | undefined) {
+  if (!auth) {
+    console.log('No authentication configured')
+    return (req: Request, res: Response, next: NextFunction) => next()
+  }
+
+  console.log('HTTP basic auth enabled')
+  return (req: Request, res: Response, next: NextFunction) => {
+    const {name, pass} = authenticate(req) || ({} as {name?: string; pass?: string})
+    if (auth.username === name && auth.password === pass) {
+      next()
+    } else {
+      res.setHeader('WWW-Authenticate', 'Basic realm="gitlab-radiator"')
+      res.status(401).end()
+    }
+  }
+}

package/src/client/arguments.ts

@@ -0,0 +1,61 @@
+export function argumentsFromDocumentUrl(): {override: {columns?: number, zoom?: number}, includedTopics: string[] | null, screen: {id: number, total: number}} {
+  const params = new URLSearchParams(document.location.search)
+  return {
+    override: overrideArguments(params),
+    includedTopics: topicArguments(params),
+    screen: screenArguments(params)
+  }
+}
+
+function topicArguments(params: URLSearchParams): string[] | null {
+  const topics = params.get('topics')
+  if (topics === null) {
+    return null
+  }
+  return topics
+    .split(',')
+    .map(t => t.toLowerCase().trim())
+    .filter(t => t)
+}
+
+function overrideArguments(params: URLSearchParams): {columns?: number, zoom?: number} {
+  return {
+    ...parseColumns(params),
+    ...parseZoom(params)
+  }
+}
+
+function parseColumns(params: URLSearchParams) {
+  const columnsStr = params.get('columns')
+  if (columnsStr) {
+    const columns = Number(columnsStr)
+    if (columns > 0 && columns <= 10) {
+      return {columns}
+    }
+  }
+  return {}
+}
+
+function parseZoom(params: URLSearchParams) {
+  const zoomStr = params.get('zoom')
+  if (zoomStr) {
+    const zoom = Number(zoomStr)
+    if (zoom > 0 && zoom <= 2) {
+      return {zoom}
+    }
+  }
+  return {}
+}
+
+function screenArguments(params: URLSearchParams): {id: number, total: number} {
+  const matches = (/(\d)of(\d)/).exec(params.get('screen') || '')
+  let id = matches ? Number(matches[1]) : 1
+  const total = matches ? Number(matches[2]) : 1
+  if (id > total) {
+    id = total
+  }
+  return {
+    id,
+    total
+  }
+}

package/src/client/groupedProjects.tsx

@@ -0,0 +1,18 @@
+import {Groups} from './groups'
+import {Projects} from './projects'
+import React from 'react'
+import type {Project, ProjectsOrder} from '../common/gitlab-types'
+
+export function GroupedProjects({projects, projectsOrder, groupSuccessfulProjects, zoom, columns, now, screen, rotateRunningPipelines}: {projects: Project[], projectsOrder: ProjectsOrder[], groupSuccessfulProjects: boolean, zoom: number, columns: number, now: number, screen: {id: number, total: number}, rotateRunningPipelines: number}) {
+  if (groupSuccessfulProjects) {
+    const successfullProjects = projects.filter(p => p.status === 'success')
+    const otherProjects= projects.filter(p => p.status !== 'success')
+    const groupedProjects = Object.groupBy(successfullProjects, p => p.group)
+
+    return <React.Fragment>
+      <Projects now={now} zoom={zoom} columns={columns} projects={otherProjects} projectsOrder={projectsOrder} screen={screen} rotateRunningPipelines={rotateRunningPipelines}/>
+      <Groups now={now} zoom={zoom} columns={columns} groupedProjects={groupedProjects}/>
+    </React.Fragment>
+  }
+  return <Projects now={now} zoom={zoom} columns={columns} projects={projects} projectsOrder={projectsOrder} screen={screen} rotateRunningPipelines={rotateRunningPipelines}/>
+}

package/src/client/groups.tsx

@@ -0,0 +1,50 @@
+import React from 'react'
+import {Timestamp} from './timestamp'
+import {style, zoomStyle} from './projects'
+import type {Pipeline, Project} from '../common/gitlab-types'
+
+export function Groups({groupedProjects, now, zoom, columns}: {groupedProjects: Partial<Record<string, Project[]>>, now: number, zoom: number, columns: number}) {
+  return <ol className="groups" style={zoomStyle(zoom)}>
+    {Object
+      .entries(groupedProjects)
+      .sort(([groupName1], [groupName2]) => groupName1.localeCompare(groupName2))
+      .map(([groupName, projects]) => <GroupElement columns={columns} groupName={groupName} key={groupName} projects={projects} now={now}/>)
+    }
+  </ol>
+}
+
+function GroupElement({groupName, projects, now, columns}: {groupName: string, projects: Project[] | undefined, now: number, columns: number}) {
+  if (!projects) {
+    return null
+  }
+
+  const pipelines: (Pipeline & {project: string})[] = []
+  projects.forEach((project) => {
+      project.pipelines.forEach((pipeline) => {
+        pipelines.push({
+          ...pipeline,
+          project: project.nameWithoutNamespace
+        })
+      })
+  })
+
+  return <li className={'group'} style={style(columns)}>
+    <h2>{groupName}</h2>
+    <div className={'group-info'}>{projects.length} Project{projects.length > 1 ? 's' : ''}</div>
+    <GroupInfoElement now={now} pipeline={pipelines[0]}/>
+  </li>
+}
+
+function GroupInfoElement({now, pipeline}: {now: number, pipeline: (Pipeline & {project: string})}) {
+  return <div className="pipeline-info">
+    <div>
+      <span>{pipeline.commit ? pipeline.commit.author : '-'}</span>
+      <span>{pipeline.commit ? pipeline.project : '-'}</span>
+    </div>
+    <div>
+      <Timestamp stages={pipeline.stages} now={now}/>
+      <span>on {pipeline.ref}</span>
+    </div>
+  </div>
+}
+

package/src/client/index.tsx

@@ -0,0 +1,79 @@
+import 'core-js/stable'
+import 'regenerator-runtime/runtime'
+
+import {argumentsFromDocumentUrl} from './arguments'
+import {createRoot} from 'react-dom/client'
+import {GroupedProjects} from './groupedProjects'
+import React, {useCallback, useEffect, useMemo, useState} from 'react'
+import {io, Socket} from 'socket.io-client'
+import type {GlobalState, Project} from '../common/gitlab-types'
+
+function RadiatorApp() {
+  const args = useMemo(() => argumentsFromDocumentUrl(), [])
+  const [state, setState] = useState<GlobalState>({
+    columns: 1,
+    error: null,
+    groupSuccessfulProjects: false,
+    horizontal: false,
+    rotateRunningPipelines: 0,
+    projects: null,
+    projectsOrder: [],
+    now: 0,
+    zoom: 1
+  })
+  const {now, zoom, columns, projects, projectsOrder, groupSuccessfulProjects, horizontal, rotateRunningPipelines} = state
+  const projectsByTags = filterProjectsByTopics(projects, args.includedTopics)
+
+  const onServerStateUpdated = useCallback((serverState: GlobalState) => {
+    setState(() => ({
+      ...serverState,
+      ...args.override
+    }))
+  }, [args.override])
+
+  const onDisconnect = useCallback(() => setState(prev => ({...prev, error: 'gitlab-radiator server is offline'})), [])
+
+  useEffect(() => {
+    const socket: Socket = io()
+    socket.on('state', onServerStateUpdated)
+    socket.on('disconnect', onDisconnect)
+    return () => {
+      socket.off('state', onServerStateUpdated)
+      socket.off('disconnect', onDisconnect)
+      socket.close()
+    }
+  }, [onServerStateUpdated, onDisconnect])
+
+  return <div className={horizontal ? 'horizontal' : ''}>
+    {state.error && <div className="error">{state.error}</div>}
+    {!state.projects && <h2 className="loading">Fetching projects and CI pipelines from GitLab...</h2>}
+    {state.projects?.length === 0 && <h2 className="loading">No projects with CI pipelines found.</h2>}
+
+    {projectsByTags &&
+      <GroupedProjects now={now} zoom={zoom} columns={columns}
+                      projects={projectsByTags} projectsOrder={projectsOrder}
+                      groupSuccessfulProjects={groupSuccessfulProjects}
+                      screen={args.screen}
+                      rotateRunningPipelines={rotateRunningPipelines}/>
+    }
+  </div>
+}
+
+function filterProjectsByTopics(projects: Project[] | null, includedTopics: string[] | null) {
+  if (projects === null) {
+    return null
+  }
+  if (!includedTopics) {
+    return projects
+  }
+  if (includedTopics.length === 0) {
+    return projects.filter(p => p.topics.length === 0)
+  }
+  return projects.filter(project => project.topics.some(tag => includedTopics?.includes(tag)))
+}
+
+ 
+const root = createRoot(document.getElementById('app')!)
+root.render(<RadiatorApp/>)
+
+module.hot?.accept()

package/src/client/info.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import {Timestamp} from './timestamp'
+import type {Pipeline} from '../common/gitlab-types'
+
+export function Info({pipeline, now, commitAsTitle}: {pipeline: Pipeline, now: number, commitAsTitle: boolean}) {
+  return <div className="pipeline-info">
+    <div>
+      <span>{pipeline.commit ? pipeline.commit.author : '-'}</span>
+      <span>{commitAsTitle ? `Pipeline id: ${pipeline.id}` : (pipeline.commit ? `'${pipeline.commit.title}'` : '-')}</span>
+    </div>
+    <div>
+      <Timestamp stages={pipeline.stages} now={now}/>
+      <span>on {pipeline.ref}</span>
+    </div>
+  </div>
+}

package/src/client/jobs.tsx

@@ -0,0 +1,57 @@
+import React from 'react'
+import type {Job, JobStatus} from '../common/gitlab-types'
+
+const NON_BREAKING_SPACE = '\xa0'
+
+const JOB_STATES_IN_INTEREST_ORDER: JobStatus[] = [
+  'failed',
+  'running',
+  'created',
+  'pending',
+  'success',
+  'skipped'
+]
+
+function interestOrder(a: Job, b: Job) {
+  return JOB_STATES_IN_INTEREST_ORDER.indexOf(a.status) - JOB_STATES_IN_INTEREST_ORDER.indexOf(b.status)
+}
+
+export function Jobs({jobs, maxNonFailedJobsVisible}: {jobs: Job[], maxNonFailedJobsVisible: number}) {
+  const failedJobs = jobs.filter(job => job.status === 'failed')
+  const nonFailedJobs = jobs.filter(job => job.status !== 'failed').sort(interestOrder)
+  const filteredJobs = sortByOriginalOrder(
+    failedJobs.concat(
+      nonFailedJobs.slice(0, Math.max(0, maxNonFailedJobsVisible - failedJobs.length))
+    ),
+    jobs
+  )
+
+  const hiddenJobs = jobs.filter(job => filteredJobs.indexOf(job) === -1)
+  const hiddenCountsByStatus = Object.fromEntries(
+    Object.entries(Object.groupBy(hiddenJobs, job => job.status))
+      .map(([status, jobsForStatus]) => [status, jobsForStatus!.length])
+  )
+
+  const hiddenJobsText = Object.entries(hiddenCountsByStatus)
+    .sort(([statusA], [statusB]) => statusA.localeCompare(statusB))
+    .map(([status, count]: [string, number]) => `${count}${NON_BREAKING_SPACE}${status}`)
+    .join(', ')
+
+  return <ol className="jobs">
+    {filteredJobs.map((job: Job) => <JobElement job={job} key={job.id}/>)}
+    {
+      hiddenJobs.length > 0 ? <li className="hidden-jobs">+&nbsp;{hiddenJobsText}</li> : null
+    }
+  </ol>
+}
+
+function JobElement({job}: {job: Job}) {
+  return <li className={job.status}>
+    <a href={job.url} target="_blank" rel="noopener noreferrer">{job.name}</a>
+    {!job.url && job.name}
+  </li>
+}
+
+function sortByOriginalOrder(filteredJobs: Job[], jobs: Job[]) {
+  return [...filteredJobs].sort((a, b) => jobs.indexOf(a) - jobs.indexOf(b))
+}

package/src/client/projects.tsx

@@ -0,0 +1,82 @@
+import {Info} from './info'
+import React, {useState, useEffect} from 'react'
+import {Stages} from './stages'
+import type {Project, ProjectsOrder} from '../common/gitlab-types'
+
+export function Projects({columns, now, projects, projectsOrder, screen, zoom, rotateRunningPipelines}: {columns: number, now: number, projects: Project[], projectsOrder: ProjectsOrder[], screen: {id: number, total: number}, zoom: number, rotateRunningPipelines: number}) {
+  return <ol className="projects" style={zoomStyle(zoom)}>
+    {sortByMultipleKeys(projects, projectsOrder)
+      .filter(forScreen(screen, projects.length))
+      .map(project => <ProjectElement now={now} columns={columns} rotateRunningPipelines={rotateRunningPipelines} project={project} key={project.id}/>)
+    }
+  </ol>
+}
+
+function sortByMultipleKeys(projects: Project[], keys: ProjectsOrder[]): Project[] {
+  return [...projects].sort((a, b) => {
+    for (const key of keys) {
+      const result = key === 'id'
+        ? a[key] - b[key]
+        : a[key].localeCompare(b[key])
+
+      if (result !== 0) {
+        return result
+      }
+    }
+    return 0
+  })
+}
+
+function ProjectElement({columns, now, project, rotateRunningPipelines}: {columns: number, now: number, rotateRunningPipelines: number, project: Project}) {
+  const [counter, setCounter] = useState<number>(0)
+  const runningCount = project.pipelines.filter(p => p.status === 'running').length
+  const isRotating = rotateRunningPipelines > 0 && runningCount > 1
+
+  useEffect(() => {
+    if (!isRotating) {
+      return
+    }
+
+    const timer = setInterval(() => setCounter(previous => previous + 1), rotateRunningPipelines)
+    return () => clearInterval(timer)
+  }, [isRotating, rotateRunningPipelines, setCounter])
+
+  const pipelineIndex = isRotating ? (counter % runningCount) : 0
+  const indexLabel = isRotating ? `${pipelineIndex + 1}/${runningCount} `: ''
+  const pipeline = project.pipelines[pipelineIndex]
+
+  const h2Class = project.commitAsTitle ? 'commit_title' : ''
+
+  return <li className={`project ${project.status}`} style={style(columns)}>
+    <h2 className={`${h2Class}`}>
+      {project.url && <a href={`${project.url}/pipelines`} target="_blank" rel="noopener noreferrer">{indexLabel}{project.commitAsTitle ? (pipeline.commit ? pipeline.commit.title : '-') : project.name}</a>}
+      {!project.url && project.name}
+    </h2>
+    <Stages stages={pipeline.stages} maxNonFailedJobsVisible={project.maxNonFailedJobsVisible}/>
+    <Info now={now} pipeline={pipeline} commitAsTitle={project.commitAsTitle}/>
+  </li>
+}
+
+function forScreen(screen: {id: number, total: number}, projectsCount: number) {
+  const perScreen = Math.ceil(projectsCount / screen.total)
+  const first = perScreen * (screen.id - 1)
+  const last = perScreen * screen.id
+  return (_project: Project, projectIndex: number) => projectIndex >= first && projectIndex < last
+}
+
+export function zoomStyle(zoom: number) {
+  const widthPercentage = Math.round(100 / zoom)
+  return {
+    transform: `scale(${zoom})`,
+    width: `${widthPercentage}vmax`
+  }
+}
+
+export function style(columns: number) {
+  const marginPx = 12
+  const widthPercentage = Math.floor(100 / columns)
+  return {
+    margin: `${marginPx}px`,
+    width: `calc(${widthPercentage}% - ${2 * marginPx}px)`
+  }
+}