[TSLA-8424] Whisker denied flows tab filter (#10017)

ronanc-tigera · web-flow · commit 8f079b2810ff · 2025-03-20T08:21:47.000-07:00
* upgrade to node v22.14.0
diff --git a/whisker/.nvmrc b/whisker/.nvmrc
@@ -1 +1 @@
-v20.17.0
+v22.14.0
diff --git a/whisker/Makefile b/whisker/Makefile
@@ -14,7 +14,7 @@ include ../lib.Makefile
 # Configure variables used by ci/cd common targets from lib.Makefile.
 BUILD_IMAGES=whisker
 
-BUILD_IMAGE_NAME=node:20.17
+BUILD_IMAGE_NAME=node:22.14
 
 DOCKER_RUN_RM:=docker run --rm \
 	--env CYPRESS_CACHE_FOLDER=/code/.cache/Cypress \
diff --git a/whisker/jest.config.js b/whisker/jest.config.js
@@ -30,5 +30,11 @@ export default {
             statements: 90,
         },
     },
-    coveragePathIgnorePatterns: ['<rootDir>/src/theme', '<rootDir>/src/libs'],
+    coveragePathIgnorePatterns: [
+        '<rootDir>/src/theme',
+        '<rootDir>/src/libs',
+        '<rootDir>/src/icons/index.ts',
+        '<rootDir>/src/components/index.ts',
+        '<rootDir>/src/features/flowLogs/components/index.ts',
+    ],
 };
diff --git a/whisker/src/App.tsx b/whisker/src/App.tsx
@@ -37,10 +37,10 @@ export const routes: RouteObject[] = [
                         path: '',
                         element: <FlowLogsContainer />,
                     },
-                    // {
-                    //     path: 'denied-flows',
-                    //     element: <FlowLogsContainer />,
-                    // },
+                    {
+                        path: 'denied-flows',
+                        element: <FlowLogsContainer />,
+                    },
                 ],
                 ErrorBoundary: FlowLogsErrorBoundary,
             },
diff --git a/whisker/src/api/__tests__/index.test.ts b/whisker/src/api/__tests__/index.test.ts
@@ -179,4 +179,13 @@ describe('useStream', () => {
         expect(mockEventSource.close).toHaveBeenCalled();
         expect(createEventSource).toHaveBeenCalledTimes(2);
     });
+
+    it('should call startStream with an updated path', () => {
+        const newPath = 'new-path';
+        const { result } = renderHook(() => useStream(''));
+
+        result.current.startStream(newPath);
+
+        expect(createEventSource).toHaveBeenCalledWith(newPath);
+    });
 });
diff --git a/whisker/src/components/index.tsx b/whisker/src/components/index.tsx
@@ -1,5 +1,4 @@
 import ChakraProvider from './core/ChakraProvider';
-import AppHeader from './layout/AppHeader';
 import AppLayout from './layout/AppLayout';
 
