Skip to content

Commit 0d9b305

Browse files
silvarealsilvareal
committed
FEAT: docker and utime table
1 parent c3f6aae commit 0d9b305

6 files changed

+198
-50
lines changed

‎web/src/common/utils.tsx

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
function makeHumanReadable(
2+
num: number,
3+
singular: "second" | "minute" | "hour" | "day"
4+
) {
5+
return num > 0
6+
? num + (num === 1 ? ` ${singular}, ` : ` ${singular}s, `)
7+
: "";
8+
}
9+
10+
export function toDaysMinutesSeconds(totalSeconds: number) {
11+
const seconds = Math.floor(totalSeconds % 60);
12+
const minutes = Math.floor((totalSeconds % 3600) / 60);
13+
const hours = Math.floor((totalSeconds % (3600 * 24)) / 3600);
14+
const days = Math.floor(totalSeconds / (3600 * 24));
15+
16+
const secondsStr = makeHumanReadable(seconds, "second");
17+
const minutesStr = makeHumanReadable(minutes, "minute");
18+
const hoursStr = makeHumanReadable(hours, "hour");
19+
const daysStr = makeHumanReadable(days, "day");
20+
21+
return `${daysStr}${hoursStr}${minutesStr}${secondsStr}`.replace(/,\s*$/, "");
22+
}

‎web/src/server/ServerDetailServicesTabPanel.tsx

Lines changed: 16 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,14 @@ import ServerDetailServicesTabPanelTCP from "./ServerDetailServicesTabPanelTCP";
1111
import ServerDetailServicesTabPanelUptime from "./ServerDetailServicesTabPanelUptime";
1212
import {
1313
DiskData,
14+
DockerData,
1415
LoadingAvgData,
1516
MemoryData,
1617
ProcessData,
1718
ServerResponseType,
1819
ServerServiceNameType,
1920
TCPData,
21+
UptimeData,
2022
} from "./ServerType";
2123

