feat(events): add event search

api-contracts/openapi/components/schemas/_index.yaml

@@ -36,6 +36,8 @@ EventOrderByField:
   $ref: "./event.yaml#/EventOrderByField"
 EventOrderByDirection:
   $ref: "./event.yaml#/EventOrderByDirection"
+EventSearch:
+  $ref: "./event.yaml#/EventSearch"
 EventKeyList:
   $ref: "./event.yaml#/EventKeyList"
 EventKey:

api-contracts/openapi/components/schemas/event.yaml

@@ -91,3 +91,6 @@ EventOrderByDirection:
   enum:
     - asc
     - desc
+
+EventSearch:
+  type: string

api-contracts/openapi/paths/event/event.yaml

@@ -35,6 +35,12 @@ withTenant:
           type: array
           items:
             $ref: "../../components/schemas/_index.yaml#/EventKey"
+      - description: The search query to filter for
+        in: query
+        name: search
+        required: false
+        schema:
+          $ref: "../../components/schemas/_index.yaml#/EventSearch"
       - description: What to order by
         in: query
         name: orderByField

api/v1/server/handlers/events/list.go

@@ -22,6 +22,10 @@ func (t *EventService) EventList(ctx echo.Context, request gen.EventListRequestO
 		Offset: &offset,
 	}
 
+	if request.Params.Search != nil {
+		listOpts.Search = request.Params.Search
+	}
+
 	if request.Params.Keys != nil {
 		listOpts.Keys = *request.Params.Keys
 	}

frontend/app/src/components/molecules/data-table/data-table-toolbar.tsx

@@ -5,6 +5,7 @@ import { Button } from '@/components/ui/button';
 import { DataTableViewOptions } from './data-table-view-options';
 
 import { DataTableFacetedFilter } from './data-table-faceted-filter';
