-
[OPIK-3923] [FE] Merge traces, threads, and spans into Logs tab - UI only (#5023)
发布于
2026-02-09 13:07:27 +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
- [OPIK-3923] [FE] Remove smart default to threads - always default to traces
Remove the threadCount > 0 logic that caused navigation bugs (OPIK-4115, OPIK-4118, OPIK-4114).
The smart default feature will be re-implemented in OPIK-4173 with proper URL parameter handling.- [OPIK-3923] [FE] Refactor LogsTab to receive logsType as prop
Remove useQueryParam from LogsTab, making TracesPage the single source of truth
for the type query parameter. This eliminates duplicate state management and
ensures consistent URL handling.- [OPIK-3923] [FE] Add default "Export" tooltip to ExportToButton when enabled
Show "Export" tooltip on hover when button is enabled, and custom
tooltipContent when disabled by design (with cursor-not-allowed).Co-authored-by: Cursor cursoragent@cursor.com
- Revision 22: Add secondary toggle variant and scope search params per log type
- Add secondary variant to toggle/toggle-group matching sidebar active colors
- Use secondary variant for LogsTypeToggle (light blue bg, blue text, no font-weight shift)
- Scope TracesSpansTab search param to ${type}_search for independent search per sub-tab
Co-authored-by: Cursor cursoragent@cursor.com
- Revision 23: Extract useProjectTabs hook with separate tab and logsType query params
- Split overloaded
typequery param intotabandlogsTypeparams - Add backward compatibility: legacy
?type=tracesURLs still work via fallback - Legacy
typeparam is cleared on first user interaction - Remove redundant
userSelectedLogsTypeuseState (logsType persists in URL independently) - Use proper type guards (value is PROJECT_TAB) instead of unsafe
ascasts - Extract all tab management logic from TracesPage into useProjectTabs hook
- Update NoTracesPage to receive type as prop instead of reading query param
Co-authored-by: Cursor cursoragent@cursor.com
- Revision 24: Scope localStorage keys per trace data type (traces/spans)
Replace hardcoded "traces-" prefix with dynamic
${type}-prefix for all
localStorage keys in TracesSpansTab, so traces and spans maintain independent
column selections, widths, ordering, pagination, and row height settings.Co-authored-by: Cursor cursoragent@cursor.com
Co-authored-by: Claude Opus 4.5 noreply@anthropic.com
Co-authored-by: Cursor cursoragent@cursor.com下载附件