Add nodes activities in the details view

changelog/+activities.added.md

@@ -0,0 +1 @@
+Add activities logs in the nodes details view

frontend/app/src/app/router.tsx

@@ -1,6 +1,7 @@
 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";
@@ -73,6 +74,37 @@ export const router = createBrowserRouter([
                   },
                 ],
               },
+              {
+                path: "/activities",
+                handle: {
+                  breadcrumb: () => {
+                    return {
+                      type: "link",
+                      label: "Activities",
+                      to: constructPath("/activities"),
+                    };
+                  },
+                },
+                children: [
+                  {
+                    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,
+                        };
+                      },
+                    },
+                  },
+                ],
+              },
               {
                 path: `/objects/${ARTIFACT_OBJECT}/:objectid`,
                 handle: {

frontend/app/src/entities/events/api/get-events.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 { getEventsFromApi } from "./get-events";
+
+export function getEventsQueryOptions({ ids }: { ids?: Array<string | undefined> }) {
+  const currentBranchName = getCurrentBranchName();
+  const timeMachineDate = store.get(datetimeAtom);
+
+  return queryOptions({
+    queryKey: ["events", ids],
+    queryFn: () => {
+      return getEventsFromApi({
+        ids,
+        branchName: currentBranchName,
+        atDate: timeMachineDate,
+      });
+    },
+  });
+}
+
+export const useEvents = ({ ids = [] }: { ids?: Array<string | undefined> }) => {
+  return useQuery(getEventsQueryOptions({ ids }));
+};

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

@@ -0,0 +1,54 @@
+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);
+};
+
+export function getEventsFromApi({
+  ids,
+  branchName,
+  atDate,
+}: { ids?: Array<string | undefined>; branchName: string; atDate: Date | null }) {
+  return graphqlClient.query({
+    query: gql(getEventsQuery({ ids })),
+    context: {
+      branch: branchName,
+      date: atDate,
+    },
+  });
+}

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

@@ -0,0 +1,40 @@
+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> = {
+  "infrahub.branch.created": (branch) => (
+    <div>
+      Branch <span className="text-black font-semibold">{branch}</span> created
+    </div>
+  ),
+  "infrahub.branch.rebased": (branch) => (
+    <div>
+      Branch <span className="text-black font-semibold">{branch}</span> rebased
+    </div>
+  ),
+  "infrahub.branch.deleted": (branch) => (
+    <div>
+      Branch <span className="text-black font-semibold">{branch}</span> deleted
+    </div>
+  ),
+};
+
+export const BranchEvent = (props: EventNodeInterface) => {
+  const { event, occurred_at, branch } = 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>
+        </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-details.tsx

@@ -0,0 +1,3 @@
+export const EventDetails = () => {
+  return <div>DETAILS</div>;
+};

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

@@ -0,0 +1,86 @@
+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 { PropertyRow } from "@/entities/schema/ui/styled";
+import { CopyToClipboard } from "@/shared/components/buttons/copy-to-clipboard";
+import { Popover, PopoverContent, PopoverTrigger } from "@/shared/components/ui/popover";
+import { TimelineBorder } from "@/shared/components/ui/timeline-border";
+import {
+  BRANCH_CREATED_EVENT,
+  BRANCH_DELETED_EVENT,
+  BRANCH_EVENTS,
+  BRANCH_REBASEDED_EVENT,
+  NODE_MUTATED_EVENT,
+} from "../utils/constants";
+import { BranchEvent } from "./branch-event";
+import { EventAttributes, NodeEvent } from "./node-event";
+
+export type BranchEventType = EventNodeInterface & {
+  __typename:
+    | typeof BRANCH_DELETED_EVENT
+    | typeof BRANCH_CREATED_EVENT
+    | typeof BRANCH_REBASEDED_EVENT;
+};
+
+export type NodeEventType = NodeMutatedEvent & {
+  __typename: typeof NODE_MUTATED_EVENT;
+};
+
+export type EventType = BranchEventType | NodeEventType;
+
+const EventDetails = ({ id, event, occurred_at, account_id, ...props }: EventType) => {
+  return (
+    <div className="divide-y">
+      <PropertyRow
+        title="ID"
+        value={
+          <div className="flex items-center gap-2">
+            {id} <CopyToClipboard text={id} />
+          </div>
+        }
+      />
+      <PropertyRow title="Event" value={event} />
+      <PropertyRow title="Occured at" value={<DateDisplay date={occurred_at} />} />
+      {account_id && <PropertyRow title="Account" value={<DisplayLabel id={account_id} />} />}
+      {"attributes" in props && (
+        <PropertyRow title="Changes" value={<EventAttributes attributes={props.attributes} />} />
+      )}
+    </div>
+  );
+};
+
+export const Event = ({ __typename, ...props }: EventType) => {
+  return (
+    <div className="flex gap-2">
+      <TimelineBorder />
+
+      <div className="flex flex-grow gap-3 p-2 rounded-md shadow-sm border">
+        <div className="flex flex-col gap-2 grow">
+          {__typename === NODE_MUTATED_EVENT && <NodeEvent {...props} />}
+
+          {BRANCH_EVENTS.includes(__typename) && <BranchEvent {...props} />}
+
+          <div className="flex justify-between">
+            <div className="text-xs font-medium text-gray-500 dark:text-neutral-400">
+              <DateDisplay date={props.occurred_at} />
+            </div>
+
+            <Popover>
+              <PopoverTrigger>
+                <div className="flex flex-grow justify-end">
+                  <p className="text-sm underline text-gray-600 dark:text-neutral-400 mb-1">
+                    View more.
+                  </p>
+                </div>
+              </PopoverTrigger>
+              <PopoverContent className="w-full">
+                <EventDetails {...props} />
+              </PopoverContent>
+            </Popover>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};