huddeldaddel / gitlab-team-dashboard

Team focussed web dashboard for GitLab

GitLab Team Dashboard

This is a dynamic dashboard that displays the status of development projects managed in GitLab (on site or in the cloud). The dashboard is designed to be displayed on a TV screen or some large display.

The dashboard loops through multiple views. These views currently are:

• Status of CI/CD Pipelines
  
• List of oldest open Merge Requests
  

Build

Requirements

• Node.js version 18 or newer
• npm

Steps

• Get the source code
• Open a shell and change into root folder of project
• Run npm i to install dependencies
• Run npm run build to generate static pages
• Now deploy content of the build folder to some web server

Hosted version

No need to build and host the dashboard yourself - unless you want to extend or adapt the source code. You can always find the latest version at https://gitlab-dashboard.thomas-werner.engineer.

Security

The dashboard is designed to run entirely in the browser and is not dependent on a backend server. Configuration data - like credentials - and the dashboard data itself are stored in the local storage of the browser. This simplifies the deployment and operation of the dashboard and ensures that sensitive information does not fall into unauthorised hands.

gitlab-team-dashboard's Issues

Dashboard should refresh data immediately when loaded

Currently the dashboard waits one minute before trying to refresh the data. That should be changed.

List of open Merge Requests

There should be a second type of board that displays the open Merge requests - if there are any.
The merge requests should be ordered by age descending. The MRs should be displayed as bar in a bar chart. (Optionally) The bar chart should have thresholds, e.g like

• First threshold: 1 day
• Second threshold: 3 days

Show placeholders

Dashboard boards should display placeholder when not matching data has been found

Broken layout when screen is rotated

Layout is broken when height of browser window is > width of browser window

Reset interval between board flips to 60 seconds

Current value was set only for debugging

Empty board page when number of pipelines = max # of pipelines

When the number of actual pipelines is a multiple of the configured number of tiles per pipeline board, there appears an empty dashboard at the end.

Implement layout structure

Implement the basic layout structure for the page

Show loading animation

Dashboard should show an animation until data has been loaded

Add welcome page

The Dashboard should show a welcome page with some basic information about the dashboard and why people don't have to be afraid to enter sensitive information.

If no configuration is available then the user should only be able to move to the configuration afterwards.
If the configuration has been created then the user can choose to go to the dashboard.

Configure refresh interval

The configuration should be extended to cover the data refresh interval.

Reload page regularly

The dashboard should reload the static page files (from the server) regularly. This should make sure that the dashboard uses the latest static build of the website - even when the browser is not restarted / reloaded.

Update README

Readme should show additional information:

• Build status badge
• Link to hosted dashboard

Wrong Project Name in Open Merge Requests

For each merge request entry is the wrong project mentioned in the overview of the Open Merge Requests

Add badges for codiga

We're using Codiga to perform static checks of the code base. The badges should be visible in the README:

Score:
https://api.codiga.io/project/35798/score/svg

Grade:
https://api.codiga.io/project/35798/status/svg

Add carousel for pipelines

Currently the dashboard shows only a subset of pipelines when there are more pipelines then the configured limit. Instead the dashboard should have a carousel to switch between multiple pages showing a subset each.

Add screenshots

Add some screenshots to the README - and maybe the home page

Replace implementation of gaps between CI tiles

Currently a CSS is configured for the CI board. With some screen sizes that can lead to tiles beeing closer together than the configured gap. Instead a margin should be set on tiles to make sure that there is always some space between them.