[Entity Analytics] Explore - Removing link to details page for entities in the entity store

x-pack/solutions/security/plugins/security_solution/public/explore/components/authentication/authentications_host_table.tsx

@@ -9,6 +9,8 @@ import React, { useCallback, useEffect, useState } from 'react';
 
 import { getOr } from 'lodash/fp';
 import { useDispatch } from 'react-redux';
+import { useExpandableFlyoutApi } from '@kbn/expandable-flyout';
+import { UserPanelKey, HostPanelKey } from '../../../flyout/entity_details/shared/constants';
 import type { SiemTables } from '../paginated_table';
 import { PaginatedTable } from '../paginated_table';
 
@@ -41,6 +43,37 @@ const AuthenticationsHostTableComponent: React.FC<HostsComponentsQueryProps> = (
   deleteQuery,
 }) => {
   const dispatch = useDispatch();
+  const { openRightPanel } = useExpandableFlyoutApi();
+
+  const openUserFlyout = useCallback(
+    (userName: string) => {
+      openRightPanel({
+        id: UserPanelKey,
+        params: {
+          userName,
+          contextID: 'authentications',
+          scopeId: 'authentications',
+          isPreviewMode: false,
+        },
+      });
+    },
+    [openRightPanel]
+  );
+
+  const openHostFlyout = useCallback(
+    (hostName: string) => {
+      openRightPanel({
+        id: HostPanelKey,
+        params: {
+          hostName,
+          contextID: 'authentications',
+          scopeId: 'authentications',
+          isPreviewMode: false,
+        },
+      });
+    },
+    [openRightPanel]
+  );
   const { toggleStatus } = useQueryToggle(TABLE_QUERY_ID);
   const [querySkip, setQuerySkip] = useState(skip || !toggleStatus);
   useEffect(() => {
@@ -68,8 +101,8 @@ const AuthenticationsHostTableComponent: React.FC<HostsComponentsQueryProps> = (
 
   const columns =
     type === hostsModel.HostsType.details
-      ? getHostDetailsAuthenticationColumns()
-      : getHostsPageAuthenticationColumns();
+      ? getHostDetailsAuthenticationColumns(openUserFlyout)
+      : getHostsPageAuthenticationColumns(openUserFlyout, openHostFlyout);
 
   const updateLimitPagination = useCallback<SiemTables['updateLimitPagination']>(
     (newLimit) =>

x-pack/solutions/security/plugins/security_solution/public/explore/components/authentication/authentications_user_table.tsx

@@ -9,6 +9,8 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
 import { getOr } from 'lodash/fp';
 import { useDispatch } from 'react-redux';
+import { useExpandableFlyoutApi } from '@kbn/expandable-flyout';
+import { UserPanelKey, HostPanelKey } from '../../../flyout/entity_details/shared/constants';
 import { AuthStackByField } from '../../../../common/search_strategy/security_solution/users/authentications';
 import type { SiemTables } from '../paginated_table';
 import { PaginatedTable } from '../paginated_table';
@@ -40,6 +42,37 @@ const AuthenticationsUserTableComponent: React.FC<AuthenticationsUserTableProps>
   userName,
 }) => {
   const dispatch = useDispatch();
+  const { openRightPanel } = useExpandableFlyoutApi();
+
+  const openUserFlyout = useCallback(
+    (name: string) => {
+      openRightPanel({
+        id: UserPanelKey,
+        params: {
+          userName: name,
+          contextID: 'authentications',
+          scopeId: 'authentications',
+          isPreviewMode: false,
+        },
+      });
+    },
+    [openRightPanel]
+  );
+
+  const openHostFlyout = useCallback(
+    (hostName: string) => {
+      openRightPanel({
+        id: HostPanelKey,
+        params: {
+          hostName,
+          contextID: 'authentications',
+          scopeId: 'authentications',
+          isPreviewMode: false,
+        },
+      });
+    },
+    [openRightPanel]
+  );
   const { toggleStatus } = useQueryToggle(TABLE_QUERY_ID);
   const [querySkip, setQuerySkip] = useState(skip || !toggleStatus);
   useEffect(() => {
@@ -64,8 +97,11 @@ const AuthenticationsUserTableComponent: React.FC<AuthenticationsUserTableProps>
   });
 
   const columns = useMemo(
-    () => (userName ? getUserDetailsAuthenticationColumns() : getUsersPageAuthenticationColumns()),
-    [userName]
+    () =>
+      userName
+        ? getUserDetailsAuthenticationColumns(openHostFlyout)
+        : getUsersPageAuthenticationColumns(openUserFlyout, openHostFlyout),
+    [userName, openUserFlyout, openHostFlyout]
   );
 
   const updateLimitPagination = useCallback<SiemTables['updateLimitPagination']>(

x-pack/solutions/security/plugins/security_solution/public/explore/components/authentication/helpers.tsx

@@ -26,8 +26,10 @@ import type {
 } from '../../../common/components/matrix_histogram/types';
 import { getAuthenticationLensAttributes } from '../../../common/components/visualization_actions/lens_attributes/common/authentication';
 
-export const getHostDetailsAuthenticationColumns = (): AuthTableColumns => [
-  USER_COLUMN,
+export const getHostDetailsAuthenticationColumns = (
+  openUserFlyout: (userName: string) => void
+): AuthTableColumns => [
+  getUserColumn(openUserFlyout),
   SUCCESS_COLUMN,
   FAILURES_COLUMN,
   LAST_SUCCESSFUL_TIME_COLUMN,
@@ -36,23 +38,30 @@ export const getHostDetailsAuthenticationColumns = (): AuthTableColumns => [
   LAST_FAILED_SOURCE_COLUMN,
 ];
 
-export const getHostsPageAuthenticationColumns = (): AuthTableColumns => [
-  USER_COLUMN,
+export const getHostsPageAuthenticationColumns = (
+  openUserFlyout: (userName: string) => void,
+  openHostFlyout: (hostName: string) => void
+): AuthTableColumns => [
+  getUserColumn(openUserFlyout),
   SUCCESS_COLUMN,
   FAILURES_COLUMN,
   LAST_SUCCESSFUL_TIME_COLUMN,
   LAST_SUCCESSFUL_SOURCE_COLUMN,
-  LAST_SUCCESSFUL_DESTINATION_COLUMN,
+  getLastSuccessfulDestinationColumn(openHostFlyout),
   LAST_FAILED_TIME_COLUMN,
   LAST_FAILED_SOURCE_COLUMN,
-  LAST_FAILED_DESTINATION_COLUMN,
+  getLastFailedDestinationColumn(openHostFlyout),
 ];
 
-export const getUsersPageAuthenticationColumns = (): AuthTableColumns =>
-  getHostsPageAuthenticationColumns();
+export const getUsersPageAuthenticationColumns = (
+  openUserFlyout: (userName: string) => void,
+  openHostFlyout: (hostName: string) => void
+): AuthTableColumns => getHostsPageAuthenticationColumns(openUserFlyout, openHostFlyout);
 
-export const getUserDetailsAuthenticationColumns = (): AuthTableColumns => [
-  HOST_COLUMN,
+export const getUserDetailsAuthenticationColumns = (
+  openHostFlyout: (hostName: string) => void
+): AuthTableColumns => [
+  getHostColumn(openHostFlyout),
   SUCCESS_COLUMN,
   FAILURES_COLUMN,
   LAST_SUCCESSFUL_TIME_COLUMN,
@@ -102,7 +111,9 @@ const LAST_SUCCESSFUL_SOURCE_COLUMN: Columns<AuthenticationsEdges, Authenticatio
       render: (item) => <NetworkDetailsLink ip={item} />,
     }),
 };
-const LAST_SUCCESSFUL_DESTINATION_COLUMN: Columns<AuthenticationsEdges, AuthenticationsEdges> = {
+const getLastSuccessfulDestinationColumn = (
+  openHostFlyout: (hostName: string) => void
+): Columns<AuthenticationsEdges, AuthenticationsEdges> => ({
   name: i18n.LAST_SUCCESSFUL_DESTINATION,
   truncateText: false,
   mobileOptions: { show: true },
@@ -111,9 +122,17 @@ const LAST_SUCCESSFUL_DESTINATION_COLUMN: Columns<AuthenticationsEdges, Authenti
       values: node.lastSuccess?.host?.name ?? null,
       fieldName: 'host.name',
       idPrefix: `authentications-table-${node._id}-lastSuccessfulDestination`,
-      render: (item) => <HostDetailsLink hostName={item} />,
+      render: (item) => (
+        <HostDetailsLink
+          hostName={item}
+          onClick={(e: React.SyntheticEvent) => {
+            e.preventDefault();
+            openHostFlyout(item);
+          }}
+        />
+      ),
     }),
-};
+});
 const LAST_FAILED_TIME_COLUMN: Columns<AuthenticationsEdges, AuthenticationsEdges> = {
   name: i18n.LAST_FAILED_TIME,
   truncateText: false,
@@ -137,7 +156,9 @@ const LAST_FAILED_SOURCE_COLUMN: Columns<AuthenticationsEdges, AuthenticationsEd
       render: (item) => <NetworkDetailsLink ip={item} />,
     }),
 };
-const LAST_FAILED_DESTINATION_COLUMN: Columns<AuthenticationsEdges, AuthenticationsEdges> = {
+const getLastFailedDestinationColumn = (
+  openHostFlyout: (hostName: string) => void
+): Columns<AuthenticationsEdges, AuthenticationsEdges> => ({
   name: i18n.LAST_FAILED_DESTINATION,
   truncateText: false,
   mobileOptions: { show: true },
@@ -146,11 +167,21 @@ const LAST_FAILED_DESTINATION_COLUMN: Columns<AuthenticationsEdges, Authenticati
       values: node.lastFailure?.host?.name || null,
       fieldName: 'host.name',
       idPrefix: `authentications-table-${node._id}-lastFailureDestination`,
-      render: (item) => <HostDetailsLink hostName={item} />,
+      render: (item) => (
+        <HostDetailsLink
+          hostName={item}
+          onClick={(e: React.SyntheticEvent) => {
+            e.preventDefault();
+            openHostFlyout(item);
+          }}
+        />
+      ),
     }),
-};
+});
 
-const USER_COLUMN: Columns<AuthenticationsEdges, AuthenticationsEdges> = {
+const getUserColumn = (
+  openUserFlyout: (userName: string) => void
+): Columns<AuthenticationsEdges, AuthenticationsEdges> => ({
   name: i18n.USER,
   truncateText: false,
   mobileOptions: { show: true },
@@ -159,11 +190,21 @@ const USER_COLUMN: Columns<AuthenticationsEdges, AuthenticationsEdges> = {
       values: node.stackedValue,
       fieldName: 'user.name',
       idPrefix: `authentications-table-${node._id}-userName`,
-      render: (item) => <UserDetailsLink userName={item} />,
+      render: (item) => (
+        <UserDetailsLink
+          userName={item}
+          onClick={(e: React.SyntheticEvent) => {
+            e.preventDefault();
+            openUserFlyout(item);
+          }}
+        />
+      ),
     }),
-};
+});
 
