fix app and database monitor

labring · Mar 29, 2024 · f4d5a8d · f4d5a8d
1 parent 9a81357
commit f4d5a8d
Show file tree

Hide file tree

Showing 8 changed files with 83 additions and 51 deletions.
diff --git a/server/src/database/monitor/monitor.service.ts b/server/src/database/monitor/monitor.service.ts
@@ -33,9 +33,9 @@ export class DedicatedDatabaseMonitorService {
       user,
     )
     const dataSize = await this.query(
-      `sum(mongodb_dbstats_dataSize{pod=~"${dbName}-mongo.+"}) by (database)`,
+      `sum(mongodb_dbstats_dataSize{pod=~"${dbName}-mongo.+"}) by (pod)`,
       {
-        labels: ['database'],
+        labels: ['pod'],
       },
       user,
     )

diff --git a/web/src/pages/app/mods/StatusBar/MonitorBar/index.tsx b/web/src/pages/app/mods/StatusBar/MonitorBar/index.tsx
@@ -5,7 +5,7 @@ import { useQueries } from "@tanstack/react-query";
 import clsx from "clsx";
 
 import { MonitorIcon } from "@/components/CommonIcon";
-import { uniformCapacity, uniformCPU, uniformMemory } from "@/utils/format";
+import { uniformCapacity } from "@/utils/format";
 
 import { TInstantMonitorData } from "@/apis/typing";
 import { DedicatedDatabaseMonitorControllerGetResource } from "@/apis/v1/apps";
