[Toaster] [PATCH 07/20] toaster: build data Variables to Bootstrap 3
Belen Barros Pena
belen.barros.pena at linux.intel.com
Thu Jun 9 06:24:20 PDT 2016
Make sure the page showing the variable history displays correctly with
Bootstrap 3.
Signed-off-by: Belen Barros Pena <belen.barros.pena at linux.intel.com>
---
.../lib/toaster/toastergui/static/css/default.css | 26 +++-
.../toastergui/templates/basetable_bottom.html | 24 ++--
.../toastergui/templates/basetable_top.html | 135 ++++++++++++---------
.../toaster/toastergui/templates/configvars.html | 79 +++++++-----
.../toastergui/templates/filtersnippet.html | 40 +++---
bitbake/lib/toaster/toastergui/views.py | 1 -
6 files changed, 179 insertions(+), 126 deletions(-)
diff --git a/bitbake/lib/toaster/toastergui/static/css/default.css b/bitbake/lib/toaster/toastergui/static/css/default.css
index d808ab0..fe2c4c2 100644
--- a/bitbake/lib/toaster/toastergui/static/css/default.css
+++ b/bitbake/lib/toaster/toastergui/static/css/default.css
@@ -25,6 +25,13 @@ img.logo { height: 30px; vertical-align: bottom; }
/* Set a limit to popover height to handle long dependency lists */
.popover-content { max-height: 350px; overflow: scroll; }
+/* Set a limit to modal dialogs height to handle long variable history */
+[id^="variable-"] .modal-content { max-height: 550px; overflow-y: scroll; }
+
+/* Make sure long values in variable history do not make the modal dialogs
+ * scroll horizontally */
+[id^="variable-"] .modal-content p { word-break: break-all; }
+
/* Increase bottom margin of definition lists inside popovers for the Toaster version information in the top navbar, and also inside the right hand columns of our details pages */
.popover-content dd,
.item-info dd { margin-bottom: 15px; }
@@ -51,18 +58,20 @@ img.logo { height: 30px; vertical-align: bottom; }
/* Styles for our table controls */
.form-control[id^="search-input-"],
-.form-control[id^="new-search-input-"] { width: 30em; }
+.form-control[id^="new-search-input-"],
+#search{ width: 30em; }
#search-input-selectpackagestable,
#search-input-packagestable,
-.form-control[id^="no-results-search-input-"]{ width: 20em; }
+.form-control[id^="no-results-search-input-"] { width: 20em; }
#edit-columns-button { margin-right: 30px; }
-.navbar-default[id^="table-chrome-"] { background-color: transparent; }
+.navbar-default[id^="table-chrome-"],
+#variables .navbar-default { background-color: transparent; }
[id^="table-chrome-collapse-"] .navbar-form { margin-left: -15px; }
.dropdown-menu.editcol { padding-left: 10px; min-width: 200px; }
span[class^="remove-search-btn-"] { position: absolute; right: 5px; top: 0; bottom: 0; height: 14px; margin: auto; font-size: 14px; cursor: pointer; color: #777;}
span[class^="remove-search-btn-"]:hover { color: #333; }
-#no-results-special-selectpackagestable .form-inline { margin-top: 20px; }
-[id^="pagination-"] .pagination,
+#no-results-special-selectpackagestable .form-inline { margin-top: 20px; }
+[id^="pagination-"] .pagination,
[id^="pagination-"] .navbar-form { margin-top: 0; }
[id^="table-chrome-"] .navbar-form { margin-left: -15px; margin-right: -15px; }
[id^="table-chrome-"] .detail-page-contols { padding-left: 0; padding-right: 0; }
@@ -208,6 +217,13 @@ td > .tooltip-inner,
#recipestable .get_description_or_summary { width: 40%; }
#machinestable .name { white-space: nowrap; }
#machinestable .description { width: 45%; }
+#otable .variable_value,
+#otable .file { word-break: break-all; width: 25%; }
+[id^="variable-"] .file { word-break: break-all; }
+
+/* For the tables still not ported to ToasterTables, style the table headings
+ * that are not sortable */
+th > span.text-muted { font-weight: normal; }
/* Override the rather ugly default code styles */
code { color: #333; background-color: transparent; }
diff --git a/bitbake/lib/toaster/toastergui/templates/basetable_bottom.html b/bitbake/lib/toaster/toastergui/templates/basetable_bottom.html
index 96f405c..7fc3138 100644
--- a/bitbake/lib/toaster/toastergui/templates/basetable_bottom.html
+++ b/bitbake/lib/toaster/toastergui/templates/basetable_bottom.html
@@ -2,7 +2,7 @@
</table>
<!-- Show pagination controls -->
-<div>
+<div id="pagination-basetable_bottom">
<!--span class="help-inline">Showing {{objects.start_index}} to {{objects.end_index}} out of {{objects.paginator.count}} entries.</span-->
<ul class="pagination">
@@ -20,16 +20,18 @@
<li class="disabled"><a href="#">»</a></li>
{%endif%}
</ul>
- <div class="pull-right">
- <span class="help-inline">Show rows:</span>
- <select class="pagesize">
- {% with "10 25 50 100 150" as list%}
- {% for i in list.split %}
- <option value="{{i}}">{{i}}</option>
- {% endfor %}
- {% endwith %}
- </select>
- </div>
+ <form class="navbar-form navbar-right">
+ <div class="form-group">
+ <label>Show rows:</label>
+ <select class="form-control pagesize">
+ {% with "10 25 50 100 150" as list%}
+ {% for i in list.split %}
+ <option value="{{i}}">{{i}}</option>
+ {% endfor %}
+ {% endwith %}
+ </select>
+ </div>
+ </form>
</div>
<!-- Update page display settings -->
diff --git a/bitbake/lib/toaster/toastergui/templates/basetable_top.html b/bitbake/lib/toaster/toastergui/templates/basetable_top.html
index 6731ff2..61785f0 100644
--- a/bitbake/lib/toaster/toastergui/templates/basetable_top.html
+++ b/bitbake/lib/toaster/toastergui/templates/basetable_top.html
@@ -159,68 +159,83 @@
</script>
<!-- control header -->
-<div class="navbar">
- <div class="navbar-inner">
- <form class="navbar-search" id="searchform">
- <div class="input-append">
- <input id="search" name="search" type="text" placeholder="Search {%if object_search_display %}{{object_search_display}}{%else%}{{objectname}}{%endif%}" value="{%if request.GET.search %}{{request.GET.search}}{% endif %}"/>{% if request.GET.search %}<a href="javascript:$('#search').val('');searchform.submit()" class="input-append-addon btn" tabindex="-1"><i class="glyphicon glyphicon-remove"></i></a>{%endif%}
- <input type="hidden" name="orderby" value="{{request.GET.orderby}}">
- <input type="hidden" name="page" value="1">
- <button class="btn" id="search-button" type="submit" value="Search">Search</button>
- </div>
+<div class="navbar navbar-default">
+ <div class="container-fluid">
+ <div class="navbar-header">
+ <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#table-chrome-collapse-variablehistory" aria-expanded="false">
+ <span class="sr-only">Toggle table options</span>
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ </button>
+ </div>
+ <div class="collapse navbar-collapse" id="table-chrome-collapse-variablehistory">
+ <form class="navbar-form navbar-left" id="searchform">
+ <div class="form-group">
+ <div class="btn-group">
+ <input class="form-control" id="search" name="search" type="text" placeholder="Search {%if object_search_display %}{{object_search_display}}{%else%}{{objectname}}{%endif%}" value="{%if request.GET.search %}{{request.GET.search}}{% endif %}"/>
+ {% if request.GET.search %}<a href="javascript:$('#search').val('');searchform.submit()" tabindex="-1"><span class="remove-search-btn-variables glyphicon glyphicon-remove-circle"></span></a>{%endif%}
+ </div>
+ </div>
+ <input type="hidden" name="orderby" value="{{request.GET.orderby}}">
+ <input type="hidden" name="page" value="1">
+ <button class="btn btn-default" id="search-button" type="submit" value="Search">Search</button>
</form>
- <div class="pull-right">
-{% if tablecols %}
- <div class="btn-group">
- <button id="edit-columns-button" class="btn dropdown-toggle" data-toggle="dropdown">Edit columns
- <span class="caret"></span>
- </button>
+ <form class="navbar-form navbar-right">
+ <div class="form-group">
+ <label>Show rows:</label>
+ <select class="pagesize form-control">
+ {% with "10 25 50 100 150" as list%}
+ {% for i in list.split %}
+ <option value="{{i}}">{{i}}</option>
+ {% endfor %}
+ {% endwith %}
+ </select>
+ </div>
+ </form>
+
+ <div class="btn-group navbar-right">
+ {% if tablecols %}
+ <button id="edit-columns-button" class="btn btn-default navbar-btn dropdown-toggle" data-toggle="dropdown">Edit columns
+ <span class="caret"></span>
+ </button>
<!--
{{tablecols|sortcols}}
-->
- <ul id='editcol' class="dropdown-menu">
- {% for i in tablecols|sortcols %}
- <li>
- <label {% if not i.clclass %} class="checkbox muted" {%else%} class="checkbox" {%endif%}>
- <input type="checkbox" class="chbxtoggle"
- {% if i.clclass %}
- id="{{i.clclass}}"
- value="ct{{i.name}}"
- {% if not i.hidden %}
- checked="checked"
- {%endif%}
- onclick="showhideTableColumn(
- $(this).attr('id'),
- $(this).is(':checked'),
- {% if i.ordericon %}
- '{{i.orderkey}}'
- {% else %}
- undefined
- {% endif %}
- )"
- {%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 "10 25 50 100 150" as list%}
- {% for i in list.split %}
- <option value="{{i}}">{{i}}</option>
- {% endfor %}
- {% endwith %}
- </select>
- </div>
+ <ul id="editcol" class="dropdown-menu editcol">
+ {% for i in tablecols|sortcols %}
+ <li>
+ <div class="checkbox">
+ <label {% if not i.clclass %} class="muted" {%endif%}>
+ <input type="checkbox" class="chbxtoggle"
+ {% if i.clclass %}
+ id="{{i.clclass}}"
+ value="ct{{i.name}}"
+ {% if not i.hidden %}
+ checked="checked"
+ {%endif%}
+ onclick="showhideTableColumn(
+ $(this).attr('id'),
+ $(this).is(':checked'),
+ {% if i.ordericon %}
+ '{{i.orderkey}}'
+ {% else %}
+ undefined
+ {% endif %}
+ )"
+ {%else%}
+ checked disabled
+ {% endif %}/>{{i.name}}
+ </label>
+ </div>
+ </li>
+ {% endfor %}
+ </ul>
+ {% endif %}
</div>
- </div> <!-- navbar-inner -->
-</div>
+ </div> <!-- navbar-collapse -->
+ </div> <!-- container-fluid -->
+</div> <!-- navbar-default -->
<!-- the actual rows of the table -->
<table class="table table-bordered table-hover tablesorter" id="otable">
@@ -228,11 +243,11 @@
<!-- Table header row; generated from "tablecols" entry in the context dict -->
<tr>
{% for tc in tablecols %}<th class="{%if tc.dclass%}{{tc.dclass}}{%endif%} {% if tc.clclass %}{{tc.clclass}}{% endif %}">
- {%if tc.qhelp%}<i class="icon-question-sign get-help" title="{{tc.qhelp}}"></i>{%endif%}
- {%if tc.orderfield%}<a {%if tc.ordericon%} class="sorted" {%endif%}href="javascript:reload_params({'page': 1, 'orderby' : '{{tc.orderfield}}' })">{{tc.name}}</a>{%else%}<span class="muted">{{tc.name}}</span>{%endif%}
+ {%if tc.qhelp%}<span class="glyphicon glyphicon-question-sign get-help" title="{{tc.qhelp}}"></span>{%endif%}
+ {%if tc.orderfield%}<a {%if tc.ordericon%} class="sorted" {%endif%}href="javascript:reload_params({'page': 1, 'orderby' : '{{tc.orderfield}}' })">{{tc.name}}</a>{%else%}<span class="text-muted">{{tc.name}}</span>{%endif%}
{%if tc.ordericon%} <i class="icon-caret-{{tc.ordericon}}"></i>{%endif%}
{%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%}{{tc.filter.options|filtered_icon:request.GET.filter}} {%endif%}" {%if request.GET.filter and tc.filter.options|filtered_tooltip:request.GET.filter %} title="<p>{{tc.filter.options|filtered_tooltip:request.GET.filter}}</p><p><a class='btn btn-sm btn-primary' href=javascript:reload_params({'filter':''})>Show all {% if filter_search_display %}{{filter_search_display}}{% else %}{{objectname}}{% endif %}</a></p>" {%endif%} data-toggle="modal"> <i class="glyphicon glyphicon-filter filtered"></i> </a>
+ <a href="#filter_{{tc.filter.class}}" role="button" class="btn btn-xs {%if request.GET.filter%}{{tc.filter.options|filtered_icon:request.GET.filter}} {%endif%}" {%if request.GET.filter and tc.filter.options|filtered_tooltip:request.GET.filter %} title="<p>{{tc.filter.options|filtered_tooltip:request.GET.filter}}</p><p><a class='btn btn-sm btn-primary' href=javascript:reload_params({'filter':''})>Show all {% if filter_search_display %}{{filter_search_display}}{% else %}{{objectname}}{% endif %}</a></p>" {%endif%} data-toggle="modal"> <span class="glyphicon glyphicon-filter filtered"></span> </a>
</div>{%endif%}
</th>{% endfor %}
</tr>
diff --git a/bitbake/lib/toaster/toastergui/templates/configvars.html b/bitbake/lib/toaster/toastergui/templates/configvars.html
index f100b24..563e8c7 100644
--- a/bitbake/lib/toaster/toastergui/templates/configvars.html
+++ b/bitbake/lib/toaster/toastergui/templates/configvars.html
@@ -13,7 +13,7 @@
{% block buildinfomain %}
<!-- page title -->
<div class="col-md-10">
- <div class="page-header">
+ <div class="page-header build-data">
<h1>
{% if request.GET.filter and objects.paginator.count > 0 or request.GET.search and objects.paginator.count > 0 %}
{{objects.paginator.count}} variable{{objects.paginator.count|pluralize}} found
@@ -27,7 +27,7 @@
<!-- configuration table -->
<div id="navTab">
- <ul class="nav nav-pills">
+ <ul class="nav nav-tabs">
<li class=""><a href="{% url 'configuration' build.id %}">Summary</a></li>
<li class="active"><a href="#" >BitBake variables</a></li>
</ul>
@@ -36,11 +36,20 @@
<div id="variables" class="tab-pane">
{% if objects.paginator.count == 0 %}
- <div class="alert">
- <form class="no-results input-append" id="searchform">
- <input id="search" name="search" class="input-xxlarge" type="text" value="{% if request.GET.search %}{{request.GET.search}}{% endif %}"/>{% if request.GET.search %}<a href="javascript:$('#search').val('');searchform.submit()" class="input-append-addon btn" tabindex="-1"><i class="glyphicon glyphicon-remove"></i></a>{% endif %}
- <button class="btn" type="submit" value="Search">Search</button>
- <button class="btn btn-link" onclick="javascript:$('#search').val('');searchform.submit()">Show all variables</button>
+ <div class="alert alert-warning">
+ <form class="no-results form-inline" id="searchform">
+ <div class="form-group">
+ <div class="btn-group">
+ <input class="form-control" id="search" name="search" type="text" value="{% if request.GET.search %}{{request.GET.search}}{% endif %}"/>
+ {% if request.GET.search %}
+ <a href="javascript:$('#search').val('');searchform.submit()" tabindex="-1">
+ <span class="remove-search-btn-variables glyphicon glyphicon-remove-circle"></span>
+ </a>
+ {% endif %}
+ </div>
+ </div>
+ <button class="btn btn-default" type="submit" value="Search">Search</button>
+ <button class="btn btn-link" onclick="javascript:$('#search').val('');searchform.submit()">Show all variables</button>
</form>
</div>
@@ -50,24 +59,26 @@
{% for variable in objects %}
<tr class="data">
<td class="variable_name"><a data-toggle="modal" href="#variable-{{variable.pk}}">{{variable.variable_name}}</a></td>
- <td class="variable_value"><a data-toggle="modal" href="#variable-{{variable.pk}}">{{variable.variable_value|truncatechars:153}}</a></td>
- <td class="file"><a data-toggle="modal" href="#variable-{{variable.pk}}">
+ <td class="variable_value">{{variable.variable_value|truncatechars:153}}</td>
+ <td class="file">
{% if variable.vhistory.all %}
{% for path in variable.vhistory.all|filter_setin_files:file_filter %}
{{path}}<br/>
{% endfor %}
{% endif %}
- </a></td>
+ </td>
<td class="description">
{% if variable.description %}
{{variable.description}}
<a href="http://www.yoctoproject.org/docs/current/ref-manual/ref-manual.html#var-{{variable.variable_name|variable_parent_name}}" target="_blank">
- <i class="glyphicon glyphicon-share get-info"></i></a>
+ <span class="glyphicon glyphicon-new-window get-info"></span></a>
{% endif %}
</td>
</tr>
{% endfor %}
-
+ </tbody>
+</table>
+</div> <! -- table-responsive -->
{% include "basetable_bottom.html" %}
{% endif %}
</div> <!-- endvariables -->
@@ -75,7 +86,7 @@
<!-- file list popups -->
{% for variable in objects %}
{% if variable.vhistory.count %}
- <div id="variable-{{variable.pk}}" class="modal in fade" tabindex="-1" role="dialog">
+ <div id="variable-{{variable.pk}}" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
@@ -95,34 +106,36 @@
<span>{{variable.variable_value|string_slice:':570'}}
<span class="full"> {{variable.variable_value|string_slice:'570:'}}
</span>
- <a class="btn btn-mini full-show">...</a>
+ <a href="#" class="full-show">...</a>
</span>
</p>
- <a class="btn btn-mini full-hide">Collapse variable value <i class="icon-caret-up"></i>
+ <a href="#" class="full-hide">Collapse variable value <i class="icon-caret-up"></i>
</a>
{% endif %}
{% else %}
<div class="alert alert-info">The value of <strong>{{variable.variable_name}}</strong> is an empty string</div>
{% endif %}
<h4>The value was set in the following configuration files:</h4>
- <table class="table table-bordered table-hover">
- <thead>
- <tr>
- <th>Order</th>
- <th>Configuration file</th>
- <th>Operation</th>
- <th>Line number</th>
- </tr>
- </thead>
- <tbody>
- {% for vh in variable.vhistory.all %}
- <tr>
- <td>{{forloop.counter}}</td><td>{{vh.file_name}}</td><td>{{vh.operation}}</td><td>{{vh.line_number}}</td>
- </tr>
- {%endfor%}
- </tbody>
- </table>
- </div>
+ <div class="table-responsive">
+ <table class="table table-bordered table-hover">
+ <thead>
+ <tr>
+ <th>Order</th>
+ <th>Configuration file</th>
+ <th>Operation</th>
+ <th>Line</th>
+ </tr>
+ </thead>
+ <tbody>
+ {% for vh in variable.vhistory.all %}
+ <tr>
+ <td>{{forloop.counter}}</td><td class="file">{{vh.file_name}}</td><td>{{vh.operation}}</td><td>{{vh.line_number}}</td>
+ </tr>
+ {%endfor%}
+ </tbody>
+ </table>
+ </div>
+ </div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
diff --git a/bitbake/lib/toaster/toastergui/templates/filtersnippet.html b/bitbake/lib/toaster/toastergui/templates/filtersnippet.html
index 4c2c53e..9f86eaa 100644
--- a/bitbake/lib/toaster/toastergui/templates/filtersnippet.html
+++ b/bitbake/lib/toaster/toastergui/templates/filtersnippet.html
@@ -17,25 +17,27 @@
</div>
<div class="modal-body">
<p>{{f.label}}</p>
- <label class="radio">
- <input type="radio" name="filter" {%if request.GET.filter%}{{f.options|check_filter_status:request.GET.filter}} {%else%} checked {%endif%} value="" data-key="{{key}}"> All {%if filter_search_display%}{{filter_search_display|title}}{%else%}{{objectname|title}}{%endif%}
- </label>
+ <div class="radio">
+ <label>
+ <input type="radio" name="filter" {%if request.GET.filter%}{{f.options|check_filter_status:request.GET.filter}} {%else%} checked {%endif%} value="" data-key="{{key}}"> All {%if filter_search_display%}{{filter_search_display|title}}{%else%}{{objectname|title}}{%endif%}
+ </label>
+ </div>
{% for option in f.options %}
+ <div class="radio">
{% if option.1 == 'daterange' %}
- <div class="form-inline">
- <label class="radio">
+ <label>
<input type="radio" name="filter" id="filter_value_{{key}}" {%if key == daterange_selected %}checked{%endif%} value="{{option.1}}" data-key="{{key}}"> {{option.0}}
- {% else %}
+ {% else %}
{% if 1 %}
- <label class="radio">
- <input type="radio" name="filter" {%if request.GET.filter == option.1 %}checked{%endif%} value="{{option.1}}" data-key="{{key}}"> {{option.0}}
+ <label>
+ <input type="radio" name="filter" {%if request.GET.filter == option.1 %}checked{%endif%} value="{{option.1}}" data-key="{{key}}"> {{option.0}}
{% comment "do not disable radio selections by count for now" %}{% else %}
- <label class="radio muted">
+ <label class="text-muted">
<input type="radio" name="filter" disabled {%if request.GET.filter == option.1 %}checked{%endif%} value="{{option.1}}" data-key="{{key}}"> {{option.0}}
{% endcomment %}{% endif %}
{% endif %}
{% if option.3 %}<i class="icon-question-sign get-help" data-placement="right" title="{{option.3}}"></i>{% endif %}
- </label>
+ </label></div>
{% if option.1 == 'daterange' %}
<input type="text" id="date_from_{{key}}" name="date_from_{{key}}" disabled class="input-sm" /><label class="help-inline">to</label>
<input type="text" id="date_to_{{key}}" name="date_to_{{key}}" disabled class="input-sm" />
@@ -50,12 +52,18 @@
{% endif %}
</div>
<div class="modal-footer">
- <button type="submit" class="btn btn-primary" data-key="{{key}}">Apply</button>
- {% if request.GET.filter %}
- {% if request.GET.filter|string_remove_regex:':.*' != f.options.0.1|string_remove_regex:':.*' %}
- <span class="help-inline pull-left">You can only apply one filter to the table. This filter will override the current filter.</span>
- {% endif %}
- {% endif %}
+ <div class="row">
+ <div class="col-md-6">
+ <button type="submit" class="btn btn-primary" data-key="{{key}}">Apply</button>
+ </div>
+ <div class="col-md-6">
+ {% if request.GET.filter %}
+ {% if request.GET.filter|string_remove_regex:':.*' != f.options.0.1|string_remove_regex:':.*' %}
+ <p class="text-right text-muted">You can only apply one filter to the table. This filter will override the current filter.</p>
+ {% endif %}
+ {% endif %}
+ </div>
+ </div>
</div>
</form>
</div><!-- /.modal-content -->
diff --git a/bitbake/lib/toaster/toastergui/views.py b/bitbake/lib/toaster/toastergui/views.py
index 1f908ea..f05677e 100755
--- a/bitbake/lib/toaster/toastergui/views.py
+++ b/bitbake/lib/toaster/toastergui/views.py
@@ -898,7 +898,6 @@ def configvars(request, build_id):
},
{'name': 'Value',
'qhelp': "The value assigned to the variable",
- 'dclass': "span4",
},
{'name': 'Set in file',
'qhelp': "The last configuration file that touched the variable value",
--
1.9.1
More information about the toaster
mailing list