Jenkins. Przeglądanie logów konsoli dla job’a korzystającego z Build Flow Plugin

Przeglądanie w Jenkinsie logoów z konsoli dla job’a, który wywołuje inne job’y za pomocą Build Flow Plugin to zadanie wymagające dużo cierpliwości. W szczególności jeśli zagnieżdżeń jest sporo. Jak to bywa w Jenkinsie lekiem na wszelkie niedogodności i braki jest zainstalowanie odpowiedniego pluginu. Jednak w tym wypadku nie udało mi się znaleźć niczego odpowiedniego. Okazuje się, że można temu zaradzić w dość prosty sposób.

Każdy rozpoczęty build podrzędnego job’a odkładany jest w logu konsoli w formie linka. Teraz tylko wystarczy wesprzeć się jakąś biblioteką JS i doładowywać logi podrzędnego job’a do obecnie przeglądanych logów.

Jak podpiąć pod Jenkinsa dowolny plik JS?

Odpowiedz na to pytanie nie będzie szokująca 😉 Trzeba użyć pluginu – Page Markup.

Page Markup Plugin daje możliwość dopisania kodu HTML, który będzie dodawany na każdej z podstron Jenkinsa.

Przykładowa realizacja przy użyciu jQuery.

Zmusić Jenkinsa do ładowania jQuery można w bardzo prosty sposób – za pomocą… pluginu 😉
jQuery Plugin

Dalej zostaje nam tylko napisanie prostego skryptu i podpięcie go po Jenkinsa. Plik JS możemy wrzucić do katalogu userContent w głównym katalogu naszego serwera CI. Następnie wchodzimy w Jenkinsie do opcji Manage Jenkns -> Configure System -> Additional Page HTML Markup i wstawiamy tam

<script src="http://__SERVER__/userContent/___NAZWA_PLIKU___.js"></script>

Sam skrypt może wyglądać tak:

(function($) {
    $(document).ready(function() {
        function addDetailsLinks(mainContainer) {
            
            if ($(mainContainer).find(".console-output").size()) {
                $(mainContainer).find(".console-output a:contains(#)").each(function() {
                    
                    var consoleDetailsArea = $("<div>")
                            .addClass("consoleDetailsArea");
                    var consoleLinkHref = $(this).attr("href") + "console";
                    var detailsLinkIco = $("<img>")
                            .attr("src", "userContent/images/terminal.png")
                            .attr("alt", " (Show console)")
                            .css({
                                "padding-left": "5px"
                            });
                    var detailsConsoleLink = $("<a>")
                            .attr("href", consoleLinkHref)
                            .addClass("showConsoleDetails")
                            .html(detailsLinkIco);
                    
                    $(detailsConsoleLink).on('click', function(event) {
                        event.preventDefault();

                        var consoleDetailsArea = $(this).next(".consoleDetailsArea");
                        consoleDetailsArea.load($(this).attr("href") + " .console-output", function() {
                            addDetailsLinks(consoleDetailsArea);
                        });
                        
                        consoleDetailsArea.css({
                            "border": "1px solid black",
                            "background": "#eeeeee",
                            "margin": "30px",
                            "padding": "10px"
                        });
                    });
                    
                    $(detailsConsoleLink).insertAfter(this);
                    $(consoleDetailsArea).insertAfter(detailsConsoleLink);
                });
            }
        }

        addDetailsLinks(document);
    });
})(jQuery);

Efekty powinien być taki jak na screenie poniżej. Obok linków pojawią się ikonki konsoli. Po kliknięciu jest doładowywany log konsoli konkretnego builda.

U mnie działa 😉