2224
interface ServerDetailServicesTabPanelType {
@@ -36,6 +38,15 @@ export default function ServerDetailServicesTabPanel(
3638

3739
const servicesTabPanel: servicesTabPanelType[] = useMemo(
3840
() => [
41+
{
42+
title: ServerNameEnum.DOCKER as ServerServiceNameType,
43+
content: (
44+
<ServerDetailServicesTabPanelDocker
45+
serverName={serverName}
46+
serverData={serverData as ServerResponseType<Array<DockerData>>}
47+
/>
48+
),
49+
},
3950
{
4051
title: ServerNameEnum.DISK as ServerServiceNameType,
4152
content: (
@@ -45,12 +56,13 @@ export default function ServerDetailServicesTabPanel(
4556
/>
4657
),
4758
},
59+
4860
{
49-
title: ServerNameEnum.DOCKER as ServerServiceNameType,
61+
title: ServerNameEnum.UPTIME as ServerServiceNameType,
5062
content: (
51-
<ServerDetailServicesTabPanelDocker
63+
<ServerDetailServicesTabPanelUptime
5264
serverName={serverName}
53-
serverData={serverData}
65+
serverData={serverData as ServerResponseType<UptimeData>}
5466
/>
5567
),
5668
},
@@ -90,15 +102,7 @@ export default function ServerDetailServicesTabPanel(
90102
/>
91103
),
92104
},
93-
{
94-
title: ServerNameEnum.UPTIME as ServerServiceNameType,
95-
content: (
96-
<ServerDetailServicesTabPanelUptime
97-
serverName={serverName}
98-
serverData={serverData}
99-
/>
100-
),
101-
},
105+
102106
{
103107
title: ServerNameEnum.CUSTOM as ServerServiceNameType,
104108
content: (

‎web/src/server/ServerDetailServicesTabPanelDocker.tsx

Lines changed: 71 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,79 @@
11
import React from "react";
2-
2+
import {
3+
DockerData,
4+
ServerResponseType,
5+
ServerServiceNameType,
6+
} from "./ServerType";
7+
import { getCoreRowModel } from "@tanstack/react-table";
8+
import { useVirtual } from "react-virtual";
9+
import Table from "common/Table";
10+
import useTable from "common/useTable";
311
interface ServerDetailServicesTabPanelDockerType {
4-
serverName:
5-
| "disk"
6-
| "docker"
7-
| "uptime"
8-
| "memory"
9-
| "process"
10-
| "loadavg"
11-
| "tcp";
12-
serverData: Object | [];
12+
serverName: ServerServiceNameType;
13+
serverData: ServerResponseType<Array<DockerData>>;
1314
}
1415

1516
export default function ServerDetailServicesTabPanelDocker(
1617
props: ServerDetailServicesTabPanelDockerType
1718
) {
18-
return <div>{/* <ServicesTabPanel /> */}</div>;
19+
const {
20+
serverData: {
21+
Message: { Data: data },
22+
},
23+
} = props;
24+
const tableInstance = useTable({
25+
data,
26+
columns,
27+
getCoreRowModel: getCoreRowModel(),
28+
});
29+
30+
const tableContainerRef = React.useRef<HTMLDivElement>(null);
31+
32+
const { rows } = tableInstance.getRowModel();
33+
34+
const rowVirtualizer = useVirtual({
35+
parentRef: tableContainerRef,
36+
size: rows.length,
37+
overscan: 10,
38+
});
39+
return (
40+
<Table
41+
ref={tableContainerRef}
42+
variant="default"
43+
virtualization
44+
instance={tableInstance}
45+
virtualizationInstance={rowVirtualizer}
46+
/>
47+
);
1948
}
49+
50+
const columns = [
51+
{
52+
header: "CPU",
53+
accessorKey: "CPU",
54+
},
55+
{
56+
header: "ContainerID",
57+
accessorKey: "ContainerID",
58+
},
59+
{
60+
header: "ContainerName",
61+
accessorKey: "ContainerName",
62+
},
63+
{
64+
header: "Limit",
65+
accessorKey: "Limit",
66+
},
67+
{
68+
header: "MemPercent",
69+
accessorKey: "MemPercent",
70+
},
71+
{
72+
header: "MemUsage",
73+
accessorKey: "MemUsage",
74+
},
75+
{
76+
header: "Pid",
77+
accessorKey: "Pid",
78+
},
79+
];

‎web/src/server/ServerDetailServicesTabPanelTCP.tsx

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
1-
import Table from 'common/Table';
2-
import useTable from 'common/useTable';
3-
import React, { useMemo } from 'react';
4-
import { getCoreRowModel } from '@tanstack/react-table';
1+
import Table from "common/Table";
2+
import useTable from "common/useTable";
3+
import React, { useMemo } from "react";
4+
import { getCoreRowModel } from "@tanstack/react-table";
55
import {
66
ServerResponseType,
77
ServerServiceNameType,
88
TCPData,
9-
} from './ServerType';
10-
import { useVirtual } from 'react-virtual';
9+
} from "./ServerType";
10+
import { useVirtual } from "react-virtual";
1111

1212
interface ServerDetailServicesTabPanelTCPType {
1313
serverName: ServerServiceNameType;
@@ -55,7 +55,7 @@ export default function ServerDetailServicesTabPanelTCP(
5555
return (
5656
<Table
5757
ref={tableContainerRef}
58-
variant='default'
58+
variant="default"
5959
virtualization
6060
instance={tableInstance}
6161
virtualizationInstance={rowVirtualizer}
@@ -65,11 +65,11 @@ export default function ServerDetailServicesTabPanelTCP(
6565

6666
const columns = [
6767
{
68-
header: 'Port',
69-
accessorKey: 'Port',
68+
header: "Port",
69+
accessorKey: "Port",
7070
},
7171
{
72-
header: 'State',
73-
accessorKey: 'State',
72+
header: "State",
73+
accessorKey: "State",
7474
},
7575
];

‎web/src/server/ServerDetailServicesTabPanelUptime.tsx

Lines changed: 60 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,68 @@
1-
import React from "react";
1+
import React, { useMemo } from "react";
2+
import { Chart as ChartJS, ArcElement, Tooltip, Legend } from "chart.js";
3+
import { Pie } from "react-chartjs-2";
4+
import {
5+
ServerResponseType,
6+
ServerServiceNameType,
7+
UptimeData,
8+
} from "./ServerType";
9+
import Table from "common/Table";
10+
import useTable from "common/useTable";
11+
import { getCoreRowModel } from "@tanstack/react-table";
12+
import { useVirtual } from "react-virtual";
13+
import { toDaysMinutesSeconds } from "common/utils";
214

315
interface ServerDetailServicesTabPanelUptimeType {
4-
serverName:
5-
| "disk"
6-
| "docker"
7-
| "uptime"
8-
| "memory"
9-
| "process"
10-
| "loadavg"
11-
| "tcp";
12-
serverData: Object | [];
16+
serverName: ServerServiceNameType;
17+
serverData: ServerResponseType<UptimeData>;
1318
}
1419

20+
ChartJS.register(ArcElement, Tooltip, Legend);
21+
1522
export default function ServerDetailServicesTabPanelUptime(
1623
props: ServerDetailServicesTabPanelUptimeType
1724
) {
18-
return <div>{/* <ServicesTabPanel /> */}</div>;
25+
const data = [props.serverData?.Message?.Data];
26+
27+
const tableInstance = useTable({
28+
data,
29+
columns,
30+
getCoreRowModel: getCoreRowModel(),
31+
});
32+
33+
const tableContainerRef = React.useRef<HTMLDivElement>(null);
34+
35+
const { rows } = tableInstance.getRowModel();
36+
37+
const rowVirtualizer = useVirtual({
38+
parentRef: tableContainerRef,
39+
size: rows.length,
40+
overscan: 10,
41+
});
42+
return (
43+
<div>
44+
<Table
45+
ref={tableContainerRef}
46+
variant="default"
47+
virtualization
48+
instance={tableInstance}
49+
virtualizationInstance={rowVirtualizer}
50+
/>
51+
</div>
52+
);
1953
}
54+
55+
const columns = [
56+
{
57+
header: "Idle",
58+
accessorFn: (row: UptimeData) => toDaysMinutesSeconds(row.Up),
59+
},
60+
{
61+
header: "IdlePercent",
62+
accessorFn: (row: UptimeData) => toDaysMinutesSeconds(row.IdlePercent),
63+
},
64+
{
65+
header: "Up",
66+
accessorFn: (row: UptimeData) => toDaysMinutesSeconds(row.Up),
67+
},
68+
];

‎web/src/server/ServerType.tsx

Lines changed: 18 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,11 @@ export type ServerServiceNameType =
1010
export type ServerResponseMessageData =
1111
| Array<DiskData>
1212
| MemoryData
13-
| DockerData
13+
| Array<DockerData>
1414
| UptimeData
15-
| ProcessData
16-
| LoadingAvgData;
15+
| Array<ProcessData>
16+
| LoadingAvgData
17+
| TCPData;
1718

1819
export interface ServerResponseType<T = ServerResponseMessageData> {
1920
Error: boolean;
@@ -62,9 +63,21 @@ export interface LoadingAvgData {
6263
Load15M: number;
6364
}
6465

65-
export interface DockerData {}
66+
export interface DockerData {
67+
CPU: 5.52;
68+
ContainerID: "ab180d7dd324";
69+
ContainerName: "fastmeet-fast-meet-1";
70+
Limit: 7851.008;
71+
MemPercent: 45.46;
72+
MemUsage: 3568.64;
73+
Pid: 148;
74+
}
6675

67-
export interface UptimeData {}
76+
export interface UptimeData {
77+
Idle: number;
78+
IdlePercent: number;
79+
Up: number;
80+
}
6881

6982
export interface TCPData {
7083
Ports: Record<number, string>;

0 commit comments

Comments
 (0)