From 751c2d76cc50a7ac2d03afb4c8c55ca27be5a1bd Mon Sep 17 00:00:00 2001
From: shahzad31 <shahzad.muhammad@elastic.co>
Date: Thu, 10 Feb 2022 10:53:34 +0100
Subject: [PATCH] fix overview page

---
 .../pages/overview/old_overview_page.tsx      | 23 +++++++++++++------
 1 file changed, 16 insertions(+), 7 deletions(-)

diff --git a/x-pack/plugins/observability/public/pages/overview/old_overview_page.tsx b/x-pack/plugins/observability/public/pages/overview/old_overview_page.tsx
index a6af0d9182215..b14628b2ae041 100644
--- a/x-pack/plugins/observability/public/pages/overview/old_overview_page.tsx
+++ b/x-pack/plugins/observability/public/pages/overview/old_overview_page.tsx
@@ -7,7 +7,7 @@
 
 import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiPanel, EuiHorizontalRule } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import React from 'react';
+import React, { useMemo } from 'react';
 import { useTrackPageview } from '../..';
 import { EmptySections } from '../../components/app/empty_sections';
 import { ObservabilityHeaderMenu } from '../../components/app/header';
@@ -59,6 +59,20 @@ export function OverviewPage({ routeParams }: Props) {
 
   const { hasDataMap, hasAnyData, isAllRequestsComplete } = useHasData();
 
+  const bucketSize = calculateBucketSize({
+    start: absoluteTime.start,
+    end: absoluteTime.end,
+  });
+
+  const bucketSizeValue = useMemo(() => {
+    if (bucketSize?.bucketSize) {
+      return {
+        bucketSize: bucketSize.bucketSize,
+        intervalString: bucketSize.intervalString,
+      };
+    }
+  }, [bucketSize?.bucketSize, bucketSize?.intervalString]);
+
   if (hasAnyData === undefined) {
     return <LoadingObservability />;
   }
@@ -73,11 +87,6 @@ export function OverviewPage({ routeParams }: Props) {
 
   const { refreshInterval = 10000, refreshPaused = true } = routeParams.query;
 
-  const bucketSize = calculateBucketSize({
-    start: absoluteTime.start,
-    end: absoluteTime.end,
-  });
-
   return (
     <ObservabilityPageTemplate
       noDataConfig={noDataConfig}
@@ -114,7 +123,7 @@ export function OverviewPage({ routeParams }: Props) {
             </EuiFlexItem>
             <EuiFlexItem>
               {/* Data sections */}
-              {hasAnyData && <DataSections bucketSize={bucketSize} />}
+              {hasAnyData && <DataSections bucketSize={bucketSizeValue} />}
               <EmptySections />
             </EuiFlexItem>
             <EuiSpacer size="s" />