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

          Kalle Niemitalo created issue -

          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.
          Kalle Niemitalo made changes -
          Description Original: 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|https://github.com/jenkinsci/echarts-api-plugin/blob/9fec9607fce1c8f0f96e2bc52c52b68666d9f854/src/main/webapp/js/trend-chart.js#L23-L32]) 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 supported for hyperlinks likewise worked in the trend chart: Shift+click to open in a new tab, and right-click to open a context menu from which the URL can be copied.
          New: 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|https://github.com/jenkinsci/echarts-api-plugin/blob/9fec9607fce1c8f0f96e2bc52c52b68666d9f854/src/main/webapp/js/trend-chart.js#L23-L32]) 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 are supported 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.
          Kalle Niemitalo made changes -
          Description Original: 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|https://github.com/jenkinsci/echarts-api-plugin/blob/9fec9607fce1c8f0f96e2bc52c52b68666d9f854/src/main/webapp/js/trend-chart.js#L23-L32]) 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 are supported 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.
          New: 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|https://github.com/jenkinsci/echarts-api-plugin/blob/9fec9607fce1c8f0f96e2bc52c52b68666d9f854/src/main/webapp/js/trend-chart.js#L23-L32]) 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.

          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).
          Kalle Niemitalo made changes -
          Summary Original: Middle-click or Ctrl+click a build in a trend chart to open it in a new tab New: Middle-click or Ctrl+click a build in a trend chart to open the build in a new tab

          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.

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

              Created:
              Updated: