From 2a07dbae136dba72578dde2f33cb56de6d96445e Mon Sep 17 00:00:00 2001
From: XiaoXiAI <123750281+zzxr6@users.noreply.github.com>
Date: Mon, 14 Oct 2024 15:08:27 +0800
Subject: [PATCH] FIx bug of endpoint page (#704)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Sync endpoint page

* Update EndpointPage.vue

* Reset code

* Update endpoint settings to fetch resources by cluster id

---------

Co-authored-by: 朱鑫睿 <xinrui.zhu@opencsg.com>
Co-authored-by: Hiveer <ljp.hiveer@gmail.com>
---
 .../components/endpoints/EndpointDetail.vue   |  4 +--
 .../src/components/endpoints/EndpointPage.vue | 29 +++++++++++++++++--
 .../components/endpoints/EndpointSettings.vue | 19 +++++++-----
 frontend/src/components/shared/RepoTabs.vue   |  6 ++--
 4 files changed, 45 insertions(+), 13 deletions(-)

diff --git a/frontend/src/components/endpoints/EndpointDetail.vue b/frontend/src/components/endpoints/EndpointDetail.vue
index a21e6c80e..1d79e0dc1 100644
--- a/frontend/src/components/endpoints/EndpointDetail.vue
+++ b/frontend/src/components/endpoints/EndpointDetail.vue
@@ -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
   })
diff --git a/frontend/src/components/endpoints/EndpointPage.vue b/frontend/src/components/endpoints/EndpointPage.vue
index 18494b756..ab6892604 100644
--- a/frontend/src/components/endpoints/EndpointPage.vue
+++ b/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>
\ No newline at end of file
diff --git a/frontend/src/components/endpoints/EndpointSettings.vue b/frontend/src/components/endpoints/EndpointSettings.vue
index 7b30b8973..f38d4defe 100644
--- a/frontend/src/components/endpoints/EndpointSettings.vue
+++ b/frontend/src/components/endpoints/EndpointSettings.vue
@@ -293,7 +293,8 @@
     cloudResource: String,
     framework: String,
     maxReplica: Number,
-    minReplica: Number
+    minReplica: Number,
+    clusterId: String
   })
 
   const { t } = useI18n()
@@ -359,8 +360,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
       }
     })
   })
@@ -378,6 +381,12 @@
     }
   })
 
+  watch(() => props.clusterId, () => {
+    if (props.clusterId) {
+      fetchResources()
+    }
+  })
+
   const stopEndpoint = async () => {
     const stopUrl = `/models/${props.modelId}/run/${props.endpointId}/stop`
     const { response, error } = await useFetchApi(stopUrl).put().json()
@@ -439,7 +448,7 @@
   }
 
   const fetchResources = async () => {
-    const { data, error } = await useFetchApi('/space_resources').json()
+    const { data, error } = await useFetchApi(`/space_resources?cluster_id=${props.clusterId}`).json()
 
     if (error.value) {
       ElMessage({
@@ -551,8 +560,4 @@
       })
     }
   }
-
-  onMounted(() => {
-    fetchResources()
-  })
 </script>
diff --git a/frontend/src/components/shared/RepoTabs.vue b/frontend/src/components/shared/RepoTabs.vue
index 7af4d0d89..de223aef8 100644
--- a/frontend/src/components/shared/RepoTabs.vue
+++ b/frontend/src/components/shared/RepoTabs.vue
@@ -56,7 +56,8 @@
           :modelId="modelId"
           :private="private"
           :endpointReplica="endpointReplica"
-          :hardware="hardware"
+          :clusterId="repoDetail.cluster_id"
+          :sku="sku"
           :replicaList="replicaList"
         />
         <repo-summary
@@ -232,6 +233,7 @@
           :framework="repoDetail.runtime_framework"
           :maxReplica="repoDetail.max_replica"
           :minReplica="repoDetail.min_replica"
+          :clusterId="repoDetail.cluster_id"
         />
       </template>
     </tab-container>
@@ -280,7 +282,7 @@
     sdk: String,
     userName: String,
     commitId: String,
-    hardware: String,
+    sku: String,
     modelId: String,
     private: Boolean,
     endpointReplica: Number,