remove clutter from top logs text

package.json

@@ -7,6 +7,7 @@
     "preinstall": "npx only-allow pnpm",
     "start": "vite",
     "test": "vitest --silent",
+    "test-logs": "vitest",
     "coverage": "vitest run --coverage --silent",
     "build": "vite build && cp analog.sh dist",
     "preview": "vite preview"

src/analyzer/gridService.ts

@@ -15,7 +15,13 @@ function defaultCols(): ColDef[] {
       cellRenderer: JSONCellRenderer,
       flex: 2,
     },
-    { field: "timestamp", width: 270, sortable: true },
+    {
+      field: "timestamp",
+      width: 270,
+      sortable: true,
+      sort: "asc",
+      sortingOrder: ["asc", "desc"],
+    },
   ];
 }
 

src/analyzer/useViewModel.test.tsx

@@ -110,7 +110,7 @@ describe("useViewModel", () => {
         startTime: "2023-10-20T01:00:00.000Z",
         endTime: "2023-10-20T11:00:00.000Z",
         errorsOnly: true,
-        msgs: ["msg", "test"],
+        logs: [comparer.last().logs[0], comparer.last().logs[1]],
         regex: "^tes.*our$",
       };
 
@@ -161,7 +161,7 @@ describe("useViewModel", () => {
         .mockReturnValueOnce(30);
 
       filters = {
-        msgs: [],
+        logs: [],
       } as any;
     });
 

src/analyzer/useViewModel.tsx

@@ -32,7 +32,11 @@ function useViewModel() {
     prevJumps = [];
     nextJumps = [];
 
-    const filteredLogs: JSONLogs = comparer.last().logs.filter((log) => {
+    let filteredLogs: JSONLogs = filtersData.logs.length
+      ? filtersData.logs
+      : comparer.last().logs;
+
+    filteredLogs = filteredLogs.filter((log) => {
       let keep = true;
 
       if (keep && filtersData.startTime) {
@@ -51,12 +55,6 @@ function useViewModel() {
         );
       }
 
-      if (keep && filtersData.msgs.length) {
-        keep = filtersData.msgs.some((msg) =>
-          log[Processor.logKeys.msg].startsWith(msg)
-        );
-      }
-
       if (keep) {
         const id = log[Processor.logKeys.id];
         const time = new Date(log[Processor.logKeys.timestamp]);

src/components/filters/index.tsx

@@ -10,7 +10,7 @@ import {
 } from "@suid/material";
 import useViewModel, { type FiltersProps } from "./useViewModel";
 import AgGridSolid, { type AgGridSolidRef } from "ag-grid-solid";
-import type { RowClassParams, RowStyle } from "ag-grid-community";
+import type { GridOptions } from "ag-grid-community";
 import { GroupedMsg } from "../../models/processor";
 import { Show } from "solid-js";
 import comparer from "../../models/comparer";
@@ -31,11 +31,48 @@ function Filters(props: FiltersProps) {
     handleResetClick,
   } = useViewModel(props);
 
-  function getRowStyle(
-    params: RowClassParams<GroupedMsg>
-  ): RowStyle | undefined {
-    return params.data?.hasErrors ? { background: "#FFBFBF" } : undefined;
-  }
+  const commonGridOptions: GridOptions<GroupedMsg> = {
+    enableCellTextSelection: true,
+    columnDefs: [
+      {
+        field: "msg",
+        flex: 2,
+        checkboxSelection: true,
+        filter: "agTextColumnFilter",
+      },
+      {
+        headerName: "count",
+        flex: 0.5,
+        sortable: true,
+        valueGetter: (params) => params.data?.logs.length,
+      },
+    ],
+    rowSelection: "multiple",
+    suppressRowClickSelection: true,
+    onSelectionChanged: handleLogsSelectionChanged,
+    getRowStyle: (params) =>
+      params.data?.hasErrors ? { background: "#FFBFBF" } : undefined,
+  };
+
+  const topLogsGridOptions: GridOptions<GroupedMsg> = {
+    ...commonGridOptions,
+    rowData: topLogs(),
+  };
+
+  const addedLogsGridOptions: GridOptions<GroupedMsg> = {
+    ...commonGridOptions,
+    rowData: addedMsgs(),
+  };
+
+  const removedLogsGridOptions: GridOptions<GroupedMsg> = {
+    ...commonGridOptions,
+    rowData: removedMsgs(),
+    columnDefs: [
+      { ...commonGridOptions.columnDefs![0], checkboxSelection: undefined },
+      { ...commonGridOptions.columnDefs![1] },
+    ],
+    rowSelection: undefined,
+  };
 
   function handleEnterKey(e: KeyboardEvent) {
     if (e.key === "Enter") {
@@ -100,24 +137,7 @@ function Filters(props: FiltersProps) {
             {topLogs().length ? " : " + topLogs().length.toLocaleString() : ""}
           </Typography>
           <div style={{ height: "350px" }} class="ag-theme-alpine">
-            <AgGridSolid
-              ref={topMsgsGridRef}
-              enableCellTextSelection={true}
-              rowData={topLogs()}
-              columnDefs={[
-                {
-                  field: "msg",
-                  flex: 2,
-                  checkboxSelection: true,
-                  filter: "agTextColumnFilter",
-                },
-                { field: "count", flex: 0.5, sortable: true },
-              ]}
-              rowSelection="multiple"
-              suppressRowClickSelection={true}
-              onSelectionChanged={handleLogsSelectionChanged}
-              getRowStyle={getRowStyle}
-            />
+            <AgGridSolid ref={topMsgsGridRef} {...topLogsGridOptions} />
           </div>
         </Grid>
         <Show when={comparer.isOn()}>
@@ -130,24 +150,7 @@ function Filters(props: FiltersProps) {
                   : ""}
               </Typography>
               <div style={{ height: "350px" }} class="ag-theme-alpine">
-                <AgGridSolid
-                  ref={addedMsgsGridRef}
-                  enableCellTextSelection={true}
-                  rowData={addedMsgs()}
-                  columnDefs={[
-                    {
-                      field: "msg",
-                      flex: 2,
-                      checkboxSelection: true,
-                      filter: "agTextColumnFilter",
-                    },
-                    { field: "count", flex: 1, sortable: true },
-                  ]}
-                  rowSelection="multiple"
-                  suppressRowClickSelection={true}
-                  onSelectionChanged={handleLogsSelectionChanged}
-                  getRowStyle={getRowStyle}
-                />
+                <AgGridSolid ref={addedMsgsGridRef} {...addedLogsGridOptions} />
               </div>
             </Grid>
             <Grid item xs={6}>
@@ -158,21 +161,7 @@ function Filters(props: FiltersProps) {
                   : ""}
               </Typography>
               <div style={{ height: "350px" }} class="ag-theme-alpine">
-                <AgGridSolid
-                  ref={removedMsgs}
-                  enableCellTextSelection={true}
-                  rowData={removedMsgs()}
-                  columnDefs={[
-                    {
-                      field: "msg",
-                      flex: 2,
-                      filter: "agTextColumnFilter",
-                    },
-                    { field: "count", flex: 1, sortable: true },
-                  ]}
-                  suppressRowClickSelection={true}
-                  getRowStyle={getRowStyle}
-                />
+                <AgGridSolid {...removedLogsGridOptions} />
               </div>
             </Grid>
           </Grid>

src/components/filters/useViewModel.test.tsx

@@ -1,22 +1,24 @@
 import { createRoot } from "solid-js";
-import useViewModel, { FiltersProps } from "./useViewModel";
+import useViewModel from "./useViewModel";
+import type { FiltersData, FiltersProps } from "./useViewModel";
 import comparer from "../../models/comparer";
 import Processor from "../../models/processor";
+import type { GroupedMsg } from "../../models/processor";
 
 describe("useViewModel", () => {
-  const topLogs = [
+  const topLogs: GroupedMsg[] = [
     {
-      count: 3,
+      logs: [{}, {}, {}],
       hasErrors: false,
       msg: "grp1",
     },
     {
-      count: 1,
+      logs: [{}],
       hasErrors: true,
       msg: "grp2",
     },
     {
-      count: 2,
+      logs: [{}, {}],
       hasErrors: true,
       msg: "grp3",
     },
@@ -25,22 +27,22 @@ describe("useViewModel", () => {
   comparer.removed = [topLogs[0], topLogs[2]];
   comparer.added = [
     {
-      count: 5,
+      logs: [{}, {}, {}, {}, {}],
       hasErrors: false,
       msg: "grp11",
     },
     {
-      count: 2,
+      logs: [{}, {}],
       hasErrors: true,
       msg: "grp22",
     },
   ];
 
-  const defaultFilters = {
+  const defaultFilters: FiltersData = {
     startTime: "",
     endTime: "",
     regex: "",
-    msgs: [],
+    logs: [],
     errorsOnly: false,
   };
 
@@ -76,7 +78,7 @@ describe("useViewModel", () => {
   test("handleFiltersChange", () => {
     createRoot((dispose) => {
       const vm = useViewModel(props);
-      vm.setFilters("msgs", ["some log"]);
+      vm.setFilters("logs", [{}]);
       vm.handleFiltersChange();
       expect(props.onFiltersChange, "onFiltersChange").toBeCalledWith(
         vm.filters
@@ -101,7 +103,7 @@ describe("useViewModel", () => {
         startTime: "some start time",
         endTime: "some end time",
         regex: "some regex",
-        msgs: ["log1", "log2"],
+        logs: [{}, {}],
         errorsOnly: true,
       }));
       expect(vm.filters.regex, "regex").toEqual("some regex");
@@ -123,8 +125,8 @@ describe("useViewModel", () => {
 
   test("handleLogsSelectionChanged", () => {
     createRoot((dispose) => {
-      const rows = [{ msg: "log1" }, { msg: "log2" }];
-      const msgs = rows.map((r) => r.msg);
+      const rows = [{ logs: [{}, {}] }, { logs: [{}] }];
+      const logs = rows.flatMap((r) => r.logs);
       const selectionEvent = {
         api: {
           getSelectedRows: () => rows,
@@ -134,10 +136,10 @@ describe("useViewModel", () => {
       const vm = useViewModel(props);
       vm.handleLogsSelectionChanged(selectionEvent as any);
 
-      expect(vm.filters.msgs, "filters.msgs").toEqual(msgs);
+      expect(vm.filters.logs, "filters.msgs").toEqual(logs);
       expect(props.onFiltersChange, "onFiltersChange").toBeCalledWith({
         ...defaultFilters,
-        msgs,
+        logs,
       });
 
       dispose();

src/components/filters/useViewModel.tsx

@@ -1,6 +1,6 @@
 import { createSignal } from "solid-js";
 import { createStore } from "solid-js/store";
-import type { GroupedMsg } from "../../models/processor";
+import type { GroupedMsg, JSONLogs } from "../../models/processor";
 import { SelectionChangedEvent } from "ag-grid-community";
 import { type AgGridSolidRef } from "ag-grid-solid";
 import comparer from "../../models/comparer";
@@ -13,7 +13,7 @@ interface FiltersData {
   startTime: string;
   endTime: string;
   regex: string;
-  msgs: string[];
+  logs: JSONLogs;
   errorsOnly: boolean;
 }
 
@@ -22,7 +22,7 @@ function defaultFilters(): FiltersData {
     startTime: "",
     endTime: "",
     regex: "",
-    msgs: [],
+    logs: [],
     errorsOnly: false,
   };
 }
@@ -53,8 +53,8 @@ function useViewModel(props: FiltersProps) {
 
   function handleLogsSelectionChanged(e: SelectionChangedEvent<GroupedMsg>) {
     setFilters(
-      "msgs",
-      e.api.getSelectedRows().map((n) => n.msg)
+      "logs",
+      e.api.getSelectedRows().flatMap((n) => n.logs)
     );
     handleFiltersChange();
   }

src/models/comparer.test.ts

@@ -12,9 +12,9 @@ describe("addProcessor", () => {
 
   const processor1 = new Processor();
   processor1.topLogsMap = new Map<string, GroupedMsg>([
-    ["grp1", { count: 2, hasErrors: false, msg: "grp1" }],
-    ["grp2", { count: 6, hasErrors: false, msg: "grp2" }],
-    ["grp3", { count: 4, hasErrors: false, msg: "grp3" }],
+    ["grp1", { logs: [], hasErrors: false, msg: "grp1" }],
+    ["grp2", { logs: [], hasErrors: false, msg: "grp2" }],
+    ["grp3", { logs: [], hasErrors: false, msg: "grp3" }],
   ]);
 
   test("1st processor", () => {
@@ -29,9 +29,9 @@ describe("addProcessor", () => {
 
   const processor2 = new Processor();
   processor2.topLogsMap = new Map<string, GroupedMsg>([
-    ["grp11", { count: 7, hasErrors: false, msg: "grp11" }],
+    ["grp11", { logs: [], hasErrors: false, msg: "grp11" }],
     ["grp2", processor1.topLogsMap.get("grp2")!],
-    ["grp44", { count: 3, hasErrors: false, msg: "grp44" }],
+    ["grp44", { logs: [], hasErrors: false, msg: "grp44" }],
     ["grp3", processor1.topLogsMap.get("grp3")!],
   ]);