diff --git a/src/components/FeedTree/FeedTree.tsx b/src/components/FeedTree/FeedTree.tsx index 87081b40a..dab940c6e 100644 --- a/src/components/FeedTree/FeedTree.tsx +++ b/src/components/FeedTree/FeedTree.tsx @@ -142,9 +142,7 @@ const FeedTree = ({ let newLinks: HierarchyPointLink[] = []; if (data && data.length > 0) { - const rootNode = d3Tree( - hierarchy(data[0], (d) => (d.__rd3t?.collapsed ? null : d.children)), - ); + const rootNode = d3Tree(hierarchy(data[0], (d) => d.children)); nodes = rootNode.descendants(); links = rootNode.links(); @@ -270,157 +268,155 @@ const FeedTree = ({ return (
-
- {/* Controls Section */} -
- {/* Orientation Toggle */} -
- {switchState.orientation === "vertical" ? ( - handleChange(Feature.ORIENTATION, "horizontal")} - className="feed-tree__orientation--icon" - aria-label="Rotate Left" - aria-hidden="true" - /> - ) : ( -
- - {/* Toggle Labels Switch */} -
- handleChange(Feature.TOGGLE_LABELS)} - aria-label="Toggle label visibility" + {/* Controls Section */} +
+ {/* Orientation Toggle */} +
+ {switchState.orientation === "vertical" ? ( + handleChange(Feature.ORIENTATION, "horizontal")} + className="feed-tree__orientation--icon" + aria-label="Rotate Left" + aria-hidden="true" /> -
- - {/* Switch Layout Toggle */} -
- changeLayout()} - aria-label="Toggle graph layout from 2D to 3D" - /> -
- - {/* Scale Nodes Switch and Dropdown */} -
- handleChange(Feature.SCALE_ENABLED)} - aria-label="Scale nodes" + ) : ( +
- {overlayScale.enabled && ( -
- handleChange(Feature.SCALE_TYPE, type)} - /> -
- )} -
- - {/* Search Box Switch */} -
- handleChange(Feature.SEARCH_BOX)} - aria-label="Toggle search a node in the tree" - /> -
- - {/* Search Input */} -
- {switchState.searchBox && ( - - updateState((draft) => { - draft.switchState.searchFilter = value; - }) - } - aria-label="Search nodes" - placeholder="Search..." + {/* Toggle Labels Switch */} +
+ handleChange(Feature.TOGGLE_LABELS)} + aria-label="Toggle label visibility" + /> +
+ + {/* Switch Layout Toggle */} +
+ changeLayout()} + aria-label="Toggle graph layout from 2D to 3D" + /> +
+ + {/* Scale Nodes Switch and Dropdown */} +
+ handleChange(Feature.SCALE_ENABLED)} + aria-label="Scale nodes" + /> + + {overlayScale.enabled && ( +
+ handleChange(Feature.SCALE_TYPE, type)} /> - )} -
+
+ )}
- {/* Tree Visualization */} - {treeState.translate.x > 0 && treeState.translate.y > 0 && ( - - - - {/* Render Links */} - {links?.map((linkData, i) => ( - - i - }`} - orientation={switchState.orientation} - linkData={linkData} - isDarkTheme={isDarkTheme} - /> - ))} - - {/* Render Nodes */} - {nodes?.map(({ data, x, y, parent }) => ( - onNodeClick(item)} - orientation={switchState.orientation} - toggleLabel={switchState.toggleLabels} - overlayScale={ - overlayScale.enabled ? overlayScale.type : undefined - } - searchFilter={switchState.searchFilter} - /> - ))} - - - - )} + {/* Search Box Switch */} +
+ handleChange(Feature.SEARCH_BOX)} + aria-label="Toggle search a node in the tree" + /> +
+ + {/* Search Input */} +
+ {switchState.searchBox && ( + + updateState((draft) => { + draft.switchState.searchFilter = value; + }) + } + aria-label="Search nodes" + placeholder="Search..." + /> + )} +
+ + {/* Tree Visualization */} + {treeState.translate.x > 0 && treeState.translate.y > 0 && ( + + + + {/* Render Links */} + {links?.map((linkData, i) => ( + + i + }`} + orientation={switchState.orientation} + linkData={linkData} + isDarkTheme={isDarkTheme} + /> + ))} + + {/* Render Nodes */} + {nodes?.map(({ data, x, y, parent }) => ( + onNodeClick(item)} + orientation={switchState.orientation} + toggleLabel={switchState.toggleLabels} + overlayScale={ + overlayScale.enabled ? overlayScale.type : undefined + } + searchFilter={switchState.searchFilter} + /> + ))} + + + + )}
); }; diff --git a/src/components/Feeds/FeedView.tsx b/src/components/Feeds/FeedView.tsx index de5f35933..3aea16224 100644 --- a/src/components/Feeds/FeedView.tsx +++ b/src/components/Feeds/FeedView.tsx @@ -179,6 +179,9 @@ const FeedView: React.FC = () => { order={2} defaultSize={47} minSize={20} + style={{ + overflow: "scroll", + }} > {handleDrawerAction("node")}
diff --git a/src/components/NodeDetails/LogTerminal.tsx b/src/components/NodeDetails/LogTerminal.tsx index b6965720c..d87a9b77a 100644 --- a/src/components/NodeDetails/LogTerminal.tsx +++ b/src/components/NodeDetails/LogTerminal.tsx @@ -1,6 +1,4 @@ import { LogViewer } from "@patternfly/react-log-viewer"; -import { useRef, useEffect, useState } from "react"; -import useSize from "../FeedTree/useSize"; import { useAppSelector } from "../../store/hooks"; type LogTerminalProps = { @@ -8,59 +6,26 @@ type LogTerminalProps = { }; const LogTerminal = ({ text }: LogTerminalProps) => { - const divRef = useRef(null); - const size = useSize(divRef); const isTerminalMaximized = useAppSelector( (state) => state.drawers.node.maximized, ); - const [terminalSize, setTerminalSize] = useState({ - width: "100%", - height: "100%", - }); - - const handleResize = () => { - if (divRef.current && size) { - const parentWidth = size.width; - const parentHeight = size.height; - const element = document.getElementById("log-viewer"); - if (element) { - setTerminalSize({ - width: `${parentWidth}px`, - height: `${parentHeight}px`, - }); - } - } + const containerStyle = { + height: isTerminalMaximized ? "100vh" : "100%", + width: "100%", + display: "flex", + flexDirection: "column" as const, + flexGrow: 1, }; - useEffect(() => { - // Call handleResize whenever window resizes - window.addEventListener("resize", handleResize); - - // Initial resize logic when component mounts - handleResize(); - - // Cleanup on unmount - return () => { - window.removeEventListener("resize", handleResize); - }; - }, [size, isTerminalMaximized]); // Ensure the effect runs when size or maximized state changes + const logViewerStyle = { + flexGrow: 1, + overflow: "auto", + }; return ( -
- +
+
); }; diff --git a/src/components/NodeDetails/NodeDetails.css b/src/components/NodeDetails/NodeDetails.css index 28b7a0784..c26831ccf 100644 --- a/src/components/NodeDetails/NodeDetails.css +++ b/src/components/NodeDetails/NodeDetails.css @@ -164,3 +164,15 @@ width: calc(100% - 40px); } } + +.pf-v5-c-log-viewer__main, +.pf-v5-c-log-viewer__list { + flex-grow: 1 !important; + overflow: auto; + +} + +.pf-v5-c-log-viewer__scroll-container{ + height:100% !important; +} +