Add global events filter (#5788)

* add event filter

* update main view

* remove search

* update filters query and components

* handle boolean filter

* handle dropdown and array

* add all filters

* handle overflow and fix filter list

* enable filters in query

* fix filter as array

* fix brancehs choices

* add event types

* update query

* fix query

* fix group events

* fix group event for node events

* improve display label hook and update link to all activities

* add enabled props

* rename

* update text

* update filter modal position

* update query fn

* update filter style

* update test

* update test

* fix test

Author: pa-lem

frontend/app/src/entities/events/api/get-events-from-api.ts

@@ -1,9 +1,48 @@
 import graphqlClient from "@/shared/api/graphql/graphqlClientApollo";
 import { gql } from "@apollo/client";
+import { EventType } from "../ui/event";
+import { INFRAHUB_EVENT } from "../utils/constants";
+
+export type GlobalEventsFilters = {
+  hasChildren?: boolean;
+  eventType?: Array<string>;
+  primaryNodeIds?: Array<string>;
+  relatedNodeIds?: Array<string>;
+  parentIds?: Array<string>;
+  accountIds?: Array<string>;
+  since?: Date;
+  until?: Date;
+  offset?: number;
+  limit?: number;
+};
 
 const EVENTS_QUERY = gql`
-  query GET_ACTIVITIES($ids: [String!], $offset: Int, $limit: Int) {
-    InfrahubEvent(related_node__ids: $ids, offset: $offset, limit: $limit) {
+  query GET_ACTIVITIES(
+    $hasChildren: Boolean
+    $branches: [String!]
+    $eventType: [String!]
+    $primaryNodeIds: [String!]
+    $relatedNodeIds: [String!]
+    $parentIds: [String!]
+    $accountIds: [String!]
+    $since: DateTime
+    $until: DateTime
+    $offset: Int
+    $limit: Int
+  ) {
+    InfrahubEvent(
+      has_children: $hasChildren
+      branches: $branches
+      event_type: $eventType
+      primary_node__ids: $primaryNodeIds
+      related_node__ids: $relatedNodeIds
+      parent__ids: $parentIds
+      account__ids: $accountIds
+      since: $since
+      until: $until
+      offset: $offset
+      limit: $limit
+    ) {
       count
       edges {
         node {
@@ -17,6 +56,11 @@ const EVENTS_QUERY = gql`
             id
             kind
           }
