Adds acceptance doc for networking UI

* Adds gerkin feature file for networking visualization
* Adds implementation details to networking.md

docs/networking.feature

@@ -0,0 +1,76 @@
+Feature: Networking Topology Visualization
+    In order to increase the ease and understanding of network automation
+    As as network engineer
+    I want a visualization of the network topology so that I can
+    easily understand how the network topology is connected
+
+    Scenario: Blank canvas
+        Given an ansible inventory
+        When the user clicks on the network topology icon for that inventory
+        Then populate the toolbox with the data loaded from inventory
+
+    Scenario: Device Organization
+        Given an ansible inventory loaded into the canvas toolbox
+        When the user clicks and drags on a device in the inventory toolbox
+        Then place the device onto the topology canvas at the location of the user's mouse pointer
+
+    Scenario: Link Connection
+        Given an ansible inventory loaded into the canvas toolbox
+        When the user clicks and drags on a device in the inventory toolbox
+        Then automatically draw lines and circles that represent the links
+        And interfaces of the connected devices.
+
+    Scenario: Customize Layout
+        Given a canvas populated with a network topology
+        When the user clicks and drags on a device on the topology canvas
+        Then move the device to the location of the user's mouse pointer
+        And update the links and interfaces representations
+
+    Scenario: Export SVG
+        Given a canvas populated with a network topology
+        When the user clicks on the Export SVG button
+        Then capture the current view of the canvas
+        And download an SVG file of the canvas to the users computer
+
+    Scenario: Export YAML
+        Given a canvas populated with a network topology
+        When the user clicks on the Export YAML button
+        Then capture the state of the current view of the canvas
+        And download a YAML file that represents the data to the user's computer
+
+    Scenario: Pan
+        Given a canvas populated with a network topology
+        When the user clicks and drags on the background
+        Then move the viewport of the virtual canvas to match the user's mouse movement
+
+    Scenario: Zoom
+        Given a canvas populated with a network topology
+        When the user scrolls their mousewheel or clicks and drags on the zoom widget
+        Then scale the viewport of the virtual canvas to the zoom level reflected on the zoom widget
+
+    Scenario: Hide information when zooming out
+        Given a canvas populated with a network topology
+        When the user zooms out via mouse wheel or zoom widget
+        Then hide low-level information to provide a high-level overview as the zoom level changes
+
+    Scenario: Show more information when zooming in
+        Given a canvas populated with a network topology
+        When the user zooms in via mouse wheel or zoom widget
+        Then show more low-level information to provide more detail for the devices that are in view on the virtual canvas
+
+    Scenario: Device Detail
+        Given a canvas populated with a network topology
+        When the user clicks on show details device context menu button
+        Then show the device details including name, description, and host vars
+
+    Scenario: Remove Device
+        Given a canvas populated with a network topology
+        When the user clicks on remove device context menu button
+        Then remove the device and connected links from the canvas
+        And return the device to the inventory toolbox
+
+    Scenario: Search by Device Name
+        Given a canvas populated with a network topology
+        When the user types the device name or selects it from a device drop down list
+        Then position the viewport on the virtual canvas over the device with that name
+

docs/networking/README.md

@@ -0,0 +1,100 @@
+
+
+Finite State Machine Designs
+============================
+
+This directory contains the finite state machine designs that were used to
+generate the skeleton of the javascript implementations and can be used to
+check that the implementations still match the designs.
+
+
+**Machine Readable FSM Schema**
+
+The machine readable FSM schema contains three top-level elements: `name`, `states`, and `transitions`.
+* The `name` element is a string.
+* The `states` element contains a list of `state` elements which have attributes `id`, `label`, and `x`, and `y`.
+* The `transitions` element contains a list of `transition` elements which have attributes `from_state`, `to_state`, and `label`.
+
+
+**Design Diagrams**
+
+The diagrams below are visual representations of the finite state machine designs in this directory.
+The equivalent machine readable representations are linked as well.
+
+---
+
+
+**Button FSM**
+* See: button.yml
+
+The button FSM describes how a button works. The key insight here is that a button is not
+clicked if the mouse is not over the button on both the `MouseDown` and `MouseUp` events. Moving
+the mouse off the button before `MouseUp` is not a click.
+
+![Button FSM](button.png)
+
+---
+
+**Buttons FSM**
+* See: buttons.yml
+
+The buttons FSM distributes events to the buttons which each have their own FSM.
+
+![Buttons FSM](buttons.png)
+
+---
+
+**Hot Keys FSM**
+* See: hotkeys.yml
+
+The hot keys FSM handles key events and generates new events like `NewLink` to implement
+hot keys.
+
+![Hot Keys FSM](hotkeys.png)
+
+---
+
+**Mode FSM**
+* See: mode.yml
+
+The mode FSM controls the overall mode of the network UI application.
+
+![Mode](mode.png)
+
+---
+
+**Move FSM**
+* See: move.yml
+
+The move FSM controls placement of devices as well as editing the device labels.
+
+![Move](move.png)
+
+---
+
+**Time FSM**
+* See: time.yml
+
+The time FSM controls undo/redo functionality of the network UI.
+
+![Time](time.png)
+
+---
+
+**Toolbox FSM**
+* See: toolbox.yml
+
+The toolbox FSM controls the drag-and-drop toolboxes and allow placement of new devices, applications,
+racks, and sites onto the canvas.
+
+![Toolbox](toolbox.png)
+
+---
+
+**View FSM**
+* See: view.yml
+
+The view FSM controls the panning and scaling of the the virtual canvas through clicking-and-dragging
+of the background and scrolling the mousewheel.
+
+![View](view.png)

