maxmustermann/kibana
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

[Fleet] Prevent long names from breaking agent details page (#88383)

Browse source 
* Fix long policy name breaking agent details page

* Fix long agent host name breaking agent details page
This commit is contained in:
Jen Huang 2021-01-14 13:39:05 -08:00 committed by GitHub
parent bc50f66657
commit d8678ded03
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 26 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -4,6 +4,7 @@
* you may not use this file except in compliance with the Elastic License.
*/
import React, { memo } from 'react';
import styled from 'styled-components';
import {
EuiDescriptionList,
EuiDescriptionListTitle,
@ -22,6 +23,11 @@ import { isAgentUpgradeable } from '../../../../../services';
import { AgentPolicyPackageBadges } from '../../../components/agent_policy_package_badges';
import { LinkAndRevision } from '../../../../../components';
// Allows child text to be truncated
const FlexItemWithMinWidth = styled(EuiFlexItem)`
min-width: 0px;
`;
export const AgentDetailsOverviewSection: React.FunctionComponent<{
agent: Agent;
agentPolicy?: AgentPolicy;
@ -30,7 +36,7 @@ export const AgentDetailsOverviewSection: React.FunctionComponent<{
const kibanaVersion = useKibanaVersion();
return (
<EuiPanel>
<EuiDescriptionList>
<EuiDescriptionList compressed>
{[
{
title: i18n.translate('xpack.fleet.agentDetails.hostIdLabel', {
@ -161,16 +167,14 @@ export const AgentDetailsOverviewSection: React.FunctionComponent<{
},
].map(({ title, description }) => {
return (
<EuiDescriptionList compressed>
<EuiFlexGroup>
<EuiFlexItem grow={3}>
<EuiDescriptionListTitle>{title}</EuiDescriptionListTitle>
</EuiFlexItem>
<EuiFlexItem grow={7}>
<EuiDescriptionListDescription>{description}</EuiDescriptionListDescription>
</EuiFlexItem>
</EuiFlexGroup>
</EuiDescriptionList>
<EuiFlexGroup>
<FlexItemWithMinWidth grow={3}>
<EuiDescriptionListTitle>{title}</EuiDescriptionListTitle>
</FlexItemWithMinWidth>
<FlexItemWithMinWidth grow={7}>
<EuiDescriptionListDescription>{description}</EuiDescriptionListDescription>
</FlexItemWithMinWidth>
</EuiFlexGroup>
);
})}
</EuiDescriptionList>

14
x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/components/agent_details/index.tsx
View file

@ -4,12 +4,18 @@
* you may not use this file except in compliance with the Elastic License.
*/
import React, { memo } from 'react';
import styled from 'styled-components';
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';
// Allows child text to be truncated
const FlexItemWithMinWidth = styled(EuiFlexItem)`
min-width: 0px;
`;
export const AgentDetailsContent: React.FunctionComponent<{
agent: Agent;
agentPolicy?: AgentPolicy;
@ -17,7 +23,7 @@ export const AgentDetailsContent: React.FunctionComponent<{
return (
<>
<EuiFlexGroup alignItems="flexStart">
<EuiFlexItem>
<FlexItemWithMinWidth>
<EuiTitle size="s">
<h3>
<FormattedMessage
@ -28,8 +34,8 @@ export const AgentDetailsContent: React.FunctionComponent<{
</EuiTitle>
<EuiSpacer size="s" />
<AgentDetailsOverviewSection agent={agent} agentPolicy={agentPolicy} />
</EuiFlexItem>
<EuiFlexItem>
</FlexItemWithMinWidth>
<FlexItemWithMinWidth>
<EuiTitle size="s">
<h3>
<FormattedMessage
@ -40,7 +46,7 @@ export const AgentDetailsContent: React.FunctionComponent<{
</EuiTitle>
<EuiSpacer size="s" />
<AgentDetailsIntegrationsSection agent={agent} agentPolicy={agentPolicy} />
</EuiFlexItem>
</FlexItemWithMinWidth>
</EuiFlexGroup>
</>
);

2
x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/index.tsx
View file

@ -90,7 +90,7 @@ export const AgentDetailsPage: React.FunctionComponent = () => {
</EuiButtonEmpty>
</EuiFlexItem>
<EuiFlexItem>
<EuiText>
<EuiText className="eui-textBreakWord">
<h1>
{isLoading && isInitialRequest ? (
<Loading />