Merged
Conversation
…uildinfo formatting
- Introduced a new Routing component to visualize device connections using React Flow and Dagre for layout. - Added RoutingDeviceNode component to represent individual devices with input and output ports. - Implemented signal type filtering and device selection/deselection functionality. - Created corresponding SCSS modules for styling the Routing component and device nodes. - Updated package.json to include necessary dependencies: @xyflow/react and dagre. - Enhanced apiSlice to fetch routing devices and tie lines from the backend. - Updated TopNav to include a link to the new Routing feature.
…nce Routing with dark mode and unconnected ports functionality
…bileControl UI, and add TieLineEdge component for routing visualization
- Added LoginForm component for user authentication. - Introduced RequireAuth component to protect routes. - Created ApiPaths component to display available API paths. - Added ApiPathDetailDrawer for detailed view of selected API paths. - Updated routing to include login and API paths. - Integrated Redux for authentication state management. - Enhanced DebugConsole with device filtering and search capabilities. - Refactored TopNav to dynamically display available apps based on authentication. - Added selectors and slice for authentication and debug console state management.
There was a problem hiding this comment.
Pull request overview
This PR adds new authenticated routes and UI capabilities (API path exploration, routing visualization), refactors debug console filtering to Redux state with improved UX, and improves resiliency via a global error boundary plus clearer debug connection failure feedback.
Changes:
- Add authentication flow (login +
RequireAuth) and new app-scoped routes (API Paths, Initialization Exceptions, Routing). - Introduce a new Routing visualization built on
@xyflow/react+dagre, plus supporting UI components/styles. - Refactor Debug Console filtering to Redux state (per-device log levels), and surface WebSocket connection failure guidance.
Reviewed changes
Copilot reviewed 30 out of 32 changed files in this pull request and generated 10 comments.
Show a summary per file
| File | Description |
|---|---|
| tsconfig.tsbuildinfo | Updated TS build info artifact (should not be committed). |
| src/store/websocketSlice.ts | Adds failedUrl tracking + actions for connection attempt lifecycle. |
| src/store/websocketMiddleware.ts | Dispatches connection attempt start/failure actions from WS events. |
| src/store/store.ts | Registers new auth and debugConsole reducers. |
| src/store/debugConsole/debugConsoleSlice.ts | New Redux slice for debug console filters (devices/levels/search). |
| src/store/debugConsole/debugConsoleSelectors.ts | Selectors for debug console filter state. |
| src/store/auth/authSlice.ts | New auth slice holding authentication status and discovered apps. |
| src/store/auth/authSelectors.ts | Selectors for auth state. |
| src/store/apiSlice.ts | Adds endpoints/types for API paths, initialization exceptions, routing, login, and mobile control client management. |
| src/shared/functions/meetsMinimumVersion.ts | Adds a utility for numeric version comparison. |
| src/features/TopNav.tsx | Updates nav to use available apps and adds links for new routes/features. |
| src/features/TieLineEdge.tsx | Custom React Flow edge renderer with tooltip for tie lines. |
| src/features/RoutingDeviceNode.tsx | Custom React Flow node renderer for routing devices/ports. |
| src/features/RoutingDeviceNode.module.scss | Styling for routing device nodes/handles/tooltips. |
| src/features/Routing.tsx | New routing graph UI with filtering and dagre layout. |
| src/features/Routing.module.scss | Styling for routing view filters and tie line tooltip. |
| src/features/RequireAuth.tsx | Route guard to enforce authentication. |
| src/features/MobileControl.tsx | Expands mobile control UI: clients list, add/delete flows, action paths. |
| src/features/LoginForm.tsx | New login flow that probes app slots and populates auth state. |
| src/features/InitializationExceptions.tsx | New UI to list/expand initialization exceptions. |
| src/features/ErrorBoundary.tsx | Adds a global error boundary wrapper using ErrorBox. |
| src/features/DebugConsole/hooks/useFilteredMessages.ts | Refactors debug filtering from URL params to Redux state (per-device min levels + text). |
| src/features/DebugConsole/debugConsts.ts | Adds LOG_LEVEL_ORDER to support min-level comparisons. |
| src/features/DebugConsole/DeviceFilterDropdown.tsx | New device filter dropdown with per-device log-level selection. |
| src/features/DebugConsole/DebugFilters.tsx | Uses new device filter + adds clear-filters action. |
| src/features/DebugConsole/DebugConsole.tsx | Shows certificate guidance alert after WS connection failure. |
| src/features/ApiPaths.tsx | New API paths list UI + drawer integration. |
| src/features/ApiPathDetailDrawer.tsx | New drawer to inspect an API path and open it. |
| src/App.tsx | Adds routing for login/authenticated routes; wraps app in ErrorBoundary. |
| package.json | Adds dependencies for routing visualization (@xyflow/react, dagre). |
| package-lock.json | Lockfile updates for new dependencies. |
| .gitignore | Adds (duplicated) ignore rule for tsconfig.tsbuildinfo. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
…og level filtering, and routing features
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
This pull request introduces several significant enhancements and new features to the application, primarily focused on improving API path visibility, strengthening the debug console's filtering and user experience, and increasing overall application robustness. The changes include the addition of new UI components for API path exploration, a major refactor of the debug console's filtering mechanism (now supporting per-device log levels and improved filter UX), and the implementation of a global error boundary for better error handling. There are also updates to dependencies to support new features.
API Path Exploration:
ApiPathsandApiPathDetailDrawercomponents, allowing users to view, sort, and inspect available API paths in detail from the UI. These are integrated into the app's routing under authenticated routes. [1] [2] [3] [4]Debug Console Filtering & UX Improvements:
DeviceFilterDropdown). Added a "Clear Filters" button for easier filter management. [1] [2] [3]LOG_LEVEL_ORDER) to support minimum log level filtering per device.Error Handling:
ErrorBoundarycomponent to catch and display errors gracefully across the application, improving reliability and user experience. [1] [2] [3]Dependency Updates:
@xyflow/react,dagre, and their types) topackage.jsonto support future features and UI enhancements. [1] [2]