select first N and last N summary logs (#11)

Author: vish9812

ui/src/components/filters/index.tsx

@@ -120,6 +120,12 @@ function Filters(props: FiltersProps) {
     }
   }
 
+  function handleNLogsEnter(e: KeyboardEvent) {
+    if (e.key === "Enter") {
+      handleLogsSelectionChanged(gridsRefs);
+    }
+  }
+
   function getSimpleSearchHTML(term: SearchTerm, i: Accessor<number>) {
     return (
       <>
@@ -207,6 +213,23 @@ function Filters(props: FiltersProps) {
             label="Errors Only"
             labelPlacement="start"
           />
+          <Divider orientation="vertical" flexItem></Divider>
+          <TextField
+            label="First N Logs"
+            value={filters.firstN}
+            onChange={(_, val) =>
+              setFilters("firstN", isNaN(+val) || +val < 0 ? 0 : +val)
+            }
+            onKeyDown={handleNLogsEnter}
+          />
+          <TextField
+            label="Last N Logs"
+            value={filters.lastN}
+            onChange={(_, val) =>
+              setFilters("lastN", isNaN(+val) || +val < 0 ? 0 : +val)
+            }
+            onKeyDown={handleNLogsEnter}
+          />
         </Stack>
       </Grid>
       <Grid item xs={12} container spacing={2}>

ui/src/components/filters/useViewModel.tsx

@@ -30,6 +30,8 @@ interface FiltersData {
   terms: SearchTerm[];
   logs: JSONLogs;
   errorsOnly: boolean;
+  firstN: number;
+  lastN: number;
 }
 
 function defaultFilters(): FiltersData {
@@ -46,6 +48,8 @@ function defaultFilters(): FiltersData {
     ],
     logs: [],
     errorsOnly: false,
+    firstN: 0,
+    lastN: 0,
   };
 }
 
@@ -102,7 +106,17 @@ function useViewModel(props: FiltersProps) {
 
     function populateMap(gridRef: AgGridSolidRef) {
       for (const r of gridRef.api.getSelectedRows() as GroupedMsg[]) {
-        r.logs.forEach((l) => map.set(l[LogData.logKeys.id], l));
+        let nLogs: JSONLogs = [];
+        if (filters.firstN) {
+          nLogs = r.logs.slice(0, filters.firstN);
+        }
+        if (filters.lastN) {
+          nLogs = [...nLogs, ...r.logs.slice(-filters.lastN)];
+        }
+
+        if (!nLogs.length) nLogs = r.logs;
+
+        nLogs.forEach((l) => map.set(l[LogData.logKeys.id], l));
       }
     }
   }