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.

This looks awesome!

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.

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.

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.

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 ?

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).