[Security Solution] Create new host flyout

x-pack/plugins/security_solution/common/experimental_features.ts

@@ -100,11 +100,17 @@ export const allowedExperimentalValues = Object.freeze({
   assistantModelEvaluation: false,
 
   /*
-   * Enables the new user details flyout displayed on the Alerts page and timeline.
+   * Enables the new user details flyout displayed on the Alerts table.
    *
    **/
   newUserDetailsFlyout: false,
 
+  /*
+   * Enables the new host details flyout displayed on the Alerts table.
+   *
+   **/
+  newHostDetailsFlyout: false,
+
   /**
    * Enable risk engine client and initialisation of datastream, component templates and mappings
    */

x-pack/plugins/security_solution/common/utility_types.ts

@@ -71,3 +71,10 @@ export const assertUnreachable = (
 ): never => {
   throw new Error(`${message}: ${x}`);
 };
+
+type Without<T, U> = { [P in Exclude<keyof T, keyof U>]?: never };
+/**
+ * The XOR (exclusive OR) allows to ensure that a variable conforms to only one of several possible types.
+ * Read more: https://medium.com/@aeron169/building-a-xor-type-in-typescript-5f4f7e709a9d
+ */
+export type XOR<T, U> = T | U extends object ? (Without<T, U> & U) | (Without<U, T> & T) : T | U;

x-pack/plugins/security_solution/public/common/mock/storybook_providers.tsx

@@ -21,6 +21,7 @@ import { mockGlobalState } from './global_state';
 import { SUB_PLUGINS_REDUCER } from './utils';
 import { createSecuritySolutionStorageMock } from './mock_local_storage';
 import type { StartServices } from '../../types';
+import { ReactQueryClientProvider } from '../containers/query_client/query_client_provider';
 
 export const kibanaObservable = new BehaviorSubject({} as unknown as StartServices);
 
@@ -106,13 +107,15 @@ export const StorybookProviders: React.FC = ({ children }) => {
     <I18nProvider>
       <KibanaReactContext.Provider>
         <NavigationProvider core={coreMock}>
-          <CellActionsProvider getTriggerCompatibleActions={() => Promise.resolve([])}>
-            <ReduxStoreProvider store={store}>
-              <ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>
-                {children}
-              </ThemeProvider>
-            </ReduxStoreProvider>
-          </CellActionsProvider>
+          <ReactQueryClientProvider>
+            <CellActionsProvider getTriggerCompatibleActions={() => Promise.resolve([])}>
+              <ReduxStoreProvider store={store}>
+                <ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>
+                  {children}
+                </ThemeProvider>
+              </ReduxStoreProvider>
+            </CellActionsProvider>
+          </ReactQueryClientProvider>
         </NavigationProvider>
       </KibanaReactContext.Provider>
     </I18nProvider>

x-pack/plugins/security_solution/public/entity_analytics/components/entity_details_flyout/index.tsx

@@ -7,14 +7,14 @@
 
 import React from 'react';
 import { FormattedMessage } from '@kbn/i18n-react';
+import { EntityDetailsLeftPanelTab } from '../../../flyout/entity_details/shared/components/left_panel/left_panel_header';
 import { PREFIX } from '../../../flyout/shared/test_ids';
-import { UserDetailsLeftPanelTab } from '../../../flyout/entity_details/user_details_left/tabs';
 import { RiskInputsTab } from './tabs/risk_inputs';
 
 export const RISK_INPUTS_TAB_TEST_ID = `${PREFIX}RiskInputsTab` as const;
 
 export const getRiskInputTab = (alertIds: string[]) => ({
-  id: UserDetailsLeftPanelTab.RISK_INPUTS,
+  id: EntityDetailsLeftPanelTab.RISK_INPUTS,
   'data-test-subj': RISK_INPUTS_TAB_TEST_ID,
   name: (
     <FormattedMessage

x-pack/plugins/security_solution/public/entity_analytics/components/risk_summary_flyout/risk_summary.test.tsx

@@ -5,20 +5,38 @@
  * 2.0.
  */
 
+import {
+  mockHostRiskScoreState,
+  mockUserRiskScoreState,
+} from '../../../flyout/entity_details/mocks';
 import { render } from '@testing-library/react';
 import React from 'react';
 import { TestProviders } from '../../../common/mock';
-import { mockRiskScoreState } from '../../../flyout/entity_details/user_right/mocks';
 import { RiskSummary } from './risk_summary';
+import type {
+  LensAttributes,
+  VisualizationEmbeddableProps,
+} from '../../../common/components/visualization_actions/types';
 
-jest.mock('../../../common/components/visualization_actions/visualization_embeddable');
+const mockVisualizationEmbeddable = jest
+  .fn()
+  .mockReturnValue(<div data-test-subj="visualization-embeddable" />);
+
+jest.mock('../../../common/components/visualization_actions/visualization_embeddable', () => ({
+  VisualizationEmbeddable: (props: VisualizationEmbeddableProps) =>
+    mockVisualizationEmbeddable(props),
+}));
 
 describe('RiskSummary', () => {
+  beforeEach(() => {
+    mockVisualizationEmbeddable.mockClear();
+  });
+
   it('renders risk summary table', () => {
     const { getByTestId } = render(
       <TestProviders>
         <RiskSummary
-          riskScoreData={mockRiskScoreState}
+          riskScoreData={mockHostRiskScoreState}
           queryId={'testQuery'}
           openDetailsPanel={() => {}}
         />
@@ -34,7 +52,7 @@ describe('RiskSummary', () => {
     const { getByTestId } = render(
       <TestProviders>
         <RiskSummary
-          riskScoreData={{ ...mockRiskScoreState, data: undefined }}
+          riskScoreData={{ ...mockHostRiskScoreState, data: undefined }}
           queryId={'testQuery'}
           openDetailsPanel={() => {}}
         />
@@ -47,7 +65,7 @@ describe('RiskSummary', () => {
     const { getByTestId } = render(
       <TestProviders>
         <RiskSummary
-          riskScoreData={mockRiskScoreState}
+          riskScoreData={mockHostRiskScoreState}
           queryId={'testQuery'}
           openDetailsPanel={() => {}}
         />
@@ -61,7 +79,7 @@ describe('RiskSummary', () => {
     const { getByTestId } = render(
       <TestProviders>
         <RiskSummary
-          riskScoreData={mockRiskScoreState}
+          riskScoreData={mockHostRiskScoreState}
           queryId={'testQuery'}
           openDetailsPanel={() => {}}
         />
@@ -70,4 +88,52 @@ describe('RiskSummary', () => {
 
     expect(getByTestId('risk-summary-updatedAt')).toHaveTextContent('Updated Nov 8, 1989');
   });
+
+  it('builds lens attributes for host risk score', () => {
+    render(
+      <TestProviders>
+        <RiskSummary
+          riskScoreData={mockHostRiskScoreState}
+          queryId={'testQuery'}
+          openDetailsPanel={() => {}}
+        />
+      </TestProviders>
+    );
+
+    const lensAttributes: LensAttributes =
+      mockVisualizationEmbeddable.mock.calls[0][0].lensAttributes;
+    const datasourceLayers = Object.values(lensAttributes.state.datasourceStates.formBased.layers);
+    const firstColumn = Object.values(datasourceLayers[0].columns)[0];
+
+    expect(lensAttributes.state.query.query).toEqual('host.name: test');
+    expect(firstColumn).toEqual(
+      expect.objectContaining({
+        sourceField: 'host.risk.calculated_score_norm',
+      })
+    );
+  });
+
+  it('builds lens attributes for user risk score', () => {
+    render(
+      <TestProviders>
+        <RiskSummary
+          riskScoreData={mockUserRiskScoreState}
+          queryId={'testQuery'}
+          openDetailsPanel={() => {}}
+        />
+      </TestProviders>
+    );
+
+    const lensAttributes: LensAttributes =
+      mockVisualizationEmbeddable.mock.calls[0][0].lensAttributes;
+    const datasourceLayers = Object.values(lensAttributes.state.datasourceStates.formBased.layers);
+    const firstColumn = Object.values(datasourceLayers[0].columns)[0];
+
+    expect(lensAttributes.state.query.query).toEqual('user.name: test');
+    expect(firstColumn).toEqual(
+      expect.objectContaining({
+        sourceField: 'user.risk.calculated_score_norm',
+      })
+    );
+  });
 });