bitbake: toaster: Create the base page navigation structure

Updating the general container pages to use the graphical
design and features from the design phase.

In the process of adapting the Simple UI to the designed
interface, we create all the pages and the navigation
structure for the Toaster GUI.

Views for each page have been added, and the url mapping
has been updated to reflect newly added pages.

The table page has been refactored to be component-oriented
instead of class-oriented in order to facilitate reusage.

Changes are made in different layers of the template
(base, basetable) in order to maximize code reuse among
different pages in the build.

(Bitbake rev: d31f039ae31b77023722c06e66542751536a1362)

Signed-off-by: Alexandru DAMIAN <alexandru.damian@intel.com>
Signed-off-by: Richard Purdie <richard.purdie@linuxfoundation.org>

1 files changed, 84 insertions, 31 deletions

diff --git a/bitbake/lib/toaster/toastergui/templates/build.html b/bitbake/lib/toaster/toastergui/templates/build.html
index 4fa87d5271..27ce1ccbc5 100644
--- a/bitbake/lib/toaster/toastergui/templates/build.html
+++ b/bitbake/lib/toaster/toastergui/templates/build.html
@@ -1,43 +1,96 @@
-{% extends "basetable.html" %}
+{% extends "base.html" %}
+
+
+{% load projecttags %}
+{% load humanize %}
+
+{% block pagecontent %}
+<div class="row-fluid">
+
+<div class="page-header" style="margin-top:40px;">
+    <h1>
+        Recent Builds
+     </h1>
+</div>
+{{build_mru}}
+{% for build in mru %}
+<div class="alert {%if build.outcome == build.SUCCEEDED%}alert-success{%elif build.outcome == build.FAILED%}alert-error{%else%}alert-info{%endif%}">
+    <div class="row-fluid">
+        <div class="lead span5">
+            {%if build.outcome == build.SUCCEEDED%}<i class="icon-ok-sign success"></i>{%elif build.outcome == build.FAILED%}<i class="icon-minus-sign error"></i>{%else%}{%endif%}
+            <a href="{%url 'builddashboard' build.pk%}">
+            <span data-toggle="tooltip" {%if build.target_set.all.count > 1%}title="Targets: {%for target in build.target_set.all%}{{target.target}} {%endfor%}"{%endif%}>{{build.target_set.all.0.target}} {%if build.target_set.all.count > 1%}(+ {{build.target_set.all.count|add:"-1"}}){%endif%} {{build.machine}} ({{build.completed_on|naturaltime}})</span>
+            </a>
+        </div>
+{%if build.outcome == build.SUCCEEDED or build.outcome == build.FAILED %}
+        <div class="span2 lead">
+{% if  build.errors_no %}
+            <i class="icon-minus-sign red"></i> <a href="{%url 'builddashboard' build.pk%}" class="error">{{build.errors_no}} error{{build.errors_no|pluralize}}</a>
+{% endif %}
+        </div>
+        <div class="span2 lead">
+{% if  build.warnings_no %}
+            <i class="icon-warning-sign yellow"></i> <a href="{%url 'builddashboard' build.pk%}" class="warning">{{build.warnings_no}} warning{{build.warnings_no|pluralize}}</a>
+{% endif %}
+        </div>
+        <div class="lead pull-right">
+            Build time: <a href="build-time.html">{{ build|timespent }}</a>
+        </div>
+{%endif%}{%if build.outcome == build.IN_PROGRESS %}
+        <div class="span4">
+            <div class="progress" style="margin-top:5px;" data-toggle="tooltip" title="{{build.completeper}}% of tasks complete">
+                <div style="width: {{build.completeper}}%;" class="bar"></div>
+            </div>
+        </div>
+        <div class="lead pull-right">ETA: in {{build.eta|naturaltime}}</div>
+{%endif%}
+    </div>
+</div>
+
+{% endfor %}
 
