From 4f12ae6f8495a441c330415802d891a9d7d1b2d6 Mon Sep 17 00:00:00 2001 From: guoqqqi <72343596+guoqqqi@users.noreply.github.com> Date: Sat, 19 Dec 2020 18:10:55 +0800 Subject: [PATCH] feat: added info page (#949) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 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 * fix: format codes Co-authored-by: 琚致远 Co-authored-by: litesun --- 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(+) create mode 100644 web/src/pages/ServerInfo/List.tsx create mode 100644 web/src/pages/ServerInfo/index.ts create mode 100644 web/src/pages/ServerInfo/locales/en-US.ts create mode 100644 web/src/pages/ServerInfo/locales/zh-CN.ts create mode 100644 web/src/pages/ServerInfo/service.ts create mode 100644 web/src/pages/ServerInfo/style.less create mode 100644 web/src/pages/ServerInfo/typing.d.ts diff --git a/web/config/routes.ts b/web/config/routes.ts index 487b87d757..cfb01bc313 100644 --- a/web/config/routes.ts +++ b/web/config/routes.ts @@ -23,6 +23,10 @@ const routes = [ path: '/metrics', 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 a0ffe74f51..962c870905 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: , }, + { + name: 'serverinfo', + path: '/serverinfo', + icon: , + }, ]; }; diff --git a/web/src/locales/en-US/menu.ts b/web/src/locales/en-US/menu.ts index 0528b97847..a6bd585349 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 4a7b3a2885..0b4081321b 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 0000000000..2f5905045b --- /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(); + const [nodeList, setNodeList] = useState([]); + 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 ( + +
+
+ + + + + {formatMessage({ id: 'page.serverinfo.desc' })}  + + {formatMessage({ id: 'page.serverinfo.link' })} + + +
+
+
+ {nodeList.length === 0 && } + {nodeList.length > 0 && ( + + + {Object.entries(data || {}).map((item) => ( + + + + + ))} + +
{item[0]}{item[1]}
+ )} +
+ + ); +}; + +export default ServerInfo; diff --git a/web/src/pages/ServerInfo/index.ts b/web/src/pages/ServerInfo/index.ts new file mode 100644 index 0000000000..2b89287eba --- /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 0000000000..90ec6f4a9f --- /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 0000000000..5fe09c7ddb --- /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 0000000000..0dc2029bfa --- /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>>( + '/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 0000000000..2b4b01ed70 --- /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 0000000000..851260155a --- /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; + }; +}