Wraps long names of devices in the network UI at 25 characters

awx/ui/client/src/network-ui/default.partial.svg

@@ -49,8 +49,10 @@
           filter="url(#background)"
           text-anchor="middle"
           x="0"
-          y="73"> {{item.name}}
+          y="73"> <tspan x="0" dy="20" ng-repeat="chunk in item.name|chunk:25">{{chunk}}</tspan>
+    </text>
+    <text class="NetworkUI__device-text" filter="url(#background)" text-anchor="middle" x="0" y="73">
+         <tspan x="0" dy="20" ng-repeat="chunk in item.name|chunk:25">{{chunk}}</tspan>
     </text>
-    <text class="NetworkUI__device-text" filter="url(#background)" text-anchor="middle" x="0" y="73">{{item.name}}{{item.edit_label?'_':''}}</text>
     </g>
 </g>

awx/ui/client/src/network-ui/host.partial.svg

@@ -77,13 +77,15 @@
             		c-0.4,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6C34.2,14.7,33.9,14.9,33.6,14.9z"/>
             </g>
         </g>
-        <g>
+        <g ng-show="item.icon || current_scale > 0.5">
             <text ng-attr-class="{{item.selected && ! item.edit_label ? 'NetworkUI__host-text--selected' : 'NetworkUI--hidden'}}"
                   filter="url(#background)"
                   text-anchor="middle"
                   x="0"
-                  y="50"> {{item.name}}
+                  y="50"> <tspan x="0" dy="20" ng-repeat="chunk in item.name|chunk:25">{{chunk}}</tspan>
+            </text>
+            <text class="NetworkUI__host-text" filter="url(#background)" text-anchor="middle" x="0" y="50">
+                 <tspan x="0" dy="20" ng-repeat="chunk in item.name|chunk:25">{{chunk}}</tspan>
             </text>
-            <text class="NetworkUI__host-text" filter="url(#background)" text-anchor="middle" x="0" y="50">{{item.name}}{{item.edit_label?'_':''}}</text>
         </g>
     </g>

awx/ui/client/src/network-ui/network.ui.app.js

@@ -19,6 +19,7 @@ var inventoryToolbox = require('./inventory.toolbox.directive.js');
 var debug = require('./debug.directive.js');
 var test_results = require('./test_results.directive.js');
 var awxNetworkUI = require('./network.ui.directive.js');
+var util = require('./util.js');
 
 export default
     angular.module('networkUI', [
@@ -27,6 +28,11 @@ export default
         networkDetailsDirective.name,
         networkZoomWidget.name
     ])
+    .filter('chunk', function () {
+        return function(input, size) {
+            return util.chunkSubstr(input, size);
+        };
+    })
     .controller('NetworkUIController', NetworkUIController.NetworkUIController)
     .directive('awxNetCursor', cursor.cursor)
     .directive('awxNetDebug', debug.debug)

awx/ui/client/src/network-ui/router.partial.svg

@@ -75,7 +75,10 @@
                   filter="url(#background)"
                   text-anchor="middle"
                   x="0"
-                  y="70"> {{item.name}}</text>
+                  y="70"> <tspan x="0" dy="20" ng-repeat="chunk in item.name|chunk:25">{{chunk}}</tspan>
-            <text class="NetworkUI__router-text" filter="url(#background)" text-anchor="middle" x="0" y="70">{{item.name}}{{item.edit_label?'_':''}}</text>
+            </text>
+            <text class="NetworkUI__router-text" filter="url(#background)" text-anchor="middle" x="0" y="70">
+                 <tspan x="0" dy="20" ng-repeat="chunk in item.name|chunk:25">{{chunk}}</tspan>
+            </text>
         </g>
     </g>

awx/ui/client/src/network-ui/switch.partial.svg

@@ -77,7 +77,10 @@
                   filter="url(#background)"
                   text-anchor="middle"
                   x="0"
-                  y="70"> {{item.name}}</text>
+                  y="70"> <tspan x="0" dy="20" ng-repeat="chunk in item.name|chunk:25">{{chunk}}</tspan>
-            <text class="NetworkUI__switch-text" filter="url(#background)" text-anchor="middle" x="0" y="70">{{item.name}}{{item.edit_label?'_':''}}</text>
+            </text>
+            <text class="NetworkUI__switch-text" filter="url(#background)" text-anchor="middle" x="0" y="70">
+                 <tspan x="0" dy="20" ng-repeat="chunk in item.name|chunk:25">{{chunk}}</tspan>
+            </text>
         </g>
     </g>

awx/ui/client/src/network-ui/util.js

@@ -180,3 +180,15 @@ function pCase(x, y, x1, y1, x2, y2) {
   return param;
 }
 exports.pCase = pCase;
+
+function chunkSubstr(str, size) {
+    const numChunks = Math.ceil(str.length / size);
+    const chunks = new Array(numChunks);
+
+    for (let i = 0, o = 0; i < numChunks; ++i, o += size) {
+        chunks[i] = str.substr(o, size);
+    }
+
+    return chunks;
+}
+exports.chunkSubstr = chunkSubstr;