Add reset zoom button.

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 = ({
               <ExpandArrowsAltIcon />
             </Button>
           </Tooltip>
+          <Tooltip content={t`Reset zoom`} position="top">
+            <Button
+              ouiaId="reset-zoom-button"
+              aria-label={t`Reset zoom`}
+              variant="plain"
+              icon={<ExpandIcon />}
+              onClick={resetZoom}
+            >
+              <ExpandIcon />
+            </Button>
+          </Tooltip>
           <Tooltip content={t`Toggle legend`} position="top">
             <Switch
               id="legend-toggle-switch"

awx/ui/src/screens/TopologyView/TopologyView.js

@@ -36,6 +36,15 @@ function TopologyView() {
   const zoomOut = () => {
     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}
       />
       <PageSection>
         <Card>