From dd01900ce0023d4260d3560279a584baa058387c Mon Sep 17 00:00:00 2001
From: niuran <ran.niu@opencsg.com>
Date: Sat, 11 Oct 2025 19:54:16 +0800
Subject: [PATCH 1/2] Draft MR


From 53b8b13ab0c06dd9baa2e8bbbc6de353a4f52579 Mon Sep 17 00:00:00 2001
From: niuran <1287936158@qq.com>
Date: Tue, 14 Oct 2025 02:17:53 +0000
Subject: [PATCH 2/2] feat(logs): add time duration selection for logs

---
 .../serverless/AdminServerlessLogs.vue        | 155 +++---
 .../ApplicationSpaceDetail.vue                | 452 +++++++++++-------
 .../src/components/endpoints/EndpointLogs.vue |  52 +-
 .../src/components/notebooks/NotebookLogs.vue | 375 +++++++++++++++
 frontend/src/locales/en_js/endpoints.js       |  10 +
 frontend/src/locales/zh_hant_js/endpoints.js  |  10 +
 frontend/src/locales/zh_js/endpoints.js       | 182 +++----
 7 files changed, 904 insertions(+), 332 deletions(-)
 create mode 100644 frontend/src/components/notebooks/NotebookLogs.vue

diff --git a/frontend/src/components/admin_next/serverless/AdminServerlessLogs.vue b/frontend/src/components/admin_next/serverless/AdminServerlessLogs.vue
index 79fc117dc..ff96b5d5b 100644
--- a/frontend/src/components/admin_next/serverless/AdminServerlessLogs.vue
+++ b/frontend/src/components/admin_next/serverless/AdminServerlessLogs.vue
@@ -1,31 +1,41 @@
 <template>
   <div class="my-[16px]">
-    <el-select
-      v-model="currentInstance"
-      placeholder="Select"
-      style="width: 240px"
-      @change="refreshInstanceLogs"
-    >
-      <el-option
-        v-for="instance in instances"
-        :key="instance.name"
-        :label="instance.name"
-        :value="instance.name"
-      />
-    </el-select>
+    <div class="flex justify-start items-center gap-3">
+      <el-select
+        v-model="currentInstance"
+        placeholder="Select"
+        style="width: 240px"
+        @change="refreshInstanceLogs">
+        <el-option
+          v-for="instance in instances"
+          :key="instance.name"
+          :label="instance.name"
+          :value="instance.name" />
+      </el-select>
+      <el-select
+        v-model="timeDuration"
+        placeholder="Select"
+        class="!w-[150px]"
+        size="large"
+        @change="reloadTimeLogs">
+        <el-option
+          v-for="time in timeSelectObj"
+          :key="time"
+          :label="$t(`endpoints.timeDurations.${time}`)"
+          :value="time" />
+      </el-select>
+    </div>
     <div
       class="h-[80vh] border mt-[8px] overflow-scroll p-[8px]"
-      ref="instanceLogDiv"
-    >
-    </div>
+      ref="instanceLogDiv"></div>
   </div>
 </template>
 
 <script setup>
   import { ref, inject, watch, nextTick, onMounted } from 'vue'
