Add panel loader to entity analytics risk panels (#142122)

elastic · Sep 29, 2022 · 4700107 · 4700107
1 parent d915169
commit 4700107
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 6 deletions.
diff --git a/...s/security_solution/public/overview/components/entity_analytics/host_risk_score/index.tsx b/...s/security_solution/public/overview/components/entity_analytics/host_risk_score/index.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 import React, { useEffect, useMemo, useState } from 'react';
-import { EuiButtonEmpty, EuiFlexGroup, EuiFlexItem, EuiPanel } from '@elastic/eui';
+import { EuiButtonEmpty, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 
 import { useDispatch } from 'react-redux';
 import { RiskScoresDeprecated } from '../../../../common/components/risk_score/risk_score_deprecated';
@@ -35,6 +35,8 @@ import { EntityAnalyticsHostRiskScoreDisable } from '../../../../common/componen
 import { RiskScoreHeaderTitle } from '../../../../common/components/risk_score/risk_score_onboarding/risk_score_header_title';
 import { RiskScoresNoDataDetected } from '../../../../common/components/risk_score/risk_score_onboarding/risk_score_no_data_detected';
 import { useRefetchQueries } from '../../../../common/hooks/use_refetch_queries';
+import { Loader } from '../../../../common/components/loader';
+import { Panel } from '../../../../common/components/panel';
 
 const TABLE_QUERY_ID = 'hostRiskDashboardTable';
 const HOST_RISK_KPI_QUERY_ID = 'headerHostRiskScoreKpiQuery';
@@ -149,7 +151,7 @@ const EntityAnalyticsHostRiskScoresComponent = () => {
 
   return (
     <InspectButtonContainer>
-      <EuiPanel hasBorder data-test-subj="entity_analytics_hosts">
+      <Panel hasBorder data-test-subj="entity_analytics_hosts">
         <HeaderSection
           title={<RiskScoreHeaderTitle riskScoreEntity={RiskScoreEntity.host} />}
           titleSize="s"
@@ -207,7 +209,10 @@ const EntityAnalyticsHostRiskScoresComponent = () => {
             </EuiFlexItem>
           </EuiFlexGroup>
         )}
-      </EuiPanel>
+        {(isTableLoading || isKpiLoading) && (
+          <Loader data-test-subj="loadingPanelRiskScore" overlay size="xl" />
+        )}
+      </Panel>
     </InspectButtonContainer>
   );
 };

diff --git a/...s/security_solution/public/overview/components/entity_analytics/user_risk_score/index.tsx b/...s/security_solution/public/overview/components/entity_analytics/user_risk_score/index.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 import React, { useEffect, useMemo, useState } from 'react';
-import { EuiButtonEmpty, EuiFlexGroup, EuiFlexItem, EuiPanel } from '@elastic/eui';
+import { EuiButtonEmpty, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { useDispatch } from 'react-redux';
 import { RiskScoresDeprecated } from '../../../../common/components/risk_score/risk_score_deprecated';
 import { SeverityFilterGroup } from '../../../../common/components/severity/severity_filter_group';
@@ -35,6 +35,8 @@ import { EntityAnalyticsUserRiskScoreDisable } from '../../../../common/componen
 import { RiskScoreHeaderTitle } from '../../../../common/components/risk_score/risk_score_onboarding/risk_score_header_title';
 import { RiskScoresNoDataDetected } from '../../../../common/components/risk_score/risk_score_onboarding/risk_score_no_data_detected';
 import { useRefetchQueries } from '../../../../common/hooks/use_refetch_queries';
+import { Loader } from '../../../../common/components/loader';
+import { Panel } from '../../../../common/components/panel';
 
 const TABLE_QUERY_ID = 'userRiskDashboardTable';
 const USER_RISK_KPI_QUERY_ID = 'headerUserRiskScoreKpiQuery';
@@ -149,7 +151,7 @@ const EntityAnalyticsUserRiskScoresComponent = () => {
 
   return (
     <InspectButtonContainer>
-      <EuiPanel hasBorder data-test-subj="entity_analytics_users">
+      <Panel hasBorder data-test-subj="entity_analytics_users">
         <HeaderSection
           title={<RiskScoreHeaderTitle riskScoreEntity={RiskScoreEntity.user} />}
           titleSize="s"
@@ -207,7 +209,10 @@ const EntityAnalyticsUserRiskScoresComponent = () => {
             </EuiFlexItem>
           </EuiFlexGroup>
         )}
-      </EuiPanel>
+        {(isTableLoading || isKpiLoading) && (
+          <Loader data-test-subj="loadingPanelRiskScore" overlay size="xl" />
+        )}
+      </Panel>
     </InspectButtonContainer>
   );
 };