-{% block pagename %}
-    <h1>Toaster - Builds</h1>
-{% endblock %}
 
-{% block pagetable %}
+<div class="page-header" style="margin-top:40px;">
+    <h1>
+        All builds
+     </h1>
+</div>
+
+{% include "basetable_top.html" %}
 
-    {% load projecttags %}
         <tr>
-            <th>Outcome</th>
-            <th>Started On</th>
-            <th>Completed On</th>
-            <th>Target</th>
-            <th>Machine</th>
-            <th>Time</th>
-            <th>Errors</th>
-            <th>Warnings</th>
-            <th>Output</th>
-            <th>Log</th>
-            <th>Bitbake Version</th>
-            <th>Build Name</th>
+            <th class="outcome span2"> <i class="icon-question-sign get-help" data-toggle="tooltip" title="The outcome tells you if a build completed successfully or failed"></i> <a href="#" style="font-weight:normal;">Outcome</a> <div class="btn-group pull-right"> <a href="#outcome" role="button" class="btn btn-mini" data-toggle="modal"> <i class="icon-filter"></i> </a> </div> </th>
+               <th class="target"> <i class="icon-question-sign get-help" data-toggle="tooltip" title="This is the build target(s): one or more recipes or image recipes"></i> <a href="#" style="font-weight:normal;">Target</a> </th>
+            <th class="machine span3"> <i class="icon-question-sign get-help" data-toggle="tooltip" title="The machine is the hardware for which you are building"></i> <a href="#" style="font-weight:normal;">Machine</a> </th>
+            <th class="started_on"> <i class="icon-question-sign get-help" data-toggle="tooltip" title="The date and time you started the build"></i> <a href="#" style="font-weight:normal;">Started on</a> <div class="btn-group pull-right"> <a href="#started-on" role="button" class="btn btn-mini" data-toggle="modal"> <i class="icon-filter"></i> </a> </div> </th>
+            <th class="completed_on"> <i class="icon-question-sign get-help" data-toggle="tooltip" title="The date and time the build finished"></i> <a href="#" class="sorted"> Completed on </a> <div class="btn-group pull-right"> <a href="#completed-on" role="button" class="btn btn-mini" data-toggle="modal"> <i class="icon-filter"></i> </a> </div> <i class="icon-caret-down"></i> </th>
+            <th class="failed_tasks"> <i class="icon-question-sign get-help" data-toggle="tooltip" title="How many tasks failed during the build"></i> <a href="#" style="font-weight:normal;">Failed tasks</a> <div class="btn-group pull-right"> <a href="#failed-tasks" role="button" class="btn btn-mini" data-toggle="modal"> <i class="icon-filter"></i> </a> </div> <!--div id="filtered" class="btn-group pull-right" title="<p>Showing only builds with failed tasks</p><p><a class='btn btn-mini btn-primary' href='#'>Show all builds</a></p>"> <a class="btn btn-mini btn-primary"> <i class="icon-filter"></i> </a> </div-->   </th>
+            <th class="errors"> <i class="icon-question-sign get-help" data-toggle="tooltip" title="How many errors were encountered during the build (if any)"></i> <a href="#" style="font-weight:normal;">Errors</a> <div class="btn-group pull-right"> <a href="#errors" role="button" class="btn btn-mini" data-toggle="modal"> <i class="icon-filter"></i> </a> </div> </th>
+            <th class="warnings"> <i class="icon-question-sign get-help" data-toggle="tooltip" title="How many warnigns were encountered during the build (if any)"></i> <a href="#" style="font-weight:normal;">Warnings</a> <div class="btn-group pull-right"> <a href="#warnings" role="button" class="btn btn-mini" data-toggle="modal"> <i class="icon-filter"></i> </a> </div> <!--div id="filtered" class="btn-group pull-right" title="<p>Showing only builds without warnings</p><p><a class='btn btn-mini btn-primary' href='#'>Show all builds</a></p>"> <a class="btn btn-mini btn-primary"> <i class="icon-filter"></i> </a> </div--> </th>
+            <th class="time"> <i class="icon-question-sign get-help" data-toggle="tooltip" title="How long it took the build to finish"></i> <a href="#" style="font-weight:normal;">Time</a> </th>
+            <th class="log span4">    <i class="icon-question-sign get-help" data-toggle="tooltip" title="The location in disk of the build main log file"></i> <a href="#" style="font-weight:normal;">Log</a> </th>
+            <th class="output"> <i class="icon-question-sign get-help" data-toggle="tooltip" title="The root file system types produced by the build. You can find them in your <code>/build/tmp/deploy/images/</code> directory"></i> <a href="#" style="font-weight:normal;">Output</a> </th>
+
         </tr>
         {% for build in objects %}
         <tr class="data">
