From f2b20c5ef9a8d46aecb51b7c33720831c4e1ddf6 Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Mon, 22 Jul 2024 00:16:36 +0800
Subject: [PATCH] feat: add colorized text for server status which help user
 find problem

---
 .../components/server/ColorizedText.tsx       | 23 +++++++++++++
 src/client/components/server/ServerList.tsx   | 33 +++++++++++++++----
 2 files changed, 49 insertions(+), 7 deletions(-)
 create mode 100644 src/client/components/server/ColorizedText.tsx

diff --git a/src/client/components/server/ColorizedText.tsx b/src/client/components/server/ColorizedText.tsx
new file mode 100644
index 0000000..2575a2d
--- /dev/null
+++ b/src/client/components/server/ColorizedText.tsx
@@ -0,0 +1,23 @@
+import { cn } from '@/utils/style';
+import React, { PropsWithChildren } from 'react';
+
+interface ColorizedTextProps extends PropsWithChildren {
+  className?: string;
+  percent: number;
+}
+export const ColorizedText: React.FC<ColorizedTextProps> = React.memo(
+  (props) => {
+    return (
+      <span
+        className={cn(props.className, {
+          'text-yellow-500': props.percent > 0.8,
+          'text-red-600': props.percent >= 0.9,
+          'text-red-900': props.percent >= 0.99,
+        })}
+      >
+        {props.children}
+      </span>
+    );
+  }
+);
+ColorizedText.displayName = 'ColorizedText';
diff --git a/src/client/components/server/ServerList.tsx b/src/client/components/server/ServerList.tsx
index 172f84e..418dbda 100644
--- a/src/client/components/server/ServerList.tsx
+++ b/src/client/components/server/ServerList.tsx
@@ -15,6 +15,7 @@ import { UpDownCounter } from '../UpDownCounter';
 import { ScrollArea, ScrollBar } from '../ui/scroll-area';
 import { ServerRowExpendView } from './ServerRowExpendView';
 import { FaDocker } from 'react-icons/fa';
+import { ColorizedText } from './ColorizedText';
 
 const columnHelper = createColumnHelper<ServerStatusInfo>();
 
@@ -119,7 +120,11 @@ export const ServerList: React.FC<ServerListProps> = React.memo((props) => {
       columnHelper.accessor('payload.cpu', {
         header: 'CPU',
         size: 80,
-        cell: (props) => `${props.getValue()}%`,
+        cell: (props) => (
+          <ColorizedText percent={props.getValue() / 100}>
+            {props.getValue()}%
+          </ColorizedText>
+        ),
       }),
       columnHelper.display({
         header: 'RAM',
@@ -127,9 +132,16 @@ export const ServerList: React.FC<ServerListProps> = React.memo((props) => {
         cell: (props) => (
           <div className="text-xs">
             <div>
-              {filesize(props.row.original.payload.memory_used * 1024, {
-                base: 2,
-              })}{' '}
+              <ColorizedText
+                percent={
+                  props.row.original.payload.memory_used /
+                  props.row.original.payload.memory_total
+                }
+              >
+                {filesize(props.row.original.payload.memory_used * 1024, {
+                  base: 2,
+                })}
+              </ColorizedText>{' '}
               /{' '}
             </div>
             <div>
@@ -146,9 +158,16 @@ export const ServerList: React.FC<ServerListProps> = React.memo((props) => {
         cell: (props) => (
           <div className="text-xs">
             <div>
-              {filesize(props.row.original.payload.hdd_used * 1024 * 1024, {
-                base: 2,
-              })}{' '}
+              <ColorizedText
+                percent={
+                  props.row.original.payload.hdd_used /
+                  props.row.original.payload.hdd_total
+                }
+              >
+                {filesize(props.row.original.payload.hdd_used * 1024 * 1024, {
+                  base: 2,
+                })}
+              </ColorizedText>{' '}
               /{' '}
             </div>
             <div>