Add filtering support for activity logs

resources/scripts/api/account/activity.ts

@@ -2,18 +2,19 @@ import useUserSWRContentKey from '@/plugins/useUserSWRContentKey';
 import useSWR, { ConfigInterface, responseInterface } from 'swr';
 import { ActivityLog, Transformers } from '@definitions/user';
 import { AxiosError } from 'axios';
-import http, { PaginatedResult } from '@/api/http';
+import http, { PaginatedResult, QueryBuilderParams, withQueryBuilderParams } from '@/api/http';
 import { toPaginatedSet } from '@definitions/helpers';
 
-const useActivityLogs = (page = 1, config?: ConfigInterface<PaginatedResult<ActivityLog>, AxiosError>): responseInterface<PaginatedResult<ActivityLog>, AxiosError> => {
+export type ActivityLogFilters = QueryBuilderParams<'ip' | 'event', 'timestamp'>;
-    const key = useUserSWRContentKey([ 'account', 'activity', page.toString() ]);
+
+const useActivityLogs = (filters?: ActivityLogFilters, config?: ConfigInterface<PaginatedResult<ActivityLog>, AxiosError>): responseInterface<PaginatedResult<ActivityLog>, AxiosError> => {
+    const key = useUserSWRContentKey([ 'account', 'activity', JSON.stringify(filters) ]);
 
     return useSWR<PaginatedResult<ActivityLog>>(key, async () => {
         const { data } = await http.get('/api/client/account/activity', {
             params: {
+                ...withQueryBuilderParams(filters),
                 include: [ 'actor' ],
-                sort: '-timestamp',
-                page: page,
             },
         });
 

resources/scripts/api/http.ts

@@ -117,6 +117,7 @@ export function getPaginationSet (data: any): PaginationDataSet {
 type QueryBuilderFilterValue = string | number | boolean | null;
 
 export interface QueryBuilderParams<FilterKeys extends string = string, SortKeys extends string = string> {
+    page?: number;
     filters?: {
         [K in FilterKeys]?: QueryBuilderFilterValue | Readonly<QueryBuilderFilterValue[]>;
     };
@@ -150,6 +151,7 @@ export const withQueryBuilderParams = (data?: QueryBuilderParams): Record<string
 
     return {
         ...filters,
-        sorts: !sorts.length ? undefined : sorts.join(','),
+        sort: !sorts.length ? undefined : sorts.join(','),
+        page: data.page,
     };
 };

resources/scripts/components/dashboard/activity/ActivityLogContainer.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { useActivityLogs } from '@/api/account/activity';
+import { ActivityLogFilters, useActivityLogs } from '@/api/account/activity';
 import { useFlashKey } from '@/plugins/useFlash';
 import PageContentBlock from '@/components/elements/PageContentBlock';
 import FlashMessageRender from '@/components/FlashMessageRender';
@@ -8,66 +8,114 @@ import { Link } from 'react-router-dom';
 import PaginationFooter from '@/components/elements/table/PaginationFooter';
 import { UserIcon } from '@heroicons/react/outline';
 import Tooltip from '@/components/elements/tooltip/Tooltip';
-import { DesktopComputerIcon } from '@heroicons/react/solid';
+import { DesktopComputerIcon, XCircleIcon } from '@heroicons/react/solid';
+import { useLocation } from 'react-router';
+import Spinner from '@/components/elements/Spinner';
+import { styles as btnStyles } from '@/components/elements/button/index';
+import classNames from 'classnames';
 
 export default () => {
+    const location = useLocation();
     const { clearAndAddHttpError } = useFlashKey('account');
-    const [ page, setPage ] = useState(1);
+    const [ filters, setFilters ] = useState<ActivityLogFilters>({ page: 1, sorts: { timestamp: -1 } });
-    const { data, isValidating: _, error } = useActivityLogs(page, {
+    const { data, isValidating, error } = useActivityLogs(filters, {
         revalidateOnMount: true,
         revalidateOnFocus: false,
     });
 
+    useEffect(() => {
+        const parsed = new URLSearchParams(location.search);
+
+        setFilters(value => ({ ...value, filters: { ip: parsed.get('ip'), event: parsed.get('event') } }));
+    }, [ location.search ]);
+
     useEffect(() => {
         clearAndAddHttpError(error);
     }, [ error ]);
 
+    const queryTo = (params: Record<string, string>): string => {
+        const current = new URLSearchParams(location.search);
+        Object.keys(params).forEach(key => {
+            current.set(key, params[key]);
+        });
+
+        return current.toString();
+    };
+
     return (
         <PageContentBlock title={'Account Activity Log'}>
             <FlashMessageRender byKey={'account'}/>
-            <div className={'bg-gray-700'}>
+            {(filters.filters?.event || filters.filters?.ip) &&
-                {data?.items.map((activity) => (
+                <div className={'flex justify-end mb-2'}>
-                    <div
+                    <Link
-                        key={`${activity.event}|${activity.timestamp.toString()}`}
+                        to={'#'}
-                        className={'grid grid-cols-10 py-4 border-b-2 border-gray-800 last:rounded-b last:border-0'}
+                        className={classNames(btnStyles.button, btnStyles.text)}
+                        onClick={() => setFilters(value => ({ ...value, filters: {} }))}
                     >
-                        <div className={'col-span-1 flex items-center justify-center select-none'}>
+                        Clear Filters <XCircleIcon className={'w-4 h-4 ml-2'}/>
-                            <div className={'flex items-center w-8 h-8 rounded-full bg-gray-600 overflow-hidden'}>
+                    </Link>
-                                {activity.relationships.actor ?
+                </div>
-                                    <img src={activity.relationships.actor.image} alt={'User avatar'}/>
+            }
-                                    :
+            {!data && isValidating ?
-                                    <UserIcon className={'w-5 h-5 mx-auto'}/>
+                <Spinner centered/>
-                                }
+                :
+                <div className={'bg-gray-700'}>
+                    {data?.items.map((activity) => (
+                        <div
+                            key={`${activity.event}|${activity.timestamp.toString()}`}
+                            className={'grid grid-cols-10 py-4 border-b-2 border-gray-800 last:rounded-b last:border-0'}
+                        >
+                            <div className={'col-span-1 flex items-center justify-center select-none'}>
+                                <div className={'flex items-center w-8 h-8 rounded-full bg-gray-600 overflow-hidden'}>
+                                    {activity.relationships.actor ?
+                                        <img src={activity.relationships.actor.image} alt={'User avatar'}/>
+                                        :
+                                        <UserIcon className={'w-5 h-5 mx-auto'}/>
+                                    }
+                                </div>
                             </div>
-                        </div>
+                            <div className={'col-span-9'}>
-                        <div className={'col-span-9'}>
+                                <div className={'flex items-center text-gray-50'}>
-                            <div className={'flex items-center text-gray-50'}>
+                                    {activity.relationships.actor?.username || 'system'}
-                                {activity.relationships.actor?.username || 'system'}
+                                    <span className={'text-gray-400'}>&nbsp;&mdash;&nbsp;</span>
-                                <span className={'text-gray-400'}>&nbsp;&mdash;&nbsp;</span>
+                                    <Link
-                                <Link to={`#event=${activity.event}`}>
+                                        to={`?${queryTo({ event: activity.event })}`}
-                                    {activity.event}
+                                        className={'transition-colors duration-75 hover:text-cyan-400'}
-                                </Link>
+                                    >
-                                {typeof activity.properties.useragent === 'string' &&
+                                        {activity.event}
-                                    <Tooltip content={activity.properties.useragent} placement={'top'}>
+                                    </Link>
-                                        <DesktopComputerIcon className={'ml-2 w-4 h-4 cursor-pointer'}/>
+                                    {typeof activity.properties.useragent === 'string' &&
+                                        <Tooltip content={activity.properties.useragent} placement={'top'}>
+                                            <DesktopComputerIcon className={'ml-2 w-4 h-4 cursor-pointer'}/>
+                                        </Tooltip>
+                                    }
+                                </div>
+                                <div className={'mt-1 flex items-center text-sm'}>
+                                    <Link
+                                        to={`?${queryTo({ ip: activity.ip })}`}
+                                        className={'transition-colors duration-75 hover:text-cyan-400'}
+                                    >
+                                        {activity.ip}
+                                    </Link>
+                                    <span className={'text-gray-400'}>&nbsp;|&nbsp;</span>
+                                    <Tooltip
+                                        placement={'right'}
+                                        content={format(activity.timestamp, 'MMM do, yyyy h:mma')}
+                                    >
+                                        <span>
+                                            {formatDistanceToNowStrict(activity.timestamp, { addSuffix: true })}
+                                        </span>
                                     </Tooltip>
-                                }
+                                </div>
-                            </div>
-                            {/* <p className={'mt-1'}>{activity.description || JSON.stringify(activity.properties)}</p> */}
-                            <div className={'mt-1 flex items-center text-sm'}>
-                                <Link to={`#ip=${activity.ip}`}>{activity.ip}</Link>
-                                <span className={'text-gray-400'}>&nbsp;|&nbsp;</span>
-                                <Tooltip placement={'right'} content={format(activity.timestamp, 'MMM do, yyyy h:mma')}>
-                                    <span>
-                                        {formatDistanceToNowStrict(activity.timestamp, { addSuffix: true })}
-                                    </span>
-                                </Tooltip>
                             </div>
                         </div>
-                    </div>
+                    ))}
-                ))}
+                </div>
-            </div>
+            }
-            {data && <PaginationFooter pagination={data.pagination} onPageSelect={setPage}/>}
+            {data && <PaginationFooter
+                pagination={data.pagination}
+                onPageSelect={page => setFilters(value => ({ ...value, page }))}
+            />}
         </PageContentBlock>
     );
 };