Skip to content

[Observability overview] Fix overview page duplicate requests #125204

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Feb 11, 2022
Merged

[Observability overview] Fix overview page duplicate requests #125204

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
751c2d7
fix overview page
shahzad31 Feb 10, 2022
1aad83c
Merge branch 'main' into improve-dependency
shahzad31 Feb 10, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 16 additions & 7 deletions x-pack/plugins/observability/public/pages/overview/old_overview_page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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]);

Comment on lines +62 to +75
Copy link
Contributor

@estermv estermv Feb 10, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure that useMemo is the best option here. bucketSize and bucketSizeValue are exactly the same value and I don't think it reflects the intentions of what we want to achieve, which could lead to confusion and bugs in the future.
bucketSize should probably be part of the state of the component and we should only update it when absoluteTime.start or absoluteTime.end change, preventing unnecessary rerenders.

What do you think about something like this:

Suggested change
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]);
const [bucketSize, setBucketSize] = useState(undefined);
useEffect(() => {
const bucket = calculateBucketSize({
start: absoluteTime.start,
end: absoluteTime.end,
});
setBucketSize(bucket);
}, [absoluteTime.start, absoluteTime.end])

Copy link
Contributor Author

@shahzad31 shahzad31 Feb 10, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i think absolute time start and end changes whenever component re-renders , so can't use those in side effect

Copy link
Contributor

@estermv estermv Feb 10, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see... I wasn't expecting it 🙃

if (hasAnyData === undefined) {
return <LoadingObservability />;
}
Expand All @@ -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}
Expand Down Expand Up @@ -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" />
Expand Down