From d3db40ec625d80da931623068d1853360dcfd885 Mon Sep 17 00:00:00 2001
From: Tiago Vila Verde <tiago.vilaverde@elastic.co>
Date: Mon, 1 Jan 2024 20:33:33 +0200
Subject: [PATCH] adapt risk summary to both entity flyouts

---
 .../risk_summary_flyout/risk_summary.test.tsx |   5 +
 .../risk_summary_flyout/risk_summary.tsx      | 376 +++++++++---------
 .../entity_details/host_right/content.tsx     |  15 +-
 .../entity_details/user_right/content.tsx     |   4 +-
 4 files changed, 216 insertions(+), 184 deletions(-)

diff --git a/x-pack/plugins/security_solution/public/entity_analytics/components/risk_summary_flyout/risk_summary.test.tsx b/x-pack/plugins/security_solution/public/entity_analytics/components/risk_summary_flyout/risk_summary.test.tsx
index 5862ac7cd9464..81a9159a4f44a 100644
--- a/x-pack/plugins/security_solution/public/entity_analytics/components/risk_summary_flyout/risk_summary.test.tsx
+++ b/x-pack/plugins/security_solution/public/entity_analytics/components/risk_summary_flyout/risk_summary.test.tsx
@@ -5,6 +5,7 @@
  * 2.0.
  */
 
+import { RiskScoreEntity } from '../../../../common/entity_analytics/risk_engine/types';
 import { render } from '@testing-library/react';
 import React from 'react';
 import { TestProviders } from '../../../common/mock';
