Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: added info page #949

Merged
merged 23 commits into from
Dec 19, 2020
Merged

feat: added info page #949

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
61cf310
add: Static Info Pages
guoqqqi Dec 2, 2020
969424f
fix: 代码格式化，使用Select组件
guoqqqi Dec 3, 2020
53c3180
fix: 优化Select组件和表格联动
guoqqqi Dec 3, 2020
d3e5114
fix: ./Info.less error not found.
guoqqqi Dec 5, 2020
faf5a85
fix: Format code
guoqqqi Dec 5, 2020
23b855a
fix: delete console.log()
guoqqqi Dec 5, 2020
b8daa5c
Merge pull request #1 from guoqqqi/guoqi/dev
guoqqqi Dec 5, 2020
6745aeb
fix: Optimized code
guoqqqi Dec 7, 2020
6c0faab
fix: Optimized code
guoqqqi Dec 7, 2020
cf1e987
fix: Modify data, wait for api.
guoqqqi Dec 9, 2020
e221758
Merge pull request #2 from apache/master
guoqqqi Dec 19, 2020
e9790a0
Merge branch 'master' into guoqi/dev
guoqqqi Dec 19, 2020
f8ffd4f
feat: integrate with API
guoqqqi Dec 19, 2020
398f9e1
fix: format codes
guoqqqi Dec 19, 2020
bbae417
fix: i18n
guoqqqi Dec 19, 2020
9477459
fix: link to instructions for use
guoqqqi Dec 19, 2020
417ea70
fix: format codes
guoqqqi Dec 19, 2020
3c16f9e
fix: format codes
guoqqqi Dec 19, 2020
f04c0c2
fix: format codes
guoqqqi Dec 19, 2020
295b1c5
fix: node type
guoqqqi Dec 19, 2020
d49f4d4
Update web/src/pages/ServerInfo/List.tsx
juzhiyuan Dec 19, 2020
c72fbbd
fix: format codes
guoqqqi Dec 19, 2020
13247ac
Merge branch 'guoqi/dev' of github.com:guoqqqi/apisix-dashboard into …
guoqqqi Dec 19, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 21 additions & 0 deletions web/src/global.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,27 @@ ol {
list-style: none;
}

.InfoWrap {
juzhiyuan marked this conversation as resolved.
Show resolved Hide resolved
width: 100%;
min-height: 740px;
padding: 16px 24px;
margin: 0 auto;
background-color: #fff;
}

.InfoTable {
color: rgba(0, 0, 0, 0.45);
width: 100%;
border-bottom: 1px solid grey;
border-collapse: collapse;
th,td {
padding: 12px 8px;
}
tr:nth-child(odd) {
background-color: #f3f4f5;
}
}

