[ML] NavMenu conversion to React follow-up (#41054) (#41155)

* remove old nav_menu direcory

* Bit of cleanup of types and in datavis controller

* replace angular service with importable observable

* wrap tabs in links

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

@@ -12,13 +12,13 @@ import { isFullLicense } from '../../license/check_license';
 import { timeHistory } from 'ui/timefilter/time_history';
 import { uiModules } from 'ui/modules';
 import { timefilter } from 'ui/timefilter';
-import { Subject } from 'rxjs';
 const module = uiModules.get('apps/ml');
+import { mlTimefilterRefresh$ } from '../../services/timefilter_refresh_service';
 
 import 'ui/directives/kbn_href';
 
 
-module.directive('mlNavMenu', function (config, mlTimefilterRefreshService) {
+module.directive('mlNavMenu', function (config) {
   return {
     restrict: 'E',
     transclude: true,
@@ -44,7 +44,7 @@ module.directive('mlNavMenu', function (config, mlTimefilterRefreshService) {
         tabId: name,
         timeHistory,
         timefilter,
-        forceRefresh: () => mlTimefilterRefreshService.next()
+        forceRefresh: () => mlTimefilterRefresh$.next()
       };
 
       ReactDOM.render(React.createElement(NavigationMenu, props),
@@ -57,7 +57,4 @@ module.directive('mlNavMenu', function (config, mlTimefilterRefreshService) {
       });
     }
   };
-})
-  .service('mlTimefilterRefreshService', function () {
-    return new Subject();
-  });
+});

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

@@ -5,7 +5,7 @@
  */
 
 import React, { FC, useState } from 'react';
-import { EuiTabs, EuiTab } from '@elastic/eui';
+import { EuiTabs, EuiTab, EuiLink } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import chrome from 'ui/chrome';
 
@@ -15,10 +15,6 @@ interface Tab {
   disabled: boolean;
 }
 
-interface TestSubjMap {
-  [key: string]: string;
-}
-
 interface Props {
   disableLinks: boolean;
   tabId: string;
@@ -71,42 +67,47 @@ function getTabs(disableLinks: boolean): Tab[] {
   ];
 }
 
-const TAB_TEST_SUBJ_MAP: TestSubjMap = {
-  jobs: 'mlTabJobManagement',
-  explorer: 'mlTabAnomalyExplorer',
-  timeseriesexplorer: 'mlTabSingleMetricViewer',
-  data_frames: 'mlTabDataFrames',
-  datavisualizer: 'mlTabDataVisualizer',
-  settings: 'mlTabSettings',
-};
-
-function moveToSelectedTab(selectedTabId: string) {
-  window.location.href = `${chrome.getBasePath()}/app/ml#/${selectedTabId}`;
+enum TAB_TEST_SUBJECT {
+  jobs = 'mlTabJobManagement',
+  explorer = 'mlTabAnomalyExplorer',
+  timeseriesexplorer = 'mlTabSingleMetricViewer',
+  data_frames = 'mlTabDataFrames', // eslint-disable-line
+  datavisualizer = 'mlTabDataVisualizer',
+  settings = 'mlTabSettings',
 }
 
+type TAB_TEST_SUBJECTS = keyof typeof TAB_TEST_SUBJECT;
+
 export const Tabs: FC<Props> = ({ tabId, disableLinks }) => {
   const [selectedTabId, setSelectedTabId] = useState(tabId);
   function onSelectedTabChanged(id: string) {
-    moveToSelectedTab(id);
     setSelectedTabId(id);
   }
 
   const tabs = getTabs(disableLinks);
 
   return (
     <EuiTabs>
-      {tabs.map((tab: Tab) => (
-        <EuiTab
-          className="mlNavigationMenu__tab"
-          onClick={() => onSelectedTabChanged(tab.id)}
-          isSelected={tab.id === selectedTabId}
-          disabled={tab.disabled}
-          key={`${tab.id}-key`}
-          data-test-subj={TAB_TEST_SUBJ_MAP[tab.id]}
-        >
-          {tab.name}
-        </EuiTab>
-      ))}
+      {tabs.map((tab: Tab) => {
+        const id = tab.id;
+        return (
+          <EuiLink
+            data-test-subj={TAB_TEST_SUBJECT[id as TAB_TEST_SUBJECTS]}
+            href={`${chrome.getBasePath()}/app/ml#/${id}`}
+            key={`${id}-key`}
+            color="text"
+          >
+            <EuiTab
+              className="mlNavigationMenu__tab"
+              onClick={() => onSelectedTabChanged(id)}
+              isSelected={id === selectedTabId}
+              disabled={tab.disabled}
+            >
+              {tab.name}
+            </EuiTab>
+          </EuiLink>
+        );
+      })}
     </EuiTabs>
   );
 };

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

@@ -16,7 +16,12 @@ interface Props {
   timefilter: Timefilter;
 }
 
-function getRecentlyUsedRanges(timeHistory: TimeHistory): Array<{ start: string; end: string }> {
+interface Duration {
+  start: string;
+  end: string;
+}
+
+function getRecentlyUsedRanges(timeHistory: TimeHistory): Duration[] {
   return timeHistory.get().map(({ from, to }: TimeRange) => {
     return {
       start: from,
@@ -60,7 +65,7 @@ export const TopNav: FC<Props> = ({ dateFormat, forceRefresh, timeHistory, timef
     setIsTimeRangeSelectorEnabled(timefilter.isTimeRangeSelectorEnabled);
   }
 
-  function updateFilter({ start, end }: { start: string; end: string }) {
+  function updateFilter({ start, end }: Duration) {
     const newTime = { from: start, to: end };
     // Update timefilter for controllers listening for changes
     timefilter.setTime(newTime);

x-pack/legacy/plugins/ml/public/datavisualizer/datavisualizer_controller.js

@@ -33,6 +33,7 @@ import { loadCurrentIndexPattern, loadCurrentSavedSearch, timeBasedIndexCheck }
 import { checkMlNodesAvailable } from 'plugins/ml/ml_nodes_check/check_ml_nodes';
 import { ml } from 'plugins/ml/services/ml_api_service';
 import template from './datavisualizer.html';
+import { mlTimefilterRefresh$ } from '../services/timefilter_refresh_service';
 
 uiRoutes
   .when('/jobs/new_job/datavisualizer', {
@@ -52,11 +53,16 @@ import { uiModules } from 'ui/modules';
 const module = uiModules.get('apps/ml');
 
 module
-  .controller('MlDataVisualizerViewFields', function ($injector, $scope, $timeout, $window, Private, AppState, config) {
+  .controller('MlDataVisualizerViewFields', function (
+    $scope,
+    $timeout,
+    $window,
+    Private,
+    AppState,
+    config) {
 
     timefilter.enableTimeRangeSelector();
     timefilter.enableAutoRefreshSelector();
-    const mlTimefilterRefreshService = $injector.get('mlTimefilterRefreshService');
 
     const createSearchItems = Private(SearchItemsProvider);
     const {
@@ -152,11 +158,9 @@ module
     }
 
     // Refresh the data when the time range is altered.
-    $scope.$listenAndDigestAsync(timefilter, 'fetch', function () {
-      refresh();
-    });
+    $scope.$listenAndDigestAsync(timefilter, 'fetch', refresh);
 
-    const timefilterRefreshServiceSub = mlTimefilterRefreshService.subscribe(refresh);
+    const timefilterRefreshServiceSub = mlTimefilterRefresh$.subscribe(refresh);
 
     $scope.$on('$destroy', () => {
       timefilterRefreshServiceSub.unsubscribe();

x-pack/legacy/plugins/ml/public/explorer/explorer_controller.js

@@ -30,6 +30,7 @@ import { checkGetJobsPrivilege } from '../privilege/check_privilege';
 import { getIndexPatterns, loadIndexPatterns } from '../util/index_utils';
 import { MlTimeBuckets } from 'plugins/ml/util/ml_time_buckets';
 import { explorer$ } from './explorer_dashboard_service';
+import { mlTimefilterRefresh$ } from '../services/timefilter_refresh_service';
 import { mlFieldFormatService } from 'plugins/ml/services/field_format_service';
 import { mlJobService } from '../services/job_service';
 import { refreshIntervalWatcher } from '../util/refresh_interval_watcher';
@@ -71,7 +72,6 @@ module.controller('MlExplorerController', function (
   $injector.get('mlSelectSeverityService');
 
   const mlJobSelectService = $injector.get('mlJobSelectService');
-  const mlTimefilterRefreshService = $injector.get('mlTimefilterRefreshService');
 
   // $scope should only contain what's actually still necessary for the angular part.
   // For the moment that's the job selector and the (hidden) filter bar.
@@ -204,7 +204,7 @@ module.controller('MlExplorerController', function (
     }
   });
 
-  const timefilterRefreshServiceSub = mlTimefilterRefreshService.subscribe(() => {
+  const timefilterRefreshServiceSub = mlTimefilterRefresh$.subscribe(() => {
     if ($scope.jobSelectionUpdateInProgress === false) {
       explorer$.next({ action: EXPLORER_ACTION.RELOAD });
     }

x-pack/legacy/plugins/ml/public/components/nav_menu/index.js → x-pack/legacy/plugins/ml/public/services/timefilter_refresh_service.tsx

@@ -4,4 +4,6 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import './nav_menu';
+import { Subject } from 'rxjs';
+
+export const mlTimefilterRefresh$ = new Subject();

x-pack/legacy/plugins/ml/public/timeseriesexplorer/timeseriesexplorer_controller.js

@@ -60,6 +60,7 @@ import { annotationsRefresh$ } from '../services/annotations_service';
 import { interval$ } from '../components/controls/select_interval/select_interval';
 import { severity$ } from '../components/controls/select_severity/select_severity';
 import { setGlobalState, getSelectedJobIds } from '../components/job_selector/job_select_service_utils';
+import { mlTimefilterRefresh$ } from '../services/timefilter_refresh_service';
 
 
 import chrome from 'ui/chrome';
@@ -93,7 +94,6 @@ module.controller('MlTimeSeriesExplorerController', function (
   $injector.get('mlSelectIntervalService');
   $injector.get('mlSelectSeverityService');
   const mlJobSelectService = $injector.get('mlJobSelectService');
-  const mlTimefilterRefreshService = $injector.get('mlTimefilterRefreshService');
 
   $scope.timeFieldName = 'timestamp';
   timefilter.enableTimeRangeSelector();
@@ -712,7 +712,7 @@ module.controller('MlTimeSeriesExplorerController', function (
     }
   });
 
-  const timefilterRefreshServiceSub = mlTimefilterRefreshService.subscribe($scope.refresh);
+  const timefilterRefreshServiceSub = mlTimefilterRefresh$.subscribe($scope.refresh);
 
   $scope.$on('$destroy', () => {
     refreshWatcher.cancel();