-
[OPIK-2848] [FE] Add Comet Debugger Mode with app version and connectivity status (#3982)
发布于
2025-11-10 15:20:37 +00:00 - Add Comet Debugger Mode feature and related components
- Introduced a new feature toggle for Comet Debugger Mode in the configuration and frontend.
- Added
useIsNetworkOnlinehook to monitor network status. - Implemented
AppNetworkStatuscomponent to display network and server connection status. - Created
UserMenuAppDebugInfoTogglefor toggling debug info visibility in the user menu. - Updated layouts and components to integrate the new debug features, including
NoUserMenuandAppDebugInfo. - Added
comet.svgicon for visual representation.
This commit enhances the debugging capabilities of the application, allowing developers to monitor backend connectivity and toggle debug information visibility.
- Add Opik icon to AppDebugInfo component
- Imported Opik icon as a React component in AppDebugInfo.
- Updated the layout to include the icon alongside the OPIK VERSION text for improved visual representation.
This change enhances the user interface by providing a clearer branding element in the debug information section.
- Enhance Switch Component with Extra Small Size Variant
- Added 'xs' size variant to the switch component for improved responsiveness.
- Updated UserMenuAppDebugInfoToggle to utilize the new 'xs' size for the debug info switch, enhancing UI consistency.
- Enhance AppNetworkStatus component with styled RTT display
- Updated the RTT display in the AppNetworkStatus component to use a new class for improved styling, enhancing the visual appeal and consistency of the user interface.
- Add cometDebuggerModeEnabled toggle to ServiceTogglesConfig
- Introduced a new boolean field
cometDebuggerModeEnabledin the ServiceTogglesConfig class to manage the debugger mode feature. - This addition enhances the configuration options available for service toggles, allowing for better control over debugging functionalities.
- Update AppDebugInfo component to conditionally render OPIK version display
- Modified the AppDebugInfo component to only display the OPIK version section if the APP_VERSION is defined, improving the component's robustness and preventing potential rendering issues when the version is not available.
- Update end-to-end workflows and configuration for Comet Debugger Mode
- Modified the end-to-end workflow files to include the
TOGGLE_COMET_DEBUGGER_MODE_ENABLEDenvironment variable during the build process. - Updated the
config.ymlto set the default value ofcometDebuggerModeEnabledto true, enhancing the service toggles configuration. - Added the
TOGGLE_COMET_DEBUGGER_MODE_ENABLEDvariable to the Docker Compose configuration, ensuring it is available in the deployment environment.
-
[OPIK-2848] Fix Tailwind CSS classnames order
-
Refactor UserMenu component to use logical AND for APP_VERSION check
- Updated the UserMenu component to conditionally render the OPIK version section using a logical AND operator instead of a ternary operator, improving code readability and consistency.
-
Wrap CometIcon in a span within AppNetworkStatus component for improved layout consistency
-
Revision 2: Add keyboard shortcut for debugger mode and remove menu toggles
- Add Meta/Ctrl + c + . keyboard shortcut to toggle debugger mode
- Remove UserMenuAppDebugInfoToggle from UserMenu and NoUserMenu
- Debugger mode now controlled exclusively via keyboard shortcut
-
Revision 2: Remove COMET_DEBUGGER_MODE from feature toggles
-
Revision 3: Revert to ThemeToggle and remove redundant empty line
-
Revision 4: Use absolute imports for ThemeToggle component
-
Revision 5: Remove redundant DebugStore and use simple localStorage state
-
Revision 2: Refactor AppDebugInfo to use react-hotkeys-hook and make available for all versions
- Replace manual keyboard event handling with useHotkeys hook
- Change hotkey to Cmd/Ctrl+Shift+. to avoid conflict with system copy command
- Extract platform detection (isMac, modifierKey) to shared utils
- Move AppDebugInfo and AppNetworkStatus from plugins/comet to components/shared
- Update AppNetworkStatus to use generic 'backend server' terminology instead of 'Comet server'
- Maintain same localStorage key (comet-debugger-mode) for consistency with EM
-
Revision 3: Move AppNetworkStatus to layout components
-
Revision 4: Move AppDebugInfo to layout components
下载附件