GitlabColorLog

GitlabColorLog.js

// ==UserScript==
// @name         GitlabColorLog
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  This scripts will highlight lines containing errors on Gitlab build logs.
// @description  You can also use the keys ArrowLeft-ArrowRight to scroll between errors.
// @author       lpapez
// @match        https://gitlab.com/refurbed/platform/-/jobs/*
// @grant        none
// ==/UserScript==

/**
 * Coloring stuff 
 */ 
const errorStrings = [
	"FAIL: ",
	"Error Trace:",
]

const colorErrorLines = async () => {
	await new Promise(resolve => setTimeout(resolve, 500))
	for (const line of document.querySelectorAll(".log-line")){
	    if(errorStrings.some(e => line.innerHTML.includes(e))){
			line.style.color = "red"
	    }
	}
}

const cheaper = () => {
	document.addEventListener("click", colorErrorLines)
	setTimeout(colorErrorLines, 2000)
}
const moreRobust = () => {
	setInterval(colorErrorLines, 500)
}
moreRobust()

/**
 * Error scrolling stuff
 */ 
const errorLocations = []
const findErrorLocations = () => {
	for (const e of document.querySelectorAll(".log-line")){
		for(const errorString of errorStrings){
			if(e.innerHTML.includes(errorString)){
				errorLocations.push(e)
			}
		}
	}
}

function nonnegativeMod(n, m) {
  return ((n % m) + m) % m;
}

let errorIndex = undefined
const scrollToError = () => {
	errorLocations[nonnegativeMod(errorIndex, errorLocations.length)].scrollIntoView({block: "center"})
}
const firstKeypressAdaptor = (errorCode) => {
	if (typeof errorIndex === "undefined") {
		errorIndex = errorCode === "ArrowLeft" ? 0 : -1
	}
}
document.addEventListener('keyup', (e) => {
	findErrorLocations()
	firstKeypressAdaptor(e.code)
	if (e.code === "ArrowLeft" || e.code === "KeyL") {
		--errorIndex
		scrollToError()
	}
	else if (e.code === "ArrowRight" || e.code === "KeyR") {
		++errorIndex
		scrollToError()
	}
});

/**
 * Break lines in a sane way
 */
const style = document.createElement('style');
style.textContent = `
.log-line {
	width: 100%;
	word-break: break-word;
}
`;
document.head.append(style);