Add Breadcrumb in Kibana top nav

[juankaromo]

Hi team,

We are going to implement a new navigation aid to facilitate the user experience. This new improvement will consist of a global BreadCrumb, as Kibana already does, and located on the same site.

This breadcrumb will replace the ones that already existed throughout the app, and will be displayed globally and always in the same place.

We will use for this task the react component EuiBreadcrumbs.

The implementation should look like this:

Regards,

[juankaromo]

Hi team,

To establish the breadcrumb a builder will be added in each section. The constructor will be based on a JSON type object in which the entry is a section, with its corresponding redirection. The first section will always be empty because it corresponds to the logo and the logic of the floating menu.

    const breadcrumb = [
      {
        text: '',
      },
      {
        text: 'Agents',
        href: "#/agents-preview"
      },
      {
        text: `${this.props.agent.name} (${this.props.agent.id})`,
        href: `#/agents?agent=${this.props.agent.id}`,
        truncate: true,
      },
      {
        text: 'Integrity monitoring',
      },
    ];
    store.dispatch(updateGlobalBreadcrumb(breadcrumb));

Finally, implementing all this the breadcrumb will look similar to the following image:

Regards,