[Meta] Kibana global header #62010

ryankeairns · 2020-03-31T15:55:29Z

As part of the navigation redesign project, a new stacked header design will be implemented that sets us up for global navigation across Elastic products.

Feature set

Proposed design (as of May 19, 2020)

Stacked header feature set

This new solution will be delivered in stages and encompasses the following changes:

A new, second (upper/black) header bar that will contain:
- Home button (cluster logo)
- Deployment switcher (for Cloud users)
- ~~Global~~ Navigational search
- Support
- Profile
- Notification badge/banner (TBD)
The current (lower/white) header bar will contain:
- Navigation menu toggle button
- Spaces button
- Breadcrumb navigation
- Application menu

Rollout plan

Phase 1

Implement the first version of the new stacked header, including search

Swap in the new/updated components from EUI (i.e. add the black bar; relocate buttons)
Include first version of navigational search (apps and objects within a single Space)
Relocate app menus into the header

Phase 1 work list

Status	Feature	EUI	Platform/API	Cloud/API	Core UI
🚧	Cloud deployment link	X	X	https://github.com/elastic/cloud/issues/57690 https://github.com/elastic/cloud/issues/54009	#65089 → PR
🚧	Cloud profile links	X	X	https://github.com/elastic/cloud/issues/57695	#62863 → PR
	Stacked header design* - ship with Nav Search; remove old left nav	elastic/eui#3489	X	X	#65787 #64541 #68524
	Navigational Search V1 - single Space	elastic/eui#3490	#64284 #61657 → Search plugin PR → App provider PR	X	#58049

* Need cross-team issue to track migration of app menus into header

The first version will include the aforementioned changes with the following caveats:

