Search by IP address

locales/en/plugin__nmstate-console-plugin.json

@@ -109,6 +109,8 @@
   "Remove label selector": "Remove label selector",
   "Save": "Save",
   "Scheduling will not be possible at this state": "Scheduling will not be possible at this state",
+  "Search by IP address...": "Search by IP address...",
+  "Search IP address": "Search IP address",
   "selector key": "selector key",
   "selector value": "selector value",
   "System Description": "System Description",

package.json

@@ -26,7 +26,7 @@
   },
   "devDependencies": {
     "@kubevirt-ui/kubevirt-api": "^0.0.47",
-    "@openshift-console/dynamic-plugin-sdk": "0.0.18",
+    "@openshift-console/dynamic-plugin-sdk": "0.0.20",
     "@openshift-console/dynamic-plugin-sdk-webpack": "0.0.8",
     "@openshift/dynamic-plugin-sdk": "~1.0.0",
     "@openshift/dynamic-plugin-sdk-webpack": "~1.0.0",

src/utils/interfaces/getters.tsx

@@ -0,0 +1,7 @@
+import { NodeNetworkConfigurationInterface } from '@types';
+
+export const getIPV4Address = (iface: NodeNetworkConfigurationInterface) =>
+  iface?.ipv4?.address?.[0]?.ip;
+
+export const getIPV6Address = (iface: NodeNetworkConfigurationInterface) =>
+  iface?.ipv6?.address?.[0]?.ip;

src/views/states/list/StatesList.tsx

@@ -26,6 +26,7 @@ import useDrawerInterface from './hooks/useDrawerInterface';
 import useSelectedFilters from './hooks/useSelectedFilters';
 import useStateColumns from './hooks/useStateColumns';
 import useStateFilters from './hooks/useStateFilters';
+import { FILTER_TYPES } from './constants';
 
 const StatesList: FC = () => {
   const { t } = useNMStateTranslation();
@@ -59,7 +60,11 @@ const StatesList: FC = () => {
             <ListPageFilter
               data={data}
               loaded={statesLoaded}
-              rowFilters={filters}
+              rowFilters={filters.filter((filter) => filter?.type !== FILTER_TYPES.IP_ADDRESS)}
+              hideLabelFilter
+              nameFilterTitle={t('IP address')}
+              nameFilterPlaceholder={t('Search by IP address...')}
+              nameFilter={FILTER_TYPES.IP_ADDRESS}
               onFilterChange={(...args) => {
                 onFilterChange(...args);
                 onPaginationChange({

src/views/states/list/components/utils.ts

@@ -1,20 +1,32 @@
 import { InterfaceType, NodeNetworkConfigurationInterface } from '@types';
 
-import { FILTERS_TYPES } from '../constants';
-
-export const interfaceFilters = {
-  [FILTERS_TYPES.INTERFACE_STATE]: (selectedInput, obj) => {
+import { FILTER_TYPES } from '../constants';
+import { getIPV4Address, getIPV6Address } from '@utils/interfaces/getters';
+
+export const interfaceFilters: Record<
+  string,
+  (selectedInput: string[], obj: NodeNetworkConfigurationInterface) => boolean
+> = {
+  [FILTER_TYPES.INTERFACE_STATE]: (selectedInput, obj) => {
     if (!selectedInput.length) return true;
     return selectedInput.some((status) => obj.state.toLowerCase() === status);
   },
-  [FILTERS_TYPES.INTERFACE_TYPE]: (selectedInput, obj) => {
+  [FILTER_TYPES.INTERFACE_TYPE]: (selectedInput, obj) => {
     if (!selectedInput.length) return true;
     return selectedInput.some((interfaceType) => obj.type === interfaceType);
   },
-  [FILTERS_TYPES.IP_FILTER]: (selectedInput, obj) => {
+  [FILTER_TYPES.IP_FILTER]: (selectedInput, obj) => {
     if (!selectedInput.length) return true;
     return selectedInput.some((ipType) => !!obj[ipType]);
   },
+  [FILTER_TYPES.IP_ADDRESS]: (selectedInput, obj) => {
+    const searchIpAddress = selectedInput?.[0];
+    if (!searchIpAddress) return true;
+
+    const addresses = [getIPV4Address(obj), getIPV6Address(obj)].filter(Boolean);
+
+    return addresses?.some((address) => address?.toLowerCase().includes(searchIpAddress));
+  },
 } as const;
 
 export const filterInterfaces = (

src/views/states/list/constants.ts

@@ -4,8 +4,9 @@ import { getResourceUrl } from '@utils/helpers';
 
 export const baseListUrl = getResourceUrl({ model: NodeNetworkStateModel });
 
-export const FILTERS_TYPES = {
+export const FILTER_TYPES = {
   INTERFACE_STATE: 'interface-state',
   INTERFACE_TYPE: 'interface-type',
   IP_FILTER: 'ip-filter',
+  IP_ADDRESS: 'ip-address',
 } as const;

src/views/states/list/hooks/useSelectedFilters.ts

@@ -2,10 +2,10 @@ import { useMemo } from 'react';
 
 import useQueryParams from '@utils/hooks/useQueryParams';
 
-import { FILTERS_TYPES } from '../constants';
+import { FILTER_TYPES } from '../constants';
 
 export type SelectedFilters = {
-  [filter in typeof FILTERS_TYPES as string]: string[];
+  [filter in typeof FILTER_TYPES as string]: string[];
 };
 
 const useSelectedFilters = (): SelectedFilters => {
@@ -14,7 +14,11 @@ const useSelectedFilters = (): SelectedFilters => {
   return useMemo(
     () =>
       Object.keys(queryParams)
-        .filter((queryKey) => queryKey.startsWith('rowFilter-'))
+        .filter(
+          (queryKey) =>
+            queryKey.startsWith('rowFilter-') ||
+            (Object.values(FILTER_TYPES) as string[]).includes(queryKey),
+        )
         .reduce((acc, queryKey) => {
           const filterType = queryKey.replace('rowFilter-', '');
           const filterValue = queryParams[queryKey].split(',');

src/views/states/list/hooks/useStateFilters.ts

@@ -3,15 +3,35 @@ import { useNMStateTranslation } from 'src/utils/hooks/useNMStateTranslation';
 import { RowFilter } from '@openshift-console/dynamic-plugin-sdk';
 import { InterfaceType, NodeNetworkConfigurationInterface, V1beta1NodeNetworkState } from '@types';
 
-import { FILTERS_TYPES } from '../constants';
+import { FILTER_TYPES } from '../constants';
+import { getIPV4Address, getIPV6Address } from '@utils/interfaces/getters';
 
 const useStateFilters = (): RowFilter<V1beta1NodeNetworkState>[] => {
   const { t } = useNMStateTranslation();
 
   return [
+    {
+      type: FILTER_TYPES.IP_ADDRESS,
+      filter: (searchText, obj) => {
+        const searchIPAddress = searchText?.selected?.[0];
+        if (!searchIPAddress) return true;
+
+        const interfaces = obj?.status?.currentState
+          ?.interfaces as NodeNetworkConfigurationInterface[];
+
+        const addresses = interfaces
+          ?.reduce((acc, iface) => [...acc, getIPV4Address(iface), getIPV6Address(iface)], [])
+          .filter(Boolean);
+
+        return addresses?.some((address) => address?.toLowerCase().includes(searchIPAddress));
+      },
+      isMatch: () => true,
+      filterGroupName: t('Search IP address'),
+      items: [],
+    },
     {
       filterGroupName: t('Interface state'),
-      type: FILTERS_TYPES.INTERFACE_STATE,
+      type: FILTER_TYPES.INTERFACE_STATE,
       filter: (selectedIpTypes, obj) => {
         if (!selectedIpTypes.selected.length) return true;
         return selectedIpTypes.selected.some((status) =>
@@ -35,7 +55,7 @@ const useStateFilters = (): RowFilter<V1beta1NodeNetworkState>[] => {
     },
     {
       filterGroupName: t('Interface type'),
-      type: FILTERS_TYPES.INTERFACE_TYPE,
+      type: FILTER_TYPES.INTERFACE_TYPE,
       filter: (selectedInterfaceTypes, obj) => {
         if (!selectedInterfaceTypes.selected.length) return true;
         return selectedInterfaceTypes.selected.some((interfaceType) =>
@@ -60,7 +80,7 @@ const useStateFilters = (): RowFilter<V1beta1NodeNetworkState>[] => {
     },
     {
       filterGroupName: t('IP'),
-      type: FILTERS_TYPES.IP_FILTER,
+      type: FILTER_TYPES.IP_FILTER,
       filter: (selectedIpTypes, obj) => {
         if (!selectedIpTypes.selected.length) return true;
         return selectedIpTypes.selected.some((ipType) =>