Question about progress bar

[Burt Leung]

Hello all,

This is sort of a newbie question so I'm sorry about that and appreciate any help. :)

I successfully implemented a Hudson plugin by reading the tutorials and reading the code in other existing Hudson plugins. Now I'm trying to figure out how the Hudson core code dynamically/iteratively updates its progress bar for the HistoryWidget.

I think I narrowed it down to the javascript function in the hudson-behavior.js file:
====== excerpt start =======
function updateBuildHistory(ajaxUrl,nBuild) {
    if(isRunAsTest) return;
    $('buildHistory').headers = ["n",nBuild];

    function updateBuilds() {
        var bh = $('buildHistory');
        new Ajax.Request(ajaxUrl, {
            requestHeaders: bh.headers,
            onSuccess: function(rsp) {
                var rows = bh.rows;

                //delete rows with transitive data
                while (rows.length > 2 && Element.hasClassName(rows[1], "transitive"))
                    Element.remove(rows[1]);

                // insert new rows
                var div = document.createElement('div');
                div.innerHTML = rsp.responseText;
                Behaviour.applySubtree(div);

                var pivot = rows[0];
                var newRows = div.firstChild.rows;
                for (var i = newRows.length - 1; i >= 0; i--) {
                    pivot.parentNode.insertBefore(newRows[i], pivot.nextSibling);
                }

                // next update
                bh.headers = ["n",rsp.getResponseHeader("n")];
                window.setTimeout(updateBuilds, 5000);
            }
        });
    }
    window.setTimeout(updateBuilds, 5000);
}
====== excerpt end =======


I'm guessing the following piece of code from the above javascript function is doing the "iteration" for updating the progressbar?
                // next update
                bh.headers = ["n",rsp.getResponseHeader("n")];
                window.setTimeout(updateBuilds, 5000);

It appears to be a recursion although I'm not sure what the following line does for the function:
" bh.headers = ["n",rsp.getResponseHeader("n")];"
Is this the stopping condition?

Thanks in advance for your help!

Burt

[Burt Leung]

Hello All,

Since I arrived at a solution I decided to post it. My original issue, which I didn't detail in my first email was to figure out a way to dynamically show the progress (status) as a trend was being calculated. The plugin I'm creating does some pre-initialization in the case that it is installed and existing builds don't have data yet. This can take some time at the beginning.

I found my solution by looking over how /hudson/model/run/progressiveText.jelly worked in the core Hudson project for the hudson.model.Run class. There is a recursion where the javascript continually checks whether the response has a certain header value or not. This header is set in the Run class' "doProgressiveText" method.

Below is what I wrote script-wise. It shows a spinner button if there is still loading being done otherwise it shows the trend graph. It's sort of a rough draft since I still have other things to implement.

floatingBox.jelly:
============
<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:d="jelly:define" xmlns:l="/lib/layout" xmlns:t="/lib/hudson" xmlns:f="/lib/form" xmlns:i="jelly:fmt" xmlns:local="local">

    <div align="right">
        <div class="test-trend-caption">
            ${it.displayName}
        </div>
       
        <div id="trendPlaceHolder" style="display: none;">
        </div>

        <div id="spinnerPlaceHolder" style="display: none;">
            <img src="/images/spinner.gif"/>
        </div>

       
    </div>
   
    <script>
        function showTrend(staplerURL) {
            new Ajax.Request(staplerURL, {
                onComplete: function(rsp,_) {
                    var trendPlaceHolder = document.getElementById('trendPlaceHolder');
                    var spinnerPlaceHolder = document.getElementById('spinnerPlaceHolder')
                    if (rsp.getResponseHeader("isFetching") == "true") {
                        trendPlaceHolder.style.display = "none";
                        spinnerPlaceHolder.style.display = "";
                        setTimeout(function() {showTrend(staplerURL);}, 1000);
                    }
                    else {
                        var trendImg = document.getElementById('trendImg');
                        if (trendImg == null || trendImg == undefined) {
                            trendImg = document.createElement("img");
                            trendImg.id = 'trendImg';
                               
                            trendPlaceHolder.appendChild(trendImg);
                        }
                        alert("rsp.responseText=" + rsp.responseText);
                        trendImg.setAttribute('src', "someStaplerURL");
                       
                        trendPlaceHolder.style.display = "";
                        spinnerPlaceHolder.style.display = "none";
                    }
                }
           });
        }

        showTrend("someStaplerURL");
    </script>
   
</j:jelly>
============

On Wed, Oct 28, 2009 at 8:17 AM, Burt Leung <[hidden email]> wrote:

Hello all,

This is sort of a newbie question so I'm sorry about that and appreciate any help. :)

I successfully implemented a Hudson plugin by reading the tutorials and reading the code in other existing Hudson plugins. Now I'm trying to figure out how the Hudson core code dynamically/iteratively updates its progress bar for the HistoryWidget.

I think I narrowed it down to the javascript function in the hudson-behavior.js file:
====== excerpt start =======
function updateBuildHistory(ajaxUrl,nBuild) {
    if(isRunAsTest) return;
    $('buildHistory').headers = ["n",nBuild];

    function updateBuilds() {
        var bh = $('buildHistory');
        new Ajax.Request(ajaxUrl, {
            requestHeaders: bh.headers,
            onSuccess: function(rsp) {
                var rows = bh.rows;

                //delete rows with transitive data
                while (rows.length > 2 && Element.hasClassName(rows[1], "transitive"))
                    Element.remove(rows[1]);

                // insert new rows
                var div = document.createElement('div');
                div.innerHTML = rsp.responseText;
                Behaviour.applySubtree(div);

                var pivot = rows[0];
                var newRows = div.firstChild.rows;
                for (var i = newRows.length - 1; i >= 0; i--) {
                    pivot.parentNode.insertBefore(newRows[i], pivot.nextSibling);
                }

                // next update
                bh.headers = ["n",rsp.getResponseHeader("n")];
                window.setTimeout(updateBuilds, 5000);
            }
        });
    }
    window.setTimeout(updateBuilds, 5000);
}
====== excerpt end =======


I'm guessing the following piece of code from the above javascript function is doing the "iteration" for updating the progressbar?
                // next update
                bh.headers = ["n",rsp.getResponseHeader("n")];
                window.setTimeout(updateBuilds, 5000);

It appears to be a recursion although I'm not sure what the following line does for the function:
" bh.headers = ["n",rsp.getResponseHeader("n")];"
Is this the stopping condition?

Thanks in advance for your help!

Burt