From aaec2d62e1396e1993b7ff27336d1e0bbc3e8471 Mon Sep 17 00:00:00 2001 From: Melissa Alvarez Date: Fri, 12 Jul 2019 13:16:35 -0400 Subject: [PATCH 1/4] remove old nav_menu direcory --- .../ml/public/components/nav_menu/_index.scss | 1 - .../public/components/nav_menu/_nav_menu.scss | 4 -- .../ml/public/components/nav_menu/index.js | 7 --- .../public/components/nav_menu/nav_menu.html | 51 ------------------- .../ml/public/components/nav_menu/nav_menu.js | 44 ---------------- 5 files changed, 107 deletions(-) delete mode 100644 x-pack/legacy/plugins/ml/public/components/nav_menu/_index.scss delete mode 100644 x-pack/legacy/plugins/ml/public/components/nav_menu/_nav_menu.scss delete mode 100644 x-pack/legacy/plugins/ml/public/components/nav_menu/index.js delete mode 100644 x-pack/legacy/plugins/ml/public/components/nav_menu/nav_menu.html delete mode 100644 x-pack/legacy/plugins/ml/public/components/nav_menu/nav_menu.js diff --git a/x-pack/legacy/plugins/ml/public/components/nav_menu/_index.scss b/x-pack/legacy/plugins/ml/public/components/nav_menu/_index.scss deleted file mode 100644 index a5981e1022e15..0000000000000 --- a/x-pack/legacy/plugins/ml/public/components/nav_menu/_index.scss +++ /dev/null @@ -1 +0,0 @@ -@import 'nav_menu' diff --git a/x-pack/legacy/plugins/ml/public/components/nav_menu/_nav_menu.scss b/x-pack/legacy/plugins/ml/public/components/nav_menu/_nav_menu.scss deleted file mode 100644 index 6b1be3c238390..0000000000000 --- a/x-pack/legacy/plugins/ml/public/components/nav_menu/_nav_menu.scss +++ /dev/null @@ -1,4 +0,0 @@ -.disabled-nav-link { - color: $euiColorMediumShade; - pointer-events: none; -} diff --git a/x-pack/legacy/plugins/ml/public/components/nav_menu/index.js b/x-pack/legacy/plugins/ml/public/components/nav_menu/index.js deleted file mode 100644 index d775c32c9d9f8..0000000000000 --- a/x-pack/legacy/plugins/ml/public/components/nav_menu/index.js +++ /dev/null @@ -1,7 +0,0 @@ -/* - * 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 './nav_menu'; diff --git a/x-pack/legacy/plugins/ml/public/components/nav_menu/nav_menu.html b/x-pack/legacy/plugins/ml/public/components/nav_menu/nav_menu.html deleted file mode 100644 index 73befd0e149ad..0000000000000 --- a/x-pack/legacy/plugins/ml/public/components/nav_menu/nav_menu.html +++ /dev/null @@ -1,51 +0,0 @@ - -
- -
-
- - - - - - - - - - - - - - - - - - -
-
-
- diff --git a/x-pack/legacy/plugins/ml/public/components/nav_menu/nav_menu.js b/x-pack/legacy/plugins/ml/public/components/nav_menu/nav_menu.js deleted file mode 100644 index 97abaa3589cf4..0000000000000 --- a/x-pack/legacy/plugins/ml/public/components/nav_menu/nav_menu.js +++ /dev/null @@ -1,44 +0,0 @@ -/* - * 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 template from './nav_menu.html'; -import { isFullLicense } from '../../license/check_license'; - -import { uiModules } from 'ui/modules'; -const module = uiModules.get('apps/ml'); - -import 'ui/directives/kbn_href'; - -module.directive('mlNavMenu', function () { - return { - restrict: 'E', - transclude: true, - template, - link: function (scope, el, attrs) { - - // Tabs - scope.name = attrs.name; - - scope.showTabs = false; - if (scope.name === 'jobs' || - scope.name === 'settings' || - scope.name === 'data_frame' || - scope.name === 'datavisualizer' || - scope.name === 'filedatavisualizer' || - scope.name === 'timeseriesexplorer' || - scope.name === 'access-denied' || - scope.name === 'explorer') { - scope.showTabs = true; - } - scope.isActiveTab = function (path) { - return scope.name === path; - }; - - scope.disableLinks = (isFullLicense() === false); - } - }; -}); From 8263f6387824db8c7c5f16d695903a13884bb9a0 Mon Sep 17 00:00:00 2001 From: Melissa Alvarez Date: Fri, 12 Jul 2019 16:37:39 -0400 Subject: [PATCH 2/4] Bit of cleanup of types and in datavis controller --- .../components/navigation_menu/tabs.tsx | 47 +++++++++---------- .../navigation_menu/top_nav/top_nav.tsx | 9 +++- .../datavisualizer_controller.js | 14 ++++-- 3 files changed, 39 insertions(+), 31 deletions(-) diff --git a/x-pack/legacy/plugins/ml/public/components/navigation_menu/tabs.tsx b/x-pack/legacy/plugins/ml/public/components/navigation_menu/tabs.tsx index 9323a4c55861a..3b868653cd33c 100644 --- a/x-pack/legacy/plugins/ml/public/components/navigation_menu/tabs.tsx +++ b/x-pack/legacy/plugins/ml/public/components/navigation_menu/tabs.tsx @@ -15,10 +15,6 @@ interface Tab { disabled: boolean; } -interface TestSubjMap { - [key: string]: string; -} - interface Props { disableLinks: boolean; tabId: string; @@ -71,14 +67,14 @@ function getTabs(disableLinks: boolean): Tab[] { ]; } -const TAB_TEST_SUBJ_MAP: TestSubjMap = { - jobs: 'mlTabJobManagement', - explorer: 'mlTabAnomalyExplorer', - timeseriesexplorer: 'mlTabSingleMetricViewer', - data_frames: 'mlTabDataFrames', - datavisualizer: 'mlTabDataVisualizer', - settings: 'mlTabSettings', -}; +enum TAB_TEST_SUBJ_MAP { + jobs = 'mlTabJobManagement', + explorer = 'mlTabAnomalyExplorer', + timeseriesexplorer = 'mlTabSingleMetricViewer', + data_frames = 'mlTabDataFrames', // eslint-disable-line + datavisualizer = 'mlTabDataVisualizer', + settings = 'mlTabSettings', +} function moveToSelectedTab(selectedTabId: string) { window.location.href = `${chrome.getBasePath()}/app/ml#/${selectedTabId}`; @@ -95,18 +91,21 @@ export const Tabs: FC = ({ tabId, disableLinks }) => { return ( - {tabs.map((tab: Tab) => ( - 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} - - ))} + {tabs.map((tab: Tab) => { + const id = tab.id; + return ( + onSelectedTabChanged(id)} + isSelected={tab.id === selectedTabId} + disabled={tab.disabled} + key={`${tab.id}-key`} + data-test-subj={TAB_TEST_SUBJ_MAP[id as keyof typeof TAB_TEST_SUBJ_MAP]} + > + {tab.name} + + ); + })} ); }; diff --git a/x-pack/legacy/plugins/ml/public/components/navigation_menu/top_nav/top_nav.tsx b/x-pack/legacy/plugins/ml/public/components/navigation_menu/top_nav/top_nav.tsx index 6103623b90ab6..3998fbbccdb65 100644 --- a/x-pack/legacy/plugins/ml/public/components/navigation_menu/top_nav/top_nav.tsx +++ b/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 Time { + start: string; + end: string; +} + +function getRecentlyUsedRanges(timeHistory: TimeHistory): Time[] { return timeHistory.get().map(({ from, to }: TimeRange) => { return { start: from, @@ -60,7 +65,7 @@ export const TopNav: FC = ({ dateFormat, forceRefresh, timeHistory, timef setIsTimeRangeSelectorEnabled(timefilter.isTimeRangeSelectorEnabled); } - function updateFilter({ start, end }: { start: string; end: string }) { + function updateFilter({ start, end }: Time) { const newTime = { from: start, to: end }; // Update timefilter for controllers listening for changes timefilter.setTime(newTime); diff --git a/x-pack/legacy/plugins/ml/public/datavisualizer/datavisualizer_controller.js b/x-pack/legacy/plugins/ml/public/datavisualizer/datavisualizer_controller.js index b5d174a12019a..188919dbaf619 100644 --- a/x-pack/legacy/plugins/ml/public/datavisualizer/datavisualizer_controller.js +++ b/x-pack/legacy/plugins/ml/public/datavisualizer/datavisualizer_controller.js @@ -52,11 +52,17 @@ 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, + mlTimefilterRefreshService) { timefilter.enableTimeRangeSelector(); timefilter.enableAutoRefreshSelector(); - const mlTimefilterRefreshService = $injector.get('mlTimefilterRefreshService'); const createSearchItems = Private(SearchItemsProvider); const { @@ -152,9 +158,7 @@ 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); From 3069d0c145c9ca77605e879bd030090af8ecc516 Mon Sep 17 00:00:00 2001 From: Melissa Alvarez Date: Fri, 12 Jul 2019 17:12:36 -0400 Subject: [PATCH 3/4] replace angular service with importable observable --- .../navigation_menu_react_wrapper_directive.js | 11 ++++------- .../datavisualizer/datavisualizer_controller.js | 6 +++--- .../plugins/ml/public/explorer/explorer_controller.js | 4 ++-- .../ml/public/services/timefilter_refresh_service.tsx | 9 +++++++++ .../timeseriesexplorer_controller.js | 4 ++-- 5 files changed, 20 insertions(+), 14 deletions(-) create mode 100644 x-pack/legacy/plugins/ml/public/services/timefilter_refresh_service.tsx diff --git a/x-pack/legacy/plugins/ml/public/components/navigation_menu/navigation_menu_react_wrapper_directive.js b/x-pack/legacy/plugins/ml/public/components/navigation_menu/navigation_menu_react_wrapper_directive.js index ea075ee504b2d..b9853967c64db 100644 --- a/x-pack/legacy/plugins/ml/public/components/navigation_menu/navigation_menu_react_wrapper_directive.js +++ b/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(); - }); +}); diff --git a/x-pack/legacy/plugins/ml/public/datavisualizer/datavisualizer_controller.js b/x-pack/legacy/plugins/ml/public/datavisualizer/datavisualizer_controller.js index 188919dbaf619..0efce7aed7d54 100644 --- a/x-pack/legacy/plugins/ml/public/datavisualizer/datavisualizer_controller.js +++ b/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', { @@ -58,8 +59,7 @@ module $window, Private, AppState, - config, - mlTimefilterRefreshService) { + config) { timefilter.enableTimeRangeSelector(); timefilter.enableAutoRefreshSelector(); @@ -160,7 +160,7 @@ module // Refresh the data when the time range is altered. $scope.$listenAndDigestAsync(timefilter, 'fetch', refresh); - const timefilterRefreshServiceSub = mlTimefilterRefreshService.subscribe(refresh); + const timefilterRefreshServiceSub = mlTimefilterRefresh$.subscribe(refresh); $scope.$on('$destroy', () => { timefilterRefreshServiceSub.unsubscribe(); diff --git a/x-pack/legacy/plugins/ml/public/explorer/explorer_controller.js b/x-pack/legacy/plugins/ml/public/explorer/explorer_controller.js index 00767fd65e3ce..04b67cf92b743 100644 --- a/x-pack/legacy/plugins/ml/public/explorer/explorer_controller.js +++ b/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 }); } diff --git a/x-pack/legacy/plugins/ml/public/services/timefilter_refresh_service.tsx b/x-pack/legacy/plugins/ml/public/services/timefilter_refresh_service.tsx new file mode 100644 index 0000000000000..2085c2a5dc77f --- /dev/null +++ b/x-pack/legacy/plugins/ml/public/services/timefilter_refresh_service.tsx @@ -0,0 +1,9 @@ +/* + * 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'; + +export const mlTimefilterRefresh$ = new Subject(); diff --git a/x-pack/legacy/plugins/ml/public/timeseriesexplorer/timeseriesexplorer_controller.js b/x-pack/legacy/plugins/ml/public/timeseriesexplorer/timeseriesexplorer_controller.js index 53b34a9158d7c..1043936350b63 100644 --- a/x-pack/legacy/plugins/ml/public/timeseriesexplorer/timeseriesexplorer_controller.js +++ b/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(); From b48feda7ed3d0d8103c0c0fd861a4564ba51f876 Mon Sep 17 00:00:00 2001 From: Melissa Alvarez Date: Mon, 15 Jul 2019 10:22:07 -0400 Subject: [PATCH 4/4] wrap tabs in links --- .../components/navigation_menu/tabs.tsx | 32 ++++++++++--------- .../navigation_menu/top_nav/top_nav.tsx | 6 ++-- 2 files changed, 20 insertions(+), 18 deletions(-) diff --git a/x-pack/legacy/plugins/ml/public/components/navigation_menu/tabs.tsx b/x-pack/legacy/plugins/ml/public/components/navigation_menu/tabs.tsx index 3b868653cd33c..f95ad02d9bd3a 100644 --- a/x-pack/legacy/plugins/ml/public/components/navigation_menu/tabs.tsx +++ b/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'; @@ -67,7 +67,7 @@ function getTabs(disableLinks: boolean): Tab[] { ]; } -enum TAB_TEST_SUBJ_MAP { +enum TAB_TEST_SUBJECT { jobs = 'mlTabJobManagement', explorer = 'mlTabAnomalyExplorer', timeseriesexplorer = 'mlTabSingleMetricViewer', @@ -76,14 +76,11 @@ enum TAB_TEST_SUBJ_MAP { settings = 'mlTabSettings', } -function moveToSelectedTab(selectedTabId: string) { - window.location.href = `${chrome.getBasePath()}/app/ml#/${selectedTabId}`; -} +type TAB_TEST_SUBJECTS = keyof typeof TAB_TEST_SUBJECT; export const Tabs: FC = ({ tabId, disableLinks }) => { const [selectedTabId, setSelectedTabId] = useState(tabId); function onSelectedTabChanged(id: string) { - moveToSelectedTab(id); setSelectedTabId(id); } @@ -94,16 +91,21 @@ export const Tabs: FC = ({ tabId, disableLinks }) => { {tabs.map((tab: Tab) => { const id = tab.id; return ( - onSelectedTabChanged(id)} - isSelected={tab.id === selectedTabId} - disabled={tab.disabled} - key={`${tab.id}-key`} - data-test-subj={TAB_TEST_SUBJ_MAP[id as keyof typeof TAB_TEST_SUBJ_MAP]} + - {tab.name} - + onSelectedTabChanged(id)} + isSelected={id === selectedTabId} + disabled={tab.disabled} + > + {tab.name} + + ); })} diff --git a/x-pack/legacy/plugins/ml/public/components/navigation_menu/top_nav/top_nav.tsx b/x-pack/legacy/plugins/ml/public/components/navigation_menu/top_nav/top_nav.tsx index 3998fbbccdb65..7da5668f08129 100644 --- a/x-pack/legacy/plugins/ml/public/components/navigation_menu/top_nav/top_nav.tsx +++ b/x-pack/legacy/plugins/ml/public/components/navigation_menu/top_nav/top_nav.tsx @@ -16,12 +16,12 @@ interface Props { timefilter: Timefilter; } -interface Time { +interface Duration { start: string; end: string; } -function getRecentlyUsedRanges(timeHistory: TimeHistory): Time[] { +function getRecentlyUsedRanges(timeHistory: TimeHistory): Duration[] { return timeHistory.get().map(({ from, to }: TimeRange) => { return { start: from, @@ -65,7 +65,7 @@ export const TopNav: FC = ({ dateFormat, forceRefresh, timeHistory, timef setIsTimeRangeSelectorEnabled(timefilter.isTimeRangeSelectorEnabled); } - function updateFilter({ start, end }: Time) { + function updateFilter({ start, end }: Duration) { const newTime = { from: start, to: end }; // Update timefilter for controllers listening for changes timefilter.setTime(newTime);