add gpu resource (#5331)

Author: zjy365

frontend/desktop/src/api/platform.ts

@@ -92,6 +92,7 @@ export const getResource = () => {
       totalMemory: string;
       totalStorage: string;
       runningPodCount: string;
+      totalGpuCount: string;
       totalPodCount: string;
     }>
   >('/api/desktop/getResource');

frontend/desktop/src/components/desktop_content/monitor.tsx

@@ -3,41 +3,55 @@ import { Box, CircularProgress, CircularProgressLabel, Flex, Text } from '@chakr
 import { MonitorIcon } from '@sealos/ui';
 import { useQuery } from '@tanstack/react-query';
 import { useTranslation } from 'next-i18next';
-import { CpuIcon, FlowIcon, MemoryIcon, StorageIcon } from '../icons';
+import { CpuIcon, FlowIcon, GpuIcon, MemoryIcon, StorageIcon } from '../icons';
 import { blurBackgroundStyles } from './index';
+import { useMemo } from 'react';
 
 export default function Monitor({ needStyles = true }: { needStyles?: boolean }) {
   const { t } = useTranslation();
   const { data } = useQuery(['getResource'], getResource, {
     staleTime: 60 * 1000
   });
 
-  const info = [
-    {
-      label: 'CPU',
-      value: data?.data?.totalCpu,
-      icon: <CpuIcon />,
-      unit: 'C'
-    },
-    {
-      label: t('common:memory'),
-      value: data?.data?.totalMemory,
-      icon: <MemoryIcon />,
-      unit: 'GB'
-    },
-    {
-      label: t('common:storage'),
-      value: data?.data?.totalStorage,
-      icon: <StorageIcon />,
-      unit: 'GB'
-    },
-    {
-      label: t('common:flow'),
-      value: `~`,
-      icon: <FlowIcon />,
-      unit: 'GB'
-    }
-  ];
+  const info = useMemo(
+    () => [
+      {
+        label: 'CPU',
+        value: data?.data?.totalCpu,
+        icon: <CpuIcon />,
+        unit: 'C'
+      },
+      {
+        label: t('common:memory'),
+        value: data?.data?.totalMemory,
+        icon: <MemoryIcon />,
+        unit: 'GB'
+      },
+      {
+        label: t('common:storage'),
+        value: data?.data?.totalStorage,
+        icon: <StorageIcon />,
+        unit: 'GB'
+      },
+      {
+        label: t('common:flow'),
+        value: `~`,
+        icon: <FlowIcon />,
+        unit: 'GB'
+      },
+      ...(Number(data?.data?.totalGpuCount) > 0
+        ? [
+            {
+              label: 'GPU',
+              value: data?.data?.totalGpuCount,
+              icon: <GpuIcon color={'rgba(255, 255, 255, 0.90)'} width={'13px'} height={'13px'} />,
+              unit: 'Card'
+            }
+          ]
+        : [])
+    ],
+    [data?.data, t]
+  );
 
   const totalPodCount = Number(data?.data?.totalPodCount) || 0;
   const runningPodCount = Number(data?.data?.runningPodCount) || 0;

frontend/desktop/src/components/icons/index.tsx

@@ -605,3 +605,24 @@ export function AttachmentIcon(props: IconProps) {
     </Icon>
   );
 }
+
+export function GpuIcon(props: IconProps) {
+  return (
+    <Icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentcolor" {...props}>
+      <path
+        d="M9.96854 18H14.0315C13.9933 18.0002 13.9557 18.0001 13.919 18.0001H10.081C10.0443 18.0001 10.0067 18.0002 9.96854 18Z"
+        fill="currentColor"
+      />
+      <path
+        d="M9.68745 16.459C10.4621 16.879 11.4048 17.089 12.5154 17.089C13.0288 17.089 13.5468 17.0423 14.0694 16.949C14.5921 16.8557 15.0634 16.7343 15.4834 16.585C15.7074 16.5103 15.8661 16.389 15.9594 16.221C16.0528 16.053 16.0995 15.8477 16.0995 15.605V12.357C16.0995 12.077 16.0248 11.8623 15.8754 11.713C15.7354 11.5637 15.5254 11.489 15.2454 11.489H13.0474C12.7674 11.489 12.5528 11.559 12.4035 11.699C12.2541 11.8297 12.1794 12.021 12.1794 12.273C12.1794 12.5157 12.2541 12.707 12.4035 12.847C12.5528 12.987 12.7674 13.057 13.0474 13.057H14.3074V14.9921C14.0945 15.0529 13.8799 15.1031 13.6635 15.143C13.3088 15.2083 12.9634 15.241 12.6274 15.241C11.6288 15.241 10.8728 14.9703 10.3594 14.429C9.85545 13.8877 9.60345 13.0897 9.60345 12.035C9.60345 11.335 9.71078 10.747 9.92545 10.271C10.1495 9.78567 10.4854 9.42167 10.9334 9.179C11.3814 8.927 11.9368 8.801 12.5994 8.801C13.0101 8.801 13.3881 8.843 13.7334 8.927C14.0788 9.00167 14.4054 9.123 14.7134 9.291C14.9468 9.403 15.1521 9.44034 15.3295 9.403C15.5161 9.35634 15.6654 9.263 15.7774 9.123C15.8988 8.97367 15.9734 8.80567 16.0014 8.619C16.0388 8.423 16.0201 8.241 15.9454 8.073C15.8801 7.89567 15.7494 7.751 15.5534 7.639C15.0868 7.37767 14.6014 7.191 14.0975 7.079C13.5934 6.967 13.0894 6.911 12.5854 6.911C11.7641 6.911 11.0268 7.03234 10.3734 7.275C9.72945 7.51767 9.17878 7.863 8.72145 8.311C8.27345 8.74967 7.92812 9.28634 7.68545 9.921C7.45212 10.5463 7.33545 11.251 7.33545 12.035C7.33545 13.0523 7.53612 13.939 7.93745 14.695C8.33878 15.451 8.92212 16.039 9.68745 16.459Z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M7.7587 2.00012H16.2413C17.0462 2.00011 17.7107 2.0001 18.2518 2.04432C18.8139 2.09024 19.3306 2.18881 19.816 2.4361C20.5686 2.81959 21.1805 3.43151 21.564 4.18416C21.8113 4.6695 21.9099 5.1862 21.9558 5.7483C22 6.28949 22 6.95384 22 7.7588V16.2414C22 17.0464 22 17.7108 21.9558 18.2519C21.9099 18.814 21.8113 19.3307 21.564 19.8161C21.1805 20.5687 20.5686 21.1807 19.816 21.5641C19.3306 21.8114 18.8139 21.91 18.2518 21.9559C17.7106 22.0001 17.0463 22.0001 16.2413 22.0001H7.75878C6.95377 22.0001 6.28939 22.0001 5.74817 21.9559C5.18608 21.91 4.66937 21.8114 4.18404 21.5641C3.43139 21.1807 2.81947 20.5687 2.43598 19.8161C2.18868 19.3307 2.09012 18.814 2.0442 18.2519C1.99998 17.7108 1.99999 17.0464 2 16.2414V7.75881C1.99999 6.95385 1.99998 6.28948 2.0442 5.7483C2.09012 5.1862 2.18868 4.6695 2.43598 4.18416C2.81947 3.43151 3.43139 2.81959 4.18404 2.4361C4.66938 2.18881 5.18608 2.09024 5.74818 2.04432C6.28936 2.0001 6.95375 2.00011 7.7587 2.00012ZM5.91104 4.03768C5.47262 4.07349 5.24842 4.13842 5.09202 4.21811C4.7157 4.40986 4.40974 4.71582 4.21799 5.09214C4.1383 5.24854 4.07337 5.47275 4.03755 5.91116C4.00078 6.36125 4 6.94354 4 7.80012V16.2001C4 17.0567 4.00078 17.639 4.03755 18.0891C4.07337 18.5275 4.1383 18.7517 4.21799 18.9081C4.40973 19.2844 4.7157 19.5904 5.09202 19.7821C5.24842 19.8618 5.47263 19.9267 5.91104 19.9626C6.36113 19.9993 6.94342 20.0001 7.8 20.0001H16.2C17.0566 20.0001 17.6389 19.9993 18.089 19.9626C18.5274 19.9268 18.7516 19.8618 18.908 19.7821C19.2843 19.5904 19.5903 19.2844 19.782 18.9081C19.8617 18.7517 19.9266 18.5275 19.9624 18.0891C19.9992 17.639 20 17.0567 20 16.2001V7.80012C20 6.94355 19.9992 6.36125 19.9624 5.91116C19.9266 5.47275 19.8617 5.24854 19.782 5.09214C19.5903 4.71582 19.2843 4.40986 18.908 4.21811C18.7516 4.13842 18.5274 4.0735 18.089 4.03768C17.6389 4.0009 17.0566 4.00012 16.2 4.00012L7.8 4.00012C6.94342 4.00012 6.36113 4.0009 5.91104 4.03768Z"
+        fill="currentColor"
+      />
+    </Icon>
+  );
+}

frontend/desktop/src/pages/api/desktop/getResource.ts

@@ -23,6 +23,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
     let totalMemoryLimits = 0;
     let totalStorageRequests = 0;
     let runningPodCount = 0;
+    let totalGpuCount = 0;
     let totalPodCount = 0;
 
     for (const pod of result.body.items) {
@@ -40,9 +41,12 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
         const limits = container?.resources.limits as {
           cpu: string;
           memory: string;
+          ['nvidia.com/gpu']?: string;
         };
         totalCpuLimits += parseResourceValue(limits.cpu);
         totalMemoryLimits += parseResourceValue(limits.memory);
+
+        totalGpuCount += Number(limits['nvidia.com/gpu'] || 0);
       }
 
       if (!pod?.spec?.volumes) continue;
@@ -65,7 +69,8 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
         totalMemory: totalMemoryLimits.toFixed(2),
         totalStorage: totalStorageRequests.toFixed(2),
         runningPodCount,
-        totalPodCount
+        totalPodCount,
+        totalGpuCount
         // result: result.body.items
       }
     });