@@ -21,6 +22,7 @@ describe('RiskSummary', () => {
           riskScoreData={mockRiskScoreState}
           queryId={'testQuery'}
           openDetailsPanel={() => {}}
+          entity={RiskScoreEntity.user}
         />
       </TestProviders>
     );
@@ -37,6 +39,7 @@ describe('RiskSummary', () => {
           riskScoreData={{ ...mockRiskScoreState, data: undefined }}
           queryId={'testQuery'}
           openDetailsPanel={() => {}}
+          entity={RiskScoreEntity.user}
         />
       </TestProviders>
     );
@@ -50,6 +53,7 @@ describe('RiskSummary', () => {
           riskScoreData={mockRiskScoreState}
           queryId={'testQuery'}
           openDetailsPanel={() => {}}
+          entity={RiskScoreEntity.user}
         />
       </TestProviders>
     );
@@ -64,6 +68,7 @@ describe('RiskSummary', () => {
           riskScoreData={mockRiskScoreState}
           queryId={'testQuery'}
           openDetailsPanel={() => {}}
+          entity={RiskScoreEntity.user}
         />
       </TestProviders>
     );
diff --git a/x-pack/plugins/security_solution/public/entity_analytics/components/risk_summary_flyout/risk_summary.tsx b/x-pack/plugins/security_solution/public/entity_analytics/components/risk_summary_flyout/risk_summary.tsx
index 50259cd6ca134..21467afd5c718 100644
--- a/x-pack/plugins/security_solution/public/entity_analytics/components/risk_summary_flyout/risk_summary.tsx
+++ b/x-pack/plugins/security_solution/public/entity_analytics/components/risk_summary_flyout/risk_summary.tsx
@@ -21,6 +21,10 @@ import { css } from '@emotion/react';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { euiThemeVars } from '@kbn/ui-theme';
 import { i18n } from '@kbn/i18n';
+import type {
+  HostRiskScore,
+  UserRiskScore,
+} from '../../../../common/search_strategy/security_solution/risk_score';
 import { UserDetailsLeftPanelTab } from '../../../flyout/entity_details/user_details_left/tabs';
 import { InspectButton, InspectButtonContainer } from '../../../common/components/inspect';
 import { ONE_WEEK_IN_HOURS } from '../../../timelines/components/side_panel/new_user_detail/constants';
@@ -31,10 +35,11 @@ import { ExpandablePanel } from '../../../flyout/shared/components/expandable_pa
 import type { RiskScoreState } from '../../api/hooks/use_risk_score';
 import { getRiskScoreSummaryAttributes } from '../../lens_attributes/risk_score_summary';
 
-export interface RiskSummaryProps {
-  riskScoreData: RiskScoreState<RiskScoreEntity.user>;
+export interface RiskSummaryProps<T extends RiskScoreEntity> {
+  riskScoreData: RiskScoreState<T>;
   queryId: string;
   openDetailsPanel: (tab: UserDetailsLeftPanelTab) => void;
+  entity: T;
 }
 
 interface TableItem {
@@ -44,203 +49,214 @@ interface TableItem {
 const LENS_VISUALIZATION_HEIGHT = 126; //  Static height in pixels specified by design
 const LAST_30_DAYS = { from: 'now-30d', to: 'now' };
 
-export const RiskSummary = React.memo(
-  ({ riskScoreData, queryId, openDetailsPanel }: RiskSummaryProps) => {
-    const { data: userRisk } = riskScoreData;
-    const userRiskData = userRisk && userRisk.length > 0 ? userRisk[0] : undefined;
-    const { euiTheme } = useEuiTheme();
+const RiskSummaryComponent = <T extends RiskScoreEntity>({
+  riskScoreData,
+  queryId,
+  openDetailsPanel,
+  entity,
+}: RiskSummaryProps<T>) => {
+  const { data } = riskScoreData;
+  const riskData = data && data.length > 0 ? data[0] : undefined;
+  const { euiTheme } = useEuiTheme();
 
-    const lensAttributes = useMemo(() => {
-      return getRiskScoreSummaryAttributes({
-        severity: userRiskData?.user?.risk?.calculated_level,
-        query: `user.name: ${userRiskData?.user?.name}`,
-        spaceId: 'default',
-        riskEntity: RiskScoreEntity.user,
-      });
-    }, [userRiskData]);
+  const entityData = (() => {
+    if (!riskData) return;
+    if (entity === RiskScoreEntity.user) return (riskData as UserRiskScore).user;
+    if (entity === RiskScoreEntity.host) return (riskData as HostRiskScore).host;
+  })();
 
-    const columns: Array<EuiBasicTableColumn<TableItem>> = useMemo(
-      () => [
-        {
-          field: 'category',
-          name: (
+  const lensAttributes = useMemo(() => {
+    return getRiskScoreSummaryAttributes({
+      severity: entityData?.risk?.calculated_level,
+      query: `user.name: ${entityData?.name}`,
+      spaceId: 'default',
+      riskEntity: RiskScoreEntity.user,
+    });
+  }, [entityData]);
+
+  const columns: Array<EuiBasicTableColumn<TableItem>> = useMemo(
+    () => [
+      {
+        field: 'category',
+        name: (
+          <FormattedMessage
+            id="xpack.securitySolution.flyout.entityDetails.categoryColumnLabel"
+            defaultMessage="Category"
+          />
+        ),
+        truncateText: false,
+        mobileOptions: { show: true },
+        sortable: true,
+      },
+      {
+        field: 'count',
+        name: (
+          <FormattedMessage
+            id="xpack.securitySolution.flyout.entityDetails.inputsColumnLabel"
+            defaultMessage="Inputs"
+          />
+        ),
+        truncateText: false,
+        mobileOptions: { show: true },
+        sortable: true,
+        dataType: 'number',
+      },
+    ],
+    []
+  );
+
+  const xsFontSize = useEuiFontSize('xxs').fontSize;
+
+  const items: TableItem[] = useMemo(
+    () => [
+      {
+        category: i18n.translate('xpack.securitySolution.flyout.entityDetails.alertsGroupLabel', {
+          defaultMessage: 'Alerts',
+        }),
+        count: entityData?.risk.inputs?.length ?? 0,
+      },
+    ],
+    [entityData?.risk.inputs?.length]
+  );
+
+  return (
+    <EuiAccordion
+      initialIsOpen
+      id={'risk_summary'}
+      buttonProps={{
+        css: css`
+          color: ${euiTheme.colors.primary};
+        `,
+      }}
+      buttonContent={
+        <EuiTitle size="xs">
+          <h3>
             <FormattedMessage
-              id="xpack.securitySolution.flyout.entityDetails.categoryColumnLabel"
-              defaultMessage="Category"
+              id="xpack.securitySolution.flyout.entityDetails.title"
+              defaultMessage="Risk summary"
             />
-          ),
-          truncateText: false,
-          mobileOptions: { show: true },
-          sortable: true,
-        },
-        {
-          field: 'count',
-          name: (
+          </h3>
+        </EuiTitle>
+      }
+      extraAction={
+        <span
+          data-test-subj="risk-summary-updatedAt"
+          css={css`
+            font-size: ${xsFontSize};
+          `}
+        >
+          {riskData && (
             <FormattedMessage
-              id="xpack.securitySolution.flyout.entityDetails.inputsColumnLabel"
-              defaultMessage="Inputs"
+              id="xpack.securitySolution.flyout.entityDetails.riskUpdatedTime"
+              defaultMessage="Updated {time}"
+              values={{
+                time: (
+                  <FormattedRelativePreferenceDate
+                    value={riskData['@timestamp']}
+                    dateFormat="MMM D, YYYY"
+                    relativeThresholdInHrs={ONE_WEEK_IN_HOURS}
+                  />
+                ),
+              }}
             />
-          ),
-          truncateText: false,
-          mobileOptions: { show: true },
-          sortable: true,
-          dataType: 'number',
-        },
-      ],
-      []
-    );
-
-    const xsFontSize = useEuiFontSize('xxs').fontSize;
-
-    const items: TableItem[] = useMemo(
-      () => [
-        {
-          category: i18n.translate('xpack.securitySolution.flyout.entityDetails.alertsGroupLabel', {
-            defaultMessage: 'Alerts',
-          }),
-          count: userRiskData?.user.risk.inputs?.length ?? 0,
-        },
-      ],
-      [userRiskData?.user.risk.inputs?.length]
-    );
+          )}
+        </span>
+      }
+    >
+      <EuiSpacer size="m" />
 
-    return (
-      <EuiAccordion
-        initialIsOpen
-        id={'risk_summary'}
-        buttonProps={{
-          css: css`
-            color: ${euiTheme.colors.primary};
-          `,
-        }}
-        buttonContent={
-          <EuiTitle size="xs">
-            <h3>
-              <FormattedMessage
-                id="xpack.securitySolution.flyout.entityDetails.title"
-                defaultMessage="Risk summary"
-              />
-            </h3>
-          </EuiTitle>
-        }
-        extraAction={
-          <span
-            data-test-subj="risk-summary-updatedAt"
-            css={css`
-              font-size: ${xsFontSize};
-            `}
-          >
-            {userRiskData && (
-              <FormattedMessage
-                id="xpack.securitySolution.flyout.entityDetails.riskUpdatedTime"
-                defaultMessage="Updated {time}"
-                values={{
-                  time: (
-                    <FormattedRelativePreferenceDate
-                      value={userRiskData['@timestamp']}
-                      dateFormat="MMM D, YYYY"
-                      relativeThresholdInHrs={ONE_WEEK_IN_HOURS}
-                    />
-                  ),
-                }}
-              />
-            )}
-          </span>
-        }
-      >
-        <EuiSpacer size="m" />
-
-        <ExpandablePanel
-          header={{
-            title: (
+      <ExpandablePanel
+        header={{
+          title: (
+            <FormattedMessage
+              id="xpack.securitySolution.flyout.entityDetails.riskInputs"
+              defaultMessage="Risk inputs"
+            />
+          ),
+          link: {
+            callback: () => openDetailsPanel(UserDetailsLeftPanelTab.RISK_INPUTS),
+            tooltip: (
               <FormattedMessage
-                id="xpack.securitySolution.flyout.entityDetails.riskInputs"
-                defaultMessage="Risk inputs"
+                id="xpack.securitySolution.flyout.entityDetails.showAllRiskInputs"
+                defaultMessage="Show all risk inputs"
               />
             ),
-            link: {
-              callback: () => openDetailsPanel(UserDetailsLeftPanelTab.RISK_INPUTS),
-              tooltip: (
-                <FormattedMessage
-                  id="xpack.securitySolution.flyout.entityDetails.showAllRiskInputs"
-                  defaultMessage="Show all risk inputs"
+          },
+          iconType: 'arrowStart',
+        }}
+        expand={{
+          expandable: false,
+        }}
+      >
+        <EuiFlexGroup gutterSize="m" direction="column">
+          <EuiFlexItem grow={false}>
+            <div
+              // Improve Visualization loading state by predefining the size
+              css={css`
+                height: ${LENS_VISUALIZATION_HEIGHT}px;
+              `}
+            >
+              {riskData && (
+                <VisualizationEmbeddable
+                  applyGlobalQueriesAndFilters={false}
+                  lensAttributes={lensAttributes}
+                  id={`RiskSummary-risk_score_metric`}
+                  timerange={LAST_30_DAYS}
+                  width={'100%'}
+                  height={LENS_VISUALIZATION_HEIGHT}
+                  disableOnClickFilter
+                  inspectTitle={
+                    <FormattedMessage
+                      id="xpack.securitySolution.flyout.entityDetails.inspectVisualizationTitle"
+                      defaultMessage="Risk Summary Visualization"
+                    />
+                  }
                 />
-              ),
-            },
-            iconType: 'arrowStart',
-          }}
-          expand={{
-            expandable: false,
-          }}
-        >
-          <EuiFlexGroup gutterSize="m" direction="column">
-            <EuiFlexItem grow={false}>
+              )}
+            </div>
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <InspectButtonContainer>
               <div
-                // Improve Visualization loading state by predefining the size
+                // Anchors the position absolute inspect button (nearest positioned ancestor)
                 css={css`
-                  height: ${LENS_VISUALIZATION_HEIGHT}px;
+                  position: relative;
                 `}
               >
-                {userRiskData && (
-                  <VisualizationEmbeddable
-                    applyGlobalQueriesAndFilters={false}
-                    lensAttributes={lensAttributes}
-                    id={`RiskSummary-risk_score_metric`}
-                    timerange={LAST_30_DAYS}
-                    width={'100%'}
-                    height={LENS_VISUALIZATION_HEIGHT}
-                    disableOnClickFilter
-                    inspectTitle={
-                      <FormattedMessage
-                        id="xpack.securitySolution.flyout.entityDetails.inspectVisualizationTitle"
-                        defaultMessage="Risk Summary Visualization"
-                      />
-                    }
-                  />
-                )}
-              </div>
-            </EuiFlexItem>
-            <EuiFlexItem grow={false}>
-              <InspectButtonContainer>
                 <div
-                  // Anchors the position absolute inspect button (nearest positioned ancestor)
+                  // Position the inspect button above the table
                   css={css`
-                    position: relative;
+                    position: absolute;
+                    right: 0;
+                    top: -${euiThemeVars.euiSize};
                   `}
                 >
-                  <div
-                    // Position the inspect button above the table
-                    css={css`
-                      position: absolute;
-                      right: 0;
-                      top: -${euiThemeVars.euiSize};
-                    `}
-                  >
-                    <InspectButton
-                      queryId={queryId}
-                      title={
-                        <FormattedMessage
-                          id="xpack.securitySolution.flyout.entityDetails.inspectTableTitle"
-                          defaultMessage="Risk Summary Table"
-                        />
-                      }
-                    />
-                  </div>
-                  <EuiBasicTable
-                    data-test-subj="risk-summary-table"
-                    responsive={false}
-                    columns={columns}
-                    items={items}
-                    compressed
+                  <InspectButton
+                    queryId={queryId}
+                    title={
+                      <FormattedMessage
+                        id="xpack.securitySolution.flyout.entityDetails.inspectTableTitle"
+                        defaultMessage="Risk Summary Table"
+                      />
+                    }
                   />
                 </div>
-              </InspectButtonContainer>
-            </EuiFlexItem>
-          </EuiFlexGroup>
-        </ExpandablePanel>
-        <EuiSpacer size="s" />
-      </EuiAccordion>
-    );
-  }
-);
+                <EuiBasicTable
+                  data-test-subj="risk-summary-table"
+                  responsive={false}
+                  columns={columns}
+                  items={items}
+                  compressed
+                />
+              </div>
+            </InspectButtonContainer>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </ExpandablePanel>
+      <EuiSpacer size="s" />
+    </EuiAccordion>
+  );
+};
+
+export const RiskSummary = React.memo(RiskSummaryComponent);
 RiskSummary.displayName = 'RiskSummary';
diff --git a/x-pack/plugins/security_solution/public/flyout/entity_details/host_right/content.tsx b/x-pack/plugins/security_solution/public/flyout/entity_details/host_right/content.tsx
index 4a5ddcb3f181f..fb768fd9de26f 100644
--- a/x-pack/plugins/security_solution/public/flyout/entity_details/host_right/content.tsx
+++ b/x-pack/plugins/security_solution/public/flyout/entity_details/host_right/content.tsx
@@ -8,11 +8,13 @@
 import { EuiHorizontalRule } from '@elastic/eui';
 
 import React from 'react';
+import { RiskSummary } from '../../../entity_analytics/components/risk_summary_flyout/risk_summary';
 import type { RiskScoreState } from '../../../entity_analytics/api/hooks/use_risk_score';
-import type { HostItem, RiskScoreEntity } from '../../../../common/search_strategy';
+import { RiskScoreEntity } from '../../../../common/search_strategy';
+import type { HostItem } from '../../../../common/search_strategy';
 import { FlyoutBody } from '../../shared/components/flyout_body';
 import { ObservedEntity } from '../shared/components/observed_entity';
-import { HOST_PANEL_OBSERVED_HOST_QUERY_ID } from '.';
+import { HOST_PANEL_OBSERVED_HOST_QUERY_ID, HOST_PANEL_RISK_SCORE_QUERY_ID } from '.';
 import type { ObservedEntityData } from '../shared/components/observed_entity/types';
 import { useObservedHostFields } from './hooks/use_observed_host_fields';
 
@@ -37,7 +39,14 @@ export const HostPanelContent = ({
     <FlyoutBody>
       {riskScoreState.isModuleEnabled && riskScoreState.data?.length !== 0 && (
         <>
-          {/* TODO <RiskSummary riskScoreData={riskScoreState} queryId={HOST_PANEL_RISK_SCORE_QUERY_ID} /> */}
+          {
+            <RiskSummary
+              riskScoreData={riskScoreState}
+              queryId={HOST_PANEL_RISK_SCORE_QUERY_ID}
+              entity={RiskScoreEntity.host}
+              openDetailsPanel={() => {}}
+            />
+          }
           <EuiHorizontalRule margin="m" />
         </>
       )}
diff --git a/x-pack/plugins/security_solution/public/flyout/entity_details/user_right/content.tsx b/x-pack/plugins/security_solution/public/flyout/entity_details/user_right/content.tsx
index f1f7916d3907c..7cfff92b02421 100644
--- a/x-pack/plugins/security_solution/public/flyout/entity_details/user_right/content.tsx
+++ b/x-pack/plugins/security_solution/public/flyout/entity_details/user_right/content.tsx
@@ -13,7 +13,8 @@ import { RiskSummary } from '../../../entity_analytics/components/risk_summary_f
 import type { RiskScoreState } from '../../../entity_analytics/api/hooks/use_risk_score';
 import { ManagedUser } from '../../../timelines/components/side_panel/new_user_detail/managed_user';
 import type { ManagedUserData } from '../../../timelines/components/side_panel/new_user_detail/types';
-import type { RiskScoreEntity, UserItem } from '../../../../common/search_strategy';
+import { RiskScoreEntity } from '../../../../common/search_strategy';
+import type { UserItem } from '../../../../common/search_strategy';
 import { USER_PANEL_RISK_SCORE_QUERY_ID } from '.';
 import { FlyoutBody } from '../../shared/components/flyout_body';
 import { ObservedEntity } from '../shared/components/observed_entity';
@@ -50,6 +51,7 @@ export const UserPanelContent = ({
             riskScoreData={riskScoreState}
             queryId={USER_PANEL_RISK_SCORE_QUERY_ID}
             openDetailsPanel={openDetailsPanel}
+            entity={RiskScoreEntity.user}
           />
           <EuiHorizontalRule margin="m" />
         </>