[Fleet] Display outputs in agent list table and agent details

x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/components/agent_details/agent_details_overview.tsx

@@ -22,14 +22,15 @@ import { i18n } from '@kbn/i18n';
 import { FormattedMessage, FormattedRelative } from '@kbn/i18n-react';
 
 import type { Agent, AgentPolicy } from '../../../../../types';
-import { useAgentVersion } from '../../../../../hooks';
+import { useAgentVersion, useGetOutputs } from '../../../../../hooks';
 import { ExperimentalFeaturesService, isAgentUpgradeable } from '../../../../../services';
 import { AgentPolicySummaryLine } from '../../../../../components';
 import { AgentHealth } from '../../../components';
 import { Tags } from '../../../components/tags';
 import { formatAgentCPU, formatAgentMemory } from '../../../services/agent_metrics';
 import { AgentDashboardLink } from '../agent_dashboard_link';
 import { AgentUpgradeStatus } from '../../../agent_list_page/components/agent_upgrade_status';
+import { AgentPolicyOutputsSummary } from '../../../agent_list_page/components/agent_policy_outputs_summary';
 
 // Allows child text to be truncated
 const FlexItemWithMinWidth = styled(EuiFlexItem)`
@@ -42,11 +43,17 @@ export const AgentDetailsOverviewSection: React.FunctionComponent<{
 }> = memo(({ agent, agentPolicy }) => {
   const latestAgentVersion = useAgentVersion();
   const { displayAgentMetrics } = ExperimentalFeaturesService.get();
+  const outputsRequest = useGetOutputs();
+  const allOutputs = outputsRequest?.data?.items ?? [];
 
   return (
     <EuiPanel>
       <EuiDescriptionList compressed>
-        <EuiFlexGroup direction="column" gutterSize="m">
+        <EuiFlexGroup
+          direction="column"
+          gutterSize="m"
+          data-test-subj="agentDetailsOverviewSection"
+        >
           {displayAgentMetrics && (
             <EuiFlexGroup>
               <FlexItemWithMinWidth grow={5}>
@@ -206,6 +213,30 @@ export const AgentDetailsOverviewSection: React.FunctionComponent<{
                   ? agent.local_metadata.host.id
                   : '-',
             },
+            {
+              title: i18n.translate('xpack.fleet.agentDetails.outputForMonitoringLabel', {
+                defaultMessage: 'Output for Integrations',
+              }),
+              description: agentPolicy ? (
+                <AgentPolicyOutputsSummary outputs={allOutputs} agentPolicy={agentPolicy} />
+              ) : (
+                '-'
+              ),
+            },
+            {
+              title: i18n.translate('xpack.fleet.agentDetails.outputForMonitoringLabel', {
+                defaultMessage: 'Output for Monitoring',
+              }),
+              description: agentPolicy ? (
+                <AgentPolicyOutputsSummary
+                  outputs={allOutputs}
+                  agentPolicy={agentPolicy}
+                  monitoring={true}
+                />
+              ) : (
+                '-'
+              ),
+            },
             {
               title: i18n.translate('xpack.fleet.agentDetails.logLevel', {
                 defaultMessage: 'Logging level',

x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/components/agent_list_table.tsx

@@ -5,6 +5,7 @@
  * 2.0.
  */
 import React from 'react';
+import type { EuiBasicTableColumn } from '@elastic/eui';
 import { type CriteriaWithPagination } from '@elastic/eui';
 import {
   EuiBasicTable,
@@ -23,20 +24,31 @@ import { isAgentUpgradeable, ExperimentalFeaturesService } from '../../../../ser
 import { AgentHealth } from '../../components';
 
 import type { Pagination } from '../../../../hooks';
-import { useAgentVersion } from '../../../../hooks';
+import { useAgentVersion, useGetOutputs } from '../../../../hooks';
 import { useLink, useAuthz } from '../../../../hooks';
 
 import { AgentPolicySummaryLine } from '../../../../components';
 import { Tags } from '../../components/tags';
-import type { AgentMetrics } from '../../../../../../../common/types';
+import type { AgentMetrics, Output } from '../../../../../../../common/types';
 import { formatAgentCPU, formatAgentMemory } from '../../services/agent_metrics';
 
+import { AgentPolicyOutputsSummary } from './agent_policy_outputs_summary';
+
 import { AgentUpgradeStatus } from './agent_upgrade_status';
 
 import { EmptyPrompt } from './empty_prompt';
 
-const VERSION_FIELD = 'local_metadata.elastic.agent.version';
-const HOSTNAME_FIELD = 'local_metadata.host.hostname';
+const AGENTS_TABLE_FIELDS = {
+  ACTIVE: 'active',
+  HOSTNAME: 'local_metadata.host.hostname',
+  POLICY: 'policy_id',
+  METRICS: 'metrics',
+  VERSION: 'local_metadata.elastic.agent.version',
+  LAST_CHECKIN: 'last_checkin',
+  OUTPUT_INTEGRATION: 'output_integrations',
+  OUTPUT_MONITORING: 'output_monitoring',
+};
+
 function safeMetadata(val: any) {
   if (typeof val !== 'string') {
     return '-';
@@ -95,6 +107,8 @@ export const AgentListTable: React.FC<Props> = (props: Props) => {
 
   const { getHref } = useLink();
   const latestAgentVersion = useAgentVersion();
+  const outputsRequest = useGetOutputs();
+  const allOutputs = outputsRequest?.data?.items ?? [];
 
   const isAgentSelectable = (agent: Agent) => {
     if (!agent.active) return false;
@@ -140,9 +154,9 @@ export const AgentListTable: React.FC<Props> = (props: Props) => {
     },
   };
 
-  const columns = [
+  const columns: Array<EuiBasicTableColumn<Agent>> = [
     {
-      field: 'active',
+      field: AGENTS_TABLE_FIELDS.ACTIVE,
       sortable: false,
       width: '85px',
       name: i18n.translate('xpack.fleet.agentList.statusColumnTitle', {
@@ -151,7 +165,7 @@ export const AgentListTable: React.FC<Props> = (props: Props) => {
       render: (active: boolean, agent: any) => <AgentHealth agent={agent} />,
     },
     {
-      field: HOSTNAME_FIELD,
+      field: AGENTS_TABLE_FIELDS.HOSTNAME,
       sortable: true,
       name: i18n.translate('xpack.fleet.agentList.hostColumnTitle', {
         defaultMessage: 'Host',
@@ -171,7 +185,7 @@ export const AgentListTable: React.FC<Props> = (props: Props) => {
       ),
     },
     {
-      field: 'policy_id',
+      field: AGENTS_TABLE_FIELDS.POLICY,
       sortable: true,
       truncateText: true,
       name: i18n.translate('xpack.fleet.agentList.policyColumnTitle', {
@@ -208,7 +222,7 @@ export const AgentListTable: React.FC<Props> = (props: Props) => {
     ...(displayAgentMetrics
       ? [
           {
-            field: 'metrics',
+            field: AGENTS_TABLE_FIELDS.METRICS,
             sortable: false,
             name: (
               <EuiToolTip
@@ -234,7 +248,7 @@ export const AgentListTable: React.FC<Props> = (props: Props) => {
               ),
           },
           {
-            field: 'metrics',
+            field: AGENTS_TABLE_FIELDS.METRICS,
             sortable: false,
             name: (
               <EuiToolTip
@@ -264,19 +278,52 @@ export const AgentListTable: React.FC<Props> = (props: Props) => {
           },
         ]
       : []),
-
     {
-      field: 'last_checkin',
+      field: AGENTS_TABLE_FIELDS.LAST_CHECKIN,
       sortable: true,
       name: i18n.translate('xpack.fleet.agentList.lastCheckinTitle', {
         defaultMessage: 'Last activity',
       }),
+      width: '100px',
+      render: (lastCheckin: string) =>
+        lastCheckin ? <FormattedRelative value={lastCheckin} /> : undefined,
+    },
+    {
+      field: AGENTS_TABLE_FIELDS.OUTPUT_INTEGRATION,
+      sortable: true,
+      name: i18n.translate('xpack.fleet.agentList.integrationsOutputTitle', {
+        defaultMessage: 'Output for integrations',
+      }),
       width: '180px',
-      render: (lastCheckin: string, agent: any) =>
-        lastCheckin ? <FormattedRelative value={lastCheckin} /> : null,
+      render: (outputs: Output[], agent: Agent) => {
+        const agentPolicy = agent?.policy_id
+          ? agentPoliciesIndexedById[agent.policy_id]
+          : undefined;
+        return <AgentPolicyOutputsSummary outputs={allOutputs} agentPolicy={agentPolicy} />;
+      },
+    },
+    {
+      field: AGENTS_TABLE_FIELDS.OUTPUT_MONITORING,
+      sortable: true,
+      name: i18n.translate('xpack.fleet.agentList.monitoringOutputTitle', {
+        defaultMessage: 'Output for Monitoring',
+      }),
+      width: '180px',
+      render: (outputs: Output[], agent: Agent) => {
+        const agentPolicy = agent?.policy_id
+          ? agentPoliciesIndexedById[agent.policy_id]
+          : undefined;
+        return (
+          <AgentPolicyOutputsSummary
+            outputs={allOutputs}
+            agentPolicy={agentPolicy}
+            monitoring={true}
+          />
+        );
+      },
     },
     {
-      field: VERSION_FIELD,
+      field: AGENTS_TABLE_FIELDS.VERSION,
       sortable: true,
       width: '220px',
       name: i18n.translate('xpack.fleet.agentList.versionTitle', {

x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/components/agent_policy_outputs_summary.test.tsx

@@ -0,0 +1,98 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { act, fireEvent } from '@testing-library/react';
+import React from 'react';
+
+import { createFleetTestRendererMock } from '../../../../../../mock';
+import type { TestRenderer } from '../../../../../../mock';
+
+import type { AgentPolicy, Output } from '../../../../types';
+import { createAgentPolicyMock } from '../../../../../../../common/mocks';
+
+import { AgentPolicyOutputsSummary } from './agent_policy_outputs_summary';
+
+describe('MultipleAgentPolicySummaryLine', () => {
+  let testRenderer: TestRenderer;
+  const outputs: Output[] = [
+    {
+      id: 'elasticsearch1',
+      name: 'Elasticsearch1',
+      type: 'elasticsearch',
+      is_default: false,
+      is_default_monitoring: false,
+      hosts: ['http://test.io:449'],
+    },
+    {
+      id: 'logstash1',
+      name: 'Logstash 1',
+      type: 'logstash',
+      is_default: true,
+      is_default_monitoring: true,
+      hosts: ['http://test.io:449'],
+    },
+    {
+      id: 'remote_es1',
+      name: 'Remote ES',
+      type: 'remote_elasticsearch',
+      is_default: false,
+      is_default_monitoring: false,
+      hosts: ['http://test.io:449', 'http://test.io:448', 'http://test.io:447'],
+    },
+  ];
+
+  const render = (agentPolicy: AgentPolicy, monitoring?: boolean) =>
+    testRenderer.render(
+      <AgentPolicyOutputsSummary
+        agentPolicy={agentPolicy}
+        outputs={outputs}
+        monitoring={monitoring}
+      />
+    );
+
+  beforeEach(() => {
+    testRenderer = createFleetTestRendererMock();
+  });
+
+  test('it should render the host associated with the default output when the agent policy does not have custom outputs', async () => {
+    const mockAgentPolicy = createAgentPolicyMock();
+    const results = render(mockAgentPolicy);
+    expect(results.container.textContent).toBe('http://test.io:449');
+    expect(results.queryByTestId('outputNameLink')).toBeInTheDocument();
+    expect(results.queryByTestId('outputHostsNumberBadge')).not.toBeInTheDocument();
+  });
+
+  test('it should render the first host name and the badge when there are multiple hosts', async () => {
+    const agentPolicy = createAgentPolicyMock({
+      data_output_id: 'remote_es1',
+      monitoring_output_id: 'remote_es1',
+    });
+    const results = render(agentPolicy);
+
+    expect(results.queryByTestId('outputNameLink')).toBeInTheDocument();
+    expect(results.queryByTestId('outputHostsNumberBadge')).toBeInTheDocument();
+
+    await act(async () => {
+      fireEvent.click(results.getByTestId('outputHostsNumberBadge'));
+    });
+    expect(results.queryByTestId('outputHostsPopover')).toBeInTheDocument();
+    expect(results.queryByTestId('output-host-0')?.textContent).toContain('http://test.io:449');
+    expect(results.queryByTestId('output-host-1')?.textContent).toContain('http://test.io:448');
+    expect(results.queryByTestId('output-host-2')?.textContent).toContain('http://test.io:447');
+  });
+
+  test('it should not render the badge when monitoring is true', async () => {
+    const agentPolicy = createAgentPolicyMock({
+      data_output_id: 'remote_es1',
+      monitoring_output_id: 'remote_es1',
+    });
+    const results = render(agentPolicy, true);
+
+    expect(results.queryByTestId('outputNameLink')).toBeInTheDocument();
+    expect(results.queryByTestId('outputHostsNumberBadge')).not.toBeInTheDocument();
+  });
+});