Reactify Top Nav Menu (kbn_top_nav)

[lizozom]

Summary

Implements #39981

Updates the top nav of:

• Dashboard
• Visualizations
• Discover
• Maps
• Timelion
• Console

Dev Docs

Top Nav Menu is a configurable component that conveniently renders the elements that are often shared by applications: Option menus, query input, filters and time range selection.

Show a simple options menu

Define your navigation menu items as an array of TopNavMenuData elements and pass it down to the TopNavMenu component.

import { TopNavMenu, TopNavMenuData } from 'plugins/kibana_react';

const navConfig: TopNavMenuData[] = [{
  id: 'new-item', 
  label: 'New',
  run: () => { 
     showNewItemModal() 
  }
}, {
  id: 'save-item',
  label: 'Save',
  run: () => { 
     if(hasChanges()) {
        saveChanges();
     }
  },
  disableButton: () => {
    return !hasChanges();
  },
  tooltip: () => {
    return !hasChanges() ? 'Nothing to save' : '';
  }
}];

function MyAppComponent(props: Props) {
  return (
    // ... other components rendering ...
    <TopNavMenu
       appName="my-app"
       config={navConfig}
    />
  );
}

Show a full menu with SearchBar

Search Bar is another convenience component that displays FilterBar, QueryBarInput and EuiSuperDatePicker in a standard layout.

This is the full configuration required to render all 3 components.

function MyAppComponent(props: Props) {
  const query: Query = {
    query: 'response:200',
    language: 'kuery',
  };
  const filters: Filter[] = [];
  const indexPatterns: IndexPattern[] = [];
  const queryHandler = ({ query, dateRange }) => {};
  const filterHandler = (filters) => {};
  const refreshHandler = ({ isPaused, refreshInterval }) => {};
  return (
    // ... other components rendering ...
    <TopNavMenu
       appName='my-app'
       config={navConfig}
       screenTitle='My App Page'
       store={localStorage}
       indexPatterns={indexPatterns}
       filters={filters}
       query={query}
       onQuerySubmit={queryHandler}
       onFiltersUpdated={filterHandler}
       dateRangeFrom='now-7d'
       dateRangeTo='now'
       isRefreshPaused={false}
       refreshInterval={30}
       onRefreshChange={refreshHandler}
    />
  );
}

Migrating the Angular directive

The kbn-top-nav directive is still defined, however, its API has slightly changed.
While it will be deprecated during the lifetime of 7.x, you may still use it, if you take the following steps.

Key attribute is deprecated

Change the key attribute of the navigation configuration to id. It's a reserved React keyword and hence it's not supported by the TopNavMenu component. While the both attributes will work with the directive, it's better to update to id right away.

// Old
const navConfig = [{
  key: 'new-item',
  label: 'new',
  run: () => {},
}];

// New
const navConfig = [{
  id: 'new-item',
  label: 'new',
  run: () => {},
}];

Add a label

While the TopNavMenuItem component still currently falls back to using key\id if label is not provided, you should always specify a label. This is because label is an i18n string and id is not.

Transcluded views are deprecated

Either move them elsewhere or use the SearchBar options.

// Old
<kbn-top-nav config="topNavConfig">
   <search-bar
      ... search bar options...  
   />
   <my-custom-directive/>
</kbn-top-nav>

// New 
<kbn-top-nav 
    config="topNavConfig"
    ... search bar options...  
/>
<my-custom-directive/>

Template menu items are deprecated.

Render your views from your app's code and then use the menu's run function to toggle visibility.

// Old
const newTemplateForm = require(....);
const navConfig = [{
  key: 'new-item',
  label: 'new',
  template: newTemplateForm,
}];

// New
const navConfig = [{
  id: 'new-item',
  label: 'new',
  run: () => toggleMyForm,
}];

Screenshots

Discover

New:

Old:

• Menu
• Filters
• Query
• Timepicker

Still handled in Angular:

• Hits information

visualize (configurable components)

New:

New Markdown (autorefresh only):

New TSVB (timepicker only):

Old:

• Menu
• Filters
• Query
• Timepicker

Still in Angular:

• Linked search message (needs design!)

Most visualizations search bar has all 3 features: Timepicker, Filter Bar and Query input (This is true for: Area, Map, Gauge, Table, Goal, Heat map, Horizontal bar, Line, Metric, Pie, Region map, Tag cloud, Vertical bar, Vega).

However the following have exceptions: (why? @AlonaNadler)

• Controls - has Filter Bar and Timepicker but not Query Input
• Markdown has time autorefresh only.
• TSVB and Timelion have Timepicker only.

dashboard

New:

Old:

• Menu
• Filters
• Query
• Timepicker

maps (no filter bar)

New:

Old:

• Menu
• Query
• Timepicker
• No filters!

To make it more fun - filters are located inside the layer editing mode, and they use the QueryBar component.

console (menu only)

New:

Old:

• Menu

timelion (timepicker only)

New:

Old:

• Menu
• Timepicker
• No filters \ query!

Still in Angular

• Query time display

Checklist

Use strikethroughs to remove checklist items you don't feel are applicable to this PR.

• This was checked for cross-browser compatibility, including a check against IE11
• Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
• Documentation was added for features that require explanation or tutorials
• Unit or functional tests were updated or added to match the most common scenarios
• This was checked for keyboard-only and screenreader accessibility

For maintainers

• This was checked for breaking API changes and was labeled appropriately
• This includes a feature addition or change that requires a release note and was labeled appropriately

[elasticmachine]

💔 Build Failed

• continuous-integration/kibana-ci/pull-request

[lukeelmers]

LGTM! (Pending a final 💚 build)

[elasticmachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request

[cchaos]

When it comes to laying out the top nav menu along with the other global inputs like search, filters, and time, the design team feels it's best to always keep the top nav menu as it's own line at the very top. We will work on the styles of this menu bar to align it better throughout Kibana. However, we shouldn't be putting the time picker to the right of the nav bar. We understand that this creates some awkward space just below the menu bar, but we will work on that too.

So instead of supporting the "inline" behavior, you can just leave that empty space where the query bar should be.

[lizozom]

@cchaos Thanks!
I addressed all of your comments, including removing the showSearchBarInline option, which I wasn't excited about in the first place anyway :-).
Looking forward to seeing how we work the new design out.

[cchaos]

Just a few last suggestions for the reset button markup. Other than that 👍

[elasticmachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request

[elasticmachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request

[cchaos]

@lizozom I just happened to notice one thing in Maps. It looks like in full screen the top nav bar doesn't go away anymore:

[lizozom]

@cchaos Added fix in #41672

[elasticmachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request