-            <td><a href="{% url "configuration" build.id %}">{{build.get_outcome_display}}</a></td>
-            <td>{{build.started_on}}</td>
-            <td>{{build.completed_on}}</td>
-            <td>{% for t in build.target_set.all %}{%if t.is_image %}<a href="{% url "tpackage" build.id t.id %}">{% endif %}{{t.target}}{% if t.is_image %}</a>{% endif %}<br/>{% endfor %}</td>
-            <td>{{build.machine}}</td>
-            <td>{% time_difference build.started_on build.completed_on %}</td>
-            <td>{{build.errors_no}}:{% if  build.errors_no %}{% for error in logs %}{% if error.build == build %}{% if error.level == 2 %}<p>{{error.message}}</p>{% endif %}{% endif %}{% endfor %}{% else %}None{% endif %}</td>
-            <td>{{build.warnings_no}}:{% if  build.warnings_no %}{% for warning in logs %}{% if warning.build == build %}{% if warning.level == 1 %}<p>{{warning.message}}</p>{% endif %}{% endif %}{% endfor %}{% else %}None{% endif %}</td>
-            <td>{% if build.outcome == 0 %}{% for t in build.target_set.all %}{% if t.is_image %}{{build.image_fstypes}}{% endif %}{% endfor %}{% endif %}</td>
-            <td>{{build.cooker_log_path}}</td>
-            <td>{{build.bitbake_version}}</td>
-            <td>{{build.build_name}}</td>
+            <td class="outcome"><a href="{% url "configuration" build.id %}">{%if build.outcome == build.SUCCEEDED%}<i class="icon-ok-sign success"></i>{%elif build.outcome == build.FAILED%}<i class="icon-minus-sign error"></i>{%else%}{%endif%}</a></td>
+            <td class="target">{% for t in build.target_set.all %}{%if t.is_image %}<a href="{% url "target" build.id t.id %}">{% endif %}{{t.target}}{% if t.is_image %}</a>{% endif %}<br/>{% endfor %}</td>
+            <td class="machine">{{build.machine}}</td>
+            <td class="started_on">{{build.started_on}}</td>
+            <td class="completed_on">{{build.completed_on}}</td>
+            <td class="failed_tasks"></td>
+            <td class="errors">{% if  build.errors_no %}<a class="error" href="#">{{build.errors_no}} error{{build.errors_no|pluralize}}</a>{%endif%}</td>
+            <td class="warnings">{% if  build.warnings_no %}<a class="warning" href="#">{{build.warnings_no}} warning{{build.warnings_no|pluralize}}</a>{%endif%}</td>
+            <td class="time">{{build|timespent}}</td>
+            <td class="log">{{build.log}}</td>
+            <td class="output">{% if build.outcome == 0 %}{% for t in build.target_set.all %}{% if t.is_image %}{{build.image_fstypes}}{% endif %}{% endfor %}{% endif %}</td>
         </tr>
 
         {% endfor %}
-{% endblock %}
 
 
+{% include "basetable_bottom.html" %}
+
+</div>
+{% endblock %}