Add config horizontal to switch for horizontal layout of jobs

README.md

@@ -87,6 +87,7 @@ Optional configuration properties:
 - `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`
 - `groupSuccessfulProjects` - If set to `true` projects with successful pipeline status are grouped by namespace. Projects with other pipeline statuses are still rendered seperately. Default value is `false`.
+- `horizontal` - If set to `true` jobs are ordered horizontally to stages. Default value is `false`.
 - `auth / username` - Enables HTTP basic authentication with the defined username and password.
 - `auth / password` - Enables HTTP basic authentication with the defined username and password.
 - `projectsOrder` - Array of project attributes to use for sorting projects. Default value is `['name']` (available attributes are `status, name, id, nameWithoutNamespace, group`).

public/client.less

@@ -161,6 +161,22 @@ ol.stages {
       white-space: nowrap;
     }
   }
+
+  .stage.horizontal {
+    flex-wrap: nowrap;
+    align-items: flex-start;
+    flex-direction: row;
+
+    .name {
+      min-width: 170px;
+    }
+  }
+}
+
+ol.stages.horizontal {
+  flex-direction: column;
+  flex-wrap: nowrap;
+  flex-grow: 1;
 }
 
 ol.jobs {
@@ -228,6 +244,19 @@ ol.jobs {
   }
 }
 
