Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 2ab2c06

Browse files
feat: 增加tailchat 网络菜单
1 parent e508029 commit 2ab2c06

File tree

9 files changed

+204
-4
lines changed

9 files changed

+204
-4
lines changed

‎pnpm-lock.yaml‎

Lines changed: 14 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎server/admin/app/ra/App.tsx‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
import {
22
Admin,
33
Resource,
4-
ListGuesser,
54
fetchUtils,
6-
EditGuesser,
75
ShowGuesser,
6+
CustomRoutes,
87
} from 'react-admin';
98
import jsonServerProvider from 'ra-data-json-server';
109
import { authProvider, authStorageKey } from './authProvider';
@@ -19,6 +18,9 @@ import GroupIcon from '@mui/icons-material/Group';
1918
import AttachFileIcon from '@mui/icons-material/AttachFile';
2019
import { theme } from './theme';
2120
import { Dashboard } from './dashboard';
21+
import { Route } from 'react-router-dom';
22+
import { TailchatNetwork } from './network';
23+
import { TailchatLayout } from './layout';
2224

2325
const httpClient: typeof fetchUtils.fetchJson = (url, options = {}) => {
2426
try {
@@ -47,6 +49,7 @@ export const App = () => (
4749
basename="/admin"
4850
theme={theme}
4951
dashboard={Dashboard}
52+
layout={TailchatLayout}
5053
disableTelemetry={true}
5154
authProvider={authProvider}
5255
dataProvider={dataProvider}
@@ -80,5 +83,9 @@ export const App = () => (
8083
list={FileList}
8184
show={ShowGuesser}
8285
/>
86+
87+
<CustomRoutes>
88+
<Route path="/network" element={<TailchatNetwork />} />
89+
</CustomRoutes>
8390
</Admin>
8491
);
Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import React from 'react';
2+
import { Chip, Grid } from '@mui/material';
3+
4+
export const ChipItems: React.FC<{
5+
items: string[];
6+
}> = React.memo((props) => {
7+
return (
8+
<Grid container spacing={1}>
9+
{props.items.map((item) => (
10+
<Grid key={item} item>
11+
<Chip label={item} />
12+
</Grid>
13+
))}
14+
</Grid>
15+
);
16+
});
17+
ChipItems.displayName = 'ChipItems';

‎server/admin/app/ra/layout/Menu.tsx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import React from 'react';
2+
import {
3+
Menu,
4+
MenuProps,
5+
ResourceMenuItem,
6+
useResourceDefinitions,
7+
} from 'react-admin';
8+
import FilterDramaIcon from '@mui/icons-material/FilterDrama';
9+
10+
export const TailchatMenu: React.FC<MenuProps> = React.memo((props) => {
11+
const resources = useResourceDefinitions();
12+
13+
return (
14+
<Menu {...props}>
15+
<Menu.DashboardItem />
16+
17+
{...Object.keys(resources)
18+
.filter((name) => resources[name].hasList)
19+
.map((name) => <ResourceMenuItem key={name} name={name} />)}
20+
21+
<Menu.Item
22+
to="/admin/network"
23+
primaryText="Tailchat 网络"
24+
leftIcon={<FilterDramaIcon />}
25+
/>
26+
</Menu>
27+
);
28+
});
29+
TailchatMenu.displayName = 'TailchatMenu';

‎server/admin/app/ra/layout/index.tsx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import React from 'react';
2+
import { LayoutComponent } from 'react-admin';
3+
import { Layout } from 'react-admin';
4+
import { TailchatMenu } from './Menu';
5+
6+
export const TailchatLayout: LayoutComponent = (props) => (
7+
<Layout {...props} menu={TailchatMenu} />
8+
);
Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
import React from 'react';
2+
import { request } from '../request';
3+
import { useRequest } from 'ahooks';
4+
import {
5+
CircularProgress,
6+
Table,
7+
TableBody,
8+
TableCell,
9+
TableHead,
10+
TableRow,
11+
Typography,
12+
Box,
13+
} from '@mui/material';
14+
import _uniq from 'lodash/uniq';
15+
import { ChipItems } from '../components/ChipItems';
16+
17+
/**
18+
* Tailchat 网络状态
19+
*/
20+
export const TailchatNetwork: React.FC = React.memo(() => {
21+
const { data, loading } = useRequest(async () => {
22+
const { data } = await request('/network/all');
23+
24+
return data;
25+
});
26+
27+
if (loading) {
28+
return <CircularProgress />;
29+
}
30+
31+
return (
32+
<Box
33+
sx={{
34+
paddingTop: 2,
35+
paddingBottom: 2,
36+
maxWidth: '100vw',
37+
}}
38+
>
39+
<Typography variant="h6" gutterBottom>
40+
节点列表
41+
</Typography>
42+
<Table sx={{ minWidth: 650 }} aria-label="simple table">
43+
<TableHead>
44+
<TableRow>
45+
<TableCell>ID</TableCell>
46+
<TableCell>主机名</TableCell>
47+
<TableCell>CPU占用</TableCell>
48+
<TableCell>IP地址列表</TableCell>
49+
<TableCell>SDK版本</TableCell>
50+
</TableRow>
51+
</TableHead>
52+
<TableBody>
53+
{(data.nodes ?? []).map((row) => (
54+
<TableRow
55+
key={row.name}
56+
sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
57+
>
58+
<TableCell component="th" scope="row">
59+
{row.id}
60+
{row.local && <span> (*)</span>}
61+
</TableCell>
62+
<TableCell>{row.hostname}</TableCell>
63+
<TableCell>{row.cpu}%</TableCell>
64+
<TableCell>
65+
<ChipItems items={row.ipList ?? []} />
66+
</TableCell>
67+
<TableCell>{row.client.version}</TableCell>
68+
</TableRow>
69+
))}
70+
</TableBody>
71+
</Table>
72+
73+
<Typography variant="h6" gutterBottom>
74+
服务列表
75+
</Typography>
76+
<Box flexWrap="wrap" overflow="hidden">
77+
<ChipItems items={_uniq<string>(data.services ?? [])} />
78+
</Box>
79+
80+
<Typography variant="h6" gutterBottom>
81+
操作列表
82+
</Typography>
83+
<Box flexWrap="wrap" overflow="hidden">
84+
<ChipItems items={_uniq<string>(data.actions ?? [])} />
85+
</Box>
86+
87+
<Typography variant="h6" gutterBottom>
88+
事件列表
89+
</Typography>
90+
<Box flexWrap="wrap" overflow="hidden">
91+
<ChipItems items={_uniq<string>(data.events ?? [])} />
92+
</Box>
93+
</Box>
94+
);
95+
});
96+
TailchatNetwork.displayName = 'TailchatNetwork';

‎server/admin/app/ra/request.ts‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import axios from 'axios';
2+
import { authStorageKey } from './authProvider';
3+
import _set from 'lodash/set';
4+
5+
/**
6+
* 创建请求实例
7+
*/
8+
function createRequest() {
9+
const ins = axios.create({
10+
baseURL: '/admin/api',
11+
});
12+
13+
ins.interceptors.request.use(async (val) => {
14+
try {
15+
const { token } = JSON.parse(
16+
window.localStorage.getItem(authStorageKey) ?? '{}'
17+
);
18+
_set(val, ['headers', 'Authorization'], `Bearer ${token}`);
19+
20+
return val;
21+
} catch (err) {
22+
throw err;
23+
}
24+
});
25+
26+
return ins;
27+
}
28+
29+
export const request = createRequest();

‎server/admin/app/ra/resources/user.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,6 @@ export const UserList: React.FC = () => (
3939
<DateField source="createdAt" label="创建时间" />
4040
<PostListActionToolbar>
4141
<ShowButton />
42-
<EditButton />
4342
</PostListActionToolbar>
4443
</Datagrid>
4544
</List>

‎server/admin/package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,8 @@
1818
"@remix-run/react": "^1.9.0",
1919
"@typegoose/typegoose": "9.3.1",
2020
"@types/md5": "^2.3.2",
21+
"ahooks": "^3.7.4",
22+
"axios": "^1.2.2",
2123
"body-parser": "^1.20.1",
2224
"compression": "^1.7.4",
2325
"express": "^4.18.2",

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /