EDM-4014 device logs cancel

[celdrake]

Several improvements to Device logs:

1. Adds a cancel button so that if the search is stuck users can create a new one.

2. When user searched for logs with some response and they perform a new search, we now clear the old logs and ensure we show a spinner for a minimum amount of time. Otherwise the second retrieval might happen too fast and the user might not perceive that they are now looking at the new logs.

3. Whenever the logCategory changes, we reset the filters. This is because not all filters are valid in each category.

4. Improvements around "liveLogs": it behaves more consistently, and the Disconnected banner will also be displayed when the device disconnects while streaming logs.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Enterprise

Run ID: 97a8d54f-c63b-4d9e-9493-fbf86cc7ad39

📥 Commits

Reviewing files that changed from the base of the PR and between 9024bb3 and da783dd.

📒 Files selected for processing (6)

• libs/ui-components/src/components/Device/DeviceDetails/DeviceLogsEmptyState.tsx
• libs/ui-components/src/components/Device/DeviceDetails/DeviceLogsInnerToolbar.tsx
• libs/ui-components/src/components/Device/DeviceDetails/DeviceLogsSearchToolbar.tsx
• libs/ui-components/src/components/Device/DeviceDetails/DeviceLogsTab.tsx
• libs/ui-components/src/hooks/useDeviceLogs.ts
• libs/ui-components/src/utils/deviceLogs.ts

🚧 Files skipped from review as they are similar to previous changes (5)

• libs/ui-components/src/utils/deviceLogs.ts
• libs/ui-components/src/components/Device/DeviceDetails/DeviceLogsEmptyState.tsx
• libs/ui-components/src/components/Device/DeviceDetails/DeviceLogsSearchToolbar.tsx
• libs/ui-components/src/hooks/useDeviceLogs.ts
• libs/ui-components/src/components/Device/DeviceDetails/DeviceLogsTab.tsx

---

Summary by CodeRabbit

• New Features

  • Added explicit start/stop live-log controls and a cancel-search action.

• Improvements

  • Smoother loading with a minimum spinner delay.
  • More robust session and streaming handling to prevent stale or out-of-order log updates.
  • Category changes now reset search filters predictably; toolbars reflect snapshot vs live states.

• Style

  • Fixed disconnect-banner retry link color for better contrast.

Walkthrough

Device logs search control flow is refactored to distinguish snapshot and live-stream modes with improved request generation tracking. The hook API splits into fetchSnapshot and startLiveStream; components receive explicit handlers for each mode; the tab implements dual-path submission logic with pending-delay UI management.

Changes

Device logs dual-mode search

Layer / File(s)	Summary
Form reset utility helper libs/ui-components/src/utils/deviceLogs.ts	getDeviceLogsFormResetValues() exports a helper that resets search form fields to initial defaults while preserving the selected category.
Hook refactoring for dual-mode search with generation tracking libs/ui-components/src/hooks/useDeviceLogs.ts	Refactored useDeviceLogs hook to split search into snapshot and live modes. Added cancellation sentinel constants, new refs for connect rejection, active search identity, request generation, and streaming state. Reworked WebSocket lifecycle with handler cleanup before close. Introduced executeLogRequest(params, mode) supporting both snapshot (with optional file probe) and live (with incremental streaming) modes, tracking request generation to ignore stale frames. Updated handleConsoleFrame with isActiveSearch guards to prevent mutations from non-current requests. Public API now exposes fetchSnapshot, startLiveStream, and clearLiveLogsPreference instead of single search flow.
Component contract updates for dual-mode handlers libs/ui-components/src/components/Device/DeviceDetails/DeviceLogsSearchToolbar.tsx, libs/ui-components/src/components/Device/DeviceDetails/DeviceLogsInnerToolbar.tsx	DeviceLogsSearchToolbar gains onCancelSearch and isSubmitting props; category change now resets form values via getDeviceLogsFormResetValues() before calling onLogTypeChange. Renders a "Cancel" button when submissions are in flight. DeviceLogsInnerToolbar replaces onSearchUpdate/onResetForm with explicit handlers: onApplySearchParams, onStartLiveStream, onStopLiveStream, onClearLiveLogsPreference, onClearSession. Now takes isStreaming state to derive live-logs switch checked value from `isStreaming
Tab-level orchestration of dual-mode search flow libs/ui-components/src/components/Device/DeviceDetails/DeviceLogsTab.tsx	Wires hook handlers to components and implements dual-path search submission: snapshot searches force showLiveLogs: false with minimum pending-spinner delay; live-log searches start streaming. Refactored to use dedicated hook methods (fetchSnapshot, startLiveStream, stopLiveStream, clearSession, clearLiveLogsPreference). Updated UI visibility based on isSearching (connecting/fetching plus pending delay). Adjusted toolbar props for submission state and cancel behavior.
Disconnected banner color fix libs/ui-components/src/components/Device/DeviceDetails/DeviceLogsEmptyState.tsx	Adds redBannerButtonFixStyle and applies it to the disconnected banner retry Button to force correct link text color in the red variant.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title "EDM-4014 device logs cancel" is directly related to the main changeset, which adds a cancel button to device logs and improves log retrieval behavior.
Description check	✅ Passed	The description is well-related to the changeset, detailing four specific improvements: cancel button, spinner delay on new searches, filter reset on category change, and liveLogs consistency improvements.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}