263 lines
7.2 KiB
HTML
263 lines
7.2 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Quantum Evidence</title>
|
|
<style>
|
|
:root {
|
|
color-scheme: dark;
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
background: #101416;
|
|
color: #f2f5f7;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
button {
|
|
font: inherit;
|
|
}
|
|
|
|
body {
|
|
min-height: 100vh;
|
|
margin: 0;
|
|
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%),
|
|
#101416;
|
|
}
|
|
|
|
main {
|
|
width: min(1120px, 100%);
|
|
margin: 0 auto;
|
|
}
|
|
|
|
p {
|
|
margin: 0 0 14px;
|
|
color: #b9c5c9;
|
|
font-size: 16px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
h1 {
|
|
margin: 0 0 16px;
|
|
font-size: 48px;
|
|
line-height: 1.1;
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
.inspect {
|
|
margin-top: 18px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<main>
|
|
<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 class="actions" aria-label="Inspect resources">
|
|
<button data-inspect="/api/s3/objects" class="secondary" type="button">Inspect S3</button>
|
|
<button data-inspect="/api/sqs/details" class="secondary" type="button">Inspect SQS</button>
|
|
<button data-inspect="/api/lambda/details" class="secondary" type="button">Inspect Lambda</button>
|
|
<button data-inspect="/api/iam/details" class="secondary" type="button">Inspect IAM</button>
|
|
<button data-inspect="/api/secrets/details" class="secondary" type="button">Inspect Secret</button>
|
|
<button data-inspect="/api/logs/details" class="secondary" type="button">Inspect Logs</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>
|
|
<section class="card inspect">
|
|
<h2>Resource Inspector</h2>
|
|
<pre id="inspect">Select a resource to inspect.</pre>
|
|
</section>
|
|
</main>
|
|
|
|
<script>
|
|
const cards = document.querySelector("#cards");
|
|
const result = document.querySelector("#result");
|
|
const inspect = document.querySelector("#inspect");
|
|
|
|
function renderJson(value) {
|
|
return JSON.stringify(value, null, 2);
|
|
}
|
|
|
|
function setResult(value) {
|
|
result.textContent = typeof value === "string" ? value : renderJson(value);
|
|
}
|
|
|
|
function setInspect(value) {
|
|
inspect.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 });
|
|
}
|
|
}
|
|
|
|
async function inspectResource(path) {
|
|
try {
|
|
setInspect("Loading resource details...");
|
|
const data = await request(path);
|
|
setInspect(data);
|
|
} catch (error) {
|
|
setInspect({ 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"));
|
|
document.querySelectorAll("[data-inspect]").forEach((button) => {
|
|
button.addEventListener("click", () => inspectResource(button.dataset.inspect));
|
|
});
|
|
|
|
refresh().catch((error) => setResult({ error: error.message }));
|
|
</script>
|
|
</body>
|
|
</html>
|