Skip to content

Commit

Permalink
[Fleet] Handle long text in agent details page (#91776) (#92042)
Browse files Browse the repository at this point in the history
* Fix #85521

* Set a minimum height for agent logs component #89831

* Truncate long integration names nicely #85404
  • Loading branch information
jen-huang authored Feb 19, 2021
1 parent 60c9fdc commit d755c1b
Show file tree
Hide file tree
Showing 3 changed files with 19 additions and 8 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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 }> = ({
Expand All @@ -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}
Expand Down Expand Up @@ -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,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -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
Expand Down

0 comments on commit d755c1b

Please sign in to comment.