This is an automated email from the ASF dual-hosted git repository.
juzhiyuan pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/apisix-dashboard.git
The following commit(s) were added to refs/heads/master by this push:
new 0b42332 feat: update system status (#1434)
0b42332 is described below
commit 0b4233214e27273be521b9d3c2c7a395eb601a46
Author: litesun <su...@apache.org>
AuthorDate: Sat Feb 6 06:02:27 2021 +0800
feat: update system status (#1434)
---
web/src/pages/ServerInfo/List.tsx | 127 +++++++++++++++++++-----------
web/src/pages/ServerInfo/locales/en-US.ts | 10 ++-
web/src/pages/ServerInfo/locales/zh-CN.ts | 10 ++-
web/src/pages/ServerInfo/service.ts | 4 +
web/src/pages/ServerInfo/style.less | 1 -
web/src/pages/ServerInfo/typing.d.ts | 5 ++
6 files changed, 101 insertions(+), 56 deletions(-)
diff --git a/web/src/pages/ServerInfo/List.tsx
b/web/src/pages/ServerInfo/List.tsx
index 695c129..9823381 100644
--- a/web/src/pages/ServerInfo/List.tsx
+++ b/web/src/pages/ServerInfo/List.tsx
@@ -15,17 +15,19 @@
* limitations under the License.
*/
import React, { useEffect, useState } from 'react';
-import { Select, Empty, Form } from 'antd';
+import { Select, Empty, Form, Card } from 'antd';
import { PageContainer } from '@ant-design/pro-layout';
import { useIntl } from 'umi';
import moment from 'moment';
-import { fetchInfoList } from './service';
+import { fetchInfoList, fetchVersion } from './service';
import styles from './style.less';
const ServerInfo: React.FC = () => {
const [data, setData] = useState<ServerInfoModule.Node>();
const [nodeList, setNodeList] = useState<ServerInfoModule.Node[]>([]);
+ const [commitHash, setCommitHash] = useState('');
+ const [dashboardVersion, setDashboardVersion] = useState('');
const { formatMessage } = useIntl();
const { Option } = Select;
@@ -51,58 +53,89 @@ const ServerInfo: React.FC = () => {
setData(list[0]);
}
});
+
+ fetchVersion().then(({ commit_hash, version }) => {
+ setCommitHash(commit_hash);
+ setDashboardVersion(version);
+ });
}, []);
return (
- <PageContainer title={formatMessage({ id:
'page.serverinfo.pageContainer.title' })}>
- <div className={styles.select}>
- <Form form={form}>
- <Form.Item wrapperCol={{ span: 5 }} style={{ marginBottom: 0 }}
name="nodeId">
- <Select
- placeholder={formatMessage({ id:
'page.serverinfo.select.placeholder' })}
- onChange={(value) => {
- setData(
- nodeList.find((item) => {
- return item.id === value;
- }),
- );
- }}
- >
- {nodeList.map((item) => (
- <Option key={item.hostname} value={item.id}>
- {item.hostname}
- </Option>
- ))}
- ;
- </Select>
- </Form.Item>
- <Form.Item style={{ marginBottom: 0, fontSize: '12px', color:
'#00000073' }}>
- {formatMessage({ id: 'page.serverinfo.desc' })}
- <a
-
href="https://github.com/apache/apisix/blob/master/doc/plugins/server-info.md";
- target="_blank"
- rel="noreferrer"
- >
- {formatMessage({ id: 'page.serverinfo.link' })}
- </a>
- </Form.Item>
- </Form>
- </div>
- <div className={styles.wrap}>
- {nodeList.length === 0 && <Empty />}
- {nodeList.length > 0 && (
+ <PageContainer title={formatMessage({ id:
'page.systemStatus.pageContainer.title' })}>
+ <Card
+ title={formatMessage({ id: 'page.systemStatus.dashboardInfo' })}
+ bodyStyle={{ padding: 0 }}
+ style={{ marginBottom: 15 }}
+ >
+ <div className={styles.wrap}>
<table className={styles.table}>
<tbody>
- {Object.entries(data || {}).map((item) => (
- <tr>
- <td>{item[0]}</td>
- <td>{item[1]}</td>
- </tr>
- ))}
+ <tr>
+ <td>commit_hash</td>
+ <td>{commitHash}</td>
+ </tr>
+ <tr>
+ <td>dashboard_version</td>
+ <td>{dashboardVersion}</td>
+ </tr>
</tbody>
</table>
- )}
- </div>
+ </div>
+ </Card>
+ <Card
+ title={formatMessage({ id: 'page.systemStatus.nodeInfo' })}
+ bodyStyle={{ padding: 0 }}
+ bordered={false}
+ >
+ <div className={styles.select}>
+ <Form form={form}>
+ <Form.Item wrapperCol={{ span: 10 }} style={{ marginBottom: 0 }}
name="nodeId">
+ <Select
+ placeholder={formatMessage({ id:
'page.systemStatus.select.placeholder' })}
+ onChange={(value) => {
+ setData(
+ nodeList.find((item) => {
+ return item.id === value;
+ }),
+ );
+ }}
+ >
+ {nodeList.map((item) => (
+ <Option key={item.hostname} value={item.id}>
+ {item.hostname}
+ </Option>
+ ))}
+ ;
+ </Select>
+ </Form.Item>
+ <Form.Item style={{ marginBottom: 0, fontSize: '12px', color:
'#00000073' }}>
+ {formatMessage({ id: 'page.systemStatus.desc' })}
+ <a
+
href="https://github.com/apache/apisix/blob/master/doc/plugins/server-info.md";
+ target="_blank"
+ rel="noreferrer"
+ >
+ {formatMessage({ id: 'page.systemStatus.link' })}
+ </a>
+ </Form.Item>
+ </Form>
+ </div>
+ <div className={styles.wrap}>
+ {nodeList.length === 0 && <Empty />}
+ {nodeList.length > 0 && (
+ <table className={styles.table}>
+ <tbody>
+ {Object.entries(data || {}).map((item) => (
+ <tr>
+ <td>{item[0]}</td>
+ <td>{item[1]}</td>
+ </tr>
+ ))}
+ </tbody>
+ </table>
+ )}
+ </div>
+ </Card>
</PageContainer>
);
};
diff --git a/web/src/pages/ServerInfo/locales/en-US.ts
b/web/src/pages/ServerInfo/locales/en-US.ts
index 90ec6f4..32df757 100644
--- a/web/src/pages/ServerInfo/locales/en-US.ts
+++ b/web/src/pages/ServerInfo/locales/en-US.ts
@@ -15,8 +15,10 @@
* limitations under the License.
*/
export default {
- 'page.serverinfo.pageContainer.title': 'Server Info',
- 'page.serverinfo.select.placeholder': 'Please select node',
- 'page.serverinfo.desc': 'The relevant plugin need to be enabled to report
server info.',
- 'page.serverinfo.link': 'How to enable?',
+ 'page.systemStatus.pageContainer.title': 'System Status',
+ 'page.systemStatus.select.placeholder': 'Please select a apache apisix node',
+ 'page.systemStatus.desc': 'The relevant plugin needs to be enabled to report
server info.',
+ 'page.systemStatus.link': 'How to enable?',
+ 'page.systemStatus.dashboardInfo': 'Dashboard',
+ 'page.systemStatus.nodeInfo': 'APISIX Nodes',
};
diff --git a/web/src/pages/ServerInfo/locales/zh-CN.ts
b/web/src/pages/ServerInfo/locales/zh-CN.ts
index 5fe09c7..11d9a78 100644
--- a/web/src/pages/ServerInfo/locales/zh-CN.ts
+++ b/web/src/pages/ServerInfo/locales/zh-CN.ts
@@ -15,8 +15,10 @@
* limitations under the License.
*/
export default {
- 'page.serverinfo.pageContainer.title': '服务端信息',
- 'page.serverinfo.select.placeholder': '请选择节点',
- 'page.serverinfo.desc': '需启用相关插件，才能获取信息。',
- 'page.serverinfo.link': '如何启用？',
+ 'page.systemStatus.pageContainer.title': '系统信息',
+ 'page.systemStatus.select.placeholder': '请选择节点',
+ 'page.systemStatus.desc': '需启用相关插件，才能获取信息。',
+ 'page.systemStatus.link': '如何启用？',
+ 'page.systemStatus.dashboardInfo': 'Dashboard',
+ 'page.systemStatus.nodeInfo': 'APISIX 节点',
};
diff --git a/web/src/pages/ServerInfo/service.ts
b/web/src/pages/ServerInfo/service.ts
index 60fab5b..e678bcf 100644
--- a/web/src/pages/ServerInfo/service.ts
+++ b/web/src/pages/ServerInfo/service.ts
@@ -21,3 +21,7 @@ export const fetchInfoList = () => {
({ data }) => data.rows,
);
};
+
+export const fetchVersion = () => {
+ return request<Res<ServerInfoModule.DashboardInfo>>('/tool/version').then(({
data }) => data)
+};
diff --git a/web/src/pages/ServerInfo/style.less
b/web/src/pages/ServerInfo/style.less
index 2b4b01e..f87760d 100644
--- a/web/src/pages/ServerInfo/style.less
+++ b/web/src/pages/ServerInfo/style.less
@@ -16,7 +16,6 @@
*/
.select {
- margin-bottom: 15px;
padding: 12px 24px;
background-color: #fff;
}
diff --git a/web/src/pages/ServerInfo/typing.d.ts
b/web/src/pages/ServerInfo/typing.d.ts
index 8512601..fc65ad5 100644
--- a/web/src/pages/ServerInfo/typing.d.ts
+++ b/web/src/pages/ServerInfo/typing.d.ts
@@ -24,4 +24,9 @@ declare namespace ServerInfoModule {
hostname: string;
version: string;
};
+
+ type DashboardInfo = {
+ commit_hash: string,
+ version: string
+ }
}
