From c86aeaba903bc48de8f72c6936290c08d1616c84 Mon Sep 17 00:00:00 2001
From: Oleg Vavilov <vavilovolegik@gmail.com>
Date: Tue, 9 Dec 2025 23:31:29 +0300
Subject: [PATCH 1/4] #3309 Events list

---
 frontend/src/api.ts                           |   5 +
 frontend/src/layouts/AppLayout/hooks.ts       |   1 +
 frontend/src/locale/en.json                   |  10 +-
 .../List/hooks/useColumnDefinitions.tsx       | 129 ++++++++++++++++++
 frontend/src/pages/Events/List/index.tsx      |  75 ++++++++++
 frontend/src/pages/Events/index.tsx           |   1 +
 frontend/src/router.tsx                       |   7 +
 frontend/src/routes.ts                        |   4 +
 frontend/src/services/events.ts               |  30 ++++
 frontend/src/store.ts                         |   3 +
 frontend/src/types/event.d.ts                 |  33 +++++
 frontend/staticServer.js                      |   6 +
 12 files changed, 303 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/pages/Events/List/hooks/useColumnDefinitions.tsx
 create mode 100644 frontend/src/pages/Events/List/index.tsx
 create mode 100644 frontend/src/pages/Events/index.tsx
 create mode 100644 frontend/src/services/events.ts
 create mode 100644 frontend/src/types/event.d.ts

diff --git a/frontend/src/api.ts b/frontend/src/api.ts
index b0266e74ea..b57862d33a 100644
--- a/frontend/src/api.ts
+++ b/frontend/src/api.ts
@@ -54,6 +54,11 @@ export const API = {
         PORTAL_SESSION: (username: string) => `${API.USER_BILLING.BASE(username)}/portal_session`,
     },
 
