[feat]add instance status visualization management interface

package.json

@@ -27,6 +27,7 @@
     "dayjs": "^1.8.17",
     "dva": "^2.2.3",
     "dva-loading": "^2.0.3",
+    "echarts": "^6.0.0",
     "enquire-js": "^0.2.1",
     "history": "^5.3.0",
     "lodash": "^4.17.10",

src/locales/en-US.json

@@ -377,6 +377,15 @@
   "SHENYU.REGISTRY.GROUP": "Group",
   "SHENYU.REGISTRY.MODAL.TITLE": "Add Registry Data",
   "SHENYU.REGISTRY.PASSPORT": "Passport",
+  "SHENYU.INSTANCE.SELECT.LASTBEATTIME": "LastBeatTime",
+  "SHENYU.INSTANCE.SELECT.CREATETIME": "RegisterTime",
+  "SHENYU.INSTANCE.SELECT.STATE": "Instance State",
+  "SHENYU.INSTANCE.SELECT.STATE.UNKNOWN": "unKnown",
+  "SHENYU.INSTANCE.SELECT.STATE.ONLINE": "Online",
+  "SHENYU.INSTANCE.SELECT.STATE.OFFLINE": "Offline",
+  "SHENYU.INSTANCE.NO_DATA": "No Data",
+  "SHENYU.INSTANCE.PIE_DATA": "Service Live Status",
+  "SHENYU.INSTANCE.LINE_DATA": "Recent Service Live Status",
   "SHENYU.PLUGIN.SELECT.STATUS": "Select Status",
   "SHENYU.PLUGIN.REQUEST.HEADER.KEY": "Header Key",
   "SHENYU.PLUGIN.REQUEST.HEADER.VALUE": "Header Value",

src/locales/zh-CN.json

@@ -381,6 +381,15 @@
   "SHENYU.REGISTRY.NAMESPACE": "命名空间",
   "SHENYU.REGISTRY.GROUP": "分组",
   "SHENYU.REGISTRY.PASSPORT": "密码",
+  "SHENYU.INSTANCE.SELECT.LASTBEATTIME": "最近心跳时间",
+  "SHENYU.INSTANCE.SELECT.CREATETIME": "注册时间",
+  "SHENYU.INSTANCE.SELECT.STATE": "服务状态",
+  "SHENYU.INSTANCE.SELECT.STATE.UNKNOWN": "未知",
+  "SHENYU.INSTANCE.SELECT.STATE.ONLINE": "在线",
+  "SHENYU.INSTANCE.SELECT.STATE.OFFLINE": "离线",
+  "SHENYU.INSTANCE.NO_DATA": "暂无数据",
+  "SHENYU.INSTANCE.PIE_DATA": "服务存活状态",
+  "SHENYU.INSTANCE.LINE_DATA": "服务近期存活状态",
   "SHENYU.PLUGIN.SELECT.STATUS": "选择状态",
   "SHENYU.PLUGIN.REQUEST.HEADER.KEY": "Header Key",
   "SHENYU.PLUGIN.REQUEST.HEADER.VALUE": "Header Value",

src/models/instance.js

@@ -15,14 +15,20 @@
  * limitations under the License.
  */
 
-import { getInstancesByNamespace, findInstance } from "../services/api";
+import {
+  getInstancesByNamespace,
+  findInstance,
+  findInstanceAnalysis,
+} from "../services/api";
 
 export default {
   namespace: "instance",
 
   state: {
     instanceList: [],
     total: 0,
+    pieData: [],
+    lineList: [],
   },
 
   effects: {
@@ -44,6 +50,21 @@ export default {
         });
       }
     },
+    *fetchAnalysis(params, { call, put }) {
+      const { payload } = params;
+      const json = yield call(findInstanceAnalysis, payload);
+
+      if (json.code === 200) {
+        let { pieData, lineData } = json.data;
+        yield put({
+          type: "saveInstancesAnalysis",
+          payload: {
+            pieData,
+            lineData,
+          },
+        });
+      }
+    },
     *fetchItem(params, { call }) {
       const { payload, callback } = params;
       const json = yield call(findInstance, payload);
@@ -75,5 +96,12 @@ export default {
         total: payload.total,
       };
     },
+    saveInstancesAnalysis(state, { payload }) {
+      return {
+        ...state,
+        pieData: payload.pieData,
+        lineData: payload.lineData,
+      };
+    },
   },
 };

