Steve Fenton

Highlight versions on the Octopus Deploy dashboard

Some time ago, I wrote a JavaScript bookmarklet that you could use to highlight version numbers in your Octopus Deploy dashboard. This makes it easier to compare versions across your environments.

Octodash Output

The code for the bookmarklet is below, but I am currently awaiting approval for a simple Google Chrome extension for this script, which adds a button to your browser that you can use to highlight the versions. I will link to the extension so you can install it in Chrome or Edge as soon as it is available.

Chrome and Edge extensions

The source code for the Chrome extension is available on GitHub.

You can install it from the Octodash Chrome Extension page.

Or, you can install it from the Octodash Edge Extension page.

Octodash Listing

You can also find out more about writing browser extensions.

The original script

The original script is below, you can just run it via your browser tools’ console tab. You can change the colors array if you want a different colour set.

const colouring = function () {
    var colors = ['#fea3aa', '#f8b88b', '#faf884', '#baed91', '#b2cefe', '#f2a2e8'];
    var nextColorIndex = 0;
    var versions = [];

    var elems = document.querySelectorAll('[class^=style_version__');
    console.log(`Found ${elems.length} items`);

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

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

This script has been updated for the latest version of Octopus (July 2020).

You can test the scriptlet on the Octopus Demo.

Written by Steve Fenton on