Csghub feature notebook (#1418)

* Main  feature notebook

* feature-notebook-fix-logs-1

* feature-add-notebook-instance-wakeup-btn

* merge  feature-notebook

---------

Co-authored-by: Jiuling.Lei <[email protected]>

Author: ice201508

frontend/public/images/icons/laptop-notebook.svg

@@ -0,0 +1,123 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { mount } from '@vue/test-utils'
+import NotebookDetail from '@/components/notebooks/NotebookDetail.vue'
+
+// Mock vue-router usage is minimal here; component uses provide/inject and props.
+
+// Mock vue3-cookies
+vi.mock('vue3-cookies', () => ({
+  useCookies: () => ({ cookies: { get: vi.fn(() => 'mock-jwt') } })
+}))
+
+// Mock RepoHeader/RepoTabs/LoadingSpinner
+vi.mock('@/components/shared/RepoHeader.vue', () => ({
+  default: { name: 'RepoHeader', template: '<div>RepoHeader</div>' }
+}))
+vi.mock('@/components/shared/RepoTabs.vue', () => ({
+  default: { name: 'RepoTabs', template: '<div>RepoTabs</div>' }
+}))
+vi.mock('@/components/shared/LoadingSpinner.vue', () => ({
+  default: { name: 'LoadingSpinner', props: ['loading','text'], template: '<div v-if="loading">loading</div>' }
+}))
+
+// Mock RepoTabStore
+vi.mock('@/stores/RepoTabStore', () => ({
+  useRepoTabStore: () => ({ setRepoTab: vi.fn() })
+}))
+
+// Mock RepoDetailStore
+const storeState = () => ({
+  deployName: '', id: '', status: '', hardware: '', notebookResource: '',
+  repositoryId: 0, deployId: 0, nickName: '', description: '', endpoint: '',
+  modelId: '', clusterId: '', privateVisibility: false, actualReplica: 0,
+  activeInstance: '', failedReason: '', repoType: 'notebook',
+  initialize: vi.fn(function (data) {
+    this.deployName = data.deploy_name || 'nb-name'
+    this.id = String(data.id || '1')
+    this.status = data.status || 'Running'
+    this.hardware = data.hardware || 'GPU'
+    this.notebookResource = data.resource_name || 'r1'
+    this.repositoryId = data.repository_id || 1
+    this.deployId = data.deploy_id || 2
+    this.endpoint = data.endpoint || 'nb.endpoint'
+  })
+})
+vi.mock('@/stores/RepoDetailStore', () => ({
+  default: () => ({ ...storeState(), isInitialized: { value: true } })
+}))
+
+// Mock Element Plus
+vi.mock('element-plus', () => ({ ElMessage: vi.fn() }))
+
+// Mock utils
+vi.mock('@/packs/utils', () => ({ ToNotFoundPage: vi.fn() }))
+
+// Mock refreshJWT
+vi.mock('@/packs/refreshJWT.js', () => ({ default: vi.fn() }))
+
+// Mock fetch-event-source for status sse
+vi.mock('@microsoft/fetch-event-source', () => ({
+  fetchEventSource: vi.fn((url, opts) => {
+    setTimeout(() => {
+      opts.onopen && opts.onopen({ ok: true, status: 200 })
+      opts.onmessage && opts.onmessage({ data: JSON.stringify({ status: 'Running', details: [{ name: 'pod-1' }] }) })
+    }, 10)
+    return { close: vi.fn() }
+  })
+}))
+
+// Mock API
+const apiMock = vi.fn((url) => ({
+  json: () => {
+    if (url.startsWith('/notebooks/')) {
+      return Promise.resolve({
+        response: { value: { status: 200 } },
+        data: { value: { data: {
+          id: 1,
+          namespace: { Path: 'tester', Type: 'user', Avatar: '' },
+          deploy_id: 2,
+          repository_id: 3,
+          deploy_name: 'NB Demo',
+          status: 'Running',
+          hardware: 'A100',
+          endpoint: 'nb.endpoint',
+          resource_id: 11,
+          order_detail_id: 101,
+          resource_name: 'GPU-A100'
+        } } },
+        error: { value: null }
+      })
+    }
+    return Promise.resolve({ data: { value: { data: [] } }, error: { value: null }, response: { value: { status: 200 } } })
+  }
+}))
+vi.mock('@/packs/useFetchApi', () => ({ default: (url) => apiMock(url) }))
+
+const createWrapper = async (props = {}) => {
+  global.ENABLE_HTTPS = 'false'
+  const wrapper = mount(NotebookDetail, {
+    global: {
+      provide: { csghubServer: 'http://server' }
+    },
+    props: { notebookId: '1', notebookName: 'nb', ...props }
+  })
+  await new Promise(r => setTimeout(r, 60))
+  await wrapper.vm.$nextTick()
+  return wrapper
+}
+
+describe('NotebookDetail', () => {
+  beforeEach(() => apiMock.mockClear())
+
+  it('mounts and fetches detail', async () => {
+    const wrapper = await createWrapper()
+    expect(wrapper.exists()).toBe(true)
+    expect(apiMock).toHaveBeenCalledWith('/notebooks/1')
+  })
+
+  it('connects status SSE and updates store fields', async () => {
+    const wrapper = await createWrapper()
+    await new Promise(r => setTimeout(r, 100))
+    expect(wrapper.vm.repoDetailStore.status).toBe('Running')
+  })
+})

frontend/public/images/icons/notebook_new.svg

@@ -0,0 +1,53 @@
+import { describe, it, expect, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import NotebookItem from '@/components/notebooks/NotebookItem.vue'
+
+// Mock sub components used inside
+vi.mock('@/components/application_spaces/AppStatus.vue', () => ({
+  default: { name: 'AppStatus', template: '<div>AppStatus</div>' }
+}))
+vi.mock('@/components/application_spaces/AppPayMode.vue', () => ({
+  default: { name: 'AppPayMode', template: '<div>AppPayMode</div>' }
+}))
+
+// Mock clipboard util
+const copySpy = vi.fn()
+vi.mock('@/packs/clipboard', () => ({ copyToClipboard: (...args) => copySpy(...args) }))
+
+const mountItem = (notebook) => mount(NotebookItem, {
+  global: { stubs: { SvgIcon: { template: '<div />' } } },
+  props: { notebook }
+})
+
+describe('NotebookItem', () => {
+  it('renders and copies endpoint when running', async () => {
+    const wrapper = mountItem({
+      id: 1,
+      deploy_name: 'nb',
+      status: 'Running',
+      endpoint: 'nb.endpoint',
+      hardware: 'GPU',
+      pay_mode: 'postpaid',
+      runtime_framework: 'PyTorch',
+      runtime_framework_version: '2.1',
+      resource_name: 'A100'
+    })
+
+    // copy button exists and triggers copy
+    const copyContainer = wrapper.find('div[class*="rounded-br-xl"]')
+    expect(copyContainer.exists()).toBe(true)
+    await copyContainer.trigger('click')
+    expect(copySpy).toHaveBeenCalledWith('nb.endpoint')
+  })
+
+  it('detailLink navigates to notebook detail by id', async () => {
+    const originalHref = window.location.href
+    Object.defineProperty(window, 'location', { value: { href: '' }, writable: true })
+
+    const wrapper = mountItem({ id: 123, deploy_name: 'nb', status: 'Stopped' })
+    await wrapper.trigger('click')
+    expect(window.location.href).toBe('/notebooks/123')
+
+    window.location.href = originalHref
+  })
+})

frontend/src/components/__tests__/notebooks/NotebookDetail.spec.js

@@ -0,0 +1,90 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { mount } from '@vue/test-utils'
+import NotebookLogs from '@/components/notebooks/NotebookLogs.vue'
+
+// Mock RepoDetailStore with activeInstance
+vi.mock('@/stores/RepoDetailStore.js', () => ({
+  default: vi.fn(() => ({
+    activeInstance: 'pod-1',
+    status: 'Running',
+    isInitialized: true
+  }))
+}))
+
+// Mock vue3-cookies
+vi.mock('vue3-cookies', () => ({
+  useCookies: () => ({ cookies: { get: vi.fn(() => 'mock-jwt') } })
+}))
+
+// Mock refreshJWT
+vi.mock('@/packs/refreshJWT.js', () => ({ default: vi.fn() }))
+
+// Mock CsgButton
+vi.mock('@/components/shared/CsgButton.vue', () => ({
+  default: { name: 'CsgButton', template: '<button @click="$emit(\'click\')"><slot /></button>' }
+}))
+
+// Capture created anchors for download
+const createElementSpy = vi.spyOn(document, 'createElement')
+
+// Mock fetch-event-source
+const fesMock = vi.fn((url, opts) => {
+  setTimeout(() => {
+    opts.onopen && opts.onopen({ ok: true, status: 200 })
+    // push a Container event log line
+    opts.onmessage && opts.onmessage({ event: 'Container', data: 'line-1' })
+  }, 10)
+  return { close: vi.fn() }
+})
+vi.mock('@microsoft/fetch-event-source', () => ({ fetchEventSource: (...args) => fesMock(...args) }))
+
+const mountLogs = async (props = {}) => {
+  const wrapper = mount(NotebookLogs, {
+    global: {
+      provide: { csghubServer: 'http://server' }
+    },
+    props: { instances: [{ name: 'pod-1' }], notebookId: '1', deployId: 2, ...props }
+  })
+  await new Promise(r => setTimeout(r, 60))
+  await wrapper.vm.$nextTick()
+  return wrapper
+}
+
+describe('NotebookLogs', () => {
+  beforeEach(() => {
+    fesMock.mockClear()
+  })
+
+  it('connects logs SSE on mount and appends logs', async () => {
+    const wrapper = await mountLogs()
+    
+    // 等待组件完成初始化和异步操作
+    await new Promise(r => setTimeout(r, 50))
+    
+    // 验证 fetchEventSource 被调用
+    expect(fesMock).toHaveBeenCalled()
+    
+    // 等待 onmessage 被处理
+    await new Promise(r => setTimeout(r, 50))
+    
+    // 验证日志内容被正确渲染
+    expect(wrapper.html()).toContain('line-1')
+  })
+
+  // it('downloadLog generates file', async () => {
+  //   const linkMock = { href: '', click: vi.fn() }
+  //   createElementSpy.mockImplementation((tag) => {
+  //     if (tag === 'a') return linkMock
+  //     // Call the original, un-spied function
+  //     return createElementSpy.mock.original.call(document, tag)
+  //   })
+
+  //   const wrapper = await mountLogs()
+  //   await new Promise(r => setTimeout(r, 80))
+
+  //   // trigger download via button
+  //   const btn = wrapper.find('button')
+  //   await btn.trigger('click')
+  //   expect(linkMock.click).toHaveBeenCalled()
+  // })
+})