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, 54 insertions, 15 deletions

diff --git a/bitbake/lib/toaster/toastergui/templates/basebuildpage.html b/bitbake/lib/toaster/toastergui/templates/basebuildpage.html
index d590f28bc5..1b037f9539 100644
--- a/bitbake/lib/toaster/toastergui/templates/basebuildpage.html
+++ b/bitbake/lib/toaster/toastergui/templates/basebuildpage.html
@@ -1,17 +1,56 @@
-{% extends "basetable.html" %}
-
-{% block pagename %}
-<ul class="nav nav-tabs" style="display: inline-block">
-  <li><a>Build {{build.target_set.all|join:"&nbsp;"}} at {{build.started_on}} : </a></li>
-  <li><a href="{% url "task" build.id %}"> Tasks </a></li>
-  <li><a href="{% url "bpackage" build.id %}"> Build Packages </a></li>
-    {% for t in build.target_set.all %}
-        {% if t.is_image %}
-  <li><a href="{% url "tpackage" build.id t.pk %}"> Packages for {{t.target}} </a> </li>
-        {% endif %}
-    {% endfor %}
-  <li><a href="{% url "configuration" build.id %}"> Configuration </a> </li>
-</ul>
-     <h1>Toaster - Build {% block pagetitle %} {% endblock %}</h1>
+{% extends "base.html" %}
+{% load humanize %}
+{% block pagecontent %}
+
+
+ <div class="span12">
+<!-- Breadcrumbs -->
+    <div class="section">
+        <ul class="breadcrumb" id="breadcrumb">
+<li><a href="{% url 'all-builds' %}">All builds</a></li>
+<li><a href="{%url 'builddashboard' build.pk%}">{{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}})</a></li>
+            {% block localbreadcrumb %}{% endblock %}
+        </ul>
+        <script>
+        $( function () {
+            $('#breadcrumb > li').append("<span class=\"divider\">→</span>");
+            $('#breadcrumb > li:last').addClass("active");
+            $('#breadcrumb > li:last > span').remove();
+        });
+        </script>
+    </div>
+
+    <div class="row-fluid">
+
+        <!-- begin left sidebar container -->
+        <div id="nav" class="span2">
+            <ul class="nav nav-list well">
+                <li class="nav-header">Images</li>
+            {% for t in build.target_set.all %}
+                <li><a href="{% url 'target' build.pk t.pk %}">{{t.target}}</a><li>
+            {% endfor %}
+                <li class="nav-header">Build</li>
+                <li><a href="{% url 'configuration' build.pk %}">Configuration</a></li>
+                <li><a href="{% url 'tasks' build.pk %}">Tasks</a></li>
+                <li><a href="{% url 'recipes' build.pk %}">Recipes</a></li>
+                <li><a href="{% url 'packages' build.pk %}">Packages</a></li>
+                <li class="nav-header">Performance</li>
+                <li><a href="{% url 'buildtime' build.pk %}">Time</a></li>
+                <li><a href="{% url 'cpuusage' build.pk %}">CPU usage</a></li>
+                <li><a href="{% url 'diskio' build.pk %}">Disk I/O</a></li>
+            </ul>
+        </div>
+
+        <!-- end left sidebar container -->
+        <!-- Begin right container -->
+        <div class="row span10">
+        {% block buildinfomain %}{% endblock %}
+        </div>
+
+
+    </div>
+  </div>
+
+
 {% endblock %}