gitlab-radiator 3.4.0 → 3.4.2

package/.babelrc

@@ -1,4 +0,0 @@
-{
-  "presets": ["@babel/env", "@babel/react"],
-  "plugins": ["@babel/plugin-transform-runtime"]
-}

package/.eslintrc

@@ -1,13 +0,0 @@
-{
-  "env": {
-    "es6": true,
-    "mocha": true,
-    "node": true
-  },
-  "parser": "@babel/eslint-parser",
-  "plugins": [
-    "mocha",
-    "react"
-  ],
-  "extends": ["eslint:recommended"]
-}

package/.github/workflows/test.yml

@@ -1,20 +0,0 @@
-name: Run tests
-
-on: [push, pull_request]
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        node-version: [12.x, 14.x]
-    steps:
-     - uses: actions/checkout@v2
-     - uses: actions/setup-node@v1
-       with:
-         node-version: ${{ matrix.node-version }}
-     - run: npm ci
-     - run: npm audit
-     - run: npm run eslint
-     - run: npm test
-     - run: npm run build

package/.nvmrc

@@ -1 +0,0 @@
-16.17.0

package/build-npm

@@ -1,19 +0,0 @@
-#!/bin/bash
-
-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
-
-# Bundle and minify client JS
-npx webpack --config webpack.prod.js
-
-# Transpile server
-node_modules/.bin/babel src --ignore **/client/*.js,**/dev-assets.js --out-dir build/src

package/src/client/.eslintrc

@@ -1,21 +0,0 @@
-{
-  "env": {
-    "browser": true,
-    "es6": true
-  },
-  "parser": "@typescript-eslint/parser",
-  "plugins": [
-    "@typescript-eslint"
-  ],
-  "extends": [
-    "eslint:recommended",
-    "plugin:react/recommended",
-    "plugin:@typescript-eslint/eslint-recommended",
-    "plugin:@typescript-eslint/recommended"
-  ],
-  "settings": {
-    "react": {
-      "version": "17.0"
-    }
-  }
-}

package/src/client/arguments.ts

@@ -1,75 +0,0 @@
-interface ParsedQueryString {
-  [key: string]: string | undefined
-}
-
-export function argumentsFromDocumentUrl(): {override: {columns?: number, zoom?: number}, includedTags: string[] | null, screen: {id: number, total: number}} {
-  const args = parseQueryString(document.location.search)
-  return {
-    override: overrideArguments(args),
-    includedTags: tagArguments(args),
-    screen: screenArguments(args)
-  }
-}
-
-function tagArguments(args: ParsedQueryString): string[] | null {
-  if (args.tags === undefined) {
-    return null
-  }
-  return args.tags
-    .split(',')
-    .map(t => t.toLowerCase().trim())
-    .filter(t => t)
-}
-
-function overrideArguments(args: ParsedQueryString): {columns?: number, zoom?: number} {
-  return {
-    ...parseColumns(args),
-    ...parseZoom(args)
-  }
-}
-
-function parseColumns(args: ParsedQueryString) {
-  if (args.columns) {
-    const columns = Number(args.columns)
-    if (columns > 0 && columns <= 10) {
-      return {columns}
-    }
-  }
-  return {}
-}
-
-
-function parseZoom(args: ParsedQueryString) {
-  if (args.zoom) {
-    const zoom = Number(args.zoom)
-    if (zoom > 0 && zoom <= 2) {
-      return {zoom}
-    }
-  }
-  return {}
-}
-
-function screenArguments(args: ParsedQueryString): {id: number, total: number} {
-  const matches = (/(\d)of(\d)/).exec(args.screen || '')
-  let id = matches ? Number(matches[1]) : 1
-  const total = matches ? Number(matches[2]) : 1
-  if (id > total) {
-    id = total
-  }
-  return {
-    id,
-    total
-  }
-}
-
-function parseQueryString(search: string): ParsedQueryString {
-  const entries = search
-    .slice(1)
-    .split('&')
-    .filter(parameter => parameter)
-    .map((parameter: string): [string, string | undefined] => {
-      const [key, value] = parameter.split('=')
-      return [key, value]
-    })
-  return Object.fromEntries(entries)
-}

package/src/client/gitlab-types.ts

