Highlight Versions on Octopus Deploy Dashboard

Unless you enjoy carefully comparing numbers, the Octopus Deploy Dashboard is a bit of a pain when it comes to seeing what version is one what environment. What follows is a terribly hacky trick you can use to colourise the version numbers on the dashboard (a feature that I imagine will eventually become a graceful product feature some time in the future… hint hint!).

The hacky part of this is that it a bit of JavaScript you can fire into your browser console… the good part is that the colours have been chosen to provide good contrast, especially where versions are close together.

Colour Versions in Octopus Deploy

You can edit the script if you want to use your own colours:

var colouring = function () {
	var colors = ['Crimson', 'Orange', 'Gold', 'PaleGreen', 'Aqua', 'Violet', 'BlueViolet'];
	var nextColorIndex = 0;
	var versions = [];

	var elems = document.getElementsByClassName('version');

	for (var i = 0; i < elems.length; i++) {
		var version = elems[i].innerHTML;
		var color = null;
		for (var j = 0; j < versions.length; j++) {
			if (versions[j].version == version) {
				color = versions[j].color;
				break;
			}
		}
		
		if (!color) {
			color =  colors[nextColorIndex];
			versions.push({
				version: version,
				color: color
			});
			
			nextColorIndex++;
			if (nextColorIndex >= colors.length) {
				nextColorIndex = 0;
			}
		}

		elems[i].parentElement.parentElement.parentElement.style.backgroundColor = color;
	}
};

colouring();

var octodashInterval = octodashInterval || null;
window.clearInterval(octodashInterval);
octodashInterval = window.setInterval(colouring, 10000);

You can also use this bookmarklet:

javascript:{var colouring = function () { var colors = ['Crimson', 'Orange', 'Gold', 'PaleGreen', 'Aqua', 'Violet', 'BlueViolet']; var nextColorIndex = 0; var versions = []; var elems = document.getElementsByClassName('version'); for (var i = 0; i < elems.length; i++) { var version = elems[i].innerHTML; var color = null; for (var j = 0; j < versions.length; j++) { if (versions[j].version == version) { color = versions[j].color; break; } } if (!color) { color = colors[nextColorIndex]; versions.push({ version: version, color: color }); nextColorIndex++; if (nextColorIndex >= colors.length) { nextColorIndex = 0; } } elems[i].parentElement.parentElement.parentElement.style.backgroundColor = color; } }; colouring(); var octodashInterval = octodashInterval || null; window.clearInterval(octodashInterval); octodashInterval = window.setInterval(colouring, 10000);}; void(0);