=r&&u(e,l[s].name);else if("not-"===n)for(s=0,o=l.length;s").append(r).appendTo(i)),f("|
").append(n).appendTo(t),"inline"===this.c.details.type&&f(e).addClass("dtr-inline collapsed"),f(e).find("[name]").removeAttr("name"),f(e).css("position","relative"),(r=f("").css({width:1,height:1,overflow:"hidden",clear:"both"}).append(e)).insertBefore(s.table().node()),n.each(function(e){e=s.column.index("fromVisible",e);o[e].minWidth=this.offsetWidth||0}),r.remove())},_responsiveOnlyHidden:function(){var n=this.s.dt;return f.map(this.s.current,function(e,t){return!1===n.column(t).visible()||e})},_setColumnVis:function(e,t){var n=this,i=this.s.dt,r=t?"":"none";f(i.column(e).header()).css("display",r).toggleClass("dtr-hidden",!t),f(i.column(e).footer()).css("display",r).toggleClass("dtr-hidden",!t),i.column(e).nodes().to$().css("display",r).toggleClass("dtr-hidden",!t),f.isEmptyObject(this.s.childNodeStore)||i.cells(null,e).indexes().each(function(e){n._childNodesRestore(i,e.row,e.column)})},_tabIndexes:function(){var e=this.s.dt,t=e.cells({page:"current"}).nodes().to$(),n=e.settings()[0],i=this.c.details.target;t.filter("[data-dtr-keyboard]").removeData("[data-dtr-keyboard]"),("number"==typeof i?e.cells(null,i,{page:"current"}).nodes().to$():f(i="td:first-child, th:first-child"===i?">td:first-child, >th:first-child":i,e.rows({page:"current"}).nodes())).attr("tabIndex",n.iTabIndex).data("dtr-keyboard",1)}}),d.defaults={breakpoints:d.breakpoints=[{name:"desktop",width:1/0},{name:"tablet-l",width:1024},{name:"tablet-p",width:768},{name:"mobile-l",width:480},{name:"mobile-p",width:320}],auto:!0,details:{display:(d.display={childRow:function(e,t,n){return t?f(e.node()).hasClass("parent")?(e.child(n(),"child").show(),!0):void 0:e.child.isShown()?(e.child(!1),f(e.node()).removeClass("parent"),!1):(e.child(n(),"child").show(),f(e.node()).addClass("parent"),!0)},childRowImmediate:function(e,t,n){return!t&&e.child.isShown()||!e.responsive.hasHidden()?(e.child(!1),f(e.node()).removeClass("parent"),!1):(e.child(n(),"child").show(),f(e.node()).addClass("parent"),!0)},modal:function(s){return function(e,t,n){var i,r;t?f("div.dtr-modal-content").empty().append(n()):(i=function(){r.remove(),f(o).off("keypress.dtr")},r=f('').append(f('').append(f('').append(n())).append(f('×
').click(function(){i()}))).append(f('').click(function(){i()})).appendTo("body"),f(o).on("keyup.dtr",function(e){27===e.keyCode&&(e.stopPropagation(),i())})),s&&s.header&&f("div.dtr-modal-content").prepend(""+s.header(e)+"
")}}}).childRow,renderer:(d.renderer={listHiddenNodes:function(){return function(i,e,t){var r=this,s=f(''),o=!1;f.each(t,function(e,t){var n;t.hidden&&(n=t.className?'class="'+t.className+'"':"",f("'+t.title+" ").append(f('').append(r._childNodes(i,t.rowIndex,t.columnIndex))).appendTo(s),o=!0)});return!!o&&s}},listHidden:function(){return function(e,t,n){n=f.map(n,function(e){var t=e.className?'class="'+e.className+'"':"";return e.hidden?"'+e.title+' '+e.data+"":""}).join("");return!!n&&f('').append(n)}},tableAll:function(i){return i=f.extend({tableClass:""},i),function(e,t,n){n=f.map(n,function(e){return"| '+e.title+": | "+e.data+" |
"}).join("");return f('').append(n)}}}).listHidden(),target:0,type:"inline"},orthogonal:"display"},f.fn.dataTable.Api);return e.register("responsive()",function(){return this}),e.register("responsive.index()",function(e){return{column:(e=f(e)).data("dtr-index"),row:e.parent().data("dtr-index")}}),e.register("responsive.rebuild()",function(){return this.iterator("table",function(e){e._responsive&&e._responsive._classLogic()})}),e.register("responsive.recalc()",function(){return this.iterator("table",function(e){e._responsive&&(e._responsive._resizeAuto(),e._responsive._resize())})}),e.register("responsive.hasHidden()",function(){var e=this.context[0];return!!e._responsive&&-1!==f.inArray(!1,e._responsive._responsiveOnlyHidden())}),e.registerPlural("columns().responsiveHidden()","column().responsiveHidden()",function(){return this.iterator("column",function(e,t){return!!e._responsive&&e._responsive._responsiveOnlyHidden()[t]},1)}),d.version="2.4.0",f.fn.dataTable.Responsive=d,f.fn.DataTable.Responsive=d,f(o).on("preInit.dt.dtr",function(e,t,n){"dt"===e.namespace&&(f(t.nTable).hasClass("responsive")||f(t.nTable).hasClass("dt-responsive")||t.oInit.responsive||r.defaults.responsive)&&!1!==(e=t.oInit.responsive)&&new d(t,f.isPlainObject(e)?e:{})}),r});
\ No newline at end of file
diff --git a/cmd/hiveview/assets/lib/app-index.js b/cmd/hiveview/assets/lib/app-index.js
index 21c99da9f3..1dcddb1889 100644
--- a/cmd/hiveview/assets/lib/app-index.js
+++ b/cmd/hiveview/assets/lib/app-index.js
@@ -6,7 +6,7 @@ import * as app from './app.js'
$(document).ready(function() {
app.init();
-
+
console.log("Loading file list...");
$.ajax("listing.jsonl", {
success: showFileListing,
@@ -56,36 +56,56 @@ function showFileListing(data, error) {
if (!elem) {
return;
}
- suites.push(JSON.parse(elem));
+ let suite = JSON.parse(elem);
+ suite.start = new Date(suite.start);
+ suites.push(suite);
});
filetable = $("#filetable").DataTable({
data: suites,
pageLength: 50,
autoWidth: false,
+ responsive: {
+ details: {
+ type: 'none',
+ display: $.fn.dataTable.Responsive.display.childRowImmediate,
+ renderer: function (table, rowIdx, columns) {
+ var output = '';
+ columns.forEach(function (col, i) {
+ if (col.hidden) {
+ output += ''
+ output += col.data;
+ output += ' ';
+ }
+ });
+ output += '
';
+ return output;
+ },
+ },
+ },
order: [[0, 'desc']],
columns: [
{
- title: "Start time",
+ title: "🕒",
data: "start",
type: "date",
- width: "11em",
+ width: "13%",
render: function(v, type) {
- if (type === 'display') {
- return new Date(v).toLocaleString();
+ if (type === 'display' || type == 'filter') {
+ return v.toLocaleString();
}
- return v;
+ return v.toISOString();
},
},
{
title: "Suite",
data: "name",
- width: "10em",
+ width: "15%",
},
{
title: "Clients",
data: "clients",
- width: "30%",
+ width: "40%",
render: function(data) {
return data.join(", ")
},
@@ -93,7 +113,8 @@ function showFileListing(data, error) {
{
title: "Status",
data: null,
- width: "9em",
+ width: "5em",
+ className: "suite-status-column",
render: function(data) {
if (data.fails > 0) {
let prefix = data.timeout ? "Timeout" : "Fail";
@@ -105,7 +126,7 @@ function showFileListing(data, error) {
{
title: "",
data: null,
- width: "180px",
+ width: "8.5em",
orderable: false,
render: function(data) {
let loadText = "Load (" + format.units(data.size) + ")";
diff --git a/cmd/hiveview/assets/lib/app-suite.js b/cmd/hiveview/assets/lib/app-suite.js
index 46171dbb51..0f42a034f7 100644
--- a/cmd/hiveview/assets/lib/app-suite.js
+++ b/cmd/hiveview/assets/lib/app-suite.js
@@ -144,7 +144,7 @@ function formatTestLog(suiteData, test) {
if (hiddenLines > 0) {
// Create the truncation marker.
- let linkText = "..." + hiddenLines + " lines hidden, click to see full output...";
+ let linkText = "..." + hiddenLines + " lines hidden: click for full output...";
let linkURL = app.route.testLogInViewer(suiteData.suiteID, suiteData.name, test.testIndex);
let trunc = html.get_link(linkURL, linkText);
trunc.classList.add("output-trunc");
@@ -242,12 +242,10 @@ function showSuiteData(data, suiteID) {
let suiteTimes = testSuiteTimes(cases);
$("#testsuite_start").html("🕒 " + suiteTimes.start.toLocaleString());
$("#testsuite_duration").html("⌛️ " + format.duration(suiteTimes.duration));
- if (data.simLog) {
- let logfile = app.resultsRoot + data.simLog;
- let url = app.route.logFileInViewer(suiteID, suiteName, logfile);
- $("#sim-log-link").attr("href", url);
- $("#sim-log-link").text("simulator log file");
- }
+ let logfile = app.resultsRoot + data.simLog;
+ let url = app.route.logFileInViewer(suiteID, suiteName, logfile);
+ $("#sim-log-link").attr("href", url);
+ $("#sim-log-link").text("simulator log");
$("#testsuite_info").show();
// Initialize the DataTable.
@@ -255,19 +253,31 @@ function showSuiteData(data, suiteID) {
data: cases,
pageLength: 100,
autoWidth: false,
+ responsive: {
+ // Turn off display of hidden columns because it conflicts with our own use of
+ // child rows. This should be OK since the only column that will be ever be
+ // hidden is 'duration'.
+ details: {
+ type: 'none',
+ display: function (row, update, render) {},
+ },
+ },
order: [[1, 'desc']],
columns: [
{
title: "Test",
data: "name",
className: "test-name-column",
- width: "79%",
+ width: "65%",
+ responsivePriority: 0,
},
// Status: pass or not.
{
title: "Status",
data: "summaryResult",
className: "test-status-column",
+ width: "80px",
+ responsivePriority: 0,
render: function(summaryResult) {
if (summaryResult.pass) {
return "✓"
@@ -275,14 +285,14 @@ function showSuiteData(data, suiteID) {
let s = summaryResult.timeout ? "Timeout" : "Fail";
return "✕ " + s + "";
},
- width: "70px",
},
// Test duration.
{
title: "⌛️",
data: "duration",
className: "test-duration-column",
- width: "60px",
+ width: "6em",
+ responsivePriority: 2,
type: "num",
render: function (v, type, row) {
if (type === 'display' || type === 'filter') {
@@ -295,6 +305,8 @@ function showSuiteData(data, suiteID) {
{
title: "Logs",
data: "clientInfo",
+ width: "20%",
+ responsivePriority: 1,
render: function(clientInfo) {
let logs = []
for (let instanceID in clientInfo) {
@@ -306,7 +318,6 @@ function showSuiteData(data, suiteID) {
}
return logs.join(", ")
},
- width: "19%",
},
],
rowCallback: function(row, data, displayNum, displayIndex, dataIndex) {
diff --git a/cmd/hiveview/assets/lib/app.css b/cmd/hiveview/assets/lib/app.css
index 735d29265c..c80a6f9343 100644
--- a/cmd/hiveview/assets/lib/app.css
+++ b/cmd/hiveview/assets/lib/app.css
@@ -1,8 +1,11 @@
@import "../extlib/bootstrap-5.2.3.min.css";
@import "../extlib/dataTables-1.13.1.bootstrap5.min.css";
+@import "../extlib/responsive-2.4.0.bootstrap5.min.css";
main {
margin: 8px 12px;
+ font-size: 12pt;
+ min-width: 340px;
}
#hive-header {
@@ -25,7 +28,6 @@ main {
#hive-static-nav span {
margin: 0 6px 0 0;
- white-space: nowrap;
}
#hive-static-nav a {
@@ -33,11 +35,6 @@ main {
white-space: nowrap;
}
-#execresults, #filetable {
- table-layout: fixed;
- min-width: 900px;
-}
-
.dataTables_wrapper {
margin-top: 10px;
}
@@ -57,6 +54,10 @@ td.test-name-column {
text-align: right;
}
+.suite-status-column {
+ white-space: nowrap;
+}
+
tr.failed td.test-name-column {
background-image: url('/images/details_open_err.svg');
}
@@ -75,8 +76,27 @@ td.ellipsis {
white-space: nowrap;
}
+.responsive-overflow {
+ display: flex;
+ justify-content: space-between;
+}
+
+.responsive-overflow-col {
+ align-self: center;
+ display: inline-block;
+}
+
.test-output {
- overflow: scroll;
+ overflow-x: auto;
+ /*
+ Settings below are crucial to make scrolling of log output actually work. Without
+ these, the table will just expand to the width of the longest line. Since the
+ content of .test-output is preformatted text, the browser will measure its width
+ first and set the width of the table based on that. This behavior is disabled by
+ width: 0. However, we do want the element to expand to the available width.
+ The min-width: 100% does that.
+ */
+ width: 0; min-width: 100%;
}
.test-output code {
diff --git a/cmd/hiveview/assets/lib/app.js b/cmd/hiveview/assets/lib/app.js
index b96f4b7416..1ab645c08e 100644
--- a/cmd/hiveview/assets/lib/app.js
+++ b/cmd/hiveview/assets/lib/app.js
@@ -51,14 +51,14 @@ export function init() {
function hiveInfoHTML(data) {
var txt = "";
+ if (data.buildDate) {
+ let date = new Date(data.buildDate).toLocaleString();
+ txt += 'built: ' + date + '';
+ }
if (data.sourceCommit) {
let url = "https://github.com/ethereum/hive/commit/" + escape(data.sourceCommit);
let link = '' + data.sourceCommit.substring(0, 8) + '';
txt += 'commit: ' + link + '';
}
- if (data.buildDate) {
- let date = new Date(data.buildDate).toLocaleString();
- txt += 'built: ' + date + '';
- }
return txt;
}
diff --git a/cmd/hiveview/assets/suite.html b/cmd/hiveview/assets/suite.html
index 9b15d6004d..f7aeeaa7c3 100644
--- a/cmd/hiveview/assets/suite.html
+++ b/cmd/hiveview/assets/suite.html
@@ -24,7 +24,7 @@ Results:
-