Add filtering support for activity logs
This commit is contained in:
DaneEveritt
parent
c6e8b893c8
commit
0bfba306bf
3 changed files with 99 additions and 48 deletions
|
|
@ -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> => {
|
||||
const key = useUserSWRContentKey([ 'account', 'activity', page.toString() ]);
|
||||
export type ActivityLogFilters = QueryBuilderParams<'ip' | 'event', 'timestamp'>;
|
||||
|
||||
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,
|
||||
},
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
};
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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 { data, isValidating: _, error } = useActivityLogs(page, {
|
||||
const [ filters, setFilters ] = useState<ActivityLogFilters>({ page: 1, sorts: { timestamp: -1 } });
|
||||
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'}>
|
||||
{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'}
|
||||
{(filters.filters?.event || filters.filters?.ip) &&
|
||||
<div className={'flex justify-end mb-2'}>
|
||||
<Link
|
||||
to={'#'}
|
||||
className={classNames(btnStyles.button, btnStyles.text)}
|
||||
onClick={() => setFilters(value => ({ ...value, filters: {} }))}
|
||||
>
|
||||
<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'}/>
|
||||
}
|
||||
Clear Filters <XCircleIcon className={'w-4 h-4 ml-2'}/>
|
||||
</Link>
|
||||
</div>
|
||||
}
|
||||
{!data && isValidating ?
|
||||
<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={'flex items-center text-gray-50'}>
|
||||
{activity.relationships.actor?.username || 'system'}
|
||||
<span className={'text-gray-400'}> — </span>
|
||||
<Link to={`#event=${activity.event}`}>
|
||||
{activity.event}
|
||||
</Link>
|
||||
{typeof activity.properties.useragent === 'string' &&
|
||||
<Tooltip content={activity.properties.useragent} placement={'top'}>
|
||||
<DesktopComputerIcon className={'ml-2 w-4 h-4 cursor-pointer'}/>
|
||||
<div className={'col-span-9'}>
|
||||
<div className={'flex items-center text-gray-50'}>
|
||||
{activity.relationships.actor?.username || 'system'}
|
||||
<span className={'text-gray-400'}> — </span>
|
||||
<Link
|
||||
to={`?${queryTo({ event: activity.event })}`}
|
||||
className={'transition-colors duration-75 hover:text-cyan-400'}
|
||||
>
|
||||
{activity.event}
|
||||
</Link>
|
||||
{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'}> | </span>
|
||||
<Tooltip
|
||||
placement={'right'}
|
||||
content={format(activity.timestamp, 'MMM do, yyyy h:mma')}
|
||||
>
|
||||
<span>
|
||||
{formatDistanceToNowStrict(activity.timestamp, { addSuffix: true })}
|
||||
</span>
|
||||
</Tooltip>
|
||||
}
|
||||
</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'}> | </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}/>}
|
||||
))}
|
||||
</div>
|
||||
}
|
||||
{data && <PaginationFooter
|
||||
pagination={data.pagination}
|
||||
onPageSelect={page => setFilters(value => ({ ...value, page }))}
|
||||
/>}
|
||||
</PageContentBlock>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in a new issue