wehub-resource-sync
89 lines
2.4 KiB
TypeScript
89 lines
2.4 KiB
TypeScript
import { useState } from 'react';
|
|
|
|
import { PageHeader } from '@@/PageHeader';
|
|
import { useTableStateWithoutStorage } from '@@/datatables/useTableState';
|
|
import { BEOverlay } from '@@/BEFeatureIndicator/BEOverlay';
|
|
|
|
import { FeatureId } from '../../feature-flags/enums';
|
|
|
|
import { ActivityLogsTable } from './ActivityLogsTable';
|
|
import { useActivityLogs, getSortType } from './useActivityLogs';
|
|
import { useExportMutation } from './useExportMutation';
|
|
import { FilterBar } from './FilterBar';
|
|
|
|
export function ActivityLogsView() {
|
|
const exportMutation = useExportMutation();
|
|
const [range, setRange] = useState<
|
|
{ start: Date; end: Date | null } | undefined
|
|
>(undefined);
|
|
const [page, setPage] = useState(0);
|
|
const tableState = useTableStateWithoutStorage('Timestamp', true);
|
|
const offset = page * tableState.pageSize;
|
|
|
|
const query = {
|
|
offset,
|
|
limit: tableState.pageSize,
|
|
sortBy: getSortType(tableState.sortBy?.id),
|
|
sortDesc: tableState.sortBy?.desc,
|
|
keyword: tableState.search,
|
|
...(range
|
|
? {
|
|
after: seconds(range?.start?.valueOf()),
|
|
before: seconds(range?.end?.valueOf()),
|
|
}
|
|
: undefined),
|
|
};
|
|
|
|
const logsQuery = useActivityLogs(query);
|
|
|
|
return (
|
|
<>
|
|
<PageHeader
|
|
title="User activity logs"
|
|
breadcrumbs="User activity logs"
|
|
reload
|
|
/>
|
|
|
|
<div className="mx-4">
|
|
<BEOverlay variant="multi-widget" featureId={FeatureId.ACTIVITY_AUDIT}>
|
|
<div className="row">
|
|
<div className="col-sm-12">
|
|
<FilterBar
|
|
value={range}
|
|
onChange={setRange}
|
|
onExport={handleExport}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<ActivityLogsTable
|
|
sort={tableState.sortBy}
|
|
onChangeSort={(value) =>
|
|
tableState.setSortBy(value?.id, value?.desc || false)
|
|
}
|
|
limit={tableState.pageSize}
|
|
onChangeLimit={tableState.setPageSize}
|
|
keyword={tableState.search}
|
|
onChangeKeyword={tableState.setSearch}
|
|
currentPage={page}
|
|
onChangePage={setPage}
|
|
totalItems={logsQuery.data?.totalCount || 0}
|
|
dataset={logsQuery.data?.logs}
|
|
/>
|
|
</BEOverlay>
|
|
</div>
|
|
</>
|
|
);
|
|
|
|
function handleExport() {
|
|
exportMutation.mutate(query);
|
|
}
|
|
}
|
|
|
|
function seconds(ms?: number) {
|
|
if (!ms) {
|
|
return undefined;
|
|
}
|
|
|
|
return Math.floor(ms / 1000);
|
|
}
|