Improve node activities and add first draft for global activities

backend/infrahub/menu/menu.py

@@ -164,7 +164,7 @@ def _extract_node_icon(model: MainSchemaTypes) -> str:
                 icon=_extract_node_icon(infrahub_schema.get(InfrahubKind.CHECKDEFINITION)),
                 protected=True,
                 section=MenuSection.INTERNAL,
-                order_weight=3000,
+                order_weight=2000,
             ),
             MenuItemDefinition(
                 namespace="Builtin",
@@ -176,6 +176,16 @@ def _extract_node_icon(model: MainSchemaTypes) -> str:
                 section=MenuSection.INTERNAL,
                 order_weight=3000,
             ),
+            MenuItemDefinition(
+                namespace="Builtin",
+                name="ActivityLogs",
+                label="Activity Logs",
+                path="/activities",
+                icon="mdi:format-list-bulleted",
+                protected=True,
+                section=MenuSection.INTERNAL,
+                order_weight=4000,
+            ),
         ],
     ),
     MenuItemDefinition(

frontend/app/src/app/router.tsx

@@ -1,7 +1,6 @@
 import { ARTIFACT_OBJECT, NODE_OBJECT, PROPOSED_CHANGES_OBJECT } from "@/config/constants";
 import { RequireAuth } from "@/entities/authentication/ui/useAuth";
 import { BranchesProvider } from "@/entities/branches/ui/branches-provider";
-import { INFRAHUB_EVENT } from "@/entities/events/utils/constants";
 import { constructPathForIpam } from "@/entities/ipam/common/utils";
 import { IPAM_ROUTE, IP_ADDRESS_GENERIC, IP_PREFIX_GENERIC } from "@/entities/ipam/constants";
 import { RESOURCE_GENERIC_KIND } from "@/entities/resource-manager/constants";
@@ -90,19 +89,6 @@ export const router = createBrowserRouter([
                     index: true,
                     lazy: () => import("@/pages/activities"),
                   },
-                  {
-                    path: ":activityid",
-                    lazy: () => import("@/pages/activities/details"),
-                    handle: {
-                      breadcrumb: (match: UIMatch) => {
-                        return {
-                          type: "select",
-                          value: match.params.activityid,
-                          kind: INFRAHUB_EVENT,
-                        };
-                      },
-                    },
-                  },
                 ],
               },
               {

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

@@ -0,0 +1,65 @@
+import graphqlClient from "@/shared/api/graphql/graphqlClientApollo";
+import { gql } from "@apollo/client";
+
+const EVENTS_QUERY = gql`
+  query GET_ACTIVITIES($ids: [String!], $offset: Int, $limit: Int) {
+    InfrahubEvent(related_node__ids: $ids, offset: $offset, limit: $limit) {
+      count
+      edges {
+        node {
+          id
+          event
+          branch
+          occurred_at
+          level
+          account_id
+          primary_node {
+            id
+            kind
+          }
+          __typename
+          ... on NodeMutatedEvent {
+            attributes {
+              action
+              kind
+              name
+              value
+              value_previous
+            }
+            payload
+          }
+        }
+      }
+    }
+  }
+`;
+
+export function getEventsFromApi({
+  ids,
+  offset,
+  limit,
+  search,
+  branchName,
+  atDate,
+}: {
+  ids?: Array<string | undefined>;
+  offset?: number;
+  limit?: number;
+  search?: string;
+  branchName: string;
+  atDate: Date | null;
+}) {
+  return graphqlClient.query({
+    query: EVENTS_QUERY,
+    variables: {
+      ids,
+      offset,
+      limit,
+      search,
+    },
+    context: {
+      branch: branchName,
+      date: atDate,
+    },
+  });
+}

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

@@ -2,24 +2,51 @@ 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 { getEventsFromApi } from "./get-events";
+import { EventType } from "../ui/event";
+import { INFRAHUB_EVENT } from "../utils/constants";
+import { getEventsFromApi } from "./get-events-from-api";
 
-export function getEventsQueryOptions({ ids }: { ids?: Array<string | undefined> }) {
+export function getEventsQueryOptions({
+  ids,
+  offset,
+  limit,
+  search,
+}: { ids?: Array<string | undefined>; offset?: number; limit?: number; search?: string }) {
   const currentBranchName = getCurrentBranchName();
   const timeMachineDate = store.get(datetimeAtom);
 
   return queryOptions({
-    queryKey: ["events", ids],
+    queryKey: ["events", ids, offset, limit, search],
     queryFn: () => {
       return getEventsFromApi({
         ids,
+        offset,
+        limit,
+        search,
         branchName: currentBranchName,
         atDate: timeMachineDate,
       });
     },
   });
 }
 
-export const useEvents = ({ ids = [] }: { ids?: Array<string | undefined> }) => {
-  return useQuery(getEventsQueryOptions({ ids }));
+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,
+  };
 };

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

@@ -1,8 +1,7 @@
 import { EventNodeInterface } from "@/shared/api/graphql/generated/graphql";
-import { DateDisplay } from "@/shared/components/display/date-display";
-import { ReactElement } from "react";
+import { ReactNode } from "react";
 
-export const BRANCH_EVENTS_MAPPING: Record<string, (param: string) => ReactElement> = {
+export const BRANCH_EVENTS_MAPPING: Record<string, (param: string) => ReactNode> = {
   "infrahub.branch.created": (branch) => (
     <div>
       Branch <span className="text-black font-semibold">{branch}</span> created
@@ -21,7 +20,7 @@ export const BRANCH_EVENTS_MAPPING: Record<string, (param: string) => ReactEleme
 };
 
 export const BranchEvent = (props: EventNodeInterface) => {
-  const { event, occurred_at, branch } = props;
+  const { event, branch } = props;
 
   return (
     <>
@@ -31,9 +30,6 @@ export const BranchEvent = (props: EventNodeInterface) => {
             {branch && BRANCH_EVENTS_MAPPING[event] && BRANCH_EVENTS_MAPPING[event](branch)}
           </div>
         </div>
-        <div className="text-xs font-medium text-gray-500 dark:text-neutral-400">
-          <DateDisplay date={occurred_at} />
-        </div>
       </div>
     </>
   );

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

@@ -29,7 +29,7 @@ export type NodeEventType = NodeMutatedEvent & {
 
 export type EventType = BranchEventType | NodeEventType;
 
-const EventDetails = ({ id, event, occurred_at, account_id, ...props }: EventType) => {
+export const EventDetails = ({ id, event, occurred_at, account_id, ...props }: EventType) => {
   return (
     <div className="divide-y">
       <PropertyRow
@@ -57,7 +57,9 @@ export const Event = ({ __typename, ...props }: EventType) => {
 
       <div className="flex flex-grow gap-3 p-2 rounded-md shadow-sm border bg-white">
         <div className="flex flex-col gap-2 grow">
-          {__typename === NODE_MUTATED_EVENT && <NodeEvent {...props} />}
+          {"attributes" in props && <NodeEvent {...props} />}
+
+          {"attributes" in props && <EventAttributes attributes={props.attributes} />}
 
           {BRANCH_EVENTS.includes(__typename) && <BranchEvent {...props} />}
 

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

@@ -0,0 +1,17 @@
+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;
+
+  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>
+    </div>
+  );
+};