Consolidate react-hooks/exhaustive-deps lint rules for O11y

elastic · Jun 5, 2024 · 50be82f · 50be82f
1 parent c4dbcf8
commit 50be82f
Show file tree

Hide file tree

Showing 18 changed files with 72 additions and 101 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/...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 (

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 });

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,
@@ -45,7 +44,6 @@ export const ContainerKpiCharts = ({
       dateRange={dateRange}
       dataView={dataView}
       filters={filters}
-      options={options}
       query={query}
       searchSessionId={searchSessionId}
       loading={loading}
@@ -55,7 +53,6 @@ export const ContainerKpiCharts = ({
       dateRange={dateRange}
       dataView={dataView}
       filters={filters}
-      options={options}
       query={query}
       searchSessionId={searchSessionId}
       loading={loading}
@@ -67,18 +64,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 (
@@ -111,10 +104,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/...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 };
 };
@@ -76,7 +76,7 @@ export const useK8sContainerPageViewMetricsCharts = ({
         }),
       };
     });
-  }, [metricsDataViewId]);
+  }, [metricsDataViewId, metric]);
 
   return { charts, error };
 };
@@ -97,10 +97,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');
@@ -109,27 +109,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');
@@ -138,26 +137,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 {

diff --git a/...lity_solution/infra/public/components/asset_details/hooks/use_host_metrics_charts.test.ts b/...lity_solution/infra/public/components/asset_details/hooks/use_host_metrics_charts.test.ts
@@ -61,7 +61,7 @@ describe('useHostCharts', () => {
           const expectedOrder = getHostChartsExpectedOrder(metric, true);
 
           const { result, waitForNextUpdate } = renderHook(() =>
-            useHostCharts({ dataViewId, metric, options: { overview: true } })
+            useHostCharts({ dataViewId, metric, overview: true })
           );
           await waitForNextUpdate();
 
@@ -81,7 +81,7 @@ describe('useHostCharts', () => {
 describe('useKubernetesCharts', () => {
   it('should return an array of charts with correct order - overview', async () => {
     const { result, waitForNextUpdate } = renderHook(() =>
-      useKubernetesCharts({ dataViewId, options: { overview: true } })
+      useKubernetesCharts({ dataViewId, overview: true })
     );
     await waitForNextUpdate();
 
@@ -141,7 +141,7 @@ describe('useHostKpiCharts', () => {
     };
 
     const { result, waitForNextUpdate } = renderHook(() =>
-      useHostKpiCharts({ dataViewId, options })
+      useHostKpiCharts({ dataViewId, ...options })
     );
     await waitForNextUpdate();