alexkrauss/gitlab-timeline.html

## gitlab-timeline.html
<html>
<head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">

   // This is a quick hack to be able to see Gantt-like Timelines of gitlab build pipelines.
   // It makes it easier to diagnose the running time of the pipelines and understand resource usage.
   // Ideally, gitlab would directly provide such a view in its frontend.

    google.charts.load('current', {'packages':['gantt']});
    google.charts.setOnLoadCallback(createChart);

	/** Parses a date to a javascript Date value. Optionally, substitutes a default value if the input is null. */
    function convertDate(date, defaultDate) {
      if (date === null) {
        if (defaultDate) {
		  return defaultDate;
		} else {
		  return null;
		}
      }
      return new Date(date);
    }

	/** Converts a job object (from the Gitlab API) into a row object for the Google Charts API. */
    function convertJob(job) {

	  var isRunning = job.status === 'running';

      return [job.id.toString(), job.name, job.pipeline.id.toString(),
         convertDate(job.started_at), convertDate(job.finished_at, new Date()), null, isRunning ? 50 : 100, null];

    }

	/** Called when the form is submitted. Initiates the API call. */
    function formSubmitted() {

	  var gitlabUrl = document.getElementById('gitlab-url').value;
	  var token = document.getElementById('token').value;
	  var projectId = document.getElementById('project-id').value;

      fetch(`${gitlabUrl}/api/v4/projects/${projectId}/jobs?per_page=50&private_token=${token}`)
         .then(result => result.json()).then(rawData => drawChart(rawData));
    }

	/** Renders the chart given the raw data from the API. */
    function drawChart(rawData) {

      var rows =
        rawData
          .filter(job => job.status !== 'created')
          .map(convertJob);

      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Job ID');
      data.addColumn('string', 'Job Name');
	  data.addColumn('string', 'Pipeline');
      data.addColumn('date', 'Start');
      data.addColumn('date', 'End');
      data.addColumn('number', 'Duration');
      data.addColumn('number', 'Percent Complete');
      data.addColumn('string', 'Dependencies');

      data.addRows(rows);
      var options = {
	    gantt: {
		  trackHeight: 28
		},
		height: rows.length * 28 + 40
	  };

      var chart = new google.visualization.Gantt(document.getElementById('chart_div'));

      chart.draw(data, options);
    }

  </script>
</head>
<body>
  <form onsubmit="formSubmitted(); return false;">
    Gitlab URL: <input type="text" id="gitlab-url" value="https://gitlab.qaware.de">
    Access Token: <input type="text" id="token" value="">
    Project id: <input type="text" id="project-id" value="29">
	<button type="submit">Draw Gantt Chart</button>
  </form>

  <div id="chart_div" style="width:98%"></div>
</body>
	<html>
	<head>
	<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
	<script type="text/javascript">

	// This is a quick hack to be able to see Gantt-like Timelines of gitlab build pipelines.
	// It makes it easier to diagnose the running time of the pipelines and understand resource usage.
	// Ideally, gitlab would directly provide such a view in its frontend.

	google.charts.load('current', {'packages':['gantt']});
	google.charts.setOnLoadCallback(createChart);

	/** Parses a date to a javascript Date value. Optionally, substitutes a default value if the input is null. */
	function convertDate(date, defaultDate) {
	if (date === null) {
	if (defaultDate) {
	return defaultDate;
	} else {
	return null;
	}
	}
	return new Date(date);
	}

	/** Converts a job object (from the Gitlab API) into a row object for the Google Charts API. */
	function convertJob(job) {

	var isRunning = job.status === 'running';

	return [job.id.toString(), job.name, job.pipeline.id.toString(),
	convertDate(job.started_at), convertDate(job.finished_at, new Date()), null, isRunning ? 50 : 100, null];

	}

	/** Called when the form is submitted. Initiates the API call. */
	function formSubmitted() {

	var gitlabUrl = document.getElementById('gitlab-url').value;
	var token = document.getElementById('token').value;
	var projectId = document.getElementById('project-id').value;

	fetch(`${gitlabUrl}/api/v4/projects/${projectId}/jobs?per_page=50&private_token=${token}`)
	.then(result => result.json()).then(rawData => drawChart(rawData));
	}

	/** Renders the chart given the raw data from the API. */
	function drawChart(rawData) {

	var rows =
	rawData
	.filter(job => job.status !== 'created')
	.map(convertJob);

	var data = new google.visualization.DataTable();
	data.addColumn('string', 'Job ID');
	data.addColumn('string', 'Job Name');
	data.addColumn('string', 'Pipeline');
	data.addColumn('date', 'Start');
	data.addColumn('date', 'End');
	data.addColumn('number', 'Duration');
	data.addColumn('number', 'Percent Complete');
	data.addColumn('string', 'Dependencies');

	data.addRows(rows);
	var options = {
	gantt: {
	trackHeight: 28
	},
	height: rows.length * 28 + 40
	};

	var chart = new google.visualization.Gantt(document.getElementById('chart_div'));

	chart.draw(data, options);
	}

	</script>
	</head>
	<body>
	<form onsubmit="formSubmitted(); return false;">
	Gitlab URL: <input type="text" id="gitlab-url" value="https://gitlab.qaware.de">
	Access Token: <input type="text" id="token" value="">
	Project id: <input type="text" id="project-id" value="29">
	<button type="submit">Draw Gantt Chart</button>
	</form>

	<div id="chart_div" style="width:98%"></div>
	</body>