bitbake: toaster: image information views

[YOCTO # 4346]

When a target image is selected, this commit adds to the toaster
project a two-tabbed page that shows
1) 'packages included' a table of packages included in the image
(see target.html), and
2) 'directory structure', the target image's file system directory
and detailed information showing the source of each file in the
directory table (see dirinfo.html).

The directory structure tab relies on the open source jQuery plugin
jtreetable which provides hierarchical table expansions and contractions
of the directory entry tables as the user drills down into directories.

A file of jtreetable styles that are compatible with other toaster styles
is provided included as css/jquery.treetable.theme.toaster.css. The
complete unaltered jtreetable plugin is added via a separate commit.

This work was developed base on the bugzilla specification number 4346
and the document "Design 1.1 Image information" attached to that report.

Whitespace and typo fixes from Alex Damian.

(Bitbake rev: 1ba9f310a8b4fd0952a95be86ab43ae27fe6d983)

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

1 files changed, 237 insertions, 0 deletions

diff --git a/bitbake/lib/toaster/toastergui/templates/dirinfo.html b/bitbake/lib/toaster/toastergui/templates/dirinfo.html
new file mode 100644
index 0000000000..9b76a1cb8c
--- /dev/null
+++ b/bitbake/lib/toaster/toastergui/templates/dirinfo.html
@@ -0,0 +1,237 @@
+{% extends "basebuildpage.html" %}
+{% block extraheadcontent %}
+{% load static %}
+<link rel="stylesheet" href="{% static 'css/jquery.treetable.css' %}" type="text/css">
+<link rel="stylesheet" href="{% static 'css/jquery.treetable.theme.toaster.css' %}" type="text/css">
+{% endblock extraheadcontent %}
+
+{% block localbreadcrumb %}
+<li>{{target.target}}</li>
+{% endblock localbreadcrumb%}
+
+{% block buildinfomain %}
+
+{% load static %}
+<script src="{% static 'js/jquery.treetable.js' %}">
+</script>
+{% load projecttags %}
+
+<script type='text/javascript'>
+    function setupTreetable() {
+        $("#dirtable").treetable({
+            expandable: true,
+            branchAttr: "ttBranch",
+            clickableNodeNames: true,
+            onNodeCollapse: function() {
+                /* Do nothing, keep cached */
+            },
+            onNodeExpand: function() {
+                var start = this.id;
+                var n = $("#dirtable").treetable("node", start);
+                if (this.children.length > 0) {
+                    /* already was expanded once */
+                    $("#dirtable").treetable("reveal", start);
+                }
+                else {
+                    var url = "{% url "dirinfo_ajax" build.id target.id  %}";
+                    $.ajax({
+                        async: false,
+                        type    : "GET",
+                        url     : url,
+                        data    : "start=" + start,
+                        success : function(response) {
+                            var objects = $.parseJSON(response);
+                            addRows(n, objects)
+                        },
+                        error   : function(jqXHR, textStatus, errorThrown ) {alert(textStatus + ":" + errorThrown)},
+                     });
+                }
+             },
+       });
+    }
+    function td(data) {
+        if (data == null) {
+            data = '';
+        }
+        return '<td>' + data + '</td>'
+    }
+
+    function formatRow(o) {
+        /* setup tr-wide formatting */
+        var tr = '<tr class="';
+        if (o.link_to != null) {
+            tr += 'muted ';
+        }
+        if (o.isdir && o.childcount) {
+            tr += 'branch" data-tt-branch="true" ';
+        }
+        else {
+            tr += 'leaf" data-tt-branch="false" ';
+        }
+        tr +=    ' data-tt-id="' + o.fullpath +'" ';
+        if (o.parent != "/") {
+            tr +=    ' data-tt-parent-id="' + o.parent +'" ';
+        }
+        tr += '>';
+
+        /* setup td specific formatting */
+        var link_to = td(o.link_to);
+        var size = td(o.size);
+        var permission = td(o.permission);
+        var owner = td(o.owner);
+        var group = td(o.group);
+
+        /* handle the name column */
+        var name = null;;
+        var namespan=1;
+        if (o.isdir) {
+            if (o.link_to == null) {
+                namespan = 2;
+                if (o.package == null) {
+                    namespan = 3;
+                }
+            }
+            var colspan = 'colspan="' + namespan + '"';
+            name = '<td class="content-directory"' + colspan + '>';
+            if (o.childcount) {
+                name += '<a href="">';
+            }
+            name += '<i class="icon-folder-close"></i>';
+            name += '&nbsp;' + o.name;
+            if (o.childcount) {
+                name += '</a>';
+            }
+            name += '</td>';
+        }
+        else {
+            name = '<td>';
+            if (o.link_to == null) {
+                name += '<i class="icon-file"></i>';
+            }
+            else {
+                name += '<i class="icon-hand-right"></i>';
+            }
+            name += '&nbsp;' + o.name;
+            name += '</td>';
+        }
+
+        /* handle the package column */
+        var package = null;
+        if (o.package != null) {
+            /* add link to included package page */
+            build_id = {{ build.id }};
+            target_id = {{ target.id }};
+            /* Create a url for a dummy package id of 0 */
+            dummy = "{% url 'package_included_detail' build.id target.id 0 %}"
+            /* fill in the package id */
+            url = dummy.substr(0, dummy.length-1) + o.package_id;
+            package = '<a href=' + url + '>' ;
+            package += o.package;
+            package += '</a>';
+            if (o.installed_package != o.package) {
+                /* make class muted and add hover help */
+                package += '<span class="muted"> as ' + o.installed_package + ' </span>';
+                package += '<i class="icon-question-sign get-help hover-help" ';
+                package += 'title="' + o.package + ' was renamed at packaging time and was installed in your image as ' + o.installed_package + '">';
+                package += '</i>';
+            }
+        }
+        package = td(package);
+
+        var cols1to3;
+        switch (namespan) {
+            case 3:
+                cols1to3 = name;
+                break;
+            case  2:
+                cols1to3 = name + package;
+                break;
+            default:
+                cols1to3 = name + link_to + package;
+        }
+        r = tr + cols1to3 + size + permission + owner + group + "</tr>"
+        return r;
+    }
+
+    function addRows(n, objs) {
+        rows = "";
+        for (i=0; i<objs.length; i++) {
+            rows += formatRow(objs[i]);
+        }
+        $("#dirtable").treetable("loadBranch", n, rows);
+    }
+
+    $.fn.isOffScreen = function(){
+        var win = $(window);
+        viewportBottom = win.scrollTop() + win.height();
+        
+        var bounds = this.offset();
+        bounds.bottom = bounds.top + this.outerHeight();
+        
+        return (bounds.bottom > viewportBottom);
+    };
+
+    function selectRow(path) {
+        var row  = $('tr[data-tt-id="' + path + '"]');
+        row.addClass(" highlight");
+        if (row.isOffScreen()) {
+            $('html, body').animate({ scrollTop: row.offset().top - 150}, 2000);
+        }
+    }
+</script>
+
+<div class="span10">
+
+    <div class="page-header">
+        <h1> {{target.target}} </h1>
+    </div>
+
+    <ul class="nav nav-pills">
+        <li class="">
+            <a href="{% url 'target' build.id target.id %}">
+            <i class="icon-question-sign get-help" data-toggle="tooltip" title="Of all the packages built, the subset installed in the root file system of this image"></i>
+                Packages included ({{target.package_count}} - {{packages_sum|filtered_filesizeformat}})
+            </a>
+        </li>
+        <li class="active">
+            <a href="{% url 'dirinfo' build.id target.id %}">
+                <i class="icon-question-sign get-help" data-toggle="tooltip" title="The directories and files in the root file system of this image"></i>
+                Directory structure
+            </a>
+        </li>
+    </ul>
+
+    <div id="directory-structure" class="tab-pane active">
+        <table id="dirtable" class="table table-bordered table-hover treetable">
+            <thead>
+                <tr>
+                    <th>Directory / File</th>
+                    <th>Symbolic link to</th>
+                    <th>Source package</th>
+                    <th>Size</th>
+                    <th>Permissions</th>
+                    <th>Owner</th>
+                    <th>Group</th>
+                </tr>
+            </thead>
+            <tbody>
+            <script type='text/javascript'>
+                setupTreetable();
+                addRows(null, {{ objects|safe }} );
+                {% if file_path %}
+                    {% comment %}
+                        link from package_included_detail specifies file path
+                    {% endcomment %}
+                    {% for dir_elem in dir_list %}
+                        $("#dirtable").treetable("expandNode", "{{dir_elem}}");
+                    {% endfor %}
+                    selectRow("{{file_path}}");
+                {% endif %}
+            </script>
+            </tbody>
+        </table>
+    </div> <!-- directory-structure -->
+</div> <!-- span10 -->
+
+{% endblock buildinfomain %}
+