feat: show active jobs label in top menu #8169
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
dosubot
bot
added
the
size:M
Contributor
|
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. 📝 WalkthroughWalkthroughCentralizes active job count into the Pinia queue store as Changes
Sequence Diagram(s)sequenceDiagram
participant User as User
participant Comp as TopMenuSection
participant Store as queueStore
participant I18n as useI18n
User->>Comp: open UI / view header
Comp->>Store: read storeToRefs(...).activeJobsCount
Store-->>Comp: activeJobsCount (computed from pending+running)
Comp->>I18n: n('queueProgressOverlay.activeJobsShort', activeJobsCount)
I18n-->>Comp: formatted activeJobsLabel
Comp->>User: render activeJobsLabel in header
Possibly related PRs
Suggested reviewers
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
🎭 Playwright Tests:
|
🎨 Storybook Build Status✅ Build completed successfully! ⏰ Completed at: 01/22/2026, 02:33:54 AM UTC 🔗 Links🎉 Your Storybook is ready for review! |
Bundle Size ReportSummary
Category Glance Per-category breakdownApp Entry Points — 22.3 kB (baseline 22.3 kB) • ⚪ 0 BMain entry bundles and manifests
Status: 1 added / 1 removed Graph Workspace — 1.02 MB (baseline 1.02 MB) • 🔴 +65 BGraph editor runtime, canvas, workflow orchestration
Status: 1 added / 1 removed Views & Navigation — 80.7 kB (baseline 80.7 kB) • ⚪ 0 BTop-level views, pages, and routed surfaces
Status: 11 added / 11 removed Panels & Settings — 430 kB (baseline 430 kB) • ⚪ 0 BConfiguration panels, inspectors, and settings screens
Status: 19 added / 19 removed User & Accounts — 3.94 kB (baseline 3.94 kB) • ⚪ 0 BAuthentication, profile, and account management bundles
Status: 3 added / 3 removed Editors & Dialogs — 2.8 kB (baseline 2.8 kB) • ⚪ 0 BModals, dialogs, drawers, and in-app editors
Status: 2 added / 2 removed UI Components — 32.8 kB (baseline 32.8 kB) • ⚪ 0 BReusable component library chunks
Status: 6 added / 6 removed Data & Services — 3.06 MB (baseline 3.06 MB) • 🟢 -149 BStores, services, APIs, and repositories
Status: 8 added / 8 removed Utilities & Hooks — 18.1 kB (baseline 18.1 kB) • ⚪ 0 BHelpers, composables, and utility bundles
Status: 4 added / 4 removed Vendor & Third-Party — 10.4 MB (baseline 10.4 MB) • ⚪ 0 BExternal libraries and shared vendor chunks
Other — 6.28 MB (baseline 6.28 MB) • 🟢 -825 BBundles that do not match a named category
Status: 71 added / 72 removed |
Contributor
There was a problem hiding this comment.
Pull request overview
This PR replaces the queue history icon with a localized text label showing the count of active jobs (e.g., "5 active") in the top menu bar, making the active job count immediately visible without hovering.
Changes:
- Added new translation key
activeJobsShortwith format{count} activefor the compact label - Replaced icon-based queue button with text-based button showing active jobs count
- Changed button from
size="icon"tosize="md"with custom padding to accommodate text
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| src/locales/en/main.json | Added new activeJobsShort translation key for compact active jobs label |
| src/components/TopMenuSection.vue | Replaced history icon and badge with active jobs text label; added computed properties for active jobs count and label |
| src/components/TopMenuSection.test.ts | Added activeJobsShort translation to test i18n configuration |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/components/TopMenuSection.test.ts (1)
30-61: Add coverage for the active-jobs label rendering.Line 36–41 adds the i18n string, but the test suite still only checks auth state. Please add a test that sets queue state and asserts the button label shows the formatted active jobs count (e.g., “1 active”, “2 active”). This guards the new UI behavior and count correctness. As per coding guidelines, tests should cover new UI changes.
🤖 Fix all issues with AI agents
In `@src/components/TopMenuSection.vue`:
- Around line 44-57: Remove the aria-label prop from the Button in
TopMenuSection.vue (the Button using :aria-pressed="isQueueOverlayExpanded" and
`@click`="toggleQueueOverlay") since visible text ({{ activeJobsLabel }}) is
present; instead add an SR-only (screen-reader-only) action label inside the
Button that contains the translated action text
t('sideToolbar.queueProgressOverlay.expandCollapsedQueue') so assistive tech
reads the action while the visible count remains, and keep :aria-pressed and
`@click` as-is.
coderabbitai
bot
requested review from
KarryCharon,
Yorha4D,
christian-byrne and
shinshin86
benceruleanlu
removed request for
KarryCharon,
Yorha4D,
christian-byrne and
shinshin86
github-actions
bot
removed
the
New Browser Test Expectations
dosubot
bot
added
size:XS
benceruleanlu
added
the
New Browser Test Expectations
benceruleanlu
removed
the
New Browser Test Expectations
Contributor
There was a problem hiding this comment.
Actionable comments posted: 0
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
browser_tests/fixtures/utils/litegraphUtils.ts (1)
121-132: Reintroduce lint suppression or remove the console.log (CI currently fails).The lint pipeline is failing on
no-consoleat Line 123, so this must be fixed before merge. Either remove the debug log or explicitly suppress it with a targeted ESLint directive.🛠️ Proposed fix (targeted suppression)
- // Debug logging - convert Float64Arrays to regular arrays for visibility - - console.log( + // Debug logging - convert Float64Arrays to regular arrays for visibility + // eslint-disable-next-line no-console + console.log( `NodeSlotReference debug for ${type} slot ${index} on node ${id}:`, { nodePos: [node.pos[0], node.pos[1]], nodeSize: [node.size[0], node.size[1]], rawConnectionPos: [rawPos[0], rawPos[1]], convertedPos: [convertedPos[0], convertedPos[1]], currentGraphType: window['app'].canvas.graph.constructor.name } )
benceruleanlu
force-pushed
the
feat/top-menu-active-jobs-label
branch
from
cf960ed to
1c442ea
Compare
benceruleanlu
added
the
New Browser Test Expectations
github-actions
bot
removed
the
New Browser Test Expectations
dosubot
bot
added
size:M
Contributor
There was a problem hiding this comment.
Actionable comments posted: 0
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/components/TopMenuSection.vue (1)
118-139: Reuse the store’sactiveJobsCountto avoid duplication.
Now that the store exposesactiveJobsCount, use it directly to keep the source of truth centralized.As per coding guidelines, keep derived state centralized to avoid duplication.♻️ Suggested refactor
const commandStore = useCommandStore() const queueStore = useQueueStore() const queueUIStore = useQueueUIStore() const { isOverlayExpanded: isQueueOverlayExpanded } = storeToRefs(queueUIStore) +const { activeJobsCount } = storeToRefs(queueStore) const releaseStore = useReleaseStore() ... -const activeJobsCount = computed( - () => queueStore.pendingTasks.length + queueStore.runningTasks.length -) const activeJobsLabel = computed(() => { const count = activeJobsCount.value return t(
♻️ Duplicate comments (1)
src/components/TopMenuSection.test.ts (1)
123-135: Prefer accessible queries over data-testid in this test.
This matches prior feedback to align tests with user-facing behavior.Based on learnings, prefer accessible selectors and text content over data-testid.
christian-byrne
approved these changes
Jan 22, 2026
godwiniheuwa
pushed a commit
to godwiniheuwa/ComfyUI_frontend
that referenced
this pull request
Jan 22, 2026
Replace the top-menu queue history icon with a localized “N active” label so active jobs are visible at a glance. Requested as part of the new [designs](https://www.figma.com/design/LVilZgHGk5RwWOkVN6yCEK/Queue-Progress-Modal?node-id=3381-6181&m=dev). I checked all failing snapshots and they are all expected (1 flaky). ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-8169-feat-show-active-jobs-label-in-top-menu-2ee6d73d3650812cbf0cda389395c563) by [Unito](https://www.unito.io) --------- Co-authored-by: github-actions <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Replace the top-menu queue history icon with a localized “N active” label so active jobs are visible at a glance.
Requested as part of the new designs.
I checked all failing snapshots and they are all expected (1 flaky).
┆Issue is synchronized with this Notion page by Unito