[Timelion] Move the local menu to the header (#80627)

* [Timelion] Move the local menu to the header

* nice improvement

* remove console msg

* cleanup

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

src/plugins/timelion/public/app.js

@@ -44,6 +44,7 @@ import { initSavedObjectSaveAsCheckBoxDirective } from './directives/saved_objec
 import { initSavedObjectFinderDirective } from './directives/saved_object_finder';
 import { initTimelionTabsDirective } from './components/timelionhelp_tabs_directive';
 import { initTimelionTDeprecationDirective } from './components/timelion_deprecation_directive';
+import { initTimelionTopNavDirective } from './components/timelion_top_nav_directive';
 import { initInputFocusDirective } from './directives/input_focus';
 import { Chart } from './directives/chart/chart';
 import { TimelionInterval } from './directives/timelion_interval/timelion_interval';
@@ -86,6 +87,7 @@ export function initTimelionApp(app, deps) {
  initInputFocusDirective(app);
  initTimelionTabsDirective(app, deps);
  initTimelionTDeprecationDirective(app, deps);
+ initTimelionTopNavDirective(app, deps);
  initSavedObjectFinderDirective(app, savedSheetLoader, deps.core.uiSettings);
  initSavedObjectSaveAsCheckBoxDirective(app);
  initCellsDirective(app);

src/plugins/timelion/public/application.ts

@@ -36,11 +36,7 @@ import {
 import { getTimeChart } from './panels/timechart/timechart';
 import { Panel } from './panels/panel';
 
-import {
- configureAppAngularModule,
- createTopNavDirective,
- createTopNavHelper,
-} from '../../kibana_legacy/public';
+import { configureAppAngularModule } from '../../kibana_legacy/public';
 import { TimelionPluginStartDependencies } from './plugin';
 import { DataPublicPluginStart } from '../../data/public';
 // @ts-ignore
@@ -120,11 +116,9 @@ function mountTimelionApp(appBasePath: string, element: HTMLElement, deps: Rende
 function createLocalAngularModule(deps: RenderDeps) {
  createLocalI18nModule();
  createLocalIconModule();
- createLocalTopNavModule(deps.plugins.navigation);
 
  const dashboardAngularModule = angular.module(moduleName, [
  ...thirdPartyAngularDependencies,
- 'app/timelion/TopNav',
  'app/timelion/I18n',
  'app/timelion/icon',
  ]);
@@ -137,13 +131,6 @@ function createLocalIconModule() {
  .directive('icon', (reactDirective) => reactDirective(EuiIcon));
 }
 
-function createLocalTopNavModule(navigation: TimelionPluginStartDependencies['navigation']) {
- angular
- .module('app/timelion/TopNav', ['react'])
- .directive('kbnTopNav', createTopNavDirective)
- .directive('kbnTopNavHelper', createTopNavHelper(navigation.ui));
-}
-
 function createLocalI18nModule() {
  angular
  .module('app/timelion/I18n', [])

src/plugins/timelion/public/components/timelion_top_nav_directive.js

@@ -0,0 +1,58 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React from 'react';
+
+export function initTimelionTopNavDirective(app, deps) {
+ app.directive('timelionTopNav', function (reactDirective) {
+ return reactDirective(
+ (props) => {
+ const { TopNavMenu } = deps.plugins.navigation.ui;
+ return (
+ <deps.core.i18n.Context>
+ <TopNavMenu
+ appName="timelion"
+ showTopNavMenu
+ config={props.topNavMenu}
+ setMenuMountPoint={deps.mountParams.setHeaderActionMenu}
+ onQuerySubmit={props.onTimeUpdate}
+ screenTitle="timelion"
+ showDatePicker
+ showFilterBar={false}
+ showQueryInput={false}
+ showSaveQuery={false}
+ showSearchBar
+ useDefaultBehaviors
+ />
+ </deps.core.i18n.Context>
+ );
+ },
+ [
+ ['topNavMenu', { watchDepth: 'reference' }],
+ ['onTimeUpdate', { watchDepth: 'reference' }],
+ ],
+ {
+ restrict: 'E',
+ scope: {
+ topNavMenu: '=',
+ onTimeUpdate: '=',
+ },
+ }
+ );
+ });
+}

src/plugins/timelion/public/index.html

@@ -11,21 +11,7 @@
  </span>
  </span>
  <!-- Local nav. -->
- <kbn-top-nav 
- app-name="'timelion'"
- config="topNavMenu"
- show-search-bar="true"
- show-search-bar-inline="true"
- show-filter-bar="false"
- show-query-input="false"
- date-range-from="model.timeRange.from"
- date-range-to="model.timeRange.to"
- is-refresh-paused="model.refreshInterval.pause"
- refresh-interval="model.refreshInterval.value"
- on-refresh-change="onRefreshChange"
- on-query-submit="onTimeUpdate">
- </kbn-top-nav>
-
+ <timelion-top-nav top-nav-menu="topNavMenu" on-time-update="onTimeUpdate"></timelion-top-nav>
 
  <div class="timApp__menus">
  <timelion-deprecation></timelion-deprecation>