add context

vish9812 · Nov 3, 2023 · 3cdeffe · 3cdeffe
1 parent ec6ead5
commit 3cdeffe
Show file tree

Hide file tree

Showing 7 changed files with 252 additions and 54 deletions.
diff --git a/src/analyzer/gridService.ts b/src/analyzer/gridService.ts
@@ -1,5 +1,6 @@
 import type { ICellRendererParams, ColDef } from "ag-grid-community";
 import JSONCellRenderer from "../components/jsonCellRenderer";
+import FullDataCellRenderer from "../components/fullDataCellRenderer";
 import Processor from "../models/processor";
 
 const defaultColDef: ColDef = {
@@ -10,17 +11,21 @@ const defaultColDef: ColDef = {
 
 function defaultCols(): ColDef[] {
   return [
+    {
+      field: Processor.logKeys.id,
+      width: 100,
+      sortable: true,
+      sort: "asc",
+      sortingOrder: ["asc", "desc"],
+    },
     {
       field: Processor.logKeys.fullData,
-      cellRenderer: JSONCellRenderer,
+      cellRenderer: FullDataCellRenderer,
       flex: 2,
     },
     {
-      field: "timestamp",
+      field: Processor.logKeys.timestamp,
       width: 270,
-      sortable: true,
-      sort: "asc",
-      sortingOrder: ["asc", "desc"],
     },
   ];
 }
@@ -34,7 +39,7 @@ function getCol(field: string): ColDef {
   return {
     field: field,
     flex: 0.75,
-    cellRenderer: (params: ICellRendererParams<any, any, any>) => {
+    cellRenderer: (params: ICellRendererParams) => {
       const val =
         typeof params.value === "object"
           ? JSONCellRenderer(params)

diff --git a/src/analyzer/index.tsx b/src/analyzer/index.tsx
@@ -5,7 +5,7 @@ import Filters from "../components/filters";
 import gridService from "./gridService";
 import comparer from "../models/comparer";
 import { Select, createOptions } from "@thisbeyond/solid-select";
-import type { RowStyle, RowClassParams } from "ag-grid-community";
+import type { GridOptions } from "ag-grid-community";
 import Processor, { type JSONLog } from "../models/processor";
 
 function Analyzer() {
@@ -21,13 +21,24 @@ function Analyzer() {
     setInitialCols,
     timeJumps,
     handleTimeJump,
+    handleContextClick,
   } = useViewModel();
 
-  function getRowStyle(params: RowClassParams<JSONLog>): RowStyle | undefined {
-    return params.data && Processor.isErrorLog(params.data)
-      ? { background: "#FFBFBF" }
-      : undefined;
-  }
+  const gridOptions = (): GridOptions<JSONLog> => ({
+    enableCellTextSelection: true,
+    suppressMaintainUnsortedOrder: true,
+    defaultColDef: gridService.defaultColDef,
+    context: {
+      handleContextClick,
+    },
+    rowData: rows(),
+    columnDefs: cols(),
+    getRowId: (params) => params.data.id,
+    getRowStyle: (params) =>
+      params.data && Processor.isErrorLog(params.data)
+        ? { background: "#FFBFBF" }
+        : undefined,
+  });
 
   return (
     <Grid container spacing={2}>
@@ -93,16 +104,8 @@ function Analyzer() {
           </Grid>
         </Grid>
         <Grid item xs={12}>
-          <div style={{ height: "750px" }} class="ag-theme-alpine">
-            <AgGridSolid
-              ref={gridRef}
-              defaultColDef={gridService.defaultColDef}
-              rowData={rows()}
-              columnDefs={cols()}
-              getRowId={(params) => params.data.id}
-              getRowStyle={getRowStyle}
-              enableCellTextSelection={true}
-            />
+          <div style={{ height: "900px" }} class="ag-theme-alpine">
+            <AgGridSolid ref={gridRef} {...gridOptions()} />
           </div>
         </Grid>
       </Grid>

diff --git a/src/analyzer/useViewModel.test.tsx b/src/analyzer/useViewModel.test.tsx
@@ -320,4 +320,107 @@ describe("useViewModel", () => {
       });
     });
   });
+
+  test("handleContextClick", () => {
+    createRoot((dispose) => {
+      comparer.last().logs = [
+        {
+          [Processor.logKeys.id]: "0",
+          [Processor.logKeys.fullData]: "msg a",
+        },
+        {
+          [Processor.logKeys.id]: "1",
+          [Processor.logKeys.fullData]: "test b",
+        },
+        {
+          [Processor.logKeys.id]: "2",
+          [Processor.logKeys.fullData]: "msg c",
+        },
+        {
+          [Processor.logKeys.id]: "3",
+          [Processor.logKeys.fullData]: "test d",
+        },
+        {
+          [Processor.logKeys.id]: "4",
+          [Processor.logKeys.fullData]: "msg e",
+        },
+        {
+          [Processor.logKeys.id]: "5",
+          [Processor.logKeys.fullData]: "test f",
+        },
+        {
+          [Processor.logKeys.id]: "6",
+          [Processor.logKeys.fullData]: "msg g",
+        },
+        {
+          [Processor.logKeys.id]: "7",
+          [Processor.logKeys.fullData]: "test h",
+        },
+        {
+          [Processor.logKeys.id]: "8",
+          [Processor.logKeys.fullData]: "msg i",
+        },
+      ];
+
+      const vm = useViewModel();
+      const filtersData: FiltersData = {
+        regex: "test",
+        logs: [],
+      } as any;
+      vm.handleFiltersChange(filtersData);
+      expect(vm.rows(), "rows: test filtered").toEqual([
+        comparer.last().logs[1],
+        comparer.last().logs[3],
+        comparer.last().logs[5],
+        comparer.last().logs[7],
+      ]);
+
+      const gridApi = {
+        getRowNode: (i: number): boolean =>
+          vm.rows().includes(comparer.last().logs[i]),
+      };
+
+      vm.handleContextClick(gridApi as any, 1);
+
+      expect(vm.rows(), "rows: logID 1").toEqual([
+        comparer.last().logs[1],
+        comparer.last().logs[3],
+        comparer.last().logs[5],
+        comparer.last().logs[7],
+        comparer.last().logs[0],
+        comparer.last().logs[2],
+        comparer.last().logs[4],
+        comparer.last().logs[6],
+      ]);
+
+      vm.handleContextClick(gridApi as any, 1);
+
+      expect(vm.rows(), "rows: logID 1 again: no change").toEqual([
+        comparer.last().logs[1],
+        comparer.last().logs[3],
+        comparer.last().logs[5],
+        comparer.last().logs[7],
+        comparer.last().logs[0],
+        comparer.last().logs[2],
+        comparer.last().logs[4],
+        comparer.last().logs[6],
+      ]);
+
+      vm.handleContextClick(gridApi as any, 7);
+
+      expect(vm.rows(), "rows: logID 7").toEqual([
+        comparer.last().logs[1],
+        comparer.last().logs[3],
+        comparer.last().logs[5],
+        comparer.last().logs[7],
+        comparer.last().logs[0],
+        comparer.last().logs[2],
+        comparer.last().logs[4],
+        comparer.last().logs[6],
+        comparer.last().logs[8],
+      ]);
+
+      dispose();
+    });
+  });
 });
diff --git a/src/analyzer/useViewModel.tsx b/src/analyzer/useViewModel.tsx
@@ -10,6 +10,7 @@ import filesUtils from "../utils/files";
 import gridService from "./gridService";
 import timesUtils from "../utils/times";
 import { AgGridSolidRef } from "ag-grid-solid";
+import type { GridApi } from "ag-grid-community";
 
 let zeroJump: string;
 let prevJumps: string[] = [];
@@ -139,6 +140,22 @@ function useViewModel() {
     }));
   }
 
