Create AssetCriticalityBadgeAllowMissing component

elastic · Jan 15, 2024 · 4b2ad17 · 4b2ad17
1 parent 8fcc854
commit 4b2ad17
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 38 deletions.
diff --git a/...solution/public/entity_analytics/components/asset_criticality/asset_criticality_badge.tsx b/...solution/public/entity_analytics/components/asset_criticality/asset_criticality_badge.tsx
@@ -7,6 +7,7 @@
 import React from 'react';
 import { EuiHealth, EuiText } from '@elastic/eui';
 import { euiLightVars } from '@kbn/ui-theme';
+import { FormattedMessage } from '@kbn/i18n-react';
 import { CRITICALITY_LEVEL_TITLE, CRITICALITY_LEVEL_DESCRIPTION } from './translations';
 import type { CriticalityLevel } from '../../../../common/entity_analytics/asset_criticality/types';
 
@@ -50,3 +51,30 @@ export const AssetCriticalityBadge: React.FC<{
     </EuiHealth>
   );
 };
+
+export const AssetCriticalityBadgeAllowMissing: React.FC<{
+  criticalityLevel?: CriticalityLevel;
+  withDescription?: boolean;
+  style?: React.CSSProperties;
+  dataTestSubj?: string;
+}> = ({ criticalityLevel, style, dataTestSubj, withDescription }) => {
+  if (criticalityLevel) {
+    return (
+      <AssetCriticalityBadge
+        criticalityLevel={criticalityLevel}
+        dataTestSubj={dataTestSubj}
+        withDescription={withDescription}
+        style={style}
+      />
+    );
+  }
+
+  return (
+    <EuiHealth color="subdued" data-test-subj={dataTestSubj}>
+      <FormattedMessage
+        id="xpack.securitySolution.entityAnalytics.assetCriticality.noCriticality"
+        defaultMessage="No criticality assigned"
+      />
+    </EuiHealth>
+  );
+};
diff --git a/...ution/public/entity_analytics/components/asset_criticality/asset_criticality_selector.tsx b/...ution/public/entity_analytics/components/asset_criticality/asset_criticality_selector.tsx
@@ -12,7 +12,6 @@ import {
   EuiButtonEmpty,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiHealth,
   EuiLoadingSpinner,
   EuiModal,
   EuiModalBody,
@@ -29,7 +28,10 @@ import React, { useState } from 'react';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { css } from '@emotion/react';
 import { PICK_ASSET_CRITICALITY } from './translations';
-import { AssetCriticalityBadge } from './asset_criticality_badge';
+import {
+  AssetCriticalityBadge,
+  AssetCriticalityBadgeAllowMissing,
+} from './asset_criticality_badge';
 import type { Entity, ModalState, State } from './use_asset_criticality';
 import { useAssetCriticalityData, useCriticalityModal } from './use_asset_criticality';
 import type { CriticalityLevel } from '../../../../common/entity_analytics/asset_criticality/types';
@@ -78,18 +80,11 @@ export const AssetCriticalitySelector: React.FC<Props> = ({ entity }) => {
           >
             <EuiFlexItem>
               <EuiText size="s">
-                {criticality.status === 'update' && criticality.query.data?.criticality_level ? (
-                  <AssetCriticalityBadge
-                    criticalityLevel={criticality.query.data.criticality_level}
+                {criticality.status === 'update' && (
+                  <AssetCriticalityBadgeAllowMissing
+                    criticalityLevel={criticality.query.data?.criticality_level}
                     dataTestSubj="asset-criticality-level"
                   />
-                ) : (
-                  <EuiHealth color="subdued">
-                    <FormattedMessage
-                      id="xpack.securitySolution.entityAnalytics.assetCriticality.noCriticality"
-                      defaultMessage="No criticality assigned yet"
-                    />
-                  </EuiHealth>
                 )}
               </EuiText>
             </EuiFlexItem>

diff --git a/...ty_solution/public/entity_analytics/components/entity_details_flyout/tabs/risk_inputs.tsx b/...ty_solution/public/entity_analytics/components/entity_details_flyout/tabs/risk_inputs.tsx
@@ -6,19 +6,18 @@
  */
 
 import type { EuiBasicTableColumn, Pagination } from '@elastic/eui';
-import { EuiHealth, EuiSpacer, EuiInMemoryTable, EuiTitle, EuiCallOut } from '@elastic/eui';
+import { EuiSpacer, EuiInMemoryTable, EuiTitle, EuiCallOut } from '@elastic/eui';
 import { euiLightVars } from '@kbn/ui-theme';
 import React, { useCallback, useMemo, useState } from 'react';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { get } from 'lodash/fp';
 import { ALERT_RULE_NAME } from '@kbn/rule-data-utils';
 import styled from '@emotion/styled';
-import type { CriticalityLevel } from '../../../../../common/entity_analytics/asset_criticality/types';
 import { BasicTable } from '../../../../common/components/ml/tables/basic_table';
 import { PreferenceFormattedDate } from '../../../../common/components/formatted_date';
 import { ActionColumn } from '../components/action_column';
 import { RiskInputsUtilityBar } from '../components/utility_bar';
-import { AssetCriticalityBadge } from '../../asset_criticality';
+import { AssetCriticalityBadgeAllowMissing } from '../../asset_criticality';
 import { useRiskContributingAlerts } from '../../../hooks/use_risk_contributing_alerts';
 import { useRiskScore } from '../../../api/hooks/use_risk_score';
 import type { UserRiskScore, HostRiskScore } from '../../../../../common/search_strategy';
@@ -45,28 +44,6 @@ const FieldLabel = styled.span`
   color: ${euiLightVars.euiTitleColor};
 `;
 
-const CriticalityField: React.FC<{ criticalityLevel?: CriticalityLevel }> = ({
-  criticalityLevel,
-}) => {
-  if (criticalityLevel) {
-    return (
-      <AssetCriticalityBadge
-        criticalityLevel={criticalityLevel}
-        dataTestSubj="risk-inputs-asset-criticality-badge"
-      />
-    );
-  }
-
-  return (
-    <EuiHealth color="subdued" data-test-subj="no-criticality">
-      <FormattedMessage
-        id="xpack.securitySolution.flyout.entityDetails.riskInputs.noCriticality"
-        defaultMessage="No criticality assigned"
-      />
-    </EuiHealth>
-  );
-};
-
 const ContextsTable: React.FC<{ riskScore?: UserRiskScore | HostRiskScore; loading: boolean }> = ({
   riskScore,
   loading,
@@ -109,7 +86,12 @@ const ContextsTable: React.FC<{ riskScore?: UserRiskScore | HostRiskScore; loadi
   const items = [
     {
       label: 'Asset Criticality Level',
-      render: () => <CriticalityField criticalityLevel={criticalityLevel} />,
+      render: () => (
+        <AssetCriticalityBadgeAllowMissing
+          criticalityLevel={criticalityLevel}
+          dataTestSubj="risk-inputs-asset-criticality-badge"
+        />
+      ),
     },
   ];