CHORES: user dark theme

web/public/index.html

@@ -7,7 +7,7 @@
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
-      content="Web site created using create-react-app"
+      content="YAML based tool for monitoring metrics across multiple hosts "
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--

web/src/App.tsx

@@ -1,15 +1,20 @@
-import React from 'react';
+import React from "react";
 
-import AppThemeProvider from './AppThemeProvider';
-import { createBrowserRouter, RouterProvider } from 'react-router-dom';
-import ServerList from './server/ServerList';
-import ServerDetail from './server/ServerDetail';
-import AppHeader from './AppHeader';
-import useSocket from 'hooks/useSocket';
+import AppThemeProvider from "./AppThemeProvider";
+import { createBrowserRouter, RouterProvider } from "react-router-dom";
+import ServerList from "./server/ServerList";
+import ServerDetail from "./server/ServerDetail";
+import useSocket from "hooks/useSocket";
+import ThemeConfig from "ThemeConfig";
 
 function App() {
-  const { servicesGroupedByName, serversGroupedByHost, updateCount ,connectionStatus,sendJsonMessage} =
-    useSocket();
+  const {
+    servicesGroupedByName,
+    serversGroupedByHost,
+    updateCount,
+    connectionStatus,
+    sendJsonMessage,
+  } = useSocket();
 
   const [servicesGroupByName, setServicesGroupByName] = React.useState<any>({});
 
@@ -25,21 +30,37 @@ function App() {
 
   const router = createBrowserRouter([
     {
-      path: '/',
-      element: <ServerList serversGroupedByHost={servicesGroupByHost}  connectionStatus={connectionStatus} sendJsonMessage={sendJsonMessage}/>,
+      path: "/",
+      element: (
+        <ServerList
+          serversGroupedByHost={servicesGroupByHost}
+          connectionStatus={connectionStatus}
+          sendJsonMessage={sendJsonMessage}
+        />
+      ),
     },
     {
-      path: '/:host',
-      element: <ServerDetail servicesGroupedByName={servicesGroupByName} connectionStatus={connectionStatus} sendJsonMessage={sendJsonMessage} />,
+      path: "/:host",
+      element: (
+        <ServerDetail
+          servicesGroupedByName={servicesGroupByName}
+          connectionStatus={connectionStatus}
+          sendJsonMessage={sendJsonMessage}
+        />
+      ),
     },
   ]);
 
   return (
     <AppThemeProvider>
-      <>
-        <AppHeader />
+      <div
+        style={{
+          background: `${ThemeConfig.palette.common.black}`,
+          minHeight: "100vh",
+        }}
+      >
         <RouterProvider router={router} />
-      </>
+      </div>
     </AppThemeProvider>
   );
 }

web/src/AppHeader.tsx

@@ -6,15 +6,19 @@ 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";
+
+import Logo from "assets/img/saido-trans.png";
 
 const Search = styled("div")(({ theme }) => ({
   position: "relative",
   borderRadius: theme.shape.borderRadius,
-  backgroundColor: alpha(theme.palette.common.white, 0.15),
+  backgroundColor: alpha(theme.palette.common.white, 0.1),
   "&:hover": {
     backgroundColor: alpha(theme.palette.common.white, 0.25),
   },
   marginLeft: 0,
+  color: theme.palette.common.white,
   width: "100%",
   [theme.breakpoints.up("sm")]: {
     marginLeft: theme.spacing(1),
@@ -25,6 +29,7 @@ const Search = styled("div")(({ theme }) => ({
 const SearchIconWrapper = styled("div")(({ theme }) => ({
   padding: theme.spacing(0, 2),
   height: "100%",
+  color: theme.palette.primary.light,
   position: "absolute",
   pointerEvents: "none",
   display: "flex",
@@ -52,16 +57,13 @@ const StyledInputBase = styled(InputBase)(({ theme }) => ({
 export default function AppHeader() {
   return (
     <Box sx={{ flexGrow: 1 }}>
-      <AppBar position="static">
+      <AppBar position="static" color="transparent">
         <Toolbar>
-          <Typography
-            variant="h6"
-            noWrap
-            component="div"
-            sx={{ flexGrow: 1, display: { xs: "none", sm: "block" } }}
-          >
-            Saido
-          </Typography>
+          <Box sx={{ flexGrow: 1, display: { xs: "none", sm: "block" } }}>
+            <Link to={"/"}>
+              <img style={{ maxWidth: "120px" }} src={Logo} alt="Saido" />
+            </Link>
+          </Box>
 
           <Search>
             <SearchIconWrapper>

web/src/ThemeConfig.tsx

@@ -11,15 +11,15 @@ export const theme: any = customizeComponents({
       black: "#000000",
     },
     primary: {
-      light: "#9ac5f2",
-      main: "#1a4879",
-      dark: "#1f436c",
-      //   contrastText: "3379c6",
+      light: "#9ac4f241",
+      main: "#588dc5",
+      dark: "#61a3ef8e",
+      contrastText: "#FFFFFF",
     },
     secondary: {
       light: "#74CAFF",
       // main: "#1890FF",
-      main: "#1890FF",
+      main: "#9cc1e7",
       dark: "#0C53B7",
       contrastText: "#FFFFFF",
     },
@@ -119,6 +119,31 @@ export const theme: any = customizeComponents({
         },
       },
     },
+    MuiTabs: {
+      defaultProps: {
+        variant: "scrollable",
+        scrollButtons: "auto",
+        allowScrollButtonsMobile: true,
+      },
+    },
+    MuiTab: {
+      styleOverrides: {
+        root: {
+          padding: 3,
+          minWidth: 10,
+          marginRight: 30,
+        },
+      },
+      defaultProps: {
+        sx: {
+          typography: {
+            fontSize: 14,
+            textTransform: "capitalize",
+            fontWeight: 550,
+          },
+        },
+      },
+    },
     MuiButton: {
       defaultProps: {
         variant: "contained",

web/src/common/PageHeader.tsx

@@ -50,6 +50,7 @@ function PageHeader(props: PageHeaderType) {
         {beforeTitle}
         <Typography
           variant="h5"
+          color="primary"
           className={clsx("PageHeader__title", classes?.title)}
         >
           {title}

web/src/common/Table.css

@@ -2,6 +2,7 @@
   min-height: 300px;
   max-height: calc(100vh - 250px);
   overflow: auto;
+  border: 2px solid #9ac4f215
 }
 .Table {
 
@@ -42,7 +43,7 @@
 .Table__table__header__row,
 .Table__table__body__row,
 .Table__table__footer__row {
-  border-bottom: 1px solid lightgray;
+  border-bottom: 1px solid #9ac4f215;
 }
 
 .Table__table__header__row--relative,
@@ -64,7 +65,8 @@
 .Table__table__body__row__cell,
 .Table__table__footer__row__cell {
   position: relative;
-  background-color: white;
+  background-color: black;
+  color: rgba(255, 255, 255, 0.713);
   padding: 8px;
   /* height: 48px; */
   text-align: left;

web/src/common/Table.tsx

@@ -413,7 +413,7 @@ function renderBody(instance: TanTable<any>, props: TableProps) {
   const Body = props.Body || isDefault ? "tbody" : "div";
   const BodyProps = props.BodyProps?.(instance, props);
   const { rows } = instance.getRowModel();
-  console.log("rows.length", rows);
+
   const { virtualItems: virtualRows, totalSize } = props.virtualizationInstance;
   const paddingTop = virtualRows.length > 0 ? virtualRows?.[0]?.start || 0 : 0;
   const paddingBottom =

web/src/server/ServerDetail.tsx

@@ -1,27 +1,28 @@
-import React from 'react';
-import { Container } from '@mui/material';
-import { useParams } from 'react-router-dom';
-import Tabs from '@mui/material/Tabs';
-import Tab from '@mui/material/Tab';
+import React from "react";
+import { Container } from "@mui/material";
+import { useParams } from "react-router-dom";
+import Tabs from "@mui/material/Tabs";
+import Tab from "@mui/material/Tab";
 
-import PageHeader from 'common/PageHeader';
-import LoadingContent from '../common/LoadingContent';
-import useSocket from 'hooks/useSocket';
-import ServerDetailServicesTabPanel from './ServerDetailServicesTabPanel';
+import PageHeader from "common/PageHeader";
+import LoadingContent from "../common/LoadingContent";
+import useSocket from "hooks/useSocket";
+import ServerDetailServicesTabPanel from "./ServerDetailServicesTabPanel";
 import {
   ServerGroupedByNameResponseType,
   ServerResponseType,
   ServerServiceNameType,
-} from './ServerType';
+} from "./ServerType";
+import AppHeader from "AppHeader";
 
 export default function ServerDetail({
   servicesGroupedByName,
   connectionStatus,
-  sendJsonMessage
+  sendJsonMessage,
 }: {
   servicesGroupedByName: ServerGroupedByNameResponseType;
   connectionStatus: string;
-  sendJsonMessage:(arg0: any)=>void;
+  sendJsonMessage: (arg0: any) => void;
 }) {
   const { host } = useParams<{ host: string }>();
 
@@ -36,53 +37,57 @@ export default function ServerDetail({
   };
 
   return (
-    <Container>
-      <PageHeader
-        title={`${host}`}
-        breadcrumbs={[
-          { name: 'Servers', to: '/' },
-          { name: `${host}` },
-        ]}></PageHeader>
+    <>
+      <AppHeader />{" "}
+      <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(servicesGroupedByName)
+                ?.sort()
+                ?.map((serverName: string, index: number) => (
+                  <Tab label={serverName} key={index} />
+                ))}
+            </Tabs>
 
-      <LoadingContent
-        loading={connectionStatus === 'Connecting'}
-        error={connectionStatus === 'Closed'}>
-        <>
-          <Tabs
-            value={tabIndex}
-            onChange={handleChangeTabIndex}
-            aria-label={`${host} Tab`}
-            variant='scrollable'
-            scrollButtons='auto'>
             {Object.keys(servicesGroupedByName)
               ?.sort()
-              ?.map((serverName: string, index: number) => (
-                <Tab label={serverName} key={index} />
-              ))}
-          </Tabs>
-
-          {Object.keys(servicesGroupedByName)
-            ?.sort()
-            ?.map((serverName: string, index: number) => {
-              if (host !== servicesGroupedByName[serverName].Host) return null;
+              ?.map((serverName: string, 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
-                    />
-                  )}
-                </div>
-              );
-            })}
-        </>
-      </LoadingContent>
-    </Container>
+                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
+                      />
+                    )}
+                  </div>
+                );
+              })}
+          </>
+        </LoadingContent>
+      </Container>
+    </>
   );
 }