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 4f12ae6 feat: added info page (#949)
4f12ae6 is described below
commit 4f12ae6f8495a441c330415802d891a9d7d1b2d6
Author: guoqqqi <[email protected]>
AuthorDate: Sat Dec 19 18:10:55 2020 +0800
feat: added info page (#949)
* add: Static Info Pages
* fix: 代码格式化，使用Select组件
* fix: 优化Select组件和表格联动
* fix: ./Info.less error not found.
* fix: Format code
* fix: delete console.log()
* fix: Optimized code
* fix: Optimized code
* fix: Modify data, wait for api.
* feat: integrate with API
* fix: format codes
* fix: i18n
* fix: link to instructions for use
* fix: format codes
* fix: format codes
* fix: format codes
* fix: node type
* Update web/src/pages/ServerInfo/List.tsx
Co-authored-by: litesun <[email protected]>
* fix: format codes
Co-authored-by: 琚致远 <[email protected]>
Co-authored-by: litesun <[email protected]>
---
web/config/routes.ts | 4 ++
web/src/helpers.tsx | 6 ++
web/src/locales/en-US/menu.ts | 1 +
web/src/locales/zh-CN/menu.ts | 1 +
web/src/pages/ServerInfo/List.tsx | 100 ++++++++++++++++++++++++++++++
web/src/pages/ServerInfo/index.ts | 17 +++++
web/src/pages/ServerInfo/locales/en-US.ts | 22 +++++++
web/src/pages/ServerInfo/locales/zh-CN.ts | 22 +++++++
web/src/pages/ServerInfo/service.ts | 23 +++++++
web/src/pages/ServerInfo/style.less | 48 ++++++++++++++
web/src/pages/ServerInfo/typing.d.ts | 27 ++++++++
11 files changed, 271 insertions(+)
diff --git a/web/config/routes.ts b/web/config/routes.ts
index 487b87d..cfb01bc 100644
--- a/web/config/routes.ts
+++ b/web/config/routes.ts
@@ -24,6 +24,10 @@ const routes = [
component: './Metrics',
},
{
+ path: '/serverinfo',
+ component: './ServerInfo',
+ },
+ {
path: '/routes/list',
component: './Route/List',
},
diff --git a/web/src/helpers.tsx b/web/src/helpers.tsx
index a0ffe74..962c870 100644
--- a/web/src/helpers.tsx
+++ b/web/src/helpers.tsx
@@ -19,6 +19,7 @@ import { notification } from 'antd';
import { MenuDataItem } from '@ant-design/pro-layout';
import { history } from 'umi';
import moment from 'moment';
+import { InfoCircleOutlined } from '@ant-design/icons';
import { codeMessage } from './constants';
import IconFont from './components/IconFont';
@@ -55,6 +56,11 @@ export const getMenuData = (): MenuDataItem[] => {
path: '/settings',
icon: <IconFont name="iconsetting" />,
},
+ {
+ name: 'serverinfo',
+ path: '/serverinfo',
+ icon: <InfoCircleOutlined />,
+ },
];
};
diff --git a/web/src/locales/en-US/menu.ts b/web/src/locales/en-US/menu.ts
index 0528b97..a6bd585 100644
--- a/web/src/locales/en-US/menu.ts
+++ b/web/src/locales/en-US/menu.ts
@@ -70,4 +70,5 @@ export default {
'menu.upstream': 'Upstream',
'menu.consumer': 'Consumer',
'menu.setting': 'Settings',
+ 'menu.serverinfo': 'Server Info',
};
diff --git a/web/src/locales/zh-CN/menu.ts b/web/src/locales/zh-CN/menu.ts
index 4a7b3a2..0b40813 100644
--- a/web/src/locales/zh-CN/menu.ts
+++ b/web/src/locales/zh-CN/menu.ts
@@ -70,4 +70,5 @@ export default {
'menu.upstream': '上游',
'menu.consumer': 'Consumer',
'menu.setting': '设置',
+ 'menu.serverinfo': '服务端信息',
};
diff --git a/web/src/pages/ServerInfo/List.tsx
b/web/src/pages/ServerInfo/List.tsx
new file mode 100644
index 0000000..2f59050
--- /dev/null
+++ b/web/src/pages/ServerInfo/List.tsx
@@ -0,0 +1,100 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You 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, { useEffect, useState } from 'react';
+import { Select, Empty, Form } from 'antd';
+import { PageContainer } from '@ant-design/pro-layout';
+import { useIntl } from 'umi';
+
+import { fetchInfoList } from './service';
+import styles from './style.less';
+
+const ServerInfo: React.FC = () => {
+ const [data, setData] = useState<ServerInfoModule.Node>();
+ const [nodeList, setNodeList] = useState<ServerInfoModule.Node[]>([]);
+ const { formatMessage } = useIntl();
+ const { Option } = Select;
+
+ const [form] = Form.useForm();
+
+ useEffect(() => {
+ fetchInfoList().then((list) => {
+ setNodeList(list);
+ if (list.length) {
+ form.setFieldsValue({
+ nodeId: list[0].id,
+ });
+
+ setData(list[0]);
+ }
+ });
+ }, []);
+
+ 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 && (
+ <table className={styles.table}>
+ <tbody>
+ {Object.entries(data || {}).map((item) => (
+ <tr>
+ <td>{item[0]}</td>
+ <td>{item[1]}</td>
+ </tr>
+ ))}
+ </tbody>
+ </table>
+ )}
+ </div>
+ </PageContainer>
+ );
+};
+
+export default ServerInfo;
diff --git a/web/src/pages/ServerInfo/index.ts
b/web/src/pages/ServerInfo/index.ts
new file mode 100644
index 0000000..2b89287
--- /dev/null
+++ b/web/src/pages/ServerInfo/index.ts
@@ -0,0 +1,17 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You 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.
+ */
+export { default } from './List';
diff --git a/web/src/pages/ServerInfo/locales/en-US.ts
b/web/src/pages/ServerInfo/locales/en-US.ts
new file mode 100644
index 0000000..90ec6f4
--- /dev/null
+++ b/web/src/pages/ServerInfo/locales/en-US.ts
@@ -0,0 +1,22 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You 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.
+ */
+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?',
+};
diff --git a/web/src/pages/ServerInfo/locales/zh-CN.ts
b/web/src/pages/ServerInfo/locales/zh-CN.ts
new file mode 100644
index 0000000..5fe09c7
--- /dev/null
+++ b/web/src/pages/ServerInfo/locales/zh-CN.ts
@@ -0,0 +1,22 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You 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.
+ */
+export default {
+ 'page.serverinfo.pageContainer.title': '服务端信息',
+ 'page.serverinfo.select.placeholder': '请选择节点',
+ 'page.serverinfo.desc': '需启用相关插件，才能获取信息。',
+ 'page.serverinfo.link': '如何启用？',
+};
diff --git a/web/src/pages/ServerInfo/service.ts
b/web/src/pages/ServerInfo/service.ts
new file mode 100644
index 0000000..0dc2029
--- /dev/null
+++ b/web/src/pages/ServerInfo/service.ts
@@ -0,0 +1,23 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You 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 { request } from 'umi';
+
+export const fetchInfoList = () => {
+ return request<Res<ResListData<ServerInfoModule.Node>>>(
+ '/server_info',
+ ).then(({ data }) => data.rows);
+};
diff --git a/web/src/pages/ServerInfo/style.less
b/web/src/pages/ServerInfo/style.less
new file mode 100644
index 0000000..2b4b01e
--- /dev/null
+++ b/web/src/pages/ServerInfo/style.less
@@ -0,0 +1,48 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You 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.
+ */
+
+.select {
+ margin-bottom: 15px;
+ padding: 12px 24px;
+ background-color: #fff;
+}
+
+.wrap {
+ width: 100%;
+ margin: 0 auto;
+ padding: 16px 24px;
+ background-color: #fff;
+}
+
+.table {
+ width: 100%;
+ color: rgba(0, 0, 0, 0.45);
+ border-collapse: collapse;
+
+ th,
+ td {
+ padding: 12px 8px;
+ }
+
+ td:nth-child(2) {
+ text-align: right;
+ }
+
+ tr:nth-child(odd) {
+ background-color: #f3f4f5;
+ }
+}
diff --git a/web/src/pages/ServerInfo/typing.d.ts
b/web/src/pages/ServerInfo/typing.d.ts
new file mode 100644
index 0000000..8512601
--- /dev/null
+++ b/web/src/pages/ServerInfo/typing.d.ts
@@ -0,0 +1,27 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You 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.
+ */
+declare namespace ServerInfoModule {
+ type Node = {
+ id: string;
+ last_report_time: integer;
+ up_time: integer;
+ boot_time: integer;
+ etcd_version: string;
+ hostname: string;
+ version: string;
+ };
+}
