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

Middle-click or Ctrl+click a build in a trend chart to open the build in a new tab

      On the web page of a job, Jenkins shows a trend chart for warnings. If I click a build in the trend chart, then the browser navigates to a web page that lists the warnings from that build. However, I would like to open the build in a new tab of the browser, in order to more easily compare the warnings from multiple builds. I would normally be able to do that by clicking a hyperlink with the middle mouse button (or with the primary button while holding the Ctrl key), but the trend chart uses an onclick event handler (trend-chart.js) instead of hyperlinks, so those actions do not work. I hope they can be made to work.

      It would be even better if other actions that the web browser supports for hyperlinks, likewise worked in the trend chart: Shift+click to open in a new window, and right-click to open a context menu from which the URL can be copied.

          [JENKINS-64581] Middle-click or Ctrl+click a build in a trend chart to open the build in a new tab

          I can think of the following ways to implement this, but I have not tried them:

          • Add another event handler for the middle mouse button and use window.open there. Make the onclick event handler do the same if the Ctrl key is held down. Because the onauxclick property is not supported by all browsers, I suppose the middle button would have to be handled in onmouseup.
          • Add <a>…</a> around the whole canvas. Dynamically update its href attribute at the same time as the selectedBuild variable.
            • The element might interfere with mouse events that were intended to scroll the chart.
            • It might be confusing if somebody selects that hyperlink using the keyboard or accessibility software.
          • Add a map element for the chart, and an area element for each build.
            • The usemap attribute does not appear to be supported in the canvas element.
            • It might be difficult to update the areas if the user scrolls the chart.

          I don't see anything related to hyperlinks in ECharts API. ECharts provides mouse events but I don't think those would make the new-tab action any easier than the current event handling in trend-chart.js.

          Kalle Niemitalo added a comment - I can think of the following ways to implement this, but I have not tried them: Add another event handler for the middle mouse button and use window.open there. Make the onclick event handler do the same if the Ctrl key is held down. Because the onauxclick property is not supported by all browsers, I suppose the middle button would have to be handled in onmouseup . This would not be able to support both Shift+click to open in a new window and Ctrl+click to open in a new tab. javascript - Open a URL in a new tab (and not a new window) - Stack Overflow Add <a>…</a> around the whole canvas. Dynamically update its href attribute at the same time as the selectedBuild variable. The element might interfere with mouse events that were intended to scroll the chart. It might be confusing if somebody selects that hyperlink using the keyboard or accessibility software. Add a map element for the chart, and an area element for each build. The usemap attribute does not appear to be supported in the canvas element. It might be difficult to update the areas if the user scrolls the chart. I don't see anything related to hyperlinks in ECharts API . ECharts provides mouse events but I don't think those would make the new-tab action any easier than the current event handling in trend-chart.js.

          The JUnit plugin used to render the test result history graph at the server and generate a client-side image map that links to each build. Middle-clicking worked great in that. The feature was however lost in the JENKINS-62096 migration to ECharts.

          Kalle Niemitalo added a comment - The JUnit plugin used to render the test result history graph at the server and generate a client-side image map that links to each build. Middle-clicking worked great in that. The feature was however lost in the JENKINS-62096 migration to ECharts.

          Ulli Hafner added a comment -

          Yes, a feature to zoom the trend chart is currently missing. Since there is no URL anymore this needs to be handled differently. I would like to add some additional implementation options:

          • Add chart buttons: full-screen, settings, etc.: this is something required for JENKINS-59627 as well.
          • A more revolutionary approach: the job view actually should be replaced by a modern dashboard. Plugins can contribute widgets and those widgets can take any space they need. DnD, Zoom, etc. (this is something what one expect from a modern web application).

          Ulli Hafner added a comment - Yes, a feature to zoom the trend chart is currently missing. Since there is no URL anymore this needs to be handled differently. I would like to add some additional implementation options: Add chart buttons: full-screen, settings, etc.: this is something required for JENKINS-59627 as well. A more revolutionary approach: the job view actually should be replaced by a modern dashboard. Plugins can contribute widgets and those widgets can take any space they need. DnD, Zoom, etc. (this is something what one expect from a modern web application).

          This is not about zooming the chart. I edited the summary to clarify.

          Kalle Niemitalo added a comment - This is not about zooming the chart. I edited the summary to clarify.

          Ulli Hafner added a comment -

          Ah thanks for clarifying, I misread the description.

          Ulli Hafner added a comment - Ah thanks for clarifying, I misread the description.

          If the chart used SVG instead of canvas, then it could have hyperlinks as SVG a elements, and I think browsers would natively support middle-click, Shift+click, and context menus. ECharts supports SVG but, as its API does not mention hyperlinks, I doubt it can be told to generate hyperlinks in SVG.

          Kalle Niemitalo added a comment - If the chart used SVG instead of canvas, then it could have hyperlinks as SVG a elements, and I think browsers would natively support middle-click, Shift+click, and context menus. ECharts supports SVG but, as its API does not mention hyperlinks, I doubt it can be told to generate hyperlinks in SVG.

          Ulli Hafner added a comment -

          Yes, we can switch the renderer to svg. I haven't tried that up to now. I'm not sure if there is anything new in 5.0.0 that might help here.

          Ulli Hafner added a comment - Yes, we can switch the renderer to svg . I haven't tried that up to now. I'm not sure if there is anything new in 5.0.0 that might help here.

          krisstern, do you have a plan for how you'll implement this?

          Kalle Niemitalo added a comment - krisstern , do you have a plan for how you'll implement this?

          Kris Stern added a comment -

          I will start work on this issue for Hacktoberfest 2024 sometime this week. 

          Kris Stern added a comment - I will start work on this issue for Hacktoberfest 2024 sometime this week. 

          Kris Stern added a comment -

          kon No concrete plans yet... Do you have any suggestions or preferences? 

          Kris Stern added a comment - kon No concrete plans yet... Do you have any suggestions or preferences? 

          I posted my suggestions back in January 2021; but I haven't checked whether later versions of the echarts library have added any new API that could be useful here.

          Kalle Niemitalo added a comment - I posted my suggestions back in January 2021; but I haven't checked whether later versions of the echarts library have added any new API that could be useful here.

          Ulli Hafner added a comment -

          I will start work on this issue for Hacktoberfest 2024 sometime this week.

          Oh, then I need to re-enable the Hacktoberfest label in GitHub as well. I think Basil removed all those labels in a batch job...

          Ulli Hafner added a comment - I will start work on this issue for Hacktoberfest 2024 sometime this week. Oh, then I need to re-enable the Hacktoberfest label in GitHub as well. I think Basil removed all those labels in a batch job...

          Kris Stern added a comment -

          No worries, I will start a PR during Christmas

          Kris Stern added a comment - No worries, I will start a PR during Christmas

          Arnab added a comment -

          Hello krisstern can I work on this? I was going the code snippet linked in the description of this issue and it seems some of code in the "trend-chart.js" has been refactored into "echarts-api.js".

          I will go through both the versions and the suggestions here to try to resolve this issue but apart from this do you have any suggestions or a specific approach to it?

          Thank You

          Arnab added a comment - Hello krisstern can I work on this? I was going the code snippet linked in the description of this issue and it seems some of code in the "trend-chart.js" has been refactored into "echarts-api.js". I will go through both the versions and the suggestions here to try to resolve this issue but apart from this do you have any suggestions or a specific approach to it? Thank You

          Ulli Hafner added a comment - - edited

          Yes, the code has been moved to a different file.

          I have no idea on how to achieve this with ECharts. This requires some digging in the ECharts API oder mailing lists.

          And yes, feel free to work on this. There is no assignee in the moment...

          Ulli Hafner added a comment - - edited Yes, the code has been moved to a different file. I have no idea on how to achieve this with ECharts. This requires some digging in the ECharts API oder mailing lists. And yes, feel free to work on this. There is no assignee in the moment...

          Arnab added a comment - - edited

          Hello drulli I looked up for the echarts-api plugin mailing list in the Jenkins site and gitter but couldn't find one. So, I asked the question directly in the https://groups.google.com/g/jenkinsci-dev. So, do you think that is the correct place or am I missing something?

          Thank You

          Arnab added a comment - - edited Hello drulli I looked up for the echarts-api plugin mailing list in the Jenkins site and gitter but couldn't find one. So, I asked the question directly in the https://groups.google.com/g/jenkinsci-dev . So, do you think that is the correct place or am I missing something? Thank You

          code_arnab, I think drulli meant the mailing list used by developers of ECharts https://echarts.apache.org/en/maillist.html, rather than anything specific to Jenkins.

          https://echarts.apache.org/en/faq.html#ask-questions suggests asking ECharts questions on stackoverflow.

          Kalle Niemitalo added a comment - code_arnab , I think drulli meant the mailing list used by developers of ECharts https://echarts.apache.org/en/maillist.html , rather than anything specific to Jenkins. https://echarts.apache.org/en/faq.html#ask-questions suggests asking ECharts questions on stackoverflow.

          Arnab added a comment -

          Ah! Now I get it.

          Thank You for the clarification kon 

          Arnab added a comment - Ah! Now I get it. Thank You for the clarification kon  

          Ulli Hafner added a comment -

          Yes, exactly. I meant some other users of ECharts might already solved that problem so it would be good to start there for looking for a solution.

          Ulli Hafner added a comment - Yes, exactly. I meant some other users of ECharts might already solved that problem so it would be good to start there for looking for a solution.

          Arnab added a comment -

          Got it! I'll look it up there

          Arnab added a comment - Got it! I'll look it up there

          Ulli Hafner added a comment -

          code_arnab Please do not reassign the issue on your own, this is something maintainers do.

          Did you find out something?

          Ulli Hafner added a comment - code_arnab Please do not reassign the issue on your own, this is something maintainers do. Did you find out something?

          Arnab added a comment - - edited

          Hello drulli actually I was not the one who assigned you. It was akash_manna

          I haven't had the opportunity to work on this issue lately but akash_manna will now be working on this.

          Thank You

          Arnab added a comment - - edited Hello drulli actually I was not the one who assigned you. It was akash_manna I haven't had the opportunity to work on this issue lately but akash_manna will now be working on this. Thank You

          Akash Manna added a comment -

          Hello drulli I will now be working on the issue. I made few change in echarts-api.js but haven't confirmed it yet from the implementations of the developers from Apache Mailing List but maybe you can have a look at it.

          Akash Manna added a comment - Hello drulli I will now be working on the issue. I made few change in echarts-api.js but haven't confirmed it yet from the implementations of the developers from Apache Mailing List but maybe you can have a look at it.

            akash_manna Akash Manna
            kon Kalle Niemitalo
            Votes:
            0 Vote for this issue
            Watchers:
            5 Start watching this issue

              Created:
              Updated: