FIx bug of endpoint page

frontend/src/components/endpoints/EndpointDetail.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full bg-gray-25 pt-9 pb-[60px] xl:px-10 md:px-0 md:pb-6 md:h-auto">
+  <div class="w-full bg-[#FCFCFD] pt-9 pb-[60px] xl:px-10 md:px-0 md:pb-6 md:h-auto">
     <div class="mx-auto max-w-[1280px]">
       <repo-header
         :private="endpoint.private"
@@ -25,7 +25,8 @@
       :settingsVisibility="canManage"
       :can-write="canWrite"
       repo-type="endpoint"
-      :hardware="endpoint.hardware"
+      :clusterId="endpoint.cluster_id"
+      :sku="endpoint.sku"
       :modelId="endpoint.model_id"
       :private="endpoint.private"
       :endpointReplica="endpoint.actual_replica"
@@ -96,7 +97,6 @@
   const ownerUrl = computed(() => {
     const { namespace } = modelInfo.value
     if (!namespace) return ''
-
     const baseUrl = namespace.Type === 'user' ? '/profile/' : '/organizations/'
     return baseUrl + namespace.Path
   })

frontend/src/components/endpoints/EndpointPage.vue

@@ -36,7 +36,7 @@
         <span>{{ $t('endpoints.detail.cloudResource')}}</span>
       </p>
       <p class="w-[390px] lg:w-[370px] mlg:w-full h-[35px] leading-[18px] text-gray-500 text-xs overflow-hidden text-ellipsis line-clamp-2 text-left">
-        {{ hardware }}
+        {{ resource.name }}
       </p>
     </div>
 
@@ -62,12 +62,15 @@
 </template>
 
 <script setup>
+  import { watch, ref } from 'vue'
+  import useFetchApi from '../../packs/useFetchApi'
   import EndpointPlayground from './EndpointPlayground.vue'
 
   const props = defineProps({
     appEndpoint: String,
     appStatus: String,
-    hardware: String,
+    clusterId: String,
+    sku: String,
     modelId: String,
     private: String,
     replicaList: Array,
@@ -76,4 +79,26 @@
       default: 0
     }
   })
+
+  const resource = ref({})
+
+  const fetchResources = async () => {
+    const { data, error } = await useFetchApi(`/space_resources?cluster_id=${props.clusterId}`).json()
+
+    if (error.value) {
+      ElMessage({
+        message: error.value.msg,
+        type: 'warning'
+      })
+    } else {
+      const body = data.value
+      resource.value = body.data.find((cloudResource) => {
+        return String(cloudResource.id) === props.sku
+      }) || {}
+    }
+  }
+
+  watch(() => props.clusterId, () => {
+    fetchResources()
+  })
 </script>

frontend/src/components/endpoints/EndpointSettings.vue

@@ -359,8 +359,10 @@
         return !!framework.frame_npu_image
       } else if (currentResource.value.type === 'gpu') {
         return !!framework.frame_image
-      } else {
+      } else if (currentResource.value.type === 'cpu') {
         return !!framework.frame_cpu_image
+      } else {
+        return true
       }
     })
   })

frontend/src/components/shared/RepoTabs.vue

@@ -56,7 +56,8 @@
           :modelId="modelId"
           :private="private"
           :endpointReplica="endpointReplica"
-          :hardware="hardware"
+          :clusterId="clusterId"
+          :sku="sku"
           :replicaList="replicaList"
         />
         <repo-summary
@@ -280,7 +281,8 @@
     sdk: String,
     userName: String,
     commitId: String,
-    hardware: String,
+    clusterId: String,
+    sku: String,
     modelId: String,
     private: Boolean,
     endpointReplica: Number,