misc_pterodactyl-panel/resources/scripts/components/dashboard/activity/ActivityLogContainer.tsx

73 lines
3.1 KiB
TypeScript
Raw Normal View History

2022-06-05 22:35:53 +00:00
import React, { useEffect, useState } from 'react';
import { ActivityLogFilters, useActivityLogs } from '@/api/account/activity';
2022-06-05 22:35:53 +00:00
import { useFlashKey } from '@/plugins/useFlash';
import PageContentBlock from '@/components/elements/PageContentBlock';
import FlashMessageRender from '@/components/FlashMessageRender';
import { Link } from 'react-router-dom';
import PaginationFooter from '@/components/elements/table/PaginationFooter';
import { DesktopComputerIcon, XCircleIcon } from '@heroicons/react/solid';
import Spinner from '@/components/elements/Spinner';
import { styles as btnStyles } from '@/components/elements/button/index';
import classNames from 'classnames';
import ActivityLogEntry from '@/components/elements/activity/ActivityLogEntry';
import Tooltip from '@/components/elements/tooltip/Tooltip';
import useLocationHash from '@/plugins/useLocationHash';
2022-06-05 22:35:53 +00:00
export default () => {
const { hash } = useLocationHash();
2022-06-05 22:35:53 +00:00
const { clearAndAddHttpError } = useFlashKey('account');
const [filters, setFilters] = useState<ActivityLogFilters>({ page: 1, sorts: { timestamp: -1 } });
const { data, isValidating, error } = useActivityLogs(filters, {
2022-06-05 22:35:53 +00:00
revalidateOnMount: true,
revalidateOnFocus: false,
});
useEffect(() => {
setFilters((value) => ({ ...value, filters: { ip: hash.ip, event: hash.event } }));
}, [hash]);
2022-06-05 22:35:53 +00:00
useEffect(() => {
clearAndAddHttpError(error);
}, [error]);
2022-06-05 22:35:53 +00:00
return (
<PageContentBlock title={'Account Activity Log'}>
<FlashMessageRender byKey={'account'} />
{(filters.filters?.event || filters.filters?.ip) && (
<div className={'flex justify-end mb-2'}>
<Link
to={'#'}
2022-06-12 13:09:01 +00:00
className={classNames(btnStyles.button, btnStyles.text, 'w-full sm:w-auto')}
onClick={() => setFilters((value) => ({ ...value, filters: {} }))}
2022-06-05 22:35:53 +00:00
>
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) => (
<ActivityLogEntry key={activity.id} activity={activity}>
{typeof activity.properties.useragent === 'string' && (
<Tooltip content={activity.properties.useragent} placement={'top'}>
<span>
<DesktopComputerIcon />
</span>
</Tooltip>
)}
</ActivityLogEntry>
))}
</div>
)}
{data && (
<PaginationFooter
pagination={data.pagination}
onPageSelect={(page) => setFilters((value) => ({ ...value, page }))}
/>
)}
2022-06-05 22:35:53 +00:00
</PageContentBlock>
);
};