Merge pull request #687 from jembi/CU-86c0c42k4_Filters-are-not-working

Cu 86c0c42k4 filters are not working

package.json

@@ -20,6 +20,8 @@
   "dependencies": {
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^14.2.1",
+    "@types/lodash": "^4.17.9",
+    "lodash": "^4.17.21",
     "moment": "^2.29.1",
     "react-router-dom": "^6.26.1"
   }

packages/transaction-log/src/components/common/app.main.component.tsx

@@ -53,65 +53,65 @@ const App: React.FC = () => {
   let serverDifferenceTime
 
   const fetchTransactionLogs = useCallback(
-    async (timestampFilter?: string) => {
+    async (timestampFilter?: string, filteredResults?: boolean) => {
       try {
         const filters: {[key: string]: any} = {}
 
         if (timestampFilter) {
           filters['request.timestamp'] = JSON.stringify({
             $gte: timestampFilter
           })
-        } else {
-          if (status !== 'NoFilter') {
-            filters.status = status
-          }
+        } 
 
-          if (statusCode) {
-            filters['response.status'] = statusCode
-          }
+        if (startDate || endDate) {
+          filters['request.timestamp'] = JSON.stringify({
+            ...(startDate && {$gte: startDate.toISOString()}),
+            ...(endDate && {$lte: endDate.toISOString()})
+          })
+        }
 
-          if (channel !== 'NoFilter') {
-            filters.channelID = channel
-          }
+        if (status !== 'NoFilter') {
+          filters.status = status
+        }
 
-          if (reruns !== 'NoFilter') {
-            if (reruns === 'Yes') {
-              filters.childIDs = JSON.stringify({$exists: true, $ne: []})
-            } else if (reruns === 'No') {
-              filters.childIDs = JSON.stringify({$eq: []})
-            }
-          }
+        if (statusCode) {
+          filters['response.status'] = statusCode
+        }
 
-          if (startDate && endDate) {
-            filters['request.timestamp'] = JSON.stringify({
-              $gte: startDate.toISOString(),
-              $lte: endDate.toISOString()
-            })
-          }
+        if (channel !== 'NoFilter') {
+          filters.channelID = channel
+        }
 
-          if (host) {
-            filters['request.host'] = host
+        if (reruns !== 'NoFilter') {
+          if (reruns === 'Yes') {
+            filters.childIDs = JSON.stringify({$exists: true, $ne: []})
+          } else if (reruns === 'No') {
+            filters.childIDs = JSON.stringify({$eq: []})
           }
+        }
 
-          if (port) {
-            filters['request.port'] = port
-          }
+        if (host) {
+          filters['request.host'] = host
+        }
 
-          if (path) {
-            filters['request.path'] = path
-          }
+        if (port) {
+          filters['request.port'] = port
+        }
 
-          if (param) {
-            filters['request.querystring'] = param
-          }
+        if (path) {
+          filters['request.path'] = path
+        }
 
-          if (client !== 'NoFilter') {
-            filters.clientID = client
-          }
+        if (param) {
+          filters['request.querystring'] = param
+        }
 
-          if (method !== 'NoFilter') {
-            filters['request.method'] = method
-          }
+        if (client !== 'NoFilter') {
+          filters.clientID = client
+        }
+
+        if (method !== 'NoFilter') {
+          filters['request.method'] = method
         }
 
         const fetchParams: {[key: string]: any} = {
@@ -136,14 +136,24 @@ const App: React.FC = () => {
         )
 
         setTransactions(prevTransactions => {
-          const newTransactionListState = [...prevTransactions]
+          if(filteredResults){
+            return newTransactionsWithChannelDetails
+          }
+          let newTransactionListState = [...prevTransactions]
 
           newTransactionsWithChannelDetails.forEach(transaction => {
             if (!newTransactionListState.some(t => t._id === transaction._id)) {
               newTransactionListState.push(transaction)
             }
           })
 
+          //filter based on the status
+          if (status !== 'NoFilter') {
+            newTransactionListState = newTransactionListState.filter(
+              transaction => transaction.status === status
+            )
+          }
+
           //sort the transactions by timestamp
           newTransactionListState.sort((a, b) => {
             return (
@@ -224,7 +234,7 @@ const App: React.FC = () => {
   }, [])
 
   useEffect(() => {
-    if (timestampFilter) {
+    if (timestampFilter && !startDate && !endDate) {
       ;(async () => {
         lastPollingComplete = false
         await fetchTransactionLogs(timestampFilter)
@@ -386,6 +396,7 @@ const App: React.FC = () => {
                 reruns={reruns}
                 setReruns={setReruns}
                 channels={channels}
+                fetchTransactionLogs={fetchTransactionLogs}
               />
             )}
             {tabValue === 1 && (
@@ -418,6 +429,7 @@ const App: React.FC = () => {
                 method={method}
                 setMethod={setMethod}
                 clients={clients}
+                fetchTransactionLogs={fetchTransactionLogs}
               />
             )}
           </CardContent>

packages/transaction-log/src/components/filters/basic.component.tsx

@@ -1,9 +1,10 @@
-import React from 'react'
+import React, {useCallback, useEffect} from 'react'
 import {Box, TextField, MenuItem, Grid, Button, Card} from '@mui/material'
 import {DateTimePicker} from '@mui/x-date-pickers/DateTimePicker'
 import {LocalizationProvider} from '@mui/x-date-pickers/LocalizationProvider'
 import {AdapterDateFns} from '@mui/x-date-pickers/AdapterDateFns'
 import {BasicFilterProps} from '../../interfaces/index.interface'
+import {debounce} from 'lodash'
 
 const BasicFilters: React.FC<BasicFilterProps> = ({
   status,
@@ -20,8 +21,15 @@ const BasicFilters: React.FC<BasicFilterProps> = ({
   setLimit,
   reruns,
   setReruns,
-  channels
+  channels,
+  fetchTransactionLogs
 }) => {
+
+  const debounceFetchTransactionLogs = useCallback(
+    debounce(() => fetchTransactionLogs(null, true), 500),
+    [fetchTransactionLogs]
+  );
+
   const handleStatusChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setStatus(event.target.value)
   }
@@ -42,6 +50,14 @@ const BasicFilters: React.FC<BasicFilterProps> = ({
     setReruns(event.target.value)
   }
 
+  useEffect(() => {
+    (async () => {
+      await debounceFetchTransactionLogs()
+    })()
+
+    return () => debounceFetchTransactionLogs.cancel()
+  }, [status, searchQuery, channel, limit, startDate, endDate, reruns])
+
   const handleClearFilters = () => {
     setStatus('NoFilter')
     setSearchQuery('')
@@ -70,7 +86,7 @@ const BasicFilters: React.FC<BasicFilterProps> = ({
             <MenuItem value="Completed with error(s)">
               Completed with error(s)
             </MenuItem>
-            <MenuItem value="Success">Success</MenuItem>
+            <MenuItem value="Successful">Successful</MenuItem>
           </TextField>
         </Grid>
         <Grid item xs={3}>

packages/transaction-log/src/components/filters/custom.component.tsx

@@ -1,10 +1,11 @@
-import React, {useState} from 'react'
+import React, {useEffect, useState} from 'react'
 import {Box, TextField, MenuItem, Button, Grid} from '@mui/material'
 import {DateTimePicker} from '@mui/x-date-pickers/DateTimePicker'
 import {LocalizationProvider} from '@mui/x-date-pickers/LocalizationProvider'
 import {AdapterDateFns} from '@mui/x-date-pickers/AdapterDateFns'
 import CustomizeDialog from '../dialogs/customize.dialog.component'
 import {CustomFilterProps} from '../../interfaces/index.interface'
+import {debounce} from 'lodash'
 
 const CustomFilters: React.FC<CustomFilterProps> = ({
   status,
@@ -34,9 +35,11 @@ const CustomFilters: React.FC<CustomFilterProps> = ({
   setClient,
   clients,
   method,
-  setMethod
+  setMethod,
+  fetchTransactionLogs
 }) => {
   const [open, setOpen] = useState(false)
+  const debounceFetchTransactionLogs = debounce(fetchTransactionLogs, 10000)
 
   const [visibleFilters, setVisibleFilters] = useState({
     status: true,
@@ -139,6 +142,24 @@ const CustomFilters: React.FC<CustomFilterProps> = ({
     setOpen(false)
   }
 
+  useEffect(() => {
+    debounceFetchTransactionLogs(null, true)
+    return () => debounceFetchTransactionLogs.cancel()
+  }, [
+    status,
+    channel,
+    limit,
+    startDate,
+    endDate,
+    reruns,
+    statusCode,
+    port,
+    path,
+    param,
+    client,
+    method
+  ])
+
   return (
     <Box sx={{padding: '16px'}}>
       <Grid container spacing={2}>
@@ -158,7 +179,7 @@ const CustomFilters: React.FC<CustomFilterProps> = ({
               <MenuItem value="Completed with error(s)">
                 Completed with error(s)
               </MenuItem>
-              <MenuItem value="Success">Success</MenuItem>
+              <MenuItem value="Successful">Successful</MenuItem>
             </TextField>
           </Grid>
         )}

packages/transaction-log/src/interfaces/index.interface.spec.ts

@@ -24,7 +24,8 @@ const basicFilterProps: BasicFilterProps = {
   setLimit: (value: number) => {},
   reruns: 'none',
   setReruns: (value: string) => {},
-  channels: [mockChannel]
+  channels: [mockChannel],
+  fetchTransactionLogs: (timestampFilter?: string, filteredResults?: boolean) => Promise.resolve(),
 }
 
 const customFilterProps: CustomFilterProps = {
@@ -55,7 +56,8 @@ const customFilterProps: CustomFilterProps = {
   setClient: (value: string) => {},
   clients: [mockClient],
   method: 'GET',
-  setMethod: (value: string) => {}
+  setMethod: (value: string) => {},
+  fetchTransactionLogs: (timestampFilter?: string, filteredResults?: boolean) => Promise.resolve(),
 }
 
 const customizeDialogProps: CustomizeDialogProps = {
@@ -84,13 +86,18 @@ describe('Interface Conformance Tests', () => {
     expect(typeof basicFilterProps.setStatus).toBe('function')
     expect(Array.isArray(basicFilterProps.channels)).toBe(true)
     expect(basicFilterProps.channels[0]._id).toBe('1')
+    expect(typeof basicFilterProps.fetchTransactionLogs).toBe('function')
+    expect(basicFilterProps.fetchTransactionLogs()).resolves.toBe(undefined)
+
   })
 
   it('should conform to CustomFilterProps interface', () => {
     expect(customFilterProps.statusCode).toBe(200)
     expect(customFilterProps.host).toBe('localhost')
     expect(customFilterProps.clients[0].name).toBe('Test Client')
     expect(typeof customFilterProps.setClient).toBe('function')
+    expect(typeof customFilterProps.fetchTransactionLogs).toBe('function')
+    expect(customFilterProps.fetchTransactionLogs()).resolves.toBe(undefined)
   })
 
   it('should conform to CustomizeDialogProps interface', () => {

packages/transaction-log/src/interfaces/index.interface.ts

@@ -15,7 +15,8 @@ export interface BasicFilterProps {
   setLimit: (value: number) => void
   reruns: string
   setReruns: (value: string) => void
-  channels: Channel[]
+  channels: Channel[],
+  fetchTransactionLogs: (timestampFilter?: string, filteredResults?: boolean) => Promise<void>
 }
 
 export interface CustomFilterProps {
@@ -46,7 +47,8 @@ export interface CustomFilterProps {
   setClient: (value: string) => void
   clients: Client[]
   method: string
-  setMethod: (value: string) => void
+  setMethod: (value: string) => void,
+  fetchTransactionLogs: (timestampFilter?: string, filteredResults?: boolean) => Promise<void>
 }
 
 export interface CustomizeDialogProps {