Skip to content

Commit

Permalink
[Fleet] Update agent details page (#84434)
Browse files Browse the repository at this point in the history
  • Loading branch information
nchaulet authored Dec 1, 2020
1 parent 4a7071e commit 0ba7d9c
Show file tree
Hide file tree
Showing 14 changed files with 530 additions and 257 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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',
};
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down

This file was deleted.

Original file line number Diff line number Diff line change
@@ -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>
);
});
Loading

0 comments on commit 0ba7d9c

Please sign in to comment.