From a386dfe9948ccd1ac0a332c3dbf48b67ce4d64c4 Mon Sep 17 00:00:00 2001 From: Phillip Burch Date: Wed, 1 Sep 2021 05:35:53 -0500 Subject: [PATCH] [Montiroing] Add monitoring toolbar with date picker (#110612) --- .../application/global_state_context.tsx | 7 ++- .../monitoring/public/application/index.tsx | 63 ++++++++++--------- .../application/pages/page_template.tsx | 8 ++- .../application/pages/use_monitoring_time.tsx | 50 +++++++++++++++ .../public/components/shared/toolbar.tsx | 56 +++++++++++++++++ 5 files changed, 149 insertions(+), 35 deletions(-) create mode 100644 x-pack/plugins/monitoring/public/application/pages/use_monitoring_time.tsx create mode 100644 x-pack/plugins/monitoring/public/components/shared/toolbar.tsx diff --git a/x-pack/plugins/monitoring/public/application/global_state_context.tsx b/x-pack/plugins/monitoring/public/application/global_state_context.tsx index 042d55418c5ab..dc33316dbd9d9 100644 --- a/x-pack/plugins/monitoring/public/application/global_state_context.tsx +++ b/x-pack/plugins/monitoring/public/application/global_state_context.tsx @@ -11,7 +11,6 @@ import { MonitoringStartPluginDependencies } from '../types'; interface GlobalStateProviderProps { query: MonitoringStartPluginDependencies['data']['query']; toasts: MonitoringStartPluginDependencies['core']['notifications']['toasts']; - children: React.ReactNode; } interface State { @@ -21,7 +20,11 @@ interface State { export const GlobalStateContext = createContext({} as State); -export const GlobalStateProvider = ({ query, toasts, children }: GlobalStateProviderProps) => { +export const GlobalStateProvider: React.FC = ({ + query, + toasts, + children, +}) => { // TODO: remove fakeAngularRootScope and fakeAngularLocation when angular is removed const fakeAngularRootScope: Partial = { $on: ( diff --git a/x-pack/plugins/monitoring/public/application/index.tsx b/x-pack/plugins/monitoring/public/application/index.tsx index ce38b00a359c8..e15ad995ca161 100644 --- a/x-pack/plugins/monitoring/public/application/index.tsx +++ b/x-pack/plugins/monitoring/public/application/index.tsx @@ -17,6 +17,7 @@ import { GlobalStateProvider } from './global_state_context'; import { ExternalConfigContext, ExternalConfig } from './external_config_context'; import { createPreserveQueryHistory } from './preserve_query_history'; import { RouteInit } from './route_init'; +import { MonitoringTimeContainer } from './pages/use_monitoring_time'; export const renderApp = ( core: CoreStart, @@ -45,36 +46,38 @@ const MonitoringApp: React.FC<{ - - - - - - - - - - + + + + + + + + + + + + diff --git a/x-pack/plugins/monitoring/public/application/pages/page_template.tsx b/x-pack/plugins/monitoring/public/application/pages/page_template.tsx index 531de505bf43d..f40c2d3ec5e50 100644 --- a/x-pack/plugins/monitoring/public/application/pages/page_template.tsx +++ b/x-pack/plugins/monitoring/public/application/pages/page_template.tsx @@ -8,6 +8,7 @@ import { EuiFlexGroup, EuiFlexItem, EuiTab, EuiTabs, EuiTitle } from '@elastic/eui'; import React from 'react'; import { useTitle } from '../hooks/use_title'; +import { MonitoringToolbar } from '../../components/shared/toolbar'; export interface TabMenuItem { id: string; @@ -20,11 +21,10 @@ export interface TabMenuItem { interface PageTemplateProps { title: string; pageTitle?: string; - children: React.ReactNode; tabs?: TabMenuItem[]; } -export const PageTemplate = ({ title, pageTitle, tabs, children }: PageTemplateProps) => { +export const PageTemplate: React.FC = ({ title, pageTitle, tabs, children }) => { useTitle('', title); return ( @@ -52,7 +52,9 @@ export const PageTemplate = ({ title, pageTitle, tabs, children }: PageTemplateP - {/* HERE GOES THE TIMEPICKER */} + + + {tabs && ( diff --git a/x-pack/plugins/monitoring/public/application/pages/use_monitoring_time.tsx b/x-pack/plugins/monitoring/public/application/pages/use_monitoring_time.tsx new file mode 100644 index 0000000000000..f54d40ed29a06 --- /dev/null +++ b/x-pack/plugins/monitoring/public/application/pages/use_monitoring_time.tsx @@ -0,0 +1,50 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ +import { useCallback, useState } from 'react'; +import createContainer from 'constate'; + +interface TimeOptions { + from: string; + to: string; + interval: string; +} + +export const DEFAULT_TIMERANGE: TimeOptions = { + from: 'now-1h', + to: 'now', + interval: '>=10s', +}; + +export const useMonitoringTime = () => { + const defaultTimeRange = { + from: 'now-1h', + to: 'now', + interval: DEFAULT_TIMERANGE.interval, + }; + const [refreshInterval, setRefreshInterval] = useState(5000); + const [isPaused, setIsPaused] = useState(false); + const [currentTimerange, setTimeRange] = useState(defaultTimeRange); + + const handleTimeChange = useCallback( + (start: string, end: string) => { + setTimeRange({ ...currentTimerange, from: start, to: end }); + }, + [currentTimerange, setTimeRange] + ); + + return { + currentTimerange, + setTimeRange, + handleTimeChange, + setRefreshInterval, + refreshInterval, + setIsPaused, + isPaused, + }; +}; + +export const MonitoringTimeContainer = createContainer(useMonitoringTime); diff --git a/x-pack/plugins/monitoring/public/components/shared/toolbar.tsx b/x-pack/plugins/monitoring/public/components/shared/toolbar.tsx new file mode 100644 index 0000000000000..6e45d4d831ec9 --- /dev/null +++ b/x-pack/plugins/monitoring/public/components/shared/toolbar.tsx @@ -0,0 +1,56 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import { EuiFlexGroup, EuiFlexItem, EuiSuperDatePicker, OnRefreshChangeProps } from '@elastic/eui'; +import React, { useContext, useCallback } from 'react'; +import { MonitoringTimeContainer } from '../../application/pages/use_monitoring_time'; + +export const MonitoringToolbar = () => { + const { + currentTimerange, + handleTimeChange, + setRefreshInterval, + refreshInterval, + setIsPaused, + isPaused, + } = useContext(MonitoringTimeContainer.Context); + + const onTimeChange = useCallback( + (selectedTime: { start: string; end: string; isInvalid: boolean }) => { + if (selectedTime.isInvalid) { + return; + } + handleTimeChange(selectedTime.start, selectedTime.end); + }, + [handleTimeChange] + ); + + const onRefreshChange = useCallback( + ({ refreshInterval: ri, isPaused: isP }: OnRefreshChangeProps) => { + setRefreshInterval(ri); + setIsPaused(isP); + }, + [setRefreshInterval, setIsPaused] + ); + + return ( + + Setup Button + + {}} + isPaused={isPaused} + refreshInterval={refreshInterval} + onRefreshChange={onRefreshChange} + /> + + + ); +};