[Fleet] Update agent details page to prepare for a per integrations status

Author: nchaulet

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"

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

@@ -0,0 +1,153 @@
+/*
+ * 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 StyledCollapsablePanel = styled(EuiPanel).attrs((props) => ({
+  paddingSize: 'none',
+}))`
+  .euiAccordion__triggerWrapper {
+    border-bottom: 1px solid ${(props) => props.theme.eui.euiColorLightShade};
+    padding: ${(props) => props.theme.eui.paddingSizes.m}
+      ${(props) => props.theme.eui.paddingSizes.m};
+  }
+  .euiAccordion__childWrapper {
+    overflow: visible;
+  }
+`;
+
+const CollapsablePanel: React.FC<{ title: React.ReactNode }> = ({ title, children }) => {
+  return (
+    <StyledCollapsablePanel paddingSize="none">
+      <EuiAccordion id="accordion-1" arrowDisplay="right" buttonContent={title}>
+        {children}
+      </EuiAccordion>
+    </StyledCollapsablePanel>
+  );
+};
+
+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',
+            })}?${getLogsQueryByInputType(inputType)}`}
+            iconType="editorAlignLeft"
+            title={i18n.translate('xpack.fleet.agentDetailsIntegrations.viewLogsButton', {
+              defaultMessage: 'View logs',
+            })}
+          />
+        );
+      },
+    },
+  ];
+
+  return (
+    <CollapsablePanel
+      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>
+  );
+});