feat(web): cpu and memory monitor support "all" option (#1670)

* feat(web): cpu and memory monitor support all pods option * tooltip opacity & i18n & prettier * delete * delete * add : at tooltip
labring · Nov 10, 2023 · b2fdf04 · b2fdf04
1 parent 619988e
commit b2fdf04
Show file tree

Hide file tree

Showing 13 changed files with 153 additions and 54 deletions.
diff --git a/web/public/locales/en/translation.json b/web/public/locales/en/translation.json
@@ -689,5 +689,6 @@
     "Export": "Export",
     "logs": "Logs"
   },
-  "Deprecated": "Deprecated"
+  "Deprecated": "Deprecated",
+  "All": "All"
 }
diff --git a/web/public/locales/zh-CN/translation.json b/web/public/locales/zh-CN/translation.json
@@ -689,5 +689,6 @@
     "Export": "导出",
     "logs": "日志"
   },
-  "Deprecated": "已弃用"
+  "Deprecated": "已弃用",
+  "All": "全部"
 }
diff --git a/web/public/locales/zh/translation.json b/web/public/locales/zh/translation.json
@@ -689,5 +689,6 @@
     "Export": "导出",
     "logs": "日志"
   },
-  "Deprecated": "已弃用"
+  "Deprecated": "已弃用",
+  "All": "全部"
 }
diff --git a/web/src/components/CommonIcon/index.tsx b/web/src/components/CommonIcon/index.tsx
@@ -744,20 +744,10 @@ export const CommonSettingIcon = createIcon({
 
 export const OldLogsIcon = () => {
   return (
-    <svg
-      viewBox="0 0 1024 1024"
-      xmlns="http://www.w3.org/2000/svg"
-      width="16px"
-      height="14px"
-    >
-      <path
-        d="M984.423317 1024H39.576683v-887.736753h270.458004v78.333313H117.909996v731.070127h788.180008v-731.070127H713.965313v-78.333313h270.458004v887.736753z"
-      />
-      <path
-        d="M730.170517 279.466335h-436.341034V70.916128h162.064281v78.333313h-83.730968v51.883581h279.674408v-51.883581h-82.923156v-78.333313h161.256469v208.550207z"
-      />
-      <path d="M647.320799 135.320799h-78.333313a56.999725 56.999725 0 0 0-113.987211 0h-78.333313a135.333038 135.333038 0 0 1 270.653837 0zM255.076524 426.475933l256.710507-1.20927 0.369636 78.333313-256.710508 1.209271zM253.36543 654.952177h511.589974v78.333314H253.36543z"
-      />
+    <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="16px" height="14px">
+      <path d="M984.423317 1024H39.576683v-887.736753h270.458004v78.333313H117.909996v731.070127h788.180008v-731.070127H713.965313v-78.333313h270.458004v887.736753z" />
+      <path d="M730.170517 279.466335h-436.341034V70.916128h162.064281v78.333313h-83.730968v51.883581h279.674408v-51.883581h-82.923156v-78.333313h161.256469v208.550207z" />
+      <path d="M647.320799 135.320799h-78.333313a56.999725 56.999725 0 0 0-113.987211 0h-78.333313a135.333038 135.333038 0 0 1 270.653837 0zM255.076524 426.475933l256.710507-1.20927 0.369636 78.333313-256.710508 1.209271zM253.36543 654.952177h511.589974v78.333314H253.36543z" />
     </svg>
-  )
-}
+  );
+};
diff --git a/web/src/pages/app/functions/mods/ConsolePanel/index.tsx b/web/src/pages/app/functions/mods/ConsolePanel/index.tsx
@@ -30,13 +30,13 @@ function ConsolePanel() {
     });
   }, [currentFuncLogs]);
   const { commonSettings } = useCustomSettingStore();
