diff --git a/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/pages/entity_analytics_privileged_user_monitoring_page.tsx b/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/pages/entity_analytics_privileged_user_monitoring_page.tsx index 7770a19459bb3..c151b9fd67b68 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/pages/entity_analytics_privileged_user_monitoring_page.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/pages/entity_analytics_privileged_user_monitoring_page.tsx @@ -4,7 +4,7 @@ * 2.0; you may not use this file except in compliance with the Elastic License * 2.0. */ -import React, { useCallback, useEffect, useReducer } from 'react'; +import React, { useCallback, useEffect, useMemo, useReducer } from 'react'; import { EuiButtonEmpty, EuiEmptyPrompt, @@ -37,6 +37,8 @@ import { HeaderPage } from '../../common/components/header_page'; import { useEntityAnalyticsRoutes } from '../api/api'; import { usePrivilegedMonitoringEngineStatus } from '../api/hooks/use_privileged_monitoring_engine_status'; import { PrivilegedUserMonitoringManageDataSources } from '../components/privileged_user_monitoring_manage_data_sources'; +import { EmptyPrompt } from '../../common/components/empty_prompt'; +import { useDataView } from '../../data_view_manager/hooks/use_data_view'; type PageState = | { type: 'fetchingEngineStatus' } @@ -100,11 +102,26 @@ export const EntityAnalyticsPrivilegedUserMonitoringPage = () => { const { initPrivilegedMonitoringEngine } = useEntityAnalyticsRoutes(); const [state, dispatch] = useReducer(reducer, initialState); - const { sourcererDataView: oldSourcererDataView } = useSourcererDataView(); + const { + indicesExist: oldIndicesExist, + loading: oldIsSourcererLoading, + sourcererDataView: oldSourcererDataViewSpec, + } = useSourcererDataView(); const newDataViewPickerEnabled = useIsExperimentalFeatureEnabled('newDataViewPickerEnabled'); + const { dataView, status } = useDataView(); const { dataViewSpec } = useDataViewSpec(); - const sourcererDataView = newDataViewPickerEnabled ? dataViewSpec : oldSourcererDataView; + const isSourcererLoading = useMemo( + () => (newDataViewPickerEnabled ? status !== 'ready' : oldIsSourcererLoading), + [newDataViewPickerEnabled, oldIsSourcererLoading, status] + ); + + const indicesExist = useMemo( + () => (newDataViewPickerEnabled ? !!dataView?.matchedIndices?.length : oldIndicesExist), + [dataView?.matchedIndices?.length, newDataViewPickerEnabled, oldIndicesExist] + ); + + const sourcererDataView = newDataViewPickerEnabled ? dataViewSpec : oldSourcererDataViewSpec; const engineStatus = usePrivilegedMonitoringEngineStatus(); const initEngineCallBack = useCallback( async (userCount: number) => { @@ -163,6 +180,10 @@ export const EntityAnalyticsPrivilegedUserMonitoringPage = () => { min-height: calc(100vh - 240px); `; + if (!indicesExist) { + return ; + } + return ( <> {state.type === 'dashboard' && ( @@ -172,23 +193,24 @@ export const EntityAnalyticsPrivilegedUserMonitoringPage = () => { )} - {state.type === 'fetchingEngineStatus' && ( - <> - - } - /> - - - - - - - )} + {state.type === 'fetchingEngineStatus' || + (isSourcererLoading && ( + <> + + } + /> + + + + + + + ))} {state.type === 'onboarding' && ( <>