feat: Add gpu info in resource card for multi-cluster project

Signed-off-by: TheYoungManLi <cjl@kubesphere.io>
kubesphere · Dec 24, 2021 · c1f2393 · c1f2393
1 parent 9e97268
commit c1f2393
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 2 deletions.
diff --git 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
@@ -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,