[Story] Target Topology View

[tthvo]

Related to patternfly/patternfly-react#435

We could have a separate side-card tab for target view (Topology) as here but with some tweaks? Other pages can just use context selector similar to how we select namespace in OpenShift.

This way we can have some initial setup for multi-namespace support as we discussed. Also, filters can be supported here too. I guess this would mean all operations on target list (i.e. add, delete, edit) must be done only on this new side-car tab.

• Render custom MastHead from within VerticalNav patternfly/patternfly-react#429
  • PF4 Data List  patternfly/patternfly-react#867
  • fix(examples and docs): adding react-live… patternfly/patternfly-react#666
• Topology Graph view
  • Introduce typescript build support for PF4 patternfly/patternfly-react#752
• Topology List view
• Revamp Custom Target Creation Form
  • feat(table-grid): add Table Grid component patternfly/patternfly-react#594
• fix(layout): fix layout tsd patternfly/patternfly-react#901

[tthvo]

For our case, the /api/v2.2/discovery endpoint will return a discovery tree and group the targets within correct REALM (i.e. OpenShift, JDP, Custom and Agent push). This means the front-end would just need to render this tree hierarchically and have a selector to filter REALM. Everything else under REALM node is just rendered as it is.

See an example below for the visualization of the returned tree:

When running on OpenShift:

Others (i.e. JDP):

[tthvo]

We can implement actions on target (i.e. target creation form using Drawer) as this design:

This way, we can see and edit details directly. The target creation form can be implemented in a drawer like this too.

[tthvo]

Current issue with TS type checking: patternfly/react-topology#18 after bumping topology package version to 4.91.*.

Current solution: setting "strictFunctionTypes": false, tho strict mode is still enabled with "strict": true for tsconfig.json.