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

* Fix #85521 * Set a minimum height for agent logs component #89831 * Truncate long integration names nicely #85404
elastic · Feb 19, 2021 · 8b2f281 · 8b2f281
1 parent 865cd2e
commit 8b2f281
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 8 deletions.
diff --git a/...ections/agents/agent_details_page/components/agent_details/agent_details_integrations.tsx b/...ections/agents/agent_details_page/components/agent_details/agent_details_integrations.tsx
@@ -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,

diff --git a/...et/sections/agents/agent_details_page/components/agent_details/agent_details_overview.tsx b/...et/sections/agents/agent_details_page/components/agent_details/agent_details_overview.tsx
@@ -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>
           );

diff --git a/...pplications/fleet/sections/agents/agent_details_page/components/agent_logs/agent_logs.tsx b/...pplications/fleet/sections/agents/agent_details_page/components/agent_logs/agent_logs.tsx
@@ -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