WIP: [ML] NavMenu conversion to React

src/legacy/ui/public/timefilter/timefilter.d.ts

@@ -33,11 +33,15 @@ export interface Timefilter {
   setTime: (timeRange: TimeRange) => void;
   setRefreshInterval: (refreshInterval: RefreshInterval) => void;
   getRefreshInterval: () => RefreshInterval;
+  getActiveBounds: () => void;
   disableAutoRefreshSelector: () => void;
   disableTimeRangeSelector: () => void;
   enableAutoRefreshSelector: () => void;
+  enableTimeRangeSelector: () => void;
   off: (event: string, reload: () => void) => void;
   on: (event: string, reload: () => void) => void;
+  isAutoRefreshSelectorEnabled: boolean;
+  isTimeRangeSelectorEnabled: boolean;
 }
 
 export const timefilter: Timefilter;

x-pack/plugins/ml/common/timefilter.ts

@@ -0,0 +1,88 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { Subject } from 'rxjs';
+import { timefilter as timefilterDep } from 'ui/timefilter';
+import { RefreshInterval } from 'src/legacy/ui/public/timefilter/timefilter';
+import { TimeRange } from 'src/legacy/ui/public/timefilter/time_history';
+
+const timefilterUpdate$ = new Subject();
+const refreshIntervalUpdate$ = new Subject();
+
+class MlTimefilter {
+  constructor() {
+    // listen for original timefilter emitted events
+    timefilterDep.on('fetch', this.emitUpdate); // setTime or setRefreshInterval called
+    timefilterDep.on('refreshIntervalUpdate', () => this.emitRefreshIntervalUpdate()); // setRefreshInterval called
+  }
+
+  emitUpdate() {
+    timefilterUpdate$.next();
+  }
+
+  emitRefreshIntervalUpdate() {
+    refreshIntervalUpdate$.next();
+  }
+
+  disableAutoRefreshSelector() {
+    return timefilterDep.disableAutoRefreshSelector();
+  }
+
+  disableTimeRangeSelector() {
+    return timefilterDep.disableTimeRangeSelector();
+  }
+
+  enableAutoRefreshSelector() {
+    return timefilterDep.enableAutoRefreshSelector();
+  }
+
+  enableTimeRangeSelector() {
+    return timefilterDep.enableTimeRangeSelector();
+  }
+
+  isAutoRefreshSelectorEnabled() {
+    return timefilterDep.isAutoRefreshSelectorEnabled;
+  }
+
+  isTimeRangeSelectorEnabled() {
+    return timefilterDep.isAutoRefreshSelectorEnabled;
+  }
+
+  getActiveBounds() {
+    return timefilterDep.getActiveBounds();
+  }
+
+  getRefreshInterval() {
+    return timefilterDep.getRefreshInterval();
+  }
+
+  getTime() {
+    return timefilterDep.getTime();
+  }
+
+  off(event: string) {
+    timefilterDep.off(event, this.emitRefreshIntervalUpdate);
+  }
+
+  // in timefilter dependency - 'fetch', 'refreshIntervalUpdate' emitted
+  setRefreshInterval(interval: RefreshInterval) {
+    timefilterDep.setRefreshInterval(interval);
+  }
+  // in timefilter dependency - 'fetch' is emitted
+  setTime(time: TimeRange) {
+    timefilterDep.setTime(time);
+  }
+  // consumer must call unsubscribe on return value
+  subscribeToUpdates(callback: () => void) {
+    return timefilterUpdate$.subscribe(callback);
+  }
+  // consumer must call unsubscribe on return value
+  subscribeToRefreshIntervalUpdate(callback: () => void) {
+    return refreshIntervalUpdate$.subscribe(callback);
+  }
+}
+
+export const timefilter = new MlTimefilter();

x-pack/plugins/ml/public/app.js

@@ -27,7 +27,7 @@ import 'plugins/ml/components/form_label';
 import 'plugins/ml/components/json_tooltip';
 import 'plugins/ml/components/tooltip';
 import 'plugins/ml/components/confirm_modal';
