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('style_version__3y8GX');

    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('style_version__3y8GX'); 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);

This script has been updated for the latest version of Octopus (March 2018) – but bear in mind that it looks like the class name could be volatile.

If you find things aren’t working, the line to change is document.getElementsByClassName('style_version__3y8GX'); – which points to the container for the deployment information.

You can test the scriptlet on the Octopus Demo.