FEAT: docker and utime table

web/src/common/utils.tsx

@@ -0,0 +1,22 @@
+function makeHumanReadable(
+ num: number,
+ singular: "second" | "minute" | "hour" | "day"
+) {
+ return num > 0
+ ? num + (num === 1 ? ` ${singular}, ` : ` ${singular}s, `)
+ : "";
+}
+
+export function toDaysMinutesSeconds(totalSeconds: number) {
+ const seconds = Math.floor(totalSeconds % 60);
+ const minutes = Math.floor((totalSeconds % 3600) / 60);
+ const hours = Math.floor((totalSeconds % (3600 * 24)) / 3600);
+ const days = Math.floor(totalSeconds / (3600 * 24));
+
+ const secondsStr = makeHumanReadable(seconds, "second");
+ const minutesStr = makeHumanReadable(minutes, "minute");
+ const hoursStr = makeHumanReadable(hours, "hour");
+ const daysStr = makeHumanReadable(days, "day");
+
+ return `${daysStr}${hoursStr}${minutesStr}${secondsStr}`.replace(/,\s*$/, "");
+}

web/src/server/ServerDetailServicesTabPanel.tsx

@@ -11,12 +11,14 @@ import ServerDetailServicesTabPanelTCP from "./ServerDetailServicesTabPanelTCP";
 import ServerDetailServicesTabPanelUptime from "./ServerDetailServicesTabPanelUptime";
 import {
  DiskData,
+ DockerData,
  LoadingAvgData,
  MemoryData,
  ProcessData,
  ServerResponseType,
  ServerServiceNameType,
  TCPData,
+ UptimeData,
 } from "./ServerType";
 
 interface ServerDetailServicesTabPanelType {
@@ -36,6 +38,15 @@ export default function ServerDetailServicesTabPanel(
 
  const servicesTabPanel: servicesTabPanelType[] = useMemo(
  () => [
+ {
+ title: ServerNameEnum.DOCKER as ServerServiceNameType,
+ content: (
+ <ServerDetailServicesTabPanelDocker
+ serverName={serverName}
+ serverData={serverData as ServerResponseType<Array<DockerData>>}
+ />
+ ),
+ },
  {
  title: ServerNameEnum.DISK as ServerServiceNameType,
  content: (
@@ -45,12 +56,13 @@ export default function ServerDetailServicesTabPanel(
  />
  ),
  },
+
  {
- title: ServerNameEnum.DOCKER as ServerServiceNameType,
+ title: ServerNameEnum.UPTIME as ServerServiceNameType,
  content: (
- <ServerDetailServicesTabPanelDocker
+ <ServerDetailServicesTabPanelUptime
  serverName={serverName}
- serverData={serverData}
+ serverData={serverData as ServerResponseType<UptimeData>}
  />
  ),
  },
@@ -90,15 +102,7 @@ export default function ServerDetailServicesTabPanel(
  />
  ),
  },
- {
- title: ServerNameEnum.UPTIME as ServerServiceNameType,
- content: (
- <ServerDetailServicesTabPanelUptime
- serverName={serverName}
- serverData={serverData}
- />
- ),
- },
+
  {
  title: ServerNameEnum.CUSTOM as ServerServiceNameType,
  content: (

web/src/server/ServerDetailServicesTabPanelDocker.tsx

@@ -1,19 +1,79 @@
 import React from "react";
-
+import {
+ DockerData,
+ ServerResponseType,
+ ServerServiceNameType,
+} from "./ServerType";
+import { getCoreRowModel } from "@tanstack/react-table";
+import { useVirtual } from "react-virtual";
+import Table from "common/Table";
+import useTable from "common/useTable";
 interface ServerDetailServicesTabPanelDockerType {
- serverName:
- | "disk"
- | "docker"
- | "uptime"
- | "memory"
- | "process"
- | "loadavg"
- | "tcp";
- serverData: Object | [];
+ serverName: ServerServiceNameType;
+ serverData: ServerResponseType<Array<DockerData>>;
 }
 
 export default function ServerDetailServicesTabPanelDocker(
  props: ServerDetailServicesTabPanelDockerType
 ) {
- return <div>{/* <ServicesTabPanel /> */}</div>;
+ const {
+ serverData: {
+ Message: { Data: data },
+ },
+ } = props;
+ const tableInstance = useTable({
+ data,
+ columns,
+ getCoreRowModel: getCoreRowModel(),
+ });
+
+ const tableContainerRef = React.useRef<HTMLDivElement>(null);
+
+ const { rows } = tableInstance.getRowModel();
+
+ const rowVirtualizer = useVirtual({
+ parentRef: tableContainerRef,
+ size: rows.length,
+ overscan: 10,
+ });
+ return (
+ <Table
+ ref={tableContainerRef}
+ variant="default"
+ virtualization
+ instance={tableInstance}
+ virtualizationInstance={rowVirtualizer}
+ />
+ );
 }
+
+const columns = [
+ {
+ header: "CPU",
+ accessorKey: "CPU",
+ },
+ {
+ header: "ContainerID",
+ accessorKey: "ContainerID",
+ },
+ {
+ header: "ContainerName",
+ accessorKey: "ContainerName",
+ },
+ {
+ header: "Limit",
+ accessorKey: "Limit",
+ },
+ {
+ header: "MemPercent",
+ accessorKey: "MemPercent",
+ },
+ {
+ header: "MemUsage",
+ accessorKey: "MemUsage",
+ },
+ {
+ header: "Pid",
+ accessorKey: "Pid",
+ },
+];

web/src/server/ServerDetailServicesTabPanelTCP.tsx

@@ -1,13 +1,13 @@
-import Table from 'common/Table';
-import useTable from 'common/useTable';
-import React, { useMemo } from 'react';
-import { getCoreRowModel } from '@tanstack/react-table';
+import Table from "common/Table";
+import useTable from "common/useTable";
+import React, { useMemo } from "react";
+import { getCoreRowModel } from "@tanstack/react-table";
 import {
  ServerResponseType,
  ServerServiceNameType,
  TCPData,
-} from './ServerType';
-import { useVirtual } from 'react-virtual';
+} from "./ServerType";
+import { useVirtual } from "react-virtual";
 
 interface ServerDetailServicesTabPanelTCPType {
  serverName: ServerServiceNameType;
@@ -55,7 +55,7 @@ export default function ServerDetailServicesTabPanelTCP(
  return (
  <Table
  ref={tableContainerRef}
- variant='default'
+ variant="default"
  virtualization
  instance={tableInstance}
  virtualizationInstance={rowVirtualizer}
@@ -65,11 +65,11 @@ export default function ServerDetailServicesTabPanelTCP(
 
 const columns = [
  {
- header: 'Port',
- accessorKey: 'Port',
+ header: "Port",
+ accessorKey: "Port",
  },
  {
- header: 'State',
- accessorKey: 'State',
+ header: "State",
+ accessorKey: "State",
  },
 ];

web/src/server/ServerDetailServicesTabPanelUptime.tsx

@@ -1,19 +1,68 @@
-import React from "react";
+import React, { useMemo } from "react";
+import { Chart as ChartJS, ArcElement, Tooltip, Legend } from "chart.js";
+import { Pie } from "react-chartjs-2";
+import {
+ ServerResponseType,
+ ServerServiceNameType,
+ UptimeData,
+} from "./ServerType";
+import Table from "common/Table";
+import useTable from "common/useTable";
+import { getCoreRowModel } from "@tanstack/react-table";
+import { useVirtual } from "react-virtual";
+import { toDaysMinutesSeconds } from "common/utils";
 
 interface ServerDetailServicesTabPanelUptimeType {
- serverName:
- | "disk"
- | "docker"
- | "uptime"
- | "memory"
- | "process"
- | "loadavg"
- | "tcp";
- serverData: Object | [];
+ serverName: ServerServiceNameType;
+ serverData: ServerResponseType<UptimeData>;
 }
 
+ChartJS.register(ArcElement, Tooltip, Legend);
+
 export default function ServerDetailServicesTabPanelUptime(
  props: ServerDetailServicesTabPanelUptimeType
 ) {
- return <div>{/* <ServicesTabPanel /> */}</div>;
+ const data = [props.serverData?.Message?.Data];
+
+ const tableInstance = useTable({
+ data,
+ columns,
+ getCoreRowModel: getCoreRowModel(),
+ });
+
+ const tableContainerRef = React.useRef<HTMLDivElement>(null);
+
+ const { rows } = tableInstance.getRowModel();
+
+ const rowVirtualizer = useVirtual({
+ parentRef: tableContainerRef,
+ size: rows.length,
+ overscan: 10,
+ });
+ return (
+ <div>
+ <Table
+ ref={tableContainerRef}
+ variant="default"
+ virtualization
+ instance={tableInstance}
+ virtualizationInstance={rowVirtualizer}
+ />
+ </div>
+ );
 }
+
+const columns = [
+ {
+ header: "Idle",
+ accessorFn: (row: UptimeData) => toDaysMinutesSeconds(row.Up),
+ },
+ {
+ header: "IdlePercent",
+ accessorFn: (row: UptimeData) => toDaysMinutesSeconds(row.IdlePercent),
+ },
+ {
+ header: "Up",
+ accessorFn: (row: UptimeData) => toDaysMinutesSeconds(row.Up),
+ },
+];

web/src/server/ServerType.tsx

@@ -10,10 +10,11 @@ export type ServerServiceNameType =
 export type ServerResponseMessageData =
  | Array<DiskData>
  | MemoryData
- | DockerData
+ | Array<DockerData>
  | UptimeData
- | ProcessData
- | LoadingAvgData;
+ | Array<ProcessData>
+ | LoadingAvgData
+ | TCPData;
 
 export interface ServerResponseType<T = ServerResponseMessageData> {
  Error: boolean;
@@ -62,9 +63,21 @@ export interface LoadingAvgData {
  Load15M: number;
 }
 
-export interface DockerData {}
+export interface DockerData {
+ CPU: 5.52;
+ ContainerID: "ab180d7dd324";
+ ContainerName: "fastmeet-fast-meet-1";
+ Limit: 7851.008;
+ MemPercent: 45.46;
+ MemUsage: 3568.64;
+ Pid: 148;
+}
 
-export interface UptimeData {}
+export interface UptimeData {
+ Idle: number;
+ IdlePercent: number;
+ Up: number;
+}
 
 export interface TCPData {
  Ports: Record<number, string>;