Skip to content

Commit

Permalink
[Fleet] Update agent details page to prepare for a per integrations s…
Browse files Browse the repository at this point in the history
…tatus
  • Loading branch information
nchaulet committed Nov 26, 2020
1 parent 4d8b7f9 commit 4bdf9fa
Show file tree
Hide file tree
Showing 14 changed files with 541 additions and 256 deletions.
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,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>
);
});
Loading

0 comments on commit 4bdf9fa

Please sign in to comment.