feat: support for prometheus (#1784)

web/src/SystemInfo.js

@@ -17,6 +17,7 @@ import * as SystemBackend from "./backend/SystemInfo";
 import React from "react";
 import * as Setting from "./Setting";
 import i18next from "i18next";
+import PrometheusInfoTable from "./table/PrometheusInfoTable";
 
 class SystemInfo extends React.Component {
 
@@ -25,6 +26,7 @@ class SystemInfo extends React.Component {
     this.state = {
       systemInfo: {cpuUsage: [], memoryUsed: 0, memoryTotal: 0},
       versionInfo: {},
+      prometheusInfo: {apiThroughput: [], apiLatency: [], totalThroughput: 0},
       intervalId: null,
       loading: true,
     };
@@ -45,6 +47,11 @@ class SystemInfo extends React.Component {
         }).catch(error => {
           Setting.showMessage("error", `System info failed to get: ${error}`);
         });
+        SystemBackend.getPrometheusInfo().then(res => {
+          this.setState({
+            prometheusInfo: res.data,
+          });
+        });
       }, 1000 * 2);
       this.setState({intervalId: id});
     }).catch(error => {
@@ -80,7 +87,10 @@ class SystemInfo extends React.Component {
         <br /> <br />
         <Progress type="circle" percent={Number((Number(this.state.systemInfo.memoryUsed) / Number(this.state.systemInfo.memoryTotal) * 100).toFixed(2))} />
       </div>;
-
+    const latencyUi = this.state.prometheusInfo.apiLatency.length <= 0 ? <Spin size="large" /> :
+      <PrometheusInfoTable prometheusInfo={this.state.prometheusInfo} table={"latency"} />;
+    const throughputUi = this.state.prometheusInfo.apiLatency.length <= 0 ? <Spin size="large" /> :
+      <PrometheusInfoTable prometheusInfo={this.state.prometheusInfo} table={"throughput"} />;
     const link = this.state.versionInfo?.version !== "" ? `https://github.com/casdoor/casdoor/releases/tag/${this.state.versionInfo?.version}` : "";
     let versionText = this.state.versionInfo?.version !== "" ? this.state.versionInfo?.version : i18next.t("system:Unknown version");
     if (this.state.versionInfo?.commitOffset > 0) {
@@ -103,6 +113,16 @@ class SystemInfo extends React.Component {
                   {this.state.loading ? <Spin size="large" /> : memUi}
                 </Card>
               </Col>
+              <Col span={24}>
+                <Card title={i18next.t("system:API Latency")} bordered={true} style={{textAlign: "center", height: "100%"}}>
+                  {this.state.loading ? <Spin size="large" /> : latencyUi}
+                </Card>
+              </Col>
+              <Col span={24}>
+                <Card title={i18next.t("system:API Throughput")} bordered={true} style={{textAlign: "center", height: "100%"}}>
+                  {this.state.loading ? <Spin size="large" /> : throughputUi}
+                </Card>
+              </Col>
             </Row>
             <Divider />
             <Card title={i18next.t("system:About Casdoor")} bordered={true} style={{textAlign: "center"}}>

web/src/backend/SystemInfo.js

@@ -33,3 +33,13 @@ export function getVersionInfo() {
     },
   }).then(res => res.json());
 }
+
+export function getPrometheusInfo() {
+  return fetch(`${Setting.ServerUrl}/api/get-prometheus-info `, {
+    method: "GET",
+    credentials: "include",
+    headers: {
+      "Accept-Language": Setting.getAcceptLanguage(),
+    },
+  }).then(res => res.json());
+}

web/src/table/PrometheusInfoTable.js

@@ -0,0 +1,82 @@
+// Copyright 2023 The Casdoor Authors. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import React from "react";
+import {Table} from "antd";
+
+class PrometheusInfoTable extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      table: props.table,
+    };
+  }
+  render() {
+    const latencyColumns = [
+      {
+        title: "Name",
+        dataIndex: "name",
+        key: "name",
+      },
+      {
+        title: "Method",
+        dataIndex: "method",
+        key: "method",
+      },
+      {
+        title: "Count",
+        dataIndex: "count",
+        key: "count",
+      },
+      {
+        title: "Latency(ms)",
+        dataIndex: "latency",
+        key: "latency",
+      },
+    ];
+    const throughputColumns = [
+      {
+        title: "Name",
+        dataIndex: "name",
+        key: "name",
+      },
+      {
+        title: "Method",
+        dataIndex: "method",
+        key: "method",
+      },
+      {
+        title: "Throughput",
+        dataIndex: "throughput",
+        key: "throughput",
+      },
+    ];
+    if (this.state.table === "latency") {
+      return (
+        <div style={{height: "300px", overflow: "auto"}}>
+          <Table columns={latencyColumns} dataSource={this.props.prometheusInfo.apiLatency} pagination={false} />
+        </div>
+      );
+    } else if (this.state.table === "throughput") {
+      return (
+        <div style={{height: "300px", overflow: "auto"}}>
+            Total Throughput: {this.props.prometheusInfo.totalThroughput}
+          <Table columns={throughputColumns} dataSource={this.props.prometheusInfo.apiThroughput} pagination={false} />
+        </div>
+      );
+    }
+  }
+}
+
+export default PrometheusInfoTable;