[Montiroing] Add monitoring toolbar with date picker

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<GlobalStateProviderProps> = ({
+  query,
+  toasts,
+  children,
+}) => {
   // TODO: remove fakeAngularRootScope and fakeAngularLocation when angular is removed
   const fakeAngularRootScope: Partial<ng.IRootScopeService> = {
     $on: (

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<{
     <KibanaContextProvider services={{ ...core, ...plugins }}>
       <ExternalConfigContext.Provider value={externalConfig}>
         <GlobalStateProvider query={plugins.data.query} toasts={core.notifications.toasts}>
-          <Router history={history}>
-            <Switch>
-              <Route path="/no-data" component={NoData} />
-              <Route path="/loading" component={LoadingPage} />
-              <RouteInit
-                path="/license"
-                component={License}
-                codePaths={['all']}
-                fetchAllClusters={false}
-              />
-              <RouteInit
-                path="/home"
-                component={Home}
-                codePaths={['all']}
-                fetchAllClusters={false}
-              />
-              <RouteInit
-                path="/overview"
-                component={ClusterOverview}
-                codePaths={['all']}
-                fetchAllClusters={false}
-              />
-              <Redirect
-                to={{
-                  pathname: '/loading',
-                  search: history.location.search,
-                }}
-              />
-            </Switch>
-          </Router>
+          <MonitoringTimeContainer.Provider>
+            <Router history={history}>
+              <Switch>
+                <Route path="/no-data" component={NoData} />
+                <Route path="/loading" component={LoadingPage} />
+                <RouteInit
+                  path="/license"
+                  component={License}
+                  codePaths={['all']}
+                  fetchAllClusters={false}
+                />
+                <RouteInit
+                  path="/home"
+                  component={Home}
+                  codePaths={['all']}
+                  fetchAllClusters={false}
+                />
+                <RouteInit
+                  path="/overview"
+                  component={ClusterOverview}
+                  codePaths={['all']}
+                  fetchAllClusters={false}
+                />
+                <Redirect
+                  to={{
+                    pathname: '/loading',
+                    search: history.location.search,
+                  }}
+                />
+              </Switch>
+            </Router>
+          </MonitoringTimeContainer.Provider>
         </GlobalStateProvider>
       </ExternalConfigContext.Provider>
     </KibanaContextProvider>

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<PageTemplateProps> = ({ title, pageTitle, tabs, children }) => {
   useTitle('', title);
 
   return (
@@ -52,7 +52,9 @@ export const PageTemplate = ({ title, pageTitle, tabs, children }: PageTemplateP
           </EuiFlexGroup>
         </EuiFlexItem>
 
-        <EuiFlexItem>{/* HERE GOES THE TIMEPICKER */}</EuiFlexItem>
+        <EuiFlexItem>
+          <MonitoringToolbar />
+        </EuiFlexItem>
       </EuiFlexGroup>
 
       {tabs && (

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<TimeOptions>(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);

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 (
+    <EuiFlexGroup gutterSize={'xl'} justifyContent={'spaceBetween'}>
+      <EuiFlexItem>Setup Button</EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <EuiSuperDatePicker
+          start={currentTimerange.from}
+          end={currentTimerange.to}
+          onTimeChange={onTimeChange}
+          onRefresh={() => {}}
+          isPaused={isPaused}
+          refreshInterval={refreshInterval}
+          onRefreshChange={onRefreshChange}
+        />
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+};