-  import refreshJWT from '@/packs/refreshJWT';
-  import { fetchEventSource } from '@microsoft/fetch-event-source';
-  import { useCookies } from "vue3-cookies";
+  import refreshJWT from '@/packs/refreshJWT'
+  import { fetchEventSource } from '@microsoft/fetch-event-source'
+  import { useCookies } from 'vue3-cookies'
 
   const props = defineProps({
     instances: {
@@ -44,67 +54,84 @@
 
   const currentInstance = ref(props.instances[0]?.name || '')
 
-  watch(() => props.instances, (newInstances) => {
-    if (newInstances && newInstances.length !== 0) {
-      currentInstance.value = newInstances[0].name
-      if (isLogsSSEConnected.value === false) {
-        syncInstanceLogs(currentInstance.value)
+  const timeSelectObj = ['10mins', '30mins', '1hour', '6hours', '1day', '2days', '1week','all']
+  const timeDuration = ref('10mins')
+
+  const reloadTimeLogs = ()=>{
+    syncInstanceLogs(currentInstance.value)
+  }
+
+  watch(
+    () => props.instances,
+    (newInstances) => {
+      if (newInstances && newInstances.length !== 0) {
+        currentInstance.value = newInstances[0].name
+        if (isLogsSSEConnected.value === false) {
+          syncInstanceLogs(currentInstance.value)
+        }
       }
     }
-  })
+  )
 
   const isLogsSSEConnected = ref(false)
 
   const syncInstanceLogs = (instanceName) => {
-    fetchEventSource(`${csghubServer}/api/v1/models/${props.modelId}/serverless/${props.deployId}/logs/${instanceName}`, {
-      openWhenHidden: true,
-      headers: {
-        Authorization: `Bearer ${cookies.get('user_token')}`,
-      },
-      async onopen(response) {
-        if (response.ok) {
-          console.log('SSE logs server connected')
-          isLogsSSEConnected.value = true
-          if (instanceLogDiv.value) {
-            instanceLogDiv.value.innerHTML = ''
-            instanceLogLineNum.value = 0
+    fetchEventSource(
+      `${csghubServer}/api/v1/models/${props.modelId}/serverless/${props.deployId}/logs/${instanceName}?since=${timeDuration.value=='all'?'':timeDuration.value}`,
+      {
+        openWhenHidden: true,
+        headers: {
+          Authorization: `Bearer ${cookies.get('user_token')}`
+        },
+        async onopen(response) {
+          if (response.ok) {
+            console.log('SSE logs server connected')
+            isLogsSSEConnected.value = true
+            if (instanceLogDiv.value) {
+              instanceLogDiv.value.innerHTML = ''
+              instanceLogLineNum.value = 0
+            }
+          } else if (response.status === 401) {
+            refreshJWT()
+          } else if (
+            response.status >= 400 &&
+            response.status < 500 &&
+            response.status !== 429
+          ) {
+            console.log('Logs Server Connection Error')
+            console.log(response.status)
+            console.log(response.body)
+          } else {
+            console.log('Logs Server Unknow Error')
+            console.log(response.body)
           }
-        } else if (response.status === 401) {
-          refreshJWT()
-        } else if (response.status >= 400 && response.status < 500 && response.status !== 429) {
-          console.log('Logs Server Connection Error')
-          console.log(response.status)
-          console.log(response.body)
-        } else {
-          console.log('Logs Server Unknow Error')
-          console.log(response.body)
-        }
-      },
-      onmessage(ev) {
-        if (ev.event === 'Container') {
-          appendLog(instanceLogDiv, ev.data, instanceLogLineNum)
-          nextTick(() => {
-            scrollToBottom(instanceLogDiv);
-          });
+        },
+        onmessage(ev) {
+          if (ev.event === 'Container') {
+            appendLog(instanceLogDiv, ev.data, instanceLogLineNum)
+            nextTick(() => {
+              scrollToBottom(instanceLogDiv)
+            })
+          }
+        },
+        onerror(err) {
+          console.log('Logs Server Error:')
+          console.log(err)
         }
-      },
-      onerror(err) {
-        console.log('Logs Server Error:')
-        console.log(err)
       }
-    })
+    )
   }
 
   const scrollToBottom = (targetRef) => {
-    const targetDiv = targetRef.value;
+    const targetDiv = targetRef.value
     if (targetDiv) {
-      targetDiv.scrollTop = targetDiv.scrollHeight;
+      targetDiv.scrollTop = targetDiv.scrollHeight
     }
   }
 
   const appendLog = (refElem, data, refLineNum) => {
-    const node = document.createElement("p")
-    node.innerHTML = `${refLineNum.value}: ${data.replace(/\\r/g, "<br>")}`
+    const node = document.createElement('p')
+    node.innerHTML = `${refLineNum.value}: ${data.replace(/\\r/g, '<br>')}`
     if (refElem.value) {
       refElem.value.appendChild(node)
       refLineNum.value = refLineNum.value + 1
@@ -120,4 +147,4 @@
       syncInstanceLogs(props.instances[0].name)
     }
   })
-</script>
\ No newline at end of file
+</script>
diff --git a/frontend/src/components/application_spaces/ApplicationSpaceDetail.vue b/frontend/src/components/application_spaces/ApplicationSpaceDetail.vue
index 2fc268bec..46a8c691a 100644
--- a/frontend/src/components/application_spaces/ApplicationSpaceDetail.vue
+++ b/frontend/src/components/application_spaces/ApplicationSpaceDetail.vue
@@ -22,7 +22,9 @@
         @toggleSpaceLogsDrawer="toggleSpaceLogsDrawer" />
     </div>
   </div>
-  <div class="mx-auto page-responsive-width mt-[-40px] md:px-0" v-show="!isDataLoading && isInitialized">
+  <div
+    class="mx-auto page-responsive-width mt-[-40px] md:px-0"
+    v-show="!isDataLoading && isInitialized">
     <repo-tabs
       :repo-detail="repoDetailStore"
       :appStatus="repoDetailStore.status"
@@ -41,10 +43,9 @@
       :path="`${namespace}/${repoName}`" />
   </div>
 
-  <LoadingSpinner 
-    :loading="isDataLoading" 
-    :text="$t('application_spaces.loading')" 
-  />
+  <LoadingSpinner
+    :loading="isDataLoading"
+    :text="$t('application_spaces.loading')" />
 
   <!-- logs drawer -->
   <div v-show="repoDetailStore.canWrite">
@@ -89,7 +90,7 @@
                 @click="toggleDrawerSize"
                 svgName="chevron-up" />
               <CsgButton
-                class="btn btn-secondary-gray btn-lg" 
+                class="btn btn-secondary-gray btn-lg"
                 v-else
                 @click="toggleDrawerSize"
                 svgName="chevron-down" />
@@ -101,12 +102,18 @@
           </div>
           <div class="flex justify-between gap-4">
             <div class="flex-1">
-              <el-tabs v-model="activeTab" class="log-tabs">
-                <el-tab-pane :label="$t('application_spaces.errorPage.build')" name="build" />
-                <el-tab-pane :label="$t('application_spaces.errorPage.container')" name="container" />
+              <el-tabs
+                v-model="activeTab"
+                class="log-tabs">
+                <el-tab-pane
+                  :label="$t('application_spaces.errorPage.build')"
+                  name="build" />
+                <el-tab-pane
+                  :label="$t('application_spaces.errorPage.container')"
+                  name="container" />
               </el-tabs>
             </div>
-            <CsgButton  
+            <CsgButton
               class="btn btn-secondary-gray btn-sm"
               @click="downloadLog"
               :name="$t('application_spaces.errorPage.download')" />
@@ -114,6 +121,18 @@
         </div>
       </template>
       <div class="flex flex-col gap-4 h-full">
+        <el-select
+          v-model="timeDuration"
+          placeholder="Select"
+          class="!w-[150px]"
+          size="large"
+          @change="syncSpaceLogs">
+          <el-option
+            v-for="time in timeSelectObj"
+            :key="time"
+            :label="$t(`endpoints.timeDurations.${time}`)"
+            :value="time" />
+        </el-select>
         <div
           v-show="isBuildLogTab"
           ref="buildLogDiv"
@@ -132,7 +151,16 @@
 </template>
 
 <script setup>
-  import { ref, onMounted, inject, computed, nextTick, provide, watch, onUnmounted } from 'vue'
+  import {
+    ref,
+    onMounted,
+    inject,
+    computed,
+    nextTick,
+    provide,
+    watch,
+    onUnmounted
+  } from 'vue'
   import RepoHeader from '../shared/RepoHeader.vue'
   import RepoTabs from '../shared/RepoTabs.vue'
   import CsgButton from '../shared/CsgButton.vue'
@@ -171,7 +199,7 @@
   const repoDetailStore = useRepoDetailStore()
   const { isInitialized } = storeToRefs(repoDetailStore)
   const { setRepoTab } = useRepoTabStore()
-  
+
   const isDataLoading = ref(false)
 
   const { cookies } = useCookies()
@@ -183,6 +211,18 @@
     }
   })
 
+  const timeSelectObj = [
+    '10mins',
+    '30mins',
+    '1hour',
+    '6hours',
+    '1day',
+    '2days',
+    '1week',
+    'all'
+  ]
+  const timeDuration = ref('10mins')
+
   const tags = computed(() => {
     return buildTags(repoDetailStore)
   })
@@ -212,7 +252,7 @@
 
   const activeTab = ref('build')
   const isBuildLogTab = computed(() => activeTab.value === 'build')
-  
+
   const drawerSize = ref('70%')
 
   const isStatusSSEConnected = ref(false)
@@ -230,7 +270,9 @@
   }
 
   const scrollToBottom = () => {
-    const targetDiv = isBuildLogTab.value ? buildLogDiv.value : containerLogDiv.value
+    const targetDiv = isBuildLogTab.value
+      ? buildLogDiv.value
+      : containerLogDiv.value
     if (targetDiv && isAtBottom.value) {
       targetDiv.scrollTop = targetDiv.scrollHeight
     }
@@ -251,17 +293,17 @@
     if (!isUpdate) {
       isDataLoading.value = true
     }
-    
+
     const url = `/${props.repoType}s/${props.namespace}/${props.repoName}`
 
     try {
       const { response, data, error } = await useFetchApi(url).json()
-      
+
       if (response.value.status === 404) {
         ToNotFoundPage()
         return false
       }
-      
+
       if (!data.value) {
         ElMessage.warning(error.value.msg)
         return false
@@ -269,9 +311,11 @@
 
       const repoData = data.value.data
       repoDetailStore.initialize(repoData, props.repoType)
-      
+
       setRepoTab({
-        currentBranch: props.currentBranch ? props.currentBranch : repoDetailStore.defaultBranch,
+        currentBranch: props.currentBranch
+          ? props.currentBranch
+          : repoDetailStore.defaultBranch
       })
       return true
     } catch (error) {
@@ -281,16 +325,18 @@
     }
   }
 
-  const controller = ref(null);
+  const controller = ref(null)
 
   const toggleSpaceLogsDrawer = () => {
-    spaceLogsDrawer.value = !spaceLogsDrawer.value;
+    spaceLogsDrawer.value = !spaceLogsDrawer.value
   }
 
   watch(spaceLogsDrawer, (newVal) => {
     if (newVal) {
       nextTick(() => {
-        const logContainer = isBuildLogTab.value ? buildLogDiv.value : containerLogDiv.value
+        const logContainer = isBuildLogTab.value
+          ? buildLogDiv.value
+          : containerLogDiv.value
         if (logContainer) {
           logContainer.addEventListener('scroll', handleScroll)
           // 初始打开时滚动到底部
@@ -300,10 +346,17 @@
       })
       syncSpaceLogs()
     } else {
-      const logContainer = isBuildLogTab.value ? buildLogDiv.value : containerLogDiv.value
+      const logContainer = isBuildLogTab.value
+        ? buildLogDiv.value
+        : containerLogDiv.value
       if (logContainer) {
         logContainer.removeEventListener('scroll', handleScroll)
       }
+      buildLogBlocks.value = []
+      containerLogBlocks.value = []
+      buildLogLineNum.value = 0
+      containerLogLineNum.value = 0
+
       if (controller.value) {
         console.log('Closing SSE logs connection')
         controller.value.abort()
@@ -311,16 +364,20 @@
         isLogsSSEConnected.value = false
       }
     }
-  });
+  })
 
   // 监听标签切换，切换时重新设置滚动
   watch(activeTab, () => {
     if (spaceLogsDrawer.value) {
       nextTick(() => {
-        const logContainer = isBuildLogTab.value ? buildLogDiv.value : containerLogDiv.value
+        const logContainer = isBuildLogTab.value
+          ? buildLogDiv.value
+          : containerLogDiv.value
         if (logContainer) {
           // 移除旧容器的事件监听
-          const oldContainer = !isBuildLogTab.value ? buildLogDiv.value : containerLogDiv.value
+          const oldContainer = !isBuildLogTab.value
+            ? buildLogDiv.value
+            : containerLogDiv.value
           if (oldContainer) {
             oldContainer.removeEventListener('scroll', handleScroll)
           }
@@ -336,22 +393,24 @@
 
   const syncSpaceLogs = () => {
     if (controller.value) {
-      controller.value.abort();
-      controller.value = null;
+      controller.value.abort()
+      controller.value = null
     }
-    
+
     if (buildLogDiv.value) {
-      buildLogDiv.value.innerHTML = '';
-      buildLogLineNum.value = 0;
+      buildLogDiv.value.innerHTML = ''
+      buildLogLineNum.value = 0
     }
     if (containerLogDiv.value) {
-      containerLogDiv.value.innerHTML = '';
-      containerLogLineNum.value = 0;
+      containerLogDiv.value.innerHTML = ''
+      containerLogLineNum.value = 0
     }
-    controller.value = new AbortController();
-    
+    controller.value = new AbortController()
+
     fetchEventSource(
-      `${csghubServer}/api/v1/spaces/${props.namespace}/${props.repoName}/logs`,
+      `${csghubServer}/api/v1/spaces/${props.namespace}/${
+        props.repoName
+      }/logs?since=${timeDuration.value == 'all' ? '' : timeDuration.value}`,
       {
         openWhenHidden: true,
         headers: {
@@ -359,72 +418,95 @@
         },
         signal: controller.value.signal,
         async onopen(response) {
+          const clearCurrentLogs = () => {
+            if (isBuildLogTab.value) {
+              buildLogBlocks.value = []
+              buildLogLineNum.value = 0
+              if (buildLogDiv.value) buildLogDiv.value.innerHTML = ''
+            } else {
+              containerLogBlocks.value = []
+              containerLogLineNum.value = 0
+              if (containerLogDiv.value) containerLogDiv.value.innerHTML = ''
+            }
+          }
+          clearCurrentLogs()
+
           if (!spaceLogsDrawer.value) {
-            controller.value?.abort();
-            return;
+            controller.value?.abort()
+            return
           }
-          
+
           if (response.ok) {
-            console.log('SSE logs server connected');
-            isLogsSSEConnected.value = true;
+            console.log('SSE logs server connected')
+            isLogsSSEConnected.value = true
           } else if (response.status === 401) {
-            refreshJWT();
+            refreshJWT()
           } else if (
             response.status >= 400 &&
             response.status < 500 &&
             response.status !== 429
           ) {
-            console.log('Logs Server Connection Error');
-            console.log(response.status);
-            console.log(response.body);
+            console.log('Logs Server Connection Error')
+            console.log(response.status)
+            console.log(response.body)
           } else {
-            console.log('Logs Server Unknown Error');
-            console.log(response.body);
+            console.log('Logs Server Unknown Error')
+            console.log(response.body)
           }
         },
         onmessage(ev) {
           if (!spaceLogsDrawer.value) {
-            controller.value?.abort();
-            return;
+            controller.value?.abort()
+            return
           }
-          
+
           if (ev.event === 'Build') {
-            appendLog(buildLogDiv, ev.data, buildLogLineNum, buildLogBlocks, { value: lastBuildLogTime })
+            appendLog(buildLogDiv, ev.data, buildLogLineNum, buildLogBlocks, {
+              value: lastBuildLogTime
+            })
             nextTick(() => {
-              scrollToBottom();
-            });
+              scrollToBottom()
+            })
           } else if (ev.event === 'Container') {
-            const lines = ev.data.split('\n');
-            lines.forEach(line => {
+            const lines = ev.data.split('\n')
+            lines.forEach((line) => {
               if (line.trim()) {
-                appendLog(containerLogDiv, line, containerLogLineNum, containerLogBlocks, { value: lastContainerLogTime })
+                appendLog(
+                  containerLogDiv,
+                  line,
+                  containerLogLineNum,
+                  containerLogBlocks,
+                  { value: lastContainerLogTime }
+                )
               }
-            });
+            })
 
             nextTick(() => {
-              scrollToBottom();
-            });
+              scrollToBottom()
+            })
           }
         },
         onerror(err) {
-          console.log('Logs Server Error:');
-          console.log(err);
-          
+          console.log('Logs Server Error:')
+          console.log(err)
+
           if (!spaceLogsDrawer.value) {
-            controller.value?.abort();
-            return;
+            controller.value?.abort()
+            return
           }
         }
       }
-    ).catch(err => {
+    ).catch((err) => {
       if (err.name !== 'AbortError' && spaceLogsDrawer.value) {
-        console.error('Unexpected error in logs connection:', err);
+        console.error('Unexpected error in logs connection:', err)
       }
-    });
+    })
   }
 
   onUnmounted(() => {
-    const logContainer = isBuildLogTab.value ? buildLogDiv.value : containerLogDiv.value
+    const logContainer = isBuildLogTab.value
+      ? buildLogDiv.value
+      : containerLogDiv.value
     if (logContainer) {
       logContainer.removeEventListener('scroll', handleScroll)
     }
@@ -432,7 +514,7 @@
       controller.value.abort()
       controller.value = null
     }
-  });
+  })
 
   // 日志块缓存和最后时间戳
   const buildLogBlocks = ref([]) // [{ time: '03s', lines: ['内容1', '内容2'] }]
@@ -440,126 +522,147 @@
   let lastBuildLogTime = ''
   let lastContainerLogTime = ''
 
-  const appendLog = (refElem, data, refLineNum, logBlocksRef, lastLogTimeRef) => {
-    if (!refElem.value) return;
-    
+  const appendLog = (
+    refElem,
+    data,
+    refLineNum,
+    logBlocksRef,
+    lastLogTimeRef
+  ) => {
+    if (!refElem.value) return
+
     // ANSI 转 HTML 简单实现
     function ansiToHtml(text) {
       const ansiMap = {
-        '0': '</span>', // reset
-        '31': '<span style="color:#e25555">', // red
-        '32': '<span style="color:#4caf50">', // green
-        '33': '<span style="color:#ffb300">', // yellow
-        '34': '<span style="color:#42a5f5">', // blue
-        '35': '<span style="color:#ab47bc">', // magenta
-        '36': '<span style="color:#26c6da">', // cyan
-        '37': '<span style="color:#bdbdbd">', // white/gray
-      };
-      return text.replace(/\x1b\[(\d+)m/g, (match, code) => ansiMap[code] || '');
+        0: '</span>', // reset
+        31: '<span style="color:#e25555">', // red
+        32: '<span style="color:#4caf50">', // green
+        33: '<span style="color:#ffb300">', // yellow
+        34: '<span style="color:#42a5f5">', // blue
+        35: '<span style="color:#ab47bc">', // magenta
+        36: '<span style="color:#26c6da">', // cyan
+        37: '<span style="color:#bdbdbd">' // white/gray
+      }
+      return text.replace(/\x1b\[(\d+)m/g, (match, code) => ansiMap[code] || '')
     }
 
     /**
      * 将 [0004] 转换为 [00:04] 格式
      */
     function formatTime(timeStr) {
-      if (!timeStr) return '';
-      
+      if (!timeStr) return ''
+
       // 处理秒格式 (如 "03s")
       if (/^\d+s$/.test(timeStr)) {
-        const seconds = timeStr.replace('s', '').padStart(2, '0');
-        return `00:${seconds}`;
+        const seconds = timeStr.replace('s', '').padStart(2, '0')
+        return `00:${seconds}`
       }
-      
+
       // 处理纯数字格式 (如 "0107")
       if (/^\d{4}$/.test(timeStr)) {
-        return `${timeStr.slice(0, 2)}:${timeStr.slice(2)}`;
+        return `${timeStr.slice(0, 2)}:${timeStr.slice(2)}`
       }
-      
-      return timeStr;
+
+      return timeStr
     }
 
     /**
      * 过滤不需要的前缀如"build-"
      */
     function filterPrefixes(text) {
-      return text.replace(/(build|platform)-\d+\s*\|\s*/g, '');
+      return text.replace(/(platform)-\d+\s*\|\s*/g, '')
     }
 
     // 新增：在日志级别后添加空格的函数
     function addSpaceAfterLogLevel(text) {
-      return text.replace(/(INFO|WARN|ERROR|DEBUG|TRACE|FATAL)([^\s])/g, '$1 $2');
+      return text.replace(
+        /(INFO|WARN|ERROR|DEBUG|TRACE|FATAL)([^\s])/g,
+        '$1 $2'
+      )
     }
 
     // 处理换行符
-    const processedData = data.replace(/\\n/g, '\n');
+    const processedData = data.replace(/\\n/g, '\n')
 
     // 按行处理日志内容
-    processedData.split('\n').forEach(line => {
-      if (!line.trim()) return;
+    processedData.split('\n').forEach((line) => {
+      if (!line.trim()) return
 
       // 转换时间格式 [0004] → [00:04]
-      line = line.replace(/\[(\d{4})\]/g, (_, time) => `[${time.slice(0, 2)}:${time.slice(2)}]`)
-               .replace(/\[(\d+)s\]/g, (_, sec) => `[00:${sec.padStart(2, '0')}]`);
+      line = line
+        .replace(
+          /\[(\d{4})\]/g,
+          (_, time) => `[${time.slice(0, 2)}:${time.slice(2)}]`
+        )
+        .replace(/\[(\d+)s\]/g, (_, sec) => `[00:${sec.padStart(2, '0')}]`)
 
       // 处理内容
-      let content = line;
-      
+      let content = line
+
       // 过滤不需要的前缀
-      content = filterPrefixes(content);
-      
+      content = filterPrefixes(content)
+
       // 在日志级别后添加空格
-      content = addSpaceAfterLogLevel(content);
-      
-      content = ansiToHtml(content.replace(/\\r/g, '<br>'));
+      content = addSpaceAfterLogLevel(content)
+
+      content = ansiToHtml(content.replace(/\\r/g, '<br>'))
 
       // 合并到同一时间块（不再使用时间块分组）
-      logBlocksRef.value.push({ 
-        time: '',  // 置空时间，不在渲染时显示单独的时间行
-        lines: [content] 
-      });
-    });
+      logBlocksRef.value.push({
+        time: '', // 置空时间，不在渲染时显示单独的时间行
+        lines: [content]
+      })
+    })
 
     // 重新渲染
     renderLogBlocks(refElem, logBlocksRef)
-    refLineNum.value = logBlocksRef.value.reduce((acc, b) => acc + b.lines.length, 0)
+    refLineNum.value = logBlocksRef.value.reduce(
+      (acc, b) => acc + b.lines.length,
+      0
+    )
     nextTick(() => {
       scrollToBottom()
     })
   }
 
   function renderLogBlocks(refElem, logBlocksRef) {
-      if (!refElem.value) return
-      refElem.value.innerHTML = ''
-      let lineNum = 0
-      logBlocksRef.value.forEach(block => {
-        const blockDiv = document.createElement('div')
-        blockDiv.className = 'mb-2'
-        if (block.time) {
-          const timeDiv = document.createElement('div')
-          timeDiv.className = 'text-base text-gray-400 mb-1 flex items-center'
-          timeDiv.innerHTML = `⏱ <span class='ml-1'>${block.time}</span>`
-          blockDiv.appendChild(timeDiv)
-        }
-        block.lines.forEach(line => {
-          const lineDiv = document.createElement('div')
-          lineDiv.className = 'flex items-start'
-          // 在INFO/WARN/ERROR等类型和内容之间加4px间距
-          let lineHtml = line
-          // 匹配以INFO/WARN/ERROR/DEBUG等大写单词开头的内容，后跟内容
-          lineHtml = lineHtml.replace(/^(<span[^>]*>)*(INFO|WARN|ERROR|DEBUG|TRACE|FATAL|NOTICE|WARNING)(<\/span[^>]*>)*([\s\S]*?)(?=<|$)/, (match, p1, type, p3, rest) => {
-            return `${p1 || ''}${type}${p3 || ''}<span style='display:inline-block;width:4px'></span>${rest || ''}`
-          })
-          lineDiv.innerHTML = `<span class='mr-1 text-base text-gray-400' style='min-width:2.5em;display:inline-block;'>${lineNum}:</span><span class='mr-2 text-base'>•</span><span class='text-base'>${lineHtml}</span>`
-          blockDiv.appendChild(lineDiv)
-          lineNum++
-        })
-        refElem.value.appendChild(blockDiv)
+    if (!refElem.value) return
+    refElem.value.innerHTML = ''
+    let lineNum = 0
+    logBlocksRef.value.forEach((block) => {
+      const blockDiv = document.createElement('div')
+      blockDiv.className = 'mb-2'
+      if (block.time) {
+        const timeDiv = document.createElement('div')
+        timeDiv.className = 'text-base text-gray-400 mb-1 flex items-center'
+        timeDiv.innerHTML = `⏱ <span class='ml-1'>${block.time}</span>`
+        blockDiv.appendChild(timeDiv)
+      }
+      block.lines.forEach((line) => {
+        const lineDiv = document.createElement('div')
+        lineDiv.className = 'flex items-start'
+        // 在INFO/WARN/ERROR等类型和内容之间加4px间距
+        let lineHtml = line
+        // 匹配以INFO/WARN/ERROR/DEBUG等大写单词开头的内容，后跟内容
+        lineHtml = lineHtml.replace(
+          /^(<span[^>]*>)*(INFO|WARN|ERROR|DEBUG|TRACE|FATAL|NOTICE|WARNING)(<\/span[^>]*>)*([\s\S]*?)(?=<|$)/,
+          (match, p1, type, p3, rest) => {
+            return `${p1 || ''}${type}${
+              p3 || ''
+            }<span style='display:inline-block;width:4px'></span>${rest || ''}`
+          }
+        )
+        lineDiv.innerHTML = `<span class='mr-1 text-base text-gray-400' style='min-width:2.5em;display:inline-block;'>${lineNum}:</span><span class='mr-2 text-base'>•</span><span class='text-base'>${lineHtml}</span>`
+        blockDiv.appendChild(lineDiv)
+        lineNum++
       })
+      refElem.value.appendChild(blockDiv)
+    })
   }
 
   const downloadLog = () => {
     const logBlocks = isBuildLogTab.value ? buildLogBlocks : containerLogBlocks
-    
+
     if (!logBlocks.value.length) {
       ElMessage.warning(t('application_spaces.errorPage.downloadNull'))
       return
@@ -568,54 +671,66 @@
     // 时间格式转换函数
     const formatTime = (timeStr) => {
       if (!timeStr) return ''
-      
+
       // 处理秒格式 (如 "03s")
       if (/^\d+s$/.test(timeStr)) {
         const seconds = timeStr.replace('s', '').padStart(2, '0')
         return `00:${seconds}`
       }
-      
+
       // 处理纯数字格式 (如 "0107")
       if (/^\d{4}$/.test(timeStr)) {
         return `${timeStr.slice(0, 2)}:${timeStr.slice(2)}`
       }
-      
+
       return timeStr
     }
 
-    const logContent = logBlocks.value.map(block => {
-      // 转换时间格式 [0004] → [00:04]
-      const timeHeader = block.time ? `[${formatTime(block.time)}]\n` : ''
-      return timeHeader + block.lines.map(line => {
-        const tempDiv = document.createElement('div')
-        tempDiv.innerHTML = line
-        let plainText = tempDiv.textContent || tempDiv.innerText || ''
-        
-        // 1. 日志级别后添加空格 (INFO/WARN/ERROR等)
-        plainText = plainText.replace(/^(INFO|WARN|ERROR|DEBUG|TRACE|FATAL|NOTICE|WARNING)([^\s])/, '$1 $2')
-        
-        // 2. 移除ANSI颜色代码
-        plainText = plainText.replace(/\x1b\[[0-9;]*m/g, '')
-        
-        // 3. 处理换行符 (\r → \n)
-        plainText = plainText.replace(/\\r/g, '\n')
-        
-        // 4. 处理换行符 (\n → 实际换行)
-        plainText = plainText.replace(/\\n/g, '\n')
-        
-        return plainText
-      }).join('\n')
-    }).join('\n\n')
+    const logContent = logBlocks.value
+      .map((block) => {
+        // 转换时间格式 [0004] → [00:04]
+        const timeHeader = block.time ? `[${formatTime(block.time)}]\n` : ''
+        return (
+          timeHeader +
+          block.lines
+            .map((line) => {
+              const tempDiv = document.createElement('div')
+              tempDiv.innerHTML = line
+              let plainText = tempDiv.textContent || tempDiv.innerText || ''
+
+              // 1. 日志级别后添加空格 (INFO/WARN/ERROR等)
+              plainText = plainText.replace(
+                /^(INFO|WARN|ERROR|DEBUG|TRACE|FATAL|NOTICE|WARNING)([^\s])/,
+                '$1 $2'
+              )
+
+              // 2. 移除ANSI颜色代码
+              plainText = plainText.replace(/\x1b\[[0-9;]*m/g, '')
+
+              // 3. 处理换行符 (\r → \n)
+              plainText = plainText.replace(/\\r/g, '\n')
+
+              // 4. 处理换行符 (\n → 实际换行)
+              plainText = plainText.replace(/\\n/g, '\n')
+
+              return plainText
+            })
+            .join('\n')
+        )
+      })
+      .join('\n\n')
 
     try {
       const blob = new Blob([logContent], { type: 'text/plain;charset=utf-8' })
       const link = document.createElement('a')
       link.href = URL.createObjectURL(blob)
-      link.download = `${props.repoName}_${isBuildLogTab.value ? 'build' : 'container'}_${new Date().toISOString().slice(0,10)}.log`
-      
+      link.download = `${props.repoName}_${
+        isBuildLogTab.value ? 'build' : 'container'
+      }_${new Date().toISOString().slice(0, 10)}.log`
+
       document.body.appendChild(link)
       link.click()
-      
+
       setTimeout(() => {
         document.body.removeChild(link)
         URL.revokeObjectURL(link.href)
@@ -624,7 +739,7 @@
       console.error('日志下载失败:', err)
       ElMessage.error(t('application_spaces.errorPage.downloadError'))
     }
-}
+  }
 
   const syncSpaceStatus = () => {
     fetchEventSource(
@@ -689,7 +804,8 @@
       repoType: props.repoType,
       namespace: props.namespace,
       repoName: props.repoName,
-      currentBranch: props.currentBranch || repoDetailStore.defaultBranch || 'main',
+      currentBranch:
+        props.currentBranch || repoDetailStore.defaultBranch || 'main'
     })
   })
 
diff --git a/frontend/src/components/endpoints/EndpointLogs.vue b/frontend/src/components/endpoints/EndpointLogs.vue
index cc33bccc1..79ca022ca 100644
--- a/frontend/src/components/endpoints/EndpointLogs.vue
+++ b/frontend/src/components/endpoints/EndpointLogs.vue
@@ -1,20 +1,36 @@
 <template>
   <div class="my-4">
     <div class="flex justify-between items-center pb-2">
-      <el-select
-        v-model="currentInstance"
-        placeholder="Select"
-        class="!w-[240px] mb-1 ml-1"
-        size="large"
-        @change="refreshInstanceLogs"
-      >
-        <el-option
-          v-for="instance in instances"
-          :key="instance.name"
-          :label="instance.name"
-          :value="instance.name"
-        />
-      </el-select>
+      <div class="flex justify-start items-center gap-3">
+        <el-select
+          v-model="currentInstance"
+          placeholder="Select"
+          class="!w-[240px] mb-1 ml-1"
+          size="large"
+          @change="refreshInstanceLogs"
+        >
+          <el-option
+            v-for="instance in instances"
+            :key="instance.name"
+            :label="instance.name"
+            :value="instance.name"
+          />
+        </el-select>
+        <el-select
+          v-model="timeDuration"
+          placeholder="Select"
+          class="!w-[150px] mb-1"
+          size="large"
+          @change="reloadTimeLogs"
+        >
+          <el-option
+            v-for="time in timeSelectObj"
+            :key="time"
+            :label="$t(`endpoints.timeDurations.${time}`)"
+            :value="time"
+          />
+        </el-select>
+      </div>
       <CsgButton
         class="btn btn-primary btn-sm"
         :name="$t('endpoints.logDownload')"
@@ -54,6 +70,8 @@
   const currentInstance = computed(() => {
     return repoDetailStore.activeInstance
   })
+  const timeSelectObj = ['10mins', '30mins', '1hour', '6hours', '1day', '2days', '1week','all']
+  const timeDuration = ref('10mins')
 
   watch([() => props.modelId, () => props.deployId], () => {
     if (currentInstance.value && isLogsSSEConnected.value === false) {
@@ -67,8 +85,12 @@
     }
   })
 
+  const reloadTimeLogs = ()=>{
+    syncInstanceLogs(currentInstance.value)
+  }
+
   const syncInstanceLogs = (instanceName) => {
-    fetchEventSource(`${csghubServer}/api/v1/models/${props.modelId}/run/${props.deployId}/logs/${instanceName}`, {
+    fetchEventSource(`${csghubServer}/api/v1/models/${props.modelId}/run/${props.deployId}/logs/${instanceName}?since=${timeDuration.value=='all'?'':timeDuration.value}`, {
       openWhenHidden: true,
       headers: {
         Authorization: `Bearer ${cookies.get('user_token')}`,
diff --git a/frontend/src/components/notebooks/NotebookLogs.vue b/frontend/src/components/notebooks/NotebookLogs.vue
new file mode 100644
index 000000000..23731fc93
--- /dev/null
+++ b/frontend/src/components/notebooks/NotebookLogs.vue
@@ -0,0 +1,375 @@
+<template>
+  <div class="my-4">
+    <div class="flex justify-between items-center pb-2">
+      <div class="flex justify-start items-center gap-3">
+        <el-select
+          v-model="repoDetailStore.activeInstance"
+          placeholder="Select"
+          class="!w-[400px] mb-1 ml-1"
+          size="large"
+          @change="refreshInstanceLogs"
+          :disabled="isLoading || !hasInstances"
+        >
+          <el-option
+            v-for="instance in instances"
+            :key="instance.name"
+            :label="instance.name"
+            :value="instance.name"
+          />
+        </el-select>
+        <el-select
+          v-model="timeDuration"
+          placeholder="Select"
+          class="!w-[150px] mb-1"
+          size="large"
+          @change="reloadTimeLogs"
+        >
+          <el-option
+            v-for="time in timeSelectObj"
+            :key="time"
+            :label="$t(`endpoints.timeDurations.${time}`)"
+            :value="time"
+          />
+        </el-select>
+      </div>
+      <CsgButton
+        class="btn btn-primary btn-sm"
+        :name="$t('endpoints.logDownload')"
+        @click="downloadLog"
+        :disabled="isLoading || !hasInstances"
+      />
+    </div>
+    <div
+      class="h-[80vh] bg-gray-800 p-6 rounded-xl text-white overflow-auto"
+      ref="instanceLogDiv"
+    >
+      <p>...</p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, inject, nextTick, computed, onMounted, watch, onUnmounted } 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'
+import CsgButton from '../shared/CsgButton.vue'
+
+const props = defineProps({
+  instances: Array,
+  notebookId: [String, Number],
+  deployId: [String, Number]
+})
+
+const timeSelectObj = ['10mins', '30mins', '1hour', '6hours', '1day', '2days', '1week','all']
+const timeDuration = ref('10mins')
+const repoDetailStore = useRepoDetailStore()
+const csghubServer = inject('csghubServer')
+const { cookies } = useCookies()
+const instanceLogDiv = ref(null)
+const instanceLogLineNum = ref(0)
+const isLogsSSEConnected = ref(false)
+const shouldAutoScroll = ref(true)
+const isLoading = ref(true)
+const isInitialSetupDone = ref(false)
+const hasInstances = computed(() => {
+  return Array.isArray(props.instances) && props.instances.length > 0
+})
+
+// 仅在用户手动切换实例或外部主动修改时触发，避免初始化时重复调用
+watch(() => repoDetailStore.activeInstance, (newValue, oldValue) => {
+  if (!newValue || !isInitialSetupDone.value) {
+    return
+  }
+  
+  // 如果是初始化时的首次赋值（从空到有值），跳过，由 onMounted 处理
+  if (!oldValue && newValue && !isLogsSSEConnected.value) {
+    return
+  }
+  
+  if (props.instances?.length > 0) {
+    const instanceExists = props.instances.some(instance => instance.name === newValue)
+    if (instanceExists) {
+      if (!isLogsSSEConnected.value) {
+        syncInstanceLogs(newValue)
+      }
+    } else {
+      repoDetailStore.activeInstance = ''
+    }
+  } else {
+    repoDetailStore.activeInstance = ''
+  }
+}, { immediate: false })
+
+// 监听 store 初始化状态，仅在 store 延迟初始化的场景下触发
+watch(() => repoDetailStore.isInitialized, (initialized, wasInitialized) => {
+  // 只在从未初始化变为已初始化时处理，避免重复触发
+  if (initialized && !wasInitialized && isInitialSetupDone.value && props.instances?.length > 0) {
+    const firstInstance = props.instances[0].name
+    
+    if (repoDetailStore.activeInstance !== firstInstance) {
+      repoDetailStore.activeInstance = firstInstance
+    } else if (!isLogsSSEConnected.value) {
+      syncInstanceLogs(firstInstance)
+    }
+  }
+})
+
+// 监听状态变化，仅在特定状态转换时重新连接日志
+watch(() => repoDetailStore.status, (newStatus, oldStatus) => {
+  if (!props.instances?.length) {
+    isLogsSSEConnected.value = false
+    isLoading.value = false
+    return
+  }
+  
+  // 只在状态真正发生变化且未连接时才处理，避免初始化时重复触发
+  if (oldStatus && newStatus !== oldStatus && !isLogsSSEConnected.value && isInitialSetupDone.value) {
+    if (repoDetailStore.activeInstance) {
+      const instanceExists = props.instances.some(instance => instance.name === repoDetailStore.activeInstance)
+      if (instanceExists) {
+        syncInstanceLogs(repoDetailStore.activeInstance)
+        return
+      }
+    }
+    
+    const firstInstance = props.instances[0].name
+    repoDetailStore.activeInstance = firstInstance
+  }
+})
+
+watch(() => props.instances, (newInstances) => {
+  isLogsSSEConnected.value = false
+  
+  if (!newInstances?.length) {
+    repoDetailStore.activeInstance = ''
+    isLoading.value = false
+    return
+  } 
+  
+  if (isInitialSetupDone.value) {
+    const firstInstance = newInstances[0].name
+    if (repoDetailStore.activeInstance !== firstInstance) {
+      repoDetailStore.activeInstance = firstInstance
+      // syncInstanceLogs(firstInstance)
+    }
+  } else {
+    isLoading.value = false
+  }
+}, { deep: true })
+
+const reloadTimeLogs = ()=>{
+  syncInstanceLogs(repoDetailStore.activeInstance)
+}
+
+const syncInstanceLogs = (instanceName) => {
+  if (isLogsSSEConnected.value || !instanceName || !Array.isArray(props.instances)) {
+    isLoading.value = false
+    return
+  }
+  
+  if (!props.instances.length) {
+    repoDetailStore.activeInstance = ''
+    isLoading.value = false
+    return
+  }
+  
+  const instanceExists = props.instances.some(instance => instance.name === instanceName)
+  if (!instanceExists) {
+    if (repoDetailStore.activeInstance === instanceName) {
+      repoDetailStore.activeInstance = ''
+    }
+    isLoading.value = false
+    return
+  }
+  
+  fetchEventSource(`${csghubServer}/api/v1/notebooks/${props.notebookId}/logs/${instanceName}?since=${timeDuration.value=='all'?'':timeDuration.value}`, {
+    openWhenHidden: true,
+    headers: {
+      Authorization: `Bearer ${cookies.get('user_token')}`,
+    },
+    async onopen(response) {
+      isLoading.value = false
+      if (response.ok) {
+        isLogsSSEConnected.value = true
+        nextTick(() => {
+          if (instanceLogDiv.value) {
+            instanceLogDiv.value.innerHTML = ''
+            instanceLogLineNum.value = 0
+          }
+        })
+      } else if (response.status === 401) {
+        refreshJWT()
+      } else if (response.status >= 400 && response.status < 500 && response.status !== 429) {
+        console.log('Logs Server Connection Error')
+        console.log(response.status)
+        console.log(response.body)
+      } else {
+        console.log('Logs Server Unknow Error')
+        console.log(response.body)
+      }
+    },
+    onmessage(ev) {
+      if (ev.event === 'Container') {
+        nextTick(() => {
+          if (instanceLogDiv.value) {
+            appendLog(instanceLogDiv, ev.data, instanceLogLineNum);
+            scrollToBottom(instanceLogDiv);
+          }
+        });
+      }
+    },
+    onerror() {
+      isLogsSSEConnected.value = false
+    }
+  })
+}
+
+const isAtBottom = () => {
+  const element = instanceLogDiv.value
+  if (!element) return true
+  return Math.abs(element.scrollHeight - element.scrollTop - element.clientHeight) < 10
+}
+
+const handleScroll = () => {
+  shouldAutoScroll.value = isAtBottom()
+}
+
+const scrollToBottom = (targetRef) => {
+  if (!targetRef?.value) return
+  
+  const targetDiv = targetRef.value
+  if (shouldAutoScroll.value) {
+    targetDiv.scrollTop = targetDiv.scrollHeight
+  }
+}
+
+const appendLog = (refElem, data, refLineNum) => {
+  if (!refElem?.value) return
+
+  const ansiToHtml = (text) => {
+    const ansiMap = {
+      '0': '</span>',
+      '31': '<span style="color:#e25555">',
+      '32': '<span style="color:#4caf50">',
+      '33': '<span style="color:#ffb300">',
+      '34': '<span style="color:#42a5f5">',
+      '35': '<span style="color:#ab47bc">',
+      '36': '<span style="color:#26c6da">',
+      '37': '<span style="color:#bdbdbd">',
+    }
+    return text.replace(/\x1b\[(\d+)m/g, (match, code) => ansiMap[code] || '')
+  }
+
+  function filterPrefixes(text) {
+    return text.replace(/(platform)-\d+\s*\|\s*/g, '');
+  }
+
+  function addSpaceAfterLogLevel(text) {
+    return text.replace(/(INFO|WARN|ERROR|DEBUG|TRACE|FATAL)([^\s])/g, '$1 $2');
+  }
+
+  const processedData = data.replace(/\\n/g, '\n');
+
+  const fragment = document.createDocumentFragment();
+  
+  processedData.split('\n').forEach(line => {
+    if (!line.trim()) return;
+
+    line = line.replace(/\[(\d{4})\]/g, (_, time) => `[${time.slice(0, 2)}:${time.slice(2)}]`)
+             .replace(/\[(\d+)s\]/g, (_, sec) => `[00:${sec.padStart(2, '0')}]`);
+
+    let content = line;
+    
+    content = filterPrefixes(content);
+    
+    content = addSpaceAfterLogLevel(content);
+    
+    content = ansiToHtml(content.replace(/\r/g, '<br>'));
+
+    const divNode = document.createElement("div");
+    divNode.className = "flex";
+
+    const pNode1 = document.createElement("p");
+    pNode1.className = "pr-6 pt-2";
+    pNode1.innerHTML = `${refLineNum.value}:`;
+
+    const pNode2 = document.createElement("p");
+    pNode2.className = "pt-2";
+    pNode2.innerHTML = content;
+
+    divNode.appendChild(pNode1);
+    divNode.appendChild(pNode2);
+
+    fragment.appendChild(divNode);
+    refLineNum.value += 1;
+  });
+  
+  refElem.value.appendChild(fragment);
+}
+
+const downloadLog = () => {
+  if (!instanceLogDiv?.value) return
+  
+  const logElements = instanceLogDiv.value.querySelectorAll('p')
+  let logContent = ''
+  logElements.forEach((element) => {
+    logContent += `${element.textContent}\n`
+  })
+
+  const blob = new Blob([logContent], { type: 'text/plain' })
+  const link = document.createElement('a')
+  link.href = URL.createObjectURL(blob)
+  link.download = 'inference_deploy_log.txt'
+  link.click()
+  URL.revokeObjectURL(link.href)
+}
+
+const refreshInstanceLogs = (value) => {
+  isLogsSSEConnected.value = false
+  isLoading.value = true
+  repoDetailStore.activeInstance = value
+}
+
+onMounted(() => {
+  nextTick(() => {
+    if (instanceLogDiv.value) {
+      instanceLogDiv.value.addEventListener('scroll', handleScroll)
+    }
+    
+    if (!props.instances?.length) {
+      repoDetailStore.activeInstance = ''
+      isLoading.value = false
+      isInitialSetupDone.value = true
+      return
+    }
+    
+    isInitialSetupDone.value = true
+    
+    // 无论 store 是否初始化，都尝试设置实例并连接日志
+    if (props.instances.length > 0) {
+      const firstInstance = props.instances[0].name
+      
+      // 如果当前没有选中实例或选中的实例不存在，设置为第一个
+      if (!repoDetailStore.activeInstance || 
+          !props.instances.some(inst => inst.name === repoDetailStore.activeInstance)) {
+        repoDetailStore.activeInstance = firstInstance
+      }
+      
+      const targetInstance = repoDetailStore.activeInstance || firstInstance
+      if (!isLogsSSEConnected.value && targetInstance) {
+        syncInstanceLogs(targetInstance)
+      }
+      
+      isLoading.value = false
+    }
+  });
+})
+
+onUnmounted(() => {
+  if (instanceLogDiv.value) {
+    instanceLogDiv.value.removeEventListener('scroll', handleScroll);
+  }
+})
+</script>
diff --git a/frontend/src/locales/en_js/endpoints.js b/frontend/src/locales/en_js/endpoints.js
index 67030c87c..fa0362d41 100644
--- a/frontend/src/locales/en_js/endpoints.js
+++ b/frontend/src/locales/en_js/endpoints.js
@@ -120,5 +120,15 @@ export const endpoints = {
     one_w: "Last 1 week",
     usageInPercent: "Usage in percent",
     usageInGb: "Usage in GB",
+  },
+  timeDurations: {
+    '10mins': 'Last 10mins',
+    '30mins': 'Last 30mins',
+    '1hour': 'Last 1hour',
+    '6hours': 'Last 6hours',
+    '1day': 'Last 1day',
+    '2days': 'Last 2days',
+    '1week': 'Last 1week',
+    'all': "All"
   }
 }
\ No newline at end of file
diff --git a/frontend/src/locales/zh_hant_js/endpoints.js b/frontend/src/locales/zh_hant_js/endpoints.js
index 399914509..852bf3f35 100644
--- a/frontend/src/locales/zh_hant_js/endpoints.js
+++ b/frontend/src/locales/zh_hant_js/endpoints.js
@@ -120,5 +120,15 @@ export const endpoints = {
     one_w: "最近 1 周",
     usageInPercent: "用量百分比",
     usageInGb: "用量GB",
+  },
+  timeDurations: {
+    '10mins': '最近 10 分鐘',
+    '30mins': '最近 30 分鐘',
+    '1hour': '最近 1 小時',
+    '6hours': '最近 6 小時',
+    '1day': '最近 1 天',
+    '2days': '最近 2 天',
+    '1week': '最近 1 週',
+    'all': '全部'
   }
 }
\ No newline at end of file
diff --git a/frontend/src/locales/zh_js/endpoints.js b/frontend/src/locales/zh_js/endpoints.js
index b5c30f12b..6063fb639 100644
--- a/frontend/src/locales/zh_js/endpoints.js
+++ b/frontend/src/locales/zh_js/endpoints.js
@@ -1,8 +1,8 @@
 export const endpoints = {
-  title: "专属实例",
+  title: '专属实例',
   loading: '正在加载专属实例信息...',
   resourceType: '资源类型',
-  replica: "弹性副本",
+  replica: '弹性副本',
   summary: '概览',
   logDownload: '下载日志',
   gpuMemoryRequired: '最小显存需求：',
@@ -15,70 +15,71 @@ export const endpoints = {
     endpointStatus: '实例状态'
   },
   new: {
-    title: "新建专属实例",
-    desc: "将模型部署到专属实例，",
-    guide: "查看部署指南",
-    name: "实例名称",
-    modelId: "模型 ID",
-    modelIdTip: "请输入模型ID",
-    minReplica: "最小弹性副本",
-    maxReplica: "最大弹性副本",
-    resource: "资源配置",
-    resourceTip1: "您可以随时在实例设置中切换到不同的实例云资源。",
-    resourceTip2: "切换到付费资源后，将根据使用时长向您收取费用。",
-    framework: "运行时框架",
-    cluster: "区域",
-    public: "公开",
-    publicDesc: "任何互联网上的人都可以访问这个实例。",
-    private: "私有",
-    privateDesc: "只有你（个人）或你所在组织的成员可以访问这个实例。",
-    createEndpoint: "新建实例",
-    dedicated: "专属实例",
-    tip: "应用于专属实例，创建后不可更改",
-    createSuccess: "专属实例创建成功",
-    createFail: "专属实例创建失败",
-    quantization: "量化",
-    engineArgs: "框架参数",
-    frameworkVersion: "框架版本",
-    frameworkVersionTip: "请选择框架版本",
-    frameworkInputTip: "请首先填写模型ID",
-    serverlessSelectPlaceholder: "请选择",
-    serverlessCluster: "请选择集群",
-    serverlessResource: "请输入部署名称",
-    serverlessFramework: "请选择资源",
-    serverlessDeploy: "请选择运行时框架",
-    autoShutdownTip: "超过1小时无操作将自动关闭",
+    title: '新建专属实例',
+    desc: '将模型部署到专属实例，',
+    guide: '查看部署指南',
+    name: '实例名称',
+    modelId: '模型 ID',
+    modelIdTip: '请输入模型ID',
+    minReplica: '最小弹性副本',
+    maxReplica: '最大弹性副本',
+    resource: '资源配置',
+    resourceTip1: '您可以随时在实例设置中切换到不同的实例云资源。',
+    resourceTip2: '切换到付费资源后，将根据使用时长向您收取费用。',
+    framework: '运行时框架',
+    cluster: '区域',
+    public: '公开',
+    publicDesc: '任何互联网上的人都可以访问这个实例。',
+    private: '私有',
+    privateDesc: '只有你（个人）或你所在组织的成员可以访问这个实例。',
+    createEndpoint: '新建实例',
+    dedicated: '专属实例',
+    tip: '应用于专属实例，创建后不可更改',
+    createSuccess: '专属实例创建成功',
+    createFail: '专属实例创建失败',
+    quantization: '量化',
+    engineArgs: '框架参数',
+    frameworkVersion: '框架版本',
+    frameworkVersionTip: '请选择框架版本',
+    frameworkInputTip: '请首先填写模型ID',
+    serverlessSelectPlaceholder: '请选择',
+    serverlessCluster: '请选择集群',
+    serverlessResource: '请输入部署名称',
+    serverlessFramework: '请选择资源',
+    serverlessDeploy: '请选择运行时框架',
+    autoShutdownTip: '超过1小时无操作将自动关闭'
   },
   settings: {
-    stop: "暂停",
-    restart: "重启",
-    restartEndpoint: "重启专属实例",
-    stopEndpoint: "暂停专属实例",
-    delete: "删除",
-    deleteEndpoint: "删除专属实例",
-    delTips: "此操作",
-    delTips2: "撤销，这将永久删除",
-    delTips3: "专属实例。",
-    confirmDel: "我已知晓,确认删除",
-    namespaceName: "专属实例名称/ID",
+    stop: '暂停',
+    restart: '重启',
+    restartEndpoint: '重启专属实例',
+    stopEndpoint: '暂停专属实例',
+    delete: '删除',
+    deleteEndpoint: '删除专属实例',
+    delTips: '此操作',
+    delTips2: '撤销，这将永久删除',
+    delTips3: '专属实例。',
+    confirmDel: '我已知晓,确认删除',
+    namespaceName: '专属实例名称/ID',
     toggleStatusSuccess: '更新成功，请等待实例状态切换',
-    statusText: "当前实例目前是",
-    status: "状态",
-    changeVisibility: "修改实例可见性",
-    visibility: "实例可见性",
-    privateVis: "只有创建者或组织成员可见",
-    publicVis: "任何人都可以看到此实例",
-    privateInfo: "，仅创建者或者组织管理员可进行修改",
-    publicInfo: "， 任何互联网上的人都可以看到此实例。",
-    resource: "资源配置",
-    resourceTip: "您可以随时在实例设置中切换到不同的实例云资源。切换到付费资源后，将根据使用时长向您收取费用。",
+    statusText: '当前实例目前是',
+    status: '状态',
+    changeVisibility: '修改实例可见性',
+    visibility: '实例可见性',
+    privateVis: '只有创建者或组织成员可见',
+    publicVis: '任何人都可以看到此实例',
+    privateInfo: '，仅创建者或者组织管理员可进行修改',
+    publicInfo: '， 任何互联网上的人都可以看到此实例。',
+    resource: '资源配置',
+    resourceTip:
+      '您可以随时在实例设置中切换到不同的实例云资源。切换到付费资源后，将根据使用时长向您收取费用。',
     currentCloudResource: '当前云资源',
-    framework: "运行时框架",
+    framework: '运行时框架',
     currentFramework: '当前运行时框架',
-    maxReplica: "最大弹性副本",
-    minReplica: "最小弹性副本",
-    currentMaxReplica: "当前最大弹性副本",
-    currentMinReplica: "当前最小弹性副本"
+    maxReplica: '最大弹性副本',
+    minReplica: '最小弹性副本',
+    currentMaxReplica: '当前最大弹性副本',
+    currentMinReplica: '当前最小弹性副本'
   },
   playground: {
     title: "沙盒",
@@ -95,30 +96,41 @@ export const endpoints = {
     wgDec: '文生图',
     wgBtn: '图片生成',
     imageText: '图文生成',
-    retry: "重试",
-    undo: "撤销",
-    clear: "清空",
+    retry: '重试',
+    undo: '撤销',
+    clear: '清空',
+    copyUrl: '复制链接'
   },
   analysis: {
-    selectPeriod: "选择时间范围",
-    selectedInstance: "选择实例",
-    noInstances: "没有运行中的实例",
-    httpCount: "HTTP 请求数量",
-    httpCountForLatency: "HTTP 请求数量延迟分布",
-    cpuUsage: "CPU 占用(%)",
-    memoryUsage: "内存 占用(GB)",
-    refresh: "刷新",
-    replica: "副本",
-    totalRequests: "总请求数",
-    thirty_m: "最近 30 分钟",
-    one_h: "最近 1 小时",
-    three_h: "最近 3 小时",
-    six_h: "最近 6 小时",
-    twelve_h: "最近 12 小时",
-    one_d: "最近 1 天",
-    three_d: "最近 3 天",
-    one_w: "最近 1 周",
-    usageInPercent: "用量百分比",
-    usageInGb: "用量GB",
+    selectPeriod: '选择时间范围',
+    selectedInstance: '选择实例',
+    noInstances: '没有运行中的实例',
+    httpCount: 'HTTP 请求数量',
+    httpCountForLatency: 'HTTP 请求数量延迟分布',
+    cpuUsage: 'CPU 占用(%)',
+    memoryUsage: '内存 占用(GB)',
+    refresh: '刷新',
+    replica: '副本',
+    totalRequests: '总请求数',
+    thirty_m: '最近 30 分钟',
+    one_h: '最近 1 小时',
+    three_h: '最近 3 小时',
+    six_h: '最近 6 小时',
+    twelve_h: '最近 12 小时',
+    one_d: '最近 1 天',
+    three_d: '最近 3 天',
+    one_w: '最近 1 周',
+    usageInPercent: '用量百分比',
+    usageInGb: '用量GB'
+  },
+  timeDurations: {
+    '10mins': '最近 10 分钟',
+    '30mins': '最近 30 分钟',
+    '1hour': '最近 1 小时',
+    '6hours': '最近 6 小时',
+    '1day': '最近 1 天',
+    '2days': '最近 2 天',
+    '1week': '最近 1 周',
+    'all': '全部'
   }
-}
\ No newline at end of file
+}