Use 100% height.

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

@@ -13,6 +13,8 @@ import {
   renderNodeType,
   renderNodeIcon,
   redirectToDetailsPage,
+  getHeight,
+  getWidth,
   // generateRandomNodes,
   // getRandomInt,
 } from './utils/helpers';
@@ -23,9 +25,7 @@ import {
   DEFAULT_NODE_HIGHLIGHT_COLOR,
   DEFAULT_NODE_LABEL_TEXT_COLOR,
   DEFAULT_FONT_SIZE,
-  MARGIN,
-  HEIGHT,
-  FALLBACK_WIDTH,
+  SELECTOR,
 } from './constants';
 
 const Loader = styled(ContentLoading)`
@@ -43,22 +43,8 @@ function MeshGraph({ data, showLegend, zoom }) {
 
   // const data = generateRandomNodes(getRandomInt(4, 50));
   const draw = () => {
-    const getWidth = () => {
-      let width;
-      // This is in an a try/catch due to an error from jest.
-      // Even though the d3.select returns a valid selector with
-      // style function, it says it is null in the test
-      try {
-        width =
-          parseInt(d3.select(`#chart`).style('width'), 10) - MARGIN ||
-          FALLBACK_WIDTH;
-      } catch (error) {
-        width = FALLBACK_WIDTH;
-      }
-
-      return width;
-    };
-    const width = getWidth();
+    const width = getWidth(SELECTOR);
+    const height = getHeight(SELECTOR);
 
     /* Add SVG */
     d3.selectAll(`#chart > svg`).remove();
@@ -66,13 +52,9 @@ function MeshGraph({ data, showLegend, zoom }) {
       .select('#chart')
       .append('svg')
       .attr('class', 'mesh-svg')
-      .attr('width', `${width + MARGIN}px`)
-      .attr('height', `${HEIGHT + MARGIN}px`)
-      .attr('viewBox', [0, 0, width, HEIGHT]);
-    const mesh = svg
-      .append('g')
-      .attr('class', 'mesh')
-      .attr('transform', `translate(${MARGIN}, ${MARGIN})`);
+      .attr('width', `${width}px`)
+      .attr('height', `100%`);
+    const mesh = svg.append('g').attr('class', 'mesh');
 
     const graph = data;
 
@@ -94,7 +76,7 @@ function MeshGraph({ data, showLegend, zoom }) {
       )
       .force('forceX', d3.forceX(MESH_FORCE_LAYOUT.defaultForceX))
       .force('forceY', d3.forceY(MESH_FORCE_LAYOUT.defaultForceY))
-      .force('center', d3.forceCenter(width / 2, HEIGHT / 2));
+      .force('center', d3.forceCenter(width / 2, height / 2));
 
     const link = mesh
       .append('g')
@@ -274,7 +256,7 @@ function MeshGraph({ data, showLegend, zoom }) {
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
   return (
-    <div id="chart" style={{ position: 'relative' }}>
+    <div id="chart" style={{ position: 'relative', height: '100%' }}>
       {showLegend && <Legend />}
       <Tooltip
         isNodeSelected={isNodeSelected}

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

@@ -37,9 +37,9 @@ function TopologyView() {
     d3.select('.mesh-svg').transition().call(zoom.scaleBy, 0.5);
   };
   const resetZoom = () => {
-    const margin = 15;
-    const height = 600;
-    const width = parseInt(d3.select(`#chart`).style('width'), 10) - margin;
+    const parent = d3.select('.mesh').node().parentElement;
+    const width = parent.clientWidth;
+    const height = parent.clientHeight;
     d3.select('.mesh-svg')
       .transition()
       .duration(750)
@@ -85,7 +85,7 @@ function TopologyView() {
         resetZoom={resetZoom}
       />
       <PageSection>
-        <Card>
+        <Card style={{ height: '100%' }}>
           <CardBody>
             {!isLoading && (
               <MeshGraph data={meshData} showLegend={showLegend} zoom={zoom} />

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

@@ -1,4 +1,5 @@
 /* eslint-disable-next-line import/prefer-default-export */
+export const SELECTOR = '#chart';
 export const MESH_FORCE_LAYOUT = {
   defaultCollisionFactor: 80,
   defaultForceStrength: -100,
@@ -15,7 +16,6 @@ export const DEFAULT_FONT_SIZE = '12px';
 export const LABEL_TEXT_MAX_LENGTH = 15;
 
 export const MARGIN = 15;
-export const HEIGHT = 600;
 export const FALLBACK_WIDTH = 700;
 
 export const NODE_STATE_COLOR_KEY = {

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

@@ -1,3 +1,4 @@
+import * as d3 from 'd3';
 import { InstancesAPI } from 'api';
 import { truncateString } from '../../../util/strings';
 
@@ -84,3 +85,11 @@ export const generateRandomNodes = (n) => {
   }
   return generateRandomLinks(nodes, getRandomInt(1, n - 1));
 };
+
+export function getWidth(selector) {
+  return selector ? d3.select(selector).node().clientWidth : 700;
+}
+
+export function getHeight(selector) {
+  return selector !== null ? d3.select(selector).node().clientHeight : 600;
+}