From 9c82e48dcf0b54d9322b8d704ae517166c123174 Mon Sep 17 00:00:00 2001
From: Oleg Vavilov <vavilovolegik@gmail.com>
Date: Mon, 2 Feb 2026 20:21:12 +0300
Subject: [PATCH 1/2] Events UI #3309 Added links to event list from project
 and user details pages

---
 frontend/src/locale/en.json                   |  3 +
 .../src/pages/Events/List/hooks/useFilters.ts | 66 ++++++++++++-------
 frontend/src/pages/Events/List/index.tsx      | 17 +++--
 frontend/src/pages/Project/Details/index.tsx  | 19 +++++-
 frontend/src/pages/User/Details/index.tsx     | 13 +++-
 5 files changed, 86 insertions(+), 32 deletions(-)

diff --git a/frontend/src/locale/en.json b/frontend/src/locale/en.json
index e11541edba..b8b2d0c35b 100644
--- a/frontend/src/locale/en.json
+++ b/frontend/src/locale/en.json
@@ -182,6 +182,7 @@
     "repositories": "Repositories",
     "runs": "Runs",
     "tags": "Tags",
+    "events": "Project events",
     "settings": "Settings",
     "join": "Join",
     "leave_confirm_title": "Leave project",
@@ -695,6 +696,8 @@
     "account_settings": "User settings",
     "settings": "Settings",
     "projects": "Projects",
