X-Git-Url: https://gerrit.onap.org/r/gitweb?a=blobdiff_plain;f=docs%2Fplatform%2Fview_inspect.rst;fp=docs%2Fplatform%2Fview_inspect.rst;h=81a9c58864b09479a46e4d5125bb7a7c688adc2d;hb=cf8a7968604dc3e0d9e71547738fa8d497e3ca55;hp=0000000000000000000000000000000000000000;hpb=6f99c3307fe05014c23720cc191a086137135651;p=aai%2Fsparky-be.git

diff --git a/docs/platform/view_inspect.rst b/docs/platform/view_inspect.rst
new file mode 100644
index 0000000..81a9c58
--- /dev/null
+++ b/docs/platform/view_inspect.rst
@@ -0,0 +1,100 @@
+.. This work is licensed under a Creative Commons Attribution 4.0 International License.
+
+Sparky - View & Inspect
+=======================
+
+*View & Inspect* Overview
+~~~~~~~~~~~~~~~~~~~~~~~~~
+
+*View & Inspect* provides a graph based view of elements within AAI. A
+single entity is the entry point into each graph, and from that base
+element a graph is generated based off relationships.
+
+.. image:: images/aai-ui-view-inspect.jpg
+   :scale: 100 %
+   :alt: alternate text
+   :align: center
+
+*View & Inspect* Features
+~~~~~~~~~~~~~~~~~~~~~~~~~
+With View & Inspect UI, users can:
+  * Search for a network or service object using any part of a key  attribute name, ID or object type
+  * Select a node matching suggestion returned in the drop-down list, and view a visual representation of its service hierarchy and related nodes
+  * View and search for multiple object types
+  * View the specific attributes of a node or any of its related nodes
+
+Navigation to *View & Inspect*
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+The *View & Inspect* view can be reached by two means:
+
+1. Main navigation menu
+2. Selecting a search result related to an entity instance (e.g. an
+   entity called readme-entity)
+
+Using *View & Inspect*
+~~~~~~~~~~~~~~~~~~~~~~
+
+*View & Inspect* is driven by using the search bar at the top of the UI
+to find and select entity instances. Once an instance has been selected,
+a request is processed in *Sparky's* backend component that generates a
+graph representation of the selected entity. The graph data is returned
+to *View & Inspect* and rendered on screen.
+
+Node Details
+^^^^^^^^^^^^
+
+Upon node selection, the selected graph node details will appear in a
+panel to the right of the graph titled, *Node Details*.
+
+Interacting with the Graph
+~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+The graph can be panned by clicking and holding empty space amongst the
+graph and moving the mouse. This will pan the entire graph. The graph
+can be zoomed in and out by using a mouse scroll wheel. Nodes in the
+graph can be select by clicking on them. Nodes in the graph can be moved
+by clicking, holding, and dragging them using the mouse.
+
+How to use *View & Inspect*
+~~~~~~~~~~~~~~~~~~~~~~~~~~~
+1. Start typing into the "Search Network" bar and search suggestions will be displayed - as below
+
+.. image:: images/view1.png
+   :height: 152px
+   :width: 250 px
+   :scale: 100 %
+   :alt: alternate text
+   :align: left
+
+.. image:: images/view2.png
+   :height: 150px
+   :width: 269 px
+   :scale: 100 %
+   :alt: alternate text
+   :align: center
+
+.. image:: images/view3.png
+   :height: 150px
+   :width: 245 px
+   :scale: 100 %
+   :alt: alternate text
+   :align: center
+
+Note: The OXM schema defines the services and resources archetypes and mappings to Java types that are used by A&AI to define the REST endpoints for reading and manipulating the inventory data. The OXM file has been annotated with searchable attributes. Sparky communicates with Synapse (data-router) to update ElasticSearch as entities are created/updated and deleted.
+
+The related objects are displayed as a graph. The attributes of the selected object are in the "Node Details" tab beside the graph display
+
+.. image:: images/view4.png
+   :height: 165px
+   :width: 298 px
+   :scale: 100 %
+   :alt: alternate text
+   :align: left
+
+.. image:: images/view5.png
+   :height: 165px
+   :width: 280 px
+   :scale: 100 %
+   :alt: alternate text
+   :align: center