<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/codemirror.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/theme/dracula.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/addon/dialog/dialog.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/codemirror.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/mode/shell/shell.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/addon/search/search.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/addon/search/searchcursor.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/addon/dialog/dialog.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/addon/scroll/simplescrollbars.min.js"></script>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/addon/scroll/simplescrollbars.min.css">
<style>
.CodeMirror {
height: 70vh;
font-family: 'JetBrains Mono', monospace;
font-size: 14px;
}
.modal-body {
padding: 0 !important;
}
</style>
<script>
let editor = null;
let currentLogUrl = null;
function showLogModal(url, title) {
currentLogUrl = url; const modal = document.getElementById('logModal');
const modalTitle = modal.querySelector('.modal-title');
modalTitle.textContent = title;
if (!editor) {
const container = document.getElementById('codemirror-container');
editor = CodeMirror(container, {
theme: 'dracula',
lineNumbers: true,
readOnly: true,
mode: 'shell',
scrollbarStyle: 'overlay',
lineWrapping: true,
viewportMargin: Infinity,
extraKeys: {
"Ctrl-F": "find",
"Cmd-F": "find",
"F5": function(cm) {
if (currentLogUrl) {
fetchAndDisplayLog(currentLogUrl);
}
return false; }
}
});
}
fetchAndDisplayLog(url);
const bsModal = new bootstrap.Modal(modal);
bsModal.show();
modal.addEventListener('shown.bs.modal', function () {
if (editor) {
editor.refresh();
}
});
}
function fetchAndDisplayLog(url) {
fetch(url)
.then(response => response.text())
.then(content => {
editor.setValue(content);
const lastLine = editor.lastLine();
editor.scrollIntoView({line: lastLine, ch: 0}, 100);
})
.catch(error => {
editor.setValue('Error loading log: ' + error.message);
});
}
</script>
<div class="modal fade" id="logModal" tabindex="-1">
<div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"></h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<div id="codemirror-container"></div>
</div>
</div>
</div>
</div>