Skip to content

Commit

Permalink
CHORES: revamp servers store cache
Browse files Browse the repository at this point in the history
  • Loading branch information
@silvareal
silvareal committed Jan 5, 2023
1 parent f18df72 commit b5c3edb
Show file tree
Hide file tree
Showing 4 changed files with 85 additions and 93 deletions.
4 changes: 2 additions & 2 deletions web/src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ function App() {
path: "/",
element: (
<ServerList
serversGroupedByHost={serversGroupedByHost}
servers={serversGroupedByHost}
connectionStatus={connectionStatus}
setJsonMessage={setJsonMessage}
/>
Expand All @@ -30,7 +30,7 @@ function App() {
path: "/:host",
element: (
<ServerDetail
servicesGroupedByName={servicesGroupedByName}
servers={serversGroupedByHost}
connectionStatus={connectionStatus}
setJsonMessage={setJsonMessage}
/>
Expand Down
56 changes: 28 additions & 28 deletions web/src/hooks/useSocket.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import { useEffect, useState } from "react";
import useWebSocket, { ReadyState } from "react-use-websocket";
import {
ServerGroupedByHostResponseType,
ServerGroupedByNameResponseType,
ServerResponseByHostType,
ServerResponseType,
} from "server/ServerType";
Expand All @@ -18,44 +17,45 @@ export default function useSocket(options = {}) {
const [servers, setServers] = useState<ServerResponseByHostType>({});
const [jsonMessage, setJsonMessage] = useState<{ [key: string]: string }>();

let serversHost: Array<ServerResponseType> =
servers[jsonMessage?.FilterBy as any] || [];
const serversGroupedByHost: ServerGroupedByHostResponseType = servers;

const serversGroupedByHost: ServerGroupedByHostResponseType =
serversHost.reduce((group: any, server) => {
const { Message } = server;
const { Host } = Message;
group[Host] = group[Host] ?? [];
group[Host].push(server);
return group;
}, {});

const servicesGroupedByName: ServerGroupedByNameResponseType =
serversHost.reduce((group: any, server: any) => {
const { Message } = server;
const { Name, Host } = Message;
group[Name] = group[Name] ?? { data: [], Host };
group[Name].data.push(server);
return group;
}, {});
const servicesGroupedByName: ServerGroupedByHostResponseType = servers;

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

// console.log("servers", servers);
const { sendJsonMessage, readyState } = useWebSocket(socketUrl, {
onOpen: () => console.info("WebSocket connection opened."),
onClose: () => console.info("WebSocket connection closed."),
shouldReconnect: (closeEvent) => true,
onMessage: (event: WebSocketEventMap["message"]) => {
const newMessage: ServerResponseType = JSON.parse(event.data);
if (jsonMessage) {
setServers({
...servers,
[jsonMessage?.FilterBy as string]: servers[
jsonMessage?.FilterBy as string
]?.concat(newMessage) || [newMessage],
});
}

const newMessageGroupedByHost: ServerGroupedByHostResponseType = [
newMessage,
].reduce((group: any, server) => {
const { Message } = server;
const { Host } = Message;
const serverHost = servers?.[Host] ?? [];

const serviceIndex = serverHost.findIndex(
(value) => value.Message.Name === server.Message.Name
);

if (serviceIndex > -1) {
servers[Host][serviceIndex] = server;
} else {
group[Host] = [...serverHost, server];
}

return group;
}, {});

setServers({
...servers,
...newMessageGroupedByHost,
});
},
...options,
});
Expand Down
31 changes: 14 additions & 17 deletions web/src/server/ServerDetail.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,25 +8,26 @@ import PageHeader from "common/PageHeader";
import LoadingContent from "../common/LoadingContent";
import ServerDetailServicesTabPanel from "./ServerDetailServicesTabPanel";
import {
ServerGroupedByNameResponseType,
ServerGroupedByHostResponseType,
ServerResponseType,
ServerServiceNameType,
} from "./ServerType";
import AppHeader from "AppHeader";

export default function ServerDetail({
servicesGroupedByName,
servers,
connectionStatus,
setJsonMessage,
}: {
servicesGroupedByName: ServerGroupedByNameResponseType;
servers: ServerGroupedByHostResponseType;
connectionStatus: string;
setJsonMessage: (arg0: any) => void;
}) {
const { host } = useParams<{ host: string }>();

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

const services = servers[host as string];

useEffect(() => {
setJsonMessage({ FilterBy: host });
}, [host]);
Expand Down Expand Up @@ -59,29 +60,25 @@ export default function ServerDetail({
variant="scrollable"
scrollButtons="auto"
>
{Object.keys(servicesGroupedByName)
{services
?.sort()
?.map((serverName: string, index: number) => (
<Tab label={serverName} key={index} />
?.map((service: ServerResponseType, index: number) => (
<Tab label={service.Message.Name} key={index} />
))}
</Tabs>

{Object.keys(servicesGroupedByName)
{services
?.sort()
?.map((serverName: string, index: number) => {
if (host !== servicesGroupedByName[serverName].Host)
return null;
?.map((service: ServerResponseType, index: number) => {
// if (host !== servicesGroupedByName[serverName].Host)
// return null;

return (
<div key={index}>
{index === tabIndex && (
<ServerDetailServicesTabPanel
serverName={serverName as ServerServiceNameType}
serverData={
servicesGroupedByName[
serverName as ServerServiceNameType
]?.data?.at(-1) as ServerResponseType
} // get the last object of service
serverName={service.Message.Name}
serverData={service}
/>
)}
</div>
Expand Down
87 changes: 41 additions & 46 deletions web/src/server/ServerList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,11 @@ import { ServerGroupedByHostResponseType } from "./ServerType";
import AppHeader from "AppHeader";

export default function ServerList({
serversGroupedByHost,
servers,
connectionStatus,
setJsonMessage,
}: {
serversGroupedByHost: ServerGroupedByHostResponseType;
servers: ServerGroupedByHostResponseType;
connectionStatus: string;
setJsonMessage: (arg0: any) => void;
}) {
Expand All @@ -32,51 +32,46 @@ export default function ServerList({
error={connectionStatus === "Closed"}
>
<Grid container spacing={2} my={10}>
{Object.keys(serversGroupedByHost)?.map(
(serverHost: string, index: number) => (
<Grid item xs={12} md={6} key={index}>
<Card
key={index}
style={{ background: ThemeConfig.palette.primary.light }}
>
<CardActionArea onClick={() => navigate(`/${serverHost}`)}>
<Box
display={"flex"}
justifyContent="center"
alignItems="center"
flexDirection="column"
my={5}
{Object.keys(servers)?.map((serverHost: string, index: number) => (
<Grid item xs={12} md={6} key={index}>
<Card
key={index}
style={{ background: ThemeConfig.palette.primary.light }}
>
<CardActionArea onClick={() => navigate(`/${serverHost}`)}>
<Box
display={"flex"}
justifyContent="center"
alignItems="center"
flexDirection="column"
my={5}
>
<ServerIcon width={"100px"} />
<Typography
textTransform={"capitalize"}
mb={2}
noWrap
fontWeight={600}
style={{
color: ThemeConfig.palette.common.white,
}}
>
<ServerIcon width={"100px"} />
<Typography
textTransform={"capitalize"}
mb={2}
noWrap
fontWeight={600}
style={{
color: ThemeConfig.palette.common.white,
}}
>
<>
{serverHost} -{" "}
<span
style={{
color: ThemeConfig.palette.success.dark,
}}
>
{
serversGroupedByHost[serverHost]?.[0]?.Message
?.Platform
}
</span>
</>
</Typography>
</Box>
</CardActionArea>
</Card>
</Grid>
)
)}
<>
{serverHost} -{" "}
<span
style={{
color: ThemeConfig.palette.success.dark,
}}
>
{servers[serverHost]?.[0]?.Message?.Platform}
</span>
</>
</Typography>
</Box>
</CardActionArea>
</Card>
</Grid>
))}
</Grid>
</LoadingContent>
</Container>
Expand Down

0 comments on commit b5c3edb

Please sign in to comment.