Improve node activities and add first draft for global activities #5747
Conversation
pa-lem
commented
Feb 13, 2025
•
pa-lem
commented
- Add limit and link on the node activities view
- Update details cards UI to not grow
- Add starting point for the global activities list view + menu link to this view
- Handle group member events in both details and list views
- Add global activities pagination and search
…-global-activities
github-actions
bot
added
group/backend
CodSpeed Performance ReportMerging #5747 will not alter performanceComparing Summary
|
| offset, | ||
| limit, | ||
| search, | ||
| }: { ids?: Array<string | undefined>; offset?: number; limit?: number; search?: string }) { | ||
| const currentBranchName = getCurrentBranchName(); | ||
| const timeMachineDate = store.get(datetimeAtom); | ||
|
|
||
| return queryOptions({ |
There was a problem hiding this comment.
ideally, it should be an infiniteQueryOptions
| } | ||
| } | ||
| } | ||
| `; | ||
|
|
||
| export function getEventsFromApi({ |
There was a problem hiding this comment.
this file name should be get-events-from-api.ts
| return graphqlClient.query({ | ||
| query: gql(getEventsQuery({ ids })), | ||
| query: gql(EVENTS_QUERY), |
There was a problem hiding this comment.
gql should be part of EVENTS_QUERY
| {"attributes" in props && <NodeEvent {...props} />} | ||
|
|
||
| {"attributes" in props && <EventAttributes attributes={props.attributes} />} |
| const { event, branch } = props; | ||
|
|
||
| return ( | ||
| <> |
There was a problem hiding this comment.
fragment is useless no?
| @@ -22,11 +25,39 @@ export const GlobalEvents = () => { | |||
| return edge.node; | |||
| }); | |||
|
|
|||
| const count = data?.data?.[INFRAHUB_EVENT]?.count; | |||
There was a problem hiding this comment.
this kind of destructuring are better to be done in useEvents directly. The goal is to have data read to use instantly when calling useEvents
| const { event, account_id, primary_node } = props; | ||
|
|
||
| return ( | ||
| <> |
| import { EventNodeInterface } from "@/shared/api/graphql/generated/graphql"; | ||
| import { ReactElement } from "react"; | ||
|
|
||
| export const GROUP_EVENTS_MAPPING: Record<string, (node: string, group: string) => ReactElement> = { |
There was a problem hiding this comment.
ReactNode instead of ReactElement is "more correct"
| @@ -32,6 +40,14 @@ export const NodeEvents = () => { | |||
| {activities?.map((activity) => ( | |||
| <Event key={activity.id} {...activity} /> | |||
| ))} | |||
|
|
|||
| {data?.data?.[INFRAHUB_EVENT]?.count > MAX_EVENTS && ( | |||
There was a problem hiding this comment.
same things, it's better to put destructuration inside of useEvents
| return [searchFilter ?? "", setSearch]; | ||
| }; | ||
|
|
||
| export default useSearch; |
There was a problem hiding this comment.
I prefer to avoid default export to enforce function name
|
|
||
| const MAX_EVENTS = 5; | ||
|
|
||
| export const NodeEvents = () => { | ||
| const { objectid } = useParams(); | ||
|
|
||
| const { isLoading, data, error } = useEvents({ ids: [objectid], limit: MAX_EVENTS }); | ||
| const { isLoading, data, count, error } = useEvents({ ids: [objectid], limit: MAX_EVENTS }); |
There was a problem hiding this comment.
if you check isPending + error, data is guarantee to be available after
…nto ple-global-activities
