Add Quantum resource evidence dashboard
This commit is contained in:
+175
-11
@@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Hello Quantum</title>
|
||||
<title>Quantum Evidence</title>
|
||||
<style>
|
||||
:root {
|
||||
color-scheme: dark;
|
||||
@@ -16,11 +16,14 @@
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
button {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
margin: 0;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: 32px 16px;
|
||||
background:
|
||||
linear-gradient(135deg, rgba(43, 190, 179, 0.22), transparent 34%),
|
||||
linear-gradient(315deg, rgba(246, 196, 83, 0.18), transparent 32%),
|
||||
@@ -28,11 +31,8 @@
|
||||
}
|
||||
|
||||
main {
|
||||
width: min(680px, calc(100vw - 32px));
|
||||
padding: 40px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.14);
|
||||
border-radius: 8px;
|
||||
background: rgba(16, 20, 22, 0.78);
|
||||
width: min(1120px, 100%);
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
p {
|
||||
@@ -51,13 +51,177 @@
|
||||
strong {
|
||||
color: #64d8cb;
|
||||
}
|
||||
|
||||
header {
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
margin: 24px 0;
|
||||
}
|
||||
|
||||
button {
|
||||
border: 0;
|
||||
border-radius: 8px;
|
||||
padding: 12px 16px;
|
||||
color: #0d1415;
|
||||
background: #64d8cb;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button.secondary {
|
||||
color: #f2f5f7;
|
||||
background: transparent;
|
||||
border: 1px solid rgba(255, 255, 255, 0.22);
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.card {
|
||||
min-height: 150px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.14);
|
||||
border-radius: 8px;
|
||||
padding: 18px;
|
||||
background: rgba(16, 20, 22, 0.78);
|
||||
}
|
||||
|
||||
.card h2 {
|
||||
margin: 0 0 10px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.status {
|
||||
display: inline-block;
|
||||
border-radius: 8px;
|
||||
padding: 4px 8px;
|
||||
margin-bottom: 12px;
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
color: #f2f5f7;
|
||||
}
|
||||
|
||||
.status.ok {
|
||||
background: rgba(100, 216, 203, 0.18);
|
||||
color: #64d8cb;
|
||||
}
|
||||
|
||||
.status.error {
|
||||
background: rgba(242, 103, 103, 0.18);
|
||||
color: #ff8a8a;
|
||||
}
|
||||
|
||||
pre {
|
||||
overflow: auto;
|
||||
margin: 0;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
color: #cbd5d9;
|
||||
font-size: 13px;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.result {
|
||||
margin-top: 18px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<p><strong>Quantum</strong> platform</p>
|
||||
<h1>Hello Quantum</h1>
|
||||
<p>The application container is running on the Gitea Docker host.</p>
|
||||
<header>
|
||||
<p><strong>Quantum</strong> platform</p>
|
||||
<h1>Hello Quantum</h1>
|
||||
<p>Live evidence from LocalStack resources provisioned with OpenTofu.</p>
|
||||
</header>
|
||||
|
||||
<section class="actions" aria-label="Quantum actions">
|
||||
<button id="refresh" type="button">Refresh Evidence</button>
|
||||
<button id="s3" class="secondary" type="button">Write S3 Evidence</button>
|
||||
<button id="sqs" class="secondary" type="button">Send SQS Message</button>
|
||||
<button id="lambda" class="secondary" type="button">Check Lambda</button>
|
||||
</section>
|
||||
|
||||
<section id="cards" class="grid" aria-live="polite"></section>
|
||||
<section class="card result">
|
||||
<h2>Last Action</h2>
|
||||
<pre id="result">Ready.</pre>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
const cards = document.querySelector("#cards");
|
||||
const result = document.querySelector("#result");
|
||||
|
||||
function renderJson(value) {
|
||||
return JSON.stringify(value, null, 2);
|
||||
}
|
||||
|
||||
function setResult(value) {
|
||||
result.textContent = typeof value === "string" ? value : renderJson(value);
|
||||
}
|
||||
|
||||
function renderChecks(data) {
|
||||
cards.innerHTML = "";
|
||||
|
||||
for (const check of data.checks || []) {
|
||||
const article = document.createElement("article");
|
||||
article.className = "card";
|
||||
article.innerHTML = `
|
||||
<span class="status ${check.status}">${check.status}</span>
|
||||
<h2>${check.name}</h2>
|
||||
<pre>${renderJson(check.evidence || { error: check.error })}</pre>
|
||||
`;
|
||||
cards.appendChild(article);
|
||||
}
|
||||
}
|
||||
|
||||
async function request(path, options = {}) {
|
||||
const response = await fetch(path, options);
|
||||
const payload = await response.json();
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(payload.error || response.statusText);
|
||||
}
|
||||
|
||||
return payload;
|
||||
}
|
||||
|
||||
async function refresh() {
|
||||
setResult("Loading LocalStack evidence...");
|
||||
const data = await request("/api/health");
|
||||
renderChecks(data);
|
||||
setResult({
|
||||
application: data.application,
|
||||
environment: data.environment,
|
||||
localstackEndpoint: data.localstackEndpoint,
|
||||
generatedAt: data.generatedAt,
|
||||
});
|
||||
}
|
||||
|
||||
async function runAction(path) {
|
||||
try {
|
||||
setResult("Running action...");
|
||||
const data = await request(path, { method: "POST" });
|
||||
setResult(data);
|
||||
await refresh();
|
||||
} catch (error) {
|
||||
setResult({ error: error.message });
|
||||
}
|
||||
}
|
||||
|
||||
document.querySelector("#refresh").addEventListener("click", () => {
|
||||
refresh().catch((error) => setResult({ error: error.message }));
|
||||
});
|
||||
document.querySelector("#s3").addEventListener("click", () => runAction("/api/s3/marker"));
|
||||
document.querySelector("#sqs").addEventListener("click", () => runAction("/api/sqs/message"));
|
||||
document.querySelector("#lambda").addEventListener("click", () => runAction("/api/lambda/invoke"));
|
||||
|
||||
refresh().catch((error) => setResult({ error: error.message }));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user