Merge lp:~linaro-infrastructure/launchpad-work-items-tracker/add-lane-progress-bar into lp:~linaro-automation/launchpad-work-items-tracker/linaro

[Mattias Backman]

Hi,

This branch adds a blueprint progress bar on top of the roadmap lane pages.

It also changes the card pages to use the same look instead of the old style progress bar.

Thanks,

Mattias

[Mattias Backman (mabac)]

I've learned that my css skills are somewhat rusty so all suggestions are very welcome. :)

[Guilherme Salgado (salgado)]

I'm no CSS expert either, but it looked fine to me. I have just one
suggestion below:

On 13/01/12 12:03, Mattias Backman wrote:
> === modified file 'templates/roadmap_card.html'
> --- templates/roadmap_card.html 2011-12-21 14:05:45 +0000
> +++ templates/roadmap_card.html 2012-01-13 15:02:25 +0000
> @@ -35,7 +35,16 @@
> </ul>
>
> <div style="clear:both; text-align: center">Overall blueprint completion</div>
> -${util.progress_bar(blueprint_status_count) if card_has_blueprints else '<center><i>Progress graph pending linked blueprints.</i></center>'}
> +% if card_has_blueprints:
> +<div class="roadmap_wrap" title="${bp_status_totals['Completed']} blueprints complete of ${bp_status_totals['Total']}">
> + <div class="roadmap_value" style="width:${bp_status_totals['Percentage']}%">
> + <div class="Completed">&nbsp;</div>
> + </div>
> + <div class="roadmap_progress_text">${bp_status_totals['Percentage']} % complete of ${bp_status_totals['Total']}</div>
> +</div>

Would it be possible to move this into a function like
util.progress_bar() to avoid duplicating it in roadmap_lane.html?

> +% else:
> +<center><i>Progress graph pending linked blueprints.</i></center>
> +% endif
>
> <h3>Description</h3> ${card.description if card.description is not None else '<i>No description could be found.</i>'}
> <p><a href="${card.url}">Read the full description</a>.
>
> === modified file 'templates/roadmap_lane.html'
> --- templates/roadmap_lane.html 2011-12-22 11:57:53 +0000
> +++ templates/roadmap_lane.html 2012-01-13 15:02:25 +0000
> @@ -17,6 +17,12 @@
> % endfor
> </select>
> <h1>${title()}</h1>
> +<div class="roadmap_wrap" title="${bp_status_totals['Completed']} blueprints complete of ${bp_status_totals['Total']}">
> + <div class="roadmap_value" style="width:${bp_status_totals['Percentage']}%">
> + <div class="Completed">&nbsp;</div>
> + </div>
> + <div class="roadmap_progress_text">${bp_status_totals['Percentage']} % complete of ${bp_status_totals['Total']}</div>
> +</div>
> <p>
> <table width="100%">
> <thead><tr><th>Card</th><th>Status</th><th>Team</th><th>Priority</th><th>Blueprints</th><th>Health</th></tr></thead>
>

[lp:~linaro-infrastructure/launchpad-work-items-tracker/add-lane-progress-bar]

329. By Mattias Backman on 2012-01-17

Break out roadmap progress bar to utils.

[Mattias Backman (mabac)]

> I'm no CSS expert either, but it looked fine to me. I have just one
> suggestion below:
>
> On 13/01/12 12:03, Mattias Backman wrote:
> > === modified file 'templates/roadmap_card.html'
> > --- templates/roadmap_card.html 2011-12-21 14:05:45 +0000
> > +++ templates/roadmap_card.html 2012-01-13 15:02:25 +0000
> > @@ -35,7 +35,16 @@
> > </ul>
> >
> > <div style="clear:both; text-align: center">Overall blueprint
> completion</div>
> > -${util.progress_bar(blueprint_status_count) if card_has_blueprints else
> '<center><i>Progress graph pending linked blueprints.</i></center>'}
> > +% if card_has_blueprints:
> > +<div class="roadmap_wrap" title="${bp_status_totals['Completed']}
> blueprints complete of ${bp_status_totals['Total']}">
> > + <div class="roadmap_value"
> style="width:${bp_status_totals['Percentage']}%">
> > + <div class="Completed">&nbsp;</div>
> > + </div>
> > + <div class="roadmap_progress_text">${bp_status_totals['Percentage']} %
> complete of ${bp_status_totals['Total']}</div>
> > +</div>
>
> Would it be possible to move this into a function like
> util.progress_bar() to avoid duplicating it in roadmap_lane.html?

