Merge pull request #1243 from K900/maybe-fix-trees

Run the JS code to make build trees collapsible at the right time
This commit is contained in:
Graham Christensen 2022-09-08 09:55:14 -04:00 committed by GitHub
commit d6cbf227cb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 38 additions and 16 deletions

View file

@ -4,6 +4,6 @@
<div class="dep-tree"> <div class="dep-tree">
<ul class="tree"> <ul class="tree">
[% INCLUDE renderNode node=buildTimeGraph %] [% INCLUDE renderNode node=buildTimeGraph isRoot=1 %]
</ul> </ul>
</div> </div>

View file

@ -481,11 +481,11 @@ END;
[% END %] [% END %]
[% IF drvAvailable %] [% IF drvAvailable %]
[% INCLUDE makeLazyTab tabName="tabs-build-deps" uri=c.uri_for('/build' build.id 'build-deps') %] [% INCLUDE makeLazyTab tabName="tabs-build-deps" uri=c.uri_for('/build' build.id 'build-deps') callback="makeTreeCollapsible" %]
[% END %] [% END %]
[% IF available %] [% IF available %]
[% INCLUDE makeLazyTab tabName="tabs-runtime-deps" uri=c.uri_for('/build' build.id 'runtime-deps') %] [% INCLUDE makeLazyTab tabName="tabs-runtime-deps" uri=c.uri_for('/build' build.id 'runtime-deps') callback="makeTreeCollapsible" %]
[% END %] [% END %]
<div id="tabs-runcommandlogs" class="tab-pane"> <div id="tabs-runcommandlogs" class="tab-pane">

View file

