From 438bbb54159f8838b5561732c7d4365104a519fa Mon Sep 17 00:00:00 2001
From: Nicolas Chaulet <nicolas.chaulet@elastic.co>
Date: Tue, 1 Dec 2020 12:44:37 -0500
Subject: [PATCH] [Fleet] Update agent details page  (#84434) (#84639)

---
 .../fleet/constants/page_paths.ts             |   4 +-
 .../components/actions_menu.tsx               |   2 +-
 .../components/agent_details.tsx              | 147 --------------
 .../agent_details_integrations.tsx            | 159 +++++++++++++++
 .../agent_details/agent_details_overview.tsx  | 185 ++++++++++++++++++
 .../components/agent_details/index.tsx        |  47 +++++
 .../agent_details/input_type_utils.ts         |  43 ++++
 .../components/agent_logs/constants.tsx       |   4 +
 .../agents/agent_details_page/index.tsx       |  39 ++--
 .../agents/components/agent_health.tsx        |  71 +++----
 .../agent_policy_package_badges.tsx           |  73 ++++---
 .../public/applications/fleet/types/index.ts  |   1 +
 .../translations/translations/ja-JP.json      |   6 -
 .../translations/translations/zh-CN.json      |   6 -
 14 files changed, 530 insertions(+), 257 deletions(-)
 delete mode 100644 x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/components/agent_details.tsx
 create mode 100644 x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/components/agent_details/agent_details_integrations.tsx
 create mode 100644 x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/components/agent_details/agent_details_overview.tsx
 create mode 100644 x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/components/agent_details/index.tsx
 create mode 100644 x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/components/agent_details/input_type_utils.ts

diff --git a/x-pack/plugins/fleet/public/applications/fleet/constants/page_paths.ts b/x-pack/plugins/fleet/public/applications/fleet/constants/page_paths.ts
index ecd4227a54b655..2fce7f8f5e825e 100644
--- a/x-pack/plugins/fleet/public/applications/fleet/constants/page_paths.ts
+++ b/x-pack/plugins/fleet/public/applications/fleet/constants/page_paths.ts
@@ -78,8 +78,8 @@ export const pagePathGetters: {
     `/policies/${policyId}/edit-integration/${packagePolicyId}`,
   fleet: () => '/fleet',
   fleet_agent_list: ({ kuery }) => `/fleet/agents${kuery ? `?kuery=${kuery}` : ''}`,
-  fleet_agent_details: ({ agentId, tabId }) =>
-    `/fleet/agents/${agentId}${tabId ? `/${tabId}` : ''}`,
+  fleet_agent_details: ({ agentId, tabId, logQuery }) =>
+    `/fleet/agents/${agentId}${tabId ? `/${tabId}` : ''}${logQuery ? `?_q=${logQuery}` : ''}`,
   fleet_enrollment_tokens: () => '/fleet/enrollment-tokens',
   data_streams: () => '/data-streams',
 };
diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/components/actions_menu.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/components/actions_menu.tsx
index 487eac6779dd55..2b1eb8e1ce984a 100644
--- a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/components/actions_menu.tsx
+++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/components/actions_menu.tsx
@@ -73,7 +73,7 @@ export const AgentDetailsActionMenu: React.FunctionComponent<{
       )}
       <ContextMenuActions
         button={{
-          props: { iconType: 'arrowDown', iconSide: 'right' },
+          props: { iconType: 'arrowDown', iconSide: 'right', color: 'primary', fill: true },
           children: (
             <FormattedMessage
               id="xpack.fleet.agentDetails.actionsButton"
diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/components/agent_details.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/components/agent_details.tsx
deleted file mode 100644
index 1b6ad35cc64242..00000000000000
--- a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/components/agent_details.tsx
+++ /dev/null
@@ -1,147 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License;
- * you may not use this file except in compliance with the Elastic License.
- */
-import React, { memo } from 'react';
-import {
-  EuiDescriptionList,
-  EuiDescriptionListTitle,
-  EuiDescriptionListDescription,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiLink,
-} from '@elastic/eui';
-import { i18n } from '@kbn/i18n';
-import { EuiText } from '@elastic/eui';
-import { EuiIcon } from '@elastic/eui';
-import { FormattedMessage } from '@kbn/i18n/react';
-import { Agent, AgentPolicy } from '../../../../types';
-import { useKibanaVersion, useLink } from '../../../../hooks';
-import { AgentHealth } from '../../components';
-import { isAgentUpgradeable } from '../../../../services';
-
-export const AgentDetailsContent: React.FunctionComponent<{
-  agent: Agent;
-  agentPolicy?: AgentPolicy;
-}> = memo(({ agent, agentPolicy }) => {
-  const { getHref } = useLink();
-  const kibanaVersion = useKibanaVersion();
-  return (
-    <EuiDescriptionList>
-      {[
-        {
-          title: i18n.translate('xpack.fleet.agentDetails.hostNameLabel', {
-            defaultMessage: 'Host name',
-          }),
-          description:
-            typeof agent.local_metadata.host === 'object' &&
-            typeof agent.local_metadata.host.hostname === 'string'
-              ? agent.local_metadata.host.hostname
-              : '-',
-        },
-        {
-          title: i18n.translate('xpack.fleet.agentDetails.hostIdLabel', {
-            defaultMessage: 'Agent ID',
-          }),
-          description: agent.id,
-        },
-        {
-          title: i18n.translate('xpack.fleet.agentDetails.statusLabel', {
-            defaultMessage: 'Status',
-          }),
-          description: <AgentHealth agent={agent} />,
-        },
-        {
-          title: i18n.translate('xpack.fleet.agentDetails.agentPolicyLabel', {
-            defaultMessage: 'Agent policy',
-          }),
-          description: agentPolicy ? (
-            <EuiLink
-              href={getHref('policy_details', { policyId: agent.policy_id! })}
-              className="eui-textBreakWord"
-            >
-              {agentPolicy.name || agent.policy_id}
-            </EuiLink>
-          ) : (
-            agent.policy_id || '-'
-          ),
-        },
-        {
-          title: i18n.translate('xpack.fleet.agentDetails.versionLabel', {
-            defaultMessage: 'Agent version',
-          }),
-          description:
-            typeof agent.local_metadata.elastic === 'object' &&
-            typeof agent.local_metadata.elastic.agent === 'object' &&
-            typeof agent.local_metadata.elastic.agent.version === 'string' ? (
-              <EuiFlexGroup gutterSize="s" alignItems="center" style={{ minWidth: 0 }}>
-                <EuiFlexItem grow={false} className="eui-textNoWrap">
-                  {agent.local_metadata.elastic.agent.version}
-                </EuiFlexItem>
-                {isAgentUpgradeable(agent, kibanaVersion) ? (
-                  <EuiFlexItem grow={false}>
-                    <EuiText color="subdued" size="s" className="eui-textNoWrap">
-                      <EuiIcon size="m" type="alert" color="warning" />
-                      &nbsp;
-                      <FormattedMessage
-                        id="xpack.fleet.agentList.agentUpgradeLabel"
-                        defaultMessage="Upgrade available"
-                      />
-                    </EuiText>
-                  </EuiFlexItem>
-                ) : null}
-              </EuiFlexGroup>
-            ) : (
-              '-'
-            ),
-        },
-        {
-          title: i18n.translate('xpack.fleet.agentDetails.releaseLabel', {
-            defaultMessage: 'Agent release',
-          }),
-          description:
-            typeof agent.local_metadata.elastic === 'object' &&
-            typeof agent.local_metadata.elastic.agent === 'object' &&
-            typeof agent.local_metadata.elastic.agent.snapshot === 'boolean'
-              ? agent.local_metadata.elastic.agent.snapshot === true
-                ? 'snapshot'
-                : 'stable'
-              : '-',
-        },
-        {
-          title: i18n.translate('xpack.fleet.agentDetails.logLevel', {
-            defaultMessage: 'Log level',
-          }),
-          description:
-            typeof agent.local_metadata.elastic === 'object' &&
-            typeof agent.local_metadata.elastic.agent === 'object' &&
-            typeof agent.local_metadata.elastic.agent.log_level === 'string'
-              ? agent.local_metadata.elastic.agent.log_level
-              : '-',
-        },
-        {
-          title: i18n.translate('xpack.fleet.agentDetails.platformLabel', {
-            defaultMessage: 'Platform',
-          }),
-          description:
-            typeof agent.local_metadata.os === 'object' &&
-            typeof agent.local_metadata.os.platform === 'string'
-              ? agent.local_metadata.os.platform
-              : '-',
-        },
-      ].map(({ title, description }) => {
-        return (
-          <EuiFlexGroup>
-            <EuiFlexItem grow={3}>
-              <EuiDescriptionListTitle>{title}</EuiDescriptionListTitle>
-            </EuiFlexItem>
-            <EuiFlexItem grow={7}>
-              <EuiDescriptionListDescription>{description}</EuiDescriptionListDescription>
-            </EuiFlexItem>
-          </EuiFlexGroup>
-        );
-      })}
-    </EuiDescriptionList>
-  );
-});
diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/components/agent_details/agent_details_integrations.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/components/agent_details/agent_details_integrations.tsx
new file mode 100644
index 00000000000000..0cad0b4d487d0e
--- /dev/null
+++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/components/agent_details/agent_details_integrations.tsx
@@ -0,0 +1,159 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+import React, { memo, useMemo } from 'react';
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiLink,
+  EuiAccordion,
+  EuiTitle,
+  EuiPanel,
+  EuiButtonIcon,
+  EuiBasicTable,
+} from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import styled from 'styled-components';
+import { Agent, AgentPolicy, PackagePolicy, PackagePolicyInput } from '../../../../../types';
+import { useLink } from '../../../../../hooks';
+import { PackageIcon } from '../../../../../components';
+import { displayInputType, getLogsQueryByInputType } from './input_type_utils';
+
+const StyledEuiAccordion = styled(EuiAccordion)`
+  .ingest-integration-title-button {
+    padding: ${(props) => props.theme.eui.paddingSizes.m}
+      ${(props) => props.theme.eui.paddingSizes.m};
+    border-bottom: 1px solid ${(props) => props.theme.eui.euiColorLightShade};
+  }
+`;
+
+const CollapsablePanel: React.FC<{ id: string; title: React.ReactNode }> = ({
+  id,
+  title,
+  children,
+}) => {
+  return (
+    <EuiPanel paddingSize="none">
+      <StyledEuiAccordion
+        id={id}
+        arrowDisplay="right"
+        buttonClassName={'ingest-integration-title-button'}
+        buttonContent={title}
+      >
+        {children}
+      </StyledEuiAccordion>
+    </EuiPanel>
+  );
+};
+
+export const AgentDetailsIntegration: React.FunctionComponent<{
+  agent: Agent;
+  agentPolicy: AgentPolicy;
+  packagePolicy: PackagePolicy;
+}> = memo(({ agent, agentPolicy, packagePolicy }) => {
+  const { getHref } = useLink();
+
+  const inputs = useMemo(() => {
+    return packagePolicy.inputs.filter((input) => input.enabled);
+  }, [packagePolicy.inputs]);
+
+  const columns = [
+    {
+      field: 'type',
+      width: '100%',
+      name: i18n.translate('xpack.fleet.agentDetailsIntegrations.inputTypeLabel', {
+        defaultMessage: 'Input',
+      }),
+      render: (inputType: string) => {
+        return displayInputType(inputType);
+      },
+    },
+    {
+      name: i18n.translate('xpack.fleet.agentDetailsIntegrations.actionsLabel', {
+        defaultMessage: 'Actions',
+      }),
+      field: 'type',
+      width: 'auto',
+      render: (inputType: string) => {
+        return (
+          <EuiButtonIcon
+            href={getHref('fleet_agent_details', {
+              agentId: agent.id,
+              tabId: 'logs',
+              logQuery: getLogsQueryByInputType(inputType),
+            })}
+            iconType="editorAlignLeft"
+            title={i18n.translate('xpack.fleet.agentDetailsIntegrations.viewLogsButton', {
+              defaultMessage: 'View logs',
+            })}
+          />
+        );
+      },
+    },
+  ];
+
+  return (
+    <CollapsablePanel
+      id={packagePolicy.id}
+      title={
+        <EuiTitle size="xs">
+          <h3>
+            <EuiFlexGroup gutterSize="s">
+              <EuiFlexItem grow={false}>
+                {packagePolicy.package ? (
+                  <PackageIcon
+                    packageName={packagePolicy.package.name}
+                    version={packagePolicy.package.version}
+                    size="l"
+                    tryApi={true}
+                  />
+                ) : (
+                  <PackageIcon size="l" packageName="default" version="0" />
+                )}
+              </EuiFlexItem>
+              <EuiFlexItem grow={false}>
+                <EuiLink
+                  href={getHref('edit_integration', {
+                    policyId: agentPolicy.id,
+                    packagePolicyId: packagePolicy.id,
+                  })}
+                >
+                  {packagePolicy.name}
+                </EuiLink>
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </h3>
+        </EuiTitle>
+      }
+    >
+      <EuiBasicTable<PackagePolicyInput> tableLayout="auto" items={inputs} columns={columns} />
+    </CollapsablePanel>
+  );
+});
+
+export const AgentDetailsIntegrationsSection: React.FunctionComponent<{
+  agent: Agent;
+  agentPolicy?: AgentPolicy;
+}> = memo(({ agent, agentPolicy }) => {
+  if (!agentPolicy || !agentPolicy.package_policies) {
+    return null;
+  }
+
+  return (
+    <EuiFlexGroup direction="column">
+      {(agentPolicy.package_policies as PackagePolicy[]).map((packagePolicy) => {
+        return (
+          <EuiFlexItem grow={false} key={packagePolicy.id}>
+            <AgentDetailsIntegration
+              agent={agent}
+              agentPolicy={agentPolicy}
+              packagePolicy={packagePolicy}
+            />
+          </EuiFlexItem>
+        );
+      })}
+    </EuiFlexGroup>
+  );
+});
diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/components/agent_details/agent_details_overview.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/components/agent_details/agent_details_overview.tsx
new file mode 100644
index 00000000000000..a19f6658ef93fd
--- /dev/null
+++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/components/agent_details/agent_details_overview.tsx
@@ -0,0 +1,185 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+import React, { memo } from 'react';
+import {
+  EuiDescriptionList,
+  EuiDescriptionListTitle,
+  EuiDescriptionListDescription,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiPanel,
+} from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { EuiText } from '@elastic/eui';
+import { EuiIcon } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
+import { Agent, AgentPolicy } from '../../../../../types';
+import { useKibanaVersion, useLink } from '../../../../../hooks';
+import { isAgentUpgradeable } from '../../../../../services';
+import { AgentPolicyPackageBadges } from '../../../components/agent_policy_package_badges';
+import { LinkAndRevision } from '../../../../../components';
+
+export const AgentDetailsOverviewSection: React.FunctionComponent<{
+  agent: Agent;
+  agentPolicy?: AgentPolicy;
+}> = memo(({ agent, agentPolicy }) => {
+  const { getHref } = useLink();
+  const kibanaVersion = useKibanaVersion();
+  return (
+    <EuiPanel>
+      <EuiDescriptionList>
+        {[
+          {
+            title: i18n.translate('xpack.fleet.agentDetails.hostIdLabel', {
+              defaultMessage: 'Agent ID',
+            }),
+            description: agent.id,
+          },
+          {
+            title: i18n.translate('xpack.fleet.agentDetails.agentPolicyLabel', {
+              defaultMessage: 'Agent policy',
+            }),
+            description: agentPolicy ? (
+              <LinkAndRevision
+                href={getHref('policy_details', { policyId: agentPolicy.id })}
+                title={agentPolicy.name || agent.policy_id}
+                revision={agentPolicy.revision}
+              >
+                {agentPolicy.name || agentPolicy.id}
+              </LinkAndRevision>
+            ) : (
+              agent.policy_id || '-'
+            ),
+          },
+          {
+            title: i18n.translate('xpack.fleet.agentDetails.versionLabel', {
+              defaultMessage: 'Agent version',
+            }),
+            description:
+              typeof agent.local_metadata?.elastic?.agent?.version === 'string' ? (
+                <EuiFlexGroup gutterSize="s" alignItems="center" style={{ minWidth: 0 }}>
+                  <EuiFlexItem grow={false} className="eui-textNoWrap">
+                    {agent.local_metadata.elastic.agent.version}
+                  </EuiFlexItem>
+                  {isAgentUpgradeable(agent, kibanaVersion) ? (
+                    <EuiFlexItem grow={false}>
+                      <EuiText color="subdued" size="s" className="eui-textNoWrap">
+                        <EuiIcon size="m" type="alert" color="warning" />
+                        &nbsp;
+                        <FormattedMessage
+                          id="xpack.fleet.agentList.agentUpgradeLabel"
+                          defaultMessage="Upgrade available"
+                        />
+                      </EuiText>
+                    </EuiFlexItem>
+                  ) : null}
+                </EuiFlexGroup>
+              ) : (
+                '-'
+              ),
+          },
+          {
+            title: i18n.translate('xpack.fleet.agentDetails.enrollmentTokenLabel', {
+              defaultMessage: 'Enrollment token',
+            }),
+            description: '-', // Fixme when we have the enrollment tokenhttps://github.com/elastic/kibana/issues/61269
+          },
+          {
+            title: i18n.translate('xpack.fleet.agentDetails.integrationsLabel', {
+              defaultMessage: 'Integrations',
+            }),
+            description: agent.policy_id ? (
+              <AgentPolicyPackageBadges agentPolicyId={agent.policy_id} hideTitle />
+            ) : null,
+          },
+          {
+            title: i18n.translate('xpack.fleet.agentDetails.hostNameLabel', {
+              defaultMessage: 'Host name',
+            }),
+            description:
+              typeof agent.local_metadata?.host?.hostname === 'string'
+                ? agent.local_metadata.host.hostname
+                : '-',
+          },
+          {
+            title: i18n.translate('xpack.fleet.agentDetails.logLevel', {
+              defaultMessage: 'Logging level',
+            }),
+            description:
+              typeof agent.local_metadata?.elastic?.agent?.log_level === 'string'
+                ? agent.local_metadata.elastic.agent.log_level
+                : '-',
+          },
+          {
+            title: i18n.translate('xpack.fleet.agentDetails.releaseLabel', {
+              defaultMessage: 'Agent release',
+            }),
+            description:
+              typeof agent.local_metadata?.elastic?.agent?.snapshot === 'boolean'
+                ? agent.local_metadata.elastic.agent.snapshot === true
+                  ? 'snapshot'
+                  : 'stable'
+                : '-',
+          },
+          {
+            title: i18n.translate('xpack.fleet.agentDetails.platformLabel', {
+              defaultMessage: 'Platform',
+            }),
+            description:
+              typeof agent.local_metadata?.os?.platform === 'string'
+                ? agent.local_metadata.os.platform
+                : '-',
+          },
+          {
+            title: i18n.translate('xpack.fleet.agentDetails.monitorLogsLabel', {
+              defaultMessage: 'Monitor logs',
+            }),
+            description: agentPolicy?.monitoring_enabled?.includes('logs') ? (
+              <FormattedMessage
+                id="xpack.fleet.agentList.monitorLogsEnabledText"
+                defaultMessage="True"
+              />
+            ) : (
+              <FormattedMessage
+                id="xpack.fleet.agentList.monitorLogsDisabledText"
+                defaultMessage="False"
+              />
+            ),
+          },
+          {
+            title: i18n.translate('xpack.fleet.agentDetails.monitorMetricsLabel', {
+              defaultMessage: 'Monitor metrics',
+            }),
+            description: agentPolicy?.monitoring_enabled?.includes('metrics') ? (
+              <FormattedMessage
+                id="xpack.fleet.agentList.monitorMetricsEnabledText"
+                defaultMessage="True"
+              />
+            ) : (
+              <FormattedMessage
+                id="xpack.fleet.agentList.monitorMetricsDisabledText"
+                defaultMessage="False"
+              />
+            ),
+          },
+        ].map(({ title, description }) => {
+          return (
+            <EuiDescriptionList compressed>
+              <EuiFlexGroup>
+                <EuiFlexItem grow={3}>
+                  <EuiDescriptionListTitle>{title}</EuiDescriptionListTitle>
+                </EuiFlexItem>
+                <EuiFlexItem grow={7}>
+                  <EuiDescriptionListDescription>{description}</EuiDescriptionListDescription>
+                </EuiFlexItem>
+              </EuiFlexGroup>
+            </EuiDescriptionList>
+          );
+        })}
+      </EuiDescriptionList>
+    </EuiPanel>
+  );
+});
diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/components/agent_details/index.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/components/agent_details/index.tsx
new file mode 100644
index 00000000000000..0b83fb4cc64e1b
--- /dev/null
+++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/components/agent_details/index.tsx
@@ -0,0 +1,47 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+import React, { memo } from 'react';
+import { EuiFlexGroup, EuiFlexItem, EuiTitle, EuiSpacer } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
+import { Agent, AgentPolicy } from '../../../../../types';
+import { AgentDetailsOverviewSection } from './agent_details_overview';
+import { AgentDetailsIntegrationsSection } from './agent_details_integrations';
+
+export const AgentDetailsContent: React.FunctionComponent<{
+  agent: Agent;
+  agentPolicy?: AgentPolicy;
+}> = memo(({ agent, agentPolicy }) => {
+  return (
+    <>
+      <EuiFlexGroup alignItems="flexStart">
+        <EuiFlexItem>
+          <EuiTitle size="s">
+            <h3>
+              <FormattedMessage
+                id="xpack.fleet.agentDetails.overviewSectionTitle"
+                defaultMessage="Overview"
+              />
+            </h3>
+          </EuiTitle>
+          <EuiSpacer size="s" />
+          <AgentDetailsOverviewSection agent={agent} agentPolicy={agentPolicy} />
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <EuiTitle size="s">
+            <h3>
+              <FormattedMessage
+                id="xpack.fleet.agentDetails.integrationsSectionTitle"
+                defaultMessage="Integrations"
+              />
+            </h3>
+          </EuiTitle>
+          <EuiSpacer size="s" />
+          <AgentDetailsIntegrationsSection agent={agent} agentPolicy={agentPolicy} />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </>
+  );
+});
diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/components/agent_details/input_type_utils.ts b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/components/agent_details/input_type_utils.ts
new file mode 100644
index 00000000000000..62b7a294e1750f
--- /dev/null
+++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/components/agent_details/input_type_utils.ts
@@ -0,0 +1,43 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { i18n } from '@kbn/i18n';
+import {
+  STATE_DATASET_FIELD,
+  AGENT_DATASET_FILEBEAT,
+  AGENT_DATASET_METRICBEAT,
+} from '../agent_logs/constants';
+
+export function displayInputType(inputType: string): string {
+  if (inputType === 'logfile') {
+    return i18n.translate('xpack.fleet.agentDetailsIntegrations.inputTypeLogText', {
+      defaultMessage: 'Logs',
+    });
+  }
+  if (inputType === 'endpoint') {
+    return i18n.translate('xpack.fleet.agentDetailsIntegrations.inputTypeEndpointText', {
+      defaultMessage: 'Endpoint',
+    });
+  }
+  if (inputType.match(/\/metrics$/)) {
+    return i18n.translate('xpack.fleet.agentDetailsIntegrations.inputTypeMetricsText', {
+      defaultMessage: 'Metrics',
+    });
+  }
+
+  return inputType;
+}
+
+export function getLogsQueryByInputType(inputType: string) {
+  if (inputType === 'logfile') {
+    return `(${STATE_DATASET_FIELD}:!(${AGENT_DATASET_FILEBEAT}))`;
+  }
+  if (inputType.match(/\/metrics$/)) {
+    return `(${STATE_DATASET_FIELD}:!(${AGENT_DATASET_METRICBEAT}))`;
+  }
+
+  return '';
+}
diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/components/agent_logs/constants.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/components/agent_logs/constants.tsx
index 89fe1a916605de..4ee1618a385849 100644
--- a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/components/agent_logs/constants.tsx
+++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/components/agent_logs/constants.tsx
@@ -7,6 +7,8 @@ import { AgentLogsState } from './agent_logs';
 
 export const AGENT_LOG_INDEX_PATTERN = 'logs-elastic_agent-*,logs-elastic_agent.*-*';
 export const AGENT_DATASET = 'elastic_agent';
+export const AGENT_DATASET_FILEBEAT = 'elastic_agent.filebeat';
+export const AGENT_DATASET_METRICBEAT = 'elastic_agent.metricbeat';
 export const AGENT_DATASET_PATTERN = 'elastic_agent.*';
 export const AGENT_ID_FIELD = {
   name: 'elastic_agent.id',
@@ -34,6 +36,8 @@ export const DEFAULT_LOGS_STATE: AgentLogsState = {
   query: '',
 };
 
+export const STATE_DATASET_FIELD = 'datasets';
+
 export const AGENT_LOG_LEVELS = {
   ERROR: 'error',
   WARNING: 'warning',
diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/index.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/index.tsx
index f3714bbb532236..34893dccd93a4a 100644
--- a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/index.tsx
+++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/index.tsx
@@ -5,7 +5,6 @@
  */
 import React, { useMemo, useCallback } from 'react';
 import { useRouteMatch, Switch, Route, useLocation } from 'react-router-dom';
-import styled from 'styled-components';
 import {
   EuiFlexGroup,
   EuiFlexItem,
@@ -17,7 +16,7 @@ import {
   EuiDescriptionListDescription,
 } from '@elastic/eui';
 import { Props as EuiTabProps } from '@elastic/eui/src/components/tabs/tab';
-import { FormattedMessage } from '@kbn/i18n/react';
+import { FormattedMessage, FormattedRelative } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
 import { EuiIconTip } from '@elastic/eui';
 import { Agent, AgentPolicy, AgentDetailsReassignPolicyAction } from '../../../types';
@@ -38,12 +37,6 @@ import { AgentLogs, AgentDetailsActionMenu, AgentDetailsContent } from './compon
 import { useIntraAppState } from '../../../hooks/use_intra_app_state';
 import { isAgentUpgradeable } from '../../../services';
 
-const Divider = styled.div`
-  width: 0;
-  height: 100%;
-  border-left: ${(props) => props.theme.eui.euiBorderThin};
-`;
-
 export const AgentDetailsPage: React.FunctionComponent = () => {
   const {
     params: { agentId, tabId = '' },
@@ -78,6 +71,8 @@ export const AgentDetailsPage: React.FunctionComponent = () => {
     }
   }, [routeState, navigateToApp]);
 
+  const host = agentData?.item?.local_metadata?.host;
+
   const headerLeftContent = useMemo(
     () => (
       <EuiFlexGroup direction="column" gutterSize="s" alignItems="flexStart">
@@ -99,9 +94,8 @@ export const AgentDetailsPage: React.FunctionComponent = () => {
             <h1>
               {isLoading && isInitialRequest ? (
                 <Loading />
-              ) : typeof agentData?.item?.local_metadata?.host === 'object' &&
-                typeof agentData?.item?.local_metadata?.host?.hostname === 'string' ? (
-                agentData.item.local_metadata.host.hostname
+              ) : typeof host === 'object' && typeof host?.hostname === 'string' ? (
+                host.hostname
               ) : (
                 <FormattedMessage
                   id="xpack.fleet.agentDetails.agentDetailsTitle"
@@ -116,13 +110,13 @@ export const AgentDetailsPage: React.FunctionComponent = () => {
         </EuiFlexItem>
       </EuiFlexGroup>
     ),
-    [agentData?.item?.local_metadata?.host, agentId, getHref, isInitialRequest, isLoading]
+    [host, agentId, getHref, isInitialRequest, isLoading]
   );
 
   const headerRightContent = useMemo(
     () =>
       agentData && agentData.item ? (
-        <EuiFlexGroup justifyContent={'flexEnd'} direction="row">
+        <EuiFlexGroup justifyContent={'spaceBetween'} direction="row">
           {[
             {
               label: i18n.translate('xpack.fleet.agentDetails.statusLabel', {
@@ -130,7 +124,16 @@ export const AgentDetailsPage: React.FunctionComponent = () => {
               }),
               content: <AgentHealth agent={agentData.item} />,
             },
-            { isDivider: true },
+            {
+              label: i18n.translate('xpack.fleet.agentDetails.lastActivityLabel', {
+                defaultMessage: 'Last activity',
+              }),
+              content: agentData.item.last_checkin ? (
+                <FormattedRelative value={new Date(agentData.item.last_checkin)} />
+              ) : (
+                '-'
+              ),
+            },
             {
               label: i18n.translate('xpack.fleet.agentDetails.policyLabel', {
                 defaultMessage: 'Policy',
@@ -148,7 +151,6 @@ export const AgentDetailsPage: React.FunctionComponent = () => {
                 agentData.item.policy_id || '-'
               ),
             },
-            { isDivider: true },
             {
               label: i18n.translate('xpack.fleet.agentDetails.agentVersionLabel', {
                 defaultMessage: 'Agent version',
@@ -187,7 +189,6 @@ export const AgentDetailsPage: React.FunctionComponent = () => {
                   '-'
                 ),
             },
-            { isDivider: true },
             {
               content: (
                 <AgentDetailsActionMenu
@@ -203,10 +204,8 @@ export const AgentDetailsPage: React.FunctionComponent = () => {
             },
           ].map((item, index) => (
             <EuiFlexItem grow={false} key={index}>
-              {item.isDivider ?? false ? (
-                <Divider />
-              ) : item.label ? (
-                <EuiDescriptionList compressed textStyle="reverse" style={{ textAlign: 'right' }}>
+              {item.label ? (
+                <EuiDescriptionList compressed>
                   <EuiDescriptionListTitle>{item.label}</EuiDescriptionListTitle>
                   <EuiDescriptionListDescription>{item.content}</EuiDescriptionListDescription>
                 </EuiDescriptionList>
diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/components/agent_health.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/components/agent_health.tsx
index 45017ac8532da7..40d91f13db6590 100644
--- a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/components/agent_health.tsx
+++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/components/agent_health.tsx
@@ -5,7 +5,7 @@
  */
 import React from 'react';
 import { FormattedMessage, FormattedRelative } from '@kbn/i18n/react';
-import { EuiHealth, EuiToolTip } from '@elastic/eui';
+import { EuiBadge, EuiToolTip } from '@elastic/eui';
 import { Agent } from '../../../types';
 
 interface Props {
@@ -13,79 +13,52 @@ interface Props {
 }
 
 const Status = {
-  Online: (
-    <EuiHealth color="success">
-      <FormattedMessage id="xpack.fleet.agentHealth.onlineStatusText" defaultMessage="Online" />
-    </EuiHealth>
+  Healthy: (
+    <EuiBadge color="secondary">
+      <FormattedMessage id="xpack.fleet.agentHealth.healthyStatusText" defaultMessage="Healthy" />
+    </EuiBadge>
   ),
   Offline: (
-    <EuiHealth color="subdued">
+    <EuiBadge color="default">
       <FormattedMessage id="xpack.fleet.agentHealth.offlineStatusText" defaultMessage="Offline" />
-    </EuiHealth>
+    </EuiBadge>
   ),
   Inactive: (
-    <EuiHealth color="subdued">
-      <FormattedMessage id="xpack.fleet.agentHealth.inactiveStatusText" defaultMessage="Inactive" />
-    </EuiHealth>
-  ),
-  Warning: (
-    <EuiHealth color="warning">
-      <FormattedMessage id="xpack.fleet.agentHealth.warningStatusText" defaultMessage="Error" />
-    </EuiHealth>
-  ),
-  Error: (
-    <EuiHealth color="danger">
-      <FormattedMessage id="xpack.fleet.agentHealth.errorStatusText" defaultMessage="Error" />
-    </EuiHealth>
-  ),
-  Degraded: (
-    <EuiHealth color="danger">
-      <FormattedMessage id="xpack.fleet.agentHealth.degradedStatusText" defaultMessage="Degraded" />
-    </EuiHealth>
-  ),
-  Enrolling: (
-    <EuiHealth color="warning">
-      <FormattedMessage
-        id="xpack.fleet.agentHealth.enrollingStatusText"
-        defaultMessage="Enrolling"
-      />
-    </EuiHealth>
+    <EuiBadge color="default">
+      <FormattedMessage id="xpack.fleet.agentHealth.offlineStatusText" defaultMessage="Offline" />
+    </EuiBadge>
   ),
-  Unenrolling: (
-    <EuiHealth color="warning">
+  Unhealthy: (
+    <EuiBadge color="warning">
       <FormattedMessage
-        id="xpack.fleet.agentHealth.unenrollingStatusText"
-        defaultMessage="Unenrolling"
+        id="xpack.fleet.agentHealth.inactiveStatusText"
+        defaultMessage="Unhealthy"
       />
-    </EuiHealth>
+    </EuiBadge>
   ),
-  Upgrading: (
-    <EuiHealth color="warning">
+  Updating: (
+    <EuiBadge color="primary">
       <FormattedMessage id="xpack.fleet.agentHealth.updatingStatusText" defaultMessage="Updating" />
-    </EuiHealth>
+    </EuiBadge>
   ),
 };
 
 function getStatusComponent(agent: Agent): React.ReactElement {
   switch (agent.status) {
+    case 'warning':
     case 'error':
-      return Status.Error;
     case 'degraded':
-      return Status.Degraded;
+      return Status.Unhealthy;
     case 'inactive':
       return Status.Inactive;
     case 'offline':
       return Status.Offline;
-    case 'warning':
-      return Status.Warning;
     case 'unenrolling':
-      return Status.Unenrolling;
     case 'enrolling':
-      return Status.Enrolling;
     case 'updating':
-      return Status.Upgrading;
+      return Status.Updating;
     default:
-      return Status.Online;
+      return Status.Healthy;
   }
 }
 
diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/components/agent_policy_package_badges.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/components/agent_policy_package_badges.tsx
index 08835cc872b82a..ff8e4868b1fdf8 100644
--- a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/components/agent_policy_package_badges.tsx
+++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/components/agent_policy_package_badges.tsx
@@ -3,53 +3,74 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-import React from 'react';
+import React, { useMemo } from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { EuiSpacer, EuiText, EuiFlexGroup, EuiFlexItem, EuiBadge } from '@elastic/eui';
-import { PackagePolicy } from '../../../types';
+import { PackagePolicy, PackagePolicyPackage } from '../../../types';
 import { useGetOneAgentPolicy } from '../../../hooks';
 import { PackageIcon } from '../../../components/package_icon';
 
 interface Props {
   agentPolicyId: string;
+  hideTitle?: boolean;
 }
 
-export const AgentPolicyPackageBadges: React.FunctionComponent<Props> = ({ agentPolicyId }) => {
+export const AgentPolicyPackageBadges: React.FunctionComponent<Props> = ({
+  agentPolicyId,
+  hideTitle,
+}) => {
   const agentPolicyRequest = useGetOneAgentPolicy(agentPolicyId);
   const agentPolicy = agentPolicyRequest.data ? agentPolicyRequest.data.item : null;
 
-  if (!agentPolicy) {
+  const packages = useMemo(() => {
+    if (!agentPolicy) {
+      return;
+    }
+
+    const uniquePackages = new Map<string, PackagePolicyPackage>();
+
+    (agentPolicy.package_policies as PackagePolicy[]).forEach(({ package: pkg }) => {
+      if (!pkg) {
+        return;
+      }
+
+      if (!uniquePackages.has(pkg.name) || uniquePackages.get(pkg.name)!.version < pkg.version) {
+        uniquePackages.set(pkg.name, pkg);
+      }
+    });
+
+    return [...uniquePackages.values()];
+  }, [agentPolicy]);
+
+  if (!agentPolicy || !packages) {
     return null;
   }
+
   return (
     <>
-      <EuiText>
-        <FormattedMessage
-          id="xpack.fleet.agentReassignPolicy.policyDescription"
-          defaultMessage="The selected agent policy will collect data for {count, plural, one {{countValue} integration} other {{countValue} integrations}}:"
-          values={{
-            count: agentPolicy.package_policies.length,
-            countValue: <b>{agentPolicy.package_policies.length}</b>,
-          }}
-        />
-      </EuiText>
-      <EuiSpacer size="s" />
-      {(agentPolicy.package_policies as PackagePolicy[]).map((packagePolicy, idx) => {
-        if (!packagePolicy.package) {
-          return null;
-        }
+      {!hideTitle && (
+        <>
+          <EuiText>
+            <FormattedMessage
+              id="xpack.fleet.agentReassignPolicy.policyDescription"
+              defaultMessage="The selected agent policy will collect data for {count, plural, one {{countValue} integration} other {{countValue} integrations}}:"
+              values={{
+                count: packages.length,
+                countValue: <b>{packages.length}</b>,
+              }}
+            />
+          </EuiText>
+          <EuiSpacer size="s" />
+        </>
+      )}
+      {packages.map((pkg, idx) => {
         return (
           <EuiBadge key={idx} color="hollow">
             <EuiFlexGroup direction="row" gutterSize="xs" alignItems="center">
               <EuiFlexItem grow={false}>
-                <PackageIcon
-                  packageName={packagePolicy.package.name}
-                  version={packagePolicy.package.version}
-                  size="s"
-                  tryApi={true}
-                />
+                <PackageIcon packageName={pkg.name} version={pkg.version} size="s" tryApi={true} />
               </EuiFlexItem>
-              <EuiFlexItem grow={false}>{packagePolicy.package.title}</EuiFlexItem>
+              <EuiFlexItem grow={false}>{pkg.title}</EuiFlexItem>
             </EuiFlexGroup>
           </EuiBadge>
         );
diff --git a/x-pack/plugins/fleet/public/applications/fleet/types/index.ts b/x-pack/plugins/fleet/public/applications/fleet/types/index.ts
index ded1447954aff7..dd80c1ad77b85d 100644
--- a/x-pack/plugins/fleet/public/applications/fleet/types/index.ts
+++ b/x-pack/plugins/fleet/public/applications/fleet/types/index.ts
@@ -22,6 +22,7 @@ export {
   NewPackagePolicyInputStream,
   PackagePolicyConfigRecord,
   PackagePolicyConfigRecordEntry,
+  PackagePolicyPackage,
   Output,
   DataStream,
   // API schema - misc setup, status
diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
index be340ea4672a55..7b766de9445ff6 100644
--- a/x-pack/plugins/translations/translations/ja-JP.json
+++ b/x-pack/plugins/translations/translations/ja-JP.json
@@ -7180,16 +7180,10 @@
     "xpack.fleet.agentEnrollment.stepRunAgentDescription": "エージェントのディレクトリから、このコマンドを実行し、Elasticエージェントを、インストール、登録、起動します。このコマンドを再利用すると、複数のホストでエージェントを設定できます。管理者権限が必要です。",
     "xpack.fleet.agentEnrollment.stepRunAgentTitle": "エージェントの起動",
     "xpack.fleet.agentHealth.checkInTooltipText": "前回のチェックイン {lastCheckIn}",
-    "xpack.fleet.agentHealth.degradedStatusText": "劣化",
-    "xpack.fleet.agentHealth.enrollingStatusText": "登録中",
-    "xpack.fleet.agentHealth.errorStatusText": "エラー",
     "xpack.fleet.agentHealth.inactiveStatusText": "非アクティブ",
     "xpack.fleet.agentHealth.noCheckInTooltipText": "チェックインしない",
     "xpack.fleet.agentHealth.offlineStatusText": "オフライン",
-    "xpack.fleet.agentHealth.onlineStatusText": "オンライン",
-    "xpack.fleet.agentHealth.unenrollingStatusText": "登録解除中",
     "xpack.fleet.agentHealth.updatingStatusText": "更新中",
-    "xpack.fleet.agentHealth.warningStatusText": "エラー",
     "xpack.fleet.agentList.actionsColumnTitle": "アクション",
     "xpack.fleet.agentList.addButton": "エージェントの追加",
     "xpack.fleet.agentList.agentUpgradeLabel": "アップグレードが利用可能です",
diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
index df40d8474bdc5d..aa5b0c1b3bf5b0 100644
--- a/x-pack/plugins/translations/translations/zh-CN.json
+++ b/x-pack/plugins/translations/translations/zh-CN.json
@@ -7186,16 +7186,10 @@
     "xpack.fleet.agentEnrollment.stepRunAgentDescription": "从代理目录运行此命令，以安装、注册并启动 Elastic 代理。您可以重复使用此命令在多个主机上设置代理。需要管理员权限。",
     "xpack.fleet.agentEnrollment.stepRunAgentTitle": "启动代理",
     "xpack.fleet.agentHealth.checkInTooltipText": "上次签入时间 {lastCheckIn}",
-    "xpack.fleet.agentHealth.degradedStatusText": "已降级",
-    "xpack.fleet.agentHealth.enrollingStatusText": "正在注册",
-    "xpack.fleet.agentHealth.errorStatusText": "错误",
     "xpack.fleet.agentHealth.inactiveStatusText": "非活动",
     "xpack.fleet.agentHealth.noCheckInTooltipText": "未签入",
     "xpack.fleet.agentHealth.offlineStatusText": "脱机",
-    "xpack.fleet.agentHealth.onlineStatusText": "联机",
-    "xpack.fleet.agentHealth.unenrollingStatusText": "正在取消注册",
     "xpack.fleet.agentHealth.updatingStatusText": "正在更新",
-    "xpack.fleet.agentHealth.warningStatusText": "错误",
     "xpack.fleet.agentList.actionsColumnTitle": "操作",
     "xpack.fleet.agentList.addButton": "添加代理",
     "xpack.fleet.agentList.agentUpgradeLabel": "升级可用",