feat: update search filters in settings

Update search filters in the system configration page in the administrator.

Change-Id: Ia00eb33b2c7fad98085cb714fd8e5503fa437153

releasenotes/notes/Add-Setting-Key-Description-54a1702f2f25e4d5.yaml

@@ -1,4 +0,0 @@
----
-features:
-  - |
-    Add a description for each setting key to better understand the meaning of each key.

releasenotes/notes/Optimize-System-Setting-Display-48aff7362665a942.yaml

@@ -0,0 +1,7 @@
+features:
+  - |
+    Optimize the display of system configuration page in the administrator:
+
+    * Add a description for each setting key to better understand the meaning of each key.
+
+    * Update search filter for each column.

src/pages/configuration/containers/Setting/index.jsx

@@ -49,18 +49,27 @@ export class Setting extends Base {
     return SETTING_DESC[key] || '-';
   }
 
+  get modeOptions() {
+    return [
+      { key: false, label: t('Immediate effect') },
+      { key: true, label: t('Take effect after restart') },
+    ];
+  }
+
   getColumns() {
     return [
       {
-        title: t('Type'),
+        title: t('Parameter'),
         dataIndex: 'key',
       },
       {
         title: t('Effective Mode'),
         dataIndex: 'restart_service',
         titleTip: t('Effective mode after configuration changes'),
-        render: (value) =>
+        render: (value) => {
-          value ? t('Take effect after restart') : t('Immediate effect'),
+          const item = this.modeOptions.find((m) => m.key === value);
+          return item?.label || '-';
+        },
       },
       {
         title: t('Description'),
@@ -71,7 +80,25 @@ export class Setting extends Base {
   }
 
   get searchFilters() {
-    return [];
+    return [
+      {
+        name: 'key',
+        label: t('Parameter'),
+      },
+      {
+        name: 'restart_service',
+        label: t('Effective Mode'),
+        options: this.modeOptions,
+      },
+      {
+        name: 'description',
+        label: t('Description'),
+        filterFunc: (record, val, data) => {
+          const desc = this.getDesc(data).toLowerCase();
+          return desc.includes(val.toLowerCase());
+        },
+      },
+    ];
   }
 }