diff --git a/.eslintrc.js b/.eslintrc.js index d7956c159068823..4e6c367970c02b8 100644 --- 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/host_charts.tsx b/x-pack/plugins/observability_solution/infra/public/components/asset_details/charts/host_charts.tsx index d8d60deb81efb46..e3644df84f787ec 100644 --- a/x-pack/plugins/observability_solution/infra/public/components/asset_details/charts/host_charts.tsx +++ b/x-pack/plugins/observability_solution/infra/public/components/asset_details/charts/host_charts.tsx @@ -29,7 +29,7 @@ export const HostCharts = React.forwardRef( const { charts } = useHostCharts({ metric, dataViewId: dataView?.id, - options: { overview }, + overview, }); return ( 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 b386b1e9d8cbca2..28d25ef6fe9d881 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 @@ -27,7 +27,7 @@ export const KubernetesNodeCharts = React.forwardRef { const { charts } = useKubernetesCharts({ dataViewId: dataView?.id, - options: { overview }, + overview, }); const hasIntegration = useIntegrationCheck({ dependsOn: INTEGRATIONS.kubernetesNode }); diff --git a/x-pack/plugins/observability_solution/infra/public/components/asset_details/components/kpis/container_kpi_charts.tsx b/x-pack/plugins/observability_solution/infra/public/components/asset_details/components/kpis/container_kpi_charts.tsx index 8e4a67526f72c5e..ffb82e53eb9be59 100644 --- a/x-pack/plugins/observability_solution/infra/public/components/asset_details/components/kpis/container_kpi_charts.tsx +++ b/x-pack/plugins/observability_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,7 +64,6 @@ const DockerKpiCharts = ({ dateRange, dataView, filters, - options, query, searchSessionId, loading = false, @@ -75,10 +71,7 @@ const DockerKpiCharts = ({ 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/x-pack/plugins/observability_solution/infra/public/components/asset_details/components/kpis/host_kpi_charts.tsx b/x-pack/plugins/observability_solution/infra/public/components/asset_details/components/kpis/host_kpi_charts.tsx index fa11d67df90e982..adccf59e519d564 100644 --- a/x-pack/plugins/observability_solution/infra/public/components/asset_details/components/kpis/host_kpi_charts.tsx +++ b/x-pack/plugins/observability_solution/infra/public/components/asset_details/components/kpis/host_kpi_charts.tsx @@ -18,9 +18,7 @@ export interface HostKpiChartsProps { query?: Query; filters?: Filter[]; searchSessionId?: string; - options?: { - getSubtitle?: (formulaValue: string) => string; - }; + getSubtitle?: (formulaValue: string) => string; loading?: boolean; } @@ -28,7 +26,7 @@ export const HostKpiCharts = ({ dateRange, dataView, filters, - options, + getSubtitle, query, searchSessionId, loading = false, @@ -36,10 +34,8 @@ export const HostKpiCharts = ({ 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/x-pack/plugins/observability_solution/infra/public/components/asset_details/hooks/use_container_metrics_charts.ts b/x-pack/plugins/observability_solution/infra/public/components/asset_details/hooks/use_container_metrics_charts.ts index 08710378643d5b0..9dfe49ed9f4970f 100644 --- a/x-pack/plugins/observability_solution/infra/public/components/asset_details/hooks/use_container_metrics_charts.ts +++ b/x-pack/plugins/observability_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,9 +109,8 @@ 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, @@ -119,17 +118,17 @@ export const useDockerContainerKpiCharts = ({ }), }) ); - }, [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,9 +137,9 @@ 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, @@ -148,16 +147,11 @@ export const useK8sContainerKpiCharts = ({ }), }) ); - }, [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/x-pack/plugins/observability_solution/infra/public/components/asset_details/hooks/use_data_views.ts b/x-pack/plugins/observability_solution/infra/public/components/asset_details/hooks/use_data_views.ts index 6ef5ab61f517d7b..7740b968e74db9d 100644 --- a/x-pack/plugins/observability_solution/infra/public/components/asset_details/hooks/use_data_views.ts +++ b/x-pack/plugins/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/x-pack/plugins/observability_solution/infra/public/components/asset_details/hooks/use_host_metrics_charts.test.ts b/x-pack/plugins/observability_solution/infra/public/components/asset_details/hooks/use_host_metrics_charts.test.ts index c4e3815f5e0f836..006fae9bec753eb 100644 --- a/x-pack/plugins/observability_solution/infra/public/components/asset_details/hooks/use_host_metrics_charts.test.ts +++ b/x-pack/plugins/observability_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(); diff --git a/x-pack/plugins/observability_solution/infra/public/components/asset_details/hooks/use_host_metrics_charts.ts b/x-pack/plugins/observability_solution/infra/public/components/asset_details/hooks/use_host_metrics_charts.ts index 6d5381caf6187da..57c9a5a0d7d4275 100644 --- a/x-pack/plugins/observability_solution/infra/public/components/asset_details/hooks/use_host_metrics_charts.ts +++ b/x-pack/plugins/observability_solution/infra/public/components/asset_details/hooks/use_host_metrics_charts.ts @@ -7,24 +7,21 @@ import { i18n } from '@kbn/i18n'; import { findInventoryModel } from '@kbn/metrics-data-access-plugin/common'; +import { useMemo } from 'react'; import useAsync from 'react-use/lib/useAsync'; import { HostMetricTypes } from '../charts/types'; -interface UseChartsOptions { - overview?: boolean; -} - export const useHostCharts = ({ metric, dataViewId, - options, + overview, }: { metric: HostMetricTypes; dataViewId?: string; - options?: UseChartsOptions; + overview?: boolean; }) => { const { value: charts = [], error } = useAsync(async () => { - const hostCharts = await getHostsCharts({ metric, options }); + const hostCharts = await getHostsCharts({ metric, overview }); return hostCharts.map((chart) => ({ ...chart, ...(dataViewId && { @@ -33,24 +30,24 @@ export const useHostCharts = ({ }, }), })); - }, [dataViewId]); + }, [dataViewId, metric, overview]); return { charts, error }; }; export const useKubernetesCharts = ({ dataViewId, - options, + overview, }: { dataViewId?: string; - options?: UseChartsOptions; + overview?: boolean; }) => { - const model = findInventoryModel('host'); + const model = useMemo(() => findInventoryModel('host'), []); const { value: charts = [], error } = useAsync(async () => { const { kibernetesNode } = await model.metrics.getCharts(); - const items = options?.overview + const items = overview ? [kibernetesNode.xy.nodeCpuCapacity, kibernetesNode.xy.nodeMemoryCapacity] : [ kibernetesNode.xy.nodeCpuCapacity, @@ -69,7 +66,7 @@ export const useKubernetesCharts = ({ }), }; }); - }, [dataViewId, options?.overview]); + }, [dataViewId, overview, model.metrics]); return { charts, error }; }; @@ -83,10 +80,12 @@ const getSubtitleFromFormula = (value: string) => export const useHostKpiCharts = ({ dataViewId, - options, + seriesColor, + getSubtitle, }: { dataViewId?: string; - options?: { seriesColor: string; getSubtitle?: (formulaValue: string) => string }; + seriesColor?: string; + getSubtitle?: (formulaValue: string) => string; }) => { const { value: charts = [] } = useAsync(async () => { const model = findInventoryModel('host'); @@ -99,33 +98,33 @@ export const useHostKpiCharts = ({ disk.metric.diskUsage, ].map((chart) => ({ ...chart, - seriesColor: options?.seriesColor, + seriesColor, decimals: 1, - subtitle: getSubtitle(options, chart), + subtitle: getSubtitle ? getSubtitle(chart.value) : getSubtitleFromFormula(chart.value), ...(dataViewId && { dataset: { index: dataViewId, }, }), })); - }, [dataViewId, options?.seriesColor, options?.getSubtitle]); + }, [dataViewId, seriesColor, getSubtitle]); return charts; }; const getHostsCharts = async ({ metric, - options, + overview, }: { metric: HostMetricTypes; - options?: UseChartsOptions; + overview?: boolean; }) => { const model = findInventoryModel('host'); const { cpu, memory, network, disk, logs } = await model.metrics.getCharts(); switch (metric) { case 'cpu': - return options?.overview + return overview ? [cpu.xy.cpuUsage, cpu.xy.normalizedLoad1m] : [ cpu.xy.cpuUsage, @@ -134,13 +133,13 @@ const getHostsCharts = async ({ cpu.xy.loadBreakdown, ]; case 'memory': - return options?.overview + return overview ? [memory.xy.memoryUsage] : [memory.xy.memoryUsage, memory.xy.memoryUsageBreakdown]; case 'network': return [network.xy.rxTx]; case 'disk': - return options?.overview + return overview ? [disk.xy.diskUsageByMountPoint, disk.xy.diskIOReadWrite] : [disk.xy.diskUsageByMountPoint, disk.xy.diskIOReadWrite, disk.xy.diskThroughputReadWrite]; case 'log': @@ -149,12 +148,3 @@ const getHostsCharts = async ({ return []; } }; - -function getSubtitle( - options: { getSubtitle?: ((formulaValue: string) => string) | undefined } | undefined, - chart: { value: string } -) { - return options?.getSubtitle - ? options?.getSubtitle(chart.value) - : getSubtitleFromFormula(chart.value); -} 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 96082871c514174..f301798980f96d4 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,7 +34,11 @@ export const useLensAttributes = (params: UseLensAttributesParams) => { const builder = new LensConfigBuilder(dataViews, formulaAPI); return builder.build(params) as Promise; - }, [params.chartType, params.dataset, dataViews]); + // 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]); const injectFilters = useCallback( ({ filters, query }: { filters: Filter[]; query: Query }): LensAttributes | null => { diff --git a/x-pack/plugins/observability_solution/infra/public/hooks/use_log_view_reference.ts b/x-pack/plugins/observability_solution/infra/public/hooks/use_log_view_reference.ts index 56ba82b69733852..da68b8811558469 100644 --- a/x-pack/plugins/observability_solution/infra/public/hooks/use_log_view_reference.ts +++ b/x-pack/plugins/observability_solution/infra/public/hooks/use_log_view_reference.ts @@ -28,7 +28,7 @@ export const useLogViewReference = ({ id, name, extraFields = [] }: Props) => { const { loading, value: defaultLogView } = useAsync( () => logsShared.logViews.client.getLogView(DEFAULT_LOG_VIEW), - [] + [logsShared.logViews.client] ); const logViewReference = useLazyRef(() => { diff --git a/x-pack/plugins/observability_solution/infra/public/pages/metrics/hosts/components/kpis/kpi_charts.tsx b/x-pack/plugins/observability_solution/infra/public/pages/metrics/hosts/components/kpis/kpi_charts.tsx index 9b349441c587644..d0ff61c66abc68b 100644 --- a/x-pack/plugins/observability_solution/infra/public/pages/metrics/hosts/components/kpis/kpi_charts.tsx +++ b/x-pack/plugins/observability_solution/infra/public/pages/metrics/hosts/components/kpis/kpi_charts.tsx @@ -76,7 +76,7 @@ export const KpiCharts = () => { filters={afterLoadedState.filters} query={afterLoadedState.query} searchSessionId={afterLoadedState.searchSessionId} - options={{ getSubtitle: afterLoadedState.getSubtitle }} + getSubtitle={afterLoadedState.getSubtitle} loading={loading} /> ); 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 ac6c370a7ce6cfc..25e7f725ae4efcf 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 @@ -62,6 +62,7 @@ export const Chart = ({ id, ...chartProps }: ChartProps) => { chartProps.dataset, searchCriteria.filters, searchCriteria.panelFilters, + shouldUseSearchCriteria, ]); return ( diff --git a/x-pack/plugins/observability_solution/infra/public/pages/metrics/hosts/hooks/use_metrics_charts.ts b/x-pack/plugins/observability_solution/infra/public/pages/metrics/hosts/hooks/use_metrics_charts.ts index eb174c269388358..0dda83519660b28 100644 --- a/x-pack/plugins/observability_solution/infra/public/pages/metrics/hosts/hooks/use_metrics_charts.ts +++ b/x-pack/plugins/observability_solution/infra/public/pages/metrics/hosts/hooks/use_metrics_charts.ts @@ -11,9 +11,8 @@ import { findInventoryModel } from '@kbn/metrics-data-access-plugin/common'; import { PAGE_SIZE_OPTIONS } from '../constants'; export const useMetricsCharts = ({ dataViewId }: { dataViewId?: string }) => { - const model = findInventoryModel('host'); - const { value: charts = [] } = useAsync(async () => { + const model = findInventoryModel('host'); const { cpu, disk, memory, network } = await model.metrics.getCharts(); return [ diff --git a/x-pack/plugins/observability_solution/observability_ai_assistant_app/public/components/nav_control/index.tsx b/x-pack/plugins/observability_solution/observability_ai_assistant_app/public/components/nav_control/index.tsx index 8757b9f8235bf49..4bb7f1404117c94 100644 --- a/x-pack/plugins/observability_solution/observability_ai_assistant_app/public/components/nav_control/index.tsx +++ b/x-pack/plugins/observability_solution/observability_ai_assistant_app/public/components/nav_control/index.tsx @@ -56,7 +56,7 @@ export function NavControl({}: {}) { }) : undefined; }, - [service, hasBeenOpened] + [service, hasBeenOpened, notifications.toasts] ); const [isOpen, setIsOpen] = useState(false); diff --git a/x-pack/plugins/observability_solution/observability_ai_assistant_app/public/functions/lens.tsx b/x-pack/plugins/observability_solution/observability_ai_assistant_app/public/functions/lens.tsx index cd2a522755f65b6..ec51efb85efceb4 100644 --- a/x-pack/plugins/observability_solution/observability_ai_assistant_app/public/functions/lens.tsx +++ b/x-pack/plugins/observability_solution/observability_ai_assistant_app/public/functions/lens.tsx @@ -57,7 +57,7 @@ function Lens({ title: indexPattern, timeFieldName: timeField, }); - }, [indexPattern]); + }, [indexPattern, dataViews, timeField]); const [isSaveModalOpen, setIsSaveModalOpen] = useState(false); diff --git a/x-pack/plugins/observability_solution/observability_ai_assistant_app/public/functions/visualize_esql.tsx b/x-pack/plugins/observability_solution/observability_ai_assistant_app/public/functions/visualize_esql.tsx index 334db28a8b89ac3..e1e4c63096e81b4 100644 --- a/x-pack/plugins/observability_solution/observability_ai_assistant_app/public/functions/visualize_esql.tsx +++ b/x-pack/plugins/observability_solution/observability_ai_assistant_app/public/functions/visualize_esql.tsx @@ -121,7 +121,7 @@ export function VisualizeESQL({ const dataViewAsync = useAsync(() => { return getESQLAdHocDataview(indexPattern, dataViews); - }, [indexPattern]); + }, [indexPattern, dataViews]); const chatFlyoutSecondSlotHandler = useContext(ObservabilityAIAssistantMultipaneFlyoutContext); const [isSaveModalOpen, setIsSaveModalOpen] = useState(false); diff --git a/x-pack/plugins/observability_solution/observability_ai_assistant_app/public/hooks/use_conversation.ts b/x-pack/plugins/observability_solution/observability_ai_assistant_app/public/hooks/use_conversation.ts index 122d1d93addff0e..0616e9dbaca3249 100644 --- a/x-pack/plugins/observability_solution/observability_ai_assistant_app/public/hooks/use_conversation.ts +++ b/x-pack/plugins/observability_solution/observability_ai_assistant_app/public/hooks/use_conversation.ts @@ -152,7 +152,7 @@ export function useConversation({ throw error; }); }, - [displayedConversationId, initialTitle], + [displayedConversationId, initialTitle, service, setMessages], { defaultValue: () => { if (!displayedConversationId) {