-export { AppHeader, AppLayout, ChakraProvider };
+export { AppLayout, ChakraProvider };
diff --git a/whisker/src/features/flowLogs/api/__tests__/index.test.tsx b/whisker/src/features/flowLogs/api/__tests__/index.test.tsx
@@ -6,7 +6,7 @@ import {
 } from '@/test-utils/helper';
 import {
     FilterHintTypes,
-    ListOmniFilterParam,
+    ListOmniFilterKeys,
     transformToFlowsFilterQuery,
 } from '@/utils/omniFilter';
 import {
@@ -65,7 +65,7 @@ describe('useInfiniteFilterQuery', () => {
 
         const { result } = renderHookWithQueryClient(() =>
             useInfiniteFilterQuery(
-                ListOmniFilterParam.source_namespace,
+                ListOmniFilterKeys.source_namespace,
                 filterString,
             ),
         );
@@ -103,11 +103,14 @@ describe('useFlowLogsStream', () => {
         } as any);
         jest.mocked(transformToFlowsFilterQuery).mockReturnValue('');
 
-        const { rerender } = renderHook((props) => useFlowLogsStream(props), {
-            initialProps: {
-                source_name: [],
-            } as any,
-        });
+        const { rerender } = renderHook(
+            ({ params, isDenied }) => useFlowLogsStream(params, isDenied),
+            {
+                initialProps: {
+                    source_name: [],
+                } as any,
+            },
+        );
 
         const updatedFilters = { source_name: ['foo'] } as any;
         jest.mocked(transformToFlowsFilterQuery).mockReturnValue('fake-query');
diff --git a/whisker/src/features/flowLogs/api/index.ts b/whisker/src/features/flowLogs/api/index.ts
@@ -10,6 +10,7 @@ import {
     transformToFlowsFilterQuery,
     transformToQueryPage,
     FilterHintType,
+    FilterKey,
 } from '@/utils/omniFilter';
 import { useInfiniteQuery, useQuery } from '@tanstack/react-query';
 
@@ -70,8 +71,14 @@ export const useInfiniteFilterQuery = (
 
 export const useFlowLogsStream = (
     filterValues: Record<OmniFilterParam, string[]>,
+    filterDenied: boolean,
 ) => {
-    const filters = transformToFlowsFilterQuery(filterValues);
+    const filters = transformToFlowsFilterQuery({
+        ...filterValues,
+        ...(filterDenied && {
+            action: ['Deny'],
+        }),
+    } as Record<FilterKey, string[]>);
     const queryString = objToQueryStr({
         watch: true,
         filters,
diff --git a/whisker/src/features/flowLogs/components/FlowLogsList/styles.ts b/whisker/src/features/flowLogs/components/FlowLogsList/styles.ts
@@ -6,6 +6,7 @@ export const tableStyles = {
 export const headerStyles = {
     '>div>div': {
         textTransform: 'none',
+        py: 0,
     },
     position: 'sticky',
     top: 0,
diff --git a/whisker/src/features/flowLogs/components/OmniFilters/__tests__/index.test.tsx b/whisker/src/features/flowLogs/components/OmniFilters/__tests__/index.test.tsx
@@ -1,6 +1,6 @@
 import { fireEvent, render, screen, within } from '@/test-utils/helper';
 import OmniFilters from '..';
-import { OmniFilterParam } from '@/utils/omniFilter';
+import { OmniFilterKeys } from '@/utils/omniFilter';
 
 jest.mock(
     '@/libs/tigera/ui-components/components/common/OmniFilter',
@@ -43,9 +43,13 @@ const PortOmniFilterMock = {
 jest.mock(
     '@/features/flowLogs/components/PortOmniFilter',
     () =>
-        ({ filterLabel, onChange }: any) => {
+        ({ filterLabel, onChange, port, protocol }: any) => {
             PortOmniFilterMock.onChange = onChange;
-            return <div>{filterLabel}</div>;
+            return (
+                <div>
+                    {filterLabel} {port} {protocol}
+                </div>
+            );
         },
 );
 
@@ -193,8 +197,23 @@ describe('<OmniFilters />', () => {
         PortOmniFilterMock.onChange(event);
 
         expect(mockOnMultiChange).toHaveBeenCalledWith(
-            [OmniFilterParam.protocol, OmniFilterParam.port],
+            [OmniFilterKeys.protocol, OmniFilterKeys.port],
             [event.protocol, event.port],
         );
     });
+
+    it('should handle when port/ protocol values are provided', () => {
+        const port = '1234';
+        const protocol = 'tcp';
+        const mockOnMultiChange = jest.fn();
+        render(
+            <OmniFilters
+                {...defaultProps}
+                onMultiChange={mockOnMultiChange}
+                selectedValues={{ port: [port], protocol: [protocol] }}
+            />,
+        );
+
+        expect(screen.getByText(`Port ${port} ${protocol}`));
+    });
 });
diff --git a/whisker/src/features/flowLogs/components/OmniFilters/index.tsx b/whisker/src/features/flowLogs/components/OmniFilters/index.tsx
@@ -7,21 +7,22 @@ import { OmniFilterChangeEvent } from '@/libs/tigera/ui-components/components/co
 import PortOmniFilter from '@/features/flowLogs/components/PortOmniFilter';
 import { OmniFilterDataQuery } from '@/types/api';
 import {
-    CustomOmniFilterParam,
     ListOmniFilterParam,
-    OmniFilterParam,
     OmniFilterProperties,
     ListOmniFiltersData,
     SelectedOmniFilterOptions,
     SelectedOmniFilters,
+    OmniFilterKeys,
+    CustomOmniFilterKeys,
+    ListOmniFilterKeys,
 } from '@/utils/omniFilter';
 import React from 'react';
 
-const listOmniFilterIds = Object.values(ListOmniFilterParam);
+const listOmniFilterIds = Object.values(ListOmniFilterKeys);
 
 const omniFilterIds = [
     ...listOmniFilterIds,
-    ...Object.values(CustomOmniFilterParam),
+    ...Object.values(CustomOmniFilterKeys),
 ];
 
 type OmniFiltersProps = {
@@ -67,7 +68,7 @@ const OmniFilters: React.FC<OmniFiltersProps> = ({
                 <OmniFilter
                     filterId={filterId}
                     filterLabel={OmniFilterProperties[filterId].label}
-                    filters={omniFilterData?.[filterId].filters ?? []}
+                    filters={omniFilterData[filterId].filters ?? []}
                     selectedFilters={selectedListOmniFilters[filterId]}
                     onChange={onChange}
                     onClear={() => handleClear(filterId)}
@@ -102,20 +103,20 @@ const OmniFilters: React.FC<OmniFiltersProps> = ({
             ))}
 
             <PortOmniFilter
-                port={selectedValues?.port?.[0] ?? ''}
-                protocol={selectedValues?.protocol?.[0] ?? ''}
+                port={selectedValues.port?.[0] ?? ''}
+                protocol={selectedValues.protocol?.[0] ?? ''}
                 selectedFilters={[
-                    ...(selectedValues?.port ?? []),
-                    ...(selectedValues?.protocol ?? []),
+                    ...(selectedValues.port ?? []),
+                    ...(selectedValues.protocol ?? []),
                 ]}
                 onChange={({ protocol, port }) =>
                     onMultiChange(
-                        [OmniFilterParam.protocol, OmniFilterParam.port],
+                        [OmniFilterKeys.protocol, OmniFilterKeys.port],
                         [protocol, port],
                     )
                 }
-                filterId={CustomOmniFilterParam.port}
-                filterLabel={OmniFilterProperties[OmniFilterParam.port].label}
+                filterId={CustomOmniFilterKeys.port}
+                filterLabel={OmniFilterProperties[OmniFilterKeys.port].label}
             />
         </OmniFilterList>
     );
diff --git a/whisker/src/features/flowLogs/components/PortOmniFilter/__tests__/index.test.tsx b/whisker/src/features/flowLogs/components/PortOmniFilter/__tests__/index.test.tsx
@@ -1,5 +1,8 @@
 import { render, screen, waitFor } from '@/test-utils/helper';
-import { CustomOmniFilterParam } from '@/utils/omniFilter';
+import {
+    CustomOmniFilterKeys,
+    CustomOmniFilterParam,
+} from '@/utils/omniFilter';
 import userEvent from '@testing-library/user-event';
 import PortOmniFilter from '..';
 
@@ -16,11 +19,11 @@ jest.mock(
 );
 
 const defaultProps = {
-    port: '',
-    protocol: '',
+    port: undefined as any,
+    protocol: undefined as any,
     selectedFilters: null,
     filterLabel: '',
-    filterId: CustomOmniFilterParam.port,
+    filterId: CustomOmniFilterKeys.port as CustomOmniFilterParam,
     onChange: jest.fn(),
 };
 
@@ -104,4 +107,44 @@ describe('<PortOmniFilter />', () => {
 
         screen.getByRole('button', { name: 'Port = UDP:2020' });
     });
+
+    it('should change the protocol to Any', async () => {
+        const mockOnChange = jest.fn();
+        render(
+            <PortOmniFilter
+                {...defaultProps}
+                onChange={mockOnChange}
+                protocol='tcp'
+            />,
+        );
+
+        userEvent.click(screen.getByRole('button', { name: 'Port = TCP' }));
+        await screen.findByTestId('port-filter-popover-body');
+
+        MockSelect.onChange({ value: '' });
+
+        userEvent.click(screen.getByRole('button', { name: 'Apply filter' }));
+
+        await waitFor(() => {
+            expect(mockOnChange).toHaveBeenCalledWith({
+                port: null,
+                protocol: null,
+            });
+        });
+    });
+
+    it('should handle a bad port string', async () => {
+        const mockOnChange = jest.fn();
+        render(
+            <PortOmniFilter
+                {...defaultProps}
+                onChange={mockOnChange}
+                port='xyz'
+            />,
+        );
+
+        expect(
+            screen.getByRole('button', { name: 'Port' }),
+        ).toBeInTheDocument();
+    });
 });
diff --git a/whisker/src/features/flowLogs/components/PortOmniFilter/index.tsx b/whisker/src/features/flowLogs/components/PortOmniFilter/index.tsx
@@ -128,8 +128,7 @@ const PortOmniFilter: React.FC<PortOmniFilterProps> = ({
                                                         )}
                                                         onChange={(option) =>
                                                             field.onChange(
-                                                                option?.value ??
-                                                                    '',
+                                                                option.value,
                                                             )
                                                         }
                                                     />
diff --git a/whisker/src/hooks/__tests__/omniFilters.test.ts b/whisker/src/hooks/__tests__/omniFilters.test.ts
@@ -4,7 +4,7 @@ import {
     OmniFilterParam,
     ListOmniFiltersData,
     SelectedOmniFilterData,
-    ListOmniFilterParam,
+    ListOmniFilterKeys,
 } from '@/utils/omniFilter';
 import { useOmniFilterData } from '../omniFilters';
 import { useInfiniteFilterQuery } from '@/features/flowLogs/api';
@@ -233,7 +233,7 @@ describe('useOmniFilterData', () => {
 
         const { result } = renderHook(() => useOmniFilterData());
 
-        result.current[1](ListOmniFilterParam.source_namespace, null);
+        result.current[1](ListOmniFilterKeys.source_namespace, null);
 
         expect(fetchNextPageMock).toHaveBeenCalledTimes(1);
     });
diff --git a/whisker/src/hooks/omniFilters.ts b/whisker/src/hooks/omniFilters.ts
@@ -7,6 +7,7 @@ import {
     ListOmniFiltersData,
     SelectedOmniFilterData,
     SelectedOmniFilterOptions,
+    ListOmniFilterKeys,
 } from '@/utils/omniFilter';
 import React from 'react';
 
@@ -16,7 +17,7 @@ export const useSelectedListOmniFilters = (
     selectedOmniFilterData: SelectedOmniFilterData,
 ) => {
     const urlFilterValueKeys = Object.keys(urlFilterParams).filter(
-        (key) => ListOmniFilterParam[key as ListOmniFilterParam],
+        (key) => ListOmniFilterKeys[key as ListOmniFilterParam],
     );
 
     return urlFilterValueKeys.reduce((accumulator, current) => {
@@ -88,13 +89,13 @@ export const useOmniFilterData = (): [
     (filterParam: ListOmniFilterParam, query: string | null) => void,
 ] => {
     const dataQueries = {
-        policy: useOmniFilterQuery(ListOmniFilterParam.policy),
+        policy: useOmniFilterQuery(ListOmniFilterKeys.policy),
         source_namespace: useOmniFilterQuery(
-            ListOmniFilterParam.source_namespace,
+            ListOmniFilterKeys.source_namespace,
         ),
-        dest_namespace: useOmniFilterQuery(ListOmniFilterParam.dest_namespace),
-        source_name: useOmniFilterQuery(ListOmniFilterParam.source_name),
-        dest_name: useOmniFilterQuery(ListOmniFilterParam.dest_name),
+        dest_namespace: useOmniFilterQuery(ListOmniFilterKeys.dest_namespace),
+        source_name: useOmniFilterQuery(ListOmniFilterKeys.source_name),
+        dest_name: useOmniFilterQuery(ListOmniFilterKeys.dest_name),
     };
 
     const fetchData = (
diff --git a/whisker/src/icons/ArrowRightIcon.tsx b/whisker/src/icons/ArrowRightIcon.tsx
@@ -1,11 +1,11 @@
 import { createIcon } from '@chakra-ui/icons';
 
-const CalicoCatIcon = createIcon({
+const ArrowRightIcon = createIcon({
     displayName: 'ArrowRightIcon',
     viewBox: '0 0 9 7',
     path: (
         <path d='M5.88672 0.515625L5.49609 0.90625C5.41797 1.00391 5.41797 1.14062 5.51562 1.23828L7.07812 2.74219H0.359375C0.222656 2.74219 0.125 2.85938 0.125 2.97656V3.52344C0.125 3.66016 0.222656 3.75781 0.359375 3.75781H7.07812L5.51562 5.28125C5.41797 5.37891 5.41797 5.51562 5.49609 5.61328L5.88672 6.00391C5.98438 6.08203 6.12109 6.08203 6.21875 6.00391L8.79688 3.42578C8.875 3.32812 8.875 3.19141 8.79688 3.09375L6.21875 0.515625C6.12109 0.4375 5.98438 0.4375 5.88672 0.515625Z' />
     ),
 });
 
-export default CalicoCatIcon;
+export default ArrowRightIcon;
diff --git a/whisker/src/icons/CalicoWhiskerIcon.tsx b/whisker/src/icons/CalicoWhiskerIcon.tsx
diff --git a/whisker/src/libs/tigera/ui-components/components/common/DataTable/ResizableBody/components/VirtualizedTableRow/index.tsx b/whisker/src/libs/tigera/ui-components/components/common/DataTable/ResizableBody/components/VirtualizedTableRow/index.tsx
diff --git a/whisker/src/pages/FlowLogsPage/__tests__/index.test.tsx b/whisker/src/pages/FlowLogsPage/__tests__/index.test.tsx
diff --git a/whisker/src/pages/FlowLogsPage/index.tsx b/whisker/src/pages/FlowLogsPage/index.tsx
diff --git a/whisker/src/types/api.ts b/whisker/src/types/api.ts
diff --git a/whisker/src/utils/__tests__/index.test.ts b/whisker/src/utils/__tests__/index.test.ts
diff --git a/whisker/src/utils/omniFilter.ts b/whisker/src/utils/omniFilter.ts

Original file line number	Diff line number	Diff line change
`@@ -128,8 +128,7 @@ const PortOmniFilter: React.FC<PortOmniFilterProps> = ({`
`128`	`128`	`)}`
`129`	`129`	`onChange={(option) =>`
`130`	`130`	`field.onChange(`
`131`		`- option?.value ??`
`132`		`- '',`
	`131`	`+ option.value,`
`133`	`132`	`)`
`134`	`133`	`}`
`135`	`134`	`/>`