Uploaded image for project: 'OpenNMS'
  1. OpenNMS
  2. NMS-7438

Apply the auto-resize feature for the timeline charts

    Details

    • Type: Enhancement
    • Status: Resolved (View Workflow)
    • Priority: Major
    • Resolution: Fixed
    • Affects Version/s: 15.0.0
    • Fix Version/s: 15.0.1
    • Component/s: Web UI - General
    • Security Level: Default (Default Security Scheme)
    • Labels:
      None

      Description

      It would be nice, specially for readability purposes, to auto-resize the timeline displayed on the Availability Box for nodes pages, interfaces pages and services pages, using a similar algorithm like the graph results and/or KSC reports.

      1. NMS-7438.diff
        9 kB
        Alejandro Galue
      1. Timeline-autoresize.png
        120 kB
      2. Timeline-BigServices.png
        143 kB

        Activity

        Hide
        agalue Alejandro Galue added a comment -

        The screenshot shows how the timeline looks like after applying the fix (also attached: NMS-7438.diff).

        The only problem is that I can't find a way to obtain the size in pixels of the cell on which each image tag is defined. For this reason I've used the container div, which is going to be the panel itself. That means, services with big names could be shown on several lines.

        Adding a DIV on each cell doesn't work either.

        Show
        agalue Alejandro Galue added a comment - The screenshot shows how the timeline looks like after applying the fix (also attached: NMS-7438 .diff). The only problem is that I can't find a way to obtain the size in pixels of the cell on which each image tag is defined. For this reason I've used the container div, which is going to be the panel itself. That means, services with big names could be shown on several lines. Adding a DIV on each cell doesn't work either.
        Hide
        cpape Christian Pape added a comment -

        This looks awesome!

        Show
        cpape Christian Pape added a comment - This looks awesome!
        Hide
        agalue Alejandro Galue added a comment -

        The fix has been pushed to foundation and cherry-picked on release-15.0.1:

        commit 7c0e3dc87e8d97e39c2c7e050e296059c63606f3
        Author: Alejandro Galue <agalue@opennms.org>
        Date:   Tue Feb 10 14:36:20 2015 -0500
        
            Fix for enhancement NMS-7438
            
            Apply the auto-resize feature for the timeline charts.
            
            The logic for resize resides on js/timeline-resize.js. It is going to
            use 50% of the panel size for now due to the restrictions I've mentioned
            on Jira.
            
            In case a change is required, only that file must be modified instead of
            3 separate JSPs.
        
        Show
        agalue Alejandro Galue added a comment - The fix has been pushed to foundation and cherry-picked on release-15.0.1: commit 7c0e3dc87e8d97e39c2c7e050e296059c63606f3 Author: Alejandro Galue <agalue@opennms.org> Date: Tue Feb 10 14:36:20 2015 -0500 Fix for enhancement NMS-7438 Apply the auto-resize feature for the timeline charts. The logic for resize resides on js/timeline-resize.js. It is going to use 50% of the panel size for now due to the restrictions I've mentioned on Jira. In case a change is required, only that file must be modified instead of 3 separate JSPs.
        Hide
        cpape Christian Pape added a comment - - edited

        Is it possible that the links are not working anymore with your fix applied?
        It was possible to click on red areas in the graph to bring up the outage
        page. For this the rest call to "html/nodeId/ipAddress/serviceName/start/end/width"
        was made to create the image map.

        Show
        cpape Christian Pape added a comment - - edited Is it possible that the links are not working anymore with your fix applied? It was possible to click on red areas in the graph to bring up the outage page. For this the rest call to "html/nodeId/ipAddress/serviceName/start/end/width" was made to create the image map.
        Hide
        agalue Alejandro Galue added a comment -

        Christian,

        I think I know what's missing.

        Let me explain you what I did, analyzing the following example taken from:

        http://demo.opennms.org/opennms/element/node.jsp?node=9

        <tr>
            <td class="severity-Normal bright"><a href="element/service.jsp?node=9&amp;intf=172.20.1.10&amp;service=10">FTP</a></td>
            <td class="severity-Cleared nobright">
                <img src="#" data-imgsrc="/opennms/rest/timeline/image/9/172.20.1.10/FTP/1425303971/1425390371/" usemap="#9-172.20.1.10-FTP"><map name="9-172.20.1.10-FTP"></map>
            </td>
            <td class="severity-Normal nobright">100.000%</td>
        </tr>
        

        Basically, I've replaced the "script" tag with the actual HTML content; I mean, this used to look like this:

        <td class="Cleared nobright"><script src="<%=timelineUrl%>"></script></td>
        

        where timelineUrl used to be:

        String timelineUrl = "/opennms/rest/timeline/html/" + String.valueOf(nodeId) + "/" + ipAddr + "/" + service.getServiceName() + "/" + timelineStart + "/" + timelineEnd + "/" + timelineWidth;
        

        Now, if I navigate that link (in other words, http://demo.opennms.org/opennms/rest/timeline/html/9/172.20.1.10/FTP/1425303971/1425390371/250), it produces:

        document.write('<img src="/opennms/rest/timeline/image/9/172.20.1.10/FTP/1425303971/1425390371/250" usemap="#9-172.20.1.10-FTP"><map name="9-172.20.1.10-FTP"><area shape="rect" coords="-3470,2,-3470,18" href="/opennms/outage/detail.htm?id=231124" alt="Id 231124" title="2015-02-16 12:11:55.931"></map>');
        

        Hmmm, it used to be just something like this:

        document.write('<img src="/opennms/rest/timeline/image/9/172.20.1.10/FTP/1425303971/1425390371/250" usemap="#9-172.20.1.10-FTP"><map name="9-172.20.1.10-FTP"></map>');
        

        So, there is a new "area" tag inside the "map" tag that I just saw, but I never did before (which makes me think that this "HTML" section is dynamic and explain why you did this hack).

        There are two options here:

        Create the HTML link with just the "map/area" section without the "img" tag ... or, provide a parameter to /opennms/rest/timeline/image to put the link on a parameter called "data-imgsrc" instead of "src" and an empty link (i.e. #) on the "src" tag like the current code.

        What do you think ?

        Because of the jQuery code to perform the "resize", I'm not sure if going back to a solution based on the script tag will work considering how the page is rendered, but I can give it try.

        Show
        agalue Alejandro Galue added a comment - Christian, I think I know what's missing. Let me explain you what I did, analyzing the following example taken from: http://demo.opennms.org/opennms/element/node.jsp?node=9 <tr> <td class= "severity-Normal bright" ><a href= "element/service.jsp?node=9&amp;intf=172.20.1.10&amp;service=10" >FTP</a></td> <td class= "severity-Cleared nobright" > <img src= "#" data-imgsrc= "/opennms/ rest /timeline/image/9/172.20.1.10/FTP/1425303971/1425390371/" usemap= "#9-172.20.1.10-FTP" ><map name= "9-172.20.1.10-FTP" ></map> </td> <td class= "severity-Normal nobright" >100.000%</td> </tr> Basically, I've replaced the "script" tag with the actual HTML content; I mean, this used to look like this: <td class= "Cleared nobright" ><script src= "<%=timelineUrl%>" ></script></td> where timelineUrl used to be: String timelineUrl = "/opennms/ rest /timeline/html/" + String .valueOf(nodeId) + "/" + ipAddr + "/" + service.getServiceName() + "/" + timelineStart + "/" + timelineEnd + "/" + timelineWidth; Now, if I navigate that link (in other words, http://demo.opennms.org/opennms/rest/timeline/html/9/172.20.1.10/FTP/1425303971/1425390371/250 ), it produces: document.write('<img src= "/opennms/ rest /timeline/image/9/172.20.1.10/FTP/1425303971/1425390371/250" usemap= "#9-172.20.1.10-FTP" ><map name= "9-172.20.1.10-FTP" ><area shape= "rect" coords= "-3470,2,-3470,18" href= "/opennms/outage/detail.htm?id=231124" alt= "Id 231124" title= "2015-02-16 12:11:55.931" ></map>'); Hmmm, it used to be just something like this: document.write('<img src= "/opennms/ rest /timeline/image/9/172.20.1.10/FTP/1425303971/1425390371/250" usemap= "#9-172.20.1.10-FTP" ><map name= "9-172.20.1.10-FTP" ></map>'); So, there is a new "area" tag inside the "map" tag that I just saw, but I never did before (which makes me think that this "HTML" section is dynamic and explain why you did this hack). There are two options here: Create the HTML link with just the "map/area" section without the "img" tag ... or, provide a parameter to /opennms/rest/timeline/image to put the link on a parameter called "data-imgsrc" instead of "src" and an empty link (i.e. #) on the "src" tag like the current code. What do you think ? Because of the jQuery code to perform the "resize", I'm not sure if going back to a solution based on the script tag will work considering how the page is rendered, but I can give it try.
        Hide
        agalue Alejandro Galue added a comment -

        I think the above possibilities are not going to work because the content of this area tag relies on the width to calculate the correct position.

        We have two options here:

        1) Go back with the non-useful original solution with a fixed 250 pixels.
        2) Use jQuery to asynchronously call /opennms/rest/timeline/html and write the content after knowing the size and rendering the final image.
        3) Use jQuery to show a modal window when you click on the timeline, to show a greater time line. This greater timeline is going to be built with your original code and a bigger width. Then, the area links should work, and are going to be more "visible and easy to click".

        I prefer the last option for several reasons:

        1) With 250 pixels (original solution) and lots of outages (which is very common on certain environments), it is almost impossible to click on the section you want.
        2) I didn't know this was a feature
        3) We are going to have the benefits of showing a greater timeline by default, and if you want to see the details of it (which I'm not sure that lot of people knows about it), use the original solution on a different window.

        Makes sense ?

        Show
        agalue Alejandro Galue added a comment - I think the above possibilities are not going to work because the content of this area tag relies on the width to calculate the correct position. We have two options here: 1) Go back with the non-useful original solution with a fixed 250 pixels. 2) Use jQuery to asynchronously call /opennms/rest/timeline/html and write the content after knowing the size and rendering the final image. 3) Use jQuery to show a modal window when you click on the timeline, to show a greater time line. This greater timeline is going to be built with your original code and a bigger width. Then, the area links should work, and are going to be more "visible and easy to click". I prefer the last option for several reasons: 1) With 250 pixels (original solution) and lots of outages (which is very common on certain environments), it is almost impossible to click on the section you want. 2) I didn't know this was a feature 3) We are going to have the benefits of showing a greater timeline by default, and if you want to see the details of it (which I'm not sure that lot of people knows about it), use the original solution on a different window. Makes sense ?
        Hide
        agalue Alejandro Galue added a comment -

        I've chosen the second option, use jQuery to inject the HTML on the table cell (similar to the original solution).

        The fix has been committed on revision 8479bf10280bd1166bf8c617f02033eaee69b94d for foundation (it will be eventually merged to Meridian and Develop).

        Show
        agalue Alejandro Galue added a comment - I've chosen the second option, use jQuery to inject the HTML on the table cell (similar to the original solution). The fix has been committed on revision 8479bf10280bd1166bf8c617f02033eaee69b94d for foundation (it will be eventually merged to Meridian and Develop).

          People

          • Assignee:
            agalue Alejandro Galue
            Reporter:
            agalue Alejandro Galue
          • Votes:
            0 Vote for this issue
            Watchers:
            3 Start watching this issue

            Dates

            • Created:
              Updated:
              Resolved:

              Development