-const HOST_COLUMN: Columns<AuthenticationsEdges, AuthenticationsEdges> = {
+const getHostColumn = (
+  openHostFlyout: (hostName: string) => void
+): Columns<AuthenticationsEdges, AuthenticationsEdges> => ({
   name: i18n.HOST,
   truncateText: false,
   mobileOptions: { show: true },
@@ -172,9 +213,17 @@ const HOST_COLUMN: Columns<AuthenticationsEdges, AuthenticationsEdges> = {
       values: node.stackedValue,
       fieldName: 'host.name',
       idPrefix: `authentications-table-${node._id}-hostName`,
-      render: (item) => <HostDetailsLink hostName={item} />,
+      render: (item) => (
+        <HostDetailsLink
+          hostName={item}
+          onClick={(e: React.SyntheticEvent) => {
+            e.preventDefault();
+            openHostFlyout(item);
+          }}
+        />
+      ),
     }),
-};
+});
 
 const SUCCESS_COLUMN: Columns<AuthenticationsEdges, AuthenticationsEdges> = {
   name: i18n.SUCCESSES,

x-pack/solutions/security/plugins/security_solution/public/explore/hosts/components/hosts_table/columns.tsx

@@ -7,6 +7,7 @@
 
 import { EuiIcon, EuiLink, EuiText, EuiToolTip } from '@elastic/eui';
 import React from 'react';
+import type { SyntheticEvent } from 'react';
 import { SECURITY_CELL_ACTIONS_DEFAULT } from '@kbn/ui-actions-plugin/common/trigger_ids';
 import type { CriticalityLevelWithUnassigned } from '../../../../../common/entity_analytics/asset_criticality/types';
 import { AssetCriticalityBadge } from '../../../../entity_analytics/components/asset_criticality';
@@ -24,7 +25,8 @@ import { ENTITY_RISK_LEVEL } from '../../../../entity_analytics/components/risk_
 
 export const getHostsColumns = (
   showRiskColumn: boolean,
-  dispatchSeverityUpdate: (s: RiskSeverity) => void
+  dispatchSeverityUpdate: (s: RiskSeverity) => void,
+  openHostFlyout: (hostName: string, entityId: string) => void
 ): HostsTableColumns => {
   const columns: HostsTableColumns = [
     {
@@ -34,24 +36,29 @@ export const getHostsColumns = (
       mobileOptions: { show: true },
       sortable: true,
       render: (hostName, hostEdge) => {
-        if (hostName != null && hostName.length > 0) {
-          const name = hostName[0];
-          return (
-            <SecurityCellActions
-              mode={CellActionsMode.HOVER_DOWN}
-              visibleCellActions={5}
-              showActionTooltips
-              triggerId={SECURITY_CELL_ACTIONS_DEFAULT}
-              data={{
-                value: name,
-                field: 'host.name',
-              }}
-            >
-              <HostDetailsLink hostName={name} entityId={hostEdge.node.entityId ?? undefined} />
-            </SecurityCellActions>
-          );
-        }
-        return getEmptyTagValue();
+        if (hostName == null || hostName.length === 0) return getEmptyTagValue();
+        const name = hostName[0];
+        const entityId = hostEdge.node.entityId ?? undefined;
+        const onClick = entityId
+          ? (e: SyntheticEvent) => {
+              e.preventDefault();
+              openHostFlyout(name, entityId);
+            }
+          : undefined;
+        return (
+          <SecurityCellActions
+            mode={CellActionsMode.HOVER_DOWN}
+            visibleCellActions={5}
+            showActionTooltips
+            triggerId={SECURITY_CELL_ACTIONS_DEFAULT}
+            data={{
+              value: name,
+              field: 'host.name',
+            }}
+          >
+            <HostDetailsLink hostName={name} entityId={entityId} onClick={onClick} />
+          </SecurityCellActions>
+        );
       },
       width: '35%',
     },