-
[OPIK-3923] [FE] Merge traces, threads, and spans into logs tab (#4860)
frostbyte_neo 发布于
2026-01-28 08:27:43 +00:00 - Refactor TracesPage to integrate Logs tab and update tab handling logic
- Removed unused metrics image import from NoTracesPage.
- Updated TracesPage to include a new Logs tab, replacing the previous Spans and Threads tabs.
- Introduced a new PROJECT_TAB enum for better tab management.
- Enhanced tab change handling to default to traces when switching to the Logs tab.
- Updated end-to-end test to reflect the change in tab name from 'Online evaluation' to 'Evaluators'.
-
Revision 6: Use useProjectStatisticsList to dynamically set default logs type based on thread count
-
Revision 7: Fix E2E tests for threads navigation after Logs tab refactoring
-
Revision 8: Fix threads toggle selector to use radio instead of button
-
Revision 7: Fix thread count fetching and add validation for invalid tab values
- Replace useProjectStatisticsList with useThreadsStatistic for accurate thread count
- Avoids LIKE '%name%' search issues that could return wrong project
- Uses exact projectId match via /traces/threads/stats endpoint
- Extracts thread_count from statistics array
- Add validation in activeTab useMemo to handle invalid type query params
- Falls back to PROJECT_TAB.logs for invalid values
- Prevents rendering with no tab selected
- Remove unnecessary useEffect from LogsTab that could cause infinite loops
- Parent TracesPage already handles validation
- Default value and switch default case provide sufficient fallbacks
- Revision 8: Add useEffect to correct invalid type query params in URL
- Add useEffect that detects invalid type values and corrects them
- When type is neither a valid LOGS_TYPE nor PROJECT_TAB, set it to defaultLogsType
- Ensures URL is always in a valid state, not just the UI
- Prevents users from bookmarking or sharing invalid URLs
- Revision 9: Simplify activeTab logic and remove useMemo
- Remove useMemo wrapper from activeTab computation
- Simplify activeTab to single ternary: check if type is PROJECT_TAB, else default to logs
- Remove redundant LOGS_TYPE check (LOGS_TYPE values naturally fall through to logs)
- Keep useEffect validation logic for URL correction
- Remove useMemo from React imports
- Revision 10: Fix type=logs to redirect to defaultLogsType
- Add check in useEffect to redirect type=logs to defaultLogsType
- Ensures ?type=logs always resolves to threads or traces based on thread count
- Prevents logs tab from being selected without a specific sub-tab
- Revision 11: Normalize type value in LogsTab and remove unreachable default case
- Add validType variable that normalizes type to valid LOGS_TYPE
- Use validType in switch statement (now exhaustive, no default needed)
- Use validType in ToggleGroup to ensure correct button selection
- Remove unreachable default case since validType is always valid LOGS_TYPE
- Prevents race condition where LogsTab renders with invalid type before TracesPage useEffect corrects it
- Makes LogsTab resilient to any invalid input regardless of active tab
- Revision 12: Remove redundant useEffect for type validation
- Remove useEffect that corrected invalid type values in URL
- LogsTab now handles type normalization internally with validType
- Remove useEffect import from React
- Cleaner code with single source of truth for type validation
- URL correction now happens naturally when user interacts with LogsTab
- Revision 13: Remember last selected logs type across tab switches
- Add lastLogsType state to remember user's chosen log subtype (threads/traces/spans)
- Update handleTabChange to save current LOGS_TYPE before switching away from Logs tab
- When returning to Logs tab, restore lastLogsType if available, otherwise use defaultLogsType
- Preserves user selection across tab navigation (Logs→Metrics→Logs keeps selection)
- Fixes UX bug where user's log subtype choice was lost on tab switch
- Revision 14: Extract LogsTypeToggle component and reposition in toolbar
- Create reusable LogsTypeToggle component with proper LOGS_TYPE typing
- Move toggle from separate container to same row as search input
- Position toggle to the left of search input (no separator)
- Fix logsType prop type from string to LOGS_TYPE enum
- Update onLogsTypeChange callback to use LOGS_TYPE type
- Add handleLogsTypeChange wrapper in LogsTab for type safety
- Apply changes to ThreadsTab and TracesSpansTab
- Layout: [Threads] [Traces] [Spans] [Search] [Filters] [Actions]
- Revision 15: Revert Evaluators tab name back to Online evaluation
- Change tab label from 'Evaluators' back to 'Online evaluation'
- Rename will be done in a separate task as requested
- Revision 16: Revert Evaluators tab name back to Online evaluation, in tests
- Change tab label from 'Evaluators' back to 'Online evaluation'
- Rename will be done in a separate task as requested
- Revision 16: Remove ExplainerCallout components from ThreadsTab and TracesSpansTab
- Remove ExplainerCallout import and usage from ThreadsTab
- Remove ExplainerCallout import and usage from TracesSpansTab
- Remove separate PageBodyStickyContainer wrapper for explainer
- Update className to remove negative margin (-mt-4) now that explainer is gone
- Aligns with OPIK-4045 pattern of removing explainers from trace-related tabs
- Revision 17: Address PR review comments - improve code clarity
- Remove unnecessary Fragment wrapper in LogsTab
- Rename lastLogsType to userSelectedLogsType for clarity
- Rename type to queryType to distinguish from computed values
- Cast type once (typeAsProjectTab, typeAsLogsType) instead of repeatedly
- Add isValidProjectTab, isValidLogsType helper variables
Co-Authored-By: Claude Opus 4.5 noreply@anthropic.com
- Revision 18: Adjust margins after ExplainerCallout removal
Add -mt-4 to PageBodyStickyContainer in ThreadsTab and TracesSpansTab
to compensate for spacing after removing the ExplainerCallout component.Co-Authored-By: Claude Opus 4.5 noreply@anthropic.com
Co-authored-by: Claude Opus 4.5 noreply@anthropic.com
下载附件