Sync bug fix endpoint finetune logs (#1012)

* Update billing conditions and paths for column display and inference URL

See merge request product/community/csghub-portal!592

* Merge branch 'main__bug-fix-billing-detail' into 'main'

fix(BillingDetail): reorder conditions in computed

See merge request product/community/csghub-portal!595

---------

Co-authored-by: HiveerLi <[email protected]>

Author: hiveer

frontend/src/components/endpoints/EndpointDetail.vue

@@ -88,7 +88,6 @@
   const isStatusSSEConnected = ref(false)
   const replicaList = ref([])
 
-
   const appEndpoint = computed(() => {
     const endpointUrl = repoDetailStore.endpoint
     if (endpointUrl) {
@@ -172,11 +171,14 @@
         console.log(`SyncStatus: ${eventResponse.status}`)
         console.log(`SyncStatus: ${eventResponse.details && eventResponse.details[0].name}`)
         if (repoDetailStore.status !== eventResponse.status) {
-          if (eventResponse.status == 'Running') {
-            fetchRepoDetail()
-          }
           repoDetailStore.status = eventResponse.status
+          fetchRepoDetail()
+        }
+
+        if (eventResponse.details && eventResponse.details[0].name) {
+          repoDetailStore.activeInstance = eventResponse.details[0].name
         }
+
         if (eventResponse.details) {
           replicaList.value = eventResponse.details
         }

frontend/src/components/endpoints/EndpointLogs.vue

@@ -28,25 +28,38 @@
 </template>
 
 <script setup>
-  import { ref, inject, nextTick, computed, onMounted } from 'vue'
+  import { ref, inject, nextTick, computed, onMounted, watch } from 'vue'
   import refreshJWT from '../../packs/refreshJWT.js'
   import { fetchEventSource } from '@microsoft/fetch-event-source';
   import { useCookies } from "vue3-cookies";
+  import useRepoDetailStore from '../../stores/RepoDetailStore.js'
 
   const props = defineProps({
     instances: Array,
     modelId: String,
     deployId: Number
   })
 
+  const repoDetailStore = useRepoDetailStore()
   const csghubServer = inject('csghubServer')
   const { cookies } = useCookies()
   const instanceLogDiv = ref(null)
   const instanceLogLineNum = ref(0)
   const isLogsSSEConnected = ref(false)
-
   const currentInstance = computed(() => {
-    return props.instances ? props.instances[0]?.name : ''
+    return repoDetailStore.activeInstance
+  })
+
+  watch([() => props.modelId, () => props.deployId], () => {
+    if (currentInstance.value && isLogsSSEConnected.value === false) {
+      syncInstanceLogs(currentInstance.value)
+    }
+  })
+
+  watch(() => repoDetailStore.status, () => {
+    if (currentInstance.value && isLogsSSEConnected.value === false) {
+      syncInstanceLogs(currentInstance.value)
+    }
   })
 
   const syncInstanceLogs = (instanceName) => {
@@ -146,7 +159,7 @@
   }
 
   onMounted(() => {
-    if (!!currentInstance.value && isLogsSSEConnected.value === false) {
+    if (currentInstance.value && isLogsSSEConnected.value === false) {
       syncInstanceLogs(currentInstance.value)
     }
   })

frontend/src/components/endpoints/EndpointSettings.vue

@@ -389,6 +389,8 @@
     const { response, error } = await useFetchApi(stopUrl).put().json()
 
     if (!error.value) {
+      // after stop, all instance will be turn off
+      repoDetailStore.activeInstance = ''
       ElMessage({
         message: t('endpoints.settings.toggleStatusSuccess'),
         type: 'success'

frontend/src/components/shared/BillingDetail.vue

@@ -137,7 +137,7 @@
   })
 
   const canFetchBillingDetail = computed(() => {
-    return props.instanceName && userStore.uuid
+    return userStore.uuid && props.instanceName
   })
 
   watch(canFetchBillingDetail, (newValue) => {

frontend/src/components/shared/RepoClone.vue

@@ -242,14 +242,14 @@
 
   const { actionLimited, isLoggedIn } = storeToRefs(userStore)
   const httpCloneUrl = computed(() => {
-    return repoDetailStore.repository.http_clone_url
+    return repoDetailStore.repository.http_clone_url || ""
   })
   const sshCloneUrl = computed(() => {
     return repoDetailStore.repository.ssh_clone_url
   })
   const httpCloneProtocol = computed(() => {
-    const url = new URL(repoDetailStore.repository.http_clone_url)
-    return url.protocol
+    const url = repoDetailStore.repository.http_clone_url
+    return url ? new URL(url).protocol : 'https'
   })
 
   const httpsCloneCode = computed(() => {

frontend/src/components/shared/RepoHeader.vue

@@ -248,7 +248,7 @@
   }
 
   const likesNumberDisplayName = computed(() => {
-    const likesNumber = repoDetailStore.likes
+    const likesNumber = repoDetailStore.likes || 0
     if (likesNumber > 9999) {
       return '1w+'
     } else if (likesNumber > 999) {
@@ -302,7 +302,7 @@
     } else if (props.repoType === 'collections') {
       return `/collections/${props.collectionsId}`
     } else {
-      return `/${props.repoType}s/${props.path}` 
+      return `/${props.repoType}s/${props.path}`
     }
   })
 </script>

frontend/src/stores/RepoDetailStore.js

@@ -69,6 +69,7 @@ const useRepoDetailStore = defineStore('repoDetail', () => {
   const task = ref('')
   const actualReplica = ref(0)
   const instances = ref([])
+  const activeInstance = ref('')
 
   // getters
   const isPrivate = computed(() => !!privateVisibility.value)
@@ -219,6 +220,7 @@ const useRepoDetailStore = defineStore('repoDetail', () => {
     task,
     actualReplica,
     instances,
+    activeInstance,
     clearStore
   }
 }, {