feat: add system info page (#1033)

* feat: add system info page * feat: add some code * fix
2025-07-05 05:50:19 +08:00 · 2022-08-20 21:22:46 +08:00
parent 67a5adf585
commit ef4c3833a4
17 changed files with 439 additions and 8 deletions
--- a/web/src/App.js
+++ b/web/src/App.js
@ -71,6 +71,7 @@ import SamlCallback from "./auth/SamlCallback";
 import CasLogout from "./auth/CasLogout";
 import ModelListPage from "./ModelListPage";
 import ModelEditPage from "./ModelEditPage";
+import SystemInfo from "./SystemInfo";

 const {Header, Footer} = Layout;

@ -148,6 +149,8 @@ class App extends Component {
      this.setState({selectedMenuKey: "/login"});
    } else if (uri.includes("/result")) {
      this.setState({selectedMenuKey: "/result"});
+    } else if (uri.includes("/sysinfo")) {
+      this.setState({selectedMenuKey: "/sysinfo"});
    } else {
      this.setState({selectedMenuKey: -1});
    }
@ -478,8 +481,14 @@ class App extends Component {
            </Link>
          </Menu.Item>
        );
+        res.push(
+          <Menu.Item key="/sysinfo">
+            <Link to="/sysinfo">
+              {i18next.t("general:SysInfo")}
+            </Link>
+          </Menu.Item>
+        );
      }
