feat: add <UpDownCounter />

src/client/components/UpDownCounter.tsx

@@ -0,0 +1,22 @@
+import { CaretDownOutlined, CaretUpOutlined } from '@ant-design/icons';
+import React from 'react';
+
+interface Props {
+  up: string;
+  down: string;
+}
+export const UpDownCounter: React.FC<Props> = React.memo((props) => {
+  return (
+    <div>
+      <div>
+        <CaretUpOutlined className="text-orange-500" />
+        <span className="ml-1">{props.up}</span>
+      </div>
+      <div>
+        <CaretDownOutlined className="text-green-500" />
+        <span className="ml-1">{props.down}</span>
+      </div>
+    </div>
+  );
+});
+UpDownCounter.displayName = 'UpDownCounter';

src/client/pages/Servers.tsx

@@ -6,6 +6,7 @@ import { ServerStatusInfo } from '../../types';
 import { useSocketSubscribe } from '../api/socketio';
 import { filesize } from 'filesize';
 import prettyMilliseconds from 'pretty-ms';
+import { UpDownCounter } from '../components/UpDownCounter';
 
 export const Servers: React.FC = React.memo(() => {
   const [isModalOpen, setIsModalOpen] = useState(false);
@@ -49,20 +50,6 @@ export const Servers: React.FC = React.memo(() => {
 });
 Servers.displayName = 'Servers';
 
-interface ServerInfoRecordType {
-  status: 'online' | 'offline';
-  nodeName: string;
-  type: string; // KVM | Hyper-V
-  location: string;
-  uptime: number; // second
-  load: number;
-  network: string;
-  traffic: string;
-  cpu: string;
-  ram: string;
-  hdd: string;
-}
-
 export const ServerList: React.FC = React.memo(() => {
   const serverMap = useSocketSubscribe<Record<string, ServerStatusInfo>>(
     'onServerStatusUpdate',
@@ -71,8 +58,6 @@ export const ServerList: React.FC = React.memo(() => {
 
   const dataSource = Object.values(serverMap);
 
-  console.log('dataSource', dataSource);
-
   const columns = useMemo((): ColumnsType<ServerStatusInfo> => {
     return [
       {
@@ -109,18 +94,24 @@ export const ServerList: React.FC = React.memo(() => {
         key: 'nework',
         title: 'Network',
         render: (_, record) => {
-          return `${filesize(record.payload.network_in)} | ${filesize(
+          return (
-            record.payload.network_out
+            <UpDownCounter
-          )}`;
+              up={filesize(record.payload.network_out)}
+              down={filesize(record.payload.network_in)}
+            />
+          );
         },
       },
       {
         key: 'traffic',
         title: 'Traffic',
         render: (_, record) => {
-          return `${filesize(record.payload.network_rx)}/s | ${filesize(
+          return (
-            record.payload.network_tx
+            <UpDownCounter
-          )}/s`;
+              up={filesize(record.payload.network_tx) + '/s'}
+              down={filesize(record.payload.network_rx) + '/s'}
+            />
+          );
         },
       },
       {