+    "events": "User events",
+    "activity": "User activity",
     "create": {
       "page_title": "Create user",
       "error_notification": "Create user error",
diff --git a/frontend/src/pages/Events/List/hooks/useFilters.ts b/frontend/src/pages/Events/List/hooks/useFilters.ts
index 6a82b3a654..14c245f374 100644
--- a/frontend/src/pages/Events/List/hooks/useFilters.ts
+++ b/frontend/src/pages/Events/List/hooks/useFilters.ts
@@ -1,5 +1,6 @@
 import { useMemo, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
+import { omit } from 'lodash';
 
 import type { PropertyFilterProps } from 'components';
 
@@ -77,8 +78,8 @@ const targetTypes = [
 
 export const useFilters = () => {
     const [searchParams, setSearchParams] = useSearchParams();
-    const { data: projectsData } = useGetProjectsQuery({});
-    const { data: usersData } = useGetUserListQuery({});
+    const { data: projectsData, isLoading: isLoadingProjects } = useGetProjectsQuery({});
+    const { data: usersData, isLoading: isLoadingUsers } = useGetUserListQuery({});
 
     const [propertyFilterQuery, setPropertyFilterQuery] = useState<PropertyFilterProps.Query>(() =>
         requestParamsToTokens<RequestParamsKeys>({ searchParams, filterKeys }),
@@ -243,51 +244,65 @@ export const useFilters = () => {
             arrayFieldKeys: multipleChoiseKeys,
         });
 
+        const targetProjects = params[filterKeys.TARGET_PROJECTS]
+            ?.map((name: string) => projectsData?.data?.find(({ project_name }) => project_name === name)?.['project_id'])
+            .filter(Boolean);
+
+        const withInProjects = params[filterKeys.WITHIN_PROJECTS]
+            ?.map((name: string) => projectsData?.data?.find(({ project_name }) => project_name === name)?.['project_id'])
+            .filter(Boolean);
+
+        const targetUsers = params[filterKeys.TARGET_USERS]
+            ?.map((name: string) => usersData?.data?.find(({ username }) => username === name)?.['id'])
+            .filter(Boolean);
+
+        const actors = params[filterKeys.ACTORS]
+            ?.map((name: string) => usersData?.data?.find(({ username }) => username === name)?.['id'])
+            .filter(Boolean);
+
+        const includeTargetTypes = params[filterKeys.INCLUDE_TARGET_TYPES]
+            ?.map((selectedLabel: string) => targetTypes?.find(({ label }) => label === selectedLabel)?.['value'])
+            .filter(Boolean);
+
         const mappedFields = {
-            ...(params[filterKeys.TARGET_PROJECTS] && Array.isArray(params[filterKeys.TARGET_PROJECTS])
+            ...(targetProjects?.length
                 ? {
-                      [filterKeys.TARGET_PROJECTS]: params[filterKeys.TARGET_PROJECTS]?.map(
-                          (name: string) =>
-                              projectsData?.data?.find(({ project_name }) => project_name === name)?.['project_id'],
-                      ),
+                      [filterKeys.TARGET_PROJECTS]: targetProjects,
                   }
                 : {}),
-            ...(params[filterKeys.WITHIN_PROJECTS] && Array.isArray(params[filterKeys.WITHIN_PROJECTS])
+            ...(withInProjects?.length
                 ? {
-                      [filterKeys.WITHIN_PROJECTS]: params[filterKeys.WITHIN_PROJECTS]?.map(
-                          (name: string) =>
-                              projectsData?.data?.find(({ project_name }) => project_name === name)?.['project_id'],
-                      ),
+                      [filterKeys.WITHIN_PROJECTS]: withInProjects,
                   }
                 : {}),
 
-            ...(params[filterKeys.TARGET_USERS] && Array.isArray(params[filterKeys.TARGET_USERS])
+            ...(targetUsers?.length
                 ? {
-                      [filterKeys.TARGET_USERS]: params[filterKeys.TARGET_USERS]?.map(
-                          (name: string) => usersData?.data?.find(({ username }) => username === name)?.['id'],
-                      ),
+                      [filterKeys.TARGET_USERS]: targetUsers,
                   }
                 : {}),
 
-            ...(params[filterKeys.ACTORS] && Array.isArray(params[filterKeys.ACTORS])
+            ...(actors?.length
                 ? {
-                      [filterKeys.ACTORS]: params[filterKeys.ACTORS]?.map(
-                          (name: string) => usersData?.data?.find(({ username }) => username === name)?.['id'],
-                      ),
+                      [filterKeys.ACTORS]: actors,
                   }
                 : {}),
 
-            ...(params[filterKeys.INCLUDE_TARGET_TYPES] && Array.isArray(params[filterKeys.INCLUDE_TARGET_TYPES])
+            ...(includeTargetTypes?.length
                 ? {
-                      [filterKeys.INCLUDE_TARGET_TYPES]: params[filterKeys.INCLUDE_TARGET_TYPES]?.map(
-                          (selectedLabel: string) => targetTypes?.find(({ label }) => label === selectedLabel)?.['value'],
-                      ),
+                      [filterKeys.INCLUDE_TARGET_TYPES]: includeTargetTypes,
                   }
                 : {}),
         };
 
         return {
-            ...params,
+            ...omit(params, [
+                filterKeys.TARGET_PROJECTS,
+                filterKeys.WITHIN_PROJECTS,
+                filterKeys.TARGET_USERS,
+                filterKeys.ACTORS,
+                filterKeys.INCLUDE_TARGET_TYPES,
+            ]),
             ...mappedFields,
         } as Partial<TRunsRequestParams>;
     }, [propertyFilterQuery, usersData, projectsData]);
@@ -299,5 +314,6 @@ export const useFilters = () => {
         onChangePropertyFilter,
         filteringOptions,
         filteringProperties,
+        isLoadingFilters: isLoadingProjects || isLoadingUsers,
     } as const;
 };
diff --git a/frontend/src/pages/Events/List/index.tsx b/frontend/src/pages/Events/List/index.tsx
index fcf979d554..cfb681b3e5 100644
--- a/frontend/src/pages/Events/List/index.tsx
+++ b/frontend/src/pages/Events/List/index.tsx
@@ -24,12 +24,19 @@ export const EventList = () => {
         },
     ]);
 
-    const { filteringRequestParams, propertyFilterQuery, onChangePropertyFilter, filteringOptions, filteringProperties } =
-        useFilters();
+    const {
+        filteringRequestParams,
+        propertyFilterQuery,
+        onChangePropertyFilter,
+        filteringOptions,
+        filteringProperties,
+        isLoadingFilters,
+    } = useFilters();
 
     const { data, isLoading, refreshList, isLoadingMore } = useInfiniteScroll<IEvent, TEventListRequestParams>({
         useLazyQuery: useLazyGetAllEventsQuery,
         args: { ...filteringRequestParams, limit: DEFAULT_TABLE_PAGE_SIZE },
+        skip: isLoadingFilters,
 
         getPaginationParams: (lastEvent) => ({
             prev_recorded_at: lastEvent.recorded_at,
@@ -47,13 +54,15 @@ export const EventList = () => {
 
     const { columns } = useColumnsDefinitions();
 
+    const loading = isLoadingFilters || isLoading;
+
     return (
         <Table
             {...collectionProps}
             variant="full-page"
             columnDefinitions={columns}
             items={items}
-            loading={isLoading}
+            loading={loading}
             loadingText={t('common.loading')}
             stickyHeader={true}
             selectionType="multi"
@@ -64,7 +73,7 @@ export const EventList = () => {
                         <SpaceBetween size="xs" direction="horizontal">
                             <Button
                                 iconName="refresh"
-                                disabled={isLoading}
+                                disabled={loading}
                                 ariaLabel={t('common.refresh')}
                                 onClick={refreshList}
                             />
diff --git a/frontend/src/pages/Project/Details/index.tsx b/frontend/src/pages/Project/Details/index.tsx
index b26c921a05..c59e94685d 100644
--- a/frontend/src/pages/Project/Details/index.tsx
+++ b/frontend/src/pages/Project/Details/index.tsx
@@ -1,14 +1,29 @@
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 import { Outlet, useParams } from 'react-router-dom';
 
-import { ContentLayout, DetailsHeader } from 'components';
+import { ContentLayout, DetailsHeader, NavigateLink } from 'components';
+
+import { ROUTES } from 'routes';
 
 export const ProjectDetails: React.FC = () => {
     const params = useParams();
     const paramProjectName = params.projectName ?? '';
+    const { t } = useTranslation();
 
     return (
-        <ContentLayout header={<DetailsHeader title={paramProjectName} />}>
+        <ContentLayout
+            header={
+                <DetailsHeader
+                    title={paramProjectName}
+                    actionButtons={
+                        <NavigateLink href={ROUTES.EVENTS.LIST + `?within_projects=${paramProjectName}`}>
+                            {t('projects.events')}
+                        </NavigateLink>
+                    }
+                />
+            }
+        >
             <Outlet />
         </ContentLayout>
     );
diff --git a/frontend/src/pages/User/Details/index.tsx b/frontend/src/pages/User/Details/index.tsx
index 8f1b2d393d..84322fa5e9 100644
--- a/frontend/src/pages/User/Details/index.tsx
+++ b/frontend/src/pages/User/Details/index.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Outlet, useNavigate, useParams } from 'react-router-dom';
 
-import { Box, ConfirmationDialog, ContentLayout, SpaceBetween, Tabs } from 'components';
+import { Box, ConfirmationDialog, ContentLayout, NavigateLink, SpaceBetween, Tabs } from 'components';
 import { DetailsHeader } from 'components';
 
 import { useNotifications /* usePermissionGuard*/ } from 'hooks';
@@ -87,6 +87,17 @@ export const UserDetails: React.FC = () => {
                         title={paramUserName}
                         // deleteAction={isAvailableDeleteUser ? toggleDeleteConfirm : undefined}
                         // deleteDisabled={isDeleting}
+                        actionButtons={
+                            <>
+                                <NavigateLink href={ROUTES.EVENTS.LIST + `?target_users=${paramUserName}`}>
+                                    {t('users.events')}
+                                </NavigateLink>
+
+                                <NavigateLink href={ROUTES.EVENTS.LIST + `?actors=${paramUserName}`}>
+                                    {t('users.activity')}
+                                </NavigateLink>
+                            </>
+                        }
                     />
                 }
             >

From 7a48d71bbcb861d17a2bf5c5911fdfb56f53aa51 Mon Sep 17 00:00:00 2001
From: Oleg Vavilov <vavilovolegik@gmail.com>
Date: Tue, 3 Feb 2026 23:22:11 +0300
Subject: [PATCH 2/2] Events UI #3309 Added events and activity tabs on user
 details page

---
 frontend/src/pages/Events/List/ListPage.tsx   |  46 +++
 .../src/pages/Events/List/hooks/useFilters.ts | 279 +++++++++++-------
 frontend/src/pages/Events/List/index.tsx      |  39 ++-
 frontend/src/pages/Events/index.tsx           |   2 +-
 .../src/pages/User/Details/Activity/index.tsx |  31 ++
 .../src/pages/User/Details/Events/index.tsx   |  31 ++
 .../src/pages/User/Details/Projects/index.tsx |   4 +
 frontend/src/pages/User/Details/index.tsx     |  27 +-
 frontend/src/pages/User/Details/types.ts      |   2 +
 frontend/src/router.tsx                       |  10 +-
 frontend/src/routes.ts                        |   8 +
 frontend/src/types/event.d.ts                 |   3 +-
 12 files changed, 331 insertions(+), 151 deletions(-)
 create mode 100644 frontend/src/pages/Events/List/ListPage.tsx
 create mode 100644 frontend/src/pages/User/Details/Activity/index.tsx
 create mode 100644 frontend/src/pages/User/Details/Events/index.tsx

diff --git a/frontend/src/pages/Events/List/ListPage.tsx b/frontend/src/pages/Events/List/ListPage.tsx
new file mode 100644
index 0000000000..9117b37bf0
--- /dev/null
+++ b/frontend/src/pages/Events/List/ListPage.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { Button, Header, SpaceBetween } from 'components';
+
+import { useBreadcrumbs } from 'hooks';
+import { ROUTES } from 'routes';
+
+import { EventList } from './index';
+
+export const ListPage: React.FC = () => {
+    const { t } = useTranslation();
+
+    useBreadcrumbs([
+        {
+            text: t('navigation.events'),
+            href: ROUTES.EVENTS.LIST,
+        },
+    ]);
+
+    return (
+        <EventList
+            variant="full-page"
+            withSearchParams
+            renderHeader={({ refreshAction, disabledRefresh }) => {
+                return (
+                    <Header
+                        variant="awsui-h1-sticky"
+                        actions={
+                            <SpaceBetween size="xs" direction="horizontal">
+                                <Button
+                                    iconName="refresh"
+                                    disabled={disabledRefresh}
+                                    ariaLabel={t('common.refresh')}
+                                    onClick={refreshAction}
+                                />
+                            </SpaceBetween>
+                        }
+                    >
+                        {t('navigation.events')}
+                    </Header>
+                );
+            }}
+        />
+    );
+};
diff --git a/frontend/src/pages/Events/List/hooks/useFilters.ts b/frontend/src/pages/Events/List/hooks/useFilters.ts
index 14c245f374..7c88973dde 100644
--- a/frontend/src/pages/Events/List/hooks/useFilters.ts
+++ b/frontend/src/pages/Events/List/hooks/useFilters.ts
@@ -10,23 +10,7 @@ import { useGetUserListQuery } from 'services/user';
 
 import { filterLastElementByPrefix } from '../helpers';
 
-type RequestParamsKeys = keyof Pick<
-    TEventListRequestParams,
-    | 'target_projects'
-    | 'target_users'
-    | 'target_fleets'
-    | 'target_instances'
-    | 'target_runs'
-    | 'target_jobs'
-    | 'target_volumes'
-    | 'target_gateways'
-    | 'target_secrets'
-    | 'within_projects'
-    | 'within_fleets'
-    | 'within_runs'
-    | 'include_target_types'
-    | 'actors'
->;
+type RequestParamsKeys = keyof TEventListFilters;
 
 const filterKeys: Record<string, RequestParamsKeys> = {
     TARGET_PROJECTS: 'target_projects',
@@ -76,7 +60,95 @@ const targetTypes = [
     { label: 'Secret', value: 'secret' },
 ];
 
-export const useFilters = () => {
+const baseFilteringProperties = [
+    {
+        key: filterKeys.TARGET_PROJECTS,
+        operators: ['='],
+        propertyLabel: 'Target projects',
+        groupValuesLabel: 'Project ids',
+    },
+    {
+        key: filterKeys.TARGET_USERS,
+        operators: ['='],
+        propertyLabel: 'Target users',
+        groupValuesLabel: 'Project ids',
+    },
+    {
+        key: filterKeys.TARGET_FLEETS,
+        operators: ['='],
+        propertyLabel: 'Target fleet IDs',
+    },
+    {
+        key: filterKeys.TARGET_INSTANCES,
+        operators: ['='],
+        propertyLabel: 'Target instance IDs',
+    },
+    {
+        key: filterKeys.TARGET_RUNS,
+        operators: ['='],
+        propertyLabel: 'Target run IDs',
+    },
+    {
+        key: filterKeys.TARGET_JOBS,
+        operators: ['='],
+        propertyLabel: 'Target job IDs',
+    },
+    {
+        key: filterKeys.TARGET_VOLUMES,
+        operators: ['='],
+        propertyLabel: 'Target volume IDs',
+    },
+    {
+        key: filterKeys.TARGET_GATEWAYS,
+        operators: ['='],
+        propertyLabel: 'Target gateway IDs',
+    },
+    {
+        key: filterKeys.TARGET_SECRETS,
+        operators: ['='],
+        propertyLabel: 'Target secret IDs',
+    },
+
+    {
+        key: filterKeys.WITHIN_PROJECTS,
+        operators: ['='],
+        propertyLabel: 'Within projects',
+        groupValuesLabel: 'Project ids',
+    },
+
+    {
+        key: filterKeys.WITHIN_FLEETS,
+        operators: ['='],
+        propertyLabel: 'Within fleet IDs',
+    },
+
+    {
+        key: filterKeys.WITHIN_RUNS,
+        operators: ['='],
+        propertyLabel: 'Within run IDs',
+    },
+
+    {
+        key: filterKeys.INCLUDE_TARGET_TYPES,
+        operators: ['='],
+        propertyLabel: 'Target types',
+        groupValuesLabel: 'Target type values',
+    },
+
+    {
+        key: filterKeys.ACTORS,
+        operators: ['='],
+        propertyLabel: 'Actors',
+    },
+];
+
+export const useFilters = ({
+    permanentFilters,
+    withSearchParams,
+}: {
+    permanentFilters?: Partial<TEventListFilters>;
+    withSearchParams?: boolean;
+}) => {
     const [searchParams, setSearchParams] = useSearchParams();
     const { data: projectsData, isLoading: isLoadingProjects } = useGetProjectsQuery({});
     const { data: usersData, isLoading: isLoadingUsers } = useGetUserListQuery({});
@@ -86,7 +158,9 @@ export const useFilters = () => {
     );
 
     const clearFilter = () => {
-        setSearchParams({});
+        if (withSearchParams) {
+            setSearchParams({});
+        }
         setPropertyFilterQuery(EMPTY_QUERY);
     };
 
@@ -133,88 +207,6 @@ export const useFilters = () => {
         setSearchParams(searchParams);
     };
 
-    const filteringProperties = [
-        {
-            key: filterKeys.TARGET_PROJECTS,
-            operators: ['='],
-            propertyLabel: 'Target projects',
-            groupValuesLabel: 'Project ids',
-        },
-        {
-            key: filterKeys.TARGET_USERS,
-            operators: ['='],
-            propertyLabel: 'Target users',
-            groupValuesLabel: 'Project ids',
-        },
-        {
-            key: filterKeys.TARGET_FLEETS,
-            operators: ['='],
-            propertyLabel: 'Target fleet IDs',
-        },
-        {
-            key: filterKeys.TARGET_INSTANCES,
-            operators: ['='],
-            propertyLabel: 'Target instance IDs',
-        },
-        {
-            key: filterKeys.TARGET_RUNS,
-            operators: ['='],
-            propertyLabel: 'Target run IDs',
-        },
-        {
-            key: filterKeys.TARGET_JOBS,
-            operators: ['='],
-            propertyLabel: 'Target job IDs',
-        },
-        {
-            key: filterKeys.TARGET_VOLUMES,
-            operators: ['='],
-            propertyLabel: 'Target volume IDs',
-        },
-        {
-            key: filterKeys.TARGET_GATEWAYS,
-            operators: ['='],
-            propertyLabel: 'Target gateway IDs',
-        },
-        {
-            key: filterKeys.TARGET_SECRETS,
-            operators: ['='],
-            propertyLabel: 'Target secret IDs',
-        },
-
-        {
-            key: filterKeys.WITHIN_PROJECTS,
-            operators: ['='],
-            propertyLabel: 'Within projects',
-            groupValuesLabel: 'Project ids',
-        },
-
-        {
-            key: filterKeys.WITHIN_FLEETS,
-            operators: ['='],
-            propertyLabel: 'Within fleet IDs',
-        },
-
-        {
-            key: filterKeys.WITHIN_RUNS,
-            operators: ['='],
-            propertyLabel: 'Within run IDs',
-        },
-
-        {
-            key: filterKeys.INCLUDE_TARGET_TYPES,
-            operators: ['='],
-            propertyLabel: 'Target types',
-            groupValuesLabel: 'Target type values',
-        },
-
-        {
-            key: filterKeys.ACTORS,
-            operators: ['='],
-            propertyLabel: 'Actors',
-        },
-    ];
-
     const onChangePropertyFilterHandle = ({ tokens, operation }: PropertyFilterProps.Query) => {
         let filteredTokens = [...tokens];
 
@@ -226,7 +218,9 @@ export const useFilters = () => {
             }
         });
 
-        setSearchParamsHandle({ tokens: filteredTokens });
+        if (withSearchParams) {
+            setSearchParamsHandle({ tokens: filteredTokens });
+        }
 
         setPropertyFilterQuery({
             operation,
@@ -238,30 +232,86 @@ export const useFilters = () => {
         onChangePropertyFilterHandle(detail);
     };
 
+    const filteringProperties = useMemo(() => {
+        const permanentFiltersKeysMap = new Map<string, string>();
+
+        for (const prefix of onlyOneFilterGroupPrefixes) {
+            console.log({ prefix });
+            const permanentFilterKey = Object.keys(permanentFilters ?? {}).find((filterKey) => filterKey.startsWith(prefix));
+
+            if (permanentFilterKey) {
+                permanentFiltersKeysMap.set(prefix, permanentFilterKey);
+            }
+        }
+
+        if (permanentFiltersKeysMap.size === 0) {
+            return baseFilteringProperties;
+        }
+
+        return baseFilteringProperties.filter(({ key }) => {
+            const propertyPrefix = onlyOneFilterGroupPrefixes.find((prefix) => key.startsWith(prefix));
+
+            if (!propertyPrefix) {
+                return true;
+            }
+
+            if (permanentFiltersKeysMap.has(propertyPrefix)) {
+                return key === permanentFiltersKeysMap.get(propertyPrefix);
+            }
+
+            return true;
+        });
+    }, [permanentFilters]);
+
     const filteringRequestParams = useMemo(() => {
         const params = tokensToRequestParams<RequestParamsKeys>({
             tokens: propertyFilterQuery.tokens,
             arrayFieldKeys: multipleChoiseKeys,
         });
 
-        const targetProjects = params[filterKeys.TARGET_PROJECTS]
-            ?.map((name: string) => projectsData?.data?.find(({ project_name }) => project_name === name)?.['project_id'])
+        const filterParamsWithPermanentFitters = (filterKey: RequestParamsKeys): string[] => {
+            let paramsFilter = params[filterKey] ?? '';
+            const permanentFilter = permanentFilters?.[filterKey] ?? '';
+
+            if (!Array.isArray(paramsFilter) && typeof paramsFilter === 'object') {
+                paramsFilter = '';
+            }
+
+            if (Array.isArray(paramsFilter) && Array.isArray(permanentFilter)) {
+                return [...paramsFilter, ...permanentFilter];
+            }
+
+            if (Array.isArray(paramsFilter) && !Array.isArray(permanentFilter)) {
+                return [...paramsFilter, permanentFilter];
+            }
+
+            if (!Array.isArray(paramsFilter) && Array.isArray(permanentFilter)) {
+                return [paramsFilter, ...permanentFilter];
+            }
+
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-expect-error
+            return [paramsFilter, permanentFilter];
+        };
+
+        const targetProjects = filterParamsWithPermanentFitters(filterKeys.TARGET_PROJECTS)
+            .map((name: string) => projectsData?.data?.find(({ project_name }) => project_name === name)?.['project_id'])
             .filter(Boolean);
 
-        const withInProjects = params[filterKeys.WITHIN_PROJECTS]
-            ?.map((name: string) => projectsData?.data?.find(({ project_name }) => project_name === name)?.['project_id'])
+        const withInProjects = filterParamsWithPermanentFitters(filterKeys.WITHIN_PROJECTS)
+            .map((name: string) => projectsData?.data?.find(({ project_name }) => project_name === name)?.['project_id'])
             .filter(Boolean);
 
-        const targetUsers = params[filterKeys.TARGET_USERS]
-            ?.map((name: string) => usersData?.data?.find(({ username }) => username === name)?.['id'])
+        const targetUsers = filterParamsWithPermanentFitters(filterKeys.TARGET_USERS)
+            .map((name: string) => usersData?.data?.find(({ username }) => username === name)?.['id'])
             .filter(Boolean);
 
-        const actors = params[filterKeys.ACTORS]
-            ?.map((name: string) => usersData?.data?.find(({ username }) => username === name)?.['id'])
+        const actors = filterParamsWithPermanentFitters(filterKeys.ACTORS)
+            .map((name: string) => usersData?.data?.find(({ username }) => username === name)?.['id'])
             .filter(Boolean);
 
-        const includeTargetTypes = params[filterKeys.INCLUDE_TARGET_TYPES]
-            ?.map((selectedLabel: string) => targetTypes?.find(({ label }) => label === selectedLabel)?.['value'])
+        const includeTargetTypes = filterParamsWithPermanentFitters(filterKeys.INCLUDE_TARGET_TYPES)
+            .map((selectedLabel: string) => targetTypes?.find(({ label }) => label === selectedLabel)?.['value'])
             .filter(Boolean);
 
         const mappedFields = {
@@ -303,9 +353,10 @@ export const useFilters = () => {
                 filterKeys.ACTORS,
                 filterKeys.INCLUDE_TARGET_TYPES,
             ]),
+            ...permanentFilters,
             ...mappedFields,
-        } as Partial<TRunsRequestParams>;
-    }, [propertyFilterQuery, usersData, projectsData]);
+        } as TEventListFilters;
+    }, [propertyFilterQuery, usersData, projectsData, permanentFilters]);
 
     return {
         filteringRequestParams,
diff --git a/frontend/src/pages/Events/List/index.tsx b/frontend/src/pages/Events/List/index.tsx
index cfb681b3e5..cc8c0a605f 100644
--- a/frontend/src/pages/Events/List/index.tsx
+++ b/frontend/src/pages/Events/List/index.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { Button, Header, Loader, PropertyFilter, SpaceBetween, Table } from 'components';
+import { Loader, PropertyFilter, Table } from 'components';
+import { TableProps } from 'components';
 
 import { DEFAULT_TABLE_PAGE_SIZE } from 'consts';
 import { useBreadcrumbs, useInfiniteScroll } from 'hooks';
@@ -14,7 +15,18 @@ import { useFilters } from './hooks/useFilters';
 
 import styles from '../../Runs/List/styles.module.scss';
 
-export const EventList = () => {
+type RenderHeaderArgs = {
+    refreshAction?: () => void;
+    disabledRefresh?: boolean;
+};
+
+type EventListProps = Pick<TableProps, 'variant'> & {
+    withSearchParams?: boolean;
+    renderHeader?: (args: RenderHeaderArgs) => React.ReactNode;
+    permanentFilters?: Partial<TEventListFilters>;
+};
+
+export const EventList: React.FC<EventListProps> = ({ withSearchParams, permanentFilters, renderHeader, ...props }) => {
     const { t } = useTranslation();
 
     useBreadcrumbs([
@@ -31,7 +43,7 @@ export const EventList = () => {
         filteringOptions,
         filteringProperties,
         isLoadingFilters,
-    } = useFilters();
+    } = useFilters({ permanentFilters, withSearchParams });
 
     const { data, isLoading, refreshList, isLoadingMore } = useInfiniteScroll<IEvent, TEventListRequestParams>({
         useLazyQuery: useLazyGetAllEventsQuery,
@@ -58,31 +70,14 @@ export const EventList = () => {
 
     return (
         <Table
+            {...props}
             {...collectionProps}
-            variant="full-page"
             columnDefinitions={columns}
             items={items}
             loading={loading}
             loadingText={t('common.loading')}
             stickyHeader={true}
-            selectionType="multi"
-            header={
-                <Header
-                    variant="awsui-h1-sticky"
-                    actions={
-                        <SpaceBetween size="xs" direction="horizontal">
-                            <Button
-                                iconName="refresh"
-                                disabled={loading}
-                                ariaLabel={t('common.refresh')}
-                                onClick={refreshList}
-                            />
-                        </SpaceBetween>
-                    }
-                >
-                    {t('navigation.events')}
-                </Header>
-            }
+            header={renderHeader?.({ refreshAction: refreshList, disabledRefresh: loading })}
             filter={
                 <div className={styles.selectFilters}>
                     <div className={styles.propertyFilter}>
diff --git a/frontend/src/pages/Events/index.tsx b/frontend/src/pages/Events/index.tsx
index 90105f2580..7171443bc1 100644
--- a/frontend/src/pages/Events/index.tsx
+++ b/frontend/src/pages/Events/index.tsx
@@ -1 +1 @@
-export { EventList } from './List';
+export { ListPage as EventList } from './List/ListPage';
diff --git a/frontend/src/pages/User/Details/Activity/index.tsx b/frontend/src/pages/User/Details/Activity/index.tsx
new file mode 100644
index 0000000000..6fac239ff2
--- /dev/null
+++ b/frontend/src/pages/User/Details/Activity/index.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useParams } from 'react-router-dom';
+
+import { useBreadcrumbs } from 'hooks';
+import { ROUTES } from 'routes';
+
+import { EventList } from 'pages/Events/List';
+
+export const Activity: React.FC = () => {
+    const { t } = useTranslation();
+    const params = useParams();
+    const paramUserName = params.userName ?? '';
+
+    useBreadcrumbs([
+        {
+            text: t('navigation.account'),
+            href: ROUTES.USER.LIST,
+        },
+        {
+            text: paramUserName,
+            href: ROUTES.USER.DETAILS.FORMAT(paramUserName),
+        },
+        {
+            text: t('users.activity'),
+            href: ROUTES.USER.ACTIVITY.FORMAT(paramUserName),
+        },
+    ]);
+
+    return <EventList variant="borderless" permanentFilters={{ actors: [paramUserName] }} />;
+};
diff --git a/frontend/src/pages/User/Details/Events/index.tsx b/frontend/src/pages/User/Details/Events/index.tsx
new file mode 100644
index 0000000000..846062ba4c
--- /dev/null
+++ b/frontend/src/pages/User/Details/Events/index.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useParams } from 'react-router-dom';
+
+import { useBreadcrumbs } from 'hooks';
+import { ROUTES } from 'routes';
+
+import { EventList } from 'pages/Events/List';
+
+export const Events: React.FC = () => {
+    const { t } = useTranslation();
+    const params = useParams();
+    const paramUserName = params.userName ?? '';
+
+    useBreadcrumbs([
+        {
+            text: t('navigation.account'),
+            href: ROUTES.USER.LIST,
+        },
+        {
+            text: paramUserName,
+            href: ROUTES.USER.DETAILS.FORMAT(paramUserName),
+        },
+        {
+            text: t('users.events'),
+            href: ROUTES.USER.EVENTS.FORMAT(paramUserName),
+        },
+    ]);
+
+    return <EventList variant="borderless" permanentFilters={{ target_users: [paramUserName] }} />;
+};
diff --git a/frontend/src/pages/User/Details/Projects/index.tsx b/frontend/src/pages/User/Details/Projects/index.tsx
index 2cb9885ab3..2663538cd7 100644
--- a/frontend/src/pages/User/Details/Projects/index.tsx
+++ b/frontend/src/pages/User/Details/Projects/index.tsx
@@ -29,6 +29,10 @@ export const UserProjectList: React.FC = () => {
             text: paramUserName,
             href: ROUTES.USER.DETAILS.FORMAT(paramUserName),
         },
+        {
+            text: t('users.projects'),
+            href: ROUTES.USER.PROJECTS.FORMAT(paramUserName),
+        },
     ]);
 
     const renderEmptyMessage = (): React.ReactNode => {
diff --git a/frontend/src/pages/User/Details/index.tsx b/frontend/src/pages/User/Details/index.tsx
index 84322fa5e9..604da97a9a 100644
--- a/frontend/src/pages/User/Details/index.tsx
+++ b/frontend/src/pages/User/Details/index.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Outlet, useNavigate, useParams } from 'react-router-dom';
 
-import { Box, ConfirmationDialog, ContentLayout, NavigateLink, SpaceBetween, Tabs } from 'components';
+import { Box, ConfirmationDialog, ContentLayout, SpaceBetween, Tabs } from 'components';
 import { DetailsHeader } from 'components';
 
 import { useNotifications /* usePermissionGuard*/ } from 'hooks';
@@ -15,6 +15,8 @@ import { UserDetailsTabTypeEnum } from './types';
 
 export { Settings as UserSettings } from './Settings';
 export { Billing as UserBilling } from './Billing';
+export { Events as UserEvents } from './Events';
+export { Activity as UserActivity } from './Activity';
 export { UserProjectList as UserProjects } from './Projects';
 
 export const UserDetails: React.FC = () => {
@@ -71,6 +73,18 @@ export const UserDetails: React.FC = () => {
             href: ROUTES.USER.PROJECTS.FORMAT(paramUserName),
             content: <Outlet />,
         },
+        {
+            label: t('users.events'),
+            id: UserDetailsTabTypeEnum.EVENTS,
+            href: ROUTES.USER.EVENTS.FORMAT(paramUserName),
+            content: <Outlet />,
+        },
+        {
+            label: t('users.activity'),
+            id: UserDetailsTabTypeEnum.ACTIVITY,
+            href: ROUTES.USER.ACTIVITY.FORMAT(paramUserName),
+            content: <Outlet />,
+        },
         process.env.UI_VERSION === 'sky' && {
             label: t('billing.title'),
             id: UserDetailsTabTypeEnum.BILLING,
@@ -87,17 +101,6 @@ export const UserDetails: React.FC = () => {
                         title={paramUserName}
                         // deleteAction={isAvailableDeleteUser ? toggleDeleteConfirm : undefined}
                         // deleteDisabled={isDeleting}
-                        actionButtons={
-                            <>
-                                <NavigateLink href={ROUTES.EVENTS.LIST + `?target_users=${paramUserName}`}>
-                                    {t('users.events')}
-                                </NavigateLink>
-
-                                <NavigateLink href={ROUTES.EVENTS.LIST + `?actors=${paramUserName}`}>
-                                    {t('users.activity')}
-                                </NavigateLink>
-                            </>
-                        }
                     />
                 }
             >
diff --git a/frontend/src/pages/User/Details/types.ts b/frontend/src/pages/User/Details/types.ts
index 8ced1c3c29..9f2a0680ac 100644
--- a/frontend/src/pages/User/Details/types.ts
+++ b/frontend/src/pages/User/Details/types.ts
@@ -1,5 +1,7 @@
 export enum UserDetailsTabTypeEnum {
     SETTINGS = 'settings',
     PROJECTS = 'projects',
+    EVENTS = 'events',
+    ACTIVITY = 'activity',
     BILLING = 'billing',
 }
diff --git a/frontend/src/router.tsx b/frontend/src/router.tsx
index 34a8abaaf0..6bc91b23e8 100644
--- a/frontend/src/router.tsx
+++ b/frontend/src/router.tsx
@@ -33,7 +33,7 @@ import { RunInspect } from 'pages/Runs/Details/Inspect';
 import { JobDetailsPage } from 'pages/Runs/Details/Jobs/Details';
 import { EventsList as JobEvents } from 'pages/Runs/Details/Jobs/Events';
 import { CreditsHistoryAdd, UserAdd, UserDetails, UserEdit, UserList } from 'pages/User';
-import { UserBilling, UserProjects, UserSettings } from 'pages/User/Details';
+import { UserActivity, UserBilling, UserEvents, UserProjects, UserSettings } from 'pages/User/Details';
 
 import { AuthErrorMessage } from './App/AuthErrorMessage';
 import { EventList } from './pages/Events';
@@ -258,6 +258,14 @@ export const router = createBrowserRouter([
                         path: ROUTES.USER.PROJECTS.TEMPLATE,
                         element: <UserProjects />,
                     },
+                    {
+                        path: ROUTES.USER.EVENTS.TEMPLATE,
+                        element: <UserEvents />,
+                    },
+                    {
+                        path: ROUTES.USER.ACTIVITY.TEMPLATE,
+                        element: <UserActivity />,
+                    },
                     process.env.UI_VERSION === 'sky' && {
                         path: ROUTES.USER.BILLING.LIST.TEMPLATE,
                         element: <UserBilling />,
diff --git a/frontend/src/routes.ts b/frontend/src/routes.ts
index 288cef72fc..765a158f69 100644
--- a/frontend/src/routes.ts
+++ b/frontend/src/routes.ts
@@ -181,6 +181,14 @@ export const ROUTES = {
             TEMPLATE: `/users/:userName/projects`,
             FORMAT: (userName: string) => buildRoute(ROUTES.USER.PROJECTS.TEMPLATE, { userName }),
         },
+        EVENTS: {
+            TEMPLATE: `/users/:userName/events`,
+            FORMAT: (userName: string) => buildRoute(ROUTES.USER.EVENTS.TEMPLATE, { userName }),
+        },
+        ACTIVITY: {
+            TEMPLATE: `/users/:userName/activity`,
+            FORMAT: (userName: string) => buildRoute(ROUTES.USER.ACTIVITY.TEMPLATE, { userName }),
+        },
         BILLING: {
             LIST: {
                 TEMPLATE: `/users/:userName/billing`,
diff --git a/frontend/src/types/event.d.ts b/frontend/src/types/event.d.ts
index dd0147fe15..0afdb7436f 100644
--- a/frontend/src/types/event.d.ts
+++ b/frontend/src/types/event.d.ts
@@ -1,6 +1,6 @@
 declare type TEventTargetType = 'project' | 'user' | 'fleet' | 'instance' | 'run' | 'job' | 'volume' | 'gateway' | 'secret';
 
-declare type TEventListRequestParams = Omit<TBaseRequestListParams, 'prev_created_at'> & {
+declare type TEventListFilters = {
     prev_recorded_at?: string;
     target_projects?: string[];
     target_users?: string[];
@@ -17,6 +17,7 @@ declare type TEventListRequestParams = Omit<TBaseRequestListParams, 'prev_create
     include_target_types?: TEventTargetType[];
     actors?: string[];
 };
+declare type TEventListRequestParams = Omit<TBaseRequestListParams, 'prev_created_at'> & TEventListFilters;
 
 declare interface IEventTarget {
     type: 'project' | 'user' | 'fleet' | 'instance' | 'run' | 'job' | 'volume' | 'gateway' | 'secret';