Merge "fix: Fix for magic input with boolean option show & etc."

src/components/MagicInput/index.jsx

@@ -17,7 +17,7 @@ import PropTypes from 'prop-types';
 import { Input, Tag, Menu, Divider, Button, Checkbox } from 'antd';
 import { CloseOutlined, SearchOutlined } from '@ant-design/icons';
 import classnames from 'classnames';
-import { isEmpty } from 'lodash';
+import { isEmpty, isBoolean } from 'lodash';
 import styles from './index.less';
 
 const option = PropTypes.shape({
@@ -265,7 +265,10 @@ class MagicInput extends PureComponent {
       const { options } = filter;
       let label = value;
       if (options) {
-        const current = options.find((item) => item.key === value);
+        const current = options.find((item) => {
+          const key = isBoolean(item.key) ? item.key.toString() : item.key;
+          return key === (isBoolean(value) ? value.toString() : value);
+        });
         label = current ? current.label : value;
       }
       return (

src/resources/security-group-rule.jsx

@@ -113,6 +113,14 @@ export const getSelfColumns = (self) => [
 ];
 
 export const filterParams = [
+  {
+    label: t('Remote IP Prefix'),
+    name: 'remote_ip_prefix',
+    filterFunc: (record, value) => {
+      const recordValue = record || '0.0.0.0/0';
+      return recordValue.includes(value);
+    },
+  },
   {
     label: t('Direction'),
     name: 'direction',