docs/networking/animation.yml

@@ -0,0 +1,29 @@
+diagram_id: 58
+name: animation_fsm
+states:
+- id: 4
+  label: Cancelled
+  x: 590
+  y: 602
+- id: 3
+  label: Completed
+  x: 225
+  y: 604
+- id: 2
+  label: Running
+  x: 418
+  y: 362
+- id: 1
+  label: Start
+  x: 454
+  y: 158
+transitions:
+- from_state: Running
+  label: onAnimationCancelled
+  to_state: Cancelled
+- from_state: Running
+  label: onAnimationCompleted
+  to_state: Completed
+- from_state: Start
+  label: start
+  to_state: Running

docs/networking/button.yml

@@ -0,0 +1,43 @@
+diagram_id: 66
+name: 'button_fsm'
+finite_state_machine_id: 12
+states:
+- id: 3
+  label: Clicked
+  x: 331
+  y: 568
+- id: 5
+  label: Disabled
+  x: 719
+  y: 283
+- id: 4
+  label: Pressed
+  x: 606
+  y: 563
+- id: 1
+  label: Ready
+  x: 471
+  y: 376
+- id: 2
+  label: Start
+  x: 468
+  y: 170
+transitions:
+- from_state: Clicked
+  label: start
+  to_state: Ready
+- from_state: Disabled
+  label: onEnable
+  to_state: Ready
+- from_state: Pressed
+  label: onMouseUp
+  to_state: Clicked
+- from_state: Ready
+  label: onDisable
+  to_state: Disabled
+- from_state: Ready
+  label: onMouseDown
+  to_state: Pressed
+- from_state: Start
+  label: start
+  to_state: Ready

docs/networking/buttons.yml

@@ -0,0 +1,28 @@
+app: buttons_fsm
+finite_state_machine_id: 7
+panX: 133
+panY: 41
+scaleXY: 1
+states:
+- label: Start
+  size: 100
+  x: 392
+  y: 88
+- label: Ready
+  size: 100
+  x: 392
+  y: 281
+- label: ButtonPressed
+  size: 100
+  x: 394
+  y: 491
+transitions:
+- from_state: Start
+  label: start
+  to_state: Ready
+- from_state: Ready
+  label: onMouseDown
+  to_state: ButtonPressed
+- from_state: ButtonPressed
+  label: onMouseUp
+  to_state: Ready

docs/networking/details.panel.yml

@@ -0,0 +1,26 @@
+diagram_id: 70
+finite_state_machine_id: 21
+name: diagram
+states:
+- id: 1
+  label: Start
+  x: 590
+  y: 233
+- id: 2
+  label: Collapsed
+  x: 594
+  y: 490
+- id: 3
+  label: Expanded
+  x: 919
+  y: 491
+transitions:
+- from_state: Start
+  label: start
+  to_state: Collapsed
+- from_state: Expanded
+  label: onDetailsPanelClose
+  to_state: Collapsed
+- from_state: Collapsed
+  label: onDetailsPanel
+  to_state: Expanded

docs/networking/device.detail.yml

@@ -0,0 +1,19 @@
+finite_state_machine_id: 19
+name: device_detail_fsm
+states:
+- id: 2
+  label: Ready
+  x: 517
+  y: 588
+- id: 3
+  label: Disable
+  x: 770
+  y: 455
+- id: 1
+  label: Start
+  x: 507
+  y: 336
+transitions:
+- from_state: Start
+  label: start
+  to_state: Ready