Uploaded image for project: 'Jenkins'
  1. Jenkins
  2. JENKINS-64586

Test duration trend chart does not appear, because of jQuery version mismatch

    XMLWordPrintable

    Details

    • Type: Bug
    • Status: Resolved (View Workflow)
    • Priority: Minor
    • Resolution: Fixed
    • Component/s: junit-plugin
    • Labels:
      None
    • Environment:
      Jenkins 2.263.1
      JUnit Plugin 1.48
      ECharts API Plugin 4.9.0-2
      Microsoft Edge Version 87.0.664.75 (Official build) (64-bit)
    • Similar Issues:
    • Released As:

      Description

      After the JENKINS-62096 ECharts migration, the test duration trend chart at https://REDACTED/jenkins/job/REDACTED/job/master/327/testReport/history/ does not appear at all; there are no axes or legends or anything. The test result trend chart however works OK.

      The problem persists even if I edit history.js as follows:

      • For JENKINS-64585, comment out the $('[data-toggle="tooltip"]').tooltip(); call.
      • For JENKINS-64587, change the top-level statement to 
        (function ($, view) {
    $(function () {
        ...
    });
})(jQuery3, view);

      Therefore, the problem does not seem to be caused by those issues.

        Attachments

          Issue Links

          is caused by

          Improvement - An improvement or enhancement to an existing feature or task. JENKINS-62096 Migrate History graph to ECharts

          • Minor - Minor loss of function, or other problem where easy workaround is present.
          • Resolved
          relates to

          Bug - A problem which impairs or prevents the functions of the product. JENKINS-64587 JavaScript error in history.js: Cannot read property 'getAttribute' of null

          • Minor - Minor loss of function, or other problem where easy workaround is present.
          • Resolved

          Bug - A problem which impairs or prevents the functions of the product. JENKINS-64585 JavaScript error in history.js: $(...).tooltip is not a function

          • Minor - Minor loss of function, or other problem where easy workaround is present.
          • Resolved

            Activity

            Ascending order - Click to sort in descending order
            Hide
            Permalink
            kon Kalle Niemitalo added a comment -

            It seems the 'slid.bs.carousel' event handler is not called at all.

            Show
            kon Kalle Niemitalo added a comment - It seems the 'slid.bs.carousel' event handler is not called at all.
            Hide
            Permalink
            kon Kalle Niemitalo added a comment - - edited

            Both static/316c5f91/plugin/jquery3-api/webjars/jquery.min.js (jQuery v3.5.1) and adjuncts/316c5f91/org/kohsuke/stapler/jquery/jquery.full.js (jQuery JavaScript Library v1.12.4) have been loaded on the same web page. It seems the event handler is added using jquery.min.js but then looked up using jquery-full.js.

            Show
            kon Kalle Niemitalo added a comment - - edited Both static/316c5f91/plugin/jquery3-api/webjars/jquery.min.js (jQuery v3.5.1) and adjuncts/316c5f91/org/kohsuke/stapler/jquery/jquery.full.js (jQuery JavaScript Library v1.12.4) have been loaded on the same web page. It seems the event handler is added using jquery.min.js but then looked up using jquery-full.js.
            Hide
            Permalink
            kon Kalle Niemitalo added a comment -

            Workaround: make history.js add the event handler by setting the onslid property in the DOM instead of using the jQuery event facility. That way, jQuery 1.12.4 will find the event handler.

                    carousel.each(function () {
            this.onslid = function (e) {
                localStorage.setItem(carouselId, e.to);
                const chart = $(e.relatedTarget).find('>:first-child')[0].echart;
                if (chart) {
                    chart.resize();
                }
            };
        });
            Show
            kon Kalle Niemitalo added a comment - Workaround: make history.js add the event handler by setting the onslid property in the DOM instead of using the jQuery event facility. That way, jQuery 1.12.4 will find the event handler. carousel.each( function () { this .onslid = function (e) { localStorage.setItem(carouselId, e.to); const chart = $(e.relatedTarget).find( '>:first-child' )[0].echart; if (chart) { chart.resize(); } }; });

              People

              Assignee:
              timja Tim Jacomb
              Reporter:
              kon Kalle Niemitalo
              Votes:
              0 Vote for this issue
              Watchers:
              2 Start watching this issue

                Dates

                Created:
                Updated:
                Resolved: