fix: update port forwarding filters by front-end

1. Support port forwarding filters with protocol, external port/port range, internal port/port range, internal ip address and description by front-end fuzzy query
2. Update SimpleTable/List component to support filterFunc with origin data

Change-Id: Ib14cabdbe7295296caf770849c1fc6a1adc118c6

src/components/Tables/SimpleTable/index.jsx

@@ -267,7 +267,7 @@ export default class SimpleTable extends React.Component {
 
       const { filterFunc } = searchFilters.find((i) => i.name === key);
       if (filterFunc) {
-        return !filterFunc(value, filterValue);
+        return !filterFunc(value, filterValue, data);
       }
 
       const isInclude = this.checkFilterInclude(key);

src/containers/List/index.jsx

@@ -843,7 +843,7 @@ export default class BaseList extends React.Component {
         (i) => i.name === key
       );
       if (filterFunc) {
-        return !filterFunc(value, filterValue);
+        return !filterFunc(value, filterValue, data);
       }
 
       const isInclude = this.checkFilterInclude(key);

src/pages/network/containers/FloatingIp/Detail/PortForwarding/index.jsx

@@ -98,12 +98,33 @@ export class PortForwarding extends Base {
         options: getOptions(portForwardingProtocols),
       },
       {
-        label: t('External Port'),
+        label: t('External Port/Port Range'),
         name: 'external_port',
+        filterFunc: (_, filter, data) => {
+          const { external_port, external_port_range } = data || {};
+          return (
+            `${external_port || ''}`.includes(filter) ||
+            `${external_port_range || ''}`.includes(filter)
+          );
+        },
       },
       {
-        label: t('External Port Range'),
+        label: t('Internal Ip Address'),
-        name: 'external_port_range',
+        name: 'internal_ip_address',
+        filterFunc: (value, filter) => {
+          return value.includes(filter);
+        },
+      },
+      {
+        label: t('Internal Port/Port Range'),
+        name: 'internal_port',
+        filterFunc: (_, filter, data) => {
+          const { internal_port, internal_port_range } = data || {};
+          return (
+            `${internal_port || ''}`.includes(filter) ||
+            `${internal_port_range || ''}`.includes(filter)
+          );
+        },
       },
       {
         label: t('Description'),