-
      res.push(
        <Menu.Item key="/swagger">
          <a target="_blank" rel="noreferrer" href={Setting.isLocalhost() ? `${Setting.ServerUrl}/swagger` : "/swagger"}>
@ -560,6 +569,7 @@ class App extends Component {
          <Route exact path="/payments/:paymentName/result" render={(props) => this.renderLoginIfNotLoggedIn(<PaymentResultPage account={this.state.account} {...props} />)} />
          <Route exact path="/records" render={(props) => this.renderLoginIfNotLoggedIn(<RecordListPage account={this.state.account} {...props} />)} />
          <Route exact path="/.well-known/openid-configuration" render={(props) => <OdicDiscoveryPage />} />
+          <Route exact path="/sysinfo" render={(props) => this.renderLoginIfNotLoggedIn(<SystemInfo account={this.state.account} {...props} />)} />
          <Route path="" render={() => <Result status="404" title="404 NOT FOUND" subTitle={i18next.t("general:Sorry, the page you visited does not exist.")}
            extra={<a href="/"><Button type="primary">{i18next.t("general:Back Home")}</Button></a>} />} />
        </Switch>
@ -691,6 +701,7 @@ class App extends Component {
              <Route exact path="/forget/:applicationName" render={(props) => this.renderHomeIfLoggedIn(<ForgetPage {...props} />)} />
              <Route exact path="/prompt" render={(props) => this.renderLoginIfNotLoggedIn(<PromptPage account={this.state.account} {...props} />)} />
              <Route exact path="/prompt/:applicationName" render={(props) => this.renderLoginIfNotLoggedIn(<PromptPage account={this.state.account} onUpdateAccount={(account) => {this.onUpdateAccount(account);}} {...props} />)} />
+              <Route exact path="/sysinfo" render={(props) => this.renderLoginIfNotLoggedIn(<SystemInfo {...props} />)} />
              <Route path="" render={() => <Result status="404" title="404 NOT FOUND" subTitle={i18next.t("general:Sorry, the page you visited does not exist.")}
                extra={<a href="/"><Button type="primary">{i18next.t("general:Back Home")}</Button></a>} />} />
            </Switch>
--- a/web/src/SystemInfo.js
+++ b/web/src/SystemInfo.js
@ -0,0 +1,111 @@
+// Copyright 2022 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 {Card, Col, Divider, Progress, Row} from "antd";
+import * as SystemBackend from "./backend/SystemInfo";
+import React from "react";
+import * as Setting from "./Setting";
+import i18next from "i18next";
+
+class SystemInfo extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      cpuUsage: [],
+      memUsed: 0,
+      memTotal: 0,
+      latestVersion: "v1.0.0",
+      intervalId: null,
+    };
+  }
+
+  UNSAFE_componentWillMount() {
+    SystemBackend.getSystemInfo(this.props.account?.owner, this.props.account?.name).then(res => {
+      this.setState({
+        cpuUsage: res.cpu_usage,
+        memUsed: res.memory_used,
+        memTotal: res.memory_total,
+      });
+
+      const id = setInterval(() => {
+        SystemBackend.getSystemInfo(this.props.account?.owner, this.props.account?.name).then(res => {
+          this.setState({
+            cpuUsage: res.cpu_usage,
+            memUsed: res.memory_used,
+            memTotal: res.memory_total,
+          });
+        });
+      }, 1000 * 3);
+      this.setState({intervalId: id});
+    }).catch(error => {
+      Setting.showMessage("error", `System info failed to get: ${error}`);
+    });
+
+    SystemBackend.getGitHubLatestReleaseVersion().then(res => {
+      this.setState({latestVersion: res});
+    }).catch(err => {
+      Setting.showMessage("error", `get latest commit version failed: ${err}`);
+    });
+  }
+
+  componentWillUnmount() {
+    clearInterval(this.state.intervalId);
+  }
+
+  render() {
+    return (
+      <Row>
+        <Col span={6}></Col>
+        <Col span={12}>
+          <Row gutter={[10, 10]}>
+            <Col span={12}>
+              <Card title={i18next.t("system:CPU Usage")} bordered={true} style={{textAlign: "center"}}>
+                {
+                  this.state.cpuUsage.length !== 0 &&
+                  this.state.cpuUsage.map((usage, i) => {
+                    return (
+                      <Progress key={i} percent={Number(usage.toFixed(1))} />
+                    );
+                  })
+                }
+              </Card>
+            </Col>
+            <Col span={12}>
+              <Card title={i18next.t("system:Memory Usage")} bordered={true} style={{textAlign: "center"}}>
+                {(Number(this.state.memUsed) / 1024 / 1024).toFixed(2)} MB / {(Number(this.state.memTotal) / 1024 / 1024 / 1024).toFixed(2)} GB
+                <br /> <br />
+                <Progress type="circle" percent={Number((Number(this.state.memUsed) / Number(this.state.memTotal) * 100).toFixed(2))} />
+              </Card>
+            </Col>
+          </Row>
+          <Divider />
+          <Card title="About Casdoor" bordered={true} style={{textAlign: "center"}}>
+            <div>{i18next.t("system:An Identity and Access Management (IAM) / Single-Sign-On (SSO) platform with web UI supporting OAuth 2.0, OIDC, SAML and CAS")}</div>
+            GitHub: <a href="https://github.com/casdoor/casdoor">casdoor</a>
+            <br />
+            {i18next.t("system:Version")}: <a href={`https://github.com/casdoor/casdoor/commit/${this.state.latestVersion}`}>{this.state.latestVersion.substring(0, 8)}</a>
+            <br />
+            {i18next.t("system:Official Website")}: <a href="https://casdoor.org/">casdoor.org</a>
+            <br />
+            {i18next.t("system:Community")}: <a href="https://casdoor.org/#:~:text=Casdoor%20API-,Community,-GitHub">contact us</a>
+          </Card>
+        </Col>
+        <Col span={6}></Col>
+      </Row>
+    );
+  }
+}
+
+export default SystemInfo;
--- a/web/src/backend/SystemInfo.js
+++ b/web/src/backend/SystemInfo.js
@ -0,0 +1,29 @@
+// Copyright 2022 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 * as Setting from "../Setting";
+
+export function getSystemInfo(owner, name) {
+  return fetch(`${Setting.ServerUrl}/api/get-system-info?id=${owner}/${encodeURIComponent(name)}`, {
+    method: "GET",
+    credentials: "include",
+  }).then(res => res.json());
+}
+
+export function getGitHubLatestReleaseVersion() {
+  return fetch(`${Setting.ServerUrl}/api/get-release`, {
+    method: "GET",
+    credentials: "include",
+  }).then(res => res.json());
+}
--- a/web/src/locales/de/data.json
+++ b/web/src/locales/de/data.json
@ -198,6 +198,7 @@
    "Swagger": "Swagger",
    "Sync": "Sync",
    "Syncers": "Syncers",
