Convert Gitlab Raw Log into HTML Using PHP

This tutorial help to convert gitlab raw log into html color view. The gitlab ci/cd are generating logs for each jobs. You can view color view logs using gitlab view.

I have asked question into the https://stackoverflow.com/questions/66149229/convert-gitlab-raw-logs-into-html-color-view-using-php as well, but did not get answer from any body So I have shared my solution that can be helpful.

Use case :-

I am creating a angularjs ui where user can see gitlab job logs, So we have created a rest call that ll return raw logs as text and render into html UI.

How to get logs using API

The gitlab v4 api is providing a rest end point to get a log (trace) of a specific job of a project.

GET /projects/:id/jobs/:job_id/trace

Where id is the project id and job_id is the job id.

I have created a Laravel api that will return html format of raw git job logs, I have taken this job logs but in git raw api there is ANSI codes that need to convert into HTML5 format.

The trace url would be –
https://gitlab.com/api/v4/projects/7909770/jobs/101128183/trace

When we access above api call, We ll get the raw logs with ansi characters, that ll hold color value;

I am using laravel 7 framework, so i ll use sensiolabs/ansi-to-html package that help to convert ANSI character into html.

Let’s install packages –
composer require sensiolabs/ansi-to-html

Convert Gitlab Raw into HTML

We have installed package into the application, open the testController.php file and added below code into the top of the file –

use SensioLabs\AnsiConverter\AnsiToHtmlConverter;

Created the instance into the controller constructor method :

protected $ansihtml;
public function __construct() {
      $this->ansihtml = new AnsiToHtmlConverter();
   }

Let’s call convert method over the gitlab raw logs.

public function jobLogs($job_id, $pipeline_id) {
$ansi = $this->getGitlabLogs($project_id, $job_id);
$html = $this->ansihtml->convert($ansi);
return html;
}

When you render above response into html file, You will get below view –