diff options
| author | Dave Lerner <dave.lerner@windriver.com> | 2014-03-12 16:54:09 -0500 |
|---|---|---|
| committer | Richard Purdie <richard.purdie@linuxfoundation.org> | 2014-03-21 14:47:53 +0000 |
| commit | 4cdd56fff3471669ff2372f0d8bf15f9a287374a (patch) | |
| tree | 76b81b2cb87e3b3df9751d8487351b5dfb2c59a3 /bitbake/lib/toaster/toastergui/templates | |
| parent | e94f0b4e8c2cbea92688975b1a45a061af48911e (diff) | |
| download | ast2050-yocto-poky-4cdd56fff3471669ff2372f0d8bf15f9a287374a.zip ast2050-yocto-poky-4cdd56fff3471669ff2372f0d8bf15f9a287374a.tar.gz | |
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>
Diffstat (limited to 'bitbake/lib/toaster/toastergui/templates')
5 files changed, 390 insertions, 6 deletions
diff --git a/bitbake/lib/toaster/toastergui/templates/base.html b/bitbake/lib/toaster/toastergui/templates/base.html index 5493e23..9ca9c9a 100644 --- a/bitbake/lib/toaster/toastergui/templates/base.html +++ b/bitbake/lib/toaster/toastergui/templates/base.html @@ -49,6 +49,8 @@ function reload_params(params) { } </script> +{% block extraheadcontent %} +{% endblock %} </head> <body style="height: 100%"> diff --git a/bitbake/lib/toaster/toastergui/templates/basebuildpage.html b/bitbake/lib/toaster/toastergui/templates/basebuildpage.html index 054a37c..636fca2 100644 --- a/bitbake/lib/toaster/toastergui/templates/basebuildpage.html +++ b/bitbake/lib/toaster/toastergui/templates/basebuildpage.html @@ -26,7 +26,7 @@ <div id="nav" class="span2"> <ul class="nav nav-list well"> <li class="nav-header">Images</li> - {% for t in build.target_set.all %} + {% for t in build.target_set.all|dictsort:"target" %} <li><a href="{% url 'target' build.pk t.pk %}">{{t.target}}</a><li> {% endfor %} <li class="nav-header">Build</li> diff --git a/bitbake/lib/toaster/toastergui/templates/dirinfo.html b/bitbake/lib/toaster/toastergui/templates/dirinfo.html new file mode 100644 index 0000000..9b76a1c --- /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 += ' ' + 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 += ' ' + 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 %} + diff --git a/bitbake/lib/toaster/toastergui/templates/package_included_detail.html b/bitbake/lib/toaster/toastergui/templates/package_included_detail.html index df25885..ce4f1cb 100644 --- a/bitbake/lib/toaster/toastergui/templates/package_included_detail.html +++ b/bitbake/lib/toaster/toastergui/templates/package_included_detail.html @@ -24,7 +24,7 @@ {% for file in package.buildfilelist_package.all|dictsort:"path" %} <tr> <td> - <a href="{% url 'image_information_dir' build.id target.id file.id %}"> + <a href="{% url 'dirinfo_filepath' build.id target.id file.path %}"> {{file.path}} </a> </td> diff --git a/bitbake/lib/toaster/toastergui/templates/target.html b/bitbake/lib/toaster/toastergui/templates/target.html index f2d0ad4..4512898 100644 --- a/bitbake/lib/toaster/toastergui/templates/target.html +++ b/bitbake/lib/toaster/toastergui/templates/target.html @@ -1,8 +1,153 @@ {% extends "basebuildpage.html" %} - {% block localbreadcrumb %} -<li>Target</li> -{% endblock %} +<li>{{target.target}}</li> +{% endblock localbreadcrumb%} + +{% load projecttags %} {% block buildinfomain %} -{% endblock %} + +<div class="row-fluid span10"> + <div class="page-header"> + <h1> + {% if request.GET.search and objects.paginator.count > 0 %} + {{objects.paginator.count}} package{{objects.paginator.count|pluralize}} found + {% elif request.GET.search and objects.paginator.count == 0 %} + No packages found + {% else %} + {{target.target}} + {% endif %} + </h1> + </div> +</div> + +<div class="row-fluid pull-right span10" id="navTab"> + <ul class="nav nav-pills"> + <li class="active"> + <a href="#target"> + <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> + <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="image-packages" class="tab-pane"> + + {% if objects.paginator.count == 0 %} + <div class="row-fluid"> + <div class="alert"> + <form class="no-results input-append" id="searchform"> + <input id="search" name="search" class="input-xxlarge" type="text" value="{{request.GET.search}}"/>{% if request.GET.search %}<a href="javascript:$('#search').val('');searchform.submit()" class="add-on btn" tabindex="-1"><i class="icon-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 packages</button> + </form> + </div> + </div> + + + {% else %} + {% include "basetable_top.html" %} + {% for package in objects %} + <tr> + <td class="package_name"> + <a href="{% url 'package_included_detail' build.id target.id package.id %}"> + {{package.name}} + </a> + {% if package.installed_name and package.name != package.installed_name %} + <span class="muted"> as {{package.installed_name}}</span> + <i class="icon-question-sign get-help hover-help" title='{{package.name|add:" was renamed at packaging time and was installed in your image as "|add:package.installed_name}}'></i> + {% endif %} + </td> + <td class="package_version"> + <a href="{% url 'package_included_detail' build.id target.id package.id %}"> + {{package.version|filtered_packageversion:package.revision}} + </a> + </td> + <td class="package_size"> + {{package.size|filtered_installedsize:package.installed_size|filtered_filesizeformat}} + </td> + <td class="size_over_total"> + {{package|filter_sizeovertotal:packages_sum}} + </td> + <td class="license"> + {{package.license}} + </td> + <td class="depends"> + {% with deps=package|runtime_dependencies:target.id %} + {% with deps_count=deps|length %} + {% if deps_count > 0 %} + <a class="btn" + title="<a href='{% url "package_included_dependencies" build.id target.id package.id %}'>{{package.name}}</a> depends on" + data-content="<ul class='unstyled'> + {% for i in deps|dictsort:'depends_on.name' %} + <li><a href='{% url "package_included_dependencies" build.pk target.id i.depends_on.pk %}'>{{i.depends_on.name}}</a></li> + {% endfor %} + </ul>"> + {{deps_count}} + </a> + {% endif %} + {% endwith %} + {% endwith %} + </td> + <td class="brought_in_by"> + {% with rdeps=package|reverse_runtime_dependencies:target.id %} + {% with rdeps_count=rdeps|length %} + {% if rdeps_count > 0 %} + <a class="btn" + title="<a href='{% url "package_included_reverse_dependencies" build.id target.id package.id %}'>{{package.name}}</a> is brought in by" + data-content="<ul class='unstyled'> + {% for i in rdeps|dictsort:'package.name' %} + <li><a href='{% url "package_included_dependencies" build.id target.id i.package.id %}'>{{i.package.name}}</a></li> + {% endfor %} + </ul>"> + {{rdeps_count}} + </a> + {% endif %} + {% endwith %} + {% endwith %} + </td> + <td class="recipe_name"> + {% if package.recipe.version %} + <a href="{% url 'recipe' build.id package.recipe_id %}"> + {{ package.recipe.name }} + </a> + {% endif %} + </td> + <td class="recipe_version"> + {% if package.recipe.version %} + <a href="{% url 'recipe' build.id package.recipe_id %}"> + {{ package.recipe.version }} + </a> + {% endif %} + </td> + <td class="layer_name"> + {{ package.recipe.layer_version.layer.name }} + </td> + <td class="layer_branch"> + {{ package.recipe.layer_version.branch}} + </td> + <td class="layer_commit"> + <a class="btn" + data-content="<ul class='unstyled'> + <li>{{package.recipe.layer_version.commit}}</li> + </ul>"> + {{package.recipe.layer_version.commit|truncatechars:13}} + </a> + </td> + <td class="layer_directory"> + {{ package.recipe.layer_version.layer.local_path }} + </td> + </tr> + {% endfor %} + + {% include "basetable_bottom.html" %} + {% endif %} + </div> <!-- tabpane --> +</div> <!--span 10--> +{% endblock buildinfomain %} |
