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

[Fleet] Handle long text in agent details page (#91776)

Browse source 
* Fix #85521

* Set a minimum height for agent logs component #89831

* Truncate long integration names nicely #85404
This commit is contained in:
Jen Huang 2021-02-19 08:49:48 -08:00 committed by GitHub
parent c8fab9f8cb
commit 10b1fddf35
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 19 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -27,8 +27,7 @@ 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};
padding: ${(props) => props.theme.eui.paddingSizes.m};
}
&.euiAccordion-isOpen .ingest-integration-title-button {
@ -38,6 +37,10 @@ const StyledEuiAccordion = styled(EuiAccordion)`
.euiTableRow:last-child .euiTableRowCell {
border-bottom: none;
}
.euiIEFlexWrapFix {
min-width: 0;
}
`;
const CollapsablePanel: React.FC<{ id: string; title: React.ReactNode }> = ({
@ -46,11 +49,11 @@ const CollapsablePanel: React.FC<{ id: string; title: React.ReactNode }> = ({
children,
}) => {
return (
<EuiPanel paddingSize="none" style={{ overflow: 'hidden' }}>
<EuiPanel paddingSize="none">
<StyledEuiAccordion
id={id}
arrowDisplay="right"
buttonClassName={'ingest-integration-title-button'}
buttonClassName="ingest-integration-title-button"
buttonContent={title}
>
{children}
@ -128,8 +131,9 @@ export const AgentDetailsIntegration: React.FunctionComponent<{
<PackageIcon size="l" packageName="default" version="0" />
)}
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiFlexItem className="eui-textTruncate">
<EuiLink
className="eui-textTruncate"
href={getHref('edit_integration', {
policyId: agentPolicy.id,
packagePolicyId: packagePolicy.id,

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

@ -174,7 +174,9 @@ export const AgentDetailsOverviewSection: React.FunctionComponent<{
<EuiDescriptionListTitle>{title}</EuiDescriptionListTitle>
</FlexItemWithMinWidth>
<FlexItemWithMinWidth grow={7}>
<EuiDescriptionListDescription>{description}</EuiDescriptionListDescription>
<EuiDescriptionListDescription className="eui-textTruncate">
{description}
</EuiDescriptionListDescription>
</FlexItemWithMinWidth>
</EuiFlexGroup>
);

9
x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/components/agent_logs/agent_logs.tsx
View file

@ -185,8 +185,6 @@ export const AgentLogsUI: React.FunctionComponent<AgentLogsProps> = memo(({ agen
[http.basePath, state.start, state.end, logStreamQuery]
);
const [logsPanelRef, { height: logPanelHeight }] = useMeasure<HTMLDivElement>();
const agentVersion = agent.local_metadata?.elastic?.agent?.version;
const isLogFeatureAvailable = useMemo(() => {
if (!agentVersion) {
@ -199,6 +197,13 @@ export const AgentLogsUI: React.FunctionComponent<AgentLogsProps> = memo(({ agen
return semverGte(agentVersionWithPrerelease, '7.11.0');
}, [agentVersion]);
// Set absolute height on logs component (needed to render correctly in Safari)
// based on available height, or 600px, whichever is greater
const [logsPanelRef, { height: measuredlogPanelHeight }] = useMeasure<HTMLDivElement>();
const logPanelHeight = useMemo(() => Math.max(measuredlogPanelHeight, 600), [
measuredlogPanelHeight,
]);
if (!isLogFeatureAvailable) {
return (
<EuiCallOut