Skip to content

Commit b5c3edb

Browse files
silvarealsilvareal
committed
CHORES: revamp servers store cache
1 parent f18df72 commit b5c3edb

File tree

4 files changed

+85
-93
lines changed

4 files changed

+85
-93
lines changed

Diff for: ‎web/src/App.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ function App() {
2020
path: "/",
2121
element: (
2222
<ServerList
23-
serversGroupedByHost={serversGroupedByHost}
23+
servers={serversGroupedByHost}
2424
connectionStatus={connectionStatus}
2525
setJsonMessage={setJsonMessage}
2626
/>
@@ -30,7 +30,7 @@ function App() {
3030
path: "/:host",
3131
element: (
3232
<ServerDetail
33-
servicesGroupedByName={servicesGroupedByName}
33+
servers={serversGroupedByHost}
3434
connectionStatus={connectionStatus}
3535
setJsonMessage={setJsonMessage}
3636
/>

Diff for: ‎web/src/hooks/useSocket.tsx

+28-28
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import { useEffect, useState } from "react";
22
import useWebSocket, { ReadyState } from "react-use-websocket";
33
import {
44
ServerGroupedByHostResponseType,
5-
ServerGroupedByNameResponseType,
65
ServerResponseByHostType,
76
ServerResponseType,
87
} from "server/ServerType";
@@ -18,44 +17,45 @@ export default function useSocket(options = {}) {
1817
const [servers, setServers] = useState<ServerResponseByHostType>({});
1918
const [jsonMessage, setJsonMessage] = useState<{ [key: string]: string }>();
2019

21-
let serversHost: Array<ServerResponseType> =
22-
servers[jsonMessage?.FilterBy as any] || [];
20+
const serversGroupedByHost: ServerGroupedByHostResponseType = servers;
2321

24-
const serversGroupedByHost: ServerGroupedByHostResponseType =
25-
serversHost.reduce((group: any, server) => {
26-
const { Message } = server;
27-
const { Host } = Message;
28-
group[Host] = group[Host] ?? [];
29-
group[Host].push(server);
30-
return group;
31-
}, {});
32-
33-
const servicesGroupedByName: ServerGroupedByNameResponseType =
34-
serversHost.reduce((group: any, server: any) => {
35-
const { Message } = server;
36-
const { Name, Host } = Message;
37-
group[Name] = group[Name] ?? { data: [], Host };
38-
group[Name].data.push(server);
39-
return group;
40-
}, {});
22+
const servicesGroupedByName: ServerGroupedByHostResponseType = servers;
4123

4224
let socketUrl =
4325
process.env.NODE_ENV === "production" ? wssMetricsURL : wssMetricsBaseURL;
4426

27+
// console.log("servers", servers);
4528
const { sendJsonMessage, readyState } = useWebSocket(socketUrl, {
4629
onOpen: () => console.info("WebSocket connection opened."),
4730
onClose: () => console.info("WebSocket connection closed."),
4831
shouldReconnect: (closeEvent) => true,
4932
onMessage: (event: WebSocketEventMap["message"]) => {
5033
const newMessage: ServerResponseType = JSON.parse(event.data);
51-
if (jsonMessage) {
52-
setServers({
53-
...servers,
54-
[jsonMessage?.FilterBy as string]: servers[
55-
jsonMessage?.FilterBy as string
56-
]?.concat(newMessage) || [newMessage],
57-
});
58-
}
34+
35+
const newMessageGroupedByHost: ServerGroupedByHostResponseType = [
36+
newMessage,
37+
].reduce((group: any, server) => {
38+
const { Message } = server;
39+
const { Host } = Message;
40+
const serverHost = servers?.[Host] ?? [];
41+
42+
const serviceIndex = serverHost.findIndex(
43+
(value) => value.Message.Name === server.Message.Name
44+
);
45+
46+
if (serviceIndex > -1) {
47+
servers[Host][serviceIndex] = server;
48+
} else {
49+
group[Host] = [...serverHost, server];
50+
}
51+
52+
return group;
53+
}, {});
54+
55+
setServers({
56+
...servers,
57+
...newMessageGroupedByHost,
58+
});
5959
},
6060
...options,
6161
});

Diff for: ‎web/src/server/ServerDetail.tsx

+14-17
Original file line numberDiff line numberDiff line change
@@ -8,25 +8,26 @@ import PageHeader from "common/PageHeader";
88
import LoadingContent from "../common/LoadingContent";
99
import ServerDetailServicesTabPanel from "./ServerDetailServicesTabPanel";
1010
import {
11-
ServerGroupedByNameResponseType,
11+
ServerGroupedByHostResponseType,
1212
ServerResponseType,
13-
ServerServiceNameType,
1413
} from "./ServerType";
1514
import AppHeader from "AppHeader";
1615

1716
export default function ServerDetail({
18-
servicesGroupedByName,
17+
servers,
1918
connectionStatus,
2019
setJsonMessage,
2120
}: {
22-
servicesGroupedByName: ServerGroupedByNameResponseType;
21+
servers: ServerGroupedByHostResponseType;
2322
connectionStatus: string;
2423
setJsonMessage: (arg0: any) => void;
2524
}) {
2625
const { host } = useParams<{ host: string }>();
2726

2827
const [tabIndex, setTabIndex] = React.useState<number>(0);
2928

29+
const services = servers[host as string];
30+
3031
useEffect(() => {
3132
setJsonMessage({ FilterBy: host });
3233
}, [host]);
@@ -59,29 +60,25 @@ export default function ServerDetail({
5960
variant="scrollable"
6061
scrollButtons="auto"
6162
>
62-
{Object.keys(servicesGroupedByName)
63+
{services
6364
?.sort()
64-
?.map((serverName: string, index: number) => (
65-
<Tab label={serverName} key={index} />
65+
?.map((service: ServerResponseType, index: number) => (
66+
<Tab label={service.Message.Name} key={index} />
6667
))}
6768
</Tabs>
6869

69-
{Object.keys(servicesGroupedByName)
70+
{services
7071
?.sort()
71-
?.map((serverName: string, index: number) => {
72-
if (host !== servicesGroupedByName[serverName].Host)
73-
return null;
72+
?.map((service: ServerResponseType, index: number) => {
73+
// if (host !== servicesGroupedByName[serverName].Host)
74+
// return null;
7475

7576
return (
7677
<div key={index}>
7778
{index === tabIndex && (
7879
<ServerDetailServicesTabPanel
79-
serverName={serverName as ServerServiceNameType}
80-
serverData={
81-
servicesGroupedByName[
82-
serverName as ServerServiceNameType
83-
]?.data?.at(-1) as ServerResponseType
84-
} // get the last object of service
80+
serverName={service.Message.Name}
81+
serverData={service}
8582
/>
8683
)}
8784
</div>

Diff for: ‎web/src/server/ServerList.tsx

+41-46
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,11 @@ import { ServerGroupedByHostResponseType } from "./ServerType";
99
import AppHeader from "AppHeader";
1010

1111
export default function ServerList({
12-
serversGroupedByHost,
12+
servers,
1313
connectionStatus,
1414
setJsonMessage,
1515
}: {
16-
serversGroupedByHost: ServerGroupedByHostResponseType;
16+
servers: ServerGroupedByHostResponseType;
1717
connectionStatus: string;
1818
setJsonMessage: (arg0: any) => void;
1919
}) {
@@ -32,51 +32,46 @@ export default function ServerList({
3232
error={connectionStatus === "Closed"}
3333
>
3434
<Grid container spacing={2} my={10}>
35-
{Object.keys(serversGroupedByHost)?.map(
36-
(serverHost: string, index: number) => (
37-
<Grid item xs={12} md={6} key={index}>
38-
<Card
39-
key={index}
40-
style={{ background: ThemeConfig.palette.primary.light }}
41-
>
42-
<CardActionArea onClick={() => navigate(`/${serverHost}`)}>
43-
<Box
44-
display={"flex"}
45-
justifyContent="center"
46-
alignItems="center"
47-
flexDirection="column"
48-
my={5}
35+
{Object.keys(servers)?.map((serverHost: string, index: number) => (
36+
<Grid item xs={12} md={6} key={index}>
37+
<Card
38+
key={index}
39+
style={{ background: ThemeConfig.palette.primary.light }}
40+
>
41+
<CardActionArea onClick={() => navigate(`/${serverHost}`)}>
42+
<Box
43+
display={"flex"}
44+
justifyContent="center"
45+
alignItems="center"
46+
flexDirection="column"
47+
my={5}
48+
>
49+
<ServerIcon width={"100px"} />
50+
<Typography
51+
textTransform={"capitalize"}
52+
mb={2}
53+
noWrap
54+
fontWeight={600}
55+
style={{
56+
color: ThemeConfig.palette.common.white,
57+
}}
4958
>
50-
<ServerIcon width={"100px"} />
51-
<Typography
52-
textTransform={"capitalize"}
53-
mb={2}
54-
noWrap
55-
fontWeight={600}
56-
style={{
57-
color: ThemeConfig.palette.common.white,
58-
}}
59-
>
60-
<>
61-
{serverHost} -{" "}
62-
<span
63-
style={{
64-
color: ThemeConfig.palette.success.dark,
65-
}}
66-
>
67-
{
68-
serversGroupedByHost[serverHost]?.[0]?.Message
69-
?.Platform
70-
}
71-
</span>
72-
</>
73-
</Typography>
74-
</Box>
75-
</CardActionArea>
76-
</Card>
77-
</Grid>
78-
)
79-
)}
59+
<>
60+
{serverHost} -{" "}
61+
<span
62+
style={{
63+
color: ThemeConfig.palette.success.dark,
64+
}}
65+
>
66+
{servers[serverHost]?.[0]?.Message?.Platform}
67+
</span>
68+
</>
69+
</Typography>
70+
</Box>
71+
</CardActionArea>
72+
</Card>
73+
</Grid>
74+
))}
8075
</Grid>
8176
</LoadingContent>
8277
</Container>

0 commit comments

Comments
 (0)