+ol.jobs.horizontal {
+  flex-direction: row;
+  flex-wrap: wrap;
+
+  li {
+    margin-right: 5px;
+  }
+
+  :last-child {
+    margin-bottom: 5px;
+  }
+}
+
 ol.groups {
   list-style: none;
   width: 100vmax;

src/app.js

@@ -36,6 +36,7 @@ const globalState = {
   zoom: config.zoom,
   projectsOrder: config.projectsOrder,
   columns: config.columns,
+  horizontal: config.horizontal,
   groupSuccessfulProjects: config.groupSuccessfulProjects
 }
 

src/client/gitlab-types.ts

@@ -3,6 +3,7 @@ export interface GlobalState {
   columns: number
   error: string | null
   groupSuccessfulProjects: boolean
+  horizontal: boolean
   projects: Project[] | null
   projectsOrder: string[]
   zoom: number

src/client/groupedProjects.tsx

@@ -4,20 +4,20 @@ import {Projects} from './projects'
 import React from 'react'
 import type {Project} from './gitlab-types'
 
-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 {
+export function GroupedProjects({projects, projectsOrder, groupSuccessfulProjects, zoom, columns, now, horizontal, screen}: {projects: Project[], projectsOrder: string[], groupSuccessfulProjects: boolean, zoom: number, columns: number, now: number, horizontal: boolean, screen: {id: number, total: number}}): JSX.Element {
   if (groupSuccessfulProjects) {
-    return renderProjectsGrouped(projects, projectsOrder, zoom, columns, now, screen)
+    return renderProjectsGrouped(projects, projectsOrder, zoom, columns, now, horizontal, screen)
   }
-  return <Projects now={now} zoom={zoom} columns={columns} projects={projects} projectsOrder={projectsOrder} screen={screen}/>
+  return <Projects now={now} zoom={zoom} columns={columns} horizontal={horizontal} projects={projects} projectsOrder={projectsOrder} screen={screen}/>
 }
 
-function renderProjectsGrouped(projects: Project[], projectsOrder: string[], zoom: number, columns: number, now: number, screen: {id: number, total: number}) {
+function renderProjectsGrouped(projects: Project[], projectsOrder: string[], zoom: number, columns: number, now: number, horizontal: boolean, screen: {id: number, total: number}) {
   const successfullProjects = projects.filter(({status}) => status === 'success')
   const otherProjects= projects.filter(({status}) => status !== 'success')
   const groupedProjects = groupBy(successfullProjects, 'group')
 
   return <React.Fragment>
-    <Projects now={now} zoom={zoom} columns={columns} projects={otherProjects} projectsOrder={projectsOrder} screen={screen}/>
+    <Projects now={now} zoom={zoom} columns={columns} horizontal={horizontal} projects={otherProjects} projectsOrder={projectsOrder} screen={screen}/>
     <Groups now={now} zoom={zoom} columns={columns} groupedProjects={groupedProjects}/>
   </React.Fragment>
 }

src/client/index.tsx

@@ -16,6 +16,7 @@ class RadiatorApp extends React.Component<unknown, GlobalState> {
       columns: 1,
       error: null,
       groupSuccessfulProjects: false,
+      horizontal: false,
       projects: null,
       projectsOrder: [],
       now: 0,
@@ -34,7 +35,7 @@ class RadiatorApp extends React.Component<unknown, GlobalState> {
 
   render = () => {
     const {screen} = this.args
-    const {now, zoom, columns, projects, projectsOrder, groupSuccessfulProjects} = this.state
+    const {now, zoom, columns, projects, projectsOrder, groupSuccessfulProjects, horizontal} = this.state
     return <div>
       {this.renderErrorMessage()}
       {this.renderProgressMessage()}
@@ -43,6 +44,7 @@ class RadiatorApp extends React.Component<unknown, GlobalState> {
         <GroupedProjects now={now} zoom={zoom} columns={columns}
                         projects={projects} projectsOrder={projectsOrder}
                         groupSuccessfulProjects={groupSuccessfulProjects}
+                        horizontal={horizontal}
                         screen={screen}/>
       }
     </div>

src/client/jobs.tsx

@@ -17,7 +17,7 @@ const JOB_STATES_IN_INTEREST_ORDER: JobStatus[] = [
   'skipped'
 ]
 
-export function Jobs({jobs, maxNonFailedJobsVisible}: {jobs: Job[], maxNonFailedJobsVisible: number}): JSX.Element {
+export function Jobs({jobs, maxNonFailedJobsVisible, horizontal}: {jobs: Job[], maxNonFailedJobsVisible: number, horizontal: boolean}): JSX.Element {
   const [failedJobs, nonFailedJobs] = partition(jobs, {status: 'failed'})
   const filteredJobs = sortByOriginalOrder(
     failedJobs.concat(
@@ -37,7 +37,9 @@ export function Jobs({jobs, maxNonFailedJobsVisible}: {jobs: Job[], maxNonFailed
     .map(([status, count]) => `${count}${NON_BREAKING_SPACE}${status}`)
     .join(', ')
 
-  return <ol className="jobs">
+  const horizontalClass = horizontal ? ' horizontal' : ''
+
+  return <ol className={`jobs${horizontalClass}`}>
     {filteredJobs.map(job => <JobElement job={job} key={job.id}/>)}
     {
       hiddenJobs.length > 0 ? <li className="hidden-jobs">+&nbsp;{hiddenJobsText}</li> : null

src/client/projects.tsx

@@ -4,24 +4,24 @@ import sortBy from 'lodash/sortBy'
 import {Stages} from './stages'
 import type {Project} from './gitlab-types'
 
-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 {
+export function Projects({columns, now, horizontal, projects, projectsOrder, screen, zoom}: {columns: number, now: number, horizontal: boolean, 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}/>)
+      .map(project => <ProjectElement now={now} columns={columns} horizontal={horizontal} project={project} key={project.id}/>)
     }
   </ol>
 }
 
-function ProjectElement({columns, now, project}: {columns: number, now: number, project: Project}) {
+function ProjectElement({columns, now, horizontal, project}: {columns: number, now: number, horizontal: boolean, 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}/>
+    <Stages stages={pipeline.stages} maxNonFailedJobsVisible={project.maxNonFailedJobsVisible} horizontal={horizontal}/>
     <Info now={now} pipeline={pipeline}/>
   </li>
 }

src/client/stages.tsx

@@ -2,17 +2,21 @@ 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">
+export function Stages({stages, maxNonFailedJobsVisible, horizontal}: {stages: Stage[], maxNonFailedJobsVisible: number, horizontal: boolean}): JSX.Element {
+  const horizontalClass = horizontal ? ' horizontal' : ''
+
+  return <ol className={`stages${horizontalClass}`}>
     {stages.map(stage =>
-      <StageElement stage={stage} maxNonFailedJobsVisible={maxNonFailedJobsVisible} key={stage.name}/>
+      <StageElement stage={stage} maxNonFailedJobsVisible={maxNonFailedJobsVisible} horizontal={horizontal} key={stage.name}/>
     )}
   </ol>
 }
 
-function StageElement({stage, maxNonFailedJobsVisible}: {stage: Stage, maxNonFailedJobsVisible: number}) {
-  return <li className="stage">
+function StageElement({stage, maxNonFailedJobsVisible, horizontal}: {stage: Stage, maxNonFailedJobsVisible: number, horizontal: boolean}) {
+  const horizontalClass = horizontal ? ' horizontal' : ''
+
+  return <li className={`stage${horizontalClass}`}>
     <div className="name">{stage.name}</div>
-    <Jobs jobs={stage.jobs} maxNonFailedJobsVisible={maxNonFailedJobsVisible}/>
+    <Jobs jobs={stage.jobs} maxNonFailedJobsVisible={maxNonFailedJobsVisible} horizontal={horizontal}/>
   </li>
 }

src/config.js

@@ -11,6 +11,7 @@ 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.horizontal = config.horizontal || false
 config.groupSuccessfulProjects = config.groupSuccessfulProjects || false
 config.projectsOrder = config.projectsOrder || ['name']
 config.gitlabs = config.gitlabs.map((gitlab) => {