[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 {
@@ -20,7 +19,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

@@ -15,6 +15,8 @@ import { MonitoringStartPluginDependencies } from '../types';
 import { GlobalStateProvider } from './global_state_context';
 import { createPreserveQueryHistory } from './preserve_query_history';
 import { RouteInit } from './route_init';
+import { MonitoringTimeContainer } from './pages/use_monitoring_time';
+import { MonitoringToolbar } from '../components/shared/toolbar';
 
 export const renderApp = (
   core: CoreStart,
@@ -37,31 +39,38 @@ const MonitoringApp: React.FC<{
   return (
     <KibanaContextProvider services={{ ...core, ...plugins }}>
       <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>
     </KibanaContextProvider>
   );
@@ -76,7 +85,12 @@ const Home: React.FC<{}> = () => {
 };
 
 const ClusterOverview: React.FC<{}> = () => {
-  return <div>Cluster overview page</div>;
+  return (
+    <div>
+      <MonitoringToolbar />
+      Cluster overview page
+    </div>
+  );
 };
 
 const License: React.FC<{}> = () => {

x-pack/plugins/monitoring/public/application/pages/page_template.tsx

@@ -10,10 +10,9 @@ import { useTitle } from '../hooks/use_title';
 
 interface PageTemplateProps {
   title: string;
-  children: React.ReactNode;
 }
 
-export const PageTemplate = ({ title, children }: PageTemplateProps) => {
+export const PageTemplate: React.FC<PageTemplateProps> = ({ title, children }) => {
   useTitle('', title);
 
   return <div>{children}</div>;

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>
+  );
+};