Skip to content

Commit 7a48d71

Browse files
olgennolgenn
committed
Events UI #3309 Added events and activity tabs on user details page
1 parent 9c82e48 commit 7a48d71

12 files changed

Lines changed: 331 additions & 151 deletions

File tree

‎frontend/src/pages/Events/List/ListPage.tsx‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import React from 'react';
2+
import { useTranslation } from 'react-i18next';
3+
4+
import { Button, Header, SpaceBetween } from 'components';
5+
6+
import { useBreadcrumbs } from 'hooks';
7+
import { ROUTES } from 'routes';
8+
9+
import { EventList } from './index';
10+
11+
export const ListPage: React.FC = () => {
12+
const { t } = useTranslation();
13+
14+
useBreadcrumbs([
15+
{
16+
text: t('navigation.events'),
17+
href: ROUTES.EVENTS.LIST,
18+
},
19+
]);
20+
21+
return (
22+
<EventList
23+
variant="full-page"
24+
withSearchParams
25+
renderHeader={({ refreshAction, disabledRefresh }) => {
26+
return (
27+
<Header
28+
variant="awsui-h1-sticky"
29+
actions={
30+
<SpaceBetween size="xs" direction="horizontal">
31+
<Button
32+
iconName="refresh"
33+
disabled={disabledRefresh}
34+
ariaLabel={t('common.refresh')}
35+
onClick={refreshAction}
36+
/>
37+
</SpaceBetween>
38+
}
39+
>
40+
{t('navigation.events')}
41+
</Header>
42+
);
43+
}}
44+
/>
45+
);
46+
};

‎frontend/src/pages/Events/List/hooks/useFilters.ts‎

Lines changed: 165 additions & 114 deletions
Original file line numberDiff line numberDiff line change
@@ -10,23 +10,7 @@ import { useGetUserListQuery } from 'services/user';
1010

1111
import { filterLastElementByPrefix } from '../helpers';
1212

13-
type RequestParamsKeys = keyof Pick<
14-
TEventListRequestParams,
15-
| 'target_projects'
16-
| 'target_users'
17-
| 'target_fleets'
18-
| 'target_instances'
19-
| 'target_runs'
20-
| 'target_jobs'
21-
| 'target_volumes'
22-
| 'target_gateways'
23-
| 'target_secrets'
24-
| 'within_projects'
25-
| 'within_fleets'
26-
| 'within_runs'
27-
| 'include_target_types'
28-
| 'actors'
29-
>;
13+
type RequestParamsKeys = keyof TEventListFilters;
3014