+import { Input } from '@/components/ui/input.tsx';
 
 export interface FilterOption {
   label: string;
@@ -22,26 +23,28 @@ interface DataTableToolbarProps<TData> {
   table: Table<TData>;
   filters: ToolbarFilters;
   actions: JSX.Element[];
+  setSearch?: (search: string) => void;
+  search?: string;
 }
 
 export function DataTableToolbar<TData>({
   table,
   filters,
   actions,
+  setSearch,
+  search,
 }: DataTableToolbarProps<TData>) {
   const isFiltered = table.getState().columnFilters.length > 0;
 
   return (
     <div className="flex items-center justify-between">
       <div className="flex flex-1 items-center space-x-2">
-        {/* <Input
-          placeholder="Filter tasks..."
-          value={(table.getColumn("title")?.getFilterValue() as string) ?? ""}
-          onChange={(event) =>
-            table.getColumn("title")?.setFilterValue(event.target.value)
-          }
+        <Input
+          placeholder="Search for tasks..."
+          value={search}
+          onChange={(e) => setSearch && setSearch(e.target.value)}
           className="h-8 w-[150px] lg:w-[250px]"
-        /> */}
+        />
         {filters.map(
           (filter) =>
             table.getColumn(filter.columnId) && (

frontend/app/src/components/molecules/data-table/data-table.tsx

@@ -48,6 +48,8 @@ interface DataTableProps<TData extends IDGetter, TValue> {
   actions?: JSX.Element[];
   sorting?: SortingState;
   setSorting?: OnChangeFn<SortingState>;
+  setSearch?: (search: string) => void;
+  search?: string;
   columnFilters?: ColumnFiltersState;
   setColumnFilters?: OnChangeFn<ColumnFiltersState>;
   pagination?: PaginationState;
@@ -76,6 +78,8 @@ export function DataTable<TData extends IDGetter, TValue>({
   actions = [],
   sorting,
   setSorting,
+  setSearch,
+  search,
   columnFilters,
   setColumnFilters,
   pagination,
@@ -90,7 +94,7 @@ export function DataTable<TData extends IDGetter, TValue>({
   getRowId,
 }: DataTableProps<TData, TValue>) {
   const tableData = React.useMemo(
-    () => (isLoading ? Array(10).fill({}) : data),
+    () => (isLoading ? Array(10).fill({ metadata: {} }) : data),
     [isLoading, data],
   );
 
@@ -160,7 +164,13 @@ export function DataTable<TData extends IDGetter, TValue>({
   return (
     <div className="space-y-4">
       {filters && filters.length > 0 && (
-        <DataTableToolbar table={table} filters={filters} actions={actions} />
+        <DataTableToolbar
+          table={table}
+          filters={filters}
+          actions={actions}
+          search={search}
+          setSearch={setSearch}
+        />
       )}
       <div className="rounded-md border">
         <Table>

frontend/app/src/lib/api/generated/Api.ts

@@ -19,6 +19,7 @@ import {
   EventList,
   EventOrderByDirection,
   EventOrderByField,
+  EventSearch,
   ReplayEventRequest,
   Tenant,
   User,
@@ -165,6 +166,8 @@ export class Api<SecurityDataType = unknown> extends HttpClient<SecurityDataType
       limit?: number;
       /** A list of keys to filter by */
       keys?: EventKey[];
+      /** The search query to filter for */
+      search?: EventSearch;
       /** What to order by */
       orderByField?: EventOrderByField;
       /** The order direction */

frontend/app/src/lib/api/generated/data-contracts.ts

@@ -217,6 +217,8 @@ export enum EventOrderByDirection {
   Desc = "desc",
 }
 
+export type EventSearch = string;
+
 export interface EventKeyList {
   pagination?: PaginationResponse;
   rows?: EventKey[];

frontend/app/src/pages/main/events/index.tsx

@@ -78,6 +78,7 @@ function EventsTable() {
     }
   }, [selectedEvent, searchParams, setSearchParams]);
 
+  const [search, setSearch] = useState<string | undefined>(undefined);
   const [sorting, setSorting] = useState<SortingState>([]);
   const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
   const [pagination, setPagination] = useState<PaginationState>({
@@ -134,6 +135,7 @@ function EventsTable() {
       orderByDirection,
       offset,
       limit: pageSize,
+      search,
     }),
   });
 
@@ -170,10 +172,6 @@ function EventsTable() {
   //   }
   // }, [listEventsQuery.data?.pagination]);
 
-  if (listEventsQuery.isLoading) {
-    return <Loading />;
-  }
-
   const tableColumns = columns({
     onRowClick: (row: Event) => {
       setSelectedEvent(row);
@@ -225,6 +223,7 @@ function EventsTable() {
         {selectedEvent && <ExpandedEventContent event={selectedEvent} />}
       </Dialog>
       <DataTable
+        isLoading={listEventsQuery.isLoading}
         columns={tableColumns}
         data={listEventsQuery.data?.rows || []}
         filters={[
@@ -237,6 +236,8 @@ function EventsTable() {
         actions={actions}
         sorting={sorting}
         setSorting={setSorting}
+        search={search}
+        setSearch={setSearch}
         columnFilters={columnFilters}
         setColumnFilters={setColumnFilters}
         pagination={pagination}

internal/repository/event.go

@@ -29,6 +29,9 @@ type ListEventOpts struct {
 	// (optional) number of events to return
 	Limit *int
 
+	// (optional) a search query
+	Search *string
+
 	// (optional) the event that this event is replaying
 	ReplayedEvent *string `validate:"omitempty,uuid"`
 

internal/repository/prisma/dbsqlc/events.sql

@@ -12,13 +12,13 @@ WHERE
 
 -- name: ListEvents :many
 SELECT
-    sqlc.embed(events), 
+    sqlc.embed(events),
     sum(case when runs."status" = 'PENDING' then 1 else 0 end) AS pendingRuns,
     sum(case when runs."status" = 'RUNNING' then 1 else 0 end) AS runningRuns,
     sum(case when runs."status" = 'SUCCEEDED' then 1 else 0 end) AS succeededRuns,
     sum(case when runs."status" = 'FAILED' then 1 else 0 end) AS failedRuns
 FROM
-    "Event" as events 
+    "Event" as events
 LEFT JOIN
     "WorkflowRunTriggeredBy" as runTriggers ON events."id" = runTriggers."eventId"
 LEFT JOIN
@@ -28,7 +28,11 @@ WHERE
     (
         sqlc.narg('keys')::text[] IS NULL OR
         events."key" = ANY(sqlc.narg('keys')::text[])
-    )
+    ) AND
+    (
+        sqlc.narg('search') IS NULL OR
+        events."data" = sqlc.narg('search') -- TODO!!
+      )
 GROUP BY
     events."id"
 ORDER BY
@@ -50,4 +54,4 @@ WHERE
 GROUP BY
     event_hour
 ORDER BY
-    event_hour;
+    event_hour;