fix too many rernders (#103672)
This commit is contained in:
parent
4aca0b7b61
commit
1a6cb4634d
|
@ -5,7 +5,7 @@
|
|||
* 2.0.
|
||||
*/
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import React, { useEffect, useRef, useState, useCallback } from 'react';
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import { EuiPanel, EuiTitle } from '@elastic/eui';
|
||||
import styled from 'styled-components';
|
||||
import { isEmpty } from 'lodash';
|
||||
|
@ -14,11 +14,12 @@ import { ObservabilityPublicPluginsStart } from '../../../plugin';
|
|||
import { ExploratoryViewHeader } from './header/header';
|
||||
import { useSeriesStorage } from './hooks/use_series_storage';
|
||||
import { useLensAttributes } from './hooks/use_lens_attributes';
|
||||
import { EmptyView } from './components/empty_view';
|
||||
import { TypedLensByValueInput } from '../../../../../lens/public';
|
||||
import { useAppIndexPatternContext } from './hooks/use_app_index_pattern';
|
||||
import { SeriesBuilder } from './series_builder/series_builder';
|
||||
import { SeriesUrl } from './types';
|
||||
import { LensEmbeddable } from './lens_embeddable';
|
||||
import { EmptyView } from './components/empty_view';
|
||||
|
||||
export const combineTimeRanges = (
|
||||
allSeries: Record<string, SeriesUrl>,
|
||||
|
@ -52,14 +53,13 @@ export function ExploratoryView({
|
|||
saveAttributes?: (attr: TypedLensByValueInput['attributes'] | null) => void;
|
||||
}) {
|
||||
const {
|
||||
services: { lens, notifications },
|
||||
services: { lens },
|
||||
} = useKibana<ObservabilityPublicPluginsStart>();
|
||||
|
||||
const seriesBuilderRef = useRef<HTMLDivElement>(null);
|
||||
const wrapperRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const [height, setHeight] = useState<string>('100vh');
|
||||
const [seriesId, setSeriesId] = useState<string>('');
|
||||
|
||||
const [lastUpdated, setLastUpdated] = useState<number | undefined>();
|
||||
|
||||
|
@ -69,13 +69,7 @@ export function ExploratoryView({
|
|||
|
||||
const { loadIndexPattern, loading } = useAppIndexPatternContext();
|
||||
|
||||
const LensComponent = lens?.EmbeddableComponent;
|
||||
|
||||
const { firstSeriesId, firstSeries: series, setSeries, allSeries } = useSeriesStorage();
|
||||
|
||||
useEffect(() => {
|
||||
setSeriesId(firstSeriesId);
|
||||
}, [allSeries, firstSeriesId]);
|
||||
const { firstSeries, firstSeriesId, allSeries } = useSeriesStorage();
|
||||
|
||||
const lensAttributesT = useLensAttributes();
|
||||
|
||||
|
@ -108,49 +102,16 @@ export function ExploratoryView({
|
|||
setHeightOffset();
|
||||
});
|
||||
|
||||
const timeRange = combineTimeRanges(allSeries, series);
|
||||
|
||||
const onLensLoad = useCallback(() => {
|
||||
setLastUpdated(Date.now());
|
||||
}, []);
|
||||
|
||||
const onBrushEnd = useCallback(
|
||||
({ range }: { range: number[] }) => {
|
||||
if (series?.reportType !== 'data-distribution') {
|
||||
setSeries(seriesId, {
|
||||
...series,
|
||||
time: {
|
||||
from: new Date(range[0]).toISOString(),
|
||||
to: new Date(range[1]).toISOString(),
|
||||
},
|
||||
});
|
||||
} else {
|
||||
notifications?.toasts.add(
|
||||
i18n.translate('xpack.observability.exploratoryView.noBrusing', {
|
||||
defaultMessage: 'Zoom by brush selection is only available on time series charts.',
|
||||
})
|
||||
);
|
||||
}
|
||||
},
|
||||
[notifications?.toasts, series, seriesId, setSeries]
|
||||
);
|
||||
|
||||
return (
|
||||
<Wrapper>
|
||||
{lens ? (
|
||||
<>
|
||||
<ExploratoryViewHeader lensAttributes={lensAttributes} seriesId={seriesId} />
|
||||
<ExploratoryViewHeader lensAttributes={lensAttributes} seriesId={firstSeriesId} />
|
||||
<LensWrapper ref={wrapperRef} height={height}>
|
||||
{lensAttributes && timeRange.to && timeRange.from ? (
|
||||
<LensComponent
|
||||
id="exploratoryView"
|
||||
timeRange={timeRange}
|
||||
attributes={lensAttributes}
|
||||
onLoad={onLensLoad}
|
||||
onBrushEnd={onBrushEnd}
|
||||
/>
|
||||
{lensAttributes ? (
|
||||
<LensEmbeddable setLastUpdated={setLastUpdated} lensAttributes={lensAttributes} />
|
||||
) : (
|
||||
<EmptyView series={series} loading={loading} height={height} />
|
||||
<EmptyView series={firstSeries} loading={loading} height={height} />
|
||||
)}
|
||||
</LensWrapper>
|
||||
<SeriesBuilder
|
||||
|
|
|
@ -59,6 +59,7 @@ export function UrlStorageContextProvider({
|
|||
convertAllShortSeries(storage.get(allSeriesKey) ?? {})
|
||||
);
|
||||
const [firstSeriesId, setFirstSeriesId] = useState('');
|
||||
const [firstSeries, setFirstSeries] = useState<SeriesUrl>();
|
||||
|
||||
useEffect(() => {
|
||||
const allSeriesIds = Object.keys(allShortSeries);
|
||||
|
@ -66,6 +67,7 @@ export function UrlStorageContextProvider({
|
|||
|
||||
setAllSeries(allSeriesN);
|
||||
setFirstSeriesId(allSeriesIds?.[0]);
|
||||
setFirstSeries(allSeriesN?.[0]);
|
||||
(storage as IKbnUrlStateStorage).set(allSeriesKey, allShortSeries);
|
||||
}, [allShortSeries, storage]);
|
||||
|
||||
|
@ -100,7 +102,7 @@ export function UrlStorageContextProvider({
|
|||
firstSeriesId,
|
||||
allSeries,
|
||||
allSeriesIds,
|
||||
firstSeries: allSeries?.[firstSeriesId],
|
||||
firstSeries: firstSeries!,
|
||||
};
|
||||
return <UrlStorageContext.Provider value={value}>{children}</UrlStorageContext.Provider>;
|
||||
}
|
||||
|
|
|
@ -0,0 +1,68 @@
|
|||
/*
|
||||
* 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 { i18n } from '@kbn/i18n';
|
||||
import React, { Dispatch, SetStateAction, useCallback } from 'react';
|
||||
import { combineTimeRanges } from './exploratory_view';
|
||||
import { TypedLensByValueInput } from '../../../../../lens/public';
|
||||
import { useSeriesStorage } from './hooks/use_series_storage';
|
||||
import { ObservabilityPublicPluginsStart } from '../../../plugin';
|
||||
import { useKibana } from '../../../../../../../src/plugins/kibana_react/public';
|
||||
|
||||
interface Props {
|
||||
lensAttributes: TypedLensByValueInput['attributes'];
|
||||
setLastUpdated: Dispatch<SetStateAction<number | undefined>>;
|
||||
}
|
||||
|
||||
export function LensEmbeddable(props: Props) {
|
||||
const { lensAttributes, setLastUpdated } = props;
|
||||
|
||||
const {
|
||||
services: { lens, notifications },
|
||||
} = useKibana<ObservabilityPublicPluginsStart>();
|
||||
|
||||
const LensComponent = lens?.EmbeddableComponent;
|
||||
|
||||
const { firstSeriesId, firstSeries: series, setSeries, allSeries } = useSeriesStorage();
|
||||
|
||||
const timeRange = combineTimeRanges(allSeries, series);
|
||||
|
||||
const onLensLoad = useCallback(() => {
|
||||
setLastUpdated(Date.now());
|
||||
}, [setLastUpdated]);
|
||||
|
||||
const onBrushEnd = useCallback(
|
||||
({ range }: { range: number[] }) => {
|
||||
if (series?.reportType !== 'data-distribution') {
|
||||
setSeries(firstSeriesId, {
|
||||
...series,
|
||||
time: {
|
||||
from: new Date(range[0]).toISOString(),
|
||||
to: new Date(range[1]).toISOString(),
|
||||
},
|
||||
});
|
||||
} else {
|
||||
notifications?.toasts.add(
|
||||
i18n.translate('xpack.observability.exploratoryView.noBrusing', {
|
||||
defaultMessage: 'Zoom by brush selection is only available on time series charts.',
|
||||
})
|
||||
);
|
||||
}
|
||||
},
|
||||
[notifications?.toasts, series, firstSeriesId, setSeries]
|
||||
);
|
||||
|
||||
return (
|
||||
<LensComponent
|
||||
id="exploratoryView"
|
||||
timeRange={timeRange}
|
||||
attributes={lensAttributes}
|
||||
onLoad={onLensLoad}
|
||||
onBrushEnd={onBrushEnd}
|
||||
/>
|
||||
);
|
||||
}
|
Loading…
Reference in a new issue