NAS-139093 / 26.04 / feat: add auto-expand to jobs page and improve details for error modals

[mattwyatt-ix]

Changes:
the error dialog we pop up when clicking on a failed job's state button didn't provide any information beyond the error message we got from middleware. specifically, in the case for a failed rsync task, the message we displayed from middleware directed the user to Check logs for further information, but our popup didn't show any indication of how to get there. this PR improves that experience a little bit.

• add a URL parameter and handling to the jobs list page. this allows us to navigate to the jobs page and have it immediately expand one of the rows if we want to highlight something.
• expanding any of the rows on the jobs list page now updates the URL parameter too. this was implemented for consistency between refreshes so the same row would stay expanded, but it also has the neat effect of making those links shareable.
• add logic to the showErrorModal function used throughout the codebase to show a View Details and a Download Logs button when logs are available.
• fix a slightly unrelated bug where we were mutating an argument inside a function, which was causing the rsync tasks card not to show all the tasks.

Testing:
there are a few different test cases to work through here. otherwise, just click around on the jobs page and anywhere you can see a failed job. try to make sure the whole UX is consistent and behaves as one would expect.

case 1:

1. create an rsync task (or any other task) and have it fail.
2. click on the big red FAILED button on the job's table row and observe the two new buttons.
3. observe that its logs are downloadable and that the View Details button takes you to the jobs page and automatically expands the proper job's row.

case 2:

1. manually run your task and wait for it to fail.
2. you should observe a popup that also has the two new buttons. they should behave the same way as in the prior test case.

case 3:

1. on the jobs list page, access the jobs dialog in the top right and click on a failed job.
2. observe that it expands the proper row on the jobs page.

Screenshots and screen recordings:

the new error popup

Screencast_20260105_094426.webm

Downstream

Affects	Reasoning
Documentation
Testing

[claude]

Claude finished @mattwyatt-ix's task —— View job

---

Code Review Complete! ✅

Great work on improving the jobs page UX and error handling! The implementation is solid with comprehensive tests. Here are my findings:

🎯 Positive Aspects

Nice implementation of the auto-expand feature with clean URL parameter handling and the synchronization between expanded state and URL is elegant. The bug fix for rsync task mutation is well-spotted and properly resolved with the spread operators.

🔍 Issues Found

Critical Issue in jobs-list.component.ts:157

The combineLatest + take(1) pattern has a potential race condition:

combineLatest([jobsTrigger$.pipe(take(1)), queryTrigger$])

Problem: take(1) completes the jobsTrigger$ stream immediately after first emission. If queryTrigger$ emits again (e.g., user clicks a different job), combineLatest won't emit because one source is completed.

Impact: URL navigation to jobs might work only once. Subsequent navigations via URL parameter changes won't trigger auto-expansion.

Fix: Use takeUntilDestroyed on the entire combineLatest instead:

combineLatest([
  jobsTrigger$.pipe(take(1)),
  queryTrigger$,
]).pipe(takeUntilDestroyed(this.destroyRef)).subscribe(...)

Actually, looking more carefully, the current implementation might work for the initial load + all query param changes since queryTrigger$ stays active. However, the comment at line 155-156 is misleading - it says preventing "job updates re-triggering row expansion" but that's already handled by take(1) on just the first observable. Consider clarifying the comment.

🐛 Minor Issues

1. Missing i18n in error-parser.service.ts:203-206

The action labels are wrapped in translate.instant(), but the route params might need localization consideration. Verify that /jobs route works correctly across all locales. This is likely fine but worth verifying.

2. Test coverage gaps

According to Codecov, error-parser.service.ts has 4 lines missing coverage (42.85% on new lines). Looking at the test file, the logs property assignment at line 207 isn't tested when logs_excerpt is falsy. Consider adding a test case:

it('does not include logs property when logs_excerpt is empty', () => {
  const jobWithoutLogs = { ...failedJob, logs_excerpt: null };
  const result = spectator.service.parseError(new FailedJobError(jobWithoutLogs));
  expect(result.logs).toBeUndefined();
});

3. Component coupling in ix-cell-state-button.component.ts:146

Direct construction of FailedJobError couples the component to error handling implementation. Consider if this could be simplified by passing the job directly to showErrorModal and let the error handler construct the appropriate error type. However, this is a minor architectural point and current implementation is acceptable.

💡 Suggestions

jobs-list.component.ts:171-177 - The onRowExpanded method always updates URL parameters even if the same row is re-expanded. Consider adding a check:

protected onRowExpanded(job: Job): void {
  const currentJobId = this.route.snapshot.queryParams.jobId;
  if (currentJobId === String(job.id)) return;
  
  this.router.navigate([], {
    relativeTo: this.route,
    queryParams: { jobId: job.id },
    queryParamsHandling: 'merge',
  });
}

This prevents unnecessary URL updates when clicking the same expanded row.

📊 Test Quality

Tests are well-structured using harnesses (excellent!). The auto-expand test cases in jobs-list.component.spec.ts are comprehensive. Good use of minimal mock data with as Interface casting.

✨ Overall Assessment

Solid feature implementation with good UX improvements and mostly excellent test coverage - just needs the race condition investigation and minor test coverage improvements.

[bugclerk]

Jira URL: https://ixsystems.atlassian.net/browse/NAS-139093

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 86.77%. Comparing base (297a642) to head (87fb5c7).
⚠️ Report is 8 commits behind head on master.
✅ All tests successful. No failed tests found.

Additional details and impacted files

@@            Coverage Diff             @@
##           master   #13059      +/-   ##
==========================================
+ Coverage   86.71%   86.77%   +0.06%     
==========================================
  Files        1847     1847              
  Lines       69415    69475      +60     
  Branches     8585     8601      +16     
==========================================
+ Hits        60193    60287      +94     
+ Misses       9222     9188      -34     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.