diff --git a/awx/ui/src/screens/TopologyView/Header.js b/awx/ui/src/screens/TopologyView/Header.js
index 4dacc7b598..e1b8f6648d 100644
--- a/awx/ui/src/screens/TopologyView/Header.js
+++ b/awx/ui/src/screens/TopologyView/Header.js
@@ -15,6 +15,7 @@ import {
SearchMinusIcon,
SearchPlusIcon,
ExpandArrowsAltIcon,
+ ExpandIcon,
} from '@patternfly/react-icons';
const Header = ({
@@ -23,6 +24,7 @@ const Header = ({
toggleState,
zoomIn,
zoomOut,
+ resetZoom,
}) => {
const { light } = PageSectionVariants;
return (
@@ -76,6 +78,17 @@ const Header = ({
+
+ }
+ onClick={resetZoom}
+ >
+
+
+
{
d3.select('.mesh-svg').transition().call(zoom.scaleBy, 0.5);
};
+ const resetZoom = () => {
+ const margin = 15;
+ const width = parseInt(d3.select(`#chart`).style('width'), 10) - margin;
+ d3.select('.mesh-svg').transition().duration(750).call(
+ zoom.transform,
+ d3.zoomIdentity,
+ d3.zoomTransform(d3.select('.mesh-svg').node()).invert([width / 2, 600 / 2])
+ );
+ }
return (
<>
@@ -45,6 +54,7 @@ function TopologyView() {
toggleState={showLegend}
zoomIn={zoomIn}
zoomOut={zoomOut}
+ resetZoom={resetZoom}
/>