+  function handleContextClick(gridApi: GridApi, logID: number) {
+    const contextLogs: JSONLogs = [];
+    const limit = 5;
+    const currIdx = logID;
+    const firstIdx = Math.max(currIdx - limit, 0);
+    const lastIdx = Math.min(currIdx + limit, comparer.last().logs.length - 1);
+
+    for (let i = firstIdx; i <= lastIdx; i++) {
+      if (!gridApi.getRowNode(i.toString())) {
+        contextLogs.push(comparer.last().logs[i]);
+      }
+    }
+
+    setRows((pre) => [...pre, ...contextLogs]);
+  }
+
   return {
     handleFiltersChange,
     handleColsChange,
@@ -149,6 +166,7 @@ function useViewModel() {
     setInitialCols,
     timeJumps,
     handleTimeJump,
+    handleContextClick,
   };
 }
 

diff --git a/src/components/fullDataCellRenderer/index.tsx b/src/components/fullDataCellRenderer/index.tsx
@@ -0,0 +1,20 @@
+import type { ICellRendererParams } from "ag-grid-community";
+import JSONCellRenderer from "../jsonCellRenderer";
+import { Button } from "@suid/material";
+
+function FullDataCellRenderer(props: ICellRendererParams) {
+  return (
+    <>
+      {JSONCellRenderer(props)}
+      <Button
+        onClick={() =>
+          props.context.handleContextClick(props.api, props.data.id)
+        }
+      >
+        Context
+      </Button>
+    </>
+  );
+}
+
+export default FullDataCellRenderer;