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

    XMLWordPrintable

    Details

    • Type: Improvement
    • Status: Open (View Workflow)
    • Priority: Minor
    • Resolution: Unresolved
    • Component/s: echarts-api-plugin
    • Labels:
    • Environment:
      Jenkins 2.263.1
      Warnings Next Generation Plugin 8.6.0
      ECharts API Plugin 4.9.0-2
      Mozilla Firefox 78.6.0esr
    • Similar Issues:

      Description

      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.

        Attachments

          Activity

          Hide
          kon 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.
          • 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.

          Show
          kon 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.
          Hide
          kon 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.

          Show
          kon 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.
          Hide
          drulli 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).
          Show
          drulli 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).
          Hide
          kon Kalle Niemitalo added a comment -

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

          Show
          kon Kalle Niemitalo added a comment - This is not about zooming the chart. I edited the summary to clarify.
          Hide
          drulli Ulli Hafner added a comment -

          Ah thanks for clarifying, I misread the description.

          Show
          drulli Ulli Hafner added a comment - Ah thanks for clarifying, I misread the description.
          Hide
          kon 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.

          Show
          kon 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.
          Hide
          drulli 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.

          Show
          drulli 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.

            People

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

              Dates

              Created:
              Updated: