Consolidate react-hooks/exhaustive-deps lint rules for O11y (#184865)

Use one react-hooks/exhaustive-deps across our Obs plugins, for consistency reasons. --------- Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Carlos Crespo <crespocarlos@users.noreply.github.com>
elastic · Jun 8, 2024 · 5381dd7 · 5381dd7
1 parent 229b3e8
commit 5381dd7
Show file tree

Hide file tree

Showing 52 changed files with 238 additions and 167 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -908,10 +908,6 @@ module.exports = {
           },
         ],
         'react-hooks/rules-of-hooks': 'error', // Checks rules of Hooks
-        'react-hooks/exhaustive-deps': [
-          'error',
-          { additionalHooks: '^(useFetcher|useProgressiveFetcher|useBreadcrumb)$' },
-        ],
       },
     },
     {
@@ -931,6 +927,18 @@ module.exports = {
         ],
       },
     },
+    {
+      files: ['x-pack/plugins/observability_solution/**/*.{ts,tsx}'],
+      rules: {
+        'react-hooks/exhaustive-deps': [
+          'error',
+          {
+            additionalHooks:
+              '^(useAbortableAsync|useMemoWithAbortSignal|useFetcher|useProgressiveFetcher|useBreadcrumb|useAsync|useTimeRangeAsync|useAutoAbortedHttpClient)$',
+          },
+        ],
+      },
+    },
     {
       files: [
         'x-pack/plugins/aiops/**/*.tsx',
@@ -964,17 +972,6 @@ module.exports = {
         ],
       },
     },
