Add setup button to monitoring toolbar

elastic · Sep 3, 2021 · 3961c51 · 3961c51
1 parent 3ed7ab9
commit 3961c51
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 41 deletions.
diff --git a/x-pack/plugins/monitoring/public/application/pages/page_template.tsx b/x-pack/plugins/monitoring/public/application/pages/page_template.tsx
@@ -29,34 +29,7 @@ export const PageTemplate: React.FC<PageTemplateProps> = ({ title, pageTitle, ta
 
   return (
     <div className="app-container">
-      <EuiFlexGroup gutterSize="l" justifyContent="spaceBetween" responsive>
-        <EuiFlexItem>
-          <EuiFlexGroup
-            gutterSize="none"
-            justifyContent="spaceEvenly"
-            direction="column"
-            responsive
-          >
-            <EuiFlexItem>
-              <div id="setupModeNav">{/* HERE GOES THE SETUP BUTTON */}</div>
-            </EuiFlexItem>
-            <EuiFlexItem className="monTopNavSecondItem">
-              {pageTitle && (
-                <div data-test-subj="monitoringPageTitle">
-                  <EuiTitle size="xs">
-                    <h1>{pageTitle}</h1>
-                  </EuiTitle>
-                </div>
-              )}
-            </EuiFlexItem>
-          </EuiFlexGroup>
-        </EuiFlexItem>
-
-        <EuiFlexItem>
-          <MonitoringToolbar />
-        </EuiFlexItem>
-      </EuiFlexGroup>
-
+      <MonitoringToolbar pageTitle={pageTitle} />
       {tabs && (
         <EuiTabs>
           {tabs.map((item, idx) => {

diff --git a/x-pack/plugins/monitoring/public/components/shared/toolbar.tsx b/x-pack/plugins/monitoring/public/components/shared/toolbar.tsx
@@ -5,11 +5,21 @@
  * 2.0.
  */
 
-import { EuiFlexGroup, EuiFlexItem, EuiSuperDatePicker, OnRefreshChangeProps } from '@elastic/eui';
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiSuperDatePicker,
+  EuiTitle,
+  OnRefreshChangeProps,
+} from '@elastic/eui';
 import React, { useContext, useCallback } from 'react';
 import { MonitoringTimeContainer } from '../../application/pages/use_monitoring_time';
 
-export const MonitoringToolbar = () => {
+interface MonitoringToolbarProps {
+  pageTitle?: string;
+}
+
+export const MonitoringToolbar: React.FC<MonitoringToolbarProps> = ({ pageTitle }) => {
   const {
     currentTimerange,
     handleTimeChange,
@@ -38,18 +48,36 @@ export const MonitoringToolbar = () => {
   );
 
   return (
-    <EuiFlexGroup gutterSize={'xl'} justifyContent={'spaceBetween'}>
-      <EuiFlexItem>Setup Button</EuiFlexItem>
+    <EuiFlexGroup gutterSize="l" justifyContent="spaceBetween" responsive>
+      <EuiFlexItem>
+        <EuiFlexGroup gutterSize="none" justifyContent="spaceEvenly" direction="column" responsive>
+          <EuiFlexItem>
+            <div id="setupModeNav">{/* HERE GOES THE SETUP BUTTON */}</div>
+          </EuiFlexItem>
+          <EuiFlexItem className="monTopNavSecondItem">
+            {pageTitle && (
+              <div data-test-subj="monitoringPageTitle">
+                <EuiTitle size="xs">
+                  <h1>{pageTitle}</h1>
+                </EuiTitle>
+              </div>
+            )}
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiFlexItem>
+
       <EuiFlexItem grow={false}>
-        <EuiSuperDatePicker
-          start={currentTimerange.from}
-          end={currentTimerange.to}
-          onTimeChange={onTimeChange}
-          onRefresh={() => {}}
-          isPaused={isPaused}
-          refreshInterval={refreshInterval}
-          onRefreshChange={onRefreshChange}
-        />
+        <div style={{ padding: 8 }}>
+          <EuiSuperDatePicker
+            start={currentTimerange.from}
+            end={currentTimerange.to}
+            onTimeChange={onTimeChange}
+            onRefresh={() => {}}
+            isPaused={isPaused}
+            refreshInterval={refreshInterval}
+            onRefreshChange={onRefreshChange}
+          />
+        </div>
       </EuiFlexItem>
     </EuiFlexGroup>
   );