Add resource inspector to Quantum dashboard

2026-04-20 17:53:30 -03:00
parent fd4597a309
commit 5828eed35b
3 changed files with 203 additions and 0 deletions
@@ -129,6 +129,10 @@
      .result {
        margin-top: 18px;
      }
+
+      .inspect {
+        margin-top: 18px;
+      }
    </style>
  </head>
  <body>
@@ -146,16 +150,30 @@
        <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);
@@ -165,6 +183,10 @@
        result.textContent = typeof value === "string" ? value : renderJson(value);
      }

+      function setInspect(value) {
+        inspect.textContent = typeof value === "string" ? value : renderJson(value);
+      }
+
      function renderChecks(data) {
        cards.innerHTML = "";

@@ -214,12 +236,25 @@
        }
      }

+      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>