[8.17] [SecuritySolution][Alerts table] Fix issue with multiple ip addresses in strings (#209475) (#209971)

# Backport This will backport the following commits from `main` to `8.17`: - [[SecuritySolution][Alerts table] Fix issue with multiple ip addresses in strings (#209475)](https://github.com/elastic/kibana/pull/209475)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport) \n\n### Questions ?\nPlease refer to the [Backport tool\ndocumentation](https://github.com/sqren/backport)\n\n\n\nCo-authored-by: Jan Monschke <jan.monschke@elastic.co>"}},{"branch":"8.18","label":"v8.18.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"url":"https://github.com/elastic/kibana/pull/209907","number":209907,"state":"MERGED","mergeCommit":{"sha":"7767ad87599a4d97027757e94abc7b9db1df3cd1","message":"[8.18] [SecuritySolution][Alerts table] Fix issue with multiple ip addresses in strings (#209475) (#209907)\n\n# Backport\n\nThis will backport the following commits from `main` to `8.18`:\n- [[SecuritySolution][Alerts table] Fix issue with multiple ip addresses\nin strings (#209475)](https://github.com/elastic/kibana/pull/209475)\n\n\n\n### Questions ?\nPlease refer to the [Backport tool\ndocumentation](https://github.com/sqren/backport)\n\n\n\nCo-authored-by: Jan Monschke <jan.monschke@elastic.co>"}},{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/209475","number":209475,"mergeCommit":{"message":"[SecuritySolution][Alerts table] Fix issue with multiple ip addresses in strings (#209475)\n\n## Summary\n\nFixes https://github.com/elastic/kibana/issues/191767\n\nMultiple IPs are now displayed as individual links, even in the case\nwhere multiple IPs are passed as a single string (e.g.\n`127.0.0.1,127.0.0.2`). Clicking on an individual link will open the\nflyout correctly as well.\n\n\n\nhttps://github.com/user-attachments/assets/74b05cff-3843-4149-bf27-cd0af07aa558\n\n\n\n### Checklist\n\n- [x] [Unit or functional\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\nwere updated or added to match the most common scenarios\n\n---------\n\nCo-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>","sha":"dda538111ed66cb6a36148f07a87068d7de076b6"}},{"branch":"8.x","label":"v8.19.0","branchLabelMappingKey":"^v8.19.0$","isSourceBranch":false,"url":"https://github.com/elastic/kibana/pull/209908","number":209908,"state":"MERGED","mergeCommit":{"sha":"e62eef171bec5fe025f463b105cbac1fa44a4fff","message":"[8.x] [SecuritySolution][Alerts table] Fix issue with multiple ip addresses in strings (#209475) (#209908)\n\n# Backport\n\nThis will backport the following commits from `main` to `8.x`:\n- [[SecuritySolution][Alerts table] Fix issue with multiple ip addresses\nin strings (#209475)](https://github.com/elastic/kibana/pull/209475)\n\n\n\n### Questions ?\nPlease refer to the [Backport tool\ndocumentation](https://github.com/sqren/backport)\n\n\n\nCo-authored-by: Jan Monschke <jan.monschke@elastic.co>"}},{"url":"https://github.com/elastic/kibana/pull/209969","number":209969,"branch":"8.16","state":"OPEN"}]}] BACKPORT-->
2025-04-24 01:38:56 -04:00 · 2025-02-06 15:44:29 +01:00 · 2025-02-06 15:44:29 +01:00 · ef7b51d373
commit ef7b51d373
parent 39457b433d
5 changed files with 117 additions and 112 deletions
--- a/x-pack/plugins/security_solution/public/common/components/links/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/links/index.test.tsx
@ -80,7 +80,17 @@ describe('Custom Links', () => {
      expect(wrapper.find('EuiLink').first().prop('href')).toEqual(
        `/ip/${encodeURIComponent(ipv4)}/source/events`
      );
-      expect(wrapper.text()).toEqual(`${ipv4}${ipv4a}`);
+      expect(wrapper.text()).toEqual(`${ipv4}, ${ipv4a}`);
+      expect(wrapper.find('EuiLink').last().prop('href')).toEqual(
+        `/ip/${encodeURIComponent(ipv4a)}/source/events`
+      );
+    });
+    test('can handle a string array of ips', () => {
+      const wrapper = mount(<NetworkDetailsLink ip={`${ipv4},   ${ipv4a}`} />);
+      expect(wrapper.find('EuiLink').first().prop('href')).toEqual(
+        `/ip/${encodeURIComponent(ipv4)}/source/events`
+      );
+      expect(wrapper.text()).toEqual(`${ipv4}, ${ipv4a}`);
      expect(wrapper.find('EuiLink').last().prop('href')).toEqual(
        `/ip/${encodeURIComponent(ipv4a)}/source/events`
      );
--- a/x-pack/plugins/security_solution/public/common/components/links/index.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/links/index.tsx
@ -241,59 +241,82 @@ export interface NetworkDetailsLinkProps {
  ip: string | string[];
  flowTarget?: FlowTarget | FlowTargetSourceDest;
  isButton?: boolean;
-  onClick?: (e: SyntheticEvent) => void | undefined;
+  onClick?: (ip: string) => void;
  title?: string;
 }

-const NetworkDetailsLinkComponent: React.FC<NetworkDetailsLinkProps> = ({
-  Component,
-  children,
-  ip,
-  flowTarget = FlowTarget.source,
-  isButton,
-  onClick,
-  title,
-}) => {
-  const getSecuritySolutionLinkProps = useGetSecuritySolutionLinkProps();
+const NetworkDetailsLinkComponent: React.FC<NetworkDetailsLinkProps> = ({ ip, ...restProps }) => {
+  // We see that sometimes the `ip` is passed as a string value of "IP1,IP2".
+  // Therefore we're breaking up this string into individual IPs first.
+  const actualIp = useMemo(() => {
+    if (typeof ip === 'string' && ip.includes(',')) {
+      return ip.split(',').map((str) => str.trim());
+    } else {
+      return ip;
+    }
+  }, [ip]);

-  const getLink = useCallback(
-    (cIp: string, i: number) => {
-      const { onClick: onClickNavigation, href } = getSecuritySolutionLinkProps({
-        deepLinkId: SecurityPageName.network,
-        path: getNetworkDetailsUrl(encodeURIComponent(encodeIpv6(cIp)), flowTarget),
-      });
-
-      const onLinkClick = onClick ?? ((e: SyntheticEvent) => onClickNavigation(e as MouseEvent));
-
-      return isButton ? (
-        <GenericLinkButton
-          Component={Component}
-          key={`${cIp}-${i}`}
-          dataTestSubj="data-grid-network-details"
-          onClick={onLinkClick}
-          href={href}
-          title={title ?? cIp}
-        >
-          {children}
-        </GenericLinkButton>
-      ) : (
-        <LinkAnchor
-          key={`${cIp}-${i}`}
-          onClick={onLinkClick}
-          href={href}
-          data-test-subj="network-details"
-        >
-          {children ? children : cIp}
-        </LinkAnchor>
-      );
-    },
-    [children, Component, flowTarget, getSecuritySolutionLinkProps, onClick, isButton, title]
+  return isArray(actualIp) ? (
+    actualIp.map((currentIp, index) => (
+      <span key={`${currentIp}-${index}`}>
+        <IpLinkComponent ip={currentIp} {...restProps} />
+        {index === actualIp.length - 1 ? '' : ', '}
+      </span>
+    ))
+  ) : (
+    <IpLinkComponent ip={actualIp} {...restProps} />
  );
-  return isArray(ip) ? <>{ip.map(getLink)}</> : getLink(ip, 0);
 };

 export const NetworkDetailsLink = React.memo(NetworkDetailsLinkComponent);

+type IpLinkComponentProps = Omit<NetworkDetailsLinkProps, 'ip'> & { ip: string };
+
+const IpLinkComponent: React.FC<IpLinkComponentProps> = ({
+  isButton,
+  onClick,
+  ip: ipAddress,
+  flowTarget = FlowTarget.source,
+  Component,
+  title,
+  children,
+}) => {
+  const getSecuritySolutionLinkProps = useGetSecuritySolutionLinkProps();
+  const { onClick: onClickNavigation, href } = getSecuritySolutionLinkProps({
+    deepLinkId: SecurityPageName.network,
+    path: getNetworkDetailsUrl(encodeURIComponent(encodeIpv6(ipAddress)), flowTarget),
+  });
+
+  const onLinkClick = useCallback(
+    (e: SyntheticEvent) => {
+      if (onClick) {
+        e.preventDefault();
+        onClick(ipAddress);
+      } else {
+        onClickNavigation(e as MouseEvent);
+      }
+    },
+    [onClick, onClickNavigation, ipAddress]
+  );
+
+  return isButton ? (
+    <GenericLinkButton
+      Component={Component}
+      key={ipAddress}
+      dataTestSubj="data-grid-network-details"
+      onClick={onLinkClick}
+      href={href}
+      title={title ?? ipAddress}
+    >
+      {children}
+    </GenericLinkButton>
+  ) : (
+    <LinkAnchor key={ipAddress} onClick={onLinkClick} href={href} data-test-subj="network-details">
+      {children ? children : ipAddress}
+    </LinkAnchor>
+  );
+};
+
 export interface CaseDetailsLinkComponentProps {
  children?: React.ReactNode;
  /**
--- a/x-pack/plugins/security_solution/public/timelines/components/formatted_ip/index.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/formatted_ip/index.tsx
@ -19,7 +19,6 @@ import {
  DraggableWrapper,
 } from '../../../common/components/drag_and_drop/draggable_wrapper';
 import { escapeDataProviderId } from '../../../common/components/drag_and_drop/helpers';
-import { Content } from '../../../common/components/draggables';
 import { getOrEmptyTagFromValue } from '../../../common/components/empty_value';
 import { parseQueryValue } from '../timeline/body/renderers/parse_query_value';
 import type { DataProvider } from '../timeline/data_providers/data_provider';
@ -183,8 +182,7 @@ const AddressLinksItemComponent: React.FC<AddressLinksItemProps> = ({
    address && eventContext?.enableIpDetailsFlyout && eventContext?.timelineID;

  const openNetworkDetailsSidePanel = useCallback(
-    (e: React.SyntheticEvent) => {
-      e.preventDefault();
+    (ip: string) => {
      if (onClick) {
        onClick();
      }
@ -194,7 +192,7 @@ const AddressLinksItemComponent: React.FC<AddressLinksItemProps> = ({
          right: {
            id: NetworkPanelKey,
            params: {
-              ip: address,
+              ip,
              flowTarget: fieldName.includes(FlowTargetSourceDest.destination)
                ? FlowTargetSourceDest.destination
                : FlowTargetSourceDest.source,
@ -203,7 +201,7 @@ const AddressLinksItemComponent: React.FC<AddressLinksItemProps> = ({
        });
      }
    },
-    [onClick, eventContext, isInTimelineContext, address, fieldName, openFlyout]
+    [onClick, eventContext, isInTimelineContext, fieldName, openFlyout]
  );

  // The below is explicitly defined this way as the onClick takes precedence when it and the href are both defined
@ -219,25 +217,15 @@ const AddressLinksItemComponent: React.FC<AddressLinksItemProps> = ({
          title={title}
        />
      ) : (
-        <Content field={fieldName} tooltipContent={fieldName}>
-          <NetworkDetailsLink
-            Component={Component}
-            ip={address}
-            isButton={isButton}
-            onClick={isInTimelineContext ? openNetworkDetailsSidePanel : undefined}
-            title={title}
-          />
-        </Content>
+        <NetworkDetailsLink
+          Component={Component}
+          ip={address}
+          isButton={isButton}
+          onClick={isInTimelineContext ? openNetworkDetailsSidePanel : undefined}
+          title={title}
+        />
      ),
-    [
-      Component,
-      address,
-      fieldName,
-      isButton,
-      isInTimelineContext,
-      openNetworkDetailsSidePanel,
-      title,
-    ]
+    [Component, address, isButton, isInTimelineContext, openNetworkDetailsSidePanel, title]
  );

  const render: ComponentProps<typeof DraggableWrapper>['render'] = useCallback(
--- a/x-pack/plugins/security_solution/public/timelines/components/netflow/snapshots/index.test.tsx.snap
+++ b/x-pack/plugins/security_solution/public/timelines/components/netflow/snapshots/index.test.tsx.snap
@ -957,18 +957,14 @@ tr:hover .c3:focus::before {
                                                      class="c11"
                                                      data-test-subj="draggable-truncatable-content"
                                                    >
-                                                      <span
-                                                        class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
+                                                      <a
+                                                        class="euiLink emotion-euiLink-primary"
+                                                        data-test-subj="network-details"
+                                                        href="/ip/192.168.1.2/source/events"
+                                                        rel="noreferrer"
                                                      >
-                                                        <a
-                                                          class="euiLink emotion-euiLink-primary"
-                                                          data-test-subj="network-details"
-                                                          href="/ip/192.168.1.2/source/events"
-                                                          rel="noreferrer"
-                                                        >
-                                                          192.168.1.2
-                                                        </a>
-                                                      </span>
+                                                        192.168.1.2
+                                                      </a>
                                                    </span>
                                                  </div>
                                                </div>
@ -1699,18 +1695,14 @@ tr:hover .c3:focus::before {
                                                      class="c11"
                                                      data-test-subj="draggable-truncatable-content"
                                                    >
-                                                      <span
-                                                        class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
+                                                      <a
+                                                        class="euiLink emotion-euiLink-primary"
+                                                        data-test-subj="network-details"
+                                                        href="/ip/10.1.2.3/source/events"
+                                                        rel="noreferrer"
                                                      >
-                                                        <a
-                                                          class="euiLink emotion-euiLink-primary"
-                                                          data-test-subj="network-details"
-                                                          href="/ip/10.1.2.3/source/events"
-                                                          rel="noreferrer"
-                                                        >
-                                                          10.1.2.3
-                                                        </a>
-                                                      </span>
+                                                        10.1.2.3
+                                                      </a>
                                                    </span>
                                                  </div>
                                                </div>
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/netflow/snapshots/netflow_row_renderer.test.tsx.snap
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/netflow/snapshots/netflow_row_renderer.test.tsx.snap
@ -1096,18 +1096,14 @@ tr:hover .c5:focus::before {
                                                          class="c13"
                                                          data-test-subj="draggable-truncatable-content"
                                                        >
-                                                          <span
-                                                            class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
+                                                          <a
+                                                            class="euiLink emotion-euiLink-primary"
+                                                            data-test-subj="network-details"
+                                                            href="/ip/192.168.1.2/source/events"
+                                                            rel="noreferrer"
                                                          >
-                                                            <a
-                                                              class="euiLink emotion-euiLink-primary"
-                                                              data-test-subj="network-details"
-                                                              href="/ip/192.168.1.2/source/events"
-                                                              rel="noreferrer"
-                                                            >
-                                                              192.168.1.2
-                                                            </a>
-                                                          </span>
+                                                            192.168.1.2
+                                                          </a>
                                                        </span>
                                                        <p
                                                          class="emotion-euiScreenReaderOnly"
@ -1999,18 +1995,14 @@ tr:hover .c5:focus::before {
                                                          class="c13"
                                                          data-test-subj="draggable-truncatable-content"
                                                        >
-                                                          <span
-                                                            class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
+                                                          <a
+                                                            class="euiLink emotion-euiLink-primary"
+                                                            data-test-subj="network-details"
+                                                            href="/ip/10.1.2.3/source/events"
+                                                            rel="noreferrer"
                                                          >
-                                                            <a
-                                                              class="euiLink emotion-euiLink-primary"
-                                                              data-test-subj="network-details"
-                                                              href="/ip/10.1.2.3/source/events"
-                                                              rel="noreferrer"
-                                                            >
-                                                              10.1.2.3
-                                                            </a>
-                                                          </span>
+                                                            10.1.2.3
+                                                          </a>
                                                        </span>
                                                        <p
                                                          class="emotion-euiScreenReaderOnly"