webapp: put count/value data table into its own component

jasonish · May 25, 2024 · 3aa8490 · 3aa8490
1 parent 4df2426
commit 3aa8490
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 68 deletions.
diff --git a/webapp/src/components/CountValueDataTable.tsx b/webapp/src/components/CountValueDataTable.tsx
@@ -0,0 +1,57 @@
+// SPDX-FileCopyrightText: (C) 2023 Jason Ish <[email protected]>
+// SPDX-License-Identifier: MIT
+
+import { For, Show } from "solid-js";
+import { SearchLink } from "../common/SearchLink";
+
+// Creates a table where the first column is a count, and the second
+// column is value.
+export function CountValueDataTable(props: {
+  title: string;
+  label: string;
+  searchField?: string;
+  rows: { count: number; key: any }[];
+}) {
+  function searchLink(value: any) {
+    if (props.searchField) {
+      return (
+        <SearchLink value={value} field={props.searchField}>
+          {value}
+        </SearchLink>
+      );
+    } else {
+      return <SearchLink value={value}>{value}</SearchLink>;
+    }
+  }
+
+  return (
+    <>
+      <div class="card app-count-value-data-table">
+        <div class="card-header">{props.title}</div>
+        <div class="card-body p-0">
+          <Show when={props.rows.length == 0}></Show>
+          <Show when={props.rows.length > 0}>
+            <table class="table mb-0">
+              <thead>
+                <tr>
+                  <th style={"width: 6em;"}>#</th>
+                  <th>{props.label}</th>
+                </tr>
+              </thead>
+              <tbody>
+                <For each={props.rows}>
+                  {(row) => (
+                    <tr>
+                      <td style={"width: 6em;"}>{row.count}</td>
+                      <td>{searchLink(row.key)}</td>
+                    </tr>
+                  )}
+                </For>
+              </tbody>
+            </table>
+          </Show>
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/webapp/src/reports/AddressReport.tsx b/webapp/src/reports/AddressReport.tsx
@@ -6,7 +6,7 @@ import { useParams } from "@solidjs/router";
 import { createEffect, createSignal, For, Show } from "solid-js";
 import { Col, Container, Row } from "solid-bootstrap";
 import { API, GroupByQueryRequest, GroupByQueryResponseRow } from "../api";
-import { CountValueTable } from "./AlertsReport";
+import { CountValueDataTable } from "../components/CountValueDataTable";
 import { createStore } from "solid-js/store";
 import { RefreshButton } from "../common/RefreshButton";
 
@@ -465,7 +465,7 @@ export function AddressReport() {
             {(loader) => (
               <>
                 <Col class={"mt-2"} md={6}>
-                  <CountValueTable
+                  <CountValueDataTable
                     title={loader.title!}
                     label={loader.label!}
                     rows={loader.get()}

diff --git a/webapp/src/reports/AlertsReport.tsx b/webapp/src/reports/AlertsReport.tsx
@@ -2,15 +2,15 @@
 // SPDX-License-Identifier: MIT
 
 import { TIME_RANGE, Top } from "../Top";
-import { createEffect, createSignal, For, Show } from "solid-js";
-import { Card, Col, Container, Form, Row, Table } from "solid-bootstrap";
+import { createEffect, createSignal } from "solid-js";
+import { Col, Container, Form, Row } from "solid-bootstrap";
 import { API } from "../api";
 import { RefreshButton } from "../common/RefreshButton";
 import { Chart, ChartConfiguration } from "chart.js";
 import { useSearchParams } from "@solidjs/router";
 import { SensorSelect } from "../common/SensorSelect";
 import { trackLoading } from "../util";
-import { SearchLink } from "../common/SearchLink";
+import { CountValueDataTable } from "../components/CountValueDataTable";
 
 interface CountValueRow {
   count: number;
@@ -258,7 +258,7 @@ export function AlertsReport() {
 
         <Row class={"mt-2"}>
           <Col>
-            <CountValueTable
+            <CountValueDataTable
               title={"Most Alerting Signatures"}
               label={"Signature"}
               searchField="alert.signature"
@@ -267,7 +267,7 @@ export function AlertsReport() {
           </Col>
 
           <Col>
-            <CountValueTable
+            <CountValueDataTable
               title={"Least Alerting Signatures"}
               label={"Signature"}
               searchField="alert.signature"
@@ -278,15 +278,15 @@ export function AlertsReport() {
 
         <Row>
           <Col class={"mt-2"}>
-            <CountValueTable
+            <CountValueDataTable
               title={"Most Alerting Source Addresses"}
               label={"Address"}
               searchField={"@ip"}
               rows={mostSourceAddrs()}
             />
           </Col>
           <Col class={"mt-2"}>
-            <CountValueTable
+            <CountValueDataTable
               title={"Most Alerting Destination Addresses"}
               label={"Address"}
               searchField={"@ip"}
@@ -297,15 +297,15 @@ export function AlertsReport() {
 
         <Row>
           <Col class={"mt-2"}>
-            <CountValueTable
+            <CountValueDataTable
               title={"Least Alerting Source Addresses"}
               label={"Address"}
               searchField={"@ip"}
               rows={leastSourceAddrs()}
             />
           </Col>
           <Col class={"mt-2"}>
-            <CountValueTable
+            <CountValueDataTable
               title={"Least Alerting Destination Addresses"}
               label={"Address"}
               searchField={"@ip"}
@@ -317,60 +317,3 @@ export function AlertsReport() {
     </>
   );
 }
-
-// Creates a table where the first column is a count, and the second column is value.
-export function CountValueTable(props: {
-  title: string;
-  label: string;
-  searchField?: string;
-  rows: { count: number; key: any }[];
-}) {
-  const showNoData = true;
-
-  function searchLink(value: any) {
-    if (props.searchField) {
-      return (
-        <SearchLink value={value} field={props.searchField}>
-          {value}
-        </SearchLink>
-      );
-    } else {
-      return <SearchLink value={value}>{value}</SearchLink>;
-    }
-  }
-
-  return (
-    <Show when={showNoData || props.rows.length > 0}>
-      <Card>
-        <Card.Header>
-          <b>{props.title}</b>
-        </Card.Header>
-        <Show when={props.rows.length === 0}>
-          <Card.Body>No results.</Card.Body>
-        </Show>
-        <Show when={props.rows.length > 0}>
-          <Card.Body style={"padding: 0;"}>
-            <Table size={"sm"} hover striped>
-              <thead>
-                <tr>
-                  <th style={"width: 6em;"}>#</th>
-                  <th>{props.label}</th>
-                </tr>
-              </thead>
-              <tbody>
-                <For each={props.rows}>
-                  {(row) => (
-                    <tr>
-                      <td style={"width: 6em;"}>{row.count}</td>
-                      <td>{searchLink(row.key)}</td>
-                    </tr>
-                  )}
-                </For>
-              </tbody>
-            </Table>
-          </Card.Body>
-        </Show>
-      </Card>
-    </Show>
-  );
-}
diff --git a/webapp/src/styles/index.scss b/webapp/src/styles/index.scss
@@ -225,3 +225,13 @@ $evebox-danger-color-dark: #72383e;
     text-decoration: none;
   }
 }
+
+.app-count-value-data-table {
+  tbody {
+    tr:last-child {
+      td {
+        border: none;
+      }
+    }
+  }
+}