@@ -18,7 +18,7 @@ export const MonitorDataType = ["cpu", "memory"];
 export default function MonitorBar() {
   const { currentApp } = useGlobalStore();
   const { t } = useTranslation();
-  const { limitCPU, limitMemory, dedicatedDatabase } = currentApp.bundle.resource;
+  const { dedicatedDatabase } = currentApp.bundle.resource;
   let databaseCapacity = dedicatedDatabase.capacity;
 
   const [resources, setResources] = useState<any>([]);
@@ -52,13 +52,11 @@ export default function MonitorBar() {
   useEffect(() => {
     if (allDataLoaded) {
       const { cpu, memory } = instantMonitorData || {};
-      const databaseUsage = resourceData.dataSize.find(
-        (item: any) => item.metric.database === appid,
-      );
+      const database = resourceData.dataSize;
       const data = {
         cpu,
         memory,
-        database: databaseUsage ? [databaseUsage] : [],
+        database,
       };
       setInstantData(data);
     }
@@ -78,12 +76,12 @@ export default function MonitorBar() {
     setResources([
       {
         label: `CPU`,
-        percent: (uniformCPU(getAverage(instantData.cpu)) / limitCPU) * 100,
+        percent: getAverage(instantData.cpu) * 100,
         color: "#47C8BF",
       },
       {
         label: t("Spec.RAM"),
-        percent: (uniformMemory(getAverage(instantData.memory)) / limitMemory) * 100,
+        percent: getAverage(instantData.memory) * 100,
         color: "#8172D8",
       },
       {
@@ -116,7 +114,7 @@ export default function MonitorBar() {
           <MonitorIcon className="mr-1" />
           {t("SettingPanel.MonitorSetting") + " :"}
         </span>
-        <Center className="w-52 space-x-2">
+        <Center className="w-40 space-x-2">
           {resources.length !== 0 ? (
             resources.map((resource: any, index: number) => (
               <Tooltip key={index} label={`${resource.label}: ${resource.percent.toFixed(2)}%`}>

diff --git a/web/src/pages/app/setting/SysSetting/AppMonitor/AreaCard/index.tsx b/web/src/pages/app/setting/SysSetting/AppMonitor/AreaCard/index.tsx
@@ -92,6 +92,8 @@ export default function AreaCard(props: {
   maxValue: number;
   unit: string;
   className?: string;
+  longestTick: string;
+  onLongestTickChange: (val: string) => void;
 }) {
   const {
     data,
@@ -104,6 +106,8 @@ export default function AreaCard(props: {
     maxValue,
     unit,
     className,
+    longestTick,
+    onLongestTickChange,
   } = props;
   const [chartData, setChartData] = useState<any[]>([]);
   useEffect(() => {
@@ -112,17 +116,10 @@ export default function AreaCard(props: {
       data?.forEach((item, index) => {
         if (item.values) {
           const tempData = item.values.map((item) => {
-            if (title === "CPU") {
-              return {
-                xData: modifyTimestamp(item[0]),
-                [`value${index}`]: Number(item[1]),
-              };
-            } else {
-              return {
-                xData: modifyTimestamp(item[0]),
-                [`value${index}`]: Number(item[1]) / 1024 / 1024,
-              };
-            }
+            return {
+              xData: modifyTimestamp(item[0]),
+              [`value${index}`]: Number((Number(item[1]) * maxValue).toFixed(2)),
+            };
           });
           tempDataArray.push(tempData);
         }
@@ -132,20 +129,21 @@ export default function AreaCard(props: {
     if (!data[dataNumber - 1]?.values) return;
     setChartData(
       data[dataNumber - 1]?.values.map((item) => {
-        if (title === "CPU") {
-          return {
-            xData: item[0] * 1000,
-            value0: Number(item[1]),
-          };
-        } else {
-          return {
-            xData: item[0] * 1000,
-            value0: Number(item[1]) / 1024 / 1024,
-          };
-        }
+        return {
+          xData: item[0] * 1000,
+          value0: Number((Number(item[1]) * maxValue).toFixed(2)),
+        };
       }),
     );
-  }, [data, dataNumber, title]);
+  }, [data, dataNumber, title, maxValue]);
+
+  const tickFormatter = (val: string) => {
+    const formattedTick = val.toString();
+    if (longestTick.length < formattedTick.length) {
+      onLongestTickChange(formattedTick);
+    }
+    return val;
+  };
 
   return (
     <div className={className}>
@@ -178,7 +176,7 @@ export default function AreaCard(props: {
         )}
       </div>
       <ResponsiveContainer width="100%" height="100%">
-        <AreaChart data={chartData} margin={{ left: -28, top: 6 }} syncId="sync">
+        <AreaChart data={chartData} margin={{ top: 6 }} syncId="sync">
           <CartesianGrid stroke="#f5f5f5" vertical={false} />
           <XAxis
             dataKey="xData"
@@ -190,7 +188,12 @@ export default function AreaCard(props: {
             domain={[Date.now() - 60 * 60 * 1000, Date.now()]}
             stroke="#C0C2D2"
           />
-          <YAxis fontSize="10" stroke="#9CA2A8" />
+          <YAxis
+            fontSize="10"
+            stroke="#9CA2A8"
+            width={longestTick.length * 8 + 8}
+            tickFormatter={tickFormatter}
+          />
           <ReferenceLine
             y={maxValue}
             strokeDasharray="3 3"

diff --git a/web/src/pages/app/setting/SysSetting/AppMonitor/PieCard/index.tsx b/web/src/pages/app/setting/SysSetting/AppMonitor/PieCard/index.tsx
@@ -38,7 +38,9 @@ export default function PieCard(props: {
               ></span>
               <p>{entry.value}</p>
             </span>
-            <p className="ml-3 mt-1">{formatSize(pieData[index]?.value * 1024 * 1024)}</p>
+            <p className="text-nowrap ml-3 mt-1">
+              {formatSize(pieData[index]?.value * 1024 * 1024)}
+            </p>
           </div>
         ))}
       </ul>

diff --git a/web/src/pages/app/setting/SysSetting/AppMonitor/index.tsx b/web/src/pages/app/setting/SysSetting/AppMonitor/index.tsx
@@ -42,6 +42,8 @@ export default function AppMonitor() {
     return cpuData.length > memoryData.length ? [t("All"), ...cpuData] : [t("All"), ...memoryData];
   }, [monitorData, t]);
 
+  const [longestTick, setLongestTick] = useState("");
+
   return (
     <div className="flex w-full">
       {isLoading ? (
@@ -61,6 +63,8 @@ export default function AppMonitor() {
             unit="Core"
             maxValue={limitCPU / 1000}
             className="h-1/2 p-4"
+            longestTick={longestTick}
+            onLongestTickChange={(val) => setLongestTick(val)}
           />
           <AreaCard
             data={monitorData?.data?.memory}
@@ -72,6 +76,8 @@ export default function AppMonitor() {
             maxValue={limitMemory}
             dataNumber={dataNumber}
             className="h-1/2 p-4"
+            longestTick={longestTick}
+            onLongestTickChange={(val) => setLongestTick(val)}
           />
         </div>
       ) : (

diff --git a/web/src/pages/app/setting/SysSetting/DatabaseMonitor/AreaCard/index.tsx b/web/src/pages/app/setting/SysSetting/DatabaseMonitor/AreaCard/index.tsx
@@ -111,7 +111,8 @@ export default function AreaCard(props: {
   unit: string;
   className?: string;
   syncId: string;
-  tableMarginLeft: number;
+  longestTick: string;
+  onLongestTickChange: (val: string) => void;
 }) {
   const {
     data,
@@ -124,7 +125,8 @@ export default function AreaCard(props: {
     unit,
     className,
     syncId,
-    tableMarginLeft,
+    longestTick,
+    onLongestTickChange,
   } = props;
   const [chartData, setChartData] = useState<any[]>([]);
   useEffect(() => {
@@ -173,6 +175,14 @@ export default function AreaCard(props: {
     }
   }, [data, podName, title]);
 
+  const tickFormatter = (val: string) => {
+    const formattedTick = val.toString();
+    if (longestTick.length < formattedTick.length) {
+      onLongestTickChange(formattedTick);
+    }
+    return val;
+  };
+
   return (
     <div className={className}>
       <div className="mb-3 flex justify-between font-medium text-grayModern-900">
@@ -205,7 +215,7 @@ export default function AreaCard(props: {
       <ResponsiveContainer width="100%" height="100%">
         <AreaChart
           data={chartData}
-          margin={{ left: tableMarginLeft, top: 6 }}
+          margin={{ top: 6 }}
           {...(syncId !== "" ? { syncId: syncId } : {})}
         >
           <CartesianGrid stroke="#f5f5f5" vertical={false} />
@@ -219,7 +229,12 @@ export default function AreaCard(props: {
             domain={[Date.now() - 60 * 60 * 1000, Date.now()]}
             stroke="#C0C2D2"
           />
-          <YAxis fontSize="10" stroke="#9CA2A8" />
+          <YAxis
+            fontSize="10"
+            stroke="#9CA2A8"
+            width={longestTick.length * 8 + 8}
+            tickFormatter={tickFormatter}
+          />
 
           {maxValue !== 0 && (
             <ReferenceLine

diff --git a/web/src/pages/app/setting/SysSetting/DatabaseMonitor/PieCard/index.tsx b/web/src/pages/app/setting/SysSetting/DatabaseMonitor/PieCard/index.tsx
@@ -13,9 +13,8 @@ export default function PieCard(props: {
   appid?: string;
 }) {
   const { t } = useTranslation();
-  const { data, maxValue, title, colors, appid } = props;
-  const usedData =
-    uniformCapacity(data.find((item) => item.metric.database === appid)?.value[1]) || 0;
+  const { data, maxValue, title, colors } = props;
+  const usedData = uniformCapacity(data[0].value[1] || 0);
   const percentage = (usedData / maxValue) * 100;
   const pieData = useMemo(
     () =>
@@ -39,7 +38,7 @@ export default function PieCard(props: {
               ></span>
               <p>{entry.value}</p>
             </span>
-            <p className="ml-3 mt-1">{(pieData[index]?.value).toFixed(3)} MB</p>
+            <p className="text-nowrap ml-3 mt-1">{(pieData[index]?.value).toFixed(3)} MB</p>
           </div>
         ))}
       </ul>

diff --git a/web/src/pages/app/setting/SysSetting/DatabaseMonitor/index.tsx b/web/src/pages/app/setting/SysSetting/DatabaseMonitor/index.tsx
@@ -76,6 +76,9 @@ export default function DatabaseMonitor() {
     return [t("All"), ...uniquePods];
   }, [cpuData, memoryData, t]);
 
+  const [longestTick, setLongestTick] = useState("");
+  const [longestTick1, setLongestTick1] = useState("");
+
   return (
     <Tabs variant="enclosed" isLazy={true}>
       <TabList>
@@ -107,7 +110,8 @@ export default function DatabaseMonitor() {
                     maxValue={limitCPU / 1000}
                     className="h-1/3 p-4"
                     syncId="tab1"
-                    tableMarginLeft={-28}
+                    longestTick={longestTick}
+                    onLongestTickChange={(val) => setLongestTick(val)}
                   />
                   <AreaCard
                     data={resourceData?.data?.memory}
@@ -120,7 +124,8 @@ export default function DatabaseMonitor() {
                     podName={podName}
                     className="h-1/3 p-4"
                     syncId="tab1"
-                    tableMarginLeft={-28}
+                    longestTick={longestTick}
+                    onLongestTickChange={(val) => setLongestTick(val)}
                   />
                   <AreaCard
                     data={connectionData?.data?.connections}
@@ -133,7 +138,8 @@ export default function DatabaseMonitor() {
                     podName={podName}
                     className="h-1/3 p-4"
                     syncId="tab1"
-                    tableMarginLeft={-28}
+                    longestTick={longestTick}
+                    onLongestTickChange={(val) => setLongestTick(val)}
                   />
                 </div>
 
@@ -194,7 +200,8 @@ export default function DatabaseMonitor() {
                   maxValue={0}
                   className="h-1/3 p-4"
                   syncId=""
-                  tableMarginLeft={-25}
+                  longestTick={longestTick1}
+                  onLongestTickChange={(val) => setLongestTick1(val)}
                 />
                 <AreaCard
                   data={performanceData?.data?.queryOperations}
@@ -207,7 +214,8 @@ export default function DatabaseMonitor() {
                   podName={podName}
                   className="h-1/3 p-4"
                   syncId=""
-                  tableMarginLeft={-26}
+                  longestTick={longestTick1}
+                  onLongestTickChange={(val) => setLongestTick1(val)}
                 />
                 <AreaCard
                   data={performanceData?.data?.pageFaults}
@@ -220,7 +228,8 @@ export default function DatabaseMonitor() {
                   podName={podName}
                   className="h-1/3 p-4"
                   syncId=""
-                  tableMarginLeft={-25}
+                  longestTick={longestTick1}
+                  onLongestTickChange={(val) => setLongestTick1(val)}
                 />
               </div>
             ) : (