bitbake: toaster: Toaster GUI, generic search, filter and order

This patch implements table searching, filtering and ordering, in a
generic mode reusable for all tables.

The search operates list of fields defined in the corresponding
class for each model, search_allowed_fields.

The search expression and filters are sent through GET requests
using a QuerySet-like input. The inputs are filtered and
validated before usage to prevent inadvertent or malicious use.

Filters and table headers are defined in the views for each table,
and rendered by generic code which is easily modified for various
tables.

The Build table and Configuration table are implemented using this
framework as an example of how it should be used.

    [YOCTO #4249]
    [YOCTO #4254]
    [YOCTO #4255]
    [YOCTO #4256]
    [YOCTO #4257]
    [YOCTO #4259]
    [YOCTO #4260]

(Bitbake rev: 2ca15117e4bbda38cda07511d0ff317273f91528)

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

1 files changed, 43 insertions, 36 deletions

diff --git a/bitbake/lib/toaster/toastergui/templates/basetable_top.html b/bitbake/lib/toaster/toastergui/templates/basetable_top.html
index b9277b4a3d..34e0cd7210 100644
--- a/bitbake/lib/toaster/toastergui/templates/basetable_top.html
+++ b/bitbake/lib/toaster/toastergui/templates/basetable_top.html
@@ -21,46 +21,53 @@
 
 <!-- control header -->
 <div class="navbar">
-                    <div class="navbar-inner">
-                        <form class="navbar-search input-append pull-left">
-                            <input class="input-xxlarge" type="text" placeholder="Search {{objectname}}" />
-                            <button class="btn" type="button">Search</button>
-                        </form>
-                        <div class="pull-right">
-
-    {% if tablecols %}
-                            <div class="btn-group">
-                                <button class="btn dropdown-toggle" data-toggle="dropdown">
-                                    Edit columns
-                                    <span class="caret"></span>
-                                </button>
-                                <ul class="dropdown-menu">
-
-    {% for i in tablecols %}
-                                    <li>
-                                        <label class="checkbox">
-<input type="checkbox" class="chbxtoggle" id="{{i.clclass}}" value="ct{{i.name}}" {% if i.clclass %}{% if not i.hidden %}checked="checked"{%endif%} onchange="showhideTableColumn($(this).attr('id'), $(this).is(':checked'))" {%else%} disabled{% endif %}/>   {{i.name}}
-                                        </label>
-                                    </li>
-    {% endfor %}
-                                </ul>
-                            </div>
-    {% endif %}
-
-    <div style="display:inline">
-                            <span class="divider-vertical"></span>
-                            <span class="help-inline" style="padding-top:5px;">Show rows:</span>
-                            <select style="margin-top:5px;margin-bottom:0px;" class="pagesize">
+    <div class="navbar-inner">
+        <form class="navbar-search input-append pull-left" >
+            <input class="input-xxlarge" name="search" type="text" placeholder="Search {{objectname}}" value="{{request.GET.search}}"/>
+            <input class="btn" type="submit" value="Search"/>
+        </form>
+        <div class="pull-right">
+{% if tablecols %}
+            <div class="btn-group">
+                <button class="btn dropdown-toggle" data-toggle="dropdown">Edit columns
+                    <span class="caret"></span>
+                </button>
+                <ul class="dropdown-menu">{% for i in tablecols %}
+                    <li>
+                        <label class="checkbox">
+                            <input type="checkbox" class="chbxtoggle" {% if i.clclass %}id="{{i.clclass}}" value="ct{{i.name}}" {% if not i.hidden %}checked="checked"{%endif%} onchange="showhideTableColumn($(this).attr('id'), $(this).is(':checked'))" {%else%} checked disabled{% endif %}/>   {{i.name}}
+                        </label>
+                    </li>{% endfor %}
+                </ul>
+            </div>
+{% endif %}
+            <div style="display:inline">
+                <span class="divider-vertical"></span>
+                <span class="help-inline" style="padding-top:5px;">Show rows:</span>
+                <select style="margin-top:5px;margin-bottom:0px;" class="pagesize">
   {% with "2 5 10 25 50 100" as list%}
-    {% for i in list.split %}<option{%if i == request.GET.count %} selected{%endif%}>{{i}}</option>
+{% for i in list.split %}                    <option{%if i == request.GET.count %} selected{%endif%}>{{i}}</option>
     {% endfor %}
   {% endwith %}
-                            </select>
-    </div>
-                        </div>
-                    </div>
-                </div>
+                </select>
+           </div>
+        </div>
+    </div> <!-- navbar-inner -->
+</div>
 
 <!-- the actual rows of the table -->
     <table class="table table-bordered table-hover tablesorter" id="otable">
+    <thead>
+        <!-- Table header row; generated from "tablecols" entry in the context dict -->
+        <tr>
+            {% for tc in tablecols %}<th class="{{tc.dclass}} {{tc.clclass}}">
+                {%if tc.qhelp%}<i class="icon-question-sign get-help" data-toggle="tooltip" title="{{tc.qhelp}}"></i>{%endif%}
+                <a href="javascript:reload_params({'orderby' : '{{tc.orderfield}}' })" style="font-weight:normal;">{{tc.name}}</a>
+                {%if tc.filter%}<div class="btn-group pull-right">
+                    <a href="#filter_{{tc.filter.class}}" role="button" class="btn btn-mini{%if request.GET.filter in tc.filter.options.values%} btn-primary{%endif%}" data-toggle="modal"> <i class="icon-filter filtered"></i> </a>
+                </div>{%endif%}
+            </th>{% endfor %}
+        </tr>
+    </thead>
+    <tbody>