+          related_nodes {
+            id
+            kind
+          }
+          has_children
           __typename
           ... on NodeMutatedEvent {
             attributes {
@@ -34,32 +78,30 @@ const EVENTS_QUERY = gql`
   }
 `;
 
-export function getEventsFromApi({
-  ids,
-  offset,
-  limit,
-  search,
+export async function getEventsFromApi({
   branchName,
   atDate,
-}: {
-  ids?: Array<string | undefined>;
-  offset?: number;
-  limit?: number;
-  search?: string;
-  branchName: string;
-  atDate: Date | null;
-}) {
-  return graphqlClient.query({
+  ...filters
+}: GlobalEventsFilters & { branchName?: string; atDate?: Date | null }) {
+  const { data } = await graphqlClient.query({
     query: EVENTS_QUERY,
     variables: {
-      ids,
-      offset,
-      limit,
-      search,
+      ...filters,
     },
     context: {
       branch: branchName,
       date: atDate,
     },
   });
+
+  const activities: EventType[] = data?.[INFRAHUB_EVENT]?.edges?.map((edge) => {
+    return edge.node;
+  });
+
+  const count = data?.data?.[INFRAHUB_EVENT]?.count;
+
+  return {
+    activities,
+    count,
+  };
 }

frontend/app/src/entities/events/api/get-events.query.ts

@@ -2,51 +2,24 @@ import { getCurrentBranchName } from "@/entities/branches/domain/get-current-bra
 import { store } from "@/shared/stores";
 import { datetimeAtom } from "@/shared/stores/time.atom";
 import { queryOptions, useQuery } from "@tanstack/react-query";
-import { EventType } from "../ui/event";
-import { INFRAHUB_EVENT } from "../utils/constants";
-import { getEventsFromApi } from "./get-events-from-api";
+import { GlobalEventsFilters, getEventsFromApi } from "./get-events-from-api";
 
-export function getEventsQueryOptions({
-  ids,
-  offset,
-  limit,
-  search,
-}: { ids?: Array<string | undefined>; offset?: number; limit?: number; search?: string }) {
+export function getEventsQueryOptions(filters: GlobalEventsFilters) {
   const currentBranchName = getCurrentBranchName();
   const timeMachineDate = store.get(datetimeAtom);
 
   return queryOptions({
-    queryKey: ["events", ids, offset, limit, search],
+    queryKey: ["events", filters],
     queryFn: () => {
       return getEventsFromApi({
-        ids,
-        offset,
-        limit,
-        search,
+        ...filters,
         branchName: currentBranchName,
         atDate: timeMachineDate,
       });
     },
   });
 }
 
-export const useEvents = ({
-  ids = [],
-  offset,
-  limit,
-  search,
-}: { ids?: Array<string | undefined>; offset?: number; limit?: number; search?: string }) => {
-  const { data } = useQuery(getEventsQueryOptions({ ids, offset, limit, search }));
-
-  const activities: EventType[] = data?.data?.[INFRAHUB_EVENT]?.edges?.map((edge) => {
-    return edge.node;
-  });
-
-  const count = data?.data?.[INFRAHUB_EVENT]?.count;
-
-  return {
-    ...useQuery(getEventsQueryOptions({ ids, offset, limit, search })),
-    data: activities,
-    count,
-  };
+export const useEvents = (filters: GlobalEventsFilters) => {
+  return useQuery(getEventsQueryOptions(filters));
 };

frontend/app/src/entities/events/ui/event.tsx

@@ -1,7 +1,7 @@
 import { EventNodeInterface, NodeMutatedEvent } from "@/shared/api/graphql/generated/graphql";
 import { DateDisplay } from "@/shared/components/display/date-display";
 
-import { DisplayLabel } from "@/entities/nodes/object/ui/display-label";
+import { NodeLabel } from "@/entities/nodes/object/ui/display-label";
 import { PropertyRow } from "@/entities/schema/ui/styled";
 import { CopyToClipboard } from "@/shared/components/buttons/copy-to-clipboard";
 import { Popover, PopoverContent, PopoverTrigger } from "@/shared/components/ui/popover";
@@ -11,9 +11,11 @@ import {
   BRANCH_DELETED_EVENT,
   BRANCH_EVENTS,
   BRANCH_REBASEDED_EVENT,
+  GROUP_EVENTS,
   NODE_MUTATED_EVENT,
 } from "../utils/constants";
 import { BranchEvent } from "./branch-event";
+import { GroupEvent } from "./group-event";
 import { EventAttributes, NodeEvent } from "./node-event";
 
 export type BranchEventType = EventNodeInterface & {
@@ -42,7 +44,7 @@ export const EventDetails = ({ id, event, occurred_at, account_id, ...props }: E
       />
       <PropertyRow title="Event" value={event} />
       <PropertyRow title="Occured at" value={<DateDisplay date={occurred_at} />} />
-      {account_id && <PropertyRow title="Account" value={<DisplayLabel id={account_id} />} />}
+      {account_id && <PropertyRow title="Account" value={<NodeLabel id={account_id} />} />}
       {"attributes" in props && (
         <PropertyRow title="Changes" value={<EventAttributes attributes={props.attributes} />} />
       )}
@@ -63,6 +65,8 @@ export const Event = ({ __typename, ...props }: EventType) => {
 
           {BRANCH_EVENTS.includes(__typename) && <BranchEvent {...props} />}
 
+          {GROUP_EVENTS.includes(__typename) && <GroupEvent {...props} />}
+
           <div className="flex justify-between">
             <div className="text-xs font-medium text-gray-500 dark:text-neutral-400">
               <DateDisplay date={props.occurred_at} />

frontend/app/src/entities/events/ui/global-events-filters.tsx

@@ -0,0 +1,108 @@
+import { branchesState } from "@/entities/branches/stores";
+import { ScrollArea } from "@/shared/components/ui/scroll-area";
+import { useAtomValue } from "jotai";
+import { TagGroup, TagList } from "react-aria-components";
+import { GlobalFilter } from "./global-filter";
+
+export const GlobalEventsFilters = () => {
+  const branches = useAtomValue(branchesState);
+
+  const FILTERS = [
+    {
+      name: "hasChildren",
+      label: "Has Children",
+      fieldSchema: {
+        kind: "Boolean",
+      },
+    },
+    {
+      name: "branches",
+      label: "Branch",
+      fieldSchema: {
+        kind: "Dropdown",
+        choices: branches.map((branch) => {
+          return {
+            label: branch.name,
+            name: branch.name,
+          };
+        }),
+      },
+    },
+    {
+      name: "eventType",
+      label: "Event Type",
+      fieldSchema: {
+        kind: "Dropdown",
+        choices: [
+          {
+            label: "Node updated",
+            name: "NodeMutatedEvent",
+          },
+          {
+            label: "Branch created",
+            name: "BranchCreatedEvent",
+          },
+          {
+            label: "Branch updated",
+            name: "BranchUpdatedEvent",
+          },
+          {
+            label: "Branch rebased",
+            name: "BranchRebasedEvent",
+          },
+          {
+            label: "Standard event",
+            name: "StandardEvent",
+          },
+        ],
+      },
+    },
+    {
+      name: "primaryNodeIds",
+      label: "Primary Node",
+      fieldSchema: {
+        peer: "CoreNode",
+      },
+    },
+    {
+      name: "relatedNodeIds",
+      label: "Related Node",
+      fieldSchema: {
+        peer: "CoreNode",
+      },
+    },
+    {
+      name: "accountIds",
+      label: "Account",
+      fieldSchema: {
+        peer: "CoreAccount",
+      },
+    },
+    {
+      name: "since",
+      label: "Start Date",
+      fieldSchema: {
+        kind: "DateTime",
+      },
+    },
+    {
+      name: "until",
+      label: "End Date",
+      fieldSchema: {
+        kind: "DateTime",
+      },
+    },
+  ];
+
+  return (
+    <ScrollArea scrollX>
+      <TagGroup className="flex" selectionMode="single">
+        <TagList className="flex items-center gap-2 py-3">
+          {FILTERS.map((filter) => {
+            return <GlobalFilter key={filter.name} {...filter} />;
+          })}
+        </TagList>
+      </TagGroup>
+    </ScrollArea>
+  );
+};

frontend/app/src/entities/events/ui/global-events.tsx

@@ -1,19 +1,33 @@
 import { FilterResetButton } from "@/entities/nodes/object/ui/filters/filter-reset-button";
-import { FilterSearchInput } from "@/entities/nodes/object/ui/filters/filter-search-input";
 import ErrorFallback from "@/shared/components/errors/error-fallback";
 import NoDataFound from "@/shared/components/errors/no-data-found";
 import Content from "@/shared/components/layout/content";
 import { Pagination } from "@/shared/components/ui/pagination";
 import { Spinner } from "@/shared/components/ui/spinner";
+import useFilters from "@/shared/hooks/useFilters";
 import usePagination from "@/shared/hooks/usePagination";
-import { useSearch } from "@/shared/hooks/useSearch";
 import { useEvents } from "../api/get-events.query";
 import { Event } from "./global-event";
+import { GlobalEventsFilters } from "./global-events-filters";
 
 export const GlobalEvents = () => {
   const [pagination] = usePagination();
-  const [search] = useSearch();
-  const { isLoading, data, count, error, refetch } = useEvents({ ...pagination, search });
+  const [filters] = useFilters();
+
+  const queryFilters = filters.reduce((acc, filter) => {
+    if (Array.isArray(filter.value)) {
+      return {
+        ...acc,
+        [filter.name.split("__")[0]]: filter.value.map((value) => {
+          return value.id;
+        }),
+      };
+    }
+
+    return { ...acc, [filter.name.split("__")[0]]: filter.value };
+  }, {});
+
+  const { isLoading, data, error, refetch } = useEvents({ ...pagination, ...queryFilters });
 
   if (error) {
     return <ErrorFallback error={error} />;
@@ -23,21 +37,20 @@ export const GlobalEvents = () => {
     <Content.Card>
       <Content.CardTitle
         title="Activities"
-        badgeContent={count}
+        badgeContent={data?.count}
         isReloadLoading={isLoading}
         reload={() => refetch()}
       />
       <div className="flex flex-col flex-grow gap-2 p-2">
-        <div className="flex items-center">
-          <FilterSearchInput placeholder="Search an activity" />
-
-          {search.length > 0 && <FilterResetButton />}
+        <div className="flex items-center gap-2">
+          <GlobalEventsFilters />
+          {filters.length > 0 && <FilterResetButton />}
         </div>
 
         <div className="flex flex-col gap-2">
-          {!isLoading && !data?.length && <NoDataFound message="No activity found." />}
+          {!isLoading && !data?.activities?.length && <NoDataFound message="No activity found." />}
 
-          {data?.map((activity) => (
+          {data?.activities?.map((activity) => (
             <Event key={activity.id} {...activity} />
           ))}
         </div>
@@ -48,7 +61,7 @@ export const GlobalEvents = () => {
           </div>
         )}
 
-        <Pagination count={count} />
+        <Pagination count={data?.count} />
       </div>
     </Content.Card>
   );