HDDS-14544. OM DB Insights: Duplicate API calls triggered when changing limit selector

[anuragp010]

What changes were proposed in this pull request?

2 Independent issues are present in the omDBInsights page when we change the value for limit.

1. 2 API calls are made per tab endpoint when we change the limit:
Root Cause:

• Each OM DB Insights tab uses the useApiData hook to fetch data. This hook also refetches the data when there is change in the URL string.
• Each tab also defines a separate useEffect hook that refetches the data through useApiData when limit.value changes.
• By behaviour, changing the limit results in changing the URL string. As a result, we have 2 listeners - one is useApiData listening to changes in URL string and the other in the same Table listening to limit.value changes. This results in 2 calls to useApiData.

Fix:
The redundant useEffect in the OMDBInsights tab pages, which listens to limit.value changes was removed.

2. Changing the limit results in fetching data for all 5 tab endpoints even though only one tab is active:
Root Cause:

• Limit's state lives in the parent and is shared across all tabs.
• Ant Design Tabs mounts the tab content on the first visit to a tab. These tabs remain mounted even when inactive (default behaviour of Ant design tabs).
• Changing the limit, results in changing the state for all tabs which are mounted, resulting in refetching data for all tabs.

Fix:
Unmount inactive tabs from the ant design tabs using the destroyInactiveTabPane prop.

What is the link to the Apache JIRA

https://issues.apache.org/jira/browse/HDDS-14544

How was this patch tested?

Network Tab in browser.

Before the changes:

• All tabs on the OMDBInsights page are opened once.
• Limit is changed resulting in 2 API calls per tab, for all tabs.

After the changes:

• All tabs on the OMDBInsights page are opened once.
• Limit is changed resulting in a single API call for the active tab.

[ArafatKhan2198]

Thanks for working on this @anuragp010
Changes LGTM +1
Just one change in the desc - It says "change in the URL" - really it's the url string passed to useApiData (e.g. /api/v1/...?limit=${limit.value}), not browser location via react-router. Minor wording fix.

[anuragp010]

Thanks for working on this @anuragp010 Changes LGTM +1 Just one change in the desc - It says "change in the URL" - really it's the url string passed to useApiData (e.g. /api/v1/...?limit=${limit.value}), not browser location via react-router. Minor wording fix.

Thank you for the review @ArafatKhan2198 . I have updated the description with the suggested fix.