Skip to content

Commit f314226

Browse files
pa-lempa-lem
authored
Update activities links and add more events in the UI (#5918)
* set current branch in filter * set current branch in filter + update event type filter * add event type * fix param * update ui * add kind filter form for filter * add new group event properties * ui + lint * temporary fix for global events * udpate labels * update ui for column display * fix combobox list * lint * update label map * Merge branch 'release-1.2' of github.com:opsmill/infrahub into ple-activities-updates * add default case * add group event and ensure default display * fix global event * fix branch event with new properties * update branch events * always display link * fix links from events * udpate date in tooltip * fix typo * handle commit events * display branch * fix test * fix node label ffrom different branch
1 parent 7cbfd92 commit f314226

File tree

17 files changed

+295
-125
lines changed

17 files changed

+295
-125
lines changed

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

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -78,17 +78,33 @@ const EVENTS_QUERY = gql`
7878
}
7979
payload
8080
}
81-
... on BranchCreatedEvent {
81+
... on StandardEvent {
8282
payload
8383
}
84-
... on StandardEvent {
84+
... on BranchCreatedEvent {
8585
payload
86+
created_branch
8687
}
8788
... on BranchDeletedEvent {
8889
payload
90+
deleted_branch
8991
}
9092
... on BranchRebasedEvent {
9193
payload
94+
rebased_branch
95+
}
96+
... on BranchMergedEvent {
97+
source_branch
98+
}
99+
... on GroupEvent {
100+
ancestors {
101+
id
102+
kind
103+
}
104+
members {
105+
id
106+
kind
107+
}
92108
}
93109
... on GroupEvent {
94110
ancestors {

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

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,35 @@
11
import { NodeLabel } from "@/entities/nodes/object/ui/node-label";
22
import { EventNodeInterface } from "@/shared/api/graphql/generated/graphql";
3+
import { Link } from "@/shared/components/ui/link";
34
import { ReactNode } from "react";
45

56
export const BRANCH_EVENTS_MAPPING: Record<string, (props: EventNodeInterface) => ReactNode> = {
67
"infrahub.branch.created": (props) => (
78
<div>
8-
created the branch <span className="text-black font-semibold">{props.branch}</span>{" "}
9+
created the branch{" "}
10+
<Link to={`/branches/${props.created_branch}`} className="text-black font-semibold">
11+
{props.created_branch ?? "-"}
12+
</Link>
913
</div>
1014
),
1115
"infrahub.branch.rebased": (props) => (
1216
<div>
13-
rebased the branch <span className="text-black font-semibold">{props.branch}</span>{" "}
17+
rebased the branch{" "}
18+
<Link to={`/branches/${props.rebased_branch}`} className="text-black font-semibold">
19+
{props.rebased_branch ?? "-"}
20+
</Link>
21+
</div>
22+
),
23+
"infrahub.branch.merged": (props) => (
24+
<div>
25+
merged the branch{" "}
26+
<span className="text-black font-semibold">{props.source_branch ?? "-"}</span>
1427
</div>
1528
),
1629
"infrahub.branch.deleted": (props) => (
1730
<div>
18-
deleted the branch <span className="text-black font-semibold">{props.branch}</span>{" "}
31+
deleted the branch{" "}
32+
<span className="text-black font-semibold">{props.deleted_branch ?? "-"}</span>
1933
</div>
2034
),
2135
};

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@ export type EventType = BranchEventType | NodeEventType | GroupEvent;
4242
export const EventDetails = ({
4343
id,
4444
event,
45+
branch,
4546
occurred_at,
4647
account_id,
4748
primary_node,
@@ -61,6 +62,7 @@ export const EventDetails = ({
6162
}
6263
/>
6364
<PropertyRow title="Event" value={event} />
65+
<PropertyRow title="Branch" value={branch} />
6466
<PropertyRow title="Occured at" value={<DateDisplay date={occurred_at} />} />
6567
{account_id && (
6668
<PropertyRow

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export const BranchEvent = (props: EventNodeInterface) => {
1515
<NodeLabel id={account_id} />
1616
</div>
1717

18-
{BRANCH_EVENTS_MAPPING[event] && BRANCH_EVENTS_MAPPING[event](props)}
18+
{(BRANCH_EVENTS_MAPPING[event] && BRANCH_EVENTS_MAPPING[event](props)) ?? event}
1919
</div>
2020
</div>
2121
);

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

Lines changed: 31 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,34 @@ import { Tooltip } from "@/shared/components/ui/tooltip";
33
import { classNames } from "@/shared/utils/common";
44
import { Icon } from "@iconify-icon/react";
55
import { format } from "date-fns";
6-
import { BRANCH_EVENTS, STANDARD_EVENTS } from "../utils/constants";
6+
import { BRANCH_EVENTS, GROUP_EVENTS, STANDARD_EVENTS } from "../utils/constants";
77
import { EventType } from "./event";
88
import { BranchEvent } from "./global-branch-event";
9+
import { GroupEvent } from "./global-group-event";
910
import { NodeEvent } from "./global-node-event";
1011
import { StandardEvent } from "./global-standard-event";
1112

12-
export const Event = ({ __typename, ...props }: EventType) => {
13+
const GlobalEventDisplay = ({ __typename, ...props }: EventType) => {
14+
if ("attributes" in props) {
15+
return <NodeEvent {...props} />;
16+
}
17+
18+
if (BRANCH_EVENTS.includes(__typename)) {
19+
return <BranchEvent {...props} />;
20+
}
21+
22+
if (STANDARD_EVENTS.includes(__typename)) {
23+
return <StandardEvent {...props} />;
24+
}
25+
26+
if (GROUP_EVENTS.includes(__typename)) {
27+
return <GroupEvent {...props} />;
28+
}
29+
30+
return <span className="flex items-center text-sm text-gray-500 ">{props.event}</span>;
31+
};
32+
33+
export const Event = (props: EventType) => {
1334
return (
1435
<div
1536
className={classNames(
@@ -18,23 +39,23 @@ export const Event = ({ __typename, ...props }: EventType) => {
1839
)}
1940
>
2041
<div className="flex items-center text-xs font-medium text-gray-500 whitespace-nowrap">
21-
<Tooltip enabled content={props.occurred_at}>
42+
<Tooltip enabled content={format(new Date(props.occurred_at), "yyyy-MM-dd HH:mm:ss (O)")}>
2243
<span>{format(new Date(props.occurred_at), "MMM dd, HH:mm:ss")}</span>
2344
</Tooltip>
2445
</div>
2546

2647
<div className="col-span-5 flex item-center gap-4 overflow-hidden">
27-
{"attributes" in props && <NodeEvent {...props} />}
28-
29-
{BRANCH_EVENTS.includes(__typename) && <BranchEvent {...props} />}
30-
31-
{STANDARD_EVENTS.includes(__typename) && <StandardEvent {...props} />}
48+
<GlobalEventDisplay {...props} />
3249
</div>
3350

3451
<div className="text-xs font-medium text-gray-500 flex items-center gap-1">
35-
<Icon icon={"mdi:source-branch"} />
52+
{props.branch && (
53+
<>
54+
<Icon icon={"mdi:source-branch"} />
3655

37-
{props.branch}
56+
{props.branch}
57+
</>
58+
)}
3859
</div>
3960

4061
<div className="relative">

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

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { NodeLabel } from "@/entities/nodes/object/ui/node-label";
2+
import { EventNodeInterface } from "@/shared/api/graphql/generated/graphql";
3+
import { Icon } from "@iconify-icon/react";
4+
import { GROUP_EVENTS_MAPPING } from "./group-event";
5+
6+
export const GroupEvent = (props: EventNodeInterface) => {
7+
const { event, account_id } = props;
8+
9+
return (
10+
<>
11+
<div className="flex items-center justify-between">
12+
<div className="flex items-center gap-2 text-sm text-gray-500">
13+
<Icon icon="mdi:group" className="text-gray-400" />
14+
15+
<div className="text-black font-semibold">
16+
<NodeLabel id={account_id} kind="CoreAccount" branch={props.branch} />
17+
</div>
18+
19+
{(GROUP_EVENTS_MAPPING[event] && GROUP_EVENTS_MAPPING[event](props)) ?? event}
20+
</div>
21+
</div>
22+
</>
23+
);
24+
};

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

Lines changed: 21 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
1-
import { QSP } from "@/config/qsp";
21
import { NodeLabel } from "@/entities/nodes/object/ui/node-label";
32
import { schemaKindLabelState } from "@/entities/schema/stores/schemaKindLabel.atom";
43
import { useSchema } from "@/entities/schema/ui/hooks/useSchema";
54
import { NodeMutatedEvent } from "@/shared/api/graphql/generated/graphql";
6-
import { constructPath } from "@/shared/api/rest/fetch";
75
import { Link } from "@/shared/components/ui/link";
86
import { Icon } from "@iconify-icon/react";
97
import { useAtomValue } from "jotai";
10-
import { NODE_EVENTS_MAPPING } from "./node-event";
8+
import { NODE_EVENTS_MAPPING, getLink } from "./node-event";
119

1210
export const EventAttributes = ({ attributes }: Pick<NodeMutatedEvent, "attributes">) => {
1311
return (
@@ -45,30 +43,36 @@ export const NodeEvent = (props: NodeMutatedEvent) => {
4543
className="overflow-hidden text-ellipsis whitespace-nowrap font-semibold"
4644
/>
4745

48-
<div className="text-gray-500">{NODE_EVENTS_MAPPING[event] ?? "-"}</div>
46+
<div className="text-gray-500">{NODE_EVENTS_MAPPING[event] ?? event}</div>
4947

5048
<div className="font-semibold whitespace-nowrap">
5149
{schemaLabels[props.payload.data.node_kind] ?? "-"}
5250
</div>
5351

54-
<Link
55-
to={constructPath(
56-
`/objects/${props.payload.data.node_kind}/${props.payload.data.node_id}`,
57-
[
58-
{
59-
name: QSP.BRANCH,
60-
value: props.branch,
61-
},
62-
]
63-
)}
64-
className="overflow-hidden text-ellipsis"
65-
>
52+
{event.includes("deleted") ? (
6653
<NodeLabel
6754
id={props.primary_node.id}
6855
kind={props.primary_node?.kind}
56+
branch={props.branch}
6957
className="overflow-hidden text-ellipsis whitespace-nowrap"
7058
/>
71-
</Link>
59+
) : (
60+
<Link
61+
to={getLink({
62+
kind: props.primary_node?.kind,
63+
id: props.primary_node.id,
64+
branch: props.branch,
65+
})}
66+
className="overflow-hidden text-ellipsis"
67+
>
68+
<NodeLabel
69+
id={props.primary_node.id}
70+
kind={props.primary_node?.kind}
71+
branch={props.branch}
72+
className="overflow-hidden text-ellipsis whitespace-nowrap"
73+
/>
74+
</Link>
75+
)}
7276
</div>
7377
);
7478
};

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

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,6 @@ import { Icon } from "@iconify-icon/react";
44
import { STANDARD_EVENTS_MAPPING } from "./standard-event";
55

66
const getStandardEventIcon = (event: string) => {
7-
if (event.includes("group")) {
8-
return <Icon icon="mdi:group" className="text-gray-400" />;
9-
}
10-
117
if (event.includes("schema")) {
128
return <Icon icon="mdi:code-json" className="text-gray-400" />;
139
}
@@ -24,13 +20,15 @@ export const StandardEvent = (props: EventNodeInterface) => {
2420
<div className="flex items-center gap-2 text-sm text-gray-500">
2521
{getStandardEventIcon(event)}
2622

27-
<div className="text-black font-semibold">
28-
<NodeLabel id={account_id} kind="CoreAccount" />
29-
</div>
30-
31-
{STANDARD_EVENTS_MAPPING[event] && STANDARD_EVENTS_MAPPING[event](props)}
23+
{account_id ? (
24+
<div className="text-black font-semibold">
25+
<NodeLabel id={account_id} kind="CoreAccount" />
26+
</div>
27+
) : (
28+
"-"
29+
)}
3230

33-
{!STANDARD_EVENTS_MAPPING[event] && event}
31+
{(STANDARD_EVENTS_MAPPING[event] && STANDARD_EVENTS_MAPPING[event](props)) ?? event}
3432
</div>
3533
</div>
3634
</>

‎frontend/app/src/entities/events/ui/group-event.tsx‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
import { NodeLabel } from "@/entities/nodes/object/ui/node-label";
2+
import { EventNodeInterface } from "@/shared/api/graphql/generated/graphql";
3+
import { constructPath } from "@/shared/api/rest/fetch";
4+
import { Link } from "@/shared/components/ui/link";
5+
import { ReactElement } from "react";
6+
7+
export const GROUP_EVENTS_MAPPING: Record<string, (props: EventNodeInterface) => ReactElement> = {
8+
"infrahub.group.member_added": ({ related_nodes, primary_node }) => {
9+
return (
10+
<div className="flex items-center gap-2">
11+
added{" "}
12+
<div className="flex items-center gap-1 text-black">
13+
{related_nodes.slice(0, 5).map(({ id, kind }) => {
14+
return (
15+
<Link key={id} to={constructPath(`/objects/${kind}/${id}`)}>
16+
<NodeLabel key={id} id={id} />
17+
</Link>
18+
);
19+
})}
20+
{related_nodes.slice(6).length > 0 && (
21+
<span className="italic text-gray-500">(+{related_nodes.slice(6).length})</span>
22+
)}
23+
</div>{" "}
24+
in group{" "}
25+
<span className="text-black font-semibold">
26+
<Link key={primary_node?.id} to={constructPath(`/objects/CoreGroup/${primary_node?.id}`)}>
27+
<NodeLabel key={primary_node?.id} id={primary_node?.id} kind={primary_node?.kind} />
28+
</Link>
29+
</span>
30+
</div>
31+
);
32+
},
33+
"infrahub.group.member_removed": ({ related_nodes, primary_node }) => {
34+
return (
35+
<div className="flex items-center gap-2">
36+
removed{" "}
37+
<div className="flex items-center gap-1 text-black">
38+
{related_nodes.slice(0, 5).map(({ id, kind }) => {
39+
return (
40+
<Link key={id} to={constructPath(`/objects/${kind}/${id}`)}>
41+
<NodeLabel key={id} id={id} />
42+
</Link>
43+
);
44+
})}
45+
{related_nodes.slice(6).length > 0 && (
46+
<span className="italic text-gray-500">(+{related_nodes.slice(6).length})</span>
47+
)}
48+
</div>{" "}
49+
from group{" "}
50+
<span className="text-black">
51+
<Link key={primary_node?.id} to={constructPath(`/objects/CoreGroup/${primary_node?.id}`)}>
52+
<NodeLabel key={primary_node?.id} id={primary_node?.id} kind={primary_node?.kind} />
53+
</Link>
54+
</span>
55+
</div>
56+
);
57+
},
58+
};
59+
60+
export const GroupEvent = (props: EventNodeInterface) => {
61+
const { event, account_id } = props;
62+
63+
return (
64+
<>
65+
<div className="flex items-center justify-between">
66+
<div className="flex items-center gap-2 text-sm">
67+
<div className="font-semibold">
68+
<NodeLabel id={account_id} />
69+
</div>
70+
71+
<div className="text-gray-500">
72+
{GROUP_EVENTS_MAPPING[event] && GROUP_EVENTS_MAPPING[event](props)}
73+
74+
{!GROUP_EVENTS_MAPPING[event] && event}
75+
</div>
76+
</div>
77+
</div>
78+
</>
79+
);
80+
};

0 commit comments

Comments
 (0)