[Security_Solution][Timeline][Flyout] - Make event details hostName and IpOverview navigate (#93825)

x-pack/plugins/security_solution/public/timelines/components/formatted_ip/index.tsx

@@ -33,6 +33,9 @@ import { activeTimeline } from '../../containers/active_timeline_context';
 import { timelineActions } from '../../store/timeline';
 import { StatefulEventContext } from '../timeline/body/events/stateful_event_context';
 import { LinkAnchor } from '../../../common/components/links';
+import { SecurityPageName } from '../../../app/types';
+import { useFormatUrl, getNetworkDetailsUrl } from '../../../common/components/link_to';
+import { encodeIpv6 } from '../../../common/lib/helpers';
 
 const getUniqueId = ({
   contextId,
@@ -152,11 +155,13 @@ const AddressLinksItemComponent: React.FC<AddressLinksItemProps> = ({
 
   const dispatch = useDispatch();
   const eventContext = useContext(StatefulEventContext);
+  const { formatUrl } = useFormatUrl(SecurityPageName.network);
+  const isInTimelineContext = address && eventContext?.tabType && eventContext?.timelineID;
 
   const openNetworkDetailsSidePanel = useCallback(
     (e) => {
       e.preventDefault();
-      if (address && eventContext?.timelineID && eventContext?.tabType) {
+      if (eventContext && isInTimelineContext) {
         const { tabType, timelineID } = eventContext;
         const updatedExpandedDetail: TimelineExpandedDetailType = {
           panelView: 'networkDetail',
@@ -181,7 +186,7 @@ const AddressLinksItemComponent: React.FC<AddressLinksItemProps> = ({
         }
       }
     },
-    [dispatch, eventContext, address, fieldName]
+    [eventContext, isInTimelineContext, address, fieldName, dispatch]
   );
 
   const render = useCallback(
@@ -193,15 +198,24 @@ const AddressLinksItemComponent: React.FC<AddressLinksItemProps> = ({
       ) : (
         <Content field={fieldName} tooltipContent={address}>
           <LinkAnchor
-            href="#"
+            href={formatUrl(getNetworkDetailsUrl(encodeURIComponent(encodeIpv6(address))))}
             data-test-subj="network-details"
-            onClick={openNetworkDetailsSidePanel}
+            // The below is explicitly defined this way as the onClick takes precedence when it and the href are both defined
+            // When this component is used outside of timeline (i.e. in the flyout) we would still like it to link to the IP Overview page
+            onClick={isInTimelineContext ? openNetworkDetailsSidePanel : undefined}
           >
             {address}
           </LinkAnchor>
         </Content>
       ),
-    [address, dataProviderProp, openNetworkDetailsSidePanel, fieldName]
+    [
+      dataProviderProp,
+      fieldName,
+      address,
+      formatUrl,
+      isInTimelineContext,
+      openNetworkDetailsSidePanel,
+    ]
   );
 
   return (

x-pack/plugins/security_solution/public/timelines/components/side_panel/host_details/index.tsx

@@ -28,14 +28,13 @@ const StyledEuiFlyoutBody = styled(EuiFlyoutBody)`
   .euiFlyoutBody__overflow {
     display: flex;
     flex: 1;
-    overflow-x: hidden;
-    overflow-y: scroll;
+    overflow: hidden;
 
     .euiFlyoutBody__overflowContent {
       flex: 1;
       overflow-x: hidden;
       overflow-y: scroll;
-      margin-bottom: ${({ theme }) => `${theme.eui.paddingSizes.l}`};
+      margin-bottom: 64px; // account for firefox, which doesn't seem to respect the bottom padding
       padding: ${({ theme }) => `${theme.eui.paddingSizes.xs} ${theme.eui.paddingSizes.m} 0px`};
     }
   }

x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/host_name.tsx

@@ -20,6 +20,8 @@ import { TruncatableText } from '../../../../../common/components/truncatable_te
 import { StatefulEventContext } from '../events/stateful_event_context';
 import { activeTimeline } from '../../../../containers/active_timeline_context';
 import { timelineActions } from '../../../../store/timeline';
+import { SecurityPageName } from '../../../../../../common/constants';
+import { useFormatUrl, getHostDetailsUrl } from '../../../../../common/components/link_to';
 
 interface Props {
   contextId: string;
@@ -33,10 +35,13 @@ const HostNameComponent: React.FC<Props> = ({ fieldName, contextId, eventId, val
   const eventContext = useContext(StatefulEventContext);
   const hostName = `${value}`;
 
+  const { formatUrl } = useFormatUrl(SecurityPageName.hosts);
+  const isInTimelineContext = hostName && eventContext?.tabType && eventContext?.timelineID;
+
   const openHostDetailsSidePanel = useCallback(
     (e) => {
       e.preventDefault();
-      if (hostName && eventContext?.tabType && eventContext?.timelineID) {
+      if (eventContext && isInTimelineContext) {
         const { timelineID, tabType } = eventContext;
         const updatedExpandedDetail: TimelineExpandedDetailType = {
           panelView: 'hostDetail',
@@ -58,7 +63,7 @@ const HostNameComponent: React.FC<Props> = ({ fieldName, contextId, eventId, val
         }
       }
     },
-    [dispatch, eventContext, hostName]
+    [dispatch, eventContext, isInTimelineContext, hostName]
   );
 
   return isString(value) && hostName.length > 0 ? (
@@ -68,7 +73,13 @@ const HostNameComponent: React.FC<Props> = ({ fieldName, contextId, eventId, val
       tooltipContent={hostName}
       value={hostName}
     >
-      <LinkAnchor href="#" data-test-subj="host-details-button" onClick={openHostDetailsSidePanel}>
+      <LinkAnchor
+        href={formatUrl(getHostDetailsUrl(encodeURIComponent(hostName)))}
+        data-test-subj="host-details-button"
+        // The below is explicitly defined this way as the onClick takes precedence when it and the href are both defined
+        // When this component is used outside of timeline (i.e. in the flyout) we would still like it to link to the Host Details page
+        onClick={isInTimelineContext ? openHostDetailsSidePanel : undefined}
+      >
         <TruncatableText data-test-subj="draggable-truncatable-content">{hostName}</TruncatableText>
       </LinkAnchor>
     </DefaultDraggable>