Requirement

Jaeger UI still have a number of core components that are React class-based components. This prevents the use of hooks in them, and newest DX on them.

Refactor all the possible components in Jaeger UI that still are class-based components. Convert them to functional components, whenever possible.

Problem & Motivation

The idea is also while moving to them, use hooks to abstract the functionality present in Redux and in data fetching so in a near future we can easily switch using the hooks to use other props provider.

Proposal & Implementation

Refactor should be done carefully and providing tests where they do not exist. The lifecycle of the components should be preserved while watching out for edge cases and UX problems.

Deliverables

IMO It should be delivered all at once, as a major breaking change. Ideally, we won't change the contract of any of the components, so no new props passed down, no return anything to the tree that we were not returning before, unless it's justified.

If the contract has to be broken, then it must be properly documented and exposed in the upgrade guide.

Here there is a preliminary list, subject to change:

• CircularProgressbar.tsx
• DetailsCard/index.tsx
• DetailsCard/DetailTableDropdown.tsx
• EmphasizedNode.tsx
• NameSelector.tsx
• ExamplesLink.tsx
• FilteredList/index.tsx
• FilteredList/ListItem.tsx
• VerticalResizer.tsx
• UiFindInput.tsx
• CopyIcon.tsx
• QualityMetrics/index.tsx
• QualityMetrics/MetricCard.tsx
• QualityMetrics/BannerText.tsx
• QualityMetrics/ScoreCard.tsx
• QualityMetrics/CountCard.tsx
• QualityMetrics/Header.tsx
• TraceIDSearchInput.tsx
• DeepDependencies/index.tsx
• DeepDependencies/Graph/DdgNodeContent/index.tsx
• DeepDependencies/Header/index.tsx
• DeepDependencies/Header/LayoutSettings/index.tsx
• DeepDependencies/SidePanel/index.tsx
• DeepDependencies/SidePanel/DetailsPanel.tsx
• DeepDependencies/traces.tsx
• DependencyGraph/ForceGraphArrowLink.tsx
• TraceDiff/TraceDiffHeader/TraceDiffHeader.tsx
• TraceDiff/TraceDiffHeader/CohortTable.tsx
• TraceDiff/TraceDiff.tsx
• TraceDiff/TraceDiffGraph/TraceDiffGraph.tsx
• TraceDiff/TraceDiffGraph/renderNode.tsx
• TracePage/index.tsx
• TracePage/ArchiveNotifier/index.tsx
• TracePage/TraceTimelineViewer/index.tsx
• TracePage/TraceTimelineViewer/SpanDetailRow.tsx
• TracePage/TraceTimelineViewer/SpanBarRow.tsx
• TracePage/TraceTimelineViewer/ReferencesButton.tsx
• TracePage/TraceTimelineViewer/TimelineHeaderRow/TimelineViewingLayer.tsx
• TracePage/TraceTimelineViewer/TimelineHeaderRow/TimelineCollapser.tsx
• TracePage/TraceTimelineViewer/SpanTreeOffset.tsx
• TracePage/TraceTimelineViewer/SpanDetail/AccordianReferences.tsx
• TracePage/TracePageHeader/KeyboardShortcutsHelp.tsx
• TracePage/TracePageHeader/SpanGraph/index.tsx
• TracePage/TracePageHeader/SpanGraph/ViewingLayer.tsx
• TracePage/TracePageHeader/SpanGraph/CanvasSpanGraph.tsx
• TracePage/TraceGraph/TraceGraph.tsx
• TracePage/TraceGraph/OpNode.tsx
• SearchTracePage/SearchResults/index.tsx
• SearchTracePage/SearchResults/ResultItemTitle.tsx
• SearchTracePage/SearchResults/DiffSelection.tsx
• SearchTracePage/SearchResults/ResultItem.tsx
• Monitor/EmptyState/index.tsx
• Monitor/ServicesView/index.tsx
• Monitor/ServicesView/serviceGraph.tsx
• Monitor/ServicesView/operationDetailsTable/index.tsx
• Monitor/ServicesView/operationDetailsTable/opsGraph.tsx
• utils/DraggableManager/demo/DividerDemo.tsx
• utils/DraggableManager/demo/RegionDemo.tsx
• utils/DraggableManager/demo/DraggableManagerDemo.tsx

Complex / Optional:

(list of complex or optional ones, so move those issues here from above)

Risks

The lifecycle of a component could easily be changed if the refactor is not done carefully and giving attention to details, that's why we should provide acceptance tests and heavy QA should be done while doing it.

⚠️ IMPORTANT ⚠️

There are several issues/PRs that exist (e.g., #2588, #2013), but I believe it would be most beneficial to maintain/track them properly by having a single, comprehensive list.

Open questions

No response