@ -520,7 +520,11 @@ BLOCK makeLazyTab %]
<center><span class="spinner-border spinner-border-sm"/></center> <center><span class="spinner-border spinner-border-sm"/></center>
</div> </div>
<script> <script>
$(function() { makeLazyTab("[% tabName %]", "[% uri %]"); }); [% IF callback.defined %]
$(function() { makeLazyTab("[% tabName %]", "[% uri %]", [% callback %] ); });
[% ELSE %]
$(function() { makeLazyTab("[% tabName %]", "[% uri %]", null ); });
[% END %]
</script> </script>
[% END; [% END;

View file

@ -19,9 +19,16 @@
<tt>[% node.name %]</tt> (<em>no info</em>) <tt>[% node.name %]</tt> (<em>no info</em>)
[% END %] [% END %]
</span></span> </span></span>
[% IF isRoot %]
<span class="dep-tree-buttons">
(<a href="#" class="tree-collapse-all">collapse all</a>
&ndash;
<a href="#" class="tree-expand-all">expand all</a>)
</span>
[% END %]
[% IF node.refs.size > 0 %] [% IF node.refs.size > 0 %]
<ul class="subtree"> <ul class="subtree">
[% FOREACH ref IN node.refs; INCLUDE renderNode node=ref; END %] [% FOREACH ref IN node.refs; INCLUDE renderNode node=ref isRoot=0; END %]
</ul> </ul>
[% END %] [% END %]
[% END %] [% END %]

View file

@ -33,6 +33,11 @@ span:target > span.dep-tree-line {
font-weight: bold; font-weight: bold;
} }
span.dep-tree-buttons {
font-style: italic;
padding-left: 10px;
}
span.disabled-project, span.disabled-jobset, span.disabled-job { span.disabled-project, span.disabled-jobset, span.disabled-job {
text-decoration: line-through; text-decoration: line-through;
} }

View file

@ -9,6 +9,7 @@ ul.tree, ul.subtree {
ul.subtree > li { ul.subtree > li {
position: relative; position: relative;
padding-left: 2.0em; padding-left: 2.0em;
line-height: 140%;
border-left: 0.1em solid #6185a0; border-left: 0.1em solid #6185a0;
} }

View file

@ -1,10 +1,9 @@
$(document).ready(function() { function makeTreeCollapsible(tab) {
/*** Tree toggles in logfiles. ***/ /*** Tree toggles in logfiles. ***/
/* Set the appearance of the toggle depending on whether the /* Set the appearance of the toggle depending on whether the
corresponding subtree is initially shown or hidden. */ corresponding subtree is initially shown or hidden. */
$(".tree-toggle").map(function() { tab.find(".tree-toggle").map(function() {
if ($(this).siblings("ul:hidden").length == 0) { if ($(this).siblings("ul:hidden").length == 0) {
$(this).text("-"); $(this).text("-");
} else { } else {
@ -13,7 +12,7 @@ $(document).ready(function() {
}); });
/* When a toggle is clicked, show or hide the subtree. */ /* When a toggle is clicked, show or hide the subtree. */
$(".tree-toggle").click(function() { tab.find(".tree-toggle").click(function() {
if ($(this).siblings("ul:hidden").length != 0) { if ($(this).siblings("ul:hidden").length != 0) {
$(this).siblings("ul").show(); $(this).siblings("ul").show();
$(this).text("-"); $(this).text("-");
@ -24,21 +23,23 @@ $(document).ready(function() {
}); });
/* Implementation of the expand all link. */ /* Implementation of the expand all link. */
$(".tree-expand-all").click(function() { tab.find(".tree-expand-all").click(function() {
$(".tree-toggle", $(this).parent().siblings(".tree")).map(function() { tab.find(".tree-toggle", $(this).parent().siblings(".tree")).map(function() {
$(this).siblings("ul").show(); $(this).siblings("ul").show();
$(this).text("-"); $(this).text("-");
}); });
}); });
/* Implementation of the collapse all link. */ /* Implementation of the collapse all link. */
$(".tree-collapse-all").click(function() { tab.find(".tree-collapse-all").click(function() {
$(".tree-toggle", $(this).parent().siblings(".tree")).map(function() { tab.find(".tree-toggle", $(this).parent().siblings(".tree")).map(function() {
$(this).siblings("ul").hide(); $(this).siblings("ul").hide();
$(this).text("+"); $(this).text("+");
}); });
}); });
}
$(document).ready(function() {
$("table.clickable-rows").click(function(event) { $("table.clickable-rows").click(function(event) {
if ($(event.target).closest("a").length) return; if ($(event.target).closest("a").length) return;
link = $(event.target).parents("tr").find("a.row-link"); link = $(event.target).parents("tr").find("a.row-link");
@ -132,7 +133,7 @@ $(document).ready(function() {
var tabsLoaded = {}; var tabsLoaded = {};
function makeLazyTab(tabName, uri) { function makeLazyTab(tabName, uri, callback) {
$('.nav-tabs').bind('show.bs.tab', function(e) { $('.nav-tabs').bind('show.bs.tab', function(e) {
var pattern = /#.+/gi; var pattern = /#.+/gi;
var id = e.target.toString().match(pattern)[0]; var id = e.target.toString().match(pattern)[0];
@ -140,11 +141,15 @@ function makeLazyTab(tabName, uri) {
tabsLoaded[id] = 1; tabsLoaded[id] = 1;
$('#' + tabName).load(uri, function(response, status, xhr) { $('#' + tabName).load(uri, function(response, status, xhr) {
var lazy = xhr.getResponseHeader("X-Hydra-Lazy") === "Yes"; var lazy = xhr.getResponseHeader("X-Hydra-Lazy") === "Yes";
var tab = $('#' + tabName);
if (status == "error" && !lazy) { if (status == "error" && !lazy) {
$('#' + tabName).html("<div class='alert alert-error'>Error loading tab: " + xhr.status + " " + xhr.statusText + "</div>"); tab.html("<div class='alert alert-error'>Error loading tab: " + xhr.status + " " + xhr.statusText + "</div>");
} }
else { else {
$('#' + tabName).html(response); tab.html(response);
if (callback) {
callback(tab);
}
} }
}); });
} }