Adds network UI shell wrapper

* Adds networking icons, state, and shell
* Adds network UI to the network UI shell.
* Removes jquery as a dependency of network-ui
* Fills the entire viewport with the network canvas and
    makes header panel and the right panel overlay on
    top of it

awx/network_ui/static/network_ui/Makefile

@@ -29,7 +29,7 @@ istanbul:
 
 
 simple-server: lint main lessc
-	python -m SimpleHTTPServer 8080
+	python -m SimpleHTTPServer 8081
 
 
 deploy: main

awx/network_ui/static/network_ui/src/network.ui.controller.js

@@ -17,7 +17,7 @@ var time = require('./time.js');
 var util = require('./util.js');
 var models = require('./models.js');
 var messages = require('./messages.js');
-var svg_crowbar = require('../vendor/svg-crowbar.js');
+var svg_crowbar = require('./svg-crowbar.js');
 var ReconnectingWebSocket = require('reconnectingwebsocket');
 
 var NetworkUIController = function($scope, $document, $location, $window, $http) {
@@ -26,7 +26,7 @@ var NetworkUIController = function($scope, $document, $location, $window, $http)
   var i = 0;
 
   $scope.api_token = '';
-  $scope.disconnected = false;
+  $scope.disconnected = true;
 
   $scope.topology_id = $location.search().topology_id || 0;
   // Create a web socket to connect to the backend server
@@ -77,13 +77,13 @@ var NetworkUIController = function($scope, $document, $location, $window, $http)
   $scope.last_event = null;
   $scope.cursor = {'x':100, 'y': 100, 'hidden': false};
 
-  $scope.debug = {'hidden': true};
+  $scope.debug = {'hidden': false};
   $scope.hide_buttons = false;
   $scope.hide_links = false;
   $scope.hide_interfaces = false;
   $scope.hide_groups = false;
   $scope.graph = {'width': window.innerWidth,
-                  'right_column': window.innerWidth - 300,
+                  'right_column': 300,
                   'height': window.innerHeight};
   $scope.device_id_seq = util.natural_numbers(0);
   $scope.link_id_seq = util.natural_numbers(0);
@@ -208,15 +208,28 @@ var NetworkUIController = function($scope, $document, $location, $window, $http)
     };
 
     $scope.updateScaledXY = function() {
+        if (isNaN($scope.mouseX) ||
+            isNaN($scope.mouseY) ||
+            isNaN($scope.panX) ||
+            isNaN($scope.panY) ||
+            isNaN($scope.current_scale)) {
+            return;
+        }
         $scope.scaledX = ($scope.mouseX - $scope.panX) / $scope.current_scale;
         $scope.scaledY = ($scope.mouseY - $scope.panY) / $scope.current_scale;
         $scope.view_port.x = - $scope.panX / $scope.current_scale;
         $scope.view_port.y = - $scope.panY / $scope.current_scale;
         $scope.view_port.width = $scope.graph.width / $scope.current_scale;
         $scope.view_port.height = $scope.graph.height / $scope.current_scale;
+
     };
 
     $scope.updatePanAndScale = function() {
+        if (isNaN($scope.panX) ||
+            isNaN($scope.panY) ||
+            isNaN($scope.current_scale)) {
+            return;
+        }
         var g = document.getElementById('frame_g');
         g.setAttribute('transform','translate(' + $scope.panX + ',' + $scope.panY + ') scale(' + $scope.current_scale + ')');
     };
@@ -337,7 +350,13 @@ var NetworkUIController = function($scope, $document, $location, $window, $http)
 
     // Event Handlers
 