@@ -1,54 +0,0 @@
-
-export interface GlobalState {
-  columns: number
-  error: string | null
-  groupSuccessfulProjects: boolean
-  projects: Project[] | null
-  projectsOrder: string[]
-  zoom: number
-  now: number
-}
-
-export interface Project {
-  archived: false
-  group: string
-  id: number
-  name: string
-  nameWithoutNamespace: string
-  tags: string[]
-  url: string
-  default_branch: string
-  pipelines: Pipeline[]
-  maxNonFailedJobsVisible: number
-  status: 'success' | 'failed'
-}
-
-export interface Pipeline {
-  commit: Commit | null
-  id: number
-  ref: string
-  stages: Stage[]
-  status: 'success' | 'failed'
-}
-
-export interface Commit {
-  title: string
-  author: string
-}
-
-export interface Stage {
-  jobs: Job[]
-  name: string
-}
-
-export interface Job {
-  finishedAt: string | null
-  id: number
-  name: string
-  stage: string
-  startedAt: string | null
-  status: JobStatus
-  url: string
-}
-
-export type JobStatus = 'created' | 'failed' | 'manual' | 'pending' | 'running' | 'skipped' | 'success'

package/src/client/groupedProjects.tsx

@@ -1,40 +0,0 @@
-import _ from 'lodash'
-import {Groups} from './groups'
-import type {Project} from './gitlab-types'
-import {Projects} from './projects'
-import React from 'react'
-
-export function GroupedProjects({projects, projectsOrder, groupSuccessfulProjects, zoom, columns, now, screen}: {projects: Project[], projectsOrder: string[], groupSuccessfulProjects: boolean, zoom: number, columns: number, now: number, screen: {id: number, total: number}}): JSX.Element {
-  if (groupSuccessfulProjects) {
-    return renderProjectsGrouped(projects, projectsOrder, zoom, columns, now, screen)
-  }
-  return renderProjects(projects, projectsOrder, zoom, columns, now, screen)
-}
-
-function renderProjectsGrouped(projects: Project[], projectsOrder: string[], zoom: number, columns: number, now: number, screen: {id: number, total: number}) {
-  const successfullProjects: Project[] = []
-  const otherProjects: Project[] = []
-  projects.forEach((project) => {
-    if (project.status === 'success') {
-      successfullProjects.push(project)
-    } else {
-      otherProjects.push(project)
-    }
-  })
-  const groupedProjects = _.groupBy(successfullProjects, 'group')
-  return <React.Fragment>
-    {renderProjects(otherProjects, projectsOrder, zoom, columns, now, screen)}
-    {renderGroupedProjects(groupedProjects, zoom, columns, now)}
-  </React.Fragment>
-}
-
-function renderProjects(projects: Project[], projectsOrder: string[], zoom: number, columns: number, now: number, screen: {id: number, total: number}) {
-  return <Projects now={now} zoom={zoom} columns={columns}
-                    projects={projects || []} projectsOrder={projectsOrder}
-                    screen={screen}/>
-}
-
-function renderGroupedProjects(groupedProjects: {[groupname: string]: Project[]}, zoom: number, columns: number, now: number) {
-  return <Groups zoom={zoom} columns={columns} now={now}
-                    groupedProjects={groupedProjects || []} />
-}

package/src/client/groups.tsx

@@ -1,59 +0,0 @@
-import type {Pipeline, Project} from './gitlab-types'
-import React from 'react'
-import {renderTimestamp} from './renderTimestamp'
-
-export function Groups({groupedProjects, now, zoom, columns}: {groupedProjects: {[groupname: string]: Project[]}, now: number, zoom: number, columns: number}): JSX.Element {
-  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[], now: number, columns: number}) {
-  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>
-      <span>{renderTimestamp(pipeline.stages, now)}</span>
-      <span>on {pipeline.ref}</span>
-    </div>
-  </div>
-}
-
-function zoomStyle(zoom: number) {
-  const widthPercentage = Math.round(100 / zoom)
-  return {
-    transform: `scale(${zoom})`,
-    width: `${widthPercentage}vmax`
-  }
-}
-
-function style(columns: number) {
-  const widthPercentage = Math.round(90 / columns)
-  return {
-    width: `${widthPercentage}%`
-  }
-}

package/src/client/index.tsx

