feat: improve site list page, rule list page

Author: hsluoyz

web/src/RuleEditPage.js

@@ -193,7 +193,7 @@ class RuleEditPage extends React.Component {
           this.state.rule.type !== "WAF" && (this.state.rule.action === "Allow" || this.state.rule.action === "Block") && (
             <Row style={{marginTop: "20px"}}>
               <Col span={2} style={{marginTop: "5px"}}>
-                {i18next.t("rule:Status Code")}:
+                {i18next.t("rule:Status code")}:
               </Col>
               <Col span={22}>
                 <InputNumber value={this.state.rule.statusCode} min={100} max={599} onChange={e => {

web/src/RuleListPage.js

@@ -108,7 +108,7 @@ class RuleListPage extends BaseListPage {
         title: i18next.t("general:Owner"),
         dataIndex: "owner",
         key: "owner",
-        width: "200px",
+        width: "150px",
         sorter: (a, b) => a.owner.localeCompare(b.owner),
       },
       {
@@ -145,6 +145,7 @@ class RuleListPage extends BaseListPage {
         title: i18next.t("rule:Type"),
         dataIndex: "type",
         key: "type",
+        width: "100px",
         sorter: (a, b) => a.type.localeCompare(b.type),
         render: (text, rule, index) => {
           return (
@@ -169,6 +170,27 @@ class RuleListPage extends BaseListPage {
           });
         },
       },
+      {
+        title: i18next.t("general:Action"),
+        dataIndex: "action",
+        key: "action",
+        width: "100px",
+        sorter: (a, b) => a.action.localeCompare(b.action),
+      },
+      {
+        title: i18next.t("rule:Status code"),
+        dataIndex: "statusCode",
+        key: "statusCode",
+        width: "120px",
+        sorter: (a, b) => a.statusCode.localeCompare(b.statusCode),
+      },
+      {
+        title: i18next.t("rule:Reason"),
+        dataIndex: "reason",
+        key: "reason",
+        width: "300px",
+        sorter: (a, b) => a.reason.localeCompare(b.reason),
+      },
       {
         title: i18next.t("general:Action"),
         dataIndex: "",

web/src/SiteListPage.js

@@ -199,6 +199,28 @@ class SiteListPage extends BaseListPage {
           });
         },
       },
+      {
+        title: i18next.t("general:Rules"),
+        dataIndex: "rules",
+        key: "rules",
+        width: "120px",
+        sorter: (a, b) => a.rules.localeCompare(b.rules),
+        render: (text, record, index) => {
+          if (!record.rules) {
+            return null;
+          }
+
+          return record.rules.map(rule => {
+            return (
+              <a key={rule} target="_blank" rel="noreferrer" href={`/rules/${rule}`}>
+                <Tag color={"processing"}>
+                  {rule}
+                </Tag>
+              </a>
+            );
+          });
+        },
+      },
       {
         title: i18next.t("site:Host"),
         dataIndex: "host",
@@ -243,7 +265,7 @@ class SiteListPage extends BaseListPage {
         title: i18next.t("site:Nodes"),
         dataIndex: "nodes",
         key: "nodes",
-        // width: "200px",
+        width: "180px",
         sorter: (a, b) => a.nodes.length - b.nodes.length,
         render: (text, record, index) => {
           return record.nodes.map(node => {
@@ -315,13 +337,13 @@ class SiteListPage extends BaseListPage {
       //     );
       //   },
       // },
-      {
-        title: i18next.t("site:Mode"),
-        dataIndex: "sslMode",
-        key: "sslMode",
-        width: "100px",
-        sorter: (a, b) => a.sslMode.localeCompare(b.sslMode),
-      },
+      // {
+      //   title: i18next.t("site:Mode"),
+      //   dataIndex: "sslMode",
+      //   key: "sslMode",
+      //   width: "100px",
+      //   sorter: (a, b) => a.sslMode.localeCompare(b.sslMode),
+      // },
       {
         title: i18next.t("site:SSL cert"),
         dataIndex: "sslCert",

web/src/components/IpRuleTable.js

@@ -140,7 +140,7 @@ class IpRuleTable extends React.Component {
             mode="tags"
             style={{width: "100%"}}
             placeholder="Input IP Addresses"
-            value={record.value.split(",")}
+            value={record.value ? record.value.split(",") : []}
             onChange={value => this.updateField(table, index, "value", value)}
             options={this.state.options[index]}
           />

web/src/locales/de/data.json

@@ -83,7 +83,7 @@
     "Rate": "Rate",
     "Reason": "Reason",
     "Rule": "Rule",
-    "Status Code": "Status Code",
+    "Status code": "Status code",
     "Type": "Type",
     "Value": "Value",
     "and": "and",

web/src/locales/en/data.json

@@ -83,7 +83,7 @@
     "Rate": "Rate",
     "Reason": "Reason",
     "Rule": "Rule",
-    "Status Code": "Status Code",
+    "Status code": "Status code",
     "Type": "Type",
     "Value": "Value",
     "and": "and",

web/src/locales/es/data.json

@@ -83,7 +83,7 @@
     "Rate": "Rate",
     "Reason": "Reason",
     "Rule": "Rule",
-    "Status Code": "Status Code",
+    "Status code": "Status code",
     "Type": "Type",
     "Value": "Value",
     "and": "and",

web/src/locales/fr/data.json

@@ -83,7 +83,7 @@
     "Rate": "Rate",
     "Reason": "Reason",
     "Rule": "Rule",
-    "Status Code": "Status Code",
+    "Status code": "Status code",
     "Type": "Type",
     "Value": "Value",
     "and": "and",

web/src/locales/id/data.json

@@ -83,7 +83,7 @@
     "Rate": "Rate",
     "Reason": "Reason",
     "Rule": "Rule",
-    "Status Code": "Status Code",
+    "Status code": "Status code",
     "Type": "Type",
     "Value": "Value",
     "and": "and",

web/src/locales/ja/data.json

@@ -83,7 +83,7 @@
     "Rate": "Rate",
     "Reason": "Reason",
     "Rule": "Rule",
-    "Status Code": "Status Code",
+    "Status code": "Status code",
     "Type": "Type",
     "Value": "Value",
     "and": "and",