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.query.ts

@@ -4,7 +4,10 @@ import { datetimeAtom } from "@/shared/stores/time.atom";
 import { queryOptions, useQuery } from "@tanstack/react-query";
 import { getEventsFromApi } from "./get-events";
 
-export function getEventsQueryOptions({ ids }: { ids?: Array<string | undefined> }) {
+export function getEventsQueryOptions({
+  ids,
+  limit,
+}: { ids?: Array<string | undefined>; limit?: number }) {
   const currentBranchName = getCurrentBranchName();
   const timeMachineDate = store.get(datetimeAtom);
 
@@ -13,13 +16,17 @@ export function getEventsQueryOptions({ ids }: { ids?: Array<string | undefined>
     queryFn: () => {
       return getEventsFromApi({
         ids,
+        limit,
         branchName: currentBranchName,
         atDate: timeMachineDate,
       });
     },
   });
 }
 
-export const useEvents = ({ ids = [] }: { ids?: Array<string | undefined> }) => {
-  return useQuery(getEventsQueryOptions({ ids }));
+export const useEvents = ({
+  ids = [],
+  limit,
+}: { ids?: Array<string | undefined>; limit?: number }) => {
+  return useQuery(getEventsQueryOptions({ ids, limit }));
 };

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

@@ -1,51 +1,45 @@
 import graphqlClient from "@/shared/api/graphql/graphqlClientApollo";
 import { gql } from "@apollo/client";
-import { jsonToGraphQLQuery } from "json-to-graphql-query";
-import { INFRAHUB_EVENT, NODE_MUTATED_EVENT } from "../utils/constants";
 
-const getEventsQuery = ({ ids }: { ids?: Array<string | undefined> }) => {
-  const request = {
-    query: {
-      __name: "GET_EVENTS",
-      [INFRAHUB_EVENT]: {
-        __args: {
-          related_node__ids: ids,
-        },
-        count: true,
-        edges: {
-          node: {
-            id: true,
-            event: true,
-            branch: true,
-            account_id: true,
-            occurred_at: true,
-            __on: {
-              __typeName: NODE_MUTATED_EVENT,
-              attributes: {
-                action: true,
-                kind: true,
-                name: true,
-                value: true,
-                value_previous: true,
-              },
-              payload: true,
-            },
-          },
-        },
-      },
-    },
-  };
-
-  return jsonToGraphQLQuery(request);
-};
+const EVENTS_QUERY = `
+  query GET_ACTIVITIES($ids: [String], $limit: Int) {
+    InfrahubEvent(related_node__ids: $ids, limit: $limit) {
+      count
+      edges {
+        node {
+          id
+          event
+          branch
+          occurred_at
+          __typename
+          ... on NodeMutatedEvent {
+            attributes {
+              action
+              kind
+              name
+              value
+              value_previous
+            }
+            payload
+          }
+        }
+      }
+    }
+  }
+`;
 
 export function getEventsFromApi({
   ids,
+  limit,
   branchName,
   atDate,
-}: { ids?: Array<string | undefined>; branchName: string; atDate: Date | null }) {
+}: { ids?: Array<string | undefined>; limit?: number; branchName: string; atDate: Date | null }) {
   return graphqlClient.query({
-    query: gql(getEventsQuery({ ids })),
+    query: gql(EVENTS_QUERY),
+    variables: {
+      ids,
+      limit,
+    },
     context: {
       branch: branchName,
       date: atDate,

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

@@ -0,0 +1,24 @@
+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 { getGlobalEventsFromApi } from "./get-global-events";
+
+export function getEventsQueryOptions() {
+  const currentBranchName = getCurrentBranchName();
+  const timeMachineDate = store.get(datetimeAtom);
+
+  return queryOptions({
+    queryKey: ["global-events"],
+    queryFn: () => {
+      return getGlobalEventsFromApi({
+        branchName: currentBranchName,
+        atDate: timeMachineDate,
+      });
+    },
+  });
+}
+
+export const useGlobalEvents = () => {
+  return useQuery(getEventsQueryOptions());
+};

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

@@ -0,0 +1,50 @@
+import graphqlClient from "@/shared/api/graphql/graphqlClientApollo";
+import { gql } from "@apollo/client";
+import { jsonToGraphQLQuery } from "json-to-graphql-query";
+import { INFRAHUB_EVENT, NODE_MUTATED_EVENT } from "../utils/constants";
+
+const getGlobalEventsQuery = () => {
+  const request = {
+    query: {
+      __name: "GET_GLOBAL_EVENTS",
+      [INFRAHUB_EVENT]: {
+        count: true,
+        edges: {
+          node: {
+            id: true,
+            event: true,
+            branch: true,
+            account_id: true,
+            occurred_at: true,
+            __on: {
+              __typeName: NODE_MUTATED_EVENT,
+              attributes: {
+                action: true,
+                kind: true,
+                name: true,
+                value: true,
+                value_previous: true,
+              },
+              payload: true,
+            },
+          },
+        },
+      },
+    },
+  };
+
+  return jsonToGraphQLQuery(request);
+};
+
+export function getGlobalEventsFromApi({
+  branchName,
+  atDate,
+}: { branchName: string; atDate: Date | null }) {
+  return graphqlClient.query({
+    query: gql(getGlobalEventsQuery()),
+    context: {
+      branch: branchName,
+      date: atDate,
+    },
+  });
+}

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

@@ -1,5 +1,4 @@
 import { EventNodeInterface } from "@/shared/api/graphql/generated/graphql";
-import { DateDisplay } from "@/shared/components/display/date-display";
 import { ReactElement } from "react";
 
 export const BRANCH_EVENTS_MAPPING: Record<string, (param: string) => ReactElement> = {
@@ -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,19 @@
+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>
+    </>
+  );
+};