+    "SysInfo": "SysInfo",
    "Timestamp": "Zeitstempel",
    "Tokens": "Token",
    "URL": "URL",
@ -593,6 +594,14 @@
    "Table primary key": "Primärschlüssel der Tabelle",
    "Table primary key - Tooltip": "Primärschlüssel der Tabelle - Tooltip"
  },
+  "system": {
+    "An Identity and Access Management (IAM) / Single-Sign-On (SSO) platform with web UI supporting OAuth 2.0, OIDC, SAML and CAS": "An Identity and Access Management (IAM) / Single-Sign-On (SSO) platform with web UI supporting OAuth 2.0, OIDC, SAML and CAS",
+    "CPU Usage": "CPU Usage",
+    "Community": "Community",
+    "Memory Usage": "Memory Usage",
+    "Official Website": "Official Website",
+    "Version": "Version"
+  },
  "token": {
    "Access token": "Zugangs-Token",
    "Authorization code": "Autorisierungscode",
--- a/web/src/locales/en/data.json
+++ b/web/src/locales/en/data.json
@ -198,6 +198,7 @@
    "Swagger": "Swagger",
    "Sync": "Sync",
    "Syncers": "Syncers",
+    "SysInfo": "SysInfo",
    "Timestamp": "Timestamp",
    "Tokens": "Tokens",
    "URL": "URL",
@ -593,6 +594,14 @@
    "Table primary key": "Table primary key",
    "Table primary key - Tooltip": "Table primary key - Tooltip"
  },
+  "system": {
+    "An Identity and Access Management (IAM) / Single-Sign-On (SSO) platform with web UI supporting OAuth 2.0, OIDC, SAML and CAS": "An Identity and Access Management (IAM) / Single-Sign-On (SSO) platform with web UI supporting OAuth 2.0, OIDC, SAML and CAS",
+    "CPU Usage": "CPU Usage",
+    "Community": "Community",
+    "Memory Usage": "Memory Usage",
+    "Official Website": "Official Website",
+    "Version": "Version"
+  },
  "token": {
    "Access token": "Access token",
    "Authorization code": "Authorization code",
--- a/web/src/locales/fr/data.json
+++ b/web/src/locales/fr/data.json
@ -198,6 +198,7 @@
    "Swagger": "Swagger",
    "Sync": "Sync",
    "Syncers": "Synchronisateurs",
+    "SysInfo": "SysInfo",
    "Timestamp": "Horodatage",
    "Tokens": "Jetons",
    "URL": "URL",
@ -593,6 +594,14 @@
    "Table primary key": "Clé primaire de la table",
    "Table primary key - Tooltip": "Clé primaire du tableau - infobulle"
  },
+  "system": {
+    "An Identity and Access Management (IAM) / Single-Sign-On (SSO) platform with web UI supporting OAuth 2.0, OIDC, SAML and CAS": "An Identity and Access Management (IAM) / Single-Sign-On (SSO) platform with web UI supporting OAuth 2.0, OIDC, SAML and CAS",
+    "CPU Usage": "CPU Usage",
+    "Community": "Community",
+    "Memory Usage": "Memory Usage",
+    "Official Website": "Official Website",
+    "Version": "Version"
+  },
  "token": {
    "Access token": "Jeton d'accès",
    "Authorization code": "Code d'autorisation",
--- a/web/src/locales/ja/data.json
+++ b/web/src/locales/ja/data.json
@ -198,6 +198,7 @@
    "Swagger": "Swagger",
    "Sync": "Sync",
    "Syncers": "Syncers",
+    "SysInfo": "システム情報",
    "Timestamp": "タイムスタンプ",
    "Tokens": "トークン",
    "URL": "URL",
@ -593,6 +594,14 @@
    "Table primary key": "テーブルのプライマリキー",
    "Table primary key - Tooltip": "テーブルのプライマリキー - ツールチップ"
  },
