kie-issues#1281: The Timeline goes to the bottom with long endpoints …

…in WorkflowInstance page (#2563)
apache · Oct 11, 2024 · b905936 · b905936
1 parent 8756ef6
commit b905936
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 3 deletions.
diff --git a/packages/runtime-tools-components/src/common/components/EndpointLink/EndpointLink.tsx b/packages/runtime-tools-components/src/common/components/EndpointLink/EndpointLink.tsx
@@ -21,6 +21,7 @@ import React from "react";
 import { Button } from "@patternfly/react-core/dist/js/components/Button";
 import { ExternalLinkAltIcon } from "@patternfly/react-icons/dist/js/icons/external-link-alt-icon";
 import { componentOuiaProps, OUIAProps } from "../../ouiaTools";
+import { Truncate } from "@patternfly/react-core/dist/js/components/Truncate";
 
 interface IOwnProps {
   serviceUrl?: string;
@@ -45,7 +46,10 @@ export const EndpointLink: React.FC<IOwnProps & OUIAProps> = ({
         isInline={true}
         {...componentOuiaProps(ouiaId, "endpoint-link", ouiaSafe)}
       >
-        {isLinkShown ? serviceUrl : linkLabel || "Endpoint"}
+        <Truncate
+          content={isLinkShown ? serviceUrl : linkLabel || "Endpoint"}
+          style={{ maxWidth: "90%", minWidth: "0" }}
+        />
         {<ExternalLinkAltIcon className="pf-u-ml-xs" />}
       </Button>
     );

diff --git a/...ed-components/src/workflowDetails/envelope/components/WorkflowDetails/WorkflowDetails.tsx b/...ed-components/src/workflowDetails/envelope/components/WorkflowDetails/WorkflowDetails.tsx
@@ -50,6 +50,8 @@ import WorkflowDetailsTimelinePanel from "../WorkflowDetailsTimelinePanel/Workfl
 import SwfCombinedEditor from "../SwfCombinedEditor/SwfCombinedEditor";
 import { Job, WorkflowInstance, WorkflowInstanceState } from "@kie-tools/runtime-tools-swf-gateway-api/dist/types";
 
+const SWFCOMBINEDEDITOR_WIDTH = 1000;
+
 interface WorkflowDetailsProps {
   isEnvelopeConnectedToChannel: boolean;
   driver: WorkflowDetailsDriver;
@@ -218,7 +220,7 @@ const WorkflowDetails: React.FC<WorkflowDetailsProps> = ({ isEnvelopeConnectedTo
     return (
       <Flex>
         <FlexItem>
-          <SwfCombinedEditor height={1000} width={1000} workflowInstance={data} />
+          <SwfCombinedEditor height={1000} width={SWFCOMBINEDEDITOR_WIDTH} workflowInstance={data} />
         </FlexItem>
       </Flex>
     );
@@ -270,7 +272,7 @@ const WorkflowDetails: React.FC<WorkflowDetailsProps> = ({ isEnvelopeConnectedTo
     return (
       <Flex direction={{ default: "column" }}>
         {renderSwfDiagram()}
-        <Flex>
+        <Flex style={{ width: `${SWFCOMBINEDEDITOR_WIDTH}px` }}>
           {renderWorkflowDetails()}
           {renderWorkflowVariables()}
         </Flex>