From 7d61d11e39cfea1c75931689e6bbfe0983e7816a Mon Sep 17 00:00:00 2001
From: JUDIT GRESKOVITS <juditgreskovits@gmail.com>
Date: Thu, 6 Apr 2017 21:44:54 +0100
Subject: [PATCH] Fix topology width

---
 ui/src/components/topology/topology-graph.js | 22 +++++++++++++-------
 1 file changed, 14 insertions(+), 8 deletions(-)

diff --git a/ui/src/components/topology/topology-graph.js b/ui/src/components/topology/topology-graph.js
index b7257508..2eba14a4 100644
--- a/ui/src/components/topology/topology-graph.js
+++ b/ui/src/components/topology/topology-graph.js
@@ -14,11 +14,6 @@ const StyledSvg = styled.svg`
   height: 1400px;
 `;
 
-const svgSize = {
-  width: 2400,
-  height: 1400
-};
-
 let dragInfo = {
   dragging: false,
   nodeId: null,
@@ -33,6 +28,7 @@ class TopologyGraph extends React.Component {
       return acc;
     }, []);
 
+    const svgSize = this.getSvgSize();
     const simulationData = createSimulation(
       services,
       svgSize//,
@@ -106,9 +102,18 @@ class TopologyGraph extends React.Component {
   }*/
 
   getSvgSize() {
-    return document.getElementById('topology-svg') ?
-      document.getElementById('topology-svg').getBoundingClientRect() :
-      svgSize;
+    if(document.getElementById('topology-svg')) {
+      return (
+        document.getElementById('topology-svg').getBoundingClientRect()
+      );
+    }
+    const windowWidth = window.innerWidth
+      || document.documentElement.clientWidth
+      || document.body.clientWidth;
+    return {
+      width: windowWidth - 2*24,
+      height: 1400
+    };
   }
 
   constrain(x, y, children=false) {
@@ -153,6 +158,7 @@ class TopologyGraph extends React.Component {
       nodes.reduce((acc, simNode, index) =>
         simNode.id === nodeId ? simNode : acc, {});
 
+    const svgSize = this.getSvgSize();
     const nodesData = services.map((service, index) => {
       const sNode = service.id === 'consul' ? {
         x: svgSize.width - Constants.nodeSize.width,