[PATCH] Build Status page with many platforms.

[mpotter@…]

If one has many platforms, lets say 9, the Build status page for that target appears very crowded, actually clipping information in IE.

Suggestion: Instead of laying out all of the platforms one row, break them up into multiple rows.

i.e. Instead of laying out as:

CI info

Plat1

Plat2

Plat3

Plat4

Plat5

Plat6

Plat7

Plat8

Plat9

Break up, say every 3 platforms:

CI info	Plat1	Plat2	Plat3
	Plat4	Plat5	Plat6
	Plat7	Plat8	Plat9

How often to break up should probably be a configurable. At 9 breaking every 3 looks good, but at 8 or 16 platforms I would probably want to break every 4

[mpotter@…]

Build Status Page with 9 platforms under Chrome

[mpotter@…]

Build Status Page with 9 platforms under IE

[cmlenz]

(Fixed image refs in description)

[cboos]

See similar situation in the Trac admin panel for permission, maybe the same approach could be reused (div with fixed width + float).

[mpotter@…]

Replying to cboos:

See similar situation in the Trac admin panel for permission, maybe the same approach could be reused (div with fixed width + float).

I am assuming you are referring to ​trac:ticket:8866.

[mpotter@…]

Possible changes

[mpotter@…]

Possible changes

[mpotter@…]

Using a technique given ​here I have constructed a possible solution.

• This solution does not have a configurable, instead it just allows the platforms to wrap as needed.
• There may be some minor cosmetic issues if the Platform boxes are of different width.

I am not very versed at CSS, so:

• there may be a better way to encode what is desired.
• there may be some rendering changes that may be desired.

[mpotter@…]

Possible changes, redone with context

[mpotter@…]

Possible changes, redone with context

[mpotter@…]

Issue discovered, pending were not rendering correctly. Need to add a CSS entry for it. Something like:

#content.build table.build td.platforms div.pending {
  float: left;
  margin: 1px;
  padding: 2px;
  border: 1px solid #333;
}

[mpotter@…]

Possible changes, redone as unified diff

[mpotter@…]

Possible changes, redone as unified diff

[mpotter@…]

The bitten.css.patch​ attachment also:

• Incorporates the changes from the above comment.
• Corrects the border color and padding size to be more like the original table style.

[osimons]

That's the right general idea. Tested the patces, and it flows nicely!

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? :-)

[mpotter@…]

Replying to osimons:

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?

I assume you are talking about #516. Taking the conversation there.

[osimons]

Single-file patch. Slightly cleaner using a new shared style class for the div.

[osimons]

Replying to mpotter@…:

I assume you are talking about #516.

Ah. Two tickets. I see :-)

I've updated the patch slightly - and also joined the diff's into a single file. Please diff on an enclosing folder and make diffs that cover several files - less prone to error and confusion.

[mpotter@…]

Odd Floating result

[mpotter@…]

Have removed my changes and applied the last patch​. Looks good.

However, just bumped into a minor issue. Sometimes the way the platforms float is a little odd. Example:

[mpotter@…]

Just to make others aware, another oddness:

• Chrome appears to be trying to give equal space to CI-Info area and to each of the platforms.

[_CI-Info_]

[Platform1]

[Platform2]

[Platform3]

• IE appears to be trying to give equal space to the CI-Info area and to all of the platforms together.

[____________CI-Info____________]

[Platform1][Platform2][Platform3]

[mpotter@…]

Replying to mpotter@…:

Sometimes the way the platforms float is a little odd.

A partial fix. In bitten_config.html, circa line 87, change:

          <p class="date">$build.stopped</p>

to

          <p class="date">$build.stopped&nbsp;</p>

This will make the in-progress platforms be the same size as the completed platforms and thus these will float around each other better. The pending platforms are still small in comparison and may float in an odd way, but I feel acceptable.

[mpotter@…]

Replying to mpotter@…:

Just to make others aware, another oddness:

• Chrome appears to be trying to give equal space to CI-Info area and to each of the platforms.
  

[_CI-Info_][Platform1][Platform2][Platform3]

• IE appears to be trying to give equal space to the CI-Info area and to all of the platforms together.
  

[____________CI-Info____________][Platform1][Platform2][Platform3]

The following addition to the bitten.css helps:

#content.build table.builds tbody tr th {
  width: 25%;
}

[mpotter@…]

patch file, t515-platform_css_reflow-r803.diff plus comments since, as applied to 0.6b3

[mpotter@…]

Replying to mpotter@…:

Replying to mpotter@…:

Sometimes the way the platforms float is a little odd.