Absolutely. Thanks. I've done that and merged the branch to staging, let's see what it looks like in half an hour.

>
> > +% else:
> > +<center><i>Progress graph pending linked blueprints.</i></center>
> > +% endif
> >
> > <h3>Description</h3> ${card.description if card.description is not None
> else '<i>No description could be found.</i>'}
> > <p><a href="${card.url}">Read the full description</a>.
> >
> > === modified file 'templates/roadmap_lane.html'
> > --- templates/roadmap_lane.html 2011-12-22 11:57:53 +0000
> > +++ templates/roadmap_lane.html 2012-01-13 15:02:25 +0000
> > @@ -17,6 +17,12 @@
> > % endfor
> > </select>
> > <h1>${title()}</h1>
> > +<div class="roadmap_wrap" title="${bp_status_totals['Completed']}
> blueprints complete of ${bp_status_totals['Total']}">
> > + <div class="roadmap_value"
> style="width:${bp_status_totals['Percentage']}%">
> > + <div class="Completed">&nbsp;</div>
> > + </div>
> > + <div class="roadmap_progress_text">${bp_status_totals['Percentage']} %
> complete of ${bp_status_totals['Total']}</div>
> > +</div>
> > <p>
> > <table width="100%">
> > <thead><tr><th>Card</th><th>Status</th><th>Team</th><th>Priority</th><th>Bl
> ueprints</th><th>Health</th></tr></thead>
> >

[Guilherme Salgado (salgado)]

review: Approve

=== modified file 'css/status.css'
--- css/status.css	2011-12-21 07:44:02 +0000
+++ css/status.css	2012-01-17 11:59:24 +0000
@@ -47,38 +47,61 @@
 }
 
 
+.roadmap_progress_text {
+    position: absolute;
+    top:0; left:0;
+
+    padding-top: 5px;
+
+    color: #ffffff;
+    text-align: center;
+    width: 100%;
+}
+
 .roadmap_wrap {
+    border: 1px solid black;
     position: relative;
     margin-top: 2px;
-    margin-bottom: 6px;
+    margin-bottom: 3px;
     margin-left: auto;
     margin-right: auto;
+    background-color: #bdbdbd;
+}
+
+.roadmap_wrap, .roadmap_value {
+    width: 300px;
+    height: 28px;
+}
+
+table .roadmap_wrap, table .roadmap_value {
+    border: 0px;
+    width: 155px;
+    height: 1.4em;
     background-color: #ffffff;
 }
 
-.roadmap_wrap, .roadmap_value {
-    width: 155px;
-    height: 13px;
-}
-
 .roadmap_value {
-    float: left
+    float: left;
 }
 
 .roadmap_value .Completed {
     background-color: green;
+    height: inherit
 }
 
 .roadmap_value .Blocked {
     background-color: red;
+    height: inherit
 }
 
 .roadmap_value .InProgress {
     background-color: gray;
+    height: inherit
 }
 
 .roadmap_value .Planned {
     background-color: orange;
+    height: inherit
 }
 
 .progress_wrap {
 
=== modified file 'html-report'
--- html-report	2011-12-22 14:27:18 +0000
+++ html-report	2012-01-17 11:59:24 +0000
@@ -471,6 +471,7 @@
         lane = report_tools.lane(store, opts.lane)
         lanes = report_tools.lanes(store)
         statuses = []
+        bp_status_totals = {'Completed': 0, 'Total': 0, 'Percentage': 0}
         for status, cards in report_tools.statuses(store, lane):
             cards_with_bps = []
             for card in cards:
@@ -478,9 +479,11 @@
                 blueprint_status_counts = report_tools.card_bp_status_counts(
                     store, card.roadmap_id)
                 total = sum(blueprint_status_counts.values())
-                bp_percentages = {}
+                bp_percentages = dict.fromkeys(ROADMAP_ORDERED_STATUSES, 0)
+                bp_status_totals['Completed'] += \
+                    blueprint_status_counts['Completed']
                 for key in ROADMAP_STATUSES_MAP:
-                    bp_percentages[key] = 0
+                    bp_status_totals['Total'] += blueprint_status_counts[key]
                     if total > 0:
                         bp_percentages[key] = (
                             100.0 * blueprint_status_counts[key] / total)
@@ -489,8 +492,12 @@
                                        'bp_statuses': blueprint_status_counts,
                                        'bp_percentages': bp_percentages})
             statuses.append(dict(name=status, cards=cards_with_bps))
