FEAT: server details

web/src/App.tsx

@@ -12,7 +12,7 @@ const router = createBrowserRouter([
  element: <ServerList />,
  },
  {
- path: "/:id",
+ path: "/:host",
  element: <ServerDetail />,
  },
 ]);

web/src/AppHeader.tsx

@@ -6,6 +6,7 @@ import Toolbar from "@mui/material/Toolbar";
 import Typography from "@mui/material/Typography";
 import InputBase from "@mui/material/InputBase";
 import SearchIcon from "@mui/icons-material/Search";
+import { Link } from "react-router-dom";
 
 const Search = styled("div")(({ theme }) => ({
  position: "relative",
@@ -62,6 +63,7 @@ export default function AppHeader() {
  >
  Saido
  </Typography>
+
  <Search>
  <SearchIconWrapper>
  <SearchIcon />

web/src/common/ErrorContent.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { Typography } from "@mui/material";
 import clsx from "clsx";
 import SentimentVeryDissatisfiedIcon from "@mui/icons-material/SentimentVeryDissatisfied";
+import ThemeConfig from "../ThemeConfig";
 
 interface ErrorContentType {
  title: string;
@@ -20,6 +21,7 @@ function ErrorContent(props: ErrorContentType): JSX.Element {
 
  return (
  <div
+ style={{ color: ThemeConfig.palette.error.main }}
  className={clsx(
  "p-1 d-flex text-danger justify-content-center align-items-center flex-column w-100",
  className

web/src/server/ServerDetail.tsx

@@ -1,5 +1,56 @@
-import React from "react";
+import { Container } from "@mui/material";
+import React, { useState } from "react";
+import { useParams } from "react-router-dom";
+import useWebSocket, { ReadyState } from "react-use-websocket";
+import LoadingContent from "../common/LoadingContent";
+import {
+ ServerGroupedByNameResponseType,
+ ServerResponseType,
+} from "./ServerType";
 
+const wssMetricsBaseURL = `${process.env.REACT_APP_WS_BASE_URL}/metrics`;
 export default function ServerDetail() {
- return <div>ServerDetail</div>;
+ const { host } = useParams<{ host: string }>();
+
+ const [servers, setServers] = useState<ServerResponseType[]>([]);
+
+ const serversGroupedByName: ServerGroupedByNameResponseType[] =
+ servers.reduce((group: any, server) => {
+ const { Message } = server;
+ const { Name } = Message;
+ group[Name] = group[Name] ?? [];
+ group[Name].push(server);
+ return group;
+ }, {});
+
+ console.log("serversGroupedByName", serversGroupedByName);
+
+ const { sendJsonMessage, readyState } = useWebSocket(wssMetricsBaseURL, {
+ onOpen: () => console.log("WebSocket connection opened."),
+ onClose: () => console.log("WebSocket connection closed."),
+ shouldReconnect: (closeEvent) => true,
+ onMessage: (event: WebSocketEventMap["message"]) => {
+ const newMessage: ServerResponseType = JSON.parse(event.data);
+ setServers((prev) => prev.concat(newMessage));
+ },
+ });
+
+ sendJsonMessage({ FilterBy: host });
+
+ const connectionStatus: string = {
+ [ReadyState.CONNECTING]: "Connecting",
+ [ReadyState.OPEN]: "Open",
+ [ReadyState.CLOSING]: "Closing",
+ [ReadyState.CLOSED]: "Closed",
+ [ReadyState.UNINSTANTIATED]: "Uninstantiated",
+ }[readyState];
+
+ return (
+ <Container>
+ <LoadingContent
+ loading={connectionStatus === "Connecting"}
+ error={connectionStatus === "Closed"}
+ ></LoadingContent>
+ </Container>
+ );
 }

web/src/server/ServerList.tsx

@@ -1,31 +1,42 @@
 import { Card, CardActionArea, Grid, Typography } from "@mui/material";
 import { Box, Container } from "@mui/system";
 import React, { useState } from "react";
+import { useNavigate } from "react-router-dom";
 import useWebSocket, { ReadyState } from "react-use-websocket";
-import { ReactComponent as ServerIcon } from "../assets/svg/server.svg";
-import LoadingContent from "../common/LoadingContent";
-import ThemeConfig from "../ThemeConfig";
-import { ServerResponse } from "./ServerType";
+import { ReactComponent as ServerIcon } from "assets/svg/server.svg";
+import LoadingContent from "common/LoadingContent";
+import ThemeConfig from "ThemeConfig";
+import {
+ ServerGroupedByHostResponseType,
+ ServerResponseType,
+} from "./ServerType";
+
+const wssMetricsBaseURL = `${process.env.REACT_APP_WS_BASE_URL}/metrics`;
 
 export default function ServerList() {
- const [servers, setServers] = useState<ServerResponse[]>([]);
- const { sendJsonMessage, getWebSocket, readyState } = useWebSocket(
- `ws://localhost:3000/metrics`,
- {
- onOpen: () => console.log("WebSocket connection opened."),
- onClose: () => console.log("WebSocket connection closed."),
- shouldReconnect: (closeEvent) => true,
- onMessage: (event: WebSocketEventMap["message"]) => {
- const newMessage: ServerResponse = JSON.parse(event.data);
- setServers((prev: ServerResponse[]) => {
- if (!newMessage.Error) {
- return prev.concat(newMessage);
- }
- });
- },
- }
+ const navigate = useNavigate();
+
+ const [servers, setServers] = useState<ServerResponseType[]>([]);
+ const serversGroupedByHost: ServerGroupedByHostResponseType = servers.reduce(
+ (group: any, server) => {
+ const { Message } = server;
+ const { Host } = Message;
+ group[Host] = group[Host] ?? [];
+ group[Host].push(server);
+ return group;
+ },
+ {}
  );
- getWebSocket();
+
+ const { readyState } = useWebSocket(wssMetricsBaseURL, {
+ onOpen: () => console.log("WebSocket connection opened."),
+ onClose: () => console.log("WebSocket connection closed."),
+ shouldReconnect: (closeEvent) => true,
+ onMessage: (event: WebSocketEventMap["message"]) => {
+ const newMessage: ServerResponseType = JSON.parse(event.data);
+ setServers((prev) => prev.concat(newMessage));
+ },
+ });
 
  const connectionStatus: string = {
  [ReadyState.CONNECTING]: "Connecting",
@@ -35,42 +46,49 @@ export default function ServerList() {
  [ReadyState.UNINSTANTIATED]: "Uninstantiated",
  }[readyState];
 
- console.log(servers);
- // console.log("getWebsocket", getWebSocket()?.OPEN);
  return (
  <Container>
  <LoadingContent
  loading={connectionStatus === "Connecting"}
  error={connectionStatus === "Closed"}
  >
  <Grid container spacing={2} my={10}>
- {servers.map((server: any, index: number) => (
- <Grid item xs={6} md={4}>
- <Card key={index}>
- <CardActionArea>
- <Box
- display={"flex"}
- justifyContent="center"
- alignItems="center"
- flexDirection="column"
- >
- <ServerIcon width={"100px"} />
- <Typography
- textTransform={"capitalize"}
- mb={2}
- noWrap
- fontWeight={600}
+ {Object.keys(serversGroupedByHost)?.map(
+ (serverHost: string, index: number) => (
+ <Grid item xs={6} md={4}>
+ <Card key={index}>
+ <CardActionArea onClick={() => navigate(`/${serverHost}`)}>
+ <Box
+ display={"flex"}
+ justifyContent="center"
+ alignItems="center"
+ flexDirection="column"
  >
- localhost -{" "}
- <span style={{ color: ThemeConfig.palette.success.dark }}>
- linux
- </span>
- </Typography>
- </Box>
- </CardActionArea>
- </Card>
- </Grid>
- ))}
+ <ServerIcon width={"100px"} />
+ <Typography
+ textTransform={"capitalize"}
+ mb={2}
+ noWrap
+ fontWeight={600}
+ >
+ <>
+ {serverHost} -{" "}
+ <span
+ style={{ color: ThemeConfig.palette.success.dark }}
+ >
+ {
+ serversGroupedByHost[serverHost]?.[0]?.Message
+ ?.Platform
+ }
+ </span>
+ </>
+ </Typography>
+ </Box>
+ </CardActionArea>
+ </Card>
+ </Grid>
+ )
+ )}
  </Grid>
  </LoadingContent>
  </Container>

web/src/server/ServerType.tsx

@@ -1,4 +1,4 @@
-export interface ServerResponse {
+export interface ServerResponseType {
  Error: boolean;
  Message: {
  Host: string;
@@ -14,3 +14,11 @@ export interface ServerResponse {
  Data: Object;
  };
 }
+
+export interface ServerGroupedByHostResponseType {
+ [Host: string]: ServerResponseType[];
+}
+
+export interface ServerGroupedByNameResponseType {
+ [Name: string]: ServerResponseType[];
+}