gitlab-radiator 5.2.0 → 5.4.0

package/src/app.ts

@@ -1,85 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

@@ -1,61 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,50 +0,0 @@
-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

@@ -1,79 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,57 +0,0 @@
-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

@@ -1,82 +0,0 @@
-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)`
-  }
-}

package/src/client/stages.tsx

@@ -1,18 +0,0 @@
-import {Jobs} from './jobs'
-import React from 'react'
-import type {Stage} from '../common/gitlab-types'
-
-export function Stages({stages, maxNonFailedJobsVisible}: {stages: Stage[], maxNonFailedJobsVisible: number}) {
-  return <ol className="stages">
-    {stages.map((stage, index) =>
-      <StageElement stage={stage} maxNonFailedJobsVisible={maxNonFailedJobsVisible} key={`${index}-${stage.name}`}/>
-    )}
-  </ol>
-}
-
-function StageElement({stage, maxNonFailedJobsVisible}: {stage: Stage, maxNonFailedJobsVisible: number}) {
-  return <li className="stage">
-    <div className="name">{stage.name}</div>
-    <Jobs jobs={stage.jobs} maxNonFailedJobsVisible={maxNonFailedJobsVisible}/>
-  </li>
-}

package/src/client/timestamp.tsx

@@ -1,37 +0,0 @@
-import moment from 'moment'
-import React from 'react'
-import type {Stage} from '../common/gitlab-types'
-
-export function Timestamp({stages, now}: {stages: Stage[], now: number}) {
-  const timestamps = getTimestamps(stages)
-  if (timestamps.length === 0) {
-    return <span>Pending...</span>
-  }
-
-  const finished = timestamps
-    .map(t => t.finishedAt)
-    .filter((t): t is number => t !== null)
-
-  const inProgress = timestamps.length > finished.length
-  if (inProgress) {
-    const [{startedAt}] = timestamps.sort((a, b) => a.startedAt - b.startedAt)
-    return <span>Started {moment(startedAt).from(now)}</span>
-  }
-
-  const [latestFinishedAt] = finished.sort((a, b) => b - a)
-  return <span>Finished {moment(latestFinishedAt).from(now)}</span>
-}
-
-function getTimestamps(stages: Stage[]): {startedAt: number, finishedAt: number | null}[] {
-  return stages
-    .flatMap(s => s.jobs)
-    .map(job => ({
-      startedAt: parseDate(job.startedAt),
-      finishedAt: parseDate(job.finishedAt)
-    }))
-    .filter((t): t is {startedAt: number, finishedAt: number | null} => t.startedAt !== null)
-}
-
-function parseDate(value: string | null) {
-  return value ? new Date(value).valueOf() : null
-}

package/src/client/tsconfig.json

@@ -1,24 +0,0 @@
-{
-  "compilerOptions": {
-    "outDir": "./dist/",
-    "target": "es5",
-    "lib": ["ES2024.Object", "dom"],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "module": "esnext",
-    "moduleResolution": "node",
-    "isolatedModules": true,
-    "resolveJsonModule": true,
-    "jsx": "react",
-    "sourceMap": true,
-    "declaration": false,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "incremental": true,
-    "noFallthroughCasesInSwitch": true
-  }
-}

package/src/common/gitlab-types.d.ts

@@ -1,58 +0,0 @@
-export interface GlobalState {
-  columns: number
-  error: string | null
-  groupSuccessfulProjects: boolean
-  horizontal: boolean
-  rotateRunningPipelines: number
-  projects: Project[] | null
-  projectsOrder: Array<ProjectsOrder>
-  zoom: number
-  now: number
-}
-
-export interface Project {
-  archived: boolean
-  group: string
-  id: number
-  name: string
-  nameWithoutNamespace: string
-  topics: string[]
-  url: string
-  default_branch: string
-  commitAsTitle: boolean
-  pipelines: Pipeline[]
-  maxNonFailedJobsVisible: number
-  status: JobStatus
-}
-
-// Keys that represent either string or number values, and can be compared with < and >
-export type ProjectsOrder = keyof Pick<Project, 'status' | 'name' | 'id' | 'nameWithoutNamespace' | 'group'>
-
-export interface Pipeline {
-  commit: Commit | null
-  id: number
-  ref: string
-  stages: Stage[]
-  status: JobStatus
-}
-
-export interface Commit {
-  title: string
-  author: string
-}
-
-export interface Stage {
-  jobs: Job[]
-  name: string
-}
-
-export interface Job {
-  finishedAt: string | null
-  id: number
-  name: string
-  startedAt: string | null
-  status: JobStatus
-  url: string
-}
-
-export type JobStatus = 'canceled' | 'created' | 'failed' | 'manual' | 'pending' | 'running' | 'skipped' | 'success'