+        if bp_status_totals['Total'] > 0:
+            bp_status_totals['Percentage'] = (100 * bp_status_totals['Completed'] /
+                bp_status_totals['Total'])
 
         data.update(dict(statuses=statuses))
+        data.update(dict(bp_status_totals=bp_status_totals))
         data.update(dict(status_order=ROADMAP_ORDERED_STATUSES))
         data.update(dict(page_type="roadmap_lane"))
         data.update(dict(lane_title=title))
@@ -515,17 +522,17 @@
             title = opts.title
 
         blueprints = report_tools.card_blueprints_by_status(store, card.roadmap_id)
-        blueprint_status_count = WorkitemTarget()
-        blueprint_status_count.todo = len(blueprints['Planned'])
-        blueprint_status_count.blocked = len(blueprints['Blocked'])
-        blueprint_status_count.inprogress = len(blueprints['In Progress'])
-        blueprint_status_count.postponed = 0
-        blueprint_status_count.done = len(blueprints['Completed'])
-        card_has_blueprints = (blueprint_status_count.todo +
-                               blueprint_status_count.blocked +
-                               blueprint_status_count.inprogress +
-                               blueprint_status_count.postponed +
-                               blueprint_status_count.done) > 0
+        bp_status_totals = {'Completed': 0, 'Total': 0, 'Percentage': 0}
+        bp_status_totals['Total'] = (len(blueprints['Planned']) +
+                                     len(blueprints['Blocked']) +
+                                     len(blueprints['In Progress']) +
+                                     len(blueprints['Completed']))
+        bp_status_totals['Completed'] = len(blueprints['Completed'])
+        if bp_status_totals['Total'] > 0:
+            bp_status_totals['Percentage'] = (100 * bp_status_totals['Completed'] /
+                bp_status_totals['Total'])
+
+        card_has_blueprints = bp_status_totals['Total'] > 0
 
         status_order = ROADMAP_ORDERED_STATUSES[:]
         status_order.reverse()
@@ -537,7 +544,7 @@
         data.update(dict(lane=lane.name))
         data.update(dict(status_order=status_order))
         data.update(dict(blueprints=blueprints))
-        data.update(dict(blueprint_status_count=blueprint_status_count))
+        data.update(dict(bp_status_totals=bp_status_totals))
         data.update(dict(card_has_blueprints=card_has_blueprints))
 
         print report_tools.fill_template(
 
=== modified file 'templates/roadmap_card.html'
--- templates/roadmap_card.html	2011-12-21 14:05:45 +0000
+++ templates/roadmap_card.html	2012-01-17 11:59:24 +0000
@@ -35,7 +35,11 @@
 </ul>
 
 <div style="clear:both; text-align: center">Overall blueprint completion</div>
-${util.progress_bar(blueprint_status_count) if card_has_blueprints else '<center><i>Progress graph pending linked blueprints.</i></center>'}
+% if card_has_blueprints:
+${util.roadmap_progress_bar(bp_status_totals)}
+% else:
+<center><i>Progress graph pending linked blueprints.</i></center>
+% endif
 
 <h3>Description</h3> ${card.description if card.description is not None else '<i>No description could be found.</i>'}
 <p><a href="${card.url}">Read the full description</a>.
 
=== modified file 'templates/roadmap_lane.html'
--- templates/roadmap_lane.html	2011-12-22 11:57:53 +0000
+++ templates/roadmap_lane.html	2012-01-17 11:59:24 +0000
@@ -17,6 +17,7 @@
 % endfor
 </select>
 <h1>${title()}</h1>
+${util.roadmap_progress_bar(bp_status_totals)}
 <p>
 <table width="100%">
 <thead><tr><th>Card</th><th>Status</th><th>Team</th><th>Priority</th><th>Blueprints</th><th>Health</th></tr></thead>
 
=== modified file 'templates/util.html'
--- templates/util.html	2011-06-01 20:55:59 +0000
+++ templates/util.html	2012-01-17 11:59:24 +0000
@@ -23,6 +23,15 @@
     </div>
 </%def>
 
+<%def name="roadmap_progress_bar(item)">
+<div class="roadmap_wrap" title="${item['Completed']} blueprints complete of ${item['Total']}">
+  <div class="roadmap_value" style="width:${item['Percentage']}%">
+    <div class="Completed">&nbsp;</div>
+  </div>
+    <div class="roadmap_progress_text">${item['Percentage']} % complete of ${item['Total']}</div>
+</div>
+</%def>
+
 <%def name="url(end)">${root}${end}</%def>
 
 <%def name="burndown_chart(chart_url, large=False)">