From d755c1bc55a703c0eac492b552a5bfee631745ee Mon Sep 17 00:00:00 2001
From: Jen Huang <its.jenetic@gmail.com>
Date: Fri, 19 Feb 2021 11:03:33 -0800
Subject: [PATCH] [Fleet] Handle long text in agent details page (#91776)
 (#92042)

* Fix #85521

* Set a minimum height for agent logs component #89831

* Truncate long integration names nicely #85404
---
 .../agent_details/agent_details_integrations.tsx   | 14 +++++++++-----
 .../agent_details/agent_details_overview.tsx       |  4 +++-
 .../components/agent_logs/agent_logs.tsx           |  9 +++++++--
 3 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/components/agent_details/agent_details_integrations.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/components/agent_details/agent_details_integrations.tsx
index d8beabab67ef1..d71fb8be5f9cf 100644
--- a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/components/agent_details/agent_details_integrations.tsx
+++ b/x-pack/plugins/fleet/public/applications/fleet/sections/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/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/components/agent_details/agent_details_overview.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/components/agent_details/agent_details_overview.tsx
index 05e782d245ad2..a992c1a274063 100644
--- a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/components/agent_details/agent_details_overview.tsx
+++ b/x-pack/plugins/fleet/public/applications/fleet/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/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/components/agent_logs/agent_logs.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/components/agent_logs/agent_logs.tsx
index 423467702e05a..fafe389d07b82 100644
--- a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/components/agent_logs/agent_logs.tsx
+++ b/x-pack/plugins/fleet/public/applications/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