77 lines
2.4 KiB
TypeScript
77 lines
2.4 KiB
TypeScript
import React, { useEffect } from 'react';
|
|
import { PageTitle, Icon } from 'UI';
|
|
import { Button } from 'antd';
|
|
import { useStore } from 'App/mstore';
|
|
import { useObserver } from 'mobx-react-lite';
|
|
import Select from 'Shared/Select';
|
|
import SelectDateRange from 'Shared/SelectDateRange';
|
|
import { numberWithCommas } from 'App/utils';
|
|
import withPageTitle from 'HOCs/withPageTitle';
|
|
import AuditSearchField from '../AuditSearchField';
|
|
import AuditList from '../AuditList';
|
|
|
|
function AuditView() {
|
|
const { auditStore } = useStore();
|
|
const order = useObserver(() => auditStore.order);
|
|
const total = useObserver(() => numberWithCommas(auditStore.total));
|
|
|
|
useEffect(() => () => {
|
|
auditStore.updateKey('searchQuery', '');
|
|
}, []);
|
|
|
|
const exportToCsv = () => {
|
|
auditStore.exportToCsv();
|
|
};
|
|
|
|
const onChange = (data) => {
|
|
auditStore.setDateRange(data);
|
|
};
|
|
|
|
return useObserver(() => (
|
|
<div className="bg-white rounded-lg shadow-sm border">
|
|
<div className="flex items-center mb-4 px-5 pt-5">
|
|
<PageTitle title={(
|
|
<div className="flex items-center">
|
|
<span>Audit Trail</span>
|
|
<span className="color-gray-medium ml-2">{total}</span>
|
|
</div>
|
|
)}
|
|
/>
|
|
<div className="flex items-center ml-auto">
|
|
<div className="mx-2">
|
|
<SelectDateRange
|
|
period={auditStore.period}
|
|
onChange={onChange}
|
|
right
|
|
/>
|
|
</div>
|
|
<div className="mx-2">
|
|
<Select
|
|
options={[
|
|
{ label: 'Newest First', value: 'desc' },
|
|
{ label: 'Oldest First', value: 'asc' },
|
|
]}
|
|
defaultValue={order}
|
|
plain
|
|
onChange={({ value }) => auditStore.updateKey('order', value.value)}
|
|
/>
|
|
</div>
|
|
<AuditSearchField onChange={(value) => {
|
|
auditStore.updateKey('searchQuery', value);
|
|
auditStore.updateKey('page', 1);
|
|
}}
|
|
/>
|
|
<div>
|
|
<Button type="text" icon={<Icon name="grid-3x3" color="teal" />} className="ml-3" onClick={exportToCsv}>
|
|
<span className="ml-2">Export to CSV</span>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<AuditList />
|
|
</div>
|
|
));
|
|
}
|
|
|
|
export default withPageTitle('Audit Trail - OpenReplay Preferences')(AuditView);
|