Make sidebar and chart border align and remove datepicker

elastic · Dec 14, 2020 · 8701a94 · 8701a94
1 parent f729bce
commit 8701a94
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 9 deletions.
diff --git a/x-pack/plugins/uptime/public/components/common/header/page_header.tsx b/x-pack/plugins/uptime/public/components/common/header/page_header.tsx
@@ -11,7 +11,12 @@ import { useRouteMatch } from 'react-router-dom';
 import { UptimeDatePicker } from '../uptime_date_picker';
 import { SyntheticsCallout } from '../../overview/synthetics_callout';
 import { PageTabs } from './page_tabs';
-import { CERTIFICATES_ROUTE, MONITOR_ROUTE, SETTINGS_ROUTE } from '../../../../common/constants';
+import {
+  CERTIFICATES_ROUTE,
+  MONITOR_ROUTE,
+  SETTINGS_ROUTE,
+  STEP_DETAIL_ROUTE,
+} from '../../../../common/constants';
 import { CertRefreshBtn } from '../../certificates/cert_refresh_btn';
 import { ToggleAlertFlyoutButton } from '../../overview/alerts/alerts_containers';
 
@@ -34,11 +39,12 @@ const StyledPicker = styled(EuiFlexItem)`
 export const PageHeader = () => {
   const isCertRoute = useRouteMatch(CERTIFICATES_ROUTE);
   const isSettingsRoute = useRouteMatch(SETTINGS_ROUTE);
+  const isStepDetailRoute = useRouteMatch(STEP_DETAIL_ROUTE);
 
   const DatePickerComponent = () =>
     isCertRoute ? (
       <CertRefreshBtn />
-    ) : (
+    ) : isStepDetailRoute ? null : (
       <StyledPicker grow={false} style={{ flexBasis: 485 }}>
         <UptimeDatePicker />
       </StyledPicker>

diff --git a/x-pack/plugins/uptime/public/components/monitor/synthetics/waterfall/components/constants.ts b/x-pack/plugins/uptime/public/components/monitor/synthetics/waterfall/components/constants.ts
@@ -12,4 +12,4 @@ export const MAIN_GROW_SIZE = 8;
 export const SIDEBAR_GROW_SIZE = 2;
 // Axis height
 // NOTE: This isn't a perfect solution - changes in font size etc within charts could change the ideal height here.
-export const FIXED_AXIS_HEIGHT = 33;
+export const FIXED_AXIS_HEIGHT = 32;
diff --git a/x-pack/plugins/uptime/public/components/monitor/synthetics/waterfall/components/styles.ts b/x-pack/plugins/uptime/public/components/monitor/synthetics/waterfall/components/styles.ts
@@ -22,6 +22,7 @@ export const WaterfallChartFixedTopContainer = euiStyled.div`
   position: sticky;
   top: 0;
   z-index: ${(props) => props.theme.eui.euiZLevel4};
+  border-bottom: ${(props) => `1px solid ${props.theme.eui.euiColorLightShade}`};
 `;
 
 export const WaterfallChartFixedTopContainerSidebarCover = euiStyled(EuiPanel)`

diff --git a/...gins/uptime/public/components/monitor/synthetics/waterfall/components/waterfall_chart.tsx b/...gins/uptime/public/components/monitor/synthetics/waterfall/components/waterfall_chart.tsx
@@ -112,7 +112,7 @@ export const WaterfallChart = ({
           <EuiFlexGroup gutterSize="none" responsive={false}>
             {shouldRenderSidebar && (
               <EuiFlexItem grow={SIDEBAR_GROW_SIZE}>
-                <WaterfallChartFixedTopContainerSidebarCover paddingSize="none" />
+                <WaterfallChartFixedTopContainerSidebarCover paddingSize="none" hasShadow={false} />
               </EuiFlexItem>
             )}
             <EuiFlexItem grow={shouldRenderSidebar ? MAIN_GROW_SIZE : true}>
@@ -131,10 +131,13 @@ export const WaterfallChart = ({
                     tickFormat={tickFormat}
                     domain={domain}
                     showGridLines={true}
+                    style={{
+                      axisLine: {
+                        visible: false,
+                      },
+                    }}
                   />
 
-                  <Axis id="values" position={Position.Left} tickFormat={() => ''} />
-
                   <BarSeries
                     id="waterfallItems"
                     xScaleType={ScaleType.Linear}
@@ -150,7 +153,7 @@ export const WaterfallChart = ({
             </EuiFlexItem>
           </EuiFlexGroup>
         </WaterfallChartFixedTopContainer>
-        <EuiFlexGroup gutterSize="none" responsive={false}>
+        <EuiFlexGroup gutterSize="none" responsive={false} style={{ paddingTop: '10px' }}>
           {shouldRenderSidebar && (
             <Sidebar items={sidebarItems!} height={generatedHeight} render={renderSidebarItem!} />
           )}
@@ -170,10 +173,13 @@ export const WaterfallChart = ({
                   tickFormat={tickFormat}
                   domain={domain}
                   showGridLines={true}
+                  style={{
+                    axisLine: {
+                      visible: false,
+                    },
+                  }}
                 />
 
-                <Axis id="values" position={Position.Left} tickFormat={() => ''} />
-
                 <BarSeries
                   id="waterfallItems"
                   xScaleType={ScaleType.Linear}