Reimplement Monitor view as React functional component with hooks

Question

Reimplement Monitor view as React functional component with hooks

yurishkuro opened this issue a year ago · 9 comments

packages/jaeger-ui/src/components/Monitor/ServicesView/index.tsx is a class based component with pretty convoluted state management. It can be simplified if implemented as a functional component with hooks.

References:

Related/similar PRs:

#1837

yurishkuro commented a year ago

Go ahead

Answer 1 · 2023-12-03T01:49:26.000Z

hi @yurishkuro
I want to work in this issue. will u assign it to me?

Answer 2 · 2023-12-28T06:34:01.000Z

So, we're gonna flip the MonitorATMServicesViewImpl class to a functional component. Here's the game plan of how I would proceed with this issue:

State with useState: For each state variable in your class component, we'll switch to using useState. It's pretty straightforward. Like, if you have a state variable graphWidth in your class, it turns into:
```
const [graphWidth, setGraphWidth] = useState(300);
```
Repeat this for each piece of state (serviceOpsMetrics, searchOps, etc.).

Lifecycle Methods with useEffect: Your componentDidMount, componentDidUpdate, and componentWillUnmount all get replaced by useEffect. Here's an example that covers component mounting and unmounting logic:

useEffect(() => {
    fetchServices(); // Replace with your actual data fetching or setup code
    // Any additional setup code goes here

    return () => {
        // This is your cleanup code, like componentWillUnmount
        // e.g., remove event listeners
    };
}, []); // The empty array makes it run only once on mount and unmount

Refactor Methods to Functions: Convert class methods into functions. For instance, if you have a method for updating dimensions in your class, it would be something like:
```
const updateDimensions = () => {
    // Your logic to update dimensions
};
```

Handling Redux: If you're using Redux, you'll use useSelector for selecting state and useDispatch for dispatching actions. Like this:

const services = useSelector(state => state.services);
const dispatch = useDispatch();

// When you need to dispatch an action
const fetchMetrics = () => {
    dispatch(fetchMetricsAction());
};

Testing: After refactoring, test to ensure all functionalities work as expected. Check if state updates correctly, effects run as intended, and the component behaves as it did before.

The goal is to keep the logic intact but just translate it into the functional component style. Hope this helps you envision how the refactored component will look! Let me know if there's a specific part you want more detail on.

Answer 3 · 2024-04-07T08:20:33.000Z

Hi! Is this issue available to work on?

Answer 4 · 2024-04-09T13:26:13.000Z

@EshaanAgg yes, since there is no PR attached

Answer 5 · 2024-05-07T09:25:13.000Z

@yurishkuro how to check if my code is running correct after changing the component

Answer 6 · 2024-05-11T14:29:56.000Z

@yurishkuro i did rewrite the monitor , i don 't see any error except for the below , is there anything i missed
'''
7:56:27 PM [vite] http proxy error at /api/services:
Error: connect ECONNREFUSED 127.0.0.1:16686
at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1595:16) (x2)
'''

Answer 7 · 2024-05-11T15:24:03.000Z

why would making Reach changes result in any network-related errors?

Answer 8 · 2024-08-21T15:49:47.000Z

@Sweetdevil144 I did rewrite the monitorServiceView as a functional component but, I could not pass all the test.
The App component is being wrapped in the redux Provider; however it seems the test is not able to recognize the provider. Is there anything I missed?

This is a picture of the error

My current solution is at Ghaby-X@1c133b3