src/routes/System/Instance/index.js

@@ -16,8 +16,21 @@
  */
 
 import React, { Component } from "react";
-import { Button, Input, Popover, Select, Table, Tag, Typography } from "antd";
+import {
+  Button,
+  Card,
+  Col,
+  Input,
+  Popover,
+  Row,
+  Select,
+  Table,
+  Tag,
+  Typography,
+} from "antd";
 import { connect } from "dva";
+import { format } from "date-fns";
+import * as echarts from "echarts";
 import { resizableComponents } from "../../../utils/resizable";
 import { getCurrentLocale, getIntlContent } from "../../../utils/IntlUtils";
 import AuthButton from "../../../utils/AuthButton";
@@ -53,10 +66,15 @@ export default class Instance extends Component {
   componentDidMount() {
     this.query();
     this.initInstanceColumns();
+    this.queryAnalysis();
+    this.pieChartInstance = echarts.init(document.getElementById("pieDataDiv"));
+    this.lineChartInstance = echarts.init(
+      document.getElementById("lineDataDiv"),
+    );
   }
 
   componentDidUpdate(prevProps) {
-    const { language, currentNamespaceId } = this.props;
+    const { language, currentNamespaceId, instance } = this.props;
     const { localeName } = this.state;
     if (language !== localeName) {
       this.initInstanceColumns();
@@ -65,6 +83,12 @@ export default class Instance extends Component {
     if (prevProps.currentNamespaceId !== currentNamespaceId) {
       this.query();
     }
+    if (prevProps.instance.pieData !== instance.pieData) {
+      this.renderPieChart(instance.pieData);
+    }
+    if (prevProps.instance.lineData !== instance.lineData) {
+      this.renderLineChart(instance.lineData);
+    }
   }
 
   handleResize =
@@ -105,6 +129,137 @@ export default class Instance extends Component {
     });
   };
 
+  queryAnalysis = () => {
+    const { dispatch, currentNamespaceId } = this.props;
+    dispatch({
+      type: "instance/fetchAnalysis",
+      payload: {
+        namespaceId: currentNamespaceId,
+      },
+    });
+  };
+
+  renderPieChart = (pieData) => {
+    if (!pieData || !this.pieChartInstance) {
+      return;
+    }
+    const chartData =
+      pieData && pieData.length > 0
+        ? pieData
+        : [{ value: 0, name: getIntlContent("SHENYU.INSTANCE.NO_DATA") }];
+
+    const option = {
+      title: {
+        text: getIntlContent("SHENYU.INSTANCE.PIE_DATA"),
+        left: "center",
+      },
+      tooltip: {
+        trigger: "item",
+        formatter: "{a} <br/>{b}: {c} ({d}%)",
+      },
+      legend: {
+        orient: "vertical",
+        left: "left",
+      },
+      series: [
+        {
+          name: getIntlContent("SHENYU.INSTANCE.DISTRIBUTION"),
+          type: "pie",
+          radius: "50%",
+          data: chartData,
+          emphasis: {
+            itemStyle: {
+              shadowBlur: 10,
+              shadowOffsetX: 0,
+              shadowColor: "rgba(0, 0, 0, 0.5)",
+            },
+          },
+        },
+      ],
+    };
+
+    this.pieChartInstance.setOption(option);
+
+    window.addEventListener("resize", () => {
+      this.pieChartInstance.resize();
+    });
+  };
+
+  renderLineChart = (lineData) => {
+    if (!lineData || !this.lineChartInstance) {
+      return;
+    }
+
+    const chartData =
+      lineData && lineData.length > 0
+        ? lineData
+        : [
+            {
+              name: getIntlContent("SHENYU.INSTANCE.NO_DATA"),
+              type: "line",
+              data: [0, 0, 0, 0, 0],
+            },
+          ];
+
+    const formattedSeries = chartData.map((item) => ({
+      name: item.name || "Unknown",
+      type: "line",
+      data: Array.isArray(item.data) ? item.data : [],
+    }));
+
+    const option = {
+      title: {
+        text: getIntlContent("SHENYU.INSTANCE.LINE_DATA"),
+      },
+      tooltip: {
+        trigger: "axis",
+      },
+      legend: {
+        data: formattedSeries.map((series) => series.name),
+      },
+      grid: {
+        left: "3%",
+        right: "4%",
+        bottom: "10%",
+        containLabel: true,
+      },
+      toolbox: {
+        feature: {
+          saveAsImage: {},
+        },
+      },
+      xAxis: {
+        type: "category",
+        boundaryGap: false,
+        show: false,
+      },
+      yAxis: {
+        type: "value",
+        show: true,
+        min: 0,
+        max: 4,
+        minInterval: 1,
+        interval: 1,
+        name: "数量",
+        nameTextStyle: {
+          color: "#333",
+          fontSize: 12,
+          padding: [0, 0, 0, 0],
+        },
+        axisLabel: {
+          formatter: "{value}",
+        },
+      },
+      series: formattedSeries,
+    };
+
+    this.lineChartInstance.setOption(option);
+
+    window.addEventListener("resize", () => {
+      this.lineChartInstance.resize();
+    });
+  };
+
   pageOnchange = (page) => {
     this.setState({ currentPage: page }, this.query);
   };
@@ -189,7 +344,7 @@ export default class Instance extends Component {
           dataIndex: "instanceType",
           ellipsis: true,
           key: "instanceType",
-          width: 120,
+          width: 150,
           sorter: (a, b) => (a.instanceType > b.instanceType ? 1 : -1),
           render: (text) => {
             return <div style={{ color: "#1f640a" }}>{text || "----"}</div>;
@@ -201,6 +356,7 @@ export default class Instance extends Component {
           dataIndex: "instanceInfo",
           key: "instanceInfo",
           ellipsis: true,
+          width: 200,
           render: (text, record) => {
             const tag = (
               <div>
@@ -234,6 +390,68 @@ export default class Instance extends Component {
             );
           },
         },
+        {
+          align: "center",
+          title: getIntlContent("SHENYU.INSTANCE.SELECT.LASTBEATTIME"),
+          dataIndex: "lastHeartBeatTime",
+          ellipsis: true,
+          key: "lastHeartBeatTime",
+          width: 120,
+          sorter: (a, b) => (a.instanceType > b.instanceType ? 1 : -1),
+          render: (text) => {
+            return (
+              <div style={{ color: "#1f640a" }}>
+                {format(new Date(text), "YYYY-MM-DD HH:mm:ss") || "----"}
+              </div>
+            );
+          },
+        },
+        {
+          align: "center",
+          title: getIntlContent("SHENYU.INSTANCE.SELECT.CREATETIME"),
+          dataIndex: "dateCreated",
+          ellipsis: true,
+          key: "dateCreated",
+          width: 120,
+          sorter: (a, b) => (a.instanceType > b.instanceType ? 1 : -1),
+          render: (text) => {
+            return (
+              <div style={{ color: "#1f640a" }}>
+                {format(new Date(text), "YYYY-MM-DD HH:mm:ss") || "----"}
+              </div>
+            );
+          },
+        },
+        {
+          align: "center",
+          title: getIntlContent("SHENYU.INSTANCE.SELECT.STATE"),
+          dataIndex: "instanceState",
+          ellipsis: true,
+          key: "instanceState",
+          width: 120,
+          sorter: (a, b) => (a.instanceType > b.instanceType ? 1 : -1),
+          render: (state) => {
+            if (state === 1) {
+              return (
+                <Tag color="green">
+                  {getIntlContent("SHENYU.INSTANCE.SELECT.STATE.ONLINE")}
+                </Tag>
+              );
+            } else if (state === 0) {
+              return (
+                <Tag color="orange">
+                  {getIntlContent("SHENYU.INSTANCE.SELECT.STATE.UNKNOWN")}
+                </Tag>
+              );
+            } else if (state === 2) {
+              return (
+                <Tag color="red">
+                  {getIntlContent("SHENYU.INSTANCE.SELECT.STATE.OFFLINE")}
+                </Tag>
+              );
+            }
+          },
+        },
       ],
     });
   }
@@ -290,6 +508,25 @@ export default class Instance extends Component {
           </AuthButton>
         </div>
 
+        <Row gutter={16} style={{ marginBottom: 24 }}>
+          <Col span={12}>
+            <Card>
+              <div
+                id="pieDataDiv"
+                style={{ width: "800px", height: "400px" }}
+              />
+            </Card>
+          </Col>
+          <Col span={12}>
+            <Card>
+              <div
+                id="lineDataDiv"
+                style={{ width: "800px", height: "400px" }}
+              />
+            </Card>
+          </Col>
+        </Row>
+
         <Table
           size="small"
           components={this.components}