gitlab-radiator 3.3.11 → 3.4.0

package/src/client/groupedProjects.tsx

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

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

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

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

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

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

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

@@ -0,0 +1,18 @@
+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/config.js

@@ -1,59 +1,43 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.config = void 0;
-
-var _assert = _interopRequireDefault(require("assert"));
-
-var _fs = _interopRequireDefault(require("fs"));
-
-var _os = _interopRequireDefault(require("os"));
-
-var _jsYaml = _interopRequireDefault(require("js-yaml"));
-
-var configFile = expandTilde(process.env.GITLAB_RADIATOR_CONFIG || '~/.gitlab-radiator.yml');
-
-var yamlContent = _fs.default.readFileSync(configFile, 'utf8');
-
-var config = validate(_jsYaml.default.load(yamlContent));
-exports.config = config;
-config.interval = Number(config.interval || 10) * 1000;
-config.port = Number(config.port || 3000);
-config.zoom = Number(config.zoom || 1.0);
-config.columns = Number(config.columns || 1);
-config.groupSuccessfulProjects = config.groupSuccessfulProjects || false;
-config.projectsOrder = config.projectsOrder || ['name'];
-config.gitlabs = config.gitlabs.map(gitlab => {
+import assert from 'assert'
+import fs from 'fs'
+import os from 'os'
+import yaml from 'js-yaml'
+
+const configFile = expandTilde(process.env.GITLAB_RADIATOR_CONFIG || '~/.gitlab-radiator.yml')
+const yamlContent = fs.readFileSync(configFile, 'utf8')
+export const config = validate(yaml.load(yamlContent))
+
+config.interval = Number(config.interval || 10) * 1000
+config.port = Number(config.port || 3000)
+config.zoom = Number(config.zoom || 1.0)
+config.columns = Number(config.columns || 1)
+config.groupSuccessfulProjects = config.groupSuccessfulProjects || false
+config.projectsOrder = config.projectsOrder || ['name']
+config.gitlabs = config.gitlabs.map((gitlab) => {
   return {
     url: gitlab.url,
     ignoreArchived: gitlab.ignoreArchived === undefined ? true : gitlab.ignoreArchived,
     maxNonFailedJobsVisible: Number(gitlab.maxNonFailedJobsVisible || 999999),
-    ca: gitlab.caFile && _fs.default.existsSync(gitlab.caFile, 'utf-8') ? _fs.default.readFileSync(gitlab.caFile) : undefined,
+    ca: gitlab.caFile && fs.existsSync(gitlab.caFile, 'utf-8') ? fs.readFileSync(gitlab.caFile) : undefined,
     'access-token': gitlab['access-token'] || process.env.GITLAB_ACCESS_TOKEN,
     projects: {
       excludePipelineStatus: (gitlab.projects || {}).excludePipelineStatus || [],
       include: (gitlab.projects || {}).include || '',
       exclude: (gitlab.projects || {}).exclude || ''
     }
-  };
-});
-config.colors = config.colors || {};
+  }
+})
+config.colors = config.colors || {}
 
 function expandTilde(path) {
-  return path.replace(/^~($|\/|\\)/, "".concat(_os.default.homedir(), "$1"));
+  return path.replace(/^~($|\/|\\)/, `${os.homedir()}$1`)
 }
 
 function validate(cfg) {
-  _assert.default.ok(cfg.gitlabs, 'Mandatory gitlab properties missing from configuration file');
-
-  cfg.gitlabs.forEach(gitlab => {
-    _assert.default.ok(gitlab.url, 'Mandatory gitlab url missing from configuration file');
-
-    _assert.default.ok(gitlab['access-token'] || process.env.GITLAB_ACCESS_TOKEN, 'Mandatory gitlab access token missing from configuration (and none present at GITLAB_ACCESS_TOKEN env variable)');
-  });
-  return cfg;
-}
+  assert.ok(cfg.gitlabs, 'Mandatory gitlab properties missing from configuration file')
+  cfg.gitlabs.forEach((gitlab) => {
+    assert.ok(gitlab.url, 'Mandatory gitlab url missing from configuration file')
+    assert.ok(gitlab['access-token'] || process.env.GITLAB_ACCESS_TOKEN, 'Mandatory gitlab access token missing from configuration (and none present at GITLAB_ACCESS_TOKEN env variable)')
+  })
+  return cfg
+}

package/src/dev-assets.js

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

package/src/gitlab/client.js

@@ -1,49 +1,27 @@
-"use strict";
+import axios from 'axios'
+import https from 'https'
+import url from 'url'
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.gitlabRequest = gitlabRequest;
-
-var _axios = _interopRequireDefault(require("axios"));
-
-var _https = _interopRequireDefault(require("https"));
-
-var _url = _interopRequireDefault(require("url"));
-
-function gitlabRequest(path, params, gitlab) {
-  return lazyClient(gitlab).get(path, {
-    params
-  });
+export function gitlabRequest(path, params, gitlab) {
+  return lazyClient(gitlab).get(path, {params})
 }
 
-var clients = new Map();
+const clients = new Map()
 
 function lazyClient(gitlab) {
-  var gitlabUrl = gitlab.url;
-
+  const gitlabUrl = gitlab.url
   if (gitlabUrl === undefined) {
     // eslint-disable-next-line no-console
-    console.log('Got undefined url for ' + JSON.stringify(gitlab));
+    console.log('Got undefined url for ' + JSON.stringify(gitlab))
   }
-
   if (!clients.get(gitlabUrl)) {
-    var client = _axios.default.create({
-      baseURL: _url.default.resolve(gitlabUrl, '/api/v4/'),
-      headers: {
-        'PRIVATE-TOKEN': gitlab['access-token']
-      },
-      httpsAgent: new _https.default.Agent({
-        keepAlive: true,
-        ca: gitlab.ca
-      }),
-      timeout: 30 * 1000
-    });
-
-    clients.set(gitlabUrl, client);
+    const client = axios.create({
+        baseURL: url.resolve(gitlabUrl, '/api/v4/'),
+        headers: {'PRIVATE-TOKEN': gitlab['access-token']},
+        httpsAgent: new https.Agent({keepAlive: true, ca: gitlab.ca}),
+        timeout: 30 * 1000
+      })
+    clients.set(gitlabUrl, client)
   }
-
-  return clients.get(gitlabUrl);
-}
+  return clients.get(gitlabUrl)
+}