Skip to content

api/viewer: try to view logs in modal #618

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 59 additions & 1 deletion api/templates/viewer.html
Original file line number Diff line number Diff line change
Expand Up @@ -185,6 +185,44 @@
return jsonhtml;
}

async function decompressBlob(arrayBuffer) {
let ds = new DecompressionStream('gzip');
let blob = new Blob([arrayBuffer]);
let reader = blob.stream().pipeThrough(ds).getReader();
let result = '';
let decoder = new TextDecoder();
let done, value;
while ({ done, value } = await reader.read(), !done) {
result += decoder.decode(value, { stream: true });
}
return result;
}

function requestShowGzippedFile(url) {
// request the gzipped file, browser will transparently decompress it
var xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.responseType = "arraybuffer";
xhr.onload = function() {
if (xhr.status === 200) {
var arrayBuffer = xhr.response;
decompressBlob(arrayBuffer).then(function(decompressed) {
// show modal with decompressed content
var modal = document.getElementById("filecontent");
var modalcontent = document.getElementById("filecontentbody");
modalcontent.innerHTML = "<pre>" + decompressed + "</pre>";
modal.style.display = "block";
var span = modal.querySelector(".close");
span.onclick = function() {
modal.style.display = "none";
modalcontent.innerHTML = "";
}
});
}
};
xhr.send();
}

function cleardivs() {
// hide&clean nodeinfo and requestinfo
var nodeinfo = document.getElementById("nodeinfo");
Expand Down Expand Up @@ -244,6 +282,7 @@
miscbuttonshtml += "</select>";
// add download button
miscbuttonshtml += "<button id=\"downloadbutton\" class=\"download\" href=\"\" onclick=\"\">Download</button>";
miscbuttonshtml += "<button id=\"viewbutton\" class=\"view\" href=\"\" onclick=\"\">View</button>";

var node_data = data.data;
if (node_data != null && node_data.runtime != null) {
Expand Down Expand Up @@ -277,7 +316,20 @@
window.open(url, '_blank');
});
};

// add onclick event listener to all view buttons
links = document.getElementsByClassName("view");
for (var i = 0; i < links.length; i++) {
links[i].addEventListener("click", function(event) {
console.log("viewbutton clicked, uri: " + document.getElementById("artifacts").value);
event.preventDefault();
var url = document.getElementById("artifacts").value;
// is artifact filename log.txt.gz? then open it in modal window and decompress it, view as text
if (url.endsWith("log.txt.gz")) {
// request the gzipped file, browser will transparently decompress it
requestShowGzippedFile(url);
}
});
};
}


Expand Down Expand Up @@ -631,6 +683,12 @@
</div>
<span class="close">&times;</span>
</div>
<!-- modal for displaying file content -->
<div id="filecontent" class="modal" style="display: none;">
<div class="modal-content" id="filecontentbody">
</div>
<span class="close">&times;</span>
</div>
<div id="menu">
</div>
<div id="requestinfo" style="display: none;"></div>
Expand Down