-import 'plugins/ml/components/nav_menu';
+import 'plugins/ml/components/navigation_menu';
 import 'plugins/ml/components/loading_indicator';
 import 'plugins/ml/settings';
 import 'plugins/ml/file_datavisualizer';

x-pack/plugins/ml/public/components/anomalies_table/anomalies_table_directive.js

@@ -9,7 +9,7 @@ import 'ngreact';
 
 import { wrapInI18nContext } from 'ui/i18n';
 import { uiModules } from 'ui/modules';
-import { timefilter } from 'ui/timefilter';
+import { timefilter } from '../../../common/timefilter';
 const module = uiModules.get('apps/ml', ['react']);
 
 import { AnomaliesTable } from './anomalies_table';

x-pack/plugins/ml/public/components/field_data_card/document_count_chart_directive.js

@@ -24,7 +24,7 @@ import { mlChartTooltipService } from '../../components/chart_tooltip/chart_tool
 import { formatHumanReadableDateTime } from '../../util/date_utils';
 
 import { uiModules } from 'ui/modules';
-import { timefilter } from 'ui/timefilter';
+import { timefilter } from '../../../common/timefilter';
 const module = uiModules.get('apps/ml');
 
 module.directive('mlDocumentCountChart', function () {

x-pack/plugins/ml/public/components/full_time_range_selector/full_time_range_selector_service.ts

@@ -9,8 +9,8 @@ import moment from 'moment';
 import { i18n } from '@kbn/i18n';
 import { IndexPattern } from 'ui/index_patterns';
 import { toastNotifications } from 'ui/notify';
-import { timefilter } from 'ui/timefilter';
 import { Query } from 'src/legacy/core_plugins/data/public';
+import { timefilter } from '../../../common/timefilter';
 import { ml } from '../../services/ml_api_service';
 
 export function setFullTimeRange(indexPattern: IndexPattern, query: Query) {

x-pack/plugins/ml/public/components/job_selector/job_selector.js

@@ -14,7 +14,7 @@ import { ml } from '../../services/ml_api_service';
 import { JobSelectorTable } from './job_selector_table/';
 import { IdBadges } from './id_badges';
 import { NewSelectionIdBadges } from './new_selection_id_badges';
-import { timefilter } from 'ui/timefilter';
+import { timefilter } from '../../../common/timefilter';
 import { getGroupsFromJobs, normalizeTimes, setGlobalState } from './job_select_service_utils';
 import { toastNotifications } from 'ui/notify';
 import {

x-pack/plugins/ml/public/components/navigation_menu/_index.scss

@@ -0,0 +1 @@
+@import 'navigation_menu'

x-pack/plugins/ml/public/components/navigation_menu/_navigation_menu.scss

@@ -0,0 +1,7 @@
+.mlNavigationMenu__tab {
+  padding-bottom: 0;
+}
+
+.mlNavigationMenu__topNav {
+  padding-top: $euiSizeS;
+}

x-pack/plugins/ml/public/components/navigation_menu/index.ts

@@ -0,0 +1,7 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import './navigation_menu_react_wrapper_directive';

x-pack/plugins/ml/public/components/navigation_menu/navigation_menu.tsx

@@ -0,0 +1,117 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { Fragment, SFC, useState } from 'react';
+import { EuiFlexGroup, EuiFlexItem, EuiTabs, EuiTab } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import chrome from 'ui/chrome';
+import { TopNav } from './top_nav';
+
+interface Tab {
+  id: string;
+  name: any;
+  disabled: boolean;
+}
+
+interface Props {
+  dateFormat: string;
+  disableLinks: boolean;
+  showTabs: boolean;
+  tabId: string;
+  timeHistory: any;
+}
+
+function moveToSelectedTab(selectedTabId: string) {
+  window.location.href = `${chrome.getBasePath()}/app/ml#/${selectedTabId}`;
+}
+
+function getTabs(disableLinks: boolean): Tab[] {
+  return [
+    {
+      id: 'jobs',
+      name: i18n.translate('xpack.ml.navMenu.jobManagementTabLinkText', {
+        defaultMessage: 'Job Management',
+      }),
+      disabled: disableLinks,
+    },
+    {
+      id: 'explorer',
+      name: i18n.translate('xpack.ml.navMenu.anomalyExplorerTabLinkText', {
+        defaultMessage: 'Anomaly Explorer',
+      }),
+      disabled: disableLinks,
+    },
+    {
+      id: 'timeseriesexplorer',
+      name: i18n.translate('xpack.ml.navMenu.singleMetricViewerTabLinkText', {
+        defaultMessage: 'Single Metric Viewer',
+      }),
+      disabled: disableLinks,
+    },
+    {
+      id: 'data_frames',
+      name: i18n.translate('xpack.ml.navMenu.dataFrameTabLinkText', {
+        defaultMessage: 'Data Frames',
+      }),
+      disabled: false,
+    },
+    {
+      id: 'datavisualizer',
+      name: i18n.translate('xpack.ml.navMenu.dataVisualizerTabLinkText', {
+        defaultMessage: 'Data Visualizer',
+      }),
+      disabled: false,
+    },
+    {
+      id: 'settings',
+      name: i18n.translate('xpack.ml.navMenu.settingsTabLinkText', {
+        defaultMessage: 'Settings',
+      }),
+      disabled: disableLinks,
+    },
+  ];
+}
+
+export const NavigationMenu: SFC<Props> = ({
+  dateFormat,
+  disableLinks,
+  showTabs,
+  tabId,
+  timeHistory,
+}) => {
+  const [tabs] = useState(getTabs(disableLinks));
+  const [selectedTabId, setSelectedTabId] = useState(tabId);
+
+  function onSelectedTabChanged(id: string) {
+    moveToSelectedTab(id);
+    setSelectedTabId(id);
+  }
+
+  function renderTabs() {
+    return tabs.map((tab: Tab) => (
+      <EuiTab
+        className="mlNavigationMenu__tab"
+        onClick={() => onSelectedTabChanged(tab.id)}
+        isSelected={tab.id === selectedTabId}
+        disabled={tab.disabled}
+        key={`${tab.id}-key`}
+      >
+        {tab.name}
+      </EuiTab>
+    ));
+  }
+
+  return (
+    <Fragment>
+      <EuiFlexGroup justifyContent="flexEnd" gutterSize="xs" className="mlNavigationMenu__topNav">
+        <EuiFlexItem grow={false}>
+          <TopNav dateFormat={dateFormat} timeHistory={timeHistory} />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+      {showTabs && <EuiTabs>{renderTabs()}</EuiTabs>}
+    </Fragment>
+  );
+};

x-pack/plugins/ml/public/components/navigation_menu/navigation_menu_react_wrapper_directive.js

@@ -0,0 +1,55 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { NavigationMenu } from './navigation_menu';
+import { isFullLicense } from '../../license/check_license';
+import { timeHistory } from 'ui/timefilter/time_history';
+import { uiModules } from 'ui/modules';
+const module = uiModules.get('apps/ml');
+
+import 'ui/directives/kbn_href';
+
+
+module.directive('mlNavMenu', function (config) {
+  return {
+    restrict: 'E',
+    transclude: true,
+    link: function (scope, element, attrs) {
+      const { name } = attrs;
+      let showTabs = false;
+
+      if (name === 'jobs' ||
+        name === 'settings' ||
+        name === 'data_frame' ||
+        name === 'datavisualizer' ||
+        name === 'filedatavisualizer' ||
+        name === 'timeseriesexplorer' ||
+        name === 'access-denied' ||
+        name === 'explorer') {
+        showTabs = true;
+      }
+      const props = {
+        dateFormat: config.get('dateFormat'),
+        disableLinks: (isFullLicense() === false),
+        showTabs,
+        tabId: name,
+        timeHistory
+      };
+
+      ReactDOM.render(React.createElement(NavigationMenu, props),
+        element[0]
+      );
+
+      element.on('$destroy', () => {
+        ReactDOM.unmountComponentAtNode(element[0]);
+        scope.$destroy();
+      });
+    }
+  };
+});

x-pack/plugins/ml/public/components/navigation_menu/top_nav/index.ts

@@ -0,0 +1,7 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export { TopNav } from './top_nav';