diff --git a/x-pack/plugins/observability_solution/infra/public/components/asset_details/charts/chart.tsx b/x-pack/plugins/observability_solution/infra/public/components/asset_details/charts/chart.tsx index e356eb009a1c4..89d47e598de80 100644 --- a/x-pack/plugins/observability_solution/infra/public/components/asset_details/charts/chart.tsx +++ b/x-pack/plugins/observability_solution/infra/public/components/asset_details/charts/chart.tsx @@ -17,15 +17,22 @@ import { useDatePickerContext } from '../hooks/use_date_picker'; import { extractRangeFromChartFilterEvent } from './chart_utils'; import { useLoadingStateContext } from '../hooks/use_loading_state'; -export type ChartProps = LensConfig & - Pick & { - id: string; - queryField: string; - dateRange: TimeRange; - assetId: string; - }; +export type ChartProps = Pick & { + id: string; + queryField: string; + dateRange: TimeRange; + assetId: string; + lensAttributes: LensConfig; +}; -export const Chart = ({ id, queryField, overrides, dateRange, assetId, ...props }: ChartProps) => { +export const Chart = ({ + id, + queryField, + overrides, + dateRange, + assetId, + lensAttributes, +}: ChartProps) => { const { setDateRange } = useDatePickerContext(); const { searchSessionId } = useLoadingStateContext(); const { @@ -34,7 +41,7 @@ export const Chart = ({ id, queryField, overrides, dateRange, assetId, ...props const { value: filters = [] } = useAsync(async () => { const resolvedDataView = await resolveDataView({ - dataViewId: (props.dataset as LensDataviewDataset)?.index, + dataViewId: (lensAttributes.dataset as LensDataviewDataset)?.index, dataViewsService: dataViews, }); @@ -45,7 +52,7 @@ export const Chart = ({ id, queryField, overrides, dateRange, assetId, ...props dataView: resolvedDataView.dataViewReference, }), ]; - }, [assetId, dataViews, props.dataset, queryField]); + }, [assetId, dataViews, lensAttributes.dataset, queryField]); const handleBrushEnd = useCallback( ({ range, preventDefault }: BrushEndArgs) => { @@ -75,13 +82,13 @@ export const Chart = ({ id, queryField, overrides, dateRange, assetId, ...props return ( ( {charts.map((chart) => ( ( {charts.map((chart) => ( ))} diff --git a/x-pack/plugins/observability_solution/infra/public/components/asset_details/charts/kubernetes_charts.tsx b/x-pack/plugins/observability_solution/infra/public/components/asset_details/charts/kubernetes_charts.tsx index 28d25ef6fe9d8..55771a47d09b2 100644 --- a/x-pack/plugins/observability_solution/infra/public/components/asset_details/charts/kubernetes_charts.tsx +++ b/x-pack/plugins/observability_solution/infra/public/components/asset_details/charts/kubernetes_charts.tsx @@ -63,10 +63,11 @@ export const KubernetesNodeCharts = React.forwardRef {charts.map((chart) => ( ))} @@ -127,8 +128,9 @@ export const KubernetesContainerCharts = React.forwardRef< {charts.map((chart) => ( & { toolTip?: React.ReactElement; searchSessionId?: string; description?: string; + } & { + lensAttributes: UseLensAttributesParams; }; export const LensChart = React.memo( @@ -41,9 +42,9 @@ export const LensChart = React.memo( disableTriggers = false, height = MIN_HEIGHT, loading = false, - ...lensAttributesParams + lensAttributes, }: LensChartProps) => { - const { formula, attributes, getExtraActions, error } = useLensAttributes(lensAttributesParams); + const { formula, attributes, getExtraActions, error } = useLensAttributes(lensAttributes); const isLoading = loading || !attributes; diff --git a/x-pack/plugins/observability_solution/infra/public/hooks/use_lens_attributes.ts b/x-pack/plugins/observability_solution/infra/public/hooks/use_lens_attributes.ts index f301798980f96..9e0f9071eb079 100644 --- a/x-pack/plugins/observability_solution/infra/public/hooks/use_lens_attributes.ts +++ b/x-pack/plugins/observability_solution/infra/public/hooks/use_lens_attributes.ts @@ -34,11 +34,7 @@ export const useLensAttributes = (params: UseLensAttributesParams) => { const builder = new LensConfigBuilder(dataViews, formulaAPI); return builder.build(params) as Promise; - // FIXME: this should be memoized upstream, but Dario - // cannot find a reasonable fix, so he'll just leave - // this in place. - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [params.chartType, params.dataset, dataViews, lens]); + }, [params, dataViews, lens]); const injectFilters = useCallback( ({ filters, query }: { filters: Filter[]; query: Query }): LensAttributes | null => { diff --git a/x-pack/plugins/observability_solution/infra/public/pages/metrics/hosts/components/tabs/metrics/chart.tsx b/x-pack/plugins/observability_solution/infra/public/pages/metrics/hosts/components/tabs/metrics/chart.tsx index 25e7f725ae4ef..77f45445f0023 100644 --- a/x-pack/plugins/observability_solution/infra/public/pages/metrics/hosts/components/tabs/metrics/chart.tsx +++ b/x-pack/plugins/observability_solution/infra/public/pages/metrics/hosts/components/tabs/metrics/chart.tsx @@ -67,7 +67,7 @@ export const Chart = ({ id, ...chartProps }: ChartProps) => { return (