A partial fix. In bitten_config.html, circa line 87, change:
[...]
This will make the in-progress platforms be the same size as the completed platforms and thus these will float around each other better. The pending platforms are still small in comparison and may float in an odd way, but I feel acceptable.

To make the pending builds the same height as the others, apply the following additional change:

templates/bitten_config.html

@@ -100 +100 @@
           ${build_status(build.status)}
         </py:when><py:otherwise>
           <strong>$build.platform</strong>
-          <p class="nobuild">No build yet</p>
+          <p class="date">&nbsp;</p>
+          <div class="system"><strong>&nbsp;</strong><br />&nbsp;</div>
+          <div class="nobuild">No build yet</div>
         </py:otherwise></py:choose>
         </div>
         </td>

[anonymous]

Replying to mpotter@…:

To make the pending builds the same height as the others, apply the following additional change:
...

Minor issue: With the above change, pending builds are normally the same size as the in-progress and completed builds. However, right after a new check-in, before the new builds have been scheduled, the pending builds appear small. Examining the HTML I see that these unscheduled builds have a div of

<div class="build-platform ">

Where as once scheduled they have a div of:

<div class="build-platform pending">

[Mark Potter <mpotter@…>]

Bumped into a minor issue today. I have renamed all of by slave clients so the they contain more information on what they are. Now when rendering the boxes for each build some are taller than others. This causes the layout to look odd again. This height difference is cause by sometimes the slave info line wraps and sometimes it doesn't depending on the length of the slave name. I see two possible approaches:

• Change the width of the box in the CSS.
• Change the slave info line to always be on two lines.

I tried a combination of the two, inserting a <br/> and narrowing the blocks from 16em to 14em, but I realized, because of the optional parts of slave_info, more changes would be needed for this and the issue patched in comment:17. Therefore, instead I opted for the simpler fix of just changing the width to 20em (below). This looks good in my case, and should look okay for others. If someone wants to fine tune it for their site they should be able to insert an override in their site.css file.

htdocs/bitten.css

@@ -42 +42 @@
 }
 #content.build table.builds div.completed { background: #9d9; border-color: #696;
   color: #393;
-  width: 16em;
+  width: 20em;
 }
 #content.build table.builds div.failed { background: #d99; border-color: #966;
   color: #933;
-  width: 16em;
+  width: 20em;
 }
 #content.build table.builds div.in-progress { background: #dd9;
   border-color: #996; color: #993;
-  width: 16em;
+  width: 20em;
 }
 #content.build table.builds div.pending {
- width: 16em;
+ width: 20em;
 }
 #content.build table.builds td p { font-size: smaller; margin-top: 0; }
 #content.build table.builds .status { color: #000; }

[Mark Potter <mpotter@…>]

Replying to Mark Potter <mpotter@…>:

Therefore, instead I opted for the simpler fix of just changing the width to 20em [...]. This looks good in my case, and should look okay for others. If someone wants to fine tune it for their site they should be able to insert an override in their site.css file.

I just looked here, I realized the os-version-processor line is quite long

Windows 2003Server / x86 Family 6 Model 26 Stepping 5, GenuineIntel

Therefore 20em is not enough, but a value large enough would look terrible on sites with short slave names and short os-version-processor lines. Therefore, back to trying a mixed solution.

[Mark Potter <mpotter@…>]

Replying to Mark Potter <mpotter@…>:

Therefore, back to trying a mixed solution.

To accommodate a long processor line that would be used here I went with 25em and then patched templates/bitten_config.html as follows:

bitten_config.html

@@ -31 +31 @@
     </div>
 
     <div py:def="slave_info(slave)" class="system">
-      <strong>$slave.name</strong> ($slave.ipnr)<br />
-      $slave.os_name $slave.os_version
-      <py:if test="slave.machine or slave.processor"> / </py:if>
-      ${slave.processor or slave.machine or ''}
+      <strong>$slave.name</strong><br />
+      ($slave.ipnr)<br />
+      $slave.os_name $slave.os_version<br />
+      ${slave.processor or slave.machine or '&nbsp;'}
     </div>
     
     <ul py:def="build_steps(steps)" py:if="steps" class="steps">
@@ -101 +101 @@
         </py:when><py:otherwise>
           <strong>$build.platform</strong>
           <p class="date">&nbsp;</p>
-          <div class="system"><strong>&nbsp;</strong><br />&nbsp;</div>
+          <div class="system"><strong>&nbsp;</strong>
+            <br />&nbsp;<br />&nbsp;<br />&nbsp;
+          </div>
           <div class="nobuild">No build yet</div>
         </py:otherwise></py:choose>
         </div>