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

@@ -23,6 +23,10 @@ const routes = [
     path: '/metrics',
     component: './Metrics',
   },
+  {
+    path: '/serverinfo',
+    component: './ServerInfo',
+  },
   {
     path: '/routes/list',
     component: './Route/List',

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 />,
+    },
   ];
 };
 

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',
 };

web/src/locales/zh-CN/menu.ts

@@ -70,4 +70,5 @@ export default {
   'menu.upstream': '上游',
   'menu.consumer': 'Consumer',
   'menu.setting': '设置',
+  'menu.serverinfo': '服务端信息',
 };

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' })}&nbsp;
+            <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;

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';

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?',
+};

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': '如何启用？',
+};

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);
+};

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;
+  }
+}

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;
+  };
+}