add: impl memory and disk chart

bisohns · Nov 8, 2022 · 070973a · 070973a
1 parent 25a3be0
commit 070973a
Show file tree

Hide file tree

Showing 4 changed files with 93 additions and 27 deletions.
diff --git a/web/src/server/ServerDetailServicesTabPanel.tsx b/web/src/server/ServerDetailServicesTabPanel.tsx
@@ -7,7 +7,7 @@ import ServerDetailServicesTabPanelMemory from "./ServerDetailServicesTabPanelMe
 import ServerDetailServicesTabPanelProcess from "./ServerDetailServicesTabPanelProcess";
 import ServerDetailServicesTabPanelTCP from "./ServerDetailServicesTabPanelTCP";
 import ServerDetailServicesTabPanelUptime from "./ServerDetailServicesTabPanelUptime";
-import { ServerResponseType, ServerServiceNameType } from "./ServerType";
+import { DiskData, MemoryData, ServerResponseType, ServerServiceNameType } from "./ServerType";
 
 interface ServerDetailServicesTabPanelType {
   serverName: ServerServiceNameType;
@@ -31,7 +31,7 @@ export default function ServerDetailServicesTabPanel(
         content: (
           <ServerDetailServicesTabPanelDisk
             serverName={serverName}
-            serverData={serverData}
+            serverData={serverData as ServerResponseType<Array<DiskData>>}
           />
         ),
       },
@@ -58,7 +58,7 @@ export default function ServerDetailServicesTabPanel(
         content: (
           <ServerDetailServicesTabPanelMemory
             serverName={serverName}
-            serverData={serverData}
+            serverData={serverData as ServerResponseType<MemoryData>}
           />
         ),
       },

diff --git a/web/src/server/ServerDetailServicesTabPanelDisk.tsx b/web/src/server/ServerDetailServicesTabPanelDisk.tsx
@@ -1,19 +1,47 @@
-import React from "react";
+import styled from '@emotion/styled';
+import React from 'react';
+import {
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+} from 'recharts';
+import { DiskData, ServerResponseType, ServerServiceNameType } from './ServerType';
 
 interface ServerDetailServicesTabPanelDiskType {
-  serverName:
-    | "disk"
-    | "docker"
-    | "uptime"
-    | "memory"
-    | "process"
-    | "loadavg"
-    | "tcp";
-  serverData: Object | [];
+  serverName: ServerServiceNameType;
+  serverData: ServerResponseType<Array<DiskData>>;
 }
 
+const Div = styled.div`
+  margin-top: 2rem;
+`;
+
 export default function ServerDetailServicesTabPanelDisk(
   props: ServerDetailServicesTabPanelDiskType
 ) {
-  return <div>{/* <ServicesTabPanel /> */}</div>;
+  const { serverData:{ Message:{ Data }}}  = props;
+
+  return (
+    <Div>
+      {
+        /* <ServicesTabPanel /> */
+        // <ResponsiveContainer width='100%' height='100%'>
+        <BarChart width={900} height={500}  data={Data}>
+          <CartesianGrid strokeDasharray='3 3' />
+          <XAxis dataKey='FileSystem' />
+          <YAxis />
+          <Tooltip />
+          <Legend />
+          <Bar dataKey='Available' fill='#8884d8' />
+          <Bar dataKey='Used' fill='red' />
+          <Bar dataKey='Size' fill='green' />
+        </BarChart>
+        // </ResponsiveContainer>
+      }
+    </Div>
+  );
 }
diff --git a/web/src/server/ServerDetailServicesTabPanelMemory.tsx b/web/src/server/ServerDetailServicesTabPanelMemory.tsx
@@ -1,19 +1,57 @@
-import React from "react";
+import styled from '@emotion/styled';
+import React from 'react';
+import {
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+} from 'recharts';
+import {
+  MemoryData,
+  ServerResponseType,
+  ServerServiceNameType,
+} from './ServerType';
 
 interface ServerDetailServicesTabPanelMemoryType {
-  serverName:
-    | "disk"
-    | "docker"
-    | "uptime"
-    | "memory"
-    | "process"
-    | "loadavg"
-    | "tcp";
-  serverData: Object | [];
+  serverName: ServerServiceNameType;
+  serverData: ServerResponseType<MemoryData>;
 }
 
+
+const Div = styled.div`
+margin-top:2rem;
+`
+
 export default function ServerDetailServicesTabPanelMemory(
   props: ServerDetailServicesTabPanelMemoryType
 ) {
-  return <div>{/* <ServicesTabPanel /> */}</div>;
+  const {
+    serverData: {
+      Message: { Data },
+    },
+  } = props;
+  console.log({ Data });
+  return (
+    <Div>
+      {
+        /* <ServicesTabPanel /> */
+        // <ResponsiveContainer width='100%' height='100%'>
+        <BarChart width={900} height={500} data={[Data]}>
+          <CartesianGrid strokeDasharray='3 3' />
+          <XAxis dataKey='FileSystem' />
+          <YAxis />
+          <Tooltip />
+          <Legend />
+          <Bar dataKey='MemFree' fill='#003f5c' />
+          <Bar dataKey='MemTotal' fill='#58508d' />
+          <Bar dataKey='SwapFree' fill='#bc5090' />
+          <Bar dataKey='SwapTotal' fill='#ff6361' />
+        </BarChart>
+        // </ResponsiveContainer>
+      }
+    </Div>
+  );
 }
diff --git a/web/src/server/ServerType.tsx b/web/src/server/ServerType.tsx
@@ -14,13 +14,13 @@ export type ServerServiceNameType =
   | UptimeData
   | ProcessData;
 
-export interface ServerResponseType {
+export interface ServerResponseType<T = ServerResponseMessageData> {
   Error: boolean;
   Message: {
     Host: string;
     Name: ServerServiceNameType;
     Platform: 'Windows' | 'Linux' | 'Darwin' | 'MacOS';
-    Data: ServerResponseMessageData;
+    Data: T;
   };
 }