Fix lens attributes passed via props

dgieselaar · Jun 6, 2024 · 760a2a8 · 760a2a8
1 parent dc35666
commit 760a2a8
Show file tree

Hide file tree

Showing 8 changed files with 34 additions and 26 deletions.
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
@@ -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<LensChartProps, 'overrides'> & {
-    id: string;
-    queryField: string;
-    dateRange: TimeRange;
-    assetId: string;
-  };
+export type ChartProps = Pick<LensChartProps, 'overrides'> & {
+  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 (
     <LensChart
-      {...props}
       id={`infraAssetDetailsMetricChart${id}`}
       borderRadius="m"
       dateRange={dateRange}
       height={METRIC_CHART_HEIGHT}
       searchSessionId={searchSessionId}
       filters={filters}
+      lensAttributes={lensAttributes}
       overrides={overrides}
       onBrushEnd={handleBrushEnd}
       onFilter={handleFilter}

diff --git a/...ins/observability_solution/infra/public/components/asset_details/charts/docker_charts.tsx b/...ins/observability_solution/infra/public/components/asset_details/charts/docker_charts.tsx
@@ -73,8 +73,9 @@ export const DockerCharts = React.forwardRef<HTMLDivElement, Props>(
         <ChartsGrid columns={2}>
           {charts.map((chart) => (
             <Chart
+              id={chart.id}
               key={chart.id}
-              {...chart}
+              lensAttributes={chart}
               assetId={assetId}
               dateRange={dateRange}
               queryField={findInventoryFields('container').id}

diff --git a/...ugins/observability_solution/infra/public/components/asset_details/charts/host_charts.tsx b/...ugins/observability_solution/infra/public/components/asset_details/charts/host_charts.tsx
@@ -91,10 +91,11 @@ export const HostCharts = React.forwardRef<HTMLDivElement, Props>(
         <ChartsGrid columns={2}>
           {charts.map((chart) => (
             <Chart
+              id={chart.id}
               key={chart.id}
-              {...chart}
               assetId={assetId}
               dateRange={dateRange}
+              lensAttributes={chart}
               queryField={findInventoryFields('host').id}
             />
           ))}

diff --git a/...observability_solution/infra/public/components/asset_details/charts/kubernetes_charts.tsx b/...observability_solution/infra/public/components/asset_details/charts/kubernetes_charts.tsx
@@ -63,10 +63,11 @@ export const KubernetesNodeCharts = React.forwardRef<HTMLDivElement, MetricsChar
         <ChartsGrid columns={2}>
           {charts.map((chart) => (
             <Chart
+              id={chart.id}
               key={chart.id}
-              {...chart}
               assetId={assetId}
               dateRange={dateRange}
+              lensAttributes={chart}
               queryField={findInventoryFields('host').id}
             />
           ))}
@@ -127,8 +128,9 @@ export const KubernetesContainerCharts = React.forwardRef<
       <ChartsGrid columns={2}>
         {charts.map((chart) => (
           <Chart
+            id={chart.id}
             key={chart.id}
-            {...chart}
+            lensAttributes={chart}
             assetId={assetId}
             dateRange={dateRange}
             queryField={findInventoryFields('container').id}

diff --git a/...gins/observability_solution/infra/public/components/asset_details/components/kpis/kpi.tsx b/...gins/observability_solution/infra/public/components/asset_details/components/kpis/kpi.tsx
@@ -36,11 +36,11 @@ export const Kpi = ({
 
   return (
     <LensChart
-      {...chartProps}
       id={`infraAssetDetailsKPI${id}`}
       dateRange={dateRange}
       height={KPI_CHART_HEIGHT}
       filters={filters}
+      lensAttributes={chartProps}
       query={query}
       loading={loading}
       toolTip={tooltipContent}

diff --git a/x-pack/plugins/observability_solution/infra/public/components/lens/lens_chart.tsx b/x-pack/plugins/observability_solution/infra/public/components/lens/lens_chart.tsx
@@ -16,12 +16,13 @@ import { ChartLoadError } from './chart_load_error';
 
 const MIN_HEIGHT = 300;
 
-export type LensChartProps = UseLensAttributesParams &
-  BaseChartProps &
+export type LensChartProps = BaseChartProps &
   Pick<EuiPanelProps, 'borderRadius'> & {
     toolTip?: React.ReactElement<TooltipContentProps>;
     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
@@ -34,11 +34,7 @@ export const useLensAttributes = (params: UseLensAttributesParams) => {
     const builder = new LensConfigBuilder(dataViews, formulaAPI);
 
     return builder.build(params) as Promise<LensAttributes>;
-    // 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/...observability_solution/infra/public/pages/metrics/hosts/components/tabs/metrics/chart.tsx b/...observability_solution/infra/public/pages/metrics/hosts/components/tabs/metrics/chart.tsx
@@ -67,7 +67,7 @@ export const Chart = ({ id, ...chartProps }: ChartProps) => {
 
   return (
     <LensChart
-      {...chartProps}
+      lensAttributes={chartProps}
       id={`hostsView-metricChart-${id}`}
       borderRadius="m"
       dateRange={afterLoadedState.dateRange}