Events UI #3309 User events refactoring after review

olgenn · olgenn · commit ac446fa6d723 · 2026-02-05T01:06:38.000+03:00
diff --git a/frontend/src/components/index.ts b/frontend/src/components/index.ts
@@ -66,6 +66,8 @@ export { default as ExpandableSection } from '@cloudscape-design/components/expa
 export { default as KeyValuePairs } from '@cloudscape-design/components/key-value-pairs';
 export { I18nProvider } from '@cloudscape-design/components/i18n';
 export { default as Wizard } from '@cloudscape-design/components/wizard';
+export { default as SegmentedControl } from '@cloudscape-design/components/segmented-control';
+export type { SegmentedControlProps } from '@cloudscape-design/components/segmented-control';
 
 // custom components
 export { NavigateLink } from './NavigateLink';
diff --git a/frontend/src/locale/en.json b/frontend/src/locale/en.json
@@ -696,8 +696,7 @@
     "account_settings": "User settings",
     "settings": "Settings",
     "projects": "Projects",
-    "events": "User events",
-    "activity": "User activity",
+    "events": "Events",
     "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
@@ -236,7 +236,6 @@ export const useFilters = ({
         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) {
diff --git a/frontend/src/pages/Events/List/index.tsx b/frontend/src/pages/Events/List/index.tsx
@@ -24,9 +24,16 @@ type EventListProps = Pick<TableProps, 'variant'> & {
     withSearchParams?: boolean;
     renderHeader?: (args: RenderHeaderArgs) => React.ReactNode;
     permanentFilters?: Partial<TEventListFilters>;
+    showFilters?: boolean;
 };
 
-export const EventList: React.FC<EventListProps> = ({ withSearchParams, permanentFilters, renderHeader, ...props }) => {
+export const EventList: React.FC<EventListProps> = ({
+    withSearchParams,
+    permanentFilters,
+    renderHeader,
+    showFilters = true,
+    ...props
+}) => {
     const { t } = useTranslation();
 
     useBreadcrumbs([
@@ -79,24 +86,26 @@ export const EventList: React.FC<EventListProps> = ({ withSearchParams, permanen
             stickyHeader={true}
             header={renderHeader?.({ refreshAction: refreshList, disabledRefresh: loading })}
             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}
-                        />
+                showFilters && (
+                    <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>
-                </div>
+                )
             }
             footer={<Loader show={isLoadingMore} padding={{ vertical: 'm' }} />}
         />
diff --git a/frontend/src/pages/User/Details/Activity/index.tsx b/frontend/src/pages/User/Details/Activity/index.tsx
diff --git a/frontend/src/pages/User/Details/Events/index.tsx b/frontend/src/pages/User/Details/Events/index.tsx
@@ -1,6 +1,8 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useParams } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
+
+import { Button, Header, SegmentedControl, SpaceBetween } from 'components';
 
 import { useBreadcrumbs } from 'hooks';
 import { ROUTES } from 'routes';
@@ -11,6 +13,8 @@ export const Events: React.FC = () => {
     const { t } = useTranslation();
     const params = useParams();
     const paramUserName = params.userName ?? '';
+    const navigate = useNavigate();
+    const [filterParamName, setFilterParamName] = useState<keyof TEventListFilters>('target_users');
 
     useBreadcrumbs([
         {
@@ -27,5 +31,36 @@ export const Events: React.FC = () => {
         },
     ]);
 
-    return <EventList variant="borderless" permanentFilters={{ target_users: [paramUserName] }} />;
+    const goToEventsPage = () => {
+        navigate(ROUTES.EVENTS.LIST + `?${filterParamName}=${paramUserName}`);
+    };
+
+    return (
+        <EventList
+            renderHeader={() => {
+                return (
+                    <Header
+                        variant="awsui-h1-sticky"
+                        actions={
+                            <SpaceBetween size="xs" direction="horizontal">
+                                <SegmentedControl
+                                    selectedId={filterParamName}
+                                    onChange={({ detail }) => setFilterParamName(detail.selectedId as keyof TEventListFilters)}
+                                    options={[
+                                        { text: 'Target user', id: 'target_users' },
+                                        { text: 'Actor', id: 'actors' },
+                                    ]}
+                                />
+                                <Button onClick={goToEventsPage}>{t('common.full_view')}</Button>
+                            </SpaceBetween>
+                        }
+                    >
+                        {/*{t('navigation.events')}*/}
+                    </Header>
+                );
+            }}
+            permanentFilters={{ [filterParamName]: [paramUserName] }}
+            showFilters={false}
+        />
+    );
 };
diff --git a/frontend/src/pages/User/Details/Projects/index.tsx b/frontend/src/pages/User/Details/Projects/index.tsx
@@ -36,12 +36,7 @@ export const UserProjectList: React.FC = () => {
     ]);
 
     const renderEmptyMessage = (): React.ReactNode => {
-        return (
-            <ListEmptyMessage
-                title={t('projects.empty_message_title')}
-                message={t('projects.empty_message_text')}
-            ></ListEmptyMessage>
-        );
+        return <ListEmptyMessage title={t('projects.empty_message_title')} message={t('projects.empty_message_text')} />;
     };
 
     const filteredData = useMemo<IProject[]>(() => {
@@ -78,7 +73,6 @@ export const UserProjectList: React.FC = () => {
     return (
         <Table
             {...collectionProps}
-            variant="borderless"
             columnDefinitions={columns}
             items={items}
             loading={isLoading || isFetching}
diff --git a/frontend/src/pages/User/Details/Settings/index.tsx b/frontend/src/pages/User/Details/Settings/index.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate, useParams } from 'react-router-dom';
 
-import { Box, Button, ColumnLayout, Header, Link, Loader, Popover, SpaceBetween, StatusIndicator } from 'components';
+import { Box, Button, ColumnLayout, Container, Header, Link, Loader, Popover, SpaceBetween, StatusIndicator } from 'components';
 import { PermissionGuard } from 'components/PermissionGuard';
 
 import { useAppSelector, useBreadcrumbs, usePermissionGuard } from 'hooks';
@@ -51,18 +51,20 @@ export const Settings: React.FC = () => {
     };
 
     return (
-        <div>
-            <Header
-                variant="h2"
-                actions={
-                    <Button onClick={editUserHandler} disabled={isDisabledUserEditing()}>
-                        {t('common.edit')}
-                    </Button>
-                }
-            >
-                {t('users.account_settings')}
-            </Header>
-
+        <Container
+            header={
+                <Header
+                    variant="h2"
+                    actions={
+                        <Button onClick={editUserHandler} disabled={isDisabledUserEditing()}>
+                            {t('common.edit')}
+                        </Button>
+                    }
+                >
+                    {t('users.account_settings')}
+                </Header>
+            }
+        >
             {isLoading && <Loader />}
 
             {data && (
@@ -105,6 +107,6 @@ export const Settings: React.FC = () => {
                     </SpaceBetween>
                 </ColumnLayout>
             )}
-        </div>
+        </Container>
     );
 };
diff --git 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, Tabs } from 'components';
 import { DetailsHeader } from 'components';
 
 import { useNotifications /* usePermissionGuard*/ } from 'hooks';
@@ -13,10 +13,11 @@ import { useDeleteUsersMutation, useGetUserQuery } from 'services/user';
 // import { GlobalUserRole } from '../../../types';
 import { UserDetailsTabTypeEnum } from './types';
 
+import styles from './styles.module.scss';
+
 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 = () => {
@@ -65,36 +66,26 @@ export const UserDetails: React.FC = () => {
             label: t('users.settings'),
             id: UserDetailsTabTypeEnum.SETTINGS,
             href: ROUTES.USER.DETAILS.FORMAT(paramUserName),
-            content: <Outlet />,
         },
         {
             label: t('users.projects'),
             id: UserDetailsTabTypeEnum.PROJECTS,
             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,
             href: ROUTES.USER.BILLING.LIST.FORMAT(paramUserName),
-            content: <Outlet />,
         },
     ].filter(Boolean);
 
     return (
-        <>
+        <div className={styles.page}>
             <ContentLayout
                 header={
                     <DetailsHeader
@@ -104,9 +95,9 @@ export const UserDetails: React.FC = () => {
                     />
                 }
             >
-                <SpaceBetween size="l">
-                    <Tabs variant="container" withNavigation tabs={tabs} />
-                </SpaceBetween>
+                <Tabs withNavigation tabs={tabs} />
+
+                <Outlet />
             </ContentLayout>
 
             <ConfirmationDialog
@@ -116,6 +107,6 @@ export const UserDetails: React.FC = () => {
                 onConfirm={deleteUserHandler}
                 confirmButtonLabel={t('common.delete')}
             />
-        </>
+        </div>
     );
 };
diff --git a/frontend/src/pages/User/Details/styles.module.scss b/frontend/src/pages/User/Details/styles.module.scss
@@ -0,0 +1,18 @@
+.page {
+    height: 100%;
+
+    & [class^="awsui_tabs-content"] {
+        display: none;
+    }
+
+    & > [class^="awsui_layout"] {
+        height: 100%;
+
+        & > [class^="awsui_content"] {
+            display: flex;
+            flex-direction: column;
+            gap: 20px;
+            height: 100%;
+        }
+    }
+}
diff --git 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 { UserActivity, UserBilling, UserEvents, UserProjects, UserSettings } from 'pages/User/Details';
+import { UserBilling, UserEvents, UserProjects, UserSettings } from 'pages/User/Details';
 
 import { AuthErrorMessage } from './App/AuthErrorMessage';
 import { EventList } from './pages/Events';
@@ -262,10 +262,6 @@ export const router = createBrowserRouter([
                         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
@@ -185,10 +185,6 @@ export const ROUTES = {
             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`,