-    // Profiling
-    {
-      files: ['x-pack/plugins/observability_solution/profiling/**/*.{js,mjs,ts,tsx}'],
-      rules: {
-        'react-hooks/rules-of-hooks': 'error', // Checks rules of Hooks
-        'react-hooks/exhaustive-deps': [
-          'error',
-          { additionalHooks: '^(useAsync|useTimeRangeAsync|useAutoAbortedHttpClient)$' },
-        ],
-      },
-    },
     {
       // disable imports from legacy uptime plugin
       files: [

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
@@ -29,7 +29,7 @@ export const HostCharts = React.forwardRef<HTMLDivElement, Props>(
     const { charts } = useHostCharts({
       metric,
       dataViewId: dataView?.id,
-      options: { overview },
+      overview,
     });
 
     return (
@@ -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
@@ -27,7 +27,7 @@ export const KubernetesNodeCharts = React.forwardRef<HTMLDivElement, MetricsChar
   ({ assetId, dataView, dateRange, onShowAll, overview }, ref) => {
     const { charts } = useKubernetesCharts({
       dataViewId: dataView?.id,
-      options: { overview },
+      overview,
     });
 
     const hasIntegration = useIntegrationCheck({ dependsOn: INTEGRATIONS.kubernetesNode });
@@ -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/...y_solution/infra/public/components/asset_details/components/kpis/container_kpi_charts.tsx b/...y_solution/infra/public/components/asset_details/components/kpis/container_kpi_charts.tsx
@@ -33,7 +33,6 @@ export const ContainerKpiCharts = ({
   dateRange,
   dataView,
   filters,
-  options,
   query,
   searchSessionId,
   loading = false,
@@ -50,7 +49,6 @@ export const ContainerKpiCharts = ({
       dateRange={dateRange}
       dataView={dataView}
       filters={filters}
-      options={options}
       query={query}
       searchSessionId={searchSessionId}
       loading={loading}
@@ -60,7 +58,6 @@ export const ContainerKpiCharts = ({
       dateRange={dateRange}
       dataView={dataView}
       filters={filters}
-      options={options}
       query={query}
       searchSessionId={searchSessionId}
       loading={loading}
@@ -72,18 +69,14 @@ const DockerKpiCharts = ({
   dateRange,
   dataView,
   filters,
-  options,
   query,
   searchSessionId,
   loading = false,
 }: ContainerKpiChartsProps) => {
   const { euiTheme } = useEuiTheme();
   const charts = useDockerContainerKpiCharts({
     dataViewId: dataView?.id,
-    options: {
-      getSubtitle: options?.getSubtitle,
-      seriesColor: euiTheme.colors.lightestShade,
-    },
+    seriesColor: euiTheme.colors.lightestShade,
   });
 
   return (
@@ -116,10 +109,7 @@ const KubernetesKpiCharts = ({
   const { euiTheme } = useEuiTheme();
   const charts = useK8sContainerKpiCharts({
     dataViewId: dataView?.id,
-    options: {
-      getSubtitle: options?.getSubtitle,
-      seriesColor: euiTheme.colors.lightestShade,
-    },
+    seriesColor: euiTheme.colors.lightestShade,
   });
 
   return (

diff --git a/...bility_solution/infra/public/components/asset_details/components/kpis/host_kpi_charts.tsx b/...bility_solution/infra/public/components/asset_details/components/kpis/host_kpi_charts.tsx
@@ -18,28 +18,24 @@ export interface HostKpiChartsProps {
   query?: Query;
   filters?: Filter[];
   searchSessionId?: string;
-  options?: {
-    getSubtitle?: (formulaValue: string) => string;
-  };
+  getSubtitle?: (formulaValue: string) => string;
   loading?: boolean;
 }
 
 export const HostKpiCharts = ({
   dateRange,
   dataView,
   filters,
-  options,
+  getSubtitle,
   query,
   searchSessionId,
   loading = false,
 }: HostKpiChartsProps) => {
   const { euiTheme } = useEuiTheme();
   const charts = useHostKpiCharts({
     dataViewId: dataView?.id,
-    options: {
-      getSubtitle: options?.getSubtitle,
-      seriesColor: euiTheme.colors.lightestShade,
-    },
+    getSubtitle,
+    seriesColor: euiTheme.colors.lightestShade,
   });
 
   return (

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/...lity_solution/infra/public/components/asset_details/hooks/use_container_metrics_charts.ts b/...lity_solution/infra/public/components/asset_details/hooks/use_container_metrics_charts.ts
@@ -37,7 +37,7 @@ export const useDockerContainerPageViewMetricsCharts = ({
         }),
       };
     });
-  }, [metricsDataViewId]);
+  }, [metricsDataViewId, metric]);
 
   return { charts, error };
 };
@@ -80,7 +80,7 @@ export const useK8sContainerPageViewMetricsCharts = ({
         }),
       };
     });
-  }, [metricsDataViewId]);
+  }, [metricsDataViewId, metric]);
 
   return { charts, error };
 };
@@ -101,10 +101,10 @@ const getK8sContainerCharts = async (metric: ContainerMetricTypes) => {
 
 export const useDockerContainerKpiCharts = ({
   dataViewId,
-  options,
+  seriesColor,
 }: {
   dataViewId?: string;
-  options?: { seriesColor: string; getSubtitle?: (formulaValue: string) => string };
+  seriesColor?: string;
 }) => {
   const { value: charts = [] } = useAsync(async () => {
     const model = findInventoryModel('container');
@@ -113,27 +113,26 @@ export const useDockerContainerKpiCharts = ({
     return [cpu.metric.dockerContainerCpuUsage, memory.metric.dockerContainerMemoryUsage].map(
       (chart) => ({
         ...chart,
-        seriesColor: options?.seriesColor,
+        seriesColor,
         decimals: 1,
-        subtitle: getSubtitle(options, chart),
         ...(dataViewId && {
           dataset: {
             index: dataViewId,
           },
         }),
       })
     );
-  }, [dataViewId, options?.seriesColor, options?.getSubtitle]);
+  }, [dataViewId, seriesColor]);
 
   return charts;
 };
 
 export const useK8sContainerKpiCharts = ({
   dataViewId,
-  options,
+  seriesColor,
 }: {
   dataViewId?: string;
-  options?: { seriesColor: string; getSubtitle?: (formulaValue: string) => string };
+  seriesColor?: string;
 }) => {
   const { value: charts = [] } = useAsync(async () => {
     const model = findInventoryModel('container');
@@ -142,26 +141,21 @@ export const useK8sContainerKpiCharts = ({
     return [cpu.metric.k8sContainerCpuUsage, memory.metric.k8sContainerMemoryUsage].map(
       (chart) => ({
         ...chart,
-        seriesColor: options?.seriesColor,
+        seriesColor,
         decimals: 1,
-        subtitle: getSubtitle(options, chart),
+        subtitle: getSubtitle(chart),
         ...(dataViewId && {
           dataset: {
             index: dataViewId,
           },
         }),
       })
     );
-  }, [dataViewId, options?.seriesColor, options?.getSubtitle]);
+  }, [dataViewId, seriesColor]);
 
   return charts;
 };
 
-function getSubtitle(
-  options: { getSubtitle?: ((formulaValue: string) => string) | undefined } | undefined,
-  chart: { value: string }
-) {
-  return options?.getSubtitle
-    ? options?.getSubtitle(chart.value)
-    : getSubtitleFromFormula(chart.value);
+function getSubtitle(chart: { value: string }) {
+  return getSubtitleFromFormula(chart.value);
 }
diff --git a/...gins/observability_solution/infra/public/components/asset_details/hooks/use_data_views.ts b/...gins/observability_solution/infra/public/components/asset_details/hooks/use_data_views.ts
@@ -34,7 +34,7 @@ const useDataViews = () => {
 
   const { value: logsDataView, loading: logsDataViewLoading } = useAsync(
     () => getLogsDataView(logViewReference),
-    [logViewReference]
+    [logViewReference, getLogsDataView]
   );
 
   return {