-  
+
   return (
     <Panel className="flex-1">
       <Panel.Header title="Console" pageId="functionPage" panelId="ConsolePanel"></Panel.Header>
       <div
         className="text-sm relative flex flex-col overflow-y-auto px-2 font-mono"
-        style={{ height: "100%", fontSize: commonSettings.fontSize-1 }}
+        style={{ height: "100%", fontSize: commonSettings.fontSize - 1 }}
       >
         {logsArray && logsArray[0] !== "" ? (
           <LogViewer

diff --git a/web/src/pages/app/index.tsx b/web/src/pages/app/index.tsx
@@ -25,7 +25,7 @@ function AppDetail() {
           {
             pageId: Pages.storage,
             component: StoragePage,
-          }
+          },
         ].map((item) =>
           visitedViews.includes(item.pageId) ? (
             <div

diff --git a/web/src/pages/app/mods/StatusBar/LogsModal/index.scss b/web/src/pages/app/mods/StatusBar/LogsModal/index.scss
@@ -28,4 +28,4 @@
   [data-theme="dark"] & .pf-m-match {
     background: #2b7873 !important;
   }
-}
+}
diff --git a/web/src/pages/app/mods/StatusBar/MonitorBar/index.tsx b/web/src/pages/app/mods/StatusBar/MonitorBar/index.tsx
@@ -25,7 +25,7 @@ export default function MonitorBar() {
   const darkMode = useColorMode().colorMode === "dark";
 
   useQuery(
-    ["useGetMonitorDataQuery"],
+    ["useGetInstantMonitorDataQuery"],
     () => {
       return MonitorControllerGetData({
         q: MonitorDataType,

diff --git a/web/src/pages/app/setting/SysSetting/AppMonitor/AreaCard/index.tsx b/web/src/pages/app/setting/SysSetting/AppMonitor/AreaCard/index.tsx
@@ -1,5 +1,4 @@
 import { useEffect, useState } from "react";
-import { useTranslation } from "react-i18next";
 import { ChevronDownIcon } from "@chakra-ui/icons";
 import { Menu, MenuButton, MenuItemOption, MenuList } from "@chakra-ui/react";
 import clsx from "clsx";
@@ -18,13 +17,59 @@ import { formatDate } from "@/utils/format";
 
 import { TCpuUsageData } from "@/apis/typing";
 
+const strokeColorArray = [
+  "#47C8BF",
+  "#9A8EE0",
+  "#FFA100",
+  "#FF4D4F",
+  "#52C41A",
+  "#1890FF",
+  "#FF7A45",
+  "#FFC53D",
+  "#FF85C0",
+  "#A0D911",
+  "#13C2C2",
+  "#2F54EB",
+  "#EB2F96",
+  "#F5222D",
+  "#FAAD14",
+  "#722ED1",
+  "#13C2C2",
+  "#1890FF",
+  "#722ED1",
+  "#FAAD14",
+];
+
+function mergeArrays(arrays: any) {
+  let mergedArray = [];
+  const maxLength = Math.max(...arrays.map((arr: any) => arr.length));
+  for (let i = 0; i < maxLength; i++) {
+    let mergedElement = { xData: 0 };
+    for (let j = 0; j < arrays.length; j++) {
+      if (i < arrays[j].length) {
+        mergedElement.xData = arrays[j][i].xData;
+        // @ts-ignore
+        mergedElement[`value${j}`] = arrays[j][i][`value${j}`];
+      }
+    }
+    mergedArray.push(mergedElement);
+  }
+
+  return mergedArray;
+}
+
+function extractNumber(str: string) {
+  const match = str.match(/\d+$/) || [];
+  return Number(match[0]);
+}
+
 export default function AreaCard(props: {
   data: TCpuUsageData;
   strokeColor: string;
   fillColor: string;
   setDataNumber?: (value: number) => void;
   dataNumber: number;
-  podsArray?: string[];
+  podsArray: string[];
   title: string;
   maxValue: number;
   unit: string;
@@ -42,12 +87,33 @@ export default function AreaCard(props: {
     unit,
     className,
   } = props;
-  const { t } = useTranslation();
   const [chartData, setChartData] = useState<any[]>([]);
   useEffect(() => {
-    if (!data[dataNumber]?.values) return;
+    if (dataNumber === 0) {
+      let tempDataArray: any = [];
+      data?.forEach((item, index) => {
+        if (item.values) {
+          const tempData = item.values.map((item) => {
+            if (title === "CPU") {
+              return {
+                xData: item[0] * 1000,
+                [`value${index}`]: Number(item[1]),
+              };
+            } else {
+              return {
+                xData: item[0] * 1000,
+                [`value${index}`]: Number(item[1]) / 1024 / 1024,
+              };
+            }
+          });
+          tempDataArray.push(tempData);
+        }
+      });
+      setChartData(mergeArrays(tempDataArray));
+    }
+    if (!data[dataNumber - 1]?.values) return;
     setChartData(
-      data[dataNumber]?.values.map((item) => {
+      data[dataNumber - 1]?.values.map((item) => {
         if (title === "CPU") {
           return {
             xData: item[0] * 1000,
@@ -84,7 +150,7 @@ export default function AreaCard(props: {
                   onClick={() => setDataNumber(index)}
                   className="!px-0 !text-grayModern-600"
                 >
-                  {t("Pod") + ": " + pod}
+                  {pod}
                 </MenuItemOption>
               ))}
             </MenuList>
@@ -112,18 +178,49 @@ export default function AreaCard(props: {
             label={maxValue + " " + unit}
             ifOverflow="extendDomain"
           />
-          <Tooltip
-            formatter={(value) => [Number(value).toFixed(3) + " " + unit]}
-            labelFormatter={(value) => formatDate(new Date(value)).split(" ")[1]}
-            labelStyle={{ color: "#24282C" }}
-          />
-          <Area
-            type="monotone"
-            dataKey="value"
-            stroke={strokeColor}
-            fill={fillColor}
-            strokeWidth={2}
-          />
+          {dataNumber === 0 ? (
+            <>
+              <Tooltip
+                formatter={(value, index) => [
+                  podsArray[extractNumber(index as string) + 1] +
+                    ": " +
+                    Number(value).toFixed(3) +
+                    unit,
+                ]}
+                labelFormatter={(value) => formatDate(new Date(value)).split(" ")[1]}
+                labelStyle={{ color: "#24282C" }}
+                contentStyle={{ fontFamily: "Consolas", opacity: 0.75 }}
+              />
+              {data?.map((item, index) => {
+                return (
+                  <Area
+                    key={index}
+                    type="monotone"
+                    dataKey={`value${index}`}
+                    stroke={strokeColorArray[index]}
+                    fill={fillColor}
+                    strokeWidth={2}
+                  />
+                );
+              })}
+            </>
+          ) : (
+            <>
+              <Tooltip
+                formatter={(value, index) => [Number(value).toFixed(3) + unit]}
+                labelFormatter={(value) => formatDate(new Date(value)).split(" ")[1]}
+                labelStyle={{ color: "#24282C" }}
+                contentStyle={{ fontFamily: "Consolas", opacity: 0.75 }}
+              />
+              <Area
+                type="monotone"
+                dataKey="value"
+                stroke={strokeColor}
+                fill={fillColor}
+                strokeWidth={2}
+              />
+            </>
+          )}
         </AreaChart>
       </ResponsiveContainer>
     </div>

diff --git a/web/src/pages/app/setting/SysSetting/AppMonitor/index.tsx b/web/src/pages/app/setting/SysSetting/AppMonitor/index.tsx
@@ -1,6 +1,6 @@
 import { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Center } from "@chakra-ui/react";
+import { Center, Spinner } from "@chakra-ui/react";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 
 import { ErrorIcon } from "@/components/CommonIcon";
@@ -21,7 +21,7 @@ export default function AppMonitor() {
   const [dataNumber, setDataNumber] = useState(0);
   const queryClient = useQueryClient();
 
-  const { data: monitorData } = useQuery(
+  const { isLoading, data: monitorData } = useQuery(
     ["useGetMonitorDataQuery"],
     () => {
       return MonitorControllerGetData({
@@ -36,15 +36,19 @@ export default function AppMonitor() {
   );
 
   const podsArray = useMemo(() => {
-    return monitorData?.data?.cpuUsage?.map((item: any) => item.metric.pod).length >
-      monitorData?.data?.memoryUsage?.map((item: any) => item.metric.pod).length
-      ? monitorData?.data?.cpuUsage?.map((item: any) => item.metric.pod)
-      : monitorData?.data?.memoryUsage?.map((item: any) => item.metric.pod);
-  }, [monitorData?.data?.cpuUsage, monitorData?.data?.memoryUsage]);
+    const cpuData = monitorData?.data?.cpuUsage?.map((item: any) => item.metric.pod);
+    const memoryData = monitorData?.data?.memoryUsage?.map((item: any) => item.metric.pod);
+    if (!cpuData) return [t("All")];
+    return cpuData.length > memoryData.length ? [t("All"), ...cpuData] : [t("All"), ...memoryData];
+  }, [monitorData, t]);
 
   return (
     <div className="flex w-full">
-      {monitorData?.data && Object.keys(monitorData?.data).length !== 0 ? (
+      {isLoading ? (
+        <Center className="h-[400px] w-full">
+          <Spinner />
+        </Center>
+      ) : monitorData?.data && Object.keys(monitorData?.data).length !== 0 ? (
         <>
           <div className="mr-4 mt-10 h-[413px] w-full rounded-xl border bg-[#F8FAFB] pb-4">
             <AreaCard
@@ -65,6 +69,7 @@ export default function AppMonitor() {
               fillColor="#F2F1FB"
               title={t("Spec.RAM")}
               unit="MB"
+              podsArray={podsArray}
               maxValue={limitMemory}
               dataNumber={dataNumber}
               className="h-1/2 p-4"

diff --git a/web/src/pages/app/setting/SysSetting/index.tsx b/web/src/pages/app/setting/SysSetting/index.tsx
@@ -64,7 +64,7 @@ export default function SysSetting(props: {
               name: t("SettingPanel.OldLogs"),
               component: <LogsPage />,
               icon: <OldLogsIcon />,
-              status: t("Deprecated")
+              status: t("Deprecated"),
             },
           ],
         },

diff --git a/web/src/pages/app/setting/index.tsx b/web/src/pages/app/setting/index.tsx
@@ -119,7 +119,11 @@ const SettingModal = (props: {
                               <span className="flex">
                                 <span className="flex items-center pr-2 ">{tab.icon}</span>
                                 {tab.name}
-                                {tab?.status && <span className="border rounded-full px-1 text-red-300 border-red-300 scale-75 ml-4">{tab.status}</span>}
+                                {tab?.status && (
+                                  <span className="ml-4 scale-75 rounded-full border border-red-300 px-1 text-red-300">
+                                    {tab.status}
+                                  </span>
+                                )}
                               </span>
                             </SectionList.Item>
                           );

diff --git a/web/src/utils/handleData.ts b/web/src/utils/handleData.ts
@@ -1,4 +1,4 @@
-import pako from 'pako';
+import pako from "pako";
 
 function uint8ArrayToBase64(buffer: Iterable<number>) {
   let binary = "";
@@ -30,4 +30,4 @@ export function decodeData(data: string) {
   const base64Decoded = base64ToUint8Array(data);
   const restored = pako.ungzip(base64Decoded, { to: "string" });
   return restored;
-}
+}