[9.0] Fix Host details page doesn't show 'show more' button for ip field (#238239)

x-pack/solutions/security/plugins/security_solution/public/explore/network/components/details/index.test.tsx

@@ -65,5 +65,14 @@ describe('IP Overview Component', () => {
 
       expect(container.children[0]).toMatchSnapshot();
     });
+
+    test('it renders host id', () => {
+      const { container } = render(
+        <TestProviders>
+          <IpOverview {...mockProps} data={mockData.complete} />
+        </TestProviders>
+      );
+      expect(container).toHaveTextContent('b19a781f683541a7a25ee345133aa399');
+    });
   });
 });

x-pack/solutions/security/plugins/security_solution/public/overview/components/host_overview/index.test.tsx

@@ -106,4 +106,13 @@ describe('Host Summary Component', () => {
     expect(getByTestId('host-risk-overview')).toHaveTextContent(risk);
     expect(getByTestId('host-risk-overview')).toHaveTextContent(riskScore.toString());
   });
+
+  test('it renders host id', () => {
+    const { container } = render(
+      <TestProviders>
+        <HostOverview {...mockProps} data={mockData.Hosts.edges[0].node} />
+      </TestProviders>
+    );
+    expect(container).toHaveTextContent('aa7ca589f1b8220002f2fc61c64cfbf1');
+  });
 });

x-pack/solutions/security/plugins/security_solution/public/timelines/components/field_renderers/field_renderers.test.tsx

@@ -15,6 +15,7 @@ import {
   locationRenderer,
   whoisRenderer,
   reputationRenderer,
+  hostIdRenderer,
 } from './field_renderers';
 import { mockData } from '../../../explore/network/components/details/mock';
 import type { AutonomousSystem } from '../../../../common/search_strategy';
@@ -135,6 +136,19 @@ describe('Field Renderers', () => {
       );
       expect(screen.getByText(getEmptyValue())).toBeInTheDocument();
     });
+
+    test('it renders multiple host ids', () => {
+      render(
+        <TestProviders>
+          {hostIdRenderer({
+            scopeId,
+            host: { ...emptyIdHost, id: ['test1', 'test2'] },
+          })}
+        </TestProviders>
+      );
+      expect(screen.getByText('test1')).toBeInTheDocument();
+      expect(screen.getByText('+1 More')).toBeInTheDocument();
+    });
   });
 
   describe('#hostNameRenderer', () => {

x-pack/solutions/security/plugins/security_solution/public/timelines/components/field_renderers/field_renderers.tsx

@@ -20,6 +20,7 @@ import { getEmptyTagValue } from '../../../common/components/empty_value';
 import { HostDetailsLink, ReputationLink, WhoIsLink } from '../../../common/components/links';
 import * as i18n from '../../../explore/network/components/details/translations';
 import type { SourcererScopeName } from '../../../sourcerer/store/model';
+import { DefaultFieldRenderer } from './default_renderer';
 
 export const IpOverviewId = 'ip-overview';
 
@@ -108,34 +109,29 @@ export const hostIdRenderer = ({
   ipFilter,
   noLink,
   scopeId,
-}: HostIdRendererTypes): React.ReactElement =>
-  host.id && host.ip && (ipFilter == null || host.ip.includes(ipFilter)) ? (
+}: HostIdRendererTypes): React.ReactElement => {
+  const hostName = host.name && host.name[0];
+  return host.id && host.ip && (ipFilter == null || host.ip.includes(ipFilter)) ? (
     <>
-      {host.name && host.name[0] != null ? (
-        <DefaultDraggable
-          id={`host-id-renderer-default-draggable-${IpOverviewId}-${
-            contextID ? `${contextID}-` : ''
-          }host-id`}
+      {hostName != null ? (
+        <DefaultFieldRenderer
+          rowItems={host.id}
+          attrName={'host.id'}
           isDraggable={isDraggable}
-          field="host.id"
-          value={host.id[0]}
-          isAggregatable={true}
-          fieldType={'keyword'}
+          idPrefix={contextID ? `host-overview-${contextID}` : 'host-overview'}
           scopeId={scopeId}
-        >
-          {noLink ? (
-            <>{host.id}</>
-          ) : (
-            <HostDetailsLink hostName={host.name[0]}>{host.id}</HostDetailsLink>
-          )}
-        </DefaultDraggable>
+          render={(id) =>
+            noLink ? <>{id}</> : <HostDetailsLink hostName={hostName}>{id}</HostDetailsLink>
+          }
+        />
       ) : (
         <>{host.id}</>
       )}
     </>
   ) : (
     getEmptyTagValue()
   );
+};
 
 export const hostNameRenderer = (
   scopeId: SourcererScopeName,