[Patch] Build Configuration page with many platforms

[mpotter@…]

Associated with #515.

Problem:

If one has many platforms, the Build Configuration page is very crowed and actually clips information under IE. (e.g. http://TracBase/build/Config where TracBase is the base URL to your Trac installation and Config is one of the configured targets)

Possible Solutions:

1. Allow this page to be broken up, displaying only the first 4 or so platforms (possibly configurable), and then allow one to move to the next (or previous) page to view the others platforms.

2. Make the platforms column headers on this page links that will take you to a new page. (i.e. When on http://TracBase/build/Config, clicking on the platform header "Platform1", will take you to http://TracBase/build/Config/Platform1). This new page will be laid out the same as a configuration page, but for only the one platform.
   • The graphs on the configuration page would give the statistics for all the platforms together, but the new page would get the statistics for only the one selected platform.

[mpotter@…]

Build Configuration Page with 9 platforms under Chrome

[mpotter@…]

Build Configuration Page with 9 platforms under IE

[mpotter@…]

Under Chrome, crowded but still usable:

Under IE, crowded to the point that some of the information is clipped.

[mpotter@…]

Replying to osimons #515:

What do we do about the listing on the individual build config page - the one that lists all platforms for all revisions? Any way of redesigning this in an efficient and useful way? mpotter, interested in giving this a shot too? :-)

At this point the only ideas I have are those given in the description here, and as a possible stop gap, making some sort of style change so that IE doesn't crush the tables cells so far as to loose information. Ideally I would like to see both of the originally proposed solutions. However, both are involved and beyond my current knowledge and/or time.

Anyone have any pointer on how to stop IE from crushing table cells too far?

[osimons]

I've made a quick attempt to let it reflow as in #515, but I can really say that such a page full of revisions and platforms become way to hectic and difficult to "parse" for useful information - simple things like seeing if a platform fails consistently. It needs a strict matrix view.

[mpotter@…]

I finally enabled unit-testing on my 17 "platform" recipe; another rendering issue:

• Under Chrome, the graphs are rendering transparently over-top the the status grid. When one moves the scroll bar the graphs stays still relative to the grid, thus obscuring whatever it landed on top of. If one resizes the window the graph moves. On a single screen system I cannot stretch the screen wide enough to see the graph clearly. On my dual monitor system I can.
• Under IE, the graph does render where desired. However, because of the above problem the status grid is even more unreadable.

[mpotter@…]

Opinion question: If the graphs were to float around the status grid, should they float up or down. I could see this opinion may be affected by how different people use this page.

Example:

The current layout looks something like this:

 +------+----+----+----+----+----+ +------+
 |Chgset| P1 | P2 | P3 | P4 | P5 | | C.G. |
 +------+----+----+----+----+----+ +------+
 | [##] |    |    |    |    |    | +------+
 +------+----+----+----+----+----+ | U.G. |
 | [##] |    |    |    |    |    | +------+
 +------+----+----+----+----+----+ +------+
 | [##] |    |    |    |    |    | | L.G. |
 +------+----+----+----+----+----+ +------+
 | [##] |    |    |    |    |    |   
 +------+----+----+----+----+----+   

If the graphs float up it might look like:

 +------+ +------+ +------+
 | C.G. | | U.G. | | L.G. |
 +------+ +------+ +------+
 +------+----+----+----+----+----+
 |Chgset| P1 | P2 | P3 | P4 | P5 |
 +------+----+----+----+----+----+   
 | [##] |    |    |    |    |    |
 +------+----+----+----+----+----+
 | [##] |    |    |    |    |    |
 +------+----+----+----+----+----+
 | [##] |    |    |    |    |    |
 +------+----+----+----+----+----+
 | [##] |    |    |    |    |    |   
 +------+----+----+----+----+----+   

If the graphs float down it might look like:

 +------+----+----+----+----+----+
 |Chgset| P1 | P2 | P3 | P4 | P5 |
 +------+----+----+----+----+----+   
 | [##] |    |    |    |    |    |
 +------+----+----+----+----+----+
 | [##] |    |    |    |    |    |
 +------+----+----+----+----+----+
 | [##] |    |    |    |    |    |
 +------+----+----+----+----+----+
 | [##] |    |    |    |    |    |   
 +------+----+----+----+----+----+   
 +------+ +------+ +------+
 | C.G. | | U.G. | | L.G. |
 +------+ +------+ +------+

[mpotter@…]

Back to the original issue, the table crushing too much and becoming ugly in Chrome and unreadable under IE. The obvious solution for a CSS novice is to add the min-width attribute. This works perfectly under Chrome, but IE does not correctly implement min-width. From a quick search on the web I see several different techniques to try to work around this. Does anyone have any opinions what what technique might be best, e.g. is already used else in Bitten or Trac?

[mpotter@…]

Replying to mpotter@… and mpotter@…:

Have not been able to figure out a reasonable way to get the graphs to float above or below the build-listing table. I now assume it cannot be done w/o some java-script. Instead, started looking into a different approach.

By modifying bitten_config.html moving the graph rendering to after the build-listing-table, and wrapping both in a table with a single row and two cells appears to give a reasonable results, a fixed layout with the graphs to the right; at least it works under Chrome and IE is no worse than it was. I assume IE will be correct once we resolve the min-width issue.

[mpotter@…]

Replying to mpotter@…:

Remember ​KISS. Setting both width and min-width for all the build-listing-table columns gives a reasonable result under both Chrome and IE. Would be nice if it were dynamic because of the potential for longer step names, but looks good. I am currently using 5em for the chgset column and 12em for the "platform" columns.

[mpotter@…]

Changes I'm currently using.

[mpotter@…]

Still needs a little code style and rendering style improvements, but the above diff is operational.

Oops, the change to templates\bitten_config.html line 87 was a part of #515.

[mpotter@…]

Updated against 0.6b3

[mpotter@…]

The more I think about this issue and use the current patch, the more I think that:

• The current solution is good-enough (setting the column widths and preventing the graphs from floating over the matrix).
• All the other solutions would be too awkward to use (save point 2 from the original description, which has already been broken out into it's own ticket (#535).