Adds new template structure

The new template structure is based on Jinja template engine. Besides
the template statements itself it was also split the js and css code in
proper separated files. This way the results template keeps simpler.
Signed-off-by: NCaio Carrara <ccarrara@redhat.com>

optional_plugins/html/avocado_result_html/templates/avocado_html.js

+$(document).ready(function() {
+  $('#results').dataTable();
+
+  $(function () {$('[data-toggle="popover"]').popover()})
+
+  $('#results')
+    .removeClass( 'display' )
+    .addClass('table table-striped table-bordered');
+} );

optional_plugins/html/avocado_result_html/templates/datatables.bootstrap.js

+/*! DataTables Bootstrap 3 integration
+ * ©2011-2014 SpryMedia Ltd - datatables.net/license
+ */
+
+/**
+ * DataTables integration for Bootstrap 3. This requires Bootstrap 3 and
+ * DataTables 1.10 or newer.
+ *
+ * This file sets the defaults and adds options to DataTables to style its
+ * controls using Bootstrap. See http://datatables.net/manual/styling/bootstrap
+ * for further information.
+ */
+(function(window, document, undefined){
+
+  var factory = function( $, DataTable ) {
+    "use strict";
+
+
+    /* Set the defaults for DataTables initialisation */
+    $.extend( true, DataTable.defaults, {
+      dom:
+      "<'row'<'col-sm-6'l><'col-sm-6'f>>" +
+      "<'row'<'col-sm-12'tr>>" +
+      "<'row'<'col-sm-6'i><'col-sm-6'p>>",
+      renderer: 'bootstrap'
+    } );
+
+
+    /* Default class modification */
+    $.extend( DataTable.ext.classes, {
+      sWrapper:      "dataTables_wrapper form-inline dt-bootstrap",
+      sFilterInput:  "form-control input-sm",
+      sLengthSelect: "form-control input-sm"
+    } );
+
+
+    /* Bootstrap paging button renderer */
+    DataTable.ext.renderer.pageButton.bootstrap = function ( settings, host, idx, buttons, page, pages ) {
+      var api     = new DataTable.Api( settings );
+      var classes = settings.oClasses;
+      var lang    = settings.oLanguage.oPaginate;
+      var btnDisplay, btnClass;
+
+      var attach = function( container, buttons ) {
+        var i, ien, node, button;
+        var clickHandler = function ( e ) {
+          e.preventDefault();
+          if ( !$(e.currentTarget).hasClass('disabled') ) {
+            api.page( e.data.action ).draw( false );
+          }
+        };
+
+        for ( i=0, ien=buttons.length ; i<ien ; i++ ) {
+          button = buttons[i];
+
+          if ( $.isArray( button ) ) {
+            attach( container, button );
+          }
+          else {
+            btnDisplay = '';
+            btnClass = '';
+
+            switch ( button ) {
+              case 'ellipsis':
+                btnDisplay = '&hellip;';
+                btnClass = 'disabled';
+                break;
+
+              case 'first':
+                btnDisplay = lang.sFirst;
+                btnClass = button + (page > 0 ?
+                  '' : ' disabled');
+                break;
+
+              case 'previous':
+                btnDisplay = lang.sPrevious;
+                btnClass = button + (page > 0 ?
+                  '' : ' disabled');
+                break;
+
+              case 'next':
+                btnDisplay = lang.sNext;
+                btnClass = button + (page < pages-1 ?
+                  '' : ' disabled');
+                break;
+
+              case 'last':
+                btnDisplay = lang.sLast;
+                btnClass = button + (page < pages-1 ?
+                  '' : ' disabled');
+                break;
+
+              default:
+                btnDisplay = button + 1;
+                btnClass = page === button ?
+                  'active' : '';
+                break;
+            }
+
+            if ( btnDisplay ) {
+              node = $('<li>', {
+                'class': classes.sPageButton+' '+btnClass,
+                'aria-controls': settings.sTableId,
+                'tabindex': settings.iTabIndex,
+                'id': idx === 0 && typeof button === 'string' ?
+                settings.sTableId +'_'+ button :
+                null
+              } )
+                .append( $('<a>', {
+                  'href': '#'
+                } )
+                  .html( btnDisplay )
+                )
+                .appendTo( container );
+
+              settings.oApi._fnBindAction(
+                node, {action: button}, clickHandler
+              );
+            }
+          }
+        }
+      };
+
+      attach(
+        $(host).empty().html('<ul class="pagination"/>').children('ul'),
+        buttons
+      );
+    };
+
+
+    /*
+     * TableTools Bootstrap compatibility
+     * Required TableTools 2.1+
+     */
+    if ( DataTable.TableTools ) {
+      // Set the classes that TableTools uses to something suitable for Bootstrap
+      $.extend( true, DataTable.TableTools.classes, {
+        "container": "DTTT btn-group",
+        "buttons": {
+          "normal": "btn btn-default",
+          "disabled": "disabled"
+        },
+        "collection": {
+          "container": "DTTT_dropdown dropdown-menu",
+          "buttons": {
+            "normal": "",
+            "disabled": "disabled"
+          }
+        },
+        "print": {
+          "info": "DTTT_print_info"
+        },
+        "select": {
+          "row": "active"
+        }
+      } );
+
+      // Have the collection use a bootstrap compatible drop down
+      $.extend( true, DataTable.TableTools.DEFAULTS.oTags, {
+        "collection": {
+          "container": "ul",
+          "button": "li",
+          "liner": "a"
+        }
+      } );
+    }
+
+  }; // /factory
+
+
+  // Define as an AMD module if possible
+  if ( typeof define === 'function' && define.amd ) {
+    define( ['jquery', 'datatables'], factory );
+  }
+  else if ( typeof exports === 'object' ) {
+    // Node/CommonJS
+    factory( require('jquery'), require('datatables') );
+  }
+  else if ( jQuery ) {
+    // Otherwise simply initialise as normal, stopping multiple evaluation
+    factory( jQuery, jQuery.fn.dataTable );
+  }
+
+
+})(window, document);
+