@@ -1,95 +0,0 @@
-import 'core-js/stable'
-import 'regenerator-runtime/runtime'
-
-import type {GlobalState, Project} from './gitlab-types'
-import {argumentsFromDocumentUrl} from './arguments'
-import {createRoot} from 'react-dom/client'
-import {GroupedProjects} from './groupedProjects'
-import React from 'react'
-
-class RadiatorApp extends React.Component<unknown, GlobalState> {
-  public args: {override: {columns?: number, zoom?: number}, includedTags: string[] | null, screen: {id: number, total: number}}
-
-  constructor(props: unknown) {
-    super(props)
-    this.state = {
-      columns: 1,
-      error: null,
-      groupSuccessfulProjects: false,
-      projects: null,
-      projectsOrder: [],
-      now: 0,
-      zoom: 1
-    }
-
-    this.args = argumentsFromDocumentUrl()
-  }
-
-  componentDidMount = () => {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const socket = (window as any).io()
-    socket.on('state', this.onServerStateUpdated.bind(this))
-    socket.on('disconnect', this.onDisconnect.bind(this))
-  }
-
-  render = () =>
-    <div>
-      {this.renderErrorMessage()}
-      {this.renderProgressMessage()}
-
-      {this.state.projects &&
-        <GroupedProjects now={this.state.now} zoom={this.state.zoom} columns={this.state.columns}
-                        projects={this.state.projects} projectsOrder={this.state.projectsOrder}
-                        groupSuccessfulProjects={this.state.groupSuccessfulProjects}
-                        screen={this.args.screen}/>
-      }
-    </div>
-
-  renderErrorMessage = () =>
-    this.state.error && <div className="error">{this.state.error}</div>
-
-  renderProgressMessage = () => {
-    if (!this.state.projects) {
-      return <h2 className="loading">Fetching projects and CI pipelines from GitLab...</h2>
-    } else if (this.state.projects.length === 0) {
-      return <h2 className="loading">No projects with CI pipelines found.</h2>
-    }
-    return null
-  }
-
-  onServerStateUpdated = (state: GlobalState) => {
-    this.setState({
-      ...state,
-      ...this.args.override,
-      projects: this.filterProjectsByTags(state.projects)
-    })
-  }
-
-  onDisconnect = () => this.setState({error: 'gitlab-radiator server is offline'})
-
-  filterProjectsByTags = (projects: Project[] | null) => {
-    if (projects === null) {
-      return null
-    }
-
-    // No tag list specified, include all projects
-    if (!this.args.includedTags) {
-      return projects
-    }
-    // Empty tag list specified, include projects without tags
-    if (this.args.includedTags.length === 0) {
-      return projects.filter(project =>
-        project.tags.length === 0
-      )
-    }
-    // Tag list specified, include projects which have at least one of them
-    return projects.filter(project =>
-      project.tags.some(tag => this.args.includedTags?.includes(tag))
-    )
-  }
-}
-
-const root = createRoot(document.getElementById('app')!)
-root.render(<RadiatorApp/>);
-
-module.hot?.accept()

package/src/client/info.tsx

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

package/src/client/jobs.tsx