+  "system": {
+    "An Identity and Access Management (IAM) / Single-Sign-On (SSO) platform with web UI supporting OAuth 2.0, OIDC, SAML and CAS": "An Identity and Access Management (IAM) / Single-Sign-On (SSO) platform with web UI supporting OAuth 2.0, OIDC, SAML and CAS",
+    "CPU Usage": "CPU Usage",
+    "Community": "Community",
+    "Memory Usage": "Memory Usage",
+    "Official Website": "Official Website",
+    "Version": "Version"
+  },
  "token": {
    "Access token": "アクセストークン",
    "Authorization code": "認証コード",
--- a/web/src/locales/ko/data.json
+++ b/web/src/locales/ko/data.json
@ -198,6 +198,7 @@
    "Swagger": "Swagger",
    "Sync": "Sync",
    "Syncers": "Syncers",
+    "SysInfo": "SysInfo",
    "Timestamp": "Timestamp",
    "Tokens": "Tokens",
    "URL": "URL",
@ -593,6 +594,14 @@
    "Table primary key": "Table primary key",
    "Table primary key - Tooltip": "Table primary key - Tooltip"
  },
+  "system": {
+    "An Identity and Access Management (IAM) / Single-Sign-On (SSO) platform with web UI supporting OAuth 2.0, OIDC, SAML and CAS": "An Identity and Access Management (IAM) / Single-Sign-On (SSO) platform with web UI supporting OAuth 2.0, OIDC, SAML and CAS",
+    "CPU Usage": "CPU Usage",
+    "Community": "Community",
+    "Memory Usage": "Memory Usage",
+    "Official Website": "Official Website",
+    "Version": "Version"
+  },
  "token": {
    "Access token": "Access token",
    "Authorization code": "Authorization code",
--- a/web/src/locales/ru/data.json
+++ b/web/src/locales/ru/data.json
@ -198,6 +198,7 @@
    "Swagger": "Swagger",
    "Sync": "Sync",
    "Syncers": "Синхронизаторы",
+    "SysInfo": "Информация о системе",
    "Timestamp": "Отметка времени",
    "Tokens": "Жетоны",
    "URL": "URL",
@ -593,6 +594,14 @@
    "Table primary key": "Основной ключ таблицы",
    "Table primary key - Tooltip": "Основная таблица - Подсказка"
  },
+  "system": {
+    "An Identity and Access Management (IAM) / Single-Sign-On (SSO) platform with web UI supporting OAuth 2.0, OIDC, SAML and CAS": "An Identity and Access Management (IAM) / Single-Sign-On (SSO) platform with web UI supporting OAuth 2.0, OIDC, SAML and CAS",
+    "CPU Usage": "CPU Usage",
+    "Community": "Community",
+    "Memory Usage": "Memory Usage",
+    "Official Website": "Official Website",
+    "Version": "Version"
+  },
  "token": {
    "Access token": "Маркер доступа",
    "Authorization code": "Код авторизации",
--- a/web/src/locales/zh/data.json
+++ b/web/src/locales/zh/data.json
@ -198,6 +198,7 @@
    "Swagger": "API文档",
    "Sync": "同步",
    "Syncers": "同步器",
+    "SysInfo": "系统信息",
    "Timestamp": "时间戳",
    "Tokens": "令牌",
    "URL": "链接",
@ -593,6 +594,14 @@
    "Table primary key": "表主键",
    "Table primary key - Tooltip": "表主键，如id"
  },
+  "system": {
+    "An Identity and Access Management (IAM) / Single-Sign-On (SSO) platform with web UI supporting OAuth 2.0, OIDC, SAML and CAS": "一个支持 OAuth 2.0、OIDC、SAML 和 CAS 的 Web UI 的身份和访问管理 (IAM)/单点登录 (SSO) 平台",
+    "CPU Usage": "CPU Usage",
+    "Community": "社区",
+    "Memory Usage": "内存使用率",
+    "Official Website": "官方网站",
+    "Version": "版本"
+  },
  "token": {
    "Access token": "访问令牌",
    "Authorization code": "授权码",