From c1f23936e816f6fd18555763372c5010d5d9a8d2 Mon Sep 17 00:00:00 2001
From: TheYoungManLi <cjl@kubesphere.io>
Date: Fri, 24 Dec 2021 11:35:43 +0800
Subject: [PATCH] feat: Add gpu info in resource card for multi-cluster project

Signed-off-by: TheYoungManLi <cjl@kubesphere.io>
---
 .../QuotaManage/ResourceQuota/QuotaItem/index.jsx  |  4 +++-
 .../containers/QuotaManage/ResourceQuota/index.jsx | 14 +++++++++++++-
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/pages/fedprojects/containers/QuotaManage/ResourceQuota/QuotaItem/index.jsx b/src/pages/fedprojects/containers/QuotaManage/ResourceQuota/QuotaItem/index.jsx
index 165e61ed1e2..9215b7268b1 100644
--- a/src/pages/fedprojects/containers/QuotaManage/ResourceQuota/QuotaItem/index.jsx
+++ b/src/pages/fedprojects/containers/QuotaManage/ResourceQuota/QuotaItem/index.jsx
@@ -46,12 +46,14 @@ const QuotaItem = ({ name, total, used }) => {
   }
 
   ratio = Math.min(Math.max(ratio, 0), 1)
+  const labelName = name.indexOf('gpu') > -1 ? 'gpu' : name
+  const labelText = labelName === 'gpu' ? `${labelName}.limit` : labelName
 
   return (
     <div className={styles.quota}>
       <Icon name={ICON_TYPES[name]} size={40} />
       <div className={styles.item}>
-        <div>{t(name.replace('.', '_').toUpperCase())}</div>
+        <div>{t(labelText.replace(/[. ]/g, '_').toUpperCase())}</div>
         <p>{t('RESOURCE_TYPE_SCAP')}</p>
       </div>
       <div className={styles.item}>
diff --git a/src/pages/fedprojects/containers/QuotaManage/ResourceQuota/index.jsx b/src/pages/fedprojects/containers/QuotaManage/ResourceQuota/index.jsx
index 0780cdf83a0..9104e99331c 100644
--- a/src/pages/fedprojects/containers/QuotaManage/ResourceQuota/index.jsx
+++ b/src/pages/fedprojects/containers/QuotaManage/ResourceQuota/index.jsx
@@ -66,7 +66,19 @@ export default class ResourceQuota extends React.Component {
 
   get items() {
     const detail = this.store.data
-    return Object.entries(QUOTAS_MAP)
+    const supportGpuType = globals.config?.supportGpuType ?? []
+    const gpuType = supportGpuType.filter(type =>
+      Object.keys(get(detail, `hard`, {})).some(key => key.endsWith(type))
+    )
+    const mapObj = !gpuType[0]
+      ? QUOTAS_MAP
+      : {
+          ...QUOTAS_MAP,
+          gpu: {
+            name: `requests.${gpuType[0]}`,
+          },
+        }
+    return Object.entries(mapObj)
       .map(([key, value]) => ({
         key,
         name: key,