From a91f2905955387c4e8467862e5e6da19d4c90cf4 Mon Sep 17 00:00:00 2001
From: CarterPerez-dev <cartertechsolution@gmail.com>
Date: Sun, 3 May 2026 07:15:16 -0400
Subject: [PATCH] feat(monitor/frontend): DShield panel (top ports + top source
 IPs, dense tables)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two side-by-side tables fed from snapshot.scan_firehose: Top Ports (port +
24h hits) and Top Sources (IP + CC + hits). Below them a one-line muted
mono summary "Xk records · Yk sources · Z targets — last 24h." Tables, not
bar charts — operator wants to read the port number 22 / 3389, not stare
at a horizontal bar.

Port and IP and hit counts are mono with tabular-nums (digit alignment
matters). Country code stays sans (text label, not a number). Hover row
background var(--bg-row-hover) — subtle, no transform / no transition /
no theatre. Defensive empty-state — when snapshot has no scan_firehose
yet, tables render as empty (per ethos: no "no data" message).

PORT_ROW_LIMIT / SOURCE_ROW_LIMIT / THOUSAND / MILLION constants at module
scope (no inline magic). Renders in the right column as the bottom panel
per spec §11.1 column ordering.
---
 .../src/pages/dashboard/Dashboard.tsx         |   5 +-
 .../src/pages/panels/DShieldPanel.module.scss |  48 +++++++++
 .../src/pages/panels/DShieldPanel.tsx         | 102 ++++++++++++++++++
 3 files changed, 154 insertions(+), 1 deletion(-)
 create mode 100644 PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/pages/panels/DShieldPanel.module.scss
 create mode 100644 PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/pages/panels/DShieldPanel.tsx

diff --git a/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/pages/dashboard/Dashboard.tsx b/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/pages/dashboard/Dashboard.tsx
index e45468c5..e865c673 100644
--- a/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/pages/dashboard/Dashboard.tsx
+++ b/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/pages/dashboard/Dashboard.tsx
@@ -2,6 +2,7 @@
 // Dashboard.tsx
 
 import { Globe } from '@/pages/globe/Globe'
+import { DShieldPanel } from '@/pages/panels/DShieldPanel'
 import { useUIStore } from '@/stores/ui'
 import { AlertBanner } from './AlertBanner'
 import { BottomTicker } from './BottomTicker'
@@ -26,7 +27,9 @@ export function Dashboard(): React.ReactElement {
         <section className={styles.center}>
           <Globe />
         </section>
-        <aside className={styles.right} />
+        <aside className={styles.right}>
+          <DShieldPanel />
+        </aside>
       </main>
       <BottomTicker />
     </div>
diff --git a/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/pages/panels/DShieldPanel.module.scss b/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/pages/panels/DShieldPanel.module.scss
new file mode 100644
index 00000000..93cbabe7
--- /dev/null
+++ b/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/pages/panels/DShieldPanel.module.scss
@@ -0,0 +1,48 @@
+// ©AngelaMos | 2026
+// DShieldPanel.module.scss
+
+.row {
+  display: grid;
+  grid-template-columns: 1fr 1.2fr;
+  gap: 12px;
+  padding: 4px 8px;
+}
+
+.table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.table thead th {
+  font-size: var(--type-label);
+  letter-spacing: var(--letter-spacing-label);
+  text-transform: uppercase;
+  color: var(--fg-3);
+  text-align: left;
+  padding: var(--row-py) var(--row-px);
+  border-bottom: 1px solid var(--fg-4);
+  font-weight: 400;
+}
+
+.table tbody td {
+  padding: var(--row-py) var(--row-px);
+  font-size: var(--type-body);
+  color: var(--fg-1);
+}
+
+.table tbody tr:hover {
+  background: var(--bg-row-hover);
+}
+
+.mono {
+  font-family: var(--font-mono);
+  font-variant-numeric: tabular-nums;
+}
+
+.summary {
+  margin: 8px;
+  font-size: var(--type-body);
+  color: var(--fg-3);
+  font-family: var(--font-mono);
+  font-variant-numeric: tabular-nums;
+}
diff --git a/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/pages/panels/DShieldPanel.tsx b/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/pages/panels/DShieldPanel.tsx
new file mode 100644
index 00000000..708c5b44
--- /dev/null
+++ b/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/pages/panels/DShieldPanel.tsx
@@ -0,0 +1,102 @@
+// ©AngelaMos | 2026
+// DShieldPanel.tsx
+
+import { useSnapshot } from '@/api/snapshot'
+import styles from './DShieldPanel.module.scss'
+import { Panel } from './Panel'
+
+const PORT_ROW_LIMIT = 8
+const SOURCE_ROW_LIMIT = 8
+const THOUSAND = 1_000
+const MILLION = 1_000_000
+
+interface DShieldPort {
+  port: number
+  records: number
+}
+
+interface DShieldSource {
+  ip: string
+  country?: string
+  records: number
+}
+
+interface DShieldDailySummary {
+  records: number
+  sources: number
+  targets: number
+}
+
+interface DShieldData {
+  topports?: DShieldPort[]
+  topips?: DShieldSource[]
+  dailysummary?: DShieldDailySummary[]
+}
+
+export function DShieldPanel(): React.ReactElement {
+  const { data } = useSnapshot()
+  const ds = (data?.scan_firehose as DShieldData | undefined) ?? {}
+  const summary = ds.dailysummary?.[0]
+
+  return (
+    <Panel
+      title="DSHIELD"
+      subtitle="MASS SCAN"
+      rawHref="https://isc.sans.edu/api/"
+      rawLabel="DShield API"
+    >
+      <div className={styles.row}>
+        <table className={styles.table}>
+          <thead>
+            <tr>
+              <th>Port</th>
+              <th>Hits / 24h</th>
+            </tr>
+          </thead>
+          <tbody>
+            {(ds.topports ?? []).slice(0, PORT_ROW_LIMIT).map((p) => (
+              <tr key={p.port}>
+                <td className={styles.mono}>{p.port}</td>
+                <td className={styles.mono}>{p.records.toLocaleString()}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+
+        <table className={styles.table}>
+          <thead>
+            <tr>
+              <th>Source IP</th>
+              <th>CC</th>
+              <th>Hits</th>
+            </tr>
+          </thead>
+          <tbody>
+            {(ds.topips ?? []).slice(0, SOURCE_ROW_LIMIT).map((s) => (
+              <tr key={s.ip}>
+                <td className={styles.mono}>{s.ip}</td>
+                <td>{s.country ?? '—'}</td>
+                <td className={styles.mono}>{s.records.toLocaleString()}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+
+      {summary && (
+        <p className={styles.summary}>
+          {fmtN(summary.records)} records · {fmtN(summary.sources)} sources ·{' '}
+          {fmtN(summary.targets)} targets — last 24h
+        </p>
+      )}
+    </Panel>
+  )
+}
+
+DShieldPanel.displayName = 'DShieldPanel'
+
+function fmtN(n: number): string {
+  if (n >= MILLION) return `${(n / MILLION).toFixed(1)}M`
+  if (n >= THOUSAND) return `${(n / THOUSAND).toFixed(1)}k`
+  return String(n)
+}