Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[ML] NavMenu conversion to React #40830

Merged
merged 11 commits into from
Jul 12, 2019
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,10 @@ describe('DashboardState', function() {
enableAutoRefreshSelector: jest.fn(),
off: jest.fn(),
on: jest.fn(),
getActiveBounds: () => {},
enableTimeRangeSelector: () => {},
isAutoRefreshSelectorEnabled: true,
isTimeRangeSelectorEnabled: true,
};
const mockIndexPattern: IndexPattern = { id: 'index1', fields: [], title: 'hi' };

Expand Down
4 changes: 4 additions & 0 deletions src/legacy/ui/public/timefilter/timefilter.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
2 changes: 1 addition & 1 deletion x-pack/legacy/plugins/ml/public/app.js
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,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';
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
@import 'navigation_menu'
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
.mlNavigationMenu__tab {
padding-bottom: 0;
}

.mlNavigationMenu__topNav {
padding-top: $euiSizeS;
}
Original file line number Diff line number Diff line change
@@ -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';
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
/*
* 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, FC } from 'react';
import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
import { TopNav } from './top_nav';
import { Tabs } from './tabs';

interface Props {
dateFormat: string;
disableLinks: boolean;
forceRefresh: () => void;
showTabs: boolean;
tabId: string;
timeHistory: any;
timefilter: any;
}

export const NavigationMenu: FC<Props> = ({
dateFormat,
disableLinks,
forceRefresh,
showTabs,
tabId,
timeHistory,
timefilter,
}) => (
<Fragment>
<EuiFlexGroup justifyContent="flexEnd" gutterSize="xs">
<EuiFlexItem grow={false}>
<TopNav
dateFormat={dateFormat}
timeHistory={timeHistory}
timefilter={timefilter}
forceRefresh={forceRefresh}
/>
</EuiFlexItem>
</EuiFlexGroup>
{showTabs && <Tabs tabId={tabId} disableLinks={disableLinks} />}
</Fragment>
);
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
/*
* 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';
import { timefilter } from 'ui/timefilter';
import { Subject } from 'rxjs';
const module = uiModules.get('apps/ml');

import 'ui/directives/kbn_href';


module.directive('mlNavMenu', function (config, mlTimefilterRefreshService) {
return {
restrict: 'E',
transclude: true,
link: function (scope, element, attrs) {
const { name } = attrs;
let showTabs = false;

if (name === 'jobs' ||
name === 'settings' ||
name === 'data_frames' ||
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,
timefilter,
forceRefresh: () => mlTimefilterRefreshService.next()
};

ReactDOM.render(React.createElement(NavigationMenu, props),
element[0]
);

element.on('$destroy', () => {
ReactDOM.unmountComponentAtNode(element[0]);
scope.$destroy();
});
}
};
})
.service('mlTimefilterRefreshService', function () {
Copy link
Contributor

@walterra walterra Jul 12, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since this doesn't have any angular dependencies itself, I'd suggest to move this to a separate file and just do export const mlTimefilterRefresh$ = new Subject(); so this would be angular-independent. consumuers of this service would then just do a regular import instead of having it as another angular dependency.

return new Subject();
});
112 changes: 112 additions & 0 deletions x-pack/legacy/plugins/ml/public/components/navigation_menu/tabs.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,112 @@
/*
* 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, { FC, useState } from 'react';
import { EuiTabs, EuiTab } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import chrome from 'ui/chrome';

interface Tab {
id: string;
name: any;
disabled: boolean;
}

interface TestSubjMap {
[key: string]: string;
}

interface Props {
disableLinks: boolean;
tabId: string;
}

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',
alvarezmelissa87 marked this conversation as resolved.
Show resolved Hide resolved
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,
},
];
}

const TAB_TEST_SUBJ_MAP: TestSubjMap = {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This might be better as an enum

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}`;
}

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>
))}
</EuiTabs>
);
};
Original file line number Diff line number Diff line change
@@ -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';
Original file line number Diff line number Diff line change
@@ -0,0 +1,108 @@
/*
* 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, { FC, Fragment, useState, useEffect } from 'react';
import { EuiSuperDatePicker } from '@elastic/eui';
import { TimeHistory, TimeRange } from 'src/legacy/ui/public/timefilter/time_history';
import { Timefilter } from 'ui/timefilter';

interface Props {
dateFormat: string;
forceRefresh: () => void;
timeHistory: TimeHistory;
timefilter: Timefilter;
}

function getRecentlyUsedRanges(timeHistory: TimeHistory): Array<{ start: string; end: string }> {
return timeHistory.get().map(({ from, to }: TimeRange) => {
return {
start: from,
end: to,
};
});
}

export const TopNav: FC<Props> = ({ dateFormat, forceRefresh, timeHistory, timefilter }) => {
const [refreshInterval, setRefreshInterval] = useState(timefilter.getRefreshInterval());
const [time, setTime] = useState(timefilter.getTime());
const [recentlyUsedRanges, setRecentlyUsedRanges] = useState(getRecentlyUsedRanges(timeHistory));
const [isAutoRefreshSelectorEnabled, setIsAutoRefreshSelectorEnabled] = useState(
timefilter.isAutoRefreshSelectorEnabled
);
const [isTimeRangeSelectorEnabled, setIsTimeRangeSelectorEnabled] = useState(
timefilter.isTimeRangeSelectorEnabled
);

useEffect(() => {
timefilter.on('refreshIntervalUpdate', timefilterUpdateListener);
timefilter.on('timeUpdate', timefilterUpdateListener);
timefilter.on('enabledUpdated', timefilterUpdateListener);

return function cleanup() {
timefilter.off('refreshIntervalUpdate', timefilterUpdateListener);
timefilter.off('timeUpdate', timefilterUpdateListener);
timefilter.off('enabledUpdated', timefilterUpdateListener);
};
}, []);

useEffect(() => {
// Force re-render with up-to-date values when isTimeRangeSelectorEnabled/isAutoRefreshSelectorEnabled are changed.
timefilterUpdateListener();
}, [isTimeRangeSelectorEnabled, isAutoRefreshSelectorEnabled]);

function timefilterUpdateListener() {
setTime(timefilter.getTime());
setRefreshInterval(timefilter.getRefreshInterval());
setIsAutoRefreshSelectorEnabled(timefilter.isAutoRefreshSelectorEnabled);
setIsTimeRangeSelectorEnabled(timefilter.isTimeRangeSelectorEnabled);
}

function updateFilter({ start, end }: { start: string; end: string }) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

in a couple of places you're defining this type inline { start: string; end: string }. this could be turned into an interface. also line 19

const newTime = { from: start, to: end };
// Update timefilter for controllers listening for changes
timefilter.setTime(newTime);
setTime(newTime);
setRecentlyUsedRanges(getRecentlyUsedRanges(timeHistory));
}

function updateInterval({
isPaused,
refreshInterval: interval,
}: {
isPaused: boolean;
refreshInterval: number;
}) {
const newInterval = {
pause: isPaused,
value: interval,
};
// Update timefilter for controllers listening for changes
timefilter.setRefreshInterval(newInterval);
// Update state
setRefreshInterval(newInterval);
}

return (
<Fragment>
{(isAutoRefreshSelectorEnabled || isTimeRangeSelectorEnabled) && (
<div className="mlNavigationMenu__topNav">
<EuiSuperDatePicker
start={time.from}
end={time.to}
isPaused={refreshInterval.pause}
isAutoRefreshOnly={!isTimeRangeSelectorEnabled}
refreshInterval={refreshInterval.value}
onTimeChange={updateFilter}
onRefresh={forceRefresh}
onRefreshChange={updateInterval}
recentlyUsedRanges={recentlyUsedRanges}
dateFormat={dateFormat}
/>
</div>
)}
</Fragment>
);
};
Loading