distributed-system-analysis/pbench-dashboard

Render Breadcrumbs component in PageHeader component

Closed this issue · 1 comments

gurbirkalsi commented

Summary

pbench dashboard utilizes UmiJS for generating routing configurations in the pages directory. In order to improve navigation throughout the platform, breadcrumbs are required for routing users to specific phases of the pbench dashboard workflow. For example, the user can navigate back to the result of their choice instead of having to start from the initial stage of the workflow by selecting a controller.

ant-design includes a component for handling breadcrumb navigation out of the box called Breadcrumbs (https://ant.design/components/breadcrumb) for rendering available routes given a data structure that contains the necessary information. This location data is stored within the Redux state and is made available by connectors to the Redux state within page components.

Breadcrumbs component will be included in the PageHeader component as a static global UI element and reference location data via props passed down from the parent page component (e.g. Controllers, Results, etc).

Goals

  1. Implement ant-design Breadcrumb component within PageHeader component for rendering available location data routes

  2. Implement unit tests for verifying location data is valid and user clicks to the Breadcrumb component route users to the appropriate page

  3. Implement e2e tests for verifying correct behavior for breadcrumbs within the dashboard workflow.