Navigational search will be in its MVP state, returning applications and saved objects for the current Space of the current instance. The search API will be designed to support the registering of additional search content. The next version of the search API will support multi-Space search followed by (at a yet-to-be-determined future version) supporting cross-deployment search. (👇 See Pierre's comment below for a better technical description)
In addition to the scope of search, there will also be a concerted effort to move application menu bars into the lower header. The Kibana Design/EUI team has handled such migrations before and is prepared to guide/assist solution teams in this effort. This change will ultimately be at the discretion of individual teams and, by opting out, they can simply keep their existing app menu within the page body/below the header. The advantage of relocating their app menu is that they gain back vertical real estate.

Phase 2

Expanded search and breadcrumbs

Search is multi-Space
For Cloud users, the breadcrumbs will include additional links reaching back to the deployment itself (linking back into the Cloud UI)

Phase 2 work list

Status	Feature	EUI	Platform/API	Cloud/API	Core UI
	Enhanced breadcrumbs	X	X	https://github.com/elastic/cloud/issues/57690 https://github.com/elastic/cloud/issues/54009	Need issue
	Navigational Search V2 - multi Space	X	#67977 (related #61657)	X	#27003 (update)

Phase 3

Cross-deployment enhancements

Deployment switcher is added
Search is cross-deployment (Cloud registers additional data to the search feature)

Phase 3 work list

Status	Feature	EUI	Platform/API	Cloud/API	Core UI
	Deployment switcher	elastic/eui#3504	X	https://github.com/elastic/cloud/issues/57553	Need issue
	Navigational search - Cross deployment	X	Need issue	Need issue	Need issue

elasticmachine · 2020-03-31T15:55:48Z

Pinging @elastic/kibana-core-ui (Team:Core UI)

andrew-moldovan · 2020-03-31T19:40:56Z

Pre-requisite: New/updated EuiHeader component(s)

Who is building this? Do we have an issue for it?

ryankeairns · 2020-03-31T20:17:17Z

@andrew-moldovan The EUI team will be building the new header component. They do not have an issue yet, but they're very much involved with the design effort and @snide has proposed a phased approach with this landing in the 7.9 timeframe.

cchaos · 2020-03-31T20:26:52Z

The newest mocks have not been translated to requirements from the EUI side. It's mostly domain knowledge on the EUI side and involves supporting dark components in light theme, and double-height. Otherwise, the main components are already available.

andrew-moldovan · 2020-03-31T20:32:07Z

The newest mocks have not been translated to requirements from the EUI side

@cchaos just to make sure I understand and we're being super explicit, is that something you need from Cloud/Kibana or "just hasn't been done yet, but we know"?

cchaos · 2020-03-31T21:02:10Z

The requirements would be coming from Cloud and Kibana, but dictated by the cross-team effort. EUI is aware of most, if not all, of the current requirements but hasn't been formally written down.

ryankeairns · 2020-04-01T14:31:40Z

The EUI work covers much of the frontend, but the backend portion of this equation is still undetermined. There have been suggestions from the Kibana side (while reviewing the navigation/header designs) that there be a Cloud plugin to support features that rely upon Cloud-related content (e.g. deployment switcher and search).

With regards to global search, the MVP will rely upon the beginnings of a search service however it will be a thin layer that meets the objectives of the MVP (return apps and objects for the current instance/Space). In relation to the MVP, brief conversations were had around the idea of registering data sources to further the scope of searched content. To the point in the previous paragraph, it might be that this Cloud plugin also register a data source to the search service, for example.

Suffice it all to say, we have a plan to achieve the initial version of the header within Kibana, but more discussions are needed to define an approach that gets us to the full header and search experience.

FYI, @alexfrancoeur has offered to help with coordination on the Kibana side.

cjcenizal · 2020-04-01T16:52:03Z

...a Cloud plugin to support features that rely upon Cloud-related content (e.g. deployment switcher and search).

FYI there's an existing Cloud plugin that can house the functionality that needs to be added: https://github.com/elastic/kibana/tree/master/x-pack/plugins/cloud

pgayvallet · 2020-04-06T08:42:10Z

Some technical remarks:

Phase 2

Global search will not yet search across deployments. [...] but the registry approach would essentially allow plugin authors to register additional data sources thus also enabling a true cross-deployment search.
Search is cross-deployment (Cloud registers additional data to the search feature)

Yea, 'plain' plugins will/should still not be aware of other kibana deployments. It will be to the cloud plugin (or any other cloud-related plugin we'll introduce) to register a datasource to be able to fetch/collect any expected results from the other deployments. Even if I don't see any technical blocker on this, it still appears as non-trivial and would requires some thinking on the best way to gather results from other deployments. We may need some development / API exposed from cloud itself here.

Deployment switcher is added

Will requires the introduction of a new API to enable (show) and feed the switcher options, and consumption of this API, probably from the cloud plugin. Don't seems like big work.

Phase 3

For Cloud users, the breadcrumbs will include additional links reaching back to the deployment itself (linking back into the Cloud UI)

We'll need a way to alter / edit the values sent to

kibana/src/core/public/chrome/chrome_service.tsx

Lines 386 to 389 in 4deea08

    
             /** 
        
              * Override the current set of breadcrumbs 
        
              */ 
        
             setBreadcrumbs(newBreadcrumbs: ChromeBreadcrumb[]): void;

for that. We could either introduce something like
registerBreadCrumbInterceptor(breadcrumb: ChromeBreadcrumb[]): ChromeBreadcrumb[]
API for that, that would address the need, but ATM it feels like overkill regarding the need, and adding something like setBreadcrumbPrefix(prefix: ChromeBreadcrumb[]) to allow prepending elements to the displayed breadcrumb seems sufficient.

joshdover · 2020-05-28T16:20:52Z

What is the plan for coordinating the changes need for applications that need to move their UI buttons / controls into that header space along side the breadcrumbs?

I suspect that will be non-trivial and require a good amount of coordination. Are we okay with shipping a version of the new header where not all apps move their buttons or do all apps need to switch in the same version?

myasonik · 2020-05-28T16:37:04Z

I think practically we have to be ok with some apps migrating in a future version but I think we can optimize for getting as much done as early as possible.

So to merge the header, I think we do it in just a couple of high traffic apps (Discover and Dashboard as an example, maybe we pick something outside of Kibana App too just for variety).

And I think we merge it at the very start of a new minor version. This gives teams the whole minor version to make time for migrating their own apps.

Likely some still won't but I think that's ultimately ok.

ryankeairns · 2020-05-28T17:25:46Z

+1 to what @myasonik framed up.

I ran this by @snide earlier today and will set up a quick meeting for us all to talk through a rough plan.

cc:/ @joshdover

ryankeairns added the REASSIGN from Team:Core UI Deprecated label for old Core UI team label Mar 31, 2020

katrin-freihofner mentioned this issue Apr 17, 2020

Alerts action point inconsistent across Observability #62935

Open

ryankeairns mentioned this issue May 7, 2020

New Kibana header design #65787

Closed

This was referenced May 15, 2020

Create a stacked header solution elastic/eui#3489

Closed

[WIP] Global header: deployment switcher elastic/eui#3504

Closed

ryankeairns mentioned this issue Jun 8, 2020

[Global header] Create API to register application menu links #68524

Closed

alexfrancoeur mentioned this issue Jul 21, 2020

Stacked headers and navigational search #72331

Merged

12 tasks

ryankeairns mentioned this issue Aug 14, 2020

[GS] Improve initial results display #75040

Open

1 task

myasonik closed this as completed in #72331 Sep 14, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Meta] Kibana global header #62010

[Meta] Kibana global header #62010

ryankeairns commented Mar 31, 2020 •

edited

Loading

elasticmachine commented Mar 31, 2020

andrew-moldovan commented Mar 31, 2020

ryankeairns commented Mar 31, 2020

cchaos commented Mar 31, 2020

andrew-moldovan commented Mar 31, 2020

cchaos commented Mar 31, 2020

ryankeairns commented Apr 1, 2020 •

edited

Loading

cjcenizal commented Apr 1, 2020

pgayvallet commented Apr 6, 2020

joshdover commented May 28, 2020

myasonik commented May 28, 2020

ryankeairns commented May 28, 2020

[Meta] Kibana global header #62010

[Meta] Kibana global header #62010

Comments

ryankeairns commented Mar 31, 2020 • edited Loading

Feature set

Proposed design (as of May 19, 2020)

Stacked header feature set

Rollout plan

Phase 1

Phase 1 work list

Phase 2

Phase 2 work list

Phase 3

Phase 3 work list

elasticmachine commented Mar 31, 2020

andrew-moldovan commented Mar 31, 2020

ryankeairns commented Mar 31, 2020

cchaos commented Mar 31, 2020

andrew-moldovan commented Mar 31, 2020

cchaos commented Mar 31, 2020

ryankeairns commented Apr 1, 2020 • edited Loading

cjcenizal commented Apr 1, 2020

pgayvallet commented Apr 6, 2020

Phase 2

Phase 3

joshdover commented May 28, 2020

myasonik commented May 28, 2020

ryankeairns commented May 28, 2020

ryankeairns commented Mar 31, 2020 •

edited

Loading

ryankeairns commented Apr 1, 2020 •

edited

Loading