Global activities updates and activity details page (#5806)

* 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

* rename group event to standard event and handle schema events

* get only top level events

* update display label query to be disabled

* start to have main + child events

* add enabled props

* rename

* update text

* update filter modal position

* update query fn

* update filter style

* fix last import

* udpate date in global view

* fix count

* update test

* add details page

* udpate details view

* update test

* ui

* add main branch in activities list

* fix link in global event to include branch

* fix test

* fix filter

* update group event display for remain items

* display temporary id for breadcrumb

* add infinite query

* fix node events

* update breadcrumb

* udpate use events filters

* rename file

* update ui

* update accessibility

* update ui

* fix import

* handle default case for standard events

* update the way we deal with standard events

* udpate ui for global events

* lint

* prepare for futur change

* revert change

* udpate details view

* lint

* lint

* fix render on context change

* add branch context

Author: pa-lem

frontend/app/src/app/router.tsx

@@ -89,6 +89,19 @@ export const router = createBrowserRouter([
                     index: true,
                     lazy: () => import("@/pages/activities"),
                   },
+                  {
+                    path: ":activityid",
+                    lazy: () => import("@/pages/activities/details"),
+                    handle: {
+                      breadcrumb: (match: UIMatch) => {
+                        return {
+                          type: "id",
+                          value: match.params.activityid,
+                          link: "/activities",
+                        };
+                      },
+                    },
+                  },
                 ],
               },
               {

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

@@ -0,0 +1,69 @@
+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 EventDetailsFilters = {
+  id: string;
+};
+
+const EVENT_DETAILS_QUERY = gql`
+  query GET_ACTIVITY_DETAILS($ids: [String!]) {
+    InfrahubEvent(ids: $ids) {
+      count
+      edges {
+        node {
+          id
+          event
+          branch
+          occurred_at
+          level
+          account_id
+          primary_node {
+            id
+            kind
+          }
+          related_nodes {
+            id
+            kind
+          }
+          has_children
+          __typename
+          ... on NodeMutatedEvent {
+            attributes {
+              action
+              kind
+              name
+              value
+              value_previous
+            }
+            payload
+          }
+        }
+      }
+    }
+  }
+`;
+
+export async function getEventDetailsFromApi({
+  branchName,
+  atDate,
+  ...filters
+}: EventDetailsFilters & { branchName?: string; atDate?: Date | null }) {
+  const { data } = await graphqlClient.query({
+    query: EVENT_DETAILS_QUERY,
+    variables: {
+      ...filters,
+    },
+    context: {
+      branch: branchName,
+      date: atDate,
+    },
+  });
+
+  const activities: EventType[] = data?.[INFRAHUB_EVENT]?.edges?.map((edge) => {
+    return edge.node;
+  });
+
+  return activities[0];
+}

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

@@ -0,0 +1,25 @@
+import { getCurrentBranchName } from "@/entities/branches/domain/get-current-branch";
+import { store } from "@/shared/stores";
+import { datetimeAtom } from "@/shared/stores/time.atom";
+import { queryOptions, useQuery } from "@tanstack/react-query";
+import { getEventDetailsFromApi } from "./get-event-details-from-api";
+
+export function getEventDetailsQueryOptions({ id }: { id: string }) {
+  const currentBranchName = getCurrentBranchName();
+  const timeMachineDate = store.get(datetimeAtom);
+
+  return queryOptions({
+    queryKey: ["event-details", id],
+    queryFn: () => {
+      return getEventDetailsFromApi({
+        id,
+        branchName: currentBranchName,
+        atDate: timeMachineDate,
+      });
+    },
+  });
+}
+
+export const useEventDetails = ({ id }: { id: string }) => {
+  return useQuery(getEventDetailsQueryOptions({ id }));
+};

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

@@ -1,15 +1,19 @@
 import graphqlClient from "@/shared/api/graphql/graphqlClientApollo";
+import { ContextParams } from "@/shared/api/types";
 import { gql } from "@apollo/client";
 import { EventType } from "../ui/event";
 import { INFRAHUB_EVENT } from "../utils/constants";
 
+export const OBJECTS_PER_PAGE = 40;
+
 export type GlobalEventsFilters = {
   hasChildren?: boolean;
   eventType?: Array<string>;
   primaryNodeIds?: Array<string>;
   relatedNodeIds?: Array<string>;
   parentIds?: Array<string>;
   accountIds?: Array<string>;
+  level?: number;
   since?: Date;
   until?: Date;
   offset?: number;
@@ -25,6 +29,7 @@ const EVENTS_QUERY = gql`
     $relatedNodeIds: [String!]
     $parentIds: [String!]
     $accountIds: [String!]
+    $level: Int
     $since: DateTime
     $until: DateTime
     $offset: Int
@@ -38,6 +43,7 @@ const EVENTS_QUERY = gql`
       related_node__ids: $relatedNodeIds
       parent__ids: $parentIds
       account__ids: $accountIds
+      level: $level
       since: $since
       until: $until
       offset: $offset
@@ -72,20 +78,34 @@ const EVENTS_QUERY = gql`
             }
             payload
           }
+          ... on BranchCreatedEvent {
+            payload
+          }
+          ... on StandardEvent {
+            payload
+          }
+          ... on BranchDeletedEvent {
+            payload
+          }
+          ... on BranchRebasedEvent {
+            payload
+          }
         }
       }
     }
   }
 `;
 
 export async function getEventsFromApi({
+  limit = OBJECTS_PER_PAGE,
   branchName,
   atDate,
   ...filters
-}: GlobalEventsFilters & { branchName?: string; atDate?: Date | null }) {
+}: GlobalEventsFilters & ContextParams) {
   const { data } = await graphqlClient.query({
     query: EVENTS_QUERY,
     variables: {
+      limit,
       ...filters,
     },
     context: {
@@ -98,10 +118,5 @@ export async function getEventsFromApi({
     return edge.node;
   });
 
-  const count = data?.data?.[INFRAHUB_EVENT]?.count;
-
-  return {
-    activities,
-    count,
-  };
+  return activities;
 }

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

@@ -1,25 +1,40 @@
-import { getCurrentBranchName } from "@/entities/branches/domain/get-current-branch";
-import { store } from "@/shared/stores";
+import { useCurrentBranch } from "@/entities/branches/ui/branches-provider";
+import { ContextParams } from "@/shared/api/types";
 import { datetimeAtom } from "@/shared/stores/time.atom";
-import { queryOptions, useQuery } from "@tanstack/react-query";
-import { GlobalEventsFilters, getEventsFromApi } from "./get-events-from-api";
+import { infiniteQueryOptions, useInfiniteQuery } from "@tanstack/react-query";
+import { useAtomValue } from "jotai";
+import { GlobalEventsFilters, OBJECTS_PER_PAGE, getEventsFromApi } from "./get-events-from-api";
 
-export function getEventsQueryOptions(filters: GlobalEventsFilters) {
-  const currentBranchName = getCurrentBranchName();
-  const timeMachineDate = store.get(datetimeAtom);
-
-  return queryOptions({
-    queryKey: ["events", filters],
-    queryFn: () => {
+export function getEventsQueryOptions({
+  filters,
+  branchName,
+  atDate,
+}: { filters: GlobalEventsFilters } & ContextParams) {
+  return infiniteQueryOptions({
+    queryKey: [branchName, atDate, "events", filters],
+    queryFn: ({ pageParam }) => {
       return getEventsFromApi({
         ...filters,
-        branchName: currentBranchName,
-        atDate: timeMachineDate,
+        offset: pageParam,
+        branchName,
+        atDate,
       });
     },
+    initialPageParam: 0,
+    getNextPageParam: (lastPage, _, lastPageParam) => {
+      if (lastPage?.length < OBJECTS_PER_PAGE) {
+        return undefined;
+      }
+      return lastPageParam + OBJECTS_PER_PAGE;
+    },
   });
 }
 
-export const useEvents = (filters: GlobalEventsFilters) => {
-  return useQuery(getEventsQueryOptions(filters));
+export const useEvents = ({ filters }: { filters: GlobalEventsFilters }) => {
+  const { currentBranch } = useCurrentBranch();
+  const timeMachineDate = useAtomValue(datetimeAtom);
+
+  return useInfiniteQuery(
+    getEventsQueryOptions({ filters, branchName: currentBranch.name, atDate: timeMachineDate })
+  );
 };

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

@@ -1,33 +1,38 @@
+import { NodeLabel } from "@/entities/nodes/object/ui/node-label";
 import { EventNodeInterface } from "@/shared/api/graphql/generated/graphql";
 import { ReactNode } from "react";
 
-export const BRANCH_EVENTS_MAPPING: Record<string, (param: string) => ReactNode> = {
-  "infrahub.branch.created": (branch) => (
+export const BRANCH_EVENTS_MAPPING: Record<string, (props: EventNodeInterface) => ReactNode> = {
+  "infrahub.branch.created": (props) => (
     <div>
-      Branch <span className="text-black font-semibold">{branch}</span> created
+      created the branch <span className="text-black font-semibold">{props.branch}</span>{" "}
     </div>
   ),
-  "infrahub.branch.rebased": (branch) => (
+  "infrahub.branch.rebased": (props) => (
     <div>
-      Branch <span className="text-black font-semibold">{branch}</span> rebased
+      rebased the branch <span className="text-black font-semibold">{props.branch}</span>{" "}
     </div>
   ),
-  "infrahub.branch.deleted": (branch) => (
+  "infrahub.branch.deleted": (props) => (
     <div>
-      Branch <span className="text-black font-semibold">{branch}</span> deleted
+      deleted the branch <span className="text-black font-semibold">{props.branch}</span>{" "}
     </div>
   ),
 };
 
 export const BranchEvent = (props: EventNodeInterface) => {
-  const { event, branch } = props;
+  const { event, account_id } = props;
 
   return (
     <>
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-2 text-sm">
           <div className="text-gray-500">
-            {branch && BRANCH_EVENTS_MAPPING[event] && BRANCH_EVENTS_MAPPING[event](branch)}
+            <div className="font-semibold">
+              <NodeLabel id={account_id} />
+            </div>
+
+            {BRANCH_EVENTS_MAPPING[event] && BRANCH_EVENTS_MAPPING[event](props)}
           </div>
         </div>
       </div>

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 { NodeLabel } from "@/entities/nodes/object/ui/display-label";
+import { NodeLabel } from "@/entities/nodes/object/ui/node-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,12 +11,12 @@ import {
   BRANCH_DELETED_EVENT,
   BRANCH_EVENTS,
   BRANCH_REBASEDED_EVENT,
-  GROUP_EVENTS,
   NODE_MUTATED_EVENT,
+  STANDARD_EVENTS,
 } from "../utils/constants";
 import { BranchEvent } from "./branch-event";
-import { GroupEvent } from "./group-event";
 import { EventAttributes, NodeEvent } from "./node-event";
+import { StandardEvent } from "./standard-event";
 
 export type BranchEventType = EventNodeInterface & {
   __typename:
@@ -31,7 +31,15 @@ export type NodeEventType = NodeMutatedEvent & {
 
 export type EventType = BranchEventType | NodeEventType;
 
-export const EventDetails = ({ id, event, occurred_at, account_id, ...props }: EventType) => {
+export const EventDetails = ({
+  id,
+  event,
+  occurred_at,
+  account_id,
+  primary_node,
+  related_nodes,
+  ...props
+}: EventType) => {
   return (
     <div className="divide-y">
       <PropertyRow
@@ -45,6 +53,21 @@ 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={<NodeLabel id={account_id} />} />}
+      {primary_node?.id && (
+        <PropertyRow title="Primary Node" value={<NodeLabel id={primary_node?.id} />} />
+      )}
+      {!!related_nodes?.length && (
+        <PropertyRow
+          title="Related Nodes"
+          value={
+            <div className="flex items-center gap-1">
+              {related_nodes.map((node) => {
+                return <NodeLabel key={node.id} id={node?.id} />;
+              })}
+            </div>
+          }
+        />
+      )}
       {"attributes" in props && (
         <PropertyRow title="Changes" value={<EventAttributes attributes={props.attributes} />} />
       )}
@@ -65,7 +88,7 @@ export const Event = ({ __typename, ...props }: EventType) => {
 
           {BRANCH_EVENTS.includes(__typename) && <BranchEvent {...props} />}
 
-          {GROUP_EVENTS.includes(__typename) && <GroupEvent {...props} />}
+          {STANDARD_EVENTS.includes(__typename) && <StandardEvent {...props} />}
 
           <div className="flex justify-between">
             <div className="text-xs font-medium text-gray-500 dark:text-neutral-400">

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

@@ -1,16 +1,21 @@
+import { NodeLabel } from "@/entities/nodes/object/ui/node-label";
 import { EventNodeInterface } from "@/shared/api/graphql/generated/graphql";
 import { Icon } from "@iconify-icon/react";
 import { BRANCH_EVENTS_MAPPING } from "./branch-event";
 
 export const BranchEvent = (props: EventNodeInterface) => {
-  const { event, branch } = props;
+  const { event, account_id } = props;
 
   return (
     <div className="flex items-center justify-between">
       <div className="flex items-center gap-2 text-sm text-gray-500">
         <Icon icon="mdi:source-branch" className="text-gray-400" />
 
-        {branch && BRANCH_EVENTS_MAPPING[event] && BRANCH_EVENTS_MAPPING[event](branch)}
+        <div className="text-black font-semibold">
+          <NodeLabel id={account_id} />
+        </div>
+
+        {BRANCH_EVENTS_MAPPING[event] && BRANCH_EVENTS_MAPPING[event](props)}
       </div>
     </div>
   );