optional_plugins/html/avocado_result_html/templates/datatables.css

+div.dataTables_length label {
+  font-weight: normal;
+  text-align: left;
+  white-space: nowrap;
+}
+
+div.dataTables_length select {
+  width: 75px;
+  display: inline-block;
+}
+
+div.dataTables_filter {
+  text-align: right;
+}
+
+div.dataTables_filter label {
+  font-weight: normal;
+  white-space: nowrap;
+  text-align: left;
+}
+
+div.dataTables_filter input {
+  margin-left: 0.5em;
+  display: inline-block;
+}
+
+div.dataTables_info {
+  padding-top: 8px;
+  white-space: nowrap;
+}
+
+div.dataTables_paginate {
+  margin: 0;
+  white-space: nowrap;
+  text-align: right;
+}
+
+div.dataTables_paginate ul.pagination {
+  margin: 2px 0;
+  white-space: nowrap;
+}
+
+@media screen and (max-width: 767px) {
+  div.dataTables_length,
+  div.dataTables_filter,
+  div.dataTables_info,
+  div.dataTables_paginate {
+    text-align: center;
+  }
+}
+
+
+table.dataTable td,
+table.dataTable th {
+  -webkit-box-sizing: content-box;
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+}
+
+
+table.dataTable {
+  clear: both;
+  margin-top: 6px !important;
+  margin-bottom: 6px !important;
+  max-width: none !important;
+}
+
+table.dataTable thead .sorting,
+table.dataTable thead .sorting_asc,
+table.dataTable thead .sorting_desc,
+table.dataTable thead .sorting_asc_disabled,
+table.dataTable thead .sorting_desc_disabled {
+  cursor: pointer;
+}
+
+table.dataTable thead .sorting { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MTRDMDM5NjkyMkMxMTFFMUExRjFBREFENUIyQTUzOEMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MTRDMDM5NkEyMkMxMTFFMUExRjFBREFENUIyQTUzOEMiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoxNEMwMzk2NzIyQzExMUUxQTFGMUFEQUQ1QjJBNTM4QyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoxNEMwMzk2ODIyQzExMUUxQTFGMUFEQUQ1QjJBNTM4QyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pm8NGvcAAADkSURBVHjaYvz//z8DtQATAxUBCzbBu3fvInO5gLgNiMuA+BdMUFlZmSyXZQNxFhCnUupNLSDOA2JWIC4AOYhcwxiBuBiIZaB8FajBjOQY5gDEgWhiiUBsTaphvEBcC8SCWMRrgJidFMNCoC74gQU7AnEQ1nChZqLFlc4igdQCIP6HwzcZwHQ2n1hvrgPi/UDMgQUfBeI1pITZTyBuAeLPaOLvgbgZizjBpAFyAbpX1gPxAXLSGShmJgHxHSj/CRD3QsXJyk6gHD8BiH9DDb5GcmyigdlArArEUwkpZBy0hSNAgAEA5Ho0sMdEmU8AAAAASUVORK5CYII=) no-repeat center right; }
+table.dataTable thead .sorting_asc { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowMTgwMTE3NDA3MjA2ODExQjM4MkY2QzVGRUYwRTJDNCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo4MkFEQzYxNjIyQzExMUUxQTFGMUFEQUQ1QjJBNTM4QyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo4MkFEQzYxNTIyQzExMUUxQTFGMUFEQUQ1QjJBNTM4QyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IE1hY2ludG9zaCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjAyODAxMTc0MDcyMDY4MTFCMzgyRjZDNUZFRjBFMkM0IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjAxODAxMTc0MDcyMDY4MTFCMzgyRjZDNUZFRjBFMkM0Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+z5ABTAAAAI5JREFUeNpi/P//PwO1ABMDFQELIQXVjfe4gFQbEJe11iv9otRl2UCcBcSphBQy4gszoKu0gNROIJYB4jtA7AF03V2SXQY0iBFIFUMNAgEVIM6DipPsTQcgDkQTSwRia5IMA9rOC6RqgVgQTQokXgOUZyfFZSFQF/zAgh2BOIjkCBjQRDtq2Khh9DAMIMAAT9AmNBDSXegAAAAASUVORK5CYII=) no-repeat center right; }
+table.dataTable thead .sorting_desc { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowMTgwMTE3NDA3MjA2ODExQjM4MkY2QzVGRUYwRTJDNCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo4MkFEQzYxQTIyQzExMUUxQTFGMUFEQUQ1QjJBNTM4QyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo4MkFEQzYxOTIyQzExMUUxQTFGMUFEQUQ1QjJBNTM4QyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IE1hY2ludG9zaCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjAyODAxMTc0MDcyMDY4MTFCMzgyRjZDNUZFRjBFMkM0IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjAxODAxMTc0MDcyMDY4MTFCMzgyRjZDNUZFRjBFMkM0Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+1fsfwAAAAJdJREFUeNpi/P//PwO1ABMDFcGoYaOG0cMwFmyC1Y33IoHUAiD+h8MBGa31SvOJddk6IN4PxBxY8FEgXkO0N4G2/gRSLUD8GU3qPRA3A+U/kxpmIBege2U9EB/ApYERX6kBDDtlILUDiFWA+AkQuwNddY2s2ARqvAukJgDxbyCehM8gnLGJBmYDsSoQTyWkkHHQFo4AAQYAAA0piq4hbqwAAAAASUVORK5CYII=) no-repeat center right; }
+
+table.dataTable thead .sorting_asc_disabled { background: url('../images/sort_asc_disabled.png') no-repeat center right; }
+table.dataTable thead .sorting_desc_disabled { background: url('../images/sort_desc_disabled.png') no-repeat center right; }
+
+table.dataTable thead > tr > th {
+  padding-left: 18px;
+  padding-right: 18px;
+}
+
+table.dataTable th:active {
+  outline: none;
+}
+
+/* Scrolling */
+div.dataTables_scrollHead table {
+  margin-bottom: 0 !important;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+div.dataTables_scrollHead table thead tr:last-child th:first-child,
+div.dataTables_scrollHead table thead tr:last-child td:first-child {
+  border-bottom-left-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
+}
+
+div.dataTables_scrollBody table {
+  border-top: none;
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+}
+
+div.dataTables_scrollBody tbody tr:first-child th,
+div.dataTables_scrollBody tbody tr:first-child td {
+  border-top: none;
+}
+
+div.dataTables_scrollFoot table {
+  margin-top: 0 !important;
+  border-top: none;
+}
+
+/* Frustratingly the border-collapse:collapse used by Bootstrap makes the column
+width calculations when using scrolling impossible to align columns. We have
+to use separate
+ */
+  table.table-bordered.dataTable {
+    border-collapse: separate !important;
+  }
+  table.table-bordered thead th,
+  table.table-bordered thead td {
+    border-left-width: 0;
+    border-top-width: 0;
+  }
+  table.table-bordered tbody th,
+  table.table-bordered tbody td {
+    border-left-width: 0;
+    border-bottom-width: 0;
+  }
+  table.table-bordered th:last-child,
+  table.table-bordered td:last-child {
+    border-right-width: 0;
+  }
+  div.dataTables_scrollHead table.table-bordered {
+    border-bottom-width: 0;
+  }
+
+
+
+
+  /*
+   * TableTools styles
+   */
+  .table.dataTable tbody tr.active td,
+  .table.dataTable tbody tr.active th {
+    background-color: #08C;
+    color: white;
+  }
+
+  .table.dataTable tbody tr.active:hover td,
+  .table.dataTable tbody tr.active:hover th {
+    background-color: #0075b0 !important;
+  }
+
+  .table.dataTable tbody tr.active th > a,
+  .table.dataTable tbody tr.active td > a {
+    color: white;
+  }
+
+  .table-striped.dataTable tbody tr.active:nth-child(odd) td,
+  .table-striped.dataTable tbody tr.active:nth-child(odd) th {
+    background-color: #017ebc;
+  }
+
+  table.DTTT_selectable tbody tr {
+    cursor: pointer;
+  }
+
+  div.DTTT .btn {
+    color: #333 !important;
+    font-size: 12px;
+  }
+
+  div.DTTT .btn:hover {
+    text-decoration: none !important;
+  }
+
+  ul.DTTT_dropdown.dropdown-menu {
+    z-index: 2003;
+  }
+
+  ul.DTTT_dropdown.dropdown-menu a {
+    color: #333 !important; /* needed only when demo_page.css is included */
+  }
+
+  ul.DTTT_dropdown.dropdown-menu li {
+    position: relative;
+  }
+
+  ul.DTTT_dropdown.dropdown-menu li:hover a {
+    background-color: #0088cc;
+    color: white !important;
+  }
+
+  div.DTTT_collection_background {
+    z-index: 2002;        
+  }
+
+  /* TableTools information display */
+  div.DTTT_print_info {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    width: 400px;
+    height: 150px;
+    margin-left: -200px;
+    margin-top: -75px;
+    text-align: center;
+    color: #333;
+    padding: 10px 30px;
+    opacity: 0.95;
+
+    background-color: white;
+    border: 1px solid rgba(0, 0, 0, 0.2);
+    border-radius: 6px;
+
+    -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.5);
+    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.5);
+  }
+
+  div.DTTT_print_info h6 {
+    font-weight: normal;
+    font-size: 28px;
+    line-height: 28px;
+    margin: 1em;
+  }
+
+  div.DTTT_print_info p {
+    font-size: 14px;
+    line-height: 20px;
+  }
+
+  div.dataTables_processing {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 100%;
+    height: 60px;
+    margin-left: -50%;
+    margin-top: -25px;
+    padding-top: 20px;
+    padding-bottom: 20px;
+    text-align: center;
+    font-size: 1.2em;
+    background-color: white;
+    background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255,255,255,0)), color-stop(25%, rgba(255,255,255,0.9)), color-stop(75%, rgba(255,255,255,0.9)), color-stop(100%, rgba(255,255,255,0)));
+    background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0) 100%);
+    background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0) 100%);
+    background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0) 100%);
+    background: -o-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0) 100%);
+    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0) 100%);
+  }
+
+
+
+  /*
+   * FixedColumns styles
+   */
+  div.DTFC_LeftHeadWrapper table,
+  div.DTFC_LeftFootWrapper table,
+  div.DTFC_RightHeadWrapper table,
+  div.DTFC_RightFootWrapper table,
+  table.DTFC_Cloned tr.even {
+    background-color: white;
+    margin-bottom: 0;
+  }
+
+  div.DTFC_RightHeadWrapper table ,
+  div.DTFC_LeftHeadWrapper table {
+    border-bottom: none !important;
+    margin-bottom: 0 !important;
+    border-top-right-radius: 0 !important;
+    border-bottom-left-radius: 0 !important;
+    border-bottom-right-radius: 0 !important;
+  }
+
+  div.DTFC_RightHeadWrapper table thead tr:last-child th:first-child,
+  div.DTFC_RightHeadWrapper table thead tr:last-child td:first-child,
+  div.DTFC_LeftHeadWrapper table thead tr:last-child th:first-child,
+  div.DTFC_LeftHeadWrapper table thead tr:last-child td:first-child {
+    border-bottom-left-radius: 0 !important;
+    border-bottom-right-radius: 0 !important;
+  }
+
+  div.DTFC_RightBodyWrapper table,
+  div.DTFC_LeftBodyWrapper table {
+    border-top: none;
+    margin: 0 !important;
+  }
+
+  div.DTFC_RightBodyWrapper tbody tr:first-child th,
+  div.DTFC_RightBodyWrapper tbody tr:first-child td,
+  div.DTFC_LeftBodyWrapper tbody tr:first-child th,
+  div.DTFC_LeftBodyWrapper tbody tr:first-child td {
+    border-top: none;
+  }
+
+  div.DTFC_RightFootWrapper table,
+  div.DTFC_LeftFootWrapper table {
+    border-top: none;
+    margin-top: 0 !important;
+  }
+
+
+  /*
+   * FixedHeader styles
+   */
+  div.FixedHeader_Cloned table {
+    margin: 0 !important
+  }
+

