fix: User-defined resource quota is not displayed

Signed-off-by: TheYoungManLi <cjl@kubesphere.io>
kubesphere · Dec 27, 2021 · c819650 · c819650
1 parent 7053ef3
commit c819650
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 17 deletions.
diff --git a/src/pages/fedprojects/containers/QuotaManage/ResourceQuota/QuotaItem/index.jsx b/src/pages/fedprojects/containers/QuotaManage/ResourceQuota/QuotaItem/index.jsx
@@ -26,7 +26,12 @@ import { ICON_TYPES } from 'utils/constants'
 
 import styles from './index.scss'
 
-const QuotaItem = ({ name, total, used }) => {
+const transformName = (text = '', type) =>
+  type === 'userDefined' && !text.includes('gpu')
+    ? text
+    : t(text.replace(/[. ]/g, '_').toUpperCase())
+
+const QuotaItem = ({ name, total, used, type }) => {
   let ratio = 0
 
   if (name === 'limits.cpu' || name === 'requests.cpu') {
@@ -48,12 +53,16 @@ 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
+  const iconType =
+    name.indexOf('gpu') > -1
+      ? ICON_TYPES['gpu']
+      : ICON_TYPES[name] ?? 'resource'
 
   return (
     <div className={styles.quota}>
-      <Icon name={ICON_TYPES[name]} size={40} />
+      <Icon name={iconType} size={40} />
       <div className={styles.item}>
-        <div>{t(labelText.replace(/[. ]/g, '_').toUpperCase())}</div>
+        <div>{transformName(labelText, type)}</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,25 +66,20 @@ export default class ResourceQuota extends React.Component {
 
   get items() {
     const detail = this.store.data
-    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)
+    const hard = get(detail, 'hard', {})
+    const quotaMaps = Object.values(QUOTAS_MAP).map(value => value.name)
+    const userDinedKeys = Object.keys(hard)
+      .filter(key => quotaMaps.indexOf(key) === -1)
+      .map(item => [item, { name: item, type: 'userDefined' }])
+    return Object.entries(QUOTAS_MAP)
+      .concat(userDinedKeys)
       .map(([key, value]) => ({
         key,
         name: key,
         total: get(detail, `hard["${value.name}"]`),
         used: get(detail, `used["${value.name}"]`, 0),
         left: get(detail, `left["${value.name}"]`),
+        type: value?.type ?? 'system',
       }))
       .filter(({ total, used, name }) => {
         if (!total && !Number(used) && RESERVED_KEYS.indexOf(name) === -1) {

diff --git a/src/pages/projects/containers/BaseInfo/ResourceQuota/QuotaItem/index.jsx b/src/pages/projects/containers/BaseInfo/ResourceQuota/QuotaItem/index.jsx
@@ -88,6 +88,9 @@ const QuotaItem = ({ name, total, used }) => {
     return usedValue
   }
 
+  const transformName = (text = '') =>
+    ICON_TYPES[labelName] ? t(text.replace(/[. ]/g, '_').toUpperCase()) : text
+
   if (name === 'limits.cpu' || name === 'requests.cpu') {
     if (total) {
       ratio = Number(cpuFormat(used)) / Number(cpuFormat(total))
@@ -118,7 +121,7 @@ const QuotaItem = ({ name, total, used }) => {
     <div className={styles.quota}>
       <Icon name={ICON_TYPES[labelName] || 'resource'} size={40} />
       <div className={styles.item}>
-        <div>{t(labelText.replace(/[. ]/g, '_').toUpperCase())}</div>
+        <div>{transformName(labelText)}</div>
         <p>{t('RESOURCE_TYPE_SCAP')}</p>
       </div>
       <div className={styles.item}>