@@ -1,56 +0,0 @@
-import type {Job, JobStatus} from './gitlab-types'
-import _ from 'lodash'
-import React from 'react'
-
-const NON_BREAKING_SPACE = '\xa0'
-
-const JOB_STATES_IN_INTEREST_ORDER: JobStatus[] = [
-  'failed',
-  'running',
-  'created',
-  'pending',
-  'success',
-  'skipped'
-]
-
-export function Jobs({jobs, maxNonFailedJobsVisible}: {jobs: Job[], maxNonFailedJobsVisible: number}): JSX.Element {
-  const [failedJobs, nonFailedJobs] = _.partition(jobs, {status: 'failed'})
-  const filteredJobs = sortByOriginalOrder(
-    failedJobs.concat(
-      _.orderBy(nonFailedJobs, ({status}) => JOB_STATES_IN_INTEREST_ORDER.indexOf(status))
-        .slice(0, Math.max(0, maxNonFailedJobsVisible - failedJobs.length))
-    ),
-    jobs
-  )
-
-  const hiddenJobs = jobs.filter(job => filteredJobs.indexOf(job) === -1)
-  const hiddenCountsByStatus = _.mapValues(
-    _.groupBy(hiddenJobs, 'status'),
-    jobsForStatus => jobsForStatus.length
-  )
-
-  const hiddenJobsText = _(hiddenCountsByStatus)
-    .toPairs()
-    .orderBy(([status]) => status)
-    .value()
-    .map(([status, count]) => `${count}${NON_BREAKING_SPACE}${status}`)
-    .join(', ')
-
-  return <ol className="jobs">
-    {filteredJobs.map(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 _.orderBy(filteredJobs, (job: Job) => jobs.indexOf(job))
-}

package/src/client/projects.tsx

@@ -1,51 +0,0 @@
-import _ from 'lodash'
-import {Info} from './info'
-import type {Project} from './gitlab-types'
-import React from 'react'
-import {Stages} from './stages'
-
-export function Projects({columns, now, projects, projectsOrder, screen, zoom}: {columns: number, now: number, projects: Project[], projectsOrder: string[], screen: {id: number, total: number}, zoom: number}): JSX.Element {
-  return <ol className="projects" style={zoomStyle(zoom)}>
-    {_.sortBy(projects, projectsOrder)
-      .filter(forScreen(screen, projects.length))
-      .map(project => <ProjectElement now={now} columns={columns} project={project} key={project.id}/>)
-    }
-  </ol>
-}
-
-function ProjectElement({columns, now, project}: {columns: number, now: number, project: Project}) {
-  const [pipeline] = project.pipelines
-
-  return <li className={`project ${project.status}`} style={style(columns)}>
-    <h2>
-      {project.url && <a href={`${project.url}/pipelines`} target="_blank" rel="noopener noreferrer">{project.name}</a>}
-      {!project.url && project.name}
-    </h2>
-    <Stages stages={pipeline.stages} maxNonFailedJobsVisible={project.maxNonFailedJobsVisible}/>
-    <Info now={now} pipeline={pipeline}/>
-  </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
-}
-
-function zoomStyle(zoom: number) {
-  const widthPercentage = Math.round(100 / zoom)
-  return {
-    transform: `scale(${zoom})`,
-    width: `${widthPercentage}vmax`
-  }
-}
-
-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/renderTimestamp.tsx

@@ -1,45 +0,0 @@
-import {formatDistance} from 'date-fns'
-import type {Stage} from './gitlab-types'
-
-export function renderTimestamp(stages: Stage[], now: number): string {
-  const timestamps = getTimestamps(stages)
-
-  if (timestamps.length === 0) {
-    return 'Pending...'
-  }
-
-  const finished = timestamps
-    .map(t => t.finishedAt)
-    .filter((t): t is number => t !== null)
-  const inProgress = timestamps.length > finished.length
-  if (inProgress) {
-    const [timestamp] = timestamps.sort((a, b) => a.startedAt - b.startedAt)
-    return renderDistance('Started', timestamp.startedAt, now)
-  }
-
-  const [latestFinishedAt] = finished.sort((a, b) => b - a)
-  return renderDistance('Finished', latestFinishedAt, now)
-}
-
-function getTimestamps(stages: Stage[]): {startedAt: number, finishedAt: number | null}[] {
-  return stages
-    .flatMap(s => s.jobs)
-    .map(job => {
-      const startedAt = job.startedAt ? new Date(job.startedAt).valueOf() : null
-      const finishedAt = job.finishedAt ? new Date(job.finishedAt).valueOf() : null
-      return {
-        startedAt,
-        finishedAt
-      }
-    })
-    .filter((t): t is {startedAt: number, finishedAt: number | null} => t.startedAt !== null)
-}
-
-function renderDistance(predicate: string, timestamp: number, now: number) {
-  const distance = formatDate(timestamp, now)
-  return `${predicate} ${distance} ago`
-}
-
-function formatDate(timestamp: number, now: number) {
-  return formatDistance(new Date(timestamp), new Date(now))
-}

package/src/client/stages.tsx

@@ -1,18 +0,0 @@
-import {Jobs} from './jobs'
-import React from 'react'
-import type {Stage} from './gitlab-types'
-
-export function Stages({stages, maxNonFailedJobsVisible}: {stages: Stage[], maxNonFailedJobsVisible: number}): JSX.Element {
-  return <ol className="stages">
-    {stages.map(stage =>
-      <StageElement stage={stage} maxNonFailedJobsVisible={maxNonFailedJobsVisible} key={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/dev-assets.js

@@ -1,10 +0,0 @@
-import config from '../webpack.dev.js'
-import webpack from 'webpack'
-import webpackDevMiddleware from 'webpack-dev-middleware'
-import webpackHotMiddleware from 'webpack-hot-middleware'
-
-export function bindDevAssets(app) {
-  const compiler = webpack(config)
-  app.use(webpackDevMiddleware(compiler))
-  app.use(webpackHotMiddleware(compiler))
-}