This repository has been archived on 2024-10-26. You can view files and clone it, but cannot push or open issues or pull requests.
staxman-old/templates/container/get-one.html
2023-11-19 15:08:47 +01:00

110 lines
No EOL
2.3 KiB
HTML

{% extends "base.html" %}
{% block title %}Container {{container_name}}{% endblock %}
{% block content %}
<main>
<h1>Container <span class="container-name">{{container_name}}</span></h1>
<h2>Status</h2>
<div>TODO</div>
<h2>Logs</h2>
<code id="log">
</code>
</main>
<style scoped>
main {
display: flex;
flex-direction: column;
gap: 1rem;
}
h2 {
text-transform: uppercase;
margin: 0;
padding: 0;
}
pre {
margin: 0;
padding: 0;
}
.container-name {
color: #E796F3;
}
#log {
background-color: #171625;
display: flex;
display: block;
height: 500px;
max-height: 50vh;
overflow-y: auto;
& .error {
padding: 4px 8px;
background-color: #3B1219;
color: #FF9592;
}
& p {
padding: 4px 8px;
margin: 0;
&:nth-child(odd) {
background-color: #202248;
}
}
}
</style>
<script type="module">
import ansiFmt from 'https://esm.run/ansi-to-html';
const convert = new ansiFmt({
fg: '#E0DFFE',
bg: '#171625',
newline: false,
escapeXML: true,
stream: false,
colors: ["#282c34", "#abb2bf", "#e06c75", "#be5046", "#98c379", "#d19a66", "#61afef", "#c678dd", "#56b6c2", "#4b5263", "#5c6370"]
});
const logEl = document.querySelector("#log");
const logSource = new EventSource(`${location.origin}${location.pathname}/log`);
logSource.addEventListener("error", (ev) => {
logSource.close();
const err = document.createElement("div");
err.className = "error";
err.appendChild(document.createTextNode("No logs available after this (container not running)"));
logEl.appendChild(err);
err.scrollIntoView();
return;
});
logSource.addEventListener("message", (ev) => {
const data = JSON.parse(ev.data);
// If an error is received stop listening
if ("error" in data) {
logSource.close();
const err = document.createElement("div");
err.className = "error";
err.appendChild(document.createTextNode(data.error));
logEl.appendChild(err);
err.scrollIntoView();
return;
}
// Received lines of log
if ("lines" in data) {
data.lines.split("\n").map(line => convert.toHtml(line)).filter(line => line).forEach(line => {
const lineEl = document.createElement("p");
lineEl.innerHTML = line;
logEl.appendChild(lineEl);
lineEl.scrollIntoView();
});
}
});
</script>
{% endblock %}