diff --git a/packages/transaction-log/src/components/dialogs/customize.dialog.component.tsx b/packages/transaction-log/src/components/dialogs/customize.dialog.component.tsx index f3b17f81..d907e96b 100644 --- a/packages/transaction-log/src/components/dialogs/customize.dialog.component.tsx +++ b/packages/transaction-log/src/components/dialogs/customize.dialog.component.tsx @@ -8,7 +8,8 @@ import { FormControlLabel, Checkbox, List, - ListItem + ListItem, + Box } from '@mui/material' import {CustomizeDialogProps} from '../../interfaces/index.interface' @@ -17,7 +18,9 @@ const CustomizeDialog: React.FC = ({ onClose, onApply, visibleFilters, - handleFilterVisibilityChange + handleFilterVisibilityChange, + onRestoreDefaults, + isDefaultState }) => { return ( @@ -43,12 +46,23 @@ const CustomizeDialog: React.FC = ({ - - + + + + + + + ) diff --git a/packages/transaction-log/src/components/filters/custom.component.tsx b/packages/transaction-log/src/components/filters/custom.component.tsx index 45743019..fb2ded3f 100644 --- a/packages/transaction-log/src/components/filters/custom.component.tsx +++ b/packages/transaction-log/src/components/filters/custom.component.tsx @@ -7,6 +7,23 @@ import CustomizeDialog from '../dialogs/customize.dialog.component' import {CustomFilterProps} from '../../interfaces/index.interface' import {debounce} from 'lodash' +const defaultVisibleFilters = { + status: true, + statusCode: true, + searchQuery: true, + channel: true, + startDate: true, + endDate: true, + limit: true, + reruns: true, + host: false, + port: false, + path: false, + param: false, + client: false, + method: false +} + const CustomFilters: React.FC = ({ status, setStatus, @@ -42,24 +59,7 @@ const CustomFilters: React.FC = ({ }) => { const [open, setOpen] = useState(false) const debounceFetchTransactionLogs = debounce(fetchTransactionLogs, 10000) - - const [visibleFilters, setVisibleFilters] = useState({ - status: true, - statusCode: true, - searchQuery: true, - channel: true, - startDate: true, - endDate: true, - limit: true, - reruns: true, - host: false, - port: false, - path: false, - param: false, - client: false, - method: false - }) - + const [visibleFilters, setVisibleFilters] = useState(defaultVisibleFilters) const [tempVisibleFilters, setTempVisibleFilters] = useState(visibleFilters) const handleStatusChange = (event: React.ChangeEvent) => { @@ -144,6 +144,16 @@ const CustomFilters: React.FC = ({ setOpen(false) } + const handleRestoreDefaults = () => { + setTempVisibleFilters(defaultVisibleFilters) + } + + const isDefaultState = filters => { + return Object.keys(defaultVisibleFilters).every( + key => filters[key] === defaultVisibleFilters[key] + ) + } + useEffect(() => { debounceFetchTransactionLogs(null, true) return () => debounceFetchTransactionLogs.cancel() @@ -414,6 +424,8 @@ const CustomFilters: React.FC = ({ onApply={handleApplyFilters} visibleFilters={tempVisibleFilters} handleFilterVisibilityChange={handleFilterVisibilityChange} + onRestoreDefaults={handleRestoreDefaults} + isDefaultState={isDefaultState(tempVisibleFilters)} /> ) diff --git a/packages/transaction-log/src/interfaces/index.interface.spec.ts b/packages/transaction-log/src/interfaces/index.interface.spec.ts index e5d99801..034b873a 100644 --- a/packages/transaction-log/src/interfaces/index.interface.spec.ts +++ b/packages/transaction-log/src/interfaces/index.interface.spec.ts @@ -66,10 +66,26 @@ const customizeDialogProps: CustomizeDialogProps = { open: true, onClose: () => {}, onApply: () => {}, - visibleFilters: {status: true, channel: false}, + visibleFilters: { + status: true, + statusCode: true, + channel: true, + startDate: true, + endDate: true, + limit: true, + reruns: true, + host: true, + port: true, + path: true, + param: true, + client: true, + method: true + }, handleFilterVisibilityChange: ( event: React.ChangeEvent - ) => {} + ) => {}, + onRestoreDefaults: () => {}, + isDefaultState: true } const settingsDialogProps: SettingsDialogProps = { diff --git a/packages/transaction-log/src/interfaces/index.interface.ts b/packages/transaction-log/src/interfaces/index.interface.ts index 7e7a4ab8..4bceca1e 100644 --- a/packages/transaction-log/src/interfaces/index.interface.ts +++ b/packages/transaction-log/src/interfaces/index.interface.ts @@ -65,10 +65,26 @@ export interface CustomizeDialogProps { open: boolean onClose: () => void onApply: () => void - visibleFilters: {[key: string]: boolean} + visibleFilters: { + status: boolean + statusCode: boolean + channel: boolean + startDate: boolean + endDate: boolean + limit: boolean + reruns: boolean + host: boolean + port: boolean + path: boolean + param: boolean + client: boolean + method: boolean + } handleFilterVisibilityChange: ( event: React.ChangeEvent ) => void + onRestoreDefaults: () => void + isDefaultState: boolean } export interface SettingsDialogProps {