[Fleet] Handle long text in agent details page (#91776)
* Fix #85521 * Set a minimum height for agent logs component #89831 * Truncate long integration names nicely #85404
This commit is contained in:
parent
c8fab9f8cb
commit
10b1fddf35
|
@ -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,
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in a new issue