From d3a216c9878106e3b71a728f7b1ab5533588a311 Mon Sep 17 00:00:00 2001
From: Bruce Schultz <bschultz013@gmail.com>
Date: Thu, 19 Feb 2026 08:55:48 +0100
Subject: [PATCH 1/5] feat: update event filtering and bind to meter group

---
 components/events/EventViewer.vue | 56 ++++++++++++++++++++-----------
 composables/useAPIFetch.ts        |  3 ++
 2 files changed, 40 insertions(+), 19 deletions(-)

diff --git a/components/events/EventViewer.vue b/components/events/EventViewer.vue
index 9d21401..436e51f 100644
--- a/components/events/EventViewer.vue
+++ b/components/events/EventViewer.vue
@@ -52,21 +52,27 @@ onMounted(() => {
   parseData();
 });
 
-function updateLogLevelCounts() {
-  // Reset counts
-  logLevelDistributions.value.forEach((dist) => (dist.value = 0));
+function updateLogLevelCounts(eventList: EventLog[] = events.value) {
+  // Reset counts with new array to force MeterGroup reactivity
+  const updatedCounts = new Map(
+    logLevelDistributions.value.map((dist) => [
+      dist.label,
+      { ...dist, value: 0 },
+    ]),
+  );
 
-  // Count occurrences
-  if (events.value) {
-    events.value.forEach((event) => {
+  if (eventList) {
+    // Count occurrences
+    eventList.forEach((event) => {
       const tags = event.attributes?.tags || [];
 
-      logLevelDistributions.value.forEach((dist) => {
+      updatedCounts.forEach((dist) => {
         if (tags.includes(dist.label)) {
           dist.value++;
         }
       });
     });
+    logLevelDistributions.value = Array.from(updatedCounts.values());
   }
 }
 
@@ -117,16 +123,25 @@ function getLogLevelColor(tags: string[]): string | undefined {
 
 // Table filters
 FilterService.register("tagsContainsAny", (value, filter) => {
-  if (!filter || filter.length === 0) {
-    return true;
-  }
+  if (!filter || filter.length === 0) return true;
+  if (!value || value.length === 0) return false;
 
-  if (!value || value.length === 0) {
-    return false;
-  }
+  const selectedServices = filter.filter((f: EventTag) =>
+    Object.values(EventServiceTag).includes(f),
+  );
+  const selectedLogLevels = filter.filter((f: EventTag) =>
+    Object.values(EventLogLevelTag).includes(f),
+  );
+
+  const matchesService =
+    selectedServices.length === 0 ||
+    selectedServices.some((f: EventTag) => value.includes(f));
 
-  // Check if any element in the filter array exists in the value array
-  return filter.some((filterItem: EventTag) => value.includes(filterItem));
+  const matchesLogLevel =
+    selectedLogLevels.length === 0 ||
+    selectedLogLevels.some((f: EventTag) => value.includes(f));
+
+  return matchesService && matchesLogLevel;
 });
 
 const defaultFilters = {
@@ -165,9 +180,9 @@ function handleShowRequestEvents(requestedEvents: EventLogResponse) {
 }
 
 function handleFilter(event: DataTableFilterEvent) {
-  filteredEventCount.value = event.filteredValue
-    ? event.filteredValue.length
-    : 0;
+  const filtered = event.filteredValue ?? [];
+  filteredEventCount.value = filtered.length;
+  updateLogLevelCounts(filtered);
 }
 
 watch(
@@ -194,7 +209,10 @@ watch(
           />
         </div>
         <div class="log-distribution-meter">
-          <MeterGroup :value="logLevelDistributions" :max="events.length" />
+          <MeterGroup
+            :value="logLevelDistributions"
+            :max="filteredEventCount || eventCount"
+          />
         </div>
         <div class="table-header-row">
           <div class="table-header-row-filter-chips-container">
diff --git a/composables/useAPIFetch.ts b/composables/useAPIFetch.ts
index e7d222e..b18b189 100644
--- a/composables/useAPIFetch.ts
+++ b/composables/useAPIFetch.ts
@@ -30,6 +30,9 @@ export function getEvents(opts?) {
   return useAPIFetch<EventLogResponse>("/events", {
     ...opts,
     method: "GET",
+    query: {
+      limit: 100,
+    },
   });
 }
 

From d237fb0f41e0d7fba12a99563e71f6eb429bd647 Mon Sep 17 00:00:00 2001
From: Bruce Schultz <bschultz013@gmail.com>
Date: Thu, 19 Feb 2026 10:44:05 +0100
Subject: [PATCH 2/5] test: fix unit tests and imports

---
 components/events/DateFilterGraph.vue         |  1 +
 components/events/EventViewer.vue             |  2 +
 components/events/TagFilterSidePanel.vue      |  1 +
 components/header/AvatarButton.vue            |  1 +
 .../analysis/AnalysisControlButtons.spec.ts   |  4 +-
 .../components/events/DateFilterGraph.spec.ts | 39 +++++++++
 test/components/events/EventViewer.spec.ts    | 84 +++++++++++++++++++
 .../events/TagFilterSidePanel.spec.ts         | 18 ++++
 test/components/events/constants.ts           | 29 +++++++
 test/components/header/AvatarButton.spec.ts   |  2 +-
 test/components/header/MenuHeader.spec.ts     | 18 +++-
 test/mockapi/handlers.ts                      | 20 ++++-
 12 files changed, 211 insertions(+), 8 deletions(-)
 create mode 100644 test/components/events/DateFilterGraph.spec.ts
 create mode 100644 test/components/events/EventViewer.spec.ts
 create mode 100644 test/components/events/TagFilterSidePanel.spec.ts
 create mode 100644 test/components/events/constants.ts

diff --git a/components/events/DateFilterGraph.vue b/components/events/DateFilterGraph.vue
index 6554218..56fce35 100644
--- a/components/events/DateFilterGraph.vue
+++ b/components/events/DateFilterGraph.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { useNuxtApp } from "#app";
 import DatePicker from "primevue/datepicker";
 import Toolbar from "primevue/toolbar";
 import FloatLabel from "primevue/floatlabel";
diff --git a/components/events/EventViewer.vue b/components/events/EventViewer.vue
index 436e51f..707b2d8 100644
--- a/components/events/EventViewer.vue
+++ b/components/events/EventViewer.vue
@@ -2,6 +2,8 @@
 import { getEvents } from "~/composables/useAPIFetch";
 import { FilterMatchMode, FilterService } from "@primevue/core/api";
 import SearchBar from "~/components/table/SearchBar.vue";
+import MeterGroup from "primevue/metergroup";
+import Chip from "primevue/chip";
 import {
   EventLogLevelTag,
   EventServiceTag,
diff --git a/components/events/TagFilterSidePanel.vue b/components/events/TagFilterSidePanel.vue
index 294a42c..0d12f59 100644
--- a/components/events/TagFilterSidePanel.vue
+++ b/components/events/TagFilterSidePanel.vue
@@ -6,6 +6,7 @@ import {
 } from "~/types/eventTag";
 import Panel from "primevue/panel";
 import PanelMenu from "primevue/panelmenu";
+import Checkbox from "primevue/checkbox";
 
 const modelValue = defineModel<EventTag[]>({ default: [] });
 const emit = defineEmits(["clearTagFilter"]);
diff --git a/components/header/AvatarButton.vue b/components/header/AvatarButton.vue
index 042d7a5..b5d249f 100644
--- a/components/header/AvatarButton.vue
+++ b/components/header/AvatarButton.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import Menu from "primevue/menu";
+import ToggleSwitch from "primevue/toggleswitch";
 import Button from "primevue/button";
 import { useRuntimeConfig } from "#app";
 import CleanupDialog from "~/components/header/CleanupDialog.vue";
diff --git a/test/components/analysis/AnalysisControlButtons.spec.ts b/test/components/analysis/AnalysisControlButtons.spec.ts
index 612c3cc..3a5175e 100644
--- a/test/components/analysis/AnalysisControlButtons.spec.ts
+++ b/test/components/analysis/AnalysisControlButtons.spec.ts
@@ -59,7 +59,7 @@ describe("AnalysisControlButtons.vue", () => {
         projectId: "7f2f3b59-3b6d-4fb6-a900-2a4d5c2ea483",
         nodeId: "e3b89572-327f-4936-8cf0-fbfbcc6336b7",
         datastore: true,
-        nodeType: "default",
+        requireDatastore: true,
       },
     });
 
@@ -283,7 +283,7 @@ describe("AnalysisControlButtons.vue", () => {
         projectId: "7f2f3b59-3b6d-4fb6-a900-2a4d5c2ea483",
         nodeId: "e3b89572-327f-4936-8cf0-fbfbcc6336b7",
         datastore: true,
-        nodeType: "default",
+        requireDatastore: true,
       },
     });
 
diff --git a/test/components/events/DateFilterGraph.spec.ts b/test/components/events/DateFilterGraph.spec.ts
new file mode 100644
index 0000000..e0e14b4
--- /dev/null
+++ b/test/components/events/DateFilterGraph.spec.ts
@@ -0,0 +1,39 @@
+import { describe, expect, it, vi } from "vitest";
+import { mount } from "@vue/test-utils";
+import DateFilterGraph from "~/components/events/DateFilterGraph.vue";
+import { fakeEventResponse } from "~/test/components/events/constants";
+
+vi.mock("#app", () => ({
+  useNuxtApp: () => ({
+    $hubApi: vi.fn().mockResolvedValue(fakeEventResponse),
+  }),
+}));
+
+describe("DateFilterGraph.vue", () => {
+  it("Show event count", () => {
+    const wrapper = mount(DateFilterGraph, {
+      props: { eventCount: 2 },
+    });
+
+    expect(wrapper.text()).toContain("Event Viewer");
+    expect(wrapper.html()).toContain("2 events");
+  });
+
+  it("Shows singular form when eventCount is 1", () => {
+    const wrapper = mount(DateFilterGraph, {
+      props: { eventCount: 1 },
+    });
+
+    expect(wrapper.html()).toContain("1 event");
+  });
+
+  it("Emits showRequestedEvents when submit clicked", async () => {
+    const wrapper = mount(DateFilterGraph, { props: { eventCount: 1 } });
+
+    const submit = wrapper.find(".custom-date-filter-submit-btn button");
+    expect(submit.exists()).toBe(true);
+    await submit.trigger("click");
+
+    expect(wrapper.emitted("showRequestedEvents")).toHaveLength(1);
+  });
+});
diff --git a/test/components/events/EventViewer.spec.ts b/test/components/events/EventViewer.spec.ts
new file mode 100644
index 0000000..da3a0a8
--- /dev/null
+++ b/test/components/events/EventViewer.spec.ts
@@ -0,0 +1,84 @@
+import { beforeAll, beforeEach, describe, expect, it, vi } from "vitest";
+import { flushPromises, mount } from "@vue/test-utils";
+import EventViewer from "~/components/events/EventViewer.vue";
+import { type DefineComponent, defineComponent } from "vue";
+import { fakeEventResponse } from "~/test/components/events/constants";
+import { getEvents } from "~/composables/useAPIFetch";
+import type { EventLogResponse } from "~/services/Api";
+
+vi.mock("~/composables/useAPIFetch", () => ({
+  getEvents: vi.fn(),
+}));
+
+describe("EventViewer.vue", () => {
+  let EventViewerComponent: DefineComponent<typeof EventViewer>;
+
+  beforeEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  // Render the component with the fake params
+  beforeAll(async () => {
+    EventViewerComponent = defineComponent({
+      components: { EventViewer },
+      template: "<Suspense><EventViewer/></Suspense>",
+    });
+  });
+
+  it("Loads events into table", async () => {
+    vi.mocked(getEvents).mockResolvedValue({
+      data: ref(fakeEventResponse),
+      pending: ref(false),
+      error: ref(null),
+      status: ref("success"),
+      refresh: vi.fn(),
+      execute: vi.fn(),
+      clear: vi.fn(),
+    });
+
+    const wrapper = mount(EventViewerComponent);
+
+    // Wait for async setup to resolve
+    await flushPromises();
+    expect(wrapper.text()).toContain("Event Viewer"); // Title of the page
+    expect(wrapper.text()).toContain("1 event");
+
+    // Find header and check content
+    const headerRow = wrapper.findAll("thead tr th");
+    expect(headerRow[0].text()).toBe("DateTime"); // First col
+    expect(headerRow[1].text()).toBe("Event"); // Second col
+
+    // Find row and check content
+    const rows = wrapper.findAll("tbody tr");
+    expect(rows.length).toBe(1);
+
+    const rowCells = rows[0].findAll("td");
+    expect(rowCells[0].text()).toBe("2/19/268:50:14 AM GMT+1"); // Datetime
+    expect(rowCells[1].text()).toBe(
+      "NODE-SETTINGS-GET-SUCCESSHub AdapterNodeInfoA user fetched the node's configurations settings",
+    );
+  });
+
+  it("No events in response", async () => {
+    vi.mocked(getEvents).mockResolvedValue({
+      data: ref<EventLogResponse>({
+        data: [],
+        meta: { count: 0, total: 0, limit: 0, offset: 0 },
+      }),
+      pending: ref(false),
+      error: ref(null),
+      status: ref("success"),
+      refresh: vi.fn(),
+      execute: vi.fn(),
+      clear: vi.fn(),
+    });
+
+    const wrapper = mount(EventViewerComponent);
+
+    // Wait for async setup to resolve
+    await flushPromises();
+
+    expect(wrapper.text()).toContain("No events found");
+    expect(wrapper.text()).toContain("0 events");
+  });
+});
diff --git a/test/components/events/TagFilterSidePanel.spec.ts b/test/components/events/TagFilterSidePanel.spec.ts
new file mode 100644
index 0000000..75665d4
--- /dev/null
+++ b/test/components/events/TagFilterSidePanel.spec.ts
@@ -0,0 +1,18 @@
+import { describe, it, expect } from "vitest";
+import { mount } from "@vue/test-utils";
+import TagFilterSidePanel from "~/components/events/TagFilterSidePanel.vue";
+
+describe("TagFilterSidePanel.vue", () => {
+  it("renders categories and emits clearTagFilter when clear button clicked", async () => {
+    const wrapper = mount(TagFilterSidePanel);
+
+    // The menu has the two categories
+    expect(wrapper.text()).toContain("Services");
+    expect(wrapper.text()).toContain("Log Level");
+
+    const button = wrapper.find("button");
+    await button.trigger("click");
+
+    expect(wrapper.emitted()).toHaveProperty("clearTagFilter");
+  });
+});
diff --git a/test/components/events/constants.ts b/test/components/events/constants.ts
new file mode 100644
index 0000000..d3cb07b
--- /dev/null
+++ b/test/components/events/constants.ts
@@ -0,0 +1,29 @@
+import type { EventLogResponse } from "~/services/Api";
+
+export const fakeEventResponse: EventLogResponse = {
+  data: [
+    {
+      id: 683,
+      event_name: "node.settings.get.success",
+      service_name: "hub_adapter",
+      timestamp: "2026-02-19T07:50:14Z",
+      body: "A user fetched the node's configurations settings",
+      attributes: {
+        url: "http://localhost:5000/node/settings",
+        path: "/node/settings",
+        tags: ["Hub Adapter", "Node", "Info"],
+        user: {
+          email: "foo@bar.baz",
+          user_id: "f464efc6-0b39-484c-8c24-248fc628dcaf",
+          username: "someuser",
+          client_id: "node-ui",
+        },
+        client: ["127.0.0.1", 55580],
+        method: "GET",
+        service: "node",
+        status_code: 200,
+      },
+    },
+  ],
+  meta: { count: 1, total: 1, limit: 1, offset: 0 },
+};
diff --git a/test/components/header/AvatarButton.spec.ts b/test/components/header/AvatarButton.spec.ts
index 63617e0..2d83936 100644
--- a/test/components/header/AvatarButton.spec.ts
+++ b/test/components/header/AvatarButton.spec.ts
@@ -15,7 +15,7 @@ describe("AvatarButton.vue", () => {
 
   vi.mocked(useRuntimeConfig);
 
-  beforeAll(async () => {
+  beforeAll(() => {
     AvatarButtonTestComponent = defineComponent({
       components: { AvatarButton },
       template: "<Suspense><AvatarButton/></Suspense>",
diff --git a/test/components/header/MenuHeader.spec.ts b/test/components/header/MenuHeader.spec.ts
index 7ada4f1..be64849 100644
--- a/test/components/header/MenuHeader.spec.ts
+++ b/test/components/header/MenuHeader.spec.ts
@@ -1,11 +1,22 @@
-import { mount } from "@vue/test-utils";
+import { flushPromises, mount } from "@vue/test-utils";
 import { useRuntimeConfig } from "#app";
-import { describe, expect, it, vi } from "vitest";
+import { beforeAll, describe, expect, it, vi } from "vitest";
 import MenuHeader from "~/components/header/MenuHeader.vue";
+import { type DefineComponent, defineComponent } from "vue";
 
 describe("MenuHeader.vue", () => {
   vi.mocked(useRuntimeConfig);
 
+  let MenuHeaderTestComponent: DefineComponent<typeof defineComponent>;
+
+  // Render the component with the fake params
+  beforeAll(async () => {
+    MenuHeaderTestComponent = defineComponent({
+      components: { MenuHeader },
+      template: "<Suspense><MenuHeader/></Suspense>",
+    });
+  });
+
   async function menuHeaderChecks(authenticated: boolean) {
     const status = authenticated ? "authenticated" : "unauthenticated";
     const menuTitles = [
@@ -20,8 +31,9 @@ describe("MenuHeader.vue", () => {
       status: ref(status),
     }));
 
-    const wrapper = mount(MenuHeader);
+    const wrapper = mount(MenuHeaderTestComponent);
     expect(wrapper).toBeTruthy();
+    await flushPromises();
 
     const menuBar = wrapper.find(".menu-bar-header");
 
diff --git a/test/mockapi/handlers.ts b/test/mockapi/handlers.ts
index 84f6e8a..a812882 100644
--- a/test/mockapi/handlers.ts
+++ b/test/mockapi/handlers.ts
@@ -1,6 +1,7 @@
 // For spoofing requests not made using the useFetch
 import { http, HttpResponse } from "msw";
 import {
+  type BodyKongInitializeKongInitializePost,
   type BodyPodorcPodsCreatePoPost,
   type CleanupPodResponse,
 } from "~/services/Api";
@@ -8,8 +9,8 @@ import {
   fakeDataStoreInitSuccess,
   fakeParsedProjects,
 } from "~/test/components/data-stores/constants";
-import type { kongBody } from "~/components/data-stores/create/DataStoreProjectInitializer.vue";
 import { fakeProposalsResp } from "~/test/components/projects/constants";
+import { fakeEventResponse } from "~/test/components/events/constants";
 
 export const fakeValidProposalId = "7f2f3b59-3b6d-4fb6-a900-2a4d5c2ea483";
 export const fakeInvalidProposalId = "15518efa-5146-4290-a7cb-95d27f41d991";
@@ -30,6 +31,14 @@ export const handlers = [
     });
   }),
 
+  // Node settings (used by various components during setup)
+  http.get("/node/settings", () => {
+    return HttpResponse.json({
+      status: 200,
+      data_required: false,
+    });
+  }),
+
   http.post("/analysis/initialize", async ({ request }) => {
     const formData = await request.formData();
     const analysisId = formData.get("analysis_id");
@@ -290,7 +299,7 @@ export const handlers = [
     });
   }),
   http.post(`/kong/initialize`, async ({ request }) => {
-    const body = (await request.json()) as kongBody;
+    const body = (await request.json()) as BodyKongInitializeKongInitializePost;
     const projectId = body.project_id;
     const hostname = body.datastore["host"];
 
@@ -308,4 +317,11 @@ export const handlers = [
       return new HttpResponse(null, { status: 500 });
     }
   }),
+  // Event requests
+  http.get(`/events`, () => {
+    return HttpResponse.json({
+      status: 200,
+      data: fakeEventResponse,
+    });
+  }),
 ];

From c733a9cc6b4020b7ef488977fc296803ba24e1e2 Mon Sep 17 00:00:00 2001
From: Bruce Schultz <bschultz013@gmail.com>
Date: Thu, 19 Feb 2026 10:48:10 +0100
Subject: [PATCH 3/5] test: limit TZ check to date

---
 test/components/events/EventViewer.spec.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/components/events/EventViewer.spec.ts b/test/components/events/EventViewer.spec.ts
index da3a0a8..3c712fb 100644
--- a/test/components/events/EventViewer.spec.ts
+++ b/test/components/events/EventViewer.spec.ts
@@ -53,7 +53,7 @@ describe("EventViewer.vue", () => {
     expect(rows.length).toBe(1);
 
     const rowCells = rows[0].findAll("td");
-    expect(rowCells[0].text()).toBe("2/19/268:50:14 AM GMT+1"); // Datetime
+    expect(rowCells[0].text()).toContain("2/19/26"); // Datetime, limit to date due to TZ issues in runner
     expect(rowCells[1].text()).toBe(
       "NODE-SETTINGS-GET-SUCCESSHub AdapterNodeInfoA user fetched the node's configurations settings",
     );

From 05610d21ac1a34aadbb08a5008531ae5b1542212 Mon Sep 17 00:00:00 2001
From: Bruce Schultz <bschultz013@gmail.com>
Date: Thu, 19 Feb 2026 11:13:30 +0100
Subject: [PATCH 4/5] test: add suggested fixes

---
 test/components/events/DateFilterGraph.spec.ts | 3 ++-
 test/mockapi/handlers.ts                       | 8 --------
 2 files changed, 2 insertions(+), 9 deletions(-)

diff --git a/test/components/events/DateFilterGraph.spec.ts b/test/components/events/DateFilterGraph.spec.ts
index e0e14b4..3af9b66 100644
--- a/test/components/events/DateFilterGraph.spec.ts
+++ b/test/components/events/DateFilterGraph.spec.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it, vi } from "vitest";
-import { mount } from "@vue/test-utils";
+import { flushPromises, mount } from "@vue/test-utils";
 import DateFilterGraph from "~/components/events/DateFilterGraph.vue";
 import { fakeEventResponse } from "~/test/components/events/constants";
 
@@ -33,6 +33,7 @@ describe("DateFilterGraph.vue", () => {
     const submit = wrapper.find(".custom-date-filter-submit-btn button");
     expect(submit.exists()).toBe(true);
     await submit.trigger("click");
+    await flushPromises();
 
     expect(wrapper.emitted("showRequestedEvents")).toHaveLength(1);
   });
diff --git a/test/mockapi/handlers.ts b/test/mockapi/handlers.ts
index a812882..b635cb9 100644
--- a/test/mockapi/handlers.ts
+++ b/test/mockapi/handlers.ts
@@ -10,7 +10,6 @@ import {
   fakeParsedProjects,
 } from "~/test/components/data-stores/constants";
 import { fakeProposalsResp } from "~/test/components/projects/constants";
-import { fakeEventResponse } from "~/test/components/events/constants";
 
 export const fakeValidProposalId = "7f2f3b59-3b6d-4fb6-a900-2a4d5c2ea483";
 export const fakeInvalidProposalId = "15518efa-5146-4290-a7cb-95d27f41d991";
@@ -317,11 +316,4 @@ export const handlers = [
       return new HttpResponse(null, { status: 500 });
     }
   }),
-  // Event requests
-  http.get(`/events`, () => {
-    return HttpResponse.json({
-      status: 200,
-      data: fakeEventResponse,
-    });
-  }),
 ];

From a7ae8e8441b864f97bac3e0dad63aff87b6cbbcd Mon Sep 17 00:00:00 2001
From: Bruce Schultz <bschultz013@gmail.com>
Date: Thu, 19 Feb 2026 11:14:27 +0100
Subject: [PATCH 5/5] test: add suggested fixes

---
 test/mockapi/handlers.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/test/mockapi/handlers.ts b/test/mockapi/handlers.ts
index b635cb9..ae4b7e6 100644
--- a/test/mockapi/handlers.ts
+++ b/test/mockapi/handlers.ts
@@ -34,7 +34,9 @@ export const handlers = [
   http.get("/node/settings", () => {
     return HttpResponse.json({
       status: 200,
-      data_required: false,
+      data: {
+        data_required: false,
+      },
     });
   }),