feat: Click on Table Tile to view all events (#139)

.changeset/unlucky-timers-exercise.md

@@ -0,0 +1,5 @@
+---
+'@hyperdx/app': patch
+---
+
+Click on Table Tile to view all events

packages/app/src/HDXTableChart.tsx

@@ -5,19 +5,21 @@ import {
   useReactTable,
 } from '@tanstack/react-table';
 import { useVirtualizer } from '@tanstack/react-virtual';
-import { useCallback, useRef, memo } from 'react';
+import { useCallback, useRef, useMemo, memo } from 'react';
 import cx from 'classnames';
 import { UNDEFINED_WIDTH } from './tableUtils';
-
+import { useRouter } from 'next/router';
 import api from './api';
 import { AggFn } from './ChartUtils';
 
 const Table = ({
   data,
   valueColumnName,
+  onRowClick,
 }: {
   data: any[];
   valueColumnName: string;
+  onRowClick?: (row: any) => void;
 }) => {
   //we need a reference to the scrolling element for logic down below
   const tableContainerRef = useRef<HTMLDivElement>(null);
@@ -149,10 +151,8 @@ const Table = ({
             const row = rows[virtualRow.index] as TableRow<any>;
             return (
               <tr
-                // role="button"
-                // onClick={() => {
-                //   onRowExpandClick(row.original);
-                // }}
+                role={onRowClick ? 'button' : undefined}
+                onClick={() => onRowClick?.(row.original)}
                 key={virtualRow.key}
                 className={cx('bg-default-dark-grey-hover', {
                   // 'bg-light-grey': highlightedPatternId === row.original.id,
@@ -241,6 +241,21 @@ const HDXTableChart = memo(
 
     const valueColumnName = aggFn === 'count' ? 'Count' : `${aggFn}(${field})`;
 
+    const router = useRouter();
+    const handleRowClick = useMemo(() => {
+      if (table !== 'logs') {
+        return undefined;
+      }
+      return (row?: { group: string }) => {
+        const qparams = new URLSearchParams({
+          q: where + (groupBy ? ` ${groupBy}:${row?.group || '*'}` : ''),
+          from: `${dateRange[0].getTime()}`,
+          to: `${dateRange[1].getTime()}`,
+        });
+        router.push(`/search?${qparams.toString()}`);
+      };
+    }, [dateRange, groupBy, router, table, where]);
+
     return isLoading ? (
       <div className="d-flex h-100 w-100 align-items-center justify-content-center text-muted">
         Loading Chart Data...
@@ -255,7 +270,11 @@ const HDXTableChart = memo(
       </div>
     ) : (
       <div className="d-flex align-items-center justify-content-center fs-2 h-100">
-        <Table data={data?.data ?? []} valueColumnName={valueColumnName} />
+        <Table
+          data={data?.data ?? []}
+          valueColumnName={valueColumnName}
+          onRowClick={handleRowClick}
+        />
       </div>
     );
   },