FEAT: page header

Author: silvareal

web/src/common/PageHeader.css

@@ -0,0 +1,11 @@
+.PageHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 0 10px 0;
+  flex-wrap: wrap;
+}
+
+.PageHeader__title {
+  font-weight: 800;
+}

web/src/common/PageHeader.tsx

@@ -0,0 +1,104 @@
+import {
+  Breadcrumbs,
+  Typography,
+  Link as MuiLink,
+  Toolbar,
+} from "@mui/material";
+import { Link } from "react-router-dom";
+import clsx from "clsx";
+import "./PageHeader.css";
+
+interface BreadCrumbType {
+  name: string;
+  to?: string;
+}
+
+interface PageHeaderType {
+  title: string;
+  className?: string;
+  breadcrumbs: BreadCrumbType[];
+  children?: React.ReactElement;
+  classes?: {
+    root: string;
+    title: string;
+    content: string;
+    rootContent: string;
+  };
+  beforeTitle?: React.ReactElement;
+}
+/**
+ *
+ * @param {PageHeaderProps} props
+ */
+function PageHeader(props: PageHeaderType) {
+  const {
+    title,
+    className,
+    breadcrumbs,
+    children,
+    classes,
+    beforeTitle,
+    ...rest
+  } = props;
+  return (
+    <>
+      <Toolbar
+        disableGutters
+        className={clsx("PageHeader", className, classes?.root)}
+        {...rest}
+      >
+        {beforeTitle}
+        <Typography
+          variant="h5"
+          className={clsx("PageHeader__title", classes?.title)}
+        >
+          {title}
+        </Typography>
+        <div className={clsx("PageHeader__content", classes?.rootContent)}>
+          {children}
+        </div>
+        <div className="flex-1" />
+        {!!breadcrumbs.length && (
+          <Breadcrumbs>
+            {breadcrumbs.map((breadcrumb: BreadCrumbType, key: number) => {
+              const isPage = key === breadcrumbs.length - 1;
+
+              if (isPage) {
+                return <Typography key={key}>{breadcrumb.name}</Typography>;
+              }
+
+              return (
+                <MuiLink key={key} component={Link} to={breadcrumb.to || "#"}>
+                  {breadcrumb.name}
+                </MuiLink>
+              );
+            })}
+          </Breadcrumbs>
+        )}
+      </Toolbar>
+      {!!children && (
+        <Toolbar
+          disableGutters
+          className={clsx("PageHeader-content", classes?.content)}
+        >
+          {children}
+        </Toolbar>
+      )}
+    </>
+  );
+}
+
+PageHeader.defaultProps = {
+  breadcrumbs: [],
+  classes: {},
+};
+
+export default PageHeader;
+
+/**
+ * @typedef {{
+ * breadcrumbs: {name: string, to: string}[];
+ * classes: {root: string; title: string; content: string; rootContent: string}
+ * beforeTitle: import("react").ReactNode
+ * } & import("react").ComponentPropsWithoutRef<'div'>} PageHeaderProps
+ */

web/src/server/ServerDetail.tsx

@@ -9,13 +9,32 @@ import {
 } from "./ServerType";
 import { Pie } from "react-chartjs-2";
 import { Chart as ChartJS, ArcElement, Tooltip, Legend } from "chart.js";
+import Tabs from "@mui/material/Tabs";
+import Tab from "@mui/material/Tab";
+import Typography from "@mui/material/Typography";
+import Box from "@mui/material/Box";
+import PageHeader from "common/PageHeader";
+
+interface TabPanelProps {
+  children?: React.ReactNode;
+  index: number;
+  value: number;
+}
 
 ChartJS.register(ArcElement, Tooltip, Legend);
 
 const wssMetricsBaseURL = `${process.env.REACT_APP_WS_BASE_URL}/metrics`;
 
+function a11yProps(index: number) {
+  return {
+    id: `simple-tab-${index}`,
+    "aria-controls": `simple-tabpanel-${index}`,
+  };
+}
+
 export default function ServerDetail() {
   const { host } = useParams<{ host: string }>();
+  const [tabIndex, setTabIndex] = React.useState<number>(0);
 
   const [servers, setServers] = useState<ServerResponseType[]>([]);
 
@@ -53,48 +72,42 @@ export default function ServerDetail() {
 
   console.log(serversGroupedByName);
 
-  const memoryToPieChartData = (serverResponse: ServerResponseType) => {
-    const { Message } = serverResponse;
-    const { Data, Name } = Message;
-
-    let labels = [];
-    let data = [];
-
-    for (const [key, value] of Object.entries(Data)) {
-      labels.push(key);
-      data.push(value);
-    }
-    return {
-      labels,
-      datasets: [
-        {
-          label: Name,
-          data,
-          backgroundColor: "#494788",
-          borderWidth: 1,
-        },
-      ],
-    };
+  const handleChangeTabIndex = (
+    event: React.SyntheticEvent,
+    newValue: number
+  ) => {
+    setTabIndex(newValue);
   };
 
   return (
     <Container>
+      <PageHeader
+        title={`${host}`}
+        breadcrumbs={[{ name: "Servers", to: "/" }, { name: `${host}` }]}
+      ></PageHeader>
+
       <LoadingContent
         loading={connectionStatus === "Connecting"}
         error={connectionStatus === "Closed"}
       >
         <>
+          <Tabs
+            value={tabIndex}
+            onChange={handleChangeTabIndex}
+            aria-label={`${host} Tab`}
+            variant="scrollable"
+            scrollButtons="auto"
+          >
+            {Object.keys(serversGroupedByName)?.map(
+              (serverName: string, index: number) => (
+                <Tab label={serverName} {...a11yProps(index)} key={index} />
+              )
+            )}
+          </Tabs>
+
           {Object.keys(serversGroupedByName)?.map(
             (serverName: string, index: number) => (
-              <div key={index}>
-                {serverName === "memory" && (
-                  <Pie
-                    data={memoryToPieChartData(
-                      serversGroupedByName[serverName]?.slice(-1)[0]
-                    )}
-                  />
-                )}
-              </div>
+              <div key={index}>{index === tabIndex && <>{serverName}</>}</div>
             )
           )}
         </>

web/src/server/ServerList.tsx

@@ -1,6 +1,6 @@
 import { Card, CardActionArea, Grid, Typography } from "@mui/material";
 import { Box, Container } from "@mui/system";
-import React, { useState } from "react";
+import React, { useEffect, 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";
@@ -39,8 +39,6 @@ export default function ServerList() {
     },
   });
 
-  sendJsonMessage({ FilterBy: "" });
-
   const connectionStatus: string = {
     [ReadyState.CONNECTING]: "Connecting",
     [ReadyState.OPEN]: "Open",
@@ -49,7 +47,9 @@ export default function ServerList() {
     [ReadyState.UNINSTANTIATED]: "Uninstantiated",
   }[readyState];
 
-  //   console.log("serversGroupedByHost", serversGroupedByHost);
+  useEffect(() => {
+    sendJsonMessage({ FilterBy: "" });
+  }, []);
 
   return (
     <Container>