@media (max-width: @screen-xs) {
.ant-table {
width: 100%;
Expand Down
1 change: 1 addition & 0 deletions web/src/locales/en-US/menu.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,4 +70,5 @@ export default {
'menu.upstream': 'Upstream',
'menu.consumer': 'Consumer',
'menu.setting': 'Settings',
'menu.info': 'Info',
};
1 change: 1 addition & 0 deletions web/src/locales/zh-CN/menu.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,4 +70,5 @@ export default {
'menu.upstream': '上游',
'menu.consumer': 'Consumer',
'menu.setting': '设置',
'menu.info': '信息',
};
164 changes: 80 additions & 84 deletions web/src/pages/Info/List.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,96 +1,92 @@
/*
* 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 from 'react';
import { Select } from 'antd';
import { PageContainer } from '@ant-design/pro-layout';
import { useIntl } from 'umi';

const Info: React.FC = () => {
const { formatMessage } = useIntl();
const { Option } = Select;
const mydata = [
juzhiyuan marked this conversation as resolved.
Show resolved Hide resolved
{
"category": "system",
"name": "version",
"value": "2.0",
"name2": "apisix_id",
"value2": "2.1",
},
{
"category": "categoryA",
"name": "keyA",
"value": "valueA",
"name2": "customKeyA",
"value2": "valueKeyA",
},
{
"category": "categoryB",
"name": "keyB",
"value": "valueB",
"name2": "customKeyB",
"value2": "valueKeyB",
},
{
"category": "categoryC",
"name": "keyC",
"value": "valueC",
"name2": "customKeyC",
"value2": "valueKeyC",
},
];

return (
<PageContainer title={formatMessage({ id: 'page.info.pageContainer.title' })}>
<select className="selector" id="selector" style={{ backgroundColor: "#fff", width: "100%", height: "24px", textAlign: "right", padding: "16px 24px", marginBottom: "15px" }}>
<option value="categoryA">CategoryA</option>
<option value="categoryB">CategoryB</option>
<option value="categoryC">CategoryC</option>
</select>
<div className="wrap" style={{ width: "100%", height: "740px", padding: "16px 24px", margin: "0 auto", backgroundColor: "#fff" }}>
<table style={{ color: "rgba(0, 0, 0, 0.45)", width: "100%", borderBottom: "1px solid grey", borderCollapse: "collapse", borderTop: "1px solid grey" }}>
<thead>
<tr>
<th style={{ padding: "12px 8px" }}>categoryA</th>
<th></th>
</tr>
</thead>
<tbody>
<tr style={{ backgroundColor: "#f3f4f5" }}>
<td style={{ padding: "12px 8px" }}>key</td>
<td style={{ textAlign: "right", padding: "12px 8px" }}>value</td>
</tr>
<tr>
<td style={{ padding: "12px 8px" }}>key</td>
<td style={{ textAlign: "right", padding: "12px 8px" }}>value</td>
</tr>
<tr style={{ backgroundColor: "#f3f4f5" }}>
<td style={{ padding: "12px 8px" }}>key</td>
<td style={{ textAlign: "right", padding: "12px 8px" }}>value</td>
</tr>
<tr>
<td style={{ padding: "12px 8px" }}>key</td>
<td style={{ textAlign: "right", padding: "12px 8px" }}>value</td>
</tr>
</tbody>
</table>
<table style={{ color: "rgba(0, 0, 0, 0.45)", width: "100%", borderBottom: "1px solid grey", borderCollapse: "collapse", }}>
<thead>
<tr>
<th style={{ padding: "12px 8px" }}>categoryA</th>
<th></th>
</tr>
</thead>
<tbody>
<tr style={{ backgroundColor: "#f3f4f5" }}>
<td style={{ padding: "12px 8px" }}>key</td>
<td style={{ textAlign: "right", padding: "12px 8px" }}>value</td>
</tr>
<tr>
<td style={{ padding: "12px 8px" }}>key</td>
<td style={{ textAlign: "right", padding: "12px 8px" }}>value</td>
</tr>
<tr style={{ backgroundColor: "#f3f4f5" }}>
<td style={{ padding: "12px 8px" }}>key</td>
<td style={{ textAlign: "right", padding: "12px 8px" }}>value</td>
</tr>
<tr>
<td style={{ padding: "12px 8px" }}>key</td>
<td style={{ textAlign: "right", padding: "12px 8px" }}>value</td>
</tr>
</tbody>
</table>
<table style={{ color: "rgba(0, 0, 0, 0.45)", width: "100%", borderBottom: "1px solid grey", borderCollapse: "collapse", }}>
<thead>
<tr>
<th style={{ padding: "12px 8px" }}>categoryA</th>
<th></th>
</tr>
</thead>
<tbody>
<tr style={{ backgroundColor: "#f3f4f5" }}>
<td style={{ padding: "12px 8px" }}>key</td>
<td style={{ textAlign: "right", padding: "12px 8px" }}>value</td>
</tr>
<tr>
<td style={{ padding: "12px 8px" }}>key</td>
<td style={{ textAlign: "right", padding: "12px 8px" }}>value</td>
</tr>
<tr style={{ backgroundColor: "#f3f4f5" }}>
<td style={{ padding: "12px 8px" }}>key</td>
<td style={{ textAlign: "right", padding: "12px 8px" }}>value</td>
</tr>
<tr>
<td style={{ padding: "12px 8px" }}>key</td>
<td style={{ textAlign: "right", padding: "12px 8px" }}>value</td>
</tr>
</tbody>
</table>
<Select
showSearch
style={{ backgroundColor: "#fff", width: "100%", textAlign: "right", padding: "16px 24px", marginBottom: "15px" }}
juzhiyuan marked this conversation as resolved.
Show resolved Hide resolved
onChange={(value) => { console.log(value) }}
>
{mydata.map(item => (
<Option value={item.category}>
{item.category}
</Option>
))};
</Select>
<div className="InfoWrap">
{mydata.map((item) => {
return (
<table className="InfoTable">
<thead>
<th>{item.category && <span>{item.category}</span>}</th>
<th>&nbsp;</th>
</thead>
<tbody>
<tr>
<td>{item.name && <span>{item.name}</span>}</td>
<td style={{ textAlign: "right" }}>{item.value && <span>{item.value}</span>}</td>
</tr>
<tr>
<td>{item.name2 && <span>{item.name2}</span>}</td>
<td style={{ textAlign: "right" }}>{item.value2 && <span>{item.value2}</span>}</td>
</tr>
</tbody>
</table>
);
})}
</div>
</PageContainer>
);
Expand Down
16 changes: 16 additions & 0 deletions web/src/pages/Info/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +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';
18 changes: 17 additions & 1 deletion web/src/pages/Info/locales/en-US.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,19 @@
/*
* 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.info.pageContainer.title': 'About Apache APISIX',
'page.info.pageContainer.title': 'About Apache APISIX',
};
18 changes: 17 additions & 1 deletion web/src/pages/Info/locales/zh-CN.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,19 @@
/*
* 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.info.pageContainer.title': '关于 Apache APISIX',
'page.info.pageContainer.title': '关于 Apache APISIX',
};
6 changes: 0 additions & 6 deletions web/src/pages/Info/styles.less
View file
Open in desktop

This file was deleted.