3115
const filterKeys: Record<string, RequestParamsKeys> = {
3216
TARGET_PROJECTS: 'target_projects',
@@ -76,7 +60,95 @@ const targetTypes = [
7660
{ label: 'Secret', value: 'secret' },
7761
];
7862

79-
export const useFilters = () => {
63+
const baseFilteringProperties = [
64+
{
65+
key: filterKeys.TARGET_PROJECTS,
66+
operators: ['='],
67+
propertyLabel: 'Target projects',
68+
groupValuesLabel: 'Project ids',
69+
},
70+
{
71+
key: filterKeys.TARGET_USERS,
72+
operators: ['='],
73+
propertyLabel: 'Target users',
74+
groupValuesLabel: 'Project ids',
75+
},
76+
{
77+
key: filterKeys.TARGET_FLEETS,
78+
operators: ['='],
79+
propertyLabel: 'Target fleet IDs',
80+
},
81+
{
82+
key: filterKeys.TARGET_INSTANCES,
83+
operators: ['='],
84+
propertyLabel: 'Target instance IDs',
85+
},
86+
{
87+
key: filterKeys.TARGET_RUNS,
88+
operators: ['='],
89+
propertyLabel: 'Target run IDs',
90+
},
91+
{
92+
key: filterKeys.TARGET_JOBS,
93+
operators: ['='],
94+
propertyLabel: 'Target job IDs',
95+
},
96+
{
97+
key: filterKeys.TARGET_VOLUMES,
98+
operators: ['='],
99+
propertyLabel: 'Target volume IDs',
100+
},
101+
{
102+
key: filterKeys.TARGET_GATEWAYS,
103+
operators: ['='],
104+
propertyLabel: 'Target gateway IDs',
105+
},
106+
{
107+
key: filterKeys.TARGET_SECRETS,
108+
operators: ['='],
109+
propertyLabel: 'Target secret IDs',
110+
},
111+
112+
{
113+
key: filterKeys.WITHIN_PROJECTS,
114+
operators: ['='],
115+
propertyLabel: 'Within projects',
116+
groupValuesLabel: 'Project ids',
117+
},
118+
119+
{
120+
key: filterKeys.WITHIN_FLEETS,
121+
operators: ['='],
122+
propertyLabel: 'Within fleet IDs',
123+
},
124+
125+
{
126+
key: filterKeys.WITHIN_RUNS,
127+
operators: ['='],
128+
propertyLabel: 'Within run IDs',
129+
},
130+
131+
{
132+
key: filterKeys.INCLUDE_TARGET_TYPES,
133+
operators: ['='],
134+
propertyLabel: 'Target types',
135+
groupValuesLabel: 'Target type values',
136+
},
137+
138+
{
139+
key: filterKeys.ACTORS,
140+
operators: ['='],
141+
propertyLabel: 'Actors',
142+
},
143+
];
144+
145+
export const useFilters = ({
146+
permanentFilters,
147+
withSearchParams,
148+
}: {
149+
permanentFilters?: Partial<TEventListFilters>;
150+
withSearchParams?: boolean;
151+
}) => {
80152
const [searchParams, setSearchParams] = useSearchParams();
81153
const { data: projectsData, isLoading: isLoadingProjects } = useGetProjectsQuery({});
82154
const { data: usersData, isLoading: isLoadingUsers } = useGetUserListQuery({});
@@ -86,7 +158,9 @@ export const useFilters = () => {
86158
);
87159

88160
const clearFilter = () => {
89-
setSearchParams({});
161+
if (withSearchParams) {
162+
setSearchParams({});
163+
}
90164
setPropertyFilterQuery(EMPTY_QUERY);
91165
};
92166

@@ -133,88 +207,6 @@ export const useFilters = () => {
133207
setSearchParams(searchParams);
134208
};
135209

136-
const filteringProperties = [
137-
{
138-
key: filterKeys.TARGET_PROJECTS,
139-
operators: ['='],
140-
propertyLabel: 'Target projects',
141-
groupValuesLabel: 'Project ids',
142-
},
143-
{
144-
key: filterKeys.TARGET_USERS,
145-
operators: ['='],
146-
propertyLabel: 'Target users',
147-
groupValuesLabel: 'Project ids',
148-
},
149-
{
150-
key: filterKeys.TARGET_FLEETS,
151-
operators: ['='],
152-
propertyLabel: 'Target fleet IDs',
153-
},
154-
{
155-
key: filterKeys.TARGET_INSTANCES,
156-
operators: ['='],
157-
propertyLabel: 'Target instance IDs',
158-
},
159-
{
160-
key: filterKeys.TARGET_RUNS,
161-
operators: ['='],
162-
propertyLabel: 'Target run IDs',
163-
},
164-
{
165-
key: filterKeys.TARGET_JOBS,
166-
operators: ['='],
167-
propertyLabel: 'Target job IDs',
168-
},
169-
{
170-
key: filterKeys.TARGET_VOLUMES,
171-
operators: ['='],
172-
propertyLabel: 'Target volume IDs',
173-
},
174-
{
175-
key: filterKeys.TARGET_GATEWAYS,
176-
operators: ['='],
177-
propertyLabel: 'Target gateway IDs',
178-
},
179-
{
180-
key: filterKeys.TARGET_SECRETS,
181-
operators: ['='],
182-
propertyLabel: 'Target secret IDs',
183-
},
184-
185-
{
186-
key: filterKeys.WITHIN_PROJECTS,
187-
operators: ['='],
188-
propertyLabel: 'Within projects',
189-
groupValuesLabel: 'Project ids',
190-
},
191-
192-
{
193-
key: filterKeys.WITHIN_FLEETS,
194-
operators: ['='],
195-
propertyLabel: 'Within fleet IDs',
196-
},
197-
198-
{
199-
key: filterKeys.WITHIN_RUNS,
200-
operators: ['='],
201-
propertyLabel: 'Within run IDs',
202-
},
203-
204-
{
205-
key: filterKeys.INCLUDE_TARGET_TYPES,
206-
operators: ['='],
207-
propertyLabel: 'Target types',
208-
groupValuesLabel: 'Target type values',
209-
},
210-
211-
{
212-
key: filterKeys.ACTORS,
213-
operators: ['='],
214-
propertyLabel: 'Actors',
215-
},
216-
];
217-
218210
const onChangePropertyFilterHandle = ({ tokens, operation }: PropertyFilterProps.Query) => {
219211
let filteredTokens = [...tokens];
220212

@@ -226,7 +218,9 @@ export const useFilters = () => {
226218
}
227219
});
228220

229-
setSearchParamsHandle({ tokens: filteredTokens });
221+
if (withSearchParams) {
222+
setSearchParamsHandle({ tokens: filteredTokens });
223+
}
230224

231225
setPropertyFilterQuery({
232226
operation,
@@ -238,30 +232,86 @@ export const useFilters = () => {
238232
onChangePropertyFilterHandle(detail);
239233
};
240234

235+
const filteringProperties = useMemo(() => {
236+
const permanentFiltersKeysMap = new Map<string, string>();
237+
238+
for (const prefix of onlyOneFilterGroupPrefixes) {
239+
console.log({ prefix });
240+
const permanentFilterKey = Object.keys(permanentFilters ?? {}).find((filterKey) => filterKey.startsWith(prefix));
241+
242+
if (permanentFilterKey) {
243+
permanentFiltersKeysMap.set(prefix, permanentFilterKey);
244+
}
245+
}
246+
247+
if (permanentFiltersKeysMap.size === 0) {
248+
return baseFilteringProperties;
249+
}
250+
251+
return baseFilteringProperties.filter(({ key }) => {
252+
const propertyPrefix = onlyOneFilterGroupPrefixes.find((prefix) => key.startsWith(prefix));
253+
254+
if (!propertyPrefix) {
255+
return true;
256+
}
257+
258+
if (permanentFiltersKeysMap.has(propertyPrefix)) {
259+
return key === permanentFiltersKeysMap.get(propertyPrefix);
260+
}
261+
262+
return true;
263+
});
264+
}, [permanentFilters]);
265+
241266
const filteringRequestParams = useMemo(() => {
242267
const params = tokensToRequestParams<RequestParamsKeys>({
243268
tokens: propertyFilterQuery.tokens,
244269
arrayFieldKeys: multipleChoiseKeys,
245270
});
246271

247-
const targetProjects = params[filterKeys.TARGET_PROJECTS]
248-
?.map((name: string) => projectsData?.data?.find(({ project_name }) => project_name === name)?.['project_id'])
272+
const filterParamsWithPermanentFitters = (filterKey: RequestParamsKeys): string[] => {
273+
let paramsFilter = params[filterKey] ?? '';
274+
const permanentFilter = permanentFilters?.[filterKey] ?? '';
275+
276+
if (!Array.isArray(paramsFilter) && typeof paramsFilter === 'object') {
277+
paramsFilter = '';
278+
}
279+
280+
if (Array.isArray(paramsFilter) && Array.isArray(permanentFilter)) {
281+
return [...paramsFilter, ...permanentFilter];
282+
}
283+
284+
if (Array.isArray(paramsFilter) && !Array.isArray(permanentFilter)) {
285+
return [...paramsFilter, permanentFilter];
286+
}
287+
288+
if (!Array.isArray(paramsFilter) && Array.isArray(permanentFilter)) {
289+
return [paramsFilter, ...permanentFilter];
290+
}
291+
292+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
293+
// @ts-expect-error
294+
return [paramsFilter, permanentFilter];
295+
};
296+
297+
const targetProjects = filterParamsWithPermanentFitters(filterKeys.TARGET_PROJECTS)
298+
.map((name: string) => projectsData?.data?.find(({ project_name }) => project_name === name)?.['project_id'])
249299
.filter(Boolean);
250300

251-
const withInProjects = params[filterKeys.WITHIN_PROJECTS]
252-
?.map((name: string) => projectsData?.data?.find(({ project_name }) => project_name === name)?.['project_id'])
301+
const withInProjects = filterParamsWithPermanentFitters(filterKeys.WITHIN_PROJECTS)
302+
.map((name: string) => projectsData?.data?.find(({ project_name }) => project_name === name)?.['project_id'])
253303
.filter(Boolean);
254304

255-
const targetUsers = params[filterKeys.TARGET_USERS]
256-
?.map((name: string) => usersData?.data?.find(({ username }) => username === name)?.['id'])
305+
const targetUsers = filterParamsWithPermanentFitters(filterKeys.TARGET_USERS)
306+
.map((name: string) => usersData?.data?.find(({ username }) => username === name)?.['id'])
257307
.filter(Boolean);
258308

259-
const actors = params[filterKeys.ACTORS]
260-
?.map((name: string) => usersData?.data?.find(({ username }) => username === name)?.['id'])
309+
const actors = filterParamsWithPermanentFitters(filterKeys.ACTORS)
310+
.map((name: string) => usersData?.data?.find(({ username }) => username === name)?.['id'])
261311
.filter(Boolean);
262312

263-
const includeTargetTypes = params[filterKeys.INCLUDE_TARGET_TYPES]
264-
?.map((selectedLabel: string) => targetTypes?.find(({ label }) => label === selectedLabel)?.['value'])
313+
const includeTargetTypes = filterParamsWithPermanentFitters(filterKeys.INCLUDE_TARGET_TYPES)
314+
.map((selectedLabel: string) => targetTypes?.find(({ label }) => label === selectedLabel)?.['value'])
265315
.filter(Boolean);
266316

267317
const mappedFields = {
@@ -303,9 +353,10 @@ export const useFilters = () => {
303353
filterKeys.ACTORS,
304354
filterKeys.INCLUDE_TARGET_TYPES,
305355
]),
356+
...permanentFilters,
306357
...mappedFields,
307-
} as Partial<TRunsRequestParams>;
308-
}, [propertyFilterQuery, usersData, projectsData]);
358+
} as TEventListFilters;
359+
}, [propertyFilterQuery, usersData, projectsData, permanentFilters]);
309360

310361
return {
311362
filteringRequestParams,

0 commit comments

Comments
 (0)