Refine ClusterInfo & Instance

[breezewish]

1. Add manualTestEnv for easier testing. You can use Vagrant to establish the environment. See README in each directory for details.

2. Refined cluster info from getTopology to getTiDB, getStores, getPD, ...

3. Introduce pd.Client to backend, which gracefully handles context.

4. Share TiKV & TiFlash cluster info logic

5. Remove animations from sider menu to be efficient

6. Add a DebugPlayground App (TODO: Use Storybook instead @baurine )

7. Introduce <BaseSelect>, which is a <Select> like component with customization support for the drop content or displayed value

   

8. Introduce <InstanceSelect> based on <BaseSelect> to provide a nice UI for selecting multiple instances

   
   
   

It is compatible with Antd form validation:

9. Now Overview is composed by self-managed components (except for Statement & Slow Query -- TODO: Refine them @baurine) instead of sharing some states.

   This makes it possible to allow user customizing the Overview page in future.

10. Update Overview page UI:

11. Introduce utils/instanceTable to contain everything common about instances (like instance names and variants)

12. Add more time slots to <TimeRangeSelector>

13. Remove unused <CardTable> (TODO: Rename <CardTableV2> to <CardTable> @baurine)

14. Update <CardTableV2> to have a correct Checkbox display when there are group headers. (TODO: Drop implementation after DetailsList onRenderCheckbox is not effective for group headers microsoft/fluentui#13144 is merged)

15. Slightly refine <TimeRangeSelector>

16. Refine LogSearch to use <InstanceSelect> and utils/instanceTable (and use treeData in <Tree> component)

17. Add useCallback, useMemo, usePersistFn to several places to reduce unnecessary re-render.

TODO:

• Test whether "Delete TiDB node" still works

Call for help:

• This PR has been proposed for a long time and I may made some mistakes (e.g. forget updating something). Please test / play with this PR as much as possible!

[baurine]

It seems ok to define the LogLevelText as an Array, likes:

export const LogLevelText = ['UNKNOWN', 'DEBUG' ...]

But this is not a big deal, just simplify the code slightly.

[breezewish]

It relies on the value of log levels to work, might not be very ideal.

[baurine]

LGTM for frontend part.

[baurine]

Pause a PD node in the virtual box, the PD status seems not correct. And not sure why the TiDB node is "unknown", it works fine actually.

[breezewish]

@baurine Good catch! Let me take a look