+    EVENTS: {
+        BASE: () => `${API.BASE()}/events`,
+        LIST: () => `${API.EVENTS.BASE()}/list`,
+    },
+
     PROJECTS: {
         BASE: () => `${API.BASE()}/projects`,
         LIST: () => `${API.PROJECTS.BASE()}/list`,
diff --git a/frontend/src/layouts/AppLayout/hooks.ts b/frontend/src/layouts/AppLayout/hooks.ts
index ef53a0082e..a305317d50 100644
--- a/frontend/src/layouts/AppLayout/hooks.ts
+++ b/frontend/src/layouts/AppLayout/hooks.ts
@@ -29,6 +29,7 @@ export const useSideNavigation = () => {
         { type: 'link', text: t('navigation.fleets'), href: ROUTES.FLEETS.LIST },
         { type: 'link', text: t('navigation.instances'), href: ROUTES.INSTANCES.LIST },
         { type: 'link', text: t('navigation.volumes'), href: ROUTES.VOLUMES.LIST },
+        { type: 'link', text: t('navigation.events'), href: ROUTES.EVENTS.LIST },
         { type: 'link', text: t('navigation.project_other'), href: ROUTES.PROJECT.LIST },
 
         isGlobalAdmin && {
diff --git a/frontend/src/locale/en.json b/frontend/src/locale/en.json
index 7d32a7545d..9b7f85b458 100644
--- a/frontend/src/locale/en.json
+++ b/frontend/src/locale/en.json
@@ -82,7 +82,8 @@
     "resources": "Resources",
     "volumes": "Volumes",
     "instances": "Instances",
-    "offers": "Offers"
+    "offers": "Offers",
+    "events": "Events"
   },
 
   "backend": {
@@ -616,6 +617,13 @@
     }
   },
 
+  "events": {
+    "recorded_at": "Recorded At",
+    "actor": "Actor",
+    "targets": "Targets",
+    "message": "Message"
+  },
+
   "users": {
     "page_title": "Users",
     "search_placeholder": "Find members",
diff --git a/frontend/src/pages/Events/List/hooks/useColumnDefinitions.tsx b/frontend/src/pages/Events/List/hooks/useColumnDefinitions.tsx
new file mode 100644
index 0000000000..e5809f221c
--- /dev/null
+++ b/frontend/src/pages/Events/List/hooks/useColumnDefinitions.tsx
@@ -0,0 +1,129 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { format } from 'date-fns';
+
+import { NavigateLink, TableProps } from 'components';
+
+import { DATE_TIME_FORMAT } from 'consts';
+import { ROUTES } from 'routes';
+
+export const useColumnsDefinitions = () => {
+    const { t } = useTranslation();
+
+    const columns: TableProps.ColumnDefinition<IEvent>[] = [
+        {
+            id: 'recorded_at',
+            header: t('events.recorded_at'),
+            cell: (item) => format(new Date(item.recorded_at), DATE_TIME_FORMAT),
+        },
+        {
+            id: 'actor',
+            header: t('events.actor'),
+            cell: (item) =>
+                item.actor_user ? (
+                    <NavigateLink href={ROUTES.USER.DETAILS.FORMAT(item.actor_user)}>{item.actor_user}</NavigateLink>
+                ) : (
+                    '-'
+                ),
+        },
+        {
+            id: 'target',
+            header: t('events.targets'),
+            cell: (item) => {
+                return item.targets.map((target) => {
+                    switch (target.type) {
+                        case 'project':
+                            return (
+                                <div>
+                                    project{' '}
+                                    {target.project_name && (
+                                        <NavigateLink href={ROUTES.PROJECT.DETAILS.FORMAT(target.project_name)}>
+                                            {target.project_name}
+                                        </NavigateLink>
+                                    )}
+                                </div>
+                            );
+
+                        case 'fleet':
+                            return (
+                                <div>
+                                    fleet{' '}
+                                    {target.project_name && (
+                                        <NavigateLink href={ROUTES.PROJECT.DETAILS.FORMAT(target.project_name)}>
+                                            {target.project_name}
+                                        </NavigateLink>
+                                    )}
+                                    /
+                                    <NavigateLink href={ROUTES.FLEETS.DETAILS.FORMAT(target.project_name ?? '', target.id)}>
+                                        {target.name}
+                                    </NavigateLink>
+                                </div>
+                            );
+
+                        case 'user':
+                            return (
+                                <div>
+                                    user{' '}
+                                    <NavigateLink href={ROUTES.USER.DETAILS.FORMAT(target.name)}>{target.name}</NavigateLink>
+                                </div>
+                            );
+
+                        case 'instance':
+                            return (
+                                <div>
+                                    instance{' '}
+                                    {target.project_name && (
+                                        <NavigateLink href={ROUTES.PROJECT.DETAILS.FORMAT(target.project_name)}>
+                                            {target.project_name}
+                                        </NavigateLink>
+                                    )}
+                                    /{target.name}
+                                </div>
+                            );
+
+                        case 'run':
+                            return (
+                                <div>
+                                    run{' '}
+                                    {target.project_name && (
+                                        <NavigateLink href={ROUTES.PROJECT.DETAILS.FORMAT(target.project_name)}>
+                                            {target.project_name}
+                                        </NavigateLink>
+                                    )}
+                                    /
+                                    <NavigateLink
+                                        href={ROUTES.PROJECT.DETAILS.RUNS.DETAILS.FORMAT(target.project_name ?? '', target.id)}
+                                    >
+                                        {target.name}
+                                    </NavigateLink>
+                                </div>
+                            );
+
+                        case 'job':
+                            return (
+                                <div>
+                                    job{' '}
+                                    {target.project_name && (
+                                        <NavigateLink href={ROUTES.PROJECT.DETAILS.FORMAT(target.project_name)}>
+                                            {target.project_name}
+                                        </NavigateLink>
+                                    )}
+                                    /{target.name}
+                                </div>
+                            );
+
+                        default:
+                            return '---';
+                    }
+                });
+            },
+        },
+        {
+            id: 'message',
+            header: t('events.message'),
+            cell: ({ message }) => message,
+        },
+    ];
+
+    return { columns } as const;
+};
diff --git a/frontend/src/pages/Events/List/index.tsx b/frontend/src/pages/Events/List/index.tsx
new file mode 100644
index 0000000000..86a2b2b4a5
--- /dev/null
+++ b/frontend/src/pages/Events/List/index.tsx
@@ -0,0 +1,75 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { Button, Header, Loader, SpaceBetween, Table } from 'components';
+
+import { DEFAULT_TABLE_PAGE_SIZE } from 'consts';
+import { useBreadcrumbs, useInfiniteScroll } from 'hooks';
+import { useCollection } from 'hooks';
+import { ROUTES } from 'routes';
+import { useLazyGetAllEventsQuery } from 'services/events';
+
+import { useColumnsDefinitions } from './hooks/useColumnDefinitions';
+
+export const EventList = () => {
+    const { t } = useTranslation();
+
+    useBreadcrumbs([
+        {
+            text: t('navigation.events'),
+            href: ROUTES.EVENTS.LIST,
+        },
+    ]);
+
+    const { data, isLoading, refreshList, isLoadingMore } = useInfiniteScroll<IEvent, TEventListRequestParams>({
+        useLazyQuery: useLazyGetAllEventsQuery,
+        args: { limit: DEFAULT_TABLE_PAGE_SIZE },
+
+        getPaginationParams: (lastEvent) => ({
+            prev_recorded_at: lastEvent.recorded_at,
+            prev_id: lastEvent.id,
+        }),
+    });
+
+    const { items, collectionProps } = useCollection<IEvent>(data, {
+        filtering: {
+            // empty: renderEmptyMessage(),
+            // noMatch: renderNoMatchMessage(),
+        },
+        selection: {},
+    });
+
+    const { columns } = useColumnsDefinitions();
+
+    return (
+        <Table
+            {...collectionProps}
+            variant="full-page"
+            columnDefinitions={columns}
+            items={items}
+            loading={isLoading}
+            loadingText={t('common.loading')}
+            stickyHeader={true}
+            selectionType="multi"
+            header={
+                <Header
+                    variant="awsui-h1-sticky"
+                    actions={
+                        <SpaceBetween size="xs" direction="horizontal">
+                            <Button
+                                iconName="refresh"
+                                disabled={isLoading}
+                                ariaLabel={t('common.refresh')}
+                                onClick={refreshList}
+                            />
+                        </SpaceBetween>
+                    }
+                >
+                    {t('navigation.events')}
+                </Header>
+            }
+            // filter={}
+            footer={<Loader show={isLoadingMore} padding={{ vertical: 'm' }} />}
+        />
+    );
+};
diff --git a/frontend/src/pages/Events/index.tsx b/frontend/src/pages/Events/index.tsx
new file mode 100644
index 0000000000..90105f2580
--- /dev/null
+++ b/frontend/src/pages/Events/index.tsx
@@ -0,0 +1 @@
+export { EventList } from './List';
diff --git a/frontend/src/router.tsx b/frontend/src/router.tsx
index 63ed84117d..4a75bbf510 100644
--- a/frontend/src/router.tsx
+++ b/frontend/src/router.tsx
@@ -23,6 +23,7 @@ import { CreditsHistoryAdd, UserAdd, UserDetails, UserEdit, UserList } from 'pag
 import { UserBilling, UserProjects, UserSettings } from 'pages/User/Details';
 
 import { AuthErrorMessage } from './App/AuthErrorMessage';
+import { EventList } from './pages/Events';
 import { OfferList } from './pages/Offers';
 import { JobDetails } from './pages/Runs/Details/Jobs/Details/JobDetails';
 import { VolumeList } from './pages/Volumes';
@@ -165,6 +166,12 @@ export const router = createBrowserRouter([
                 element: <ModelDetails />,
             },
 
+            // Events
+            {
+                path: ROUTES.EVENTS.LIST,
+                element: <EventList />,
+            },
+
             // Fleets
             {
                 path: ROUTES.FLEETS.LIST,
diff --git a/frontend/src/routes.ts b/frontend/src/routes.ts
index b420fcec97..b591af5f67 100644
--- a/frontend/src/routes.ts
+++ b/frontend/src/routes.ts
@@ -94,6 +94,10 @@ export const ROUTES = {
         },
     },
 
+    EVENTS: {
+        LIST: '/events',
+    },
+
     RUNS: {
         LIST: '/runs',
         CREATE_DEV_ENV: '/runs/create-dev-environment',
diff --git a/frontend/src/services/events.ts b/frontend/src/services/events.ts
new file mode 100644
index 0000000000..7fe1f686f7
--- /dev/null
+++ b/frontend/src/services/events.ts
@@ -0,0 +1,30 @@
+import { API } from 'api';
+import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
+
+import fetchBaseQueryHeaders from 'libs/fetchBaseQueryHeaders';
+
+export const eventApi = createApi({
+    reducerPath: 'eventApi',
+    baseQuery: fetchBaseQuery({
+        prepareHeaders: fetchBaseQueryHeaders,
+    }),
+
+    tagTypes: ['Events'],
+
+    endpoints: (builder) => ({
+        getAllEvents: builder.query<IEvent[], TEventListRequestParams>({
+            query: (body) => {
+                return {
+                    url: API.EVENTS.LIST(),
+                    method: 'POST',
+                    body,
+                };
+            },
+
+            providesTags: (result) =>
+                result ? [...result.map(({ id }) => ({ type: 'Events' as const, id: id })), 'Events'] : ['Events'],
+        }),
+    }),
+});
+
+export const { useGetAllEventsQuery, useLazyGetAllEventsQuery } = eventApi;
diff --git a/frontend/src/store.ts b/frontend/src/store.ts
index 326f113add..9bcc0e7cc2 100644
--- a/frontend/src/store.ts
+++ b/frontend/src/store.ts
@@ -4,6 +4,7 @@ import notificationsReducer from 'components/Notifications/slice';
 
 import { artifactApi } from 'services/artifact';
 import { authApi } from 'services/auth';
+import { eventApi } from 'services/events';
 import { fleetApi } from 'services/fleet';
 import { gatewayApi } from 'services/gateway';
 import { instanceApi } from 'services/instance';
@@ -36,6 +37,7 @@ export const store = configureStore({
         [secretApi.reducerPath]: secretApi.reducer,
         [gpuApi.reducerPath]: gpuApi.reducer,
         [mainApi.reducerPath]: mainApi.reducer,
+        [eventApi.reducerPath]: eventApi.reducer,
     },
 
     middleware: (getDefaultMiddleware) =>
@@ -54,6 +56,7 @@ export const store = configureStore({
             .concat(volumeApi.middleware)
             .concat(secretApi.middleware)
             .concat(gpuApi.middleware)
+            .concat(eventApi.middleware)
             .concat(mainApi.middleware),
 });
 
diff --git a/frontend/src/types/event.d.ts b/frontend/src/types/event.d.ts
new file mode 100644
index 0000000000..4ef6bfcb89
--- /dev/null
+++ b/frontend/src/types/event.d.ts
@@ -0,0 +1,33 @@
+declare type TEventTargetType = 'project' | 'user' | 'fleet' | 'instance' | 'run' | 'job';
+
+declare type TEventListRequestParams = Omit<TBaseRequestListParams, 'prev_created_at'> & {
+    prev_recorded_at?: string;
+    target_projects?: string[];
+    target_users?: string[];
+    target_fleets?: string[];
+    target_instances?: string[];
+    target_runs?: string[];
+    target_jobs?: string[];
+    within_projects?: string[];
+    within_fleets?: string[];
+    within_runs?: string[];
+    include_target_types?: TEventTargetType[];
+    actors?: string[];
+};
+
+declare interface IEventTarget {
+    type: 'project' | 'user' | 'fleet' | 'instance' | 'run' | 'job';
+    project_id?: string;
+    project_name?: string;
+    id: string;
+    name: string;
+}
+
+declare interface IEvent {
+    id: string;
+    recorded_at: string;
+    message: string;
+    actor_user_id: string | null;
+    actor_user: string | null;
+    targets: IEventTarget[];
+}
diff --git a/frontend/staticServer.js b/frontend/staticServer.js
index fe0767081c..c7c4d76625 100644
--- a/frontend/staticServer.js
+++ b/frontend/staticServer.js
@@ -13,6 +13,12 @@ const proxy = {
 };
 
 const port = parseInt(process.env.PORT, 10) || 3001;
+//
+// app.use('/api/events/list', (req, res) => {
+//     console.log('test');
+//
+//     res.status(200).json([]).send();
+// });
 
 if (proxy) {
     Object.keys(proxy).forEach(function (context) {

From 8e951272f3692ad32c7a0bc8022d859df8f15cda Mon Sep 17 00:00:00 2001
From: Oleg Vavilov <vavilovolegik@gmail.com>
Date: Wed, 10 Dec 2025 01:13:56 +0300
Subject: [PATCH 2/4] #3309 Events list

---
 frontend/src/pages/Events/List/helpers.ts     |  23 ++
 .../src/pages/Events/List/hooks/useFilters.ts | 220 ++++++++++++++++++
 frontend/src/pages/Events/List/index.tsx      |  31 ++-
 frontend/src/types/project.d.ts               |   1 +
 4 files changed, 272 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/pages/Events/List/helpers.ts
 create mode 100644 frontend/src/pages/Events/List/hooks/useFilters.ts

diff --git a/frontend/src/pages/Events/List/helpers.ts b/frontend/src/pages/Events/List/helpers.ts
new file mode 100644
index 0000000000..702c8a5617
--- /dev/null
+++ b/frontend/src/pages/Events/List/helpers.ts
@@ -0,0 +1,23 @@
+import type { PropertyFilterProps } from 'components';
+
+export function filterLastElementByPrefix(
+    arr: PropertyFilterProps.Query['tokens'],
+    prefix: string,
+): PropertyFilterProps.Query['tokens'] {
+    // Ищем индекс последнего элемента с префиксом "test_"
+    let lastTestIndex = -1;
+    for (let i = arr.length - 1; i >= 0; i--) {
+        if (arr[i].propertyKey?.startsWith(prefix)) {
+            lastTestIndex = i;
+            break;
+        }
+    }
+
+    // Фильтруем массив
+    return arr.filter((item, index) => {
+        // Оставляем элемент, если:
+        // 1. Это не строка с префиксом "test_"?
+        // 2. ИЛИ это строка с префиксом "test_" И она последняя в массиве
+        return !item.propertyKey?.startsWith(prefix) || index === lastTestIndex;
+    });
+}
diff --git a/frontend/src/pages/Events/List/hooks/useFilters.ts b/frontend/src/pages/Events/List/hooks/useFilters.ts
new file mode 100644
index 0000000000..7f145db36c
--- /dev/null
+++ b/frontend/src/pages/Events/List/hooks/useFilters.ts
@@ -0,0 +1,220 @@
+import { useMemo, useState } from 'react';
+import { useSearchParams } from 'react-router-dom';
+
+import type { PropertyFilterProps } from 'components';
+
+import { EMPTY_QUERY, requestParamsToTokens, tokensToRequestParams, tokensToSearchParams } from 'libs/filters';
+import { useGetProjectsQuery } from 'services/project';
+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'
+    | 'within_projects'
+    | 'within_fleets'
+    | 'within_runs'
+    | 'include_target_types'
+    | 'actors'
+>;
+
+const filterKeys: Record<string, RequestParamsKeys> = {
+    TARGET_PROJECTS: 'target_projects',
+    TARGET_USERS: 'target_users',
+    TARGET_FLEETS: 'target_fleets',
+    TARGET_INSTANCES: 'target_instances',
+    TARGET_RUNS: 'target_runs',
+    TARGET_JOBS: 'target_jobs',
+    WITHIN_PROJECTS: 'within_projects',
+    WITHIN_FLEETS: 'within_fleets',
+    WITHIN_RUNS: 'within_runs',
+    INCLUDE_TARGET_TYPES: 'include_target_types',
+    ACTORS: 'actors',
+};
+
+const onlyOneFilterGroupPrefixes = ['target_', 'within_'];
+
+const multipleChoiseKeys: RequestParamsKeys[] = [
+    'target_projects',
+    'target_users',
+    'target_fleets',
+    'target_instances',
+    'target_runs',
+    'target_jobs',
+    'within_projects',
+    'within_fleets',
+    'within_runs',
+    'include_target_types',
+    'actors',
+];
+
+const targetTypes = ['project', 'user', 'fleet', 'instance', 'run', 'job'];
+
+export const useFilters = () => {
+    const [searchParams, setSearchParams] = useSearchParams();
+    const { data: projectsData } = useGetProjectsQuery();
+    const { data: usersData } = useGetUserListQuery();
+
+    const [propertyFilterQuery, setPropertyFilterQuery] = useState<PropertyFilterProps.Query>(() =>
+        requestParamsToTokens<RequestParamsKeys>({ searchParams, filterKeys }),
+    );
+
+    const clearFilter = () => {
+        setSearchParams({});
+        setPropertyFilterQuery(EMPTY_QUERY);
+    };
+
+    const filteringOptions = useMemo(() => {
+        const options: PropertyFilterProps.FilteringOption[] = [];
+
+        projectsData?.forEach(({ project_id }) => {
+            options.push({
+                propertyKey: filterKeys.TARGET_PROJECTS,
+                value: project_id,
+            });
+
+            options.push({
+                propertyKey: filterKeys.WITHIN_PROJECTS,
+                value: project_id,
+            });
+        });
+
+        usersData?.forEach(({ id }) => {
+            options.push({
+                propertyKey: filterKeys.TARGET_USERS,
+                value: id,
+            });
+        });
+
+        targetTypes?.forEach((targetType) => {
+            options.push({
+                propertyKey: filterKeys.INCLUDE_TARGET_TYPES,
+                value: targetType,
+            });
+        });
+
+        return options;
+    }, [projectsData, usersData]);
+
+    const setSearchParamsHandle = ({ tokens }: { tokens: PropertyFilterProps.Query['tokens'] }) => {
+        const searchParams = tokensToSearchParams<RequestParamsKeys>(tokens);
+
+        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 Fleets',
+        },
+        {
+            key: filterKeys.TARGET_INSTANCES,
+            operators: ['='],
+            propertyLabel: 'Target Instances',
+        },
+        {
+            key: filterKeys.TARGET_RUNS,
+            operators: ['='],
+            propertyLabel: 'Target Runs',
+        },
+        {
+            key: filterKeys.TARGET_JOBS,
+            operators: ['='],
+            propertyLabel: 'Target Jobs',
+        },
+
+        {
+            key: filterKeys.WITHIN_PROJECTS,
+            operators: ['='],
+            propertyLabel: 'Within Projects',
+            groupValuesLabel: 'Project ids',
+        },
+
+        {
+            key: filterKeys.WITHIN_FLEETS,
+            operators: ['='],
+            propertyLabel: 'Within Fleets',
+        },
+
+        {
+            key: filterKeys.WITHIN_RUNS,
+            operators: ['='],
+            propertyLabel: 'Within Runs',
+        },
+
+        {
+            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];
+
+        onlyOneFilterGroupPrefixes.forEach((prefix) => {
+            try {
+                filteredTokens = filterLastElementByPrefix(filteredTokens, prefix);
+            } catch (_) {
+                console.error(_);
+            }
+        });
+
+        setSearchParamsHandle({ tokens: filteredTokens });
+
+        setPropertyFilterQuery({
+            operation,
+            tokens: filteredTokens,
+        });
+    };
+
+    const onChangePropertyFilter: PropertyFilterProps['onChange'] = ({ detail }) => {
+        onChangePropertyFilterHandle(detail);
+    };
+
+    const filteringRequestParams = useMemo(() => {
+        const params = tokensToRequestParams<RequestParamsKeys>({
+            tokens: propertyFilterQuery.tokens,
+            arrayFieldKeys: multipleChoiseKeys,
+        });
+
+        return {
+            ...params,
+        } as Partial<TRunsRequestParams>;
+    }, [propertyFilterQuery]);
+
+    return {
+        filteringRequestParams,
+        clearFilter,
+        propertyFilterQuery,
+        onChangePropertyFilter,
+        filteringOptions,
+        filteringProperties,
+    } as const;
+};
diff --git a/frontend/src/pages/Events/List/index.tsx b/frontend/src/pages/Events/List/index.tsx
index 86a2b2b4a5..fcf979d554 100644
--- a/frontend/src/pages/Events/List/index.tsx
+++ b/frontend/src/pages/Events/List/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { Button, Header, Loader, SpaceBetween, Table } from 'components';
+import { Button, Header, Loader, PropertyFilter, SpaceBetween, Table } from 'components';
 
 import { DEFAULT_TABLE_PAGE_SIZE } from 'consts';
 import { useBreadcrumbs, useInfiniteScroll } from 'hooks';
@@ -10,6 +10,9 @@ import { ROUTES } from 'routes';
 import { useLazyGetAllEventsQuery } from 'services/events';
 
 import { useColumnsDefinitions } from './hooks/useColumnDefinitions';
+import { useFilters } from './hooks/useFilters';
+
+import styles from '../../Runs/List/styles.module.scss';
 
 export const EventList = () => {
     const { t } = useTranslation();
@@ -21,9 +24,12 @@ export const EventList = () => {
         },
     ]);
 
+    const { filteringRequestParams, propertyFilterQuery, onChangePropertyFilter, filteringOptions, filteringProperties } =
+        useFilters();
+
     const { data, isLoading, refreshList, isLoadingMore } = useInfiniteScroll<IEvent, TEventListRequestParams>({
         useLazyQuery: useLazyGetAllEventsQuery,
-        args: { limit: DEFAULT_TABLE_PAGE_SIZE },
+        args: { ...filteringRequestParams, limit: DEFAULT_TABLE_PAGE_SIZE },
 
         getPaginationParams: (lastEvent) => ({
             prev_recorded_at: lastEvent.recorded_at,
@@ -68,7 +74,26 @@ export const EventList = () => {
                     {t('navigation.events')}
                 </Header>
             }
-            // filter={}
+            filter={
+                <div className={styles.selectFilters}>
+                    <div className={styles.propertyFilter}>
+                        <PropertyFilter
+                            query={propertyFilterQuery}
+                            onChange={onChangePropertyFilter}
+                            expandToViewport
+                            hideOperations
+                            i18nStrings={{
+                                clearFiltersText: t('common.clearFilter'),
+                                filteringAriaLabel: t('projects.run.filter_property_placeholder'),
+                                filteringPlaceholder: t('projects.run.filter_property_placeholder'),
+                                operationAndText: 'and',
+                            }}
+                            filteringOptions={filteringOptions}
+                            filteringProperties={filteringProperties}
+                        />
+                    </div>
+                </div>
+            }
             footer={<Loader show={isLoadingMore} padding={{ vertical: 'm' }} />}
         />
     );
diff --git a/frontend/src/types/project.d.ts b/frontend/src/types/project.d.ts
index 5defe6b9e7..c4a5cd0a55 100644
--- a/frontend/src/types/project.d.ts
+++ b/frontend/src/types/project.d.ts
@@ -12,6 +12,7 @@ declare type TProjectBackend = {
     config: IBackendAWS | IBackendAzure | IBackendGCP | IBackendLambda | IBackendLocal | IBackendDstack;
 };
 declare interface IProject {
+    project_id: string;
     project_name: string;
     members: IProjectMember[];
     backends: TProjectBackend[];

From c293bfbca0c6739f1c79bb0d978d8538c90fd50b Mon Sep 17 00:00:00 2001
From: Oleg Vavilov <vavilovolegik@gmail.com>
Date: Wed, 10 Dec 2025 14:19:04 +0300
Subject: [PATCH 3/4] #3309 Events list

---
 .../src/pages/Events/List/hooks/useFilters.ts | 51 ++++++++++++++++---
 1 file changed, 45 insertions(+), 6 deletions(-)

diff --git a/frontend/src/pages/Events/List/hooks/useFilters.ts b/frontend/src/pages/Events/List/hooks/useFilters.ts
index 7f145db36c..5ef714c763 100644
--- a/frontend/src/pages/Events/List/hooks/useFilters.ts
+++ b/frontend/src/pages/Events/List/hooks/useFilters.ts
@@ -73,22 +73,27 @@ export const useFilters = () => {
     const filteringOptions = useMemo(() => {
         const options: PropertyFilterProps.FilteringOption[] = [];
 
-        projectsData?.forEach(({ project_id }) => {
+        projectsData?.forEach(({ project_name }) => {
             options.push({
                 propertyKey: filterKeys.TARGET_PROJECTS,
-                value: project_id,
+                value: project_name,
             });
 
             options.push({
                 propertyKey: filterKeys.WITHIN_PROJECTS,
-                value: project_id,
+                value: project_name,
             });
         });
 
-        usersData?.forEach(({ id }) => {
+        usersData?.forEach(({ username }) => {
             options.push({
                 propertyKey: filterKeys.TARGET_USERS,
-                value: id,
+                value: username,
+            });
+
+            options.push({
+                propertyKey: filterKeys.ACTORS,
+                value: username,
             });
         });
 
@@ -204,10 +209,44 @@ export const useFilters = () => {
             arrayFieldKeys: multipleChoiseKeys,
         });
 
+        const mappedFields = {
+            ...(params[filterKeys.TARGET_PROJECTS] && Array.isArray(params[filterKeys.TARGET_PROJECTS])
+                ? {
+                      [filterKeys.TARGET_PROJECTS]: params[filterKeys.TARGET_PROJECTS]?.map(
+                          (name: string) => projectsData?.find(({ project_name }) => project_name === name)?.['project_id'],
+                      ),
+                  }
+                : {}),
+            ...(params[filterKeys.WITHIN_PROJECTS] && Array.isArray(params[filterKeys.WITHIN_PROJECTS])
+                ? {
+                      [filterKeys.WITHIN_PROJECTS]: params[filterKeys.WITHIN_PROJECTS]?.map(
+                          (name: string) => projectsData?.find(({ project_name }) => project_name === name)?.['project_id'],
+                      ),
+                  }
+                : {}),
+
+            ...(params[filterKeys.TARGET_USERS] && Array.isArray(params[filterKeys.TARGET_USERS])
+                ? {
+                      [filterKeys.TARGET_USERS]: params[filterKeys.TARGET_USERS]?.map(
+                          (name: string) => usersData?.find(({ username }) => username === name)?.['id'],
+                      ),
+                  }
+                : {}),
+
+            ...(params[filterKeys.ACTORS] && Array.isArray(params[filterKeys.ACTORS])
+                ? {
+                      [filterKeys.ACTORS]: params[filterKeys.ACTORS]?.map(
+                          (name: string) => usersData?.find(({ username }) => username === name)?.['id'],
+                      ),
+                  }
+                : {}),
+        };
+
         return {
             ...params,
+            ...mappedFields,
         } as Partial<TRunsRequestParams>;
-    }, [propertyFilterQuery]);
+    }, [propertyFilterQuery, usersData, projectsData]);
 
     return {
         filteringRequestParams,

From 2b5168ae4841b21772ec0a3531ec3a2b4bc22b22 Mon Sep 17 00:00:00 2001
From: Oleg Vavilov <vavilovolegik@gmail.com>
Date: Wed, 10 Dec 2025 14:29:02 +0300
Subject: [PATCH 4/4] #3309 Events list

---
 .../pages/Events/List/hooks/useColumnDefinitions.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/frontend/src/pages/Events/List/hooks/useColumnDefinitions.tsx b/frontend/src/pages/Events/List/hooks/useColumnDefinitions.tsx
index e5809f221c..88e067814e 100644
--- a/frontend/src/pages/Events/List/hooks/useColumnDefinitions.tsx
+++ b/frontend/src/pages/Events/List/hooks/useColumnDefinitions.tsx
@@ -35,7 +35,7 @@ export const useColumnsDefinitions = () => {
                         case 'project':
                             return (
                                 <div>
-                                    project{' '}
+                                    Project{' '}
                                     {target.project_name && (
                                         <NavigateLink href={ROUTES.PROJECT.DETAILS.FORMAT(target.project_name)}>
                                             {target.project_name}
@@ -47,7 +47,7 @@ export const useColumnsDefinitions = () => {
                         case 'fleet':
                             return (
                                 <div>
-                                    fleet{' '}
+                                    Fleet{' '}
                                     {target.project_name && (
                                         <NavigateLink href={ROUTES.PROJECT.DETAILS.FORMAT(target.project_name)}>
                                             {target.project_name}
@@ -63,7 +63,7 @@ export const useColumnsDefinitions = () => {
                         case 'user':
                             return (
                                 <div>
-                                    user{' '}
+                                    User{' '}
                                     <NavigateLink href={ROUTES.USER.DETAILS.FORMAT(target.name)}>{target.name}</NavigateLink>
                                 </div>
                             );
@@ -71,7 +71,7 @@ export const useColumnsDefinitions = () => {
                         case 'instance':
                             return (
                                 <div>
-                                    instance{' '}
+                                    Instance{' '}
                                     {target.project_name && (
                                         <NavigateLink href={ROUTES.PROJECT.DETAILS.FORMAT(target.project_name)}>
                                             {target.project_name}
@@ -84,7 +84,7 @@ export const useColumnsDefinitions = () => {
                         case 'run':
                             return (
                                 <div>
-                                    run{' '}
+                                    Run{' '}
                                     {target.project_name && (
                                         <NavigateLink href={ROUTES.PROJECT.DETAILS.FORMAT(target.project_name)}>
                                             {target.project_name}
@@ -102,7 +102,7 @@ export const useColumnsDefinitions = () => {
                         case 'job':
                             return (
                                 <div>
-                                    job{' '}
+                                    Job{' '}
                                     {target.project_name && (
                                         <NavigateLink href={ROUTES.PROJECT.DETAILS.FORMAT(target.project_name)}>
                                             {target.project_name}