diff --git a/src/components/TopMenuSection.test.ts b/src/components/TopMenuSection.test.ts index 944ce714c..5943dcc15 100644 --- a/src/components/TopMenuSection.test.ts +++ b/src/components/TopMenuSection.test.ts @@ -1,18 +1,12 @@ import { createTestingPinia } from '@pinia/testing' import { mount } from '@vue/test-utils' -import type { MenuItem } from 'primevue/menuitem' import { beforeEach, describe, expect, it, vi } from 'vitest' -import { computed, nextTick } from 'vue' +import { computed } from 'vue' import { createI18n } from 'vue-i18n' import TopMenuSection from '@/components/TopMenuSection.vue' import CurrentUserButton from '@/components/topbar/CurrentUserButton.vue' import LoginButton from '@/components/topbar/LoginButton.vue' -import type { - JobListItem, - JobStatus -} from '@/platform/remote/comfyui/jobs/jobTypes' -import { TaskItemImpl, useQueueStore } from '@/stores/queueStore' import { isElectron } from '@/utils/envUtil' const mockData = vi.hoisted(() => ({ isLoggedIn: false })) @@ -43,8 +37,7 @@ function createWrapper() { queueProgressOverlay: { viewJobHistory: 'View job history', expandCollapsedQueue: 'Expand collapsed queue', - activeJobsShort: '{count} active | {count} active', - clearQueueTooltip: 'Clear queue' + activeJobsShort: '{count} active | {count} active' } } } @@ -56,14 +49,11 @@ function createWrapper() { plugins: [createTestingPinia({ createSpy: vi.fn }), i18n], stubs: { SubgraphBreadcrumb: true, + ComfyActionbar: true, + QueueInlineProgressSummary: true, QueueProgressOverlay: true, CurrentUserButton: true, - LoginButton: true, - ContextMenu: { - name: 'ContextMenu', - props: ['model'], - template: '
' - } + LoginButton: true }, directives: { tooltip: () => {} @@ -72,19 +62,6 @@ function createWrapper() { }) } -function createJob(id: string, status: JobStatus): JobListItem { - return { - id, - status, - create_time: 0, - priority: 0 - } -} - -function createTask(id: string, status: JobStatus): TaskItemImpl { - return new TaskItemImpl(createJob(id, status)) -} - describe('TopMenuSection', () => { beforeEach(() => { vi.resetAllMocks() @@ -126,39 +103,4 @@ describe('TopMenuSection', () => { }) }) }) - - it('shows the active jobs label with the current count', async () => { - const wrapper = createWrapper() - const queueStore = useQueueStore() - queueStore.pendingTasks = [createTask('pending-1', 'pending')] - queueStore.runningTasks = [ - createTask('running-1', 'in_progress'), - createTask('running-2', 'in_progress') - ] - - await nextTick() - - const queueButton = wrapper.find('[data-testid="queue-overlay-toggle"]') - expect(queueButton.text()).toContain('3 active') - }) - - it('disables the clear queue context menu item when no queued jobs exist', () => { - const wrapper = createWrapper() - const menu = wrapper.findComponent({ name: 'ContextMenu' }) - const model = menu.props('model') as MenuItem[] - expect(model[0]?.label).toBe('Clear queue') - expect(model[0]?.disabled).toBe(true) - }) - - it('enables the clear queue context menu item when queued jobs exist', async () => { - const wrapper = createWrapper() - const queueStore = useQueueStore() - queueStore.pendingTasks = [createTask('pending-1', 'pending')] - - await nextTick() - - const menu = wrapper.findComponent({ name: 'ContextMenu' }) - const model = menu.props('model') as MenuItem[] - expect(model[0]?.disabled).toBe(false) - }) }) diff --git a/src/components/TopMenuSection.vue b/src/components/TopMenuSection.vue index 064f3d53d..64eacf680 100644 --- a/src/components/TopMenuSection.vue +++ b/src/components/TopMenuSection.vue @@ -1,126 +1,94 @@ diff --git a/src/components/queue/QueueInlineProgress.vue b/src/components/queue/QueueInlineProgress.vue new file mode 100644 index 000000000..2a1e1bf47 --- /dev/null +++ b/src/components/queue/QueueInlineProgress.vue @@ -0,0 +1,32 @@ + + + diff --git a/src/components/queue/QueueInlineProgressSummary.vue b/src/components/queue/QueueInlineProgressSummary.vue new file mode 100644 index 000000000..91cd2baa1 --- /dev/null +++ b/src/components/queue/QueueInlineProgressSummary.vue @@ -0,0 +1,62 @@ + + + diff --git a/src/composables/queue/useCurrentNodeName.ts b/src/composables/queue/useCurrentNodeName.ts new file mode 100644 index 000000000..ffe1cceef --- /dev/null +++ b/src/composables/queue/useCurrentNodeName.ts @@ -0,0 +1,23 @@ +import { computed } from 'vue' +import { useI18n } from 'vue-i18n' + +import { st } from '@/i18n' +import { useExecutionStore } from '@/stores/executionStore' +import { normalizeI18nKey } from '@/utils/formatUtil' + +export function useCurrentNodeName() { + const { t } = useI18n() + const executionStore = useExecutionStore() + + const currentNodeName = computed(() => { + const node = executionStore.executingNode + if (!node) return t('g.emDash') + const title = (node.title ?? '').toString().trim() + if (title) return title + const nodeType = (node.type ?? '').toString().trim() || t('g.untitled') + const key = `nodeDefs.${normalizeI18nKey(nodeType)}.display_name` + return st(key, nodeType) + }) + + return { currentNodeName } +} diff --git a/src/composables/queue/useJobList.ts b/src/composables/queue/useJobList.ts index b745a7103..f0b68b88e 100644 --- a/src/composables/queue/useJobList.ts +++ b/src/composables/queue/useJobList.ts @@ -1,8 +1,8 @@ import { computed, onUnmounted, ref, watch } from 'vue' import { useI18n } from 'vue-i18n' +import { useCurrentNodeName } from '@/composables/queue/useCurrentNodeName' import { useQueueProgress } from '@/composables/queue/useQueueProgress' -import { st } from '@/i18n' import { isCloud } from '@/platform/distribution/types' import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore' import { useExecutionStore } from '@/stores/executionStore' @@ -16,7 +16,6 @@ import { isToday, isYesterday } from '@/utils/dateTimeUtil' -import { normalizeI18nKey } from '@/utils/formatUtil' import { buildJobDisplay } from '@/utils/queueDisplay' import { jobStateFromTask } from '@/utils/queueUtil' @@ -168,6 +167,7 @@ export function useJobList() { }) const { totalPercent, currentNodePercent } = useQueueProgress() + const { currentNodeName } = useCurrentNodeName() const relativeTimeFormatter = computed(() => { const localeValue = locale.value @@ -183,16 +183,6 @@ export function useJobList() { const isJobInitializing = (promptId: string | number | undefined) => executionStore.isPromptInitializing(promptId) - const currentNodeName = computed(() => { - const node = executionStore.executingNode - if (!node) return t('g.emDash') - const title = (node.title ?? '').toString().trim() - if (title) return title - const nodeType = (node.type ?? '').toString().trim() || t('g.untitled') - const key = `nodeDefs.${normalizeI18nKey(nodeType)}.display_name` - return st(key, nodeType) - }) - const selectedJobTab = ref('All') const selectedWorkflowFilter = ref<'all' | 'current'>('all') const selectedSortMode = ref('mostRecent') diff --git a/src/locales/en/main.json b/src/locales/en/main.json index ecaed4620..755f8167d 100644 --- a/src/locales/en/main.json +++ b/src/locales/en/main.json @@ -733,6 +733,7 @@ "title": "Queue Progress", "total": "Total: {percent}", "colonPercent": ": {percent}", + "inlineTotalLabel": "Total", "currentNode": "Current node:", "viewAllJobs": "View all jobs", "viewList": "List view",