1{% extends "basebuildpage.html" %}
2{% block title %} Directory structure - {{ target.target }} {{ build.machine }} - {{ build.project.name }} - Toaster {% endblock %}
3{% block extraheadcontent %}
4{% load static %}
5<link rel="stylesheet" href="{% static 'css/jquery.treetable.css' %}" type="text/css">
6<link rel="stylesheet" href="{% static 'css/jquery.treetable.theme.toaster.css' %}" type="text/css">
7{% endblock extraheadcontent %}
8
9{% block localbreadcrumb %}
10<li>{{target.target}}</li>
11{% endblock localbreadcrumb%}
12
13{% block buildinfomain %}
14
15{% load static %}
16<script src="{% static 'js/jquery.treetable.js' %}">
17</script>
18{% load projecttags %}
19
20<script type='text/javascript'>
21  var ctx = {};
22  ctx.target = "{{target.target}}";
23
24  $(document).ready(function(){
25    $("#menu-"+ctx.target).addClass("active");
26  });
27
28    function setupTreetable() {
29        $("#dirtable").treetable({
30            expandable: true,
31            branchAttr: "ttBranch",
32            clickableNodeNames: true,
33            onNodeCollapse: function() {
34                /* Do nothing, keep cached */
35            },
36            onNodeExpand: function() {
37                var start = this.id;
38                var n = $("#dirtable").treetable("node", start);
39                if (this.children.length > 0) {
40                    /* already was expanded once */
41                    $("#dirtable").treetable("reveal", start);
42                }
43                else {
44                    var url = "{% url "dirinfo_ajax" build.id target.id  %}";
45                    $.ajax({
46                        async: false,
47                        type    : "GET",
48                        url     : url,
49                        data    : "start=" + start,
50                        success : function(response) {
51                            addRows(n, response)
52                        },
53                        error   : function(jqXHR, textStatus, errorThrown ) {alert(textStatus + ":" + errorThrown)},
54                     });
55                }
56             },
57       });
58    }
59    function td(data) {
60        if (data == null) {
61            data = '';
62        }
63        return '<td>' + data + '</td>'
64    }
65
66    function formatRow(o) {
67        /* setup tr-wide formatting */
68        var tr = '<tr class="';
69        if (o.isdir && o.childcount) {
70            tr += 'branch" data-tt-branch="true" ';
71        }
72        else {
73            tr += 'leaf" data-tt-branch="false" ';
74        }
75        tr +=    ' data-tt-id="' + o.fullpath +'" ';
76        if (o.parent != "/") {
77            tr +=    ' data-tt-parent-id="' + o.parent +'" ';
78        }
79        tr += '>';
80
81        /* setup td specific formatting */
82				var link_to = '<td class="text-muted">' + o.link_to + '</td>';
83        var size = '<td class = "sizecol">' + o.size + '</td>'
84        var permission = td(o.permission);
85        var owner = td(o.owner);
86        var group = td(o.group);
87
88        /* handle the name column */
89        var name = null;;
90        var namespan=1;
91        if (o.isdir) {
92            if (o.link_to == null) {
93                namespan = 2;
94                if (o.package == null) {
95                    namespan = 3;
96                }
97            }
98            var colspan = 'colspan="' + namespan + '"';
99            name = '<td class="content-directory"' + colspan + '>';
100            if (o.childcount) {
101                name += '<a href="">';
102            }
103            name += '<span class="glyphicon glyphicon-folder-close"></span>';
104            name += '&nbsp;' + o.name;
105            if (o.childcount) {
106                name += '</a>';
107            }
108            name += '</td>';
109        }
110        else {
111            if (o.link_to == null) {
112                namespan = 2;
113                if (o.package == null) {
114                  namespan = 3;
115                }
116                var colspan = 'colspan="' + namespan + '"';
117                name = '<td ' + colspan + '><span class="glyphicon glyphicon-file"></span>';
118            }
119            else {
120                name = '<td class="text-muted"><span class="glyphicon glyphicon-hand-right"></span>';
121            }
122            name += '&nbsp;' + o.name;
123            name += '</td>';
124        }
125
126        /* handle the package column */
127        var package = null;
128        if (o.package != null) {
129            /* add link to included package page */
130            build_id = {{ build.id }};
131            target_id = {{ target.id }};
132            /* Create a url for a dummy package id of 0 */
133            dummy = "{% url 'package_included_detail' build.id target.id 0 %}"
134            /* fill in the package id */
135            url = dummy.substr(0, dummy.length-1) + o.package_id;
136            package = '<a href=' + url + '>' ;
137            package += o.package;
138            package += '</a>';
139            if (o.installed_package != o.package) {
140                /* make class muted and add hover help */
141                package += '<span class="text-muted"> as ' + o.installed_package + ' </span>';
142                package += '<span class="glyphicon glyphicon-question-sign get-help hover-help" ';
143                package += 'title="' + o.package + ' was renamed at packaging time and was installed in your image as ' + o.installed_package + '">';
144                package += '</span>';
145            }
146        }
147        package = td(package);
148
149        var cols1to3;
150        switch (namespan) {
151            case 3:
152                cols1to3 = name;
153                break;
154            case  2:
155                cols1to3 = name + package;
156                break;
157            default:
158                cols1to3 = name + link_to + package;
159        }
160        r = tr + cols1to3 + size + permission + owner + group + "</tr>"
161        return r;
162    }
163
164    function addRows(n, objs) {
165        rows = "";
166        for (i=0; i<objs.length; i++) {
167            rows += formatRow(objs[i]);
168        }
169        $("#dirtable").treetable("loadBranch", n, rows);
170    }
171
172    $.fn.isOffScreen = function(){
173        var win = $(window);
174        viewportBottom = win.scrollTop() + win.height();
175
176        var bounds = this.offset();
177        bounds.bottom = bounds.top + this.outerHeight();
178
179        return (bounds.bottom > viewportBottom);
180    };
181
182    function selectRow(path) {
183        var row  = $('tr[data-tt-id="' + path + '"]');
184        row.addClass(" highlight");
185        if (row.isOffScreen()) {
186            $('html, body').animate({ scrollTop: row.offset().top - 150}, 2000);
187        }
188    }
189</script>
190
191<div class="col-md-10">
192
193    <div class="page-header build-data">
194        <h1> {{target.target}} </h1>
195    </div>
196
197    <ul class="nav nav-tabs">
198        <li>
199            <a href="{% url 'target' build.id target.id %}">
200            <span class="glyphicon glyphicon-question-sign get-help" title="Of all the packages built, the subset installed in the root file system of this image"></span>
201                Packages included ({{target.package_count}} - {{packages_sum|filtered_filesizeformat}})
202            </a>
203        </li>
204        <li class="active">
205            <a href="{% url 'dirinfo' build.id target.id %}">
206                <span class="glyphicon glyphicon-question-sign get-help" title="The directories and files in the root file system of this image"></span>
207                Directory structure
208            </a>
209        </li>
210    </ul>
211
212    <div id="directory-structure" class="tab-pane active">
213        <table id="dirtable" class="table table-bordered table-hover treetable">
214            <thead>
215                <tr>
216                    <th>Directory / File</th>
217                    <th>Symbolic link to</th>
218                    <th>Source package</th>
219                    <th class="narrow-col">Size</th>
220                    <th class="medium-col">Permissions</th>
221                    <th class="narrow-col">Owner</th>
222                    <th class="narrow-col">Group</th>
223                </tr>
224            </thead>
225            <tbody>
226            <script type='text/javascript'>
227                setupTreetable();
228                addRows(null, {{ objects|safe }} );
229                {% if file_path %}
230                    {% comment %}
231                        link from package_included_detail specifies file path
232                    {% endcomment %}
233                    {% for dir_elem in dir_list %}
234                        $("#dirtable").treetable("expandNode", "{{dir_elem}}");
235                    {% endfor %}
236                    selectRow("{{file_path}}");
237                {% endif %}
238            </script>
239            </tbody>
240        </table>
241    </div> <!-- directory-structure -->
242</div> <!-- col-md-10 -->
243
244{% endblock buildinfomain %}
245
246