optional_plugins/html/avocado_result_html/templates/results.j2

+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Avocado Job Report</title>
+
+    <style type="text/css">
+    {% include "bootstrap.min.css" %}
+    </style>
+
+    <style type="text/css">
+    {% include "datatables.css" %}
+    </style>
+  </head>
+
+  <body>
+    <div class="container">
+      <div class="page-header">
+        <h3>Avocado Job Report</h3>
+      </div>
+
+      <div class="panel-group" role="tablist">
+        <div class="panel panel-default">
+          <div class="panel-heading">
+            <h4 class="panel-title">Summary</h4>
+          </div>
+          <table class="table table-bordered">
+            <tr>
+              <td>ID</td>
+              <td><tt>{{ job_unique_id }}</tt></td>
+            </tr>
+            <tr>
+              <td>Host</td>
+              <td><tt>{{ hostname }}</tt></td>
+            </tr>
+            <tr>
+              <td>Results Dir</td>
+              <td><a href="{{ results_dir }}"><tt>{{ results_dir_basename }}</tt></a></td>
+            </tr>
+            <tr>
+              <td>Cumulative test time</td>
+              <td>{{ tests_total_time }} s</td>
+            </tr>
+            <tr>
+              <td>Stats</td>
+              <td>From {{ tests_total }} tests executed, {{ passed }} passed and {{ warned }} warned - success rate of {{ rate }}% (excluding SKIP and CANCEL)</td>
+            </tr>
+          </table>
+        </div>
+      </div>
+
+      <table id="results" class="display" cellspacing="0" width="100%"><thead>
+          <tr>
+            <th>Start Time</th>
+            <th>UID</th>
+            <th>Test Name</th>
+            <th>Variant</th>
+            <th>Status</th>
+            <th>Time (sec)</th>
+            <th>Info</th>
+            <th>Debug Log</th>
+          </tr>
+        </thead>
+        {% for test in tests %}
+        <tr class="{{row_class}}">
+          <td>{{ test.time_start }}</td>
+          <td>{{ test.uid }}</td>
+          <td><a href="{{ test.logdir }}" title="{{ test.params }}">{{ test.name }}</a></td>
+          <td>{{ test.variant }}</td>
+          <td>{{ test.status }}</td>
+          <td>{{ test.time }}</td>
+          <td>{{ test.fail_reason }}</td>
+          <td><a href="{{ logfile }}">{{ logfile_basename }}</a></td>
+        </tr>
+        {% endfor %}
+      </table>
+
+      <div class="panel panel-default">
+        <div class="panel-heading">
+          <h3 class="panel-title">Sysinfo</h3>
+        </div>
+        <div class="panel-body">
+          <div class="panel-group" id="accordionPre" role="tablist" aria-multiselectable="true">
+            <div class="panel panel-default">
+              <div class="panel-heading" role="tab" id="headingPre">
+                <h4 class="panel-title">
+                  <a data-toggle="collapse" data-parent="#accordionPre" href="#collapsePre" aria-expanded="false" aria-controls="collapsePre">Pre-Tests</a>
+                </h4>
+              </div>
+              <div id="collapsePre" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingPre">
+                <div class="panel-body">
+                  <div class="panel-group" id="accordionPre2" role="tablist" aria-multiselectable="true">
+                    {% for sysinfo in sysinfo_pre %}
+                    <div class="panel panel-default">
+                      <div class="panel-heading" role="tab" id="{{ sysinfo.element_id }}">
+                        <h4 class="panel-title">
+                          <a data-toggle="collapse" data-parent="#accordionPre2" href="#{{ sysinfo.collapse_id}}" aria-expanded="false" aria-controls="{{ sysinfo.collapse_id }}"><tt>{{ sysinfo.file }}</tt></a>
+                        </h4>
+                      </div>
+                      <div id="{{ sysinfo.collapse_id }}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="{{ sysinfo.element_id }}">
+                        <div class="panel-body">
+                          <pre>{{ sysinfo.contents }}</pre>
+                          {{ sysinfo.err }}
+                        </div>
+                      </div>
+                    </div>
+                    {% endfor %}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="panel-group" id="accordionPost" role="tablist" aria-multiselectable="true">
+            <div class="panel panel-default">
+              <div class="panel-heading" role="tab" id="headingPost">
+                <h4 class="panel-title">
+                  <a data-toggle="collapse" data-parent="#accordionPost" href="#collapsePost" aria-expanded="false" aria-controls="collapsePost">Post-Tests</a>
+                </h4>
+              </div>
+              <div id="collapsePost" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingPost">
+                <div class="panel-body">
+                  <div class="panel-group" id="accordionPost2" role="tablist" aria-multiselectable="true">
+                    {% for sysinfo in sysinfo_post %}
+                    <div class="panel panel-default">
+                      <div class="panel-heading" role="tab" id="{{ sysinfo.element_id }}">
+                        <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordionPost2" href="#{{ sysinfo.collapse_id }}" aria-expanded="false" aria-controls="{{ sysinfo.collapse_id }}"><tt>{{ sysinfo.file }}</tt></a></h4>
+                      </div>
+                      <div id="{{ sysinfo.collapse_id }}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="{{ sysinfo.element_id }}">
+                        <div class="panel-body">
+                          <pre>{{ sysinfo.contents }}</pre>
+                        </div>
+                      </div>
+                    </div>
+                    {% endfor %}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="panel-group" id="accordionProfile" role="tablist" aria-multiselectable="true">
+            <div class="panel panel-default">
+              <div class="panel-heading" role="tab" id="headingProfile">
+                <h4 class="panel-title">
+                  <a data-toggle="collapse" data-parent="#accordionProfile" href="#collapseProfile" aria-expanded="false" aria-controls="collapseProfile">Profilers</a>
+                </h4>
+              </div>
+              <div id="collapseProfile" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingProfile">
+                <div class="panel-body">
+                  <div class="panel-group" id="accordionProfile2" role="tablist" aria-multiselectable="true">
+                    {% for sysinfo in sysinfo_profile %}
+                    <div class="panel panel-default">
+                      <div class="panel-heading" role="tab" id="{{ sysinfo.element_id }}">
+                        <h4 class="panel-title">
+                          <a data-toggle="collapse" data-parent="#accordionProfile2" href="#{{ sysinfo.collapse_id }}" aria-expanded="false" aria-controls="{{ sysinfo.collapse_id }}"><tt>{{ sysinfo.file }}</tt></a>
+                        </h4>
+                      </div>
+                      <div id="{{ sysinfo.collapse_id }}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="{{ sysinfo.element_id }}">
+                        <div class="panel-body">
+                          <pre>{{ sysinfo.contents }}</pre>
+                        </div>
+                      </div>
+                    </div>
+                    {% endfor %}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script type="text/javascript">
+      {% include "jquery.min.js" %}
+    </script>
+
+    <script type="text/javascript">
+      {% include "bootstrap.min.js" %}
+    </script>
+
+    <script type="text/javascript">
+      {% include "datatables.min.js" %}
+      {% include "datatables.bootstrap.js" %}
+    </script>
+
+    <script type="text/javascript">
+      {% include "avocado_html.js" %}
+    </script>
+  </body>
+</html>