+    $scope.normalize_mouse_event = function ($event) {
+        $event.x = $event.pageX;
+        $event.y = $event.pageY;
+    };
+
     $scope.onMouseDown = function ($event) {
+      $scope.normalize_mouse_event($event);
       if ($scope.recording) {
           $scope.send_control_message(new messages.MouseEvent($scope.client_id, $event.x, $event.y, $event.type));
       }
@@ -348,6 +367,7 @@ var NetworkUIController = function($scope, $document, $location, $window, $http)
     };
 
     $scope.onMouseUp = function ($event) {
+      $scope.normalize_mouse_event($event);
       if ($scope.recording) {
           $scope.send_control_message(new messages.MouseEvent($scope.client_id, $event.x, $event.y, $event.type));
       }
@@ -358,6 +378,7 @@ var NetworkUIController = function($scope, $document, $location, $window, $http)
     };
 
     $scope.onMouseLeave = function ($event) {
+      $scope.normalize_mouse_event($event);
       if ($scope.recording) {
           $scope.send_control_message(new messages.MouseEvent($scope.client_id, $event.x, $event.y, $event.type));
       }
@@ -367,6 +388,7 @@ var NetworkUIController = function($scope, $document, $location, $window, $http)
     };
 
     $scope.onMouseMove = function ($event) {
+      $scope.normalize_mouse_event($event);
       if ($scope.recording) {
           $scope.send_control_message(new messages.MouseEvent($scope.client_id, $event.x, $event.y, $event.type));
       }
@@ -383,6 +405,7 @@ var NetworkUIController = function($scope, $document, $location, $window, $http)
     };
 
     $scope.onMouseOver = function ($event) {
+      $scope.normalize_mouse_event($event);
       if ($scope.recording) {
           $scope.send_control_message(new messages.MouseEvent($scope.client_id, $event.x, $event.y, $event.type));
       }
@@ -393,7 +416,11 @@ var NetworkUIController = function($scope, $document, $location, $window, $http)
 
     $scope.onMouseEnter = $scope.onMouseOver;
 
-    $scope.onMouseWheel = function ($event, delta, deltaX, deltaY) {
+    $scope.onMouseWheel = function ($event) {
+      var delta = $event.originalEvent.wheelDelta;
+      var deltaX = $event.originalEvent.wheelDeltaX;
+      var deltaY = $event.originalEvent.wheelDeltaY;
+      console.log([$event, delta, deltaX, deltaY]);
       if ($scope.recording) {
           $scope.send_control_message(new messages.MouseWheelEvent($scope.client_id, delta, deltaX, deltaY, $event.type, $event.originalEvent.metaKey));
       }
@@ -1462,7 +1489,7 @@ var NetworkUIController = function($scope, $document, $location, $window, $http)
 	angular.element($window).bind('resize', function(){
 
 		$scope.graph.width = $window.innerWidth;
-	  	$scope.graph.right_column = $window.innerWidth - 300;
+	  	$scope.graph.right_column = 300;
 	  	$scope.graph.height = $window.innerHeight;
 
         $scope.update_size();

awx/network_ui/static/network_ui/src/ngTouch.js

@@ -0,0 +1,87 @@
+/*
+ * ngTouch.js v1.0.2
+ * (c) 2015 Mark Topper
+ * License: MIT
+ */
+
+"use strict";
+
+
+angular.module("ngTouch", [])
+.directive("ngTouchstart", function () {
+    return {
+        controller: ["$scope", "$element", function ($scope, $element) {
+
+            $element.bind("touchstart", onTouchStart);
+            function onTouchStart(event) {
+                var method = $element.attr("ng-touchstart");
+                $scope.$event = event;
+                $scope.$apply(method);
+            }
+
+        }]
+    };
+})
+.directive("ngTouchmove", function () {
+    return {
+        controller: ["$scope", "$element", function ($scope, $element) {
+
+            $element.bind("touchstart", onTouchStart);
+            function onTouchStart(event) {
+                event.preventDefault();
+                $element.bind("touchmove", onTouchMove);
+                $element.bind("touchend", onTouchEnd);
+            }
+            function onTouchMove(event) {
+                var method = $element.attr("ng-touchmove");
+                $scope.$event = event;
+                $scope.$apply(method);
+            }
+            function onTouchEnd(event) {
+                event.preventDefault();
+                $element.unbind("touchmove", onTouchMove);
+                $element.unbind("touchend", onTouchEnd);
+            }
+
+        }]
+    };
+})
+.directive("ngTouchend", function () {
+    return {
+        controller: ["$scope", "$element", function ($scope, $element) {
+
+            $element.bind("touchend", onTouchEnd);
+            function onTouchEnd(event) {
+                var method = $element.attr("ng-touchend");
+                $scope.$event = event;
+                $scope.$apply(method);
+            }
+
+        }]
+    };
+})
+.directive("ngTap", function () {
+    return {
+        controller: ["$scope", "$element", function ($scope, $element) {
+
+            var moved = false;
+            $element.bind("touchstart", onTouchStart);
+            function onTouchStart() {
+                $element.bind("touchmove", onTouchMove);
+                $element.bind("touchend", onTouchEnd);
+            }
+            function onTouchMove() {
+                moved = true;
+            }
+            function onTouchEnd() {
+                $element.unbind("touchmove", onTouchMove);
+                $element.unbind("touchend", onTouchEnd);
+                if (!moved) {
+                    var method = $element.attr("ng-tap");
+                    $scope.$apply(method);
+                }
+            }
+
+        }]
+    };
+});

awx/network_ui/static/network_ui/src/svg-crowbar.js

@@ -0,0 +1,250 @@
+/**
+ * @license svg-crowbar
+ * (c) 2013 The New York Times
+ * License: MIT
+ */
+function svg_crowbar () {
+  var doctype = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">';
+
+  window.URL = (window.URL || window.webkitURL);
+
+  var body = document.body;
+
+  var prefix = {
+    xmlns: "http://www.w3.org/2000/xmlns/",
+    xlink: "http://www.w3.org/1999/xlink",
+    svg: "http://www.w3.org/2000/svg"
+  };
+
+  initialize();
+
+  function initialize() {
+    var documents = [window.document],
+        SVGSources = [],
+        iframes = document.querySelectorAll("iframe"),
+        objects = document.querySelectorAll("object");
+
+    [].forEach.call(iframes, function(el) {
+      try {
+        if (el.contentDocument) {
+          documents.push(el.contentDocument);
+        }
+      } catch(err) {
+        console.log(err);
+      }
+    });
+
+    [].forEach.call(objects, function(el) {
+      try {
+        if (el.contentDocument) {
+          documents.push(el.contentDocument);
+        }
+      } catch(err) {
+        console.log(err);
+      }
+    });
+
+    documents.forEach(function(doc) {
+      var styles = getStyles(doc);
+      var newSources = getSources(doc, styles);
+      // because of prototype on NYT pages
+      for (var i = 0; i < newSources.length; i++) {
+        SVGSources.push(newSources[i]);
+      }
+    });
+    if (SVGSources.length > 1) {
+      createPopover(SVGSources);
+    } else if (SVGSources.length > 0) {
+      download(SVGSources[0]);
+    } else {
+      alert("The Crowbar couldn’t find any SVG nodes.");
+    }
+  }
+
+  function createPopover(sources) {
+    cleanup();
+
+    sources.forEach(function(s1) {
+      sources.forEach(function(s2) {
+        if (s1 !== s2) {
+          if ((Math.abs(s1.top - s2.top) < 38) && (Math.abs(s1.left - s2.left) < 38)) {
+            s2.top += 38;
+            s2.left += 38;
+          }
+        }
+      });
+    });
+
+    var buttonsContainer = document.createElement("div");
+    body.appendChild(buttonsContainer);
+
+    buttonsContainer.setAttribute("class", "svg-crowbar");
+    buttonsContainer.style["z-index"] = 1e7;
+    buttonsContainer.style.position = "absolute";
+    buttonsContainer.style.top = 0;
+    buttonsContainer.style.left = 0;
+
+
+
+    var background = document.createElement("div");
+    body.appendChild(background);
+
+    background.setAttribute("class", "svg-crowbar");
+    background.style.background = "rgba(255, 255, 255, 0.7)";
+    background.style.position = "fixed";
+    background.style.left = 0;
+    background.style.top = 0;
+    background.style.width = "100%";
+    background.style.height = "100%";
+
+    sources.forEach(function(d, i) {
+      var buttonWrapper = document.createElement("div");
+      buttonsContainer.appendChild(buttonWrapper);
+      buttonWrapper.setAttribute("class", "svg-crowbar");
+      buttonWrapper.style.position = "absolute";
+      buttonWrapper.style.top = (d.top + document.body.scrollTop) + "px";
+      buttonWrapper.style.left = (document.body.scrollLeft + d.left) + "px";
+      buttonWrapper.style.padding = "4px";
+      buttonWrapper.style["border-radius"] = "3px";
+      buttonWrapper.style.color = "white";
+      buttonWrapper.style["text-align"] = "center";
+      buttonWrapper.style["font-family"] = "'Helvetica Neue'";
+      buttonWrapper.style.background = "rgba(0, 0, 0, 0.8)";
+      buttonWrapper.style["box-shadow"] = "0px 4px 18px rgba(0, 0, 0, 0.4)";
+      buttonWrapper.style.cursor = "move";
+      buttonWrapper.textContent =  "SVG #" + i + ": " + (d.id ? "#" + d.id : "") + (d.class ? "." + d.class : "");
+
+      var button = document.createElement("button");
+      buttonWrapper.appendChild(button);
+      button.setAttribute("data-source-id", i);
+      button.style.width = "150px";
+      button.style["font-size"] = "12px";
+      button.style["line-height"] = "1.4em";
+      button.style.margin = "5px 0 0 0";
+      button.textContent = "Download";
+
+      button.onclick = function() {
+        // console.log(el, d, i, sources)
+        download(d);
+      };
+
+    });
+
+  }
+
+  function cleanup() {
+    var crowbarElements = document.querySelectorAll(".svg-crowbar");
+
+    [].forEach.call(crowbarElements, function(el) {
+      el.parentNode.removeChild(el);
+    });
+  }
+
+
+  function getSources(doc, styles) {
+    var svgInfo = [],
+        svgs = doc.querySelectorAll("svg");
+
+    styles = (styles === undefined) ? "" : styles;
+
+    [].forEach.call(svgs, function (svg) {
+
+      svg.setAttribute("version", "1.1");
+
+      var defsEl = document.createElement("defs");
+      svg.insertBefore(defsEl, svg.firstChild); //TODO   .insert("defs", ":first-child")
+      // defsEl.setAttribute("class", "svg-crowbar");
+
+      var styleEl = document.createElement("style");
+      defsEl.appendChild(styleEl);
+      styleEl.setAttribute("type", "text/css");
+
+
+      // removing attributes so they aren't doubled up
+      svg.removeAttribute("xmlns");
+      svg.removeAttribute("xlink");
+
+      // These are needed for the svg
+      if (!svg.hasAttributeNS(prefix.xmlns, "xmlns")) {
+        svg.setAttributeNS(prefix.xmlns, "xmlns", prefix.svg);
+      }
+
+      if (!svg.hasAttributeNS(prefix.xmlns, "xmlns:xlink")) {
+        svg.setAttributeNS(prefix.xmlns, "xmlns:xlink", prefix.xlink);
+      }
+
+      var source = (new XMLSerializer()).serializeToString(svg).replace('</style>', '<![CDATA[' + styles + ']]></style>');
+      var rect = svg.getBoundingClientRect();
+      svgInfo.push({
+        top: rect.top,
+        left: rect.left,
+        width: rect.width,
+        height: rect.height,
+        class: svg.getAttribute("class"),
+        id: svg.getAttribute("id"),
+        childElementCount: svg.childElementCount,
+        source: [doctype + source]
+      });
+    });
+    return svgInfo;
+  }
+
+  function download(source) {
+    var filename = "untitled";
+
+    if (source.id) {
+      filename = source.id;
+    } else if (source.class) {
+      filename = source.class;
+    } else if (window.document.title) {
+      filename = window.document.title.replace(/[^a-z0-9]/gi, '-').toLowerCase();
+    }
+
+    var url = window.URL.createObjectURL(new Blob(source.source, { "type" : "text\/xml" }));
+
+    var a = document.createElement("a");
+    body.appendChild(a);
+    a.setAttribute("class", "svg-crowbar");
+    a.setAttribute("download", filename + ".svg");
+    a.setAttribute("href", url);
+    a.style.display = "none";
+    a.click();
+
+    setTimeout(function() {
+      window.URL.revokeObjectURL(url);
+    }, 10);
+  }
+
+  function getStyles(doc) {
+    var styles = "",
+        styleSheets = doc.styleSheets;
+
+    if (styleSheets) {
+      for (var i = 0; i < styleSheets.length; i++) {
+        processStyleSheet(styleSheets[i]);
+      }
+    }
+
+    function processStyleSheet(ss) {
+      if (ss.cssRules) {
+        for (var i = 0; i < ss.cssRules.length; i++) {
+          var rule = ss.cssRules[i];
+          if (rule.type === 3) {
+            // Import Rule
+            processStyleSheet(rule.styleSheet);
+          } else {
+            // hack for illustrator crashing on descendent selectors
+            if (rule.selectorText) {
+              if (rule.selectorText.indexOf(">") === -1) {
+                styles += "\n" + rule.cssText;
+              }
+            }
+          }
+        }
+      }
+    }
+    return styles;
+  }
+
+}
+exports.svg_crowbar = svg_crowbar;

awx/network_ui/static/network_ui/src/tower.app.js

@@ -1,6 +1,5 @@
 
 var angular = require('angular');
-var ui_router = require('angular-ui-router');
 
 var tower = angular.module('tower', ['tablesUI', 'networkUI', 'ui.router']);
 
@@ -31,5 +30,4 @@ tower.config(function($stateProvider, $urlRouterProvider) {
 });
 
 exports.tower = tower;
-exports.ui_router = ui_router;