--- /dev/null
+.. This work is licensed under a Creative Commons Attribution 4.0 International License.
+
+Sparky - Browse
+=======================
+
+*Browse* Overview
+~~~~~~~~~~~~~~~~~~~~~~~~~
+
+*Browse* provides a way to easily browse the inventory items in A&AI
+
+.. image:: images/aai-ui-browse.JPG
+ :scale: 100 %
+ :alt: alternate text
+ :align: center
+
+*Browse* Features
+~~~~~~~~~~~~~~~~~~~~~~~~~
+With Browse UI, users can:
+ * Click on a tile for a configured node-type and view the instance data
+ * The user can view the information on the subsequent page in a paginated format (50 results per page)
+ * The user can filter down the results by attributes on the top of the page (exact string matching only)
+ * The user can download their results to xslx (500 results at a time)
+ * The user can opt to download a range of pages to download to xslx
+ * The user can view results in card-based format
+ * The user can view results in a tabular-based format
+ * The user can choose a defaulted format (saved in local storage)
+ * The user can view & traverse relationships of an element
+ * The user can build a query giving the element and all related elements (1 hop) by clicking >>BYOQ
+
+Navigation to *Browse*
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+The *Browse* view can be reached by clicking on the Browse icon from the hamburger menu
+
+.. image:: images/browse-hamburger.JPG
+ :scale: 100 %
+ :alt: alternate text
+ :align: center
+
+How to use *Browse*
+~~~~~~~~~~~~~~~~~~~~~~~~~~~
+1. On the Browse page click a desired node type to view, in this case I chose generic virtual network functions
+
+.. image:: images/browse-view-1.JPG
+ :scale: 100 %
+ :alt: alternate text
+ :align: center
+
+2. On the resulting page you can see the results in card format
+
+.. image:: images/browse-view-2.JPG
+ :scale: 100 %
+ :alt: alternate text
+ :align: center
+
+3. Or in tabular format
+
+.. image:: images/browse-view-3.JPG
+ :scale: 100 %
+ :alt: alternate text
+ :align: center
+
+4. A user could view the relationships of an element on the card format by clicking the relationships button,
+
+Clicking a relationship will traverse that relationship to the item
+
+.. image:: images/browse-view-4.JPG
+ :scale: 100 %
+ :alt: alternate text
+ :align: center
+
+5. A user could view the relationships of an element on the tabular format by clicking the + to expand the row
+
+Clicking a relationship will traverse that relationship to the item
+
+.. image:: images/browse-view-5.JPG
+ :scale: 100 %
+ :alt: alternate text
+ :align: center
+
+6. A user could filter their results by adding filters at the top of the screen
+
+.. image:: images/browse-view-7.JPG
+ :scale: 100 %
+ :alt: alternate text
+ :align: center
+
+6. A user could build a query giving the element and all related elements (1 hop) by clicking >>BYOQ
+
+.. image:: images/browse-view-8.JPG
+ :scale: 100 %
+ :alt: alternate text
+ :align: center
+
+7. A user could switch between view types using the blue and grey buttons here, they can also set their default view here
+
+.. image:: images/browse-view-9.JPG
+ :scale: 100 %
+ :alt: alternate text
+ :align: center
--- /dev/null
+.. This work is licensed under a Creative Commons Attribution 4.0 International License.
+
+Sparky - BYOQ
+=======================
+
+*BYOQ* Overview
+~~~~~~~~~~~~~~~~~~~~~~~~~
+
+*BYOQ* provides a way for users to build their own traversal queries in A&AI
+
+.. image:: images/aai-ui-byoq.jpg
+ :scale: 100 %
+ :alt: alternate text
+ :align: center
+
+*BYOQ* Features
+~~~~~~~~~~~~~~~~~~~~~~~~~
+With BYOQ UI, users can:
+ * Create queries to extract information using typeahead help functionality
+ * The user can view help menus on the DSL syntax
+ * The user can view the information in a paginated format (50 results per page)
+ * The user can filter down the results in the tabular view on the column headers (exact string matching only)
+ * The user can download their results to xslx (500 results at a time)
+ * The user can opt to download a range of pages to download to xslx
+ * The user can view results in card-based format
+ * The user can view results in a tabular-based format
+ * The user can view results in a visual format
+ * The user can pinch/zoom in the visual format and double click on the elements to get additional info in a modal
+ * The user can choose a defaulted format (saved in local storage)
+ * The user can view & traverse relationships on an element
+ * The user can build a query giving the element and all related elements (1 hop) by clicking >>BYOQ
+
+Navigation to *BYOQ*
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+The *BYOQ* view can be reached by clicking on the BYOQ item in the hamburger menu
+
+.. image:: images/byoq-hamburger.JPG
+ :scale: 100 %
+ :alt: alternate text
+ :align: center
+
+How to use *BYOQ*
+~~~~~~~~~~~~~~~~~~~~~~~~~~~
+1. On the BYOQ page click in the dsl query input box and start creating a query
+
+Typeahead will help with creating connections or filters as the query is being typed out (it can be configured off)
+
+In this case I started from a generic-vnf with a specific filter and selected a few elements directly connected to it
+and ran the query
+
+The results can be seen below in card format
+
+.. image:: images/byoq-view-1.JPG
+ :scale: 100 %
+ :alt: alternate text
+ :align: center
+
+2. We have the option to view the output in tabular format
+
+.. image:: images/byoq-view-2.JPG
+ :scale: 100 %
+ :alt: alternate text
+ :align: center
+
+3. As well as visual graph format
+
+.. image:: images/byoq-view-3.JPG
+ :scale: 100 %
+ :alt: alternate text
+ :align: center
+
+4. You can pinch/zoom & drag/drop in the visual view and double clicking an item brings up its details in a modal
+
+.. image:: images/byoq-view-4.JPG
+ :scale: 100 %
+ :alt: alternate text
+ :align: center
+
+5. The user can access the syntax help documentation from the accordions
+
+.. image:: images/byoq-view-5.JPG
+ :scale: 100 %
+ :alt: alternate text
+ :align: center
--- /dev/null
+.. This work is licensed under a Creative Commons Attribution 4.0 International License.
+
+Sparky - BYOQ Builder
+=======================
+
+*BYOQ Builder* Overview
+~~~~~~~~~~~~~~~~~~~~~~~~~
+
+*BYOQ Builder* provides a way to easily create complex queries through a visual builder
+
+.. image:: images/aai-ui-byoq-builder.jpg
+ :scale: 100 %
+ :alt: alternate text
+ :align: center
+
+*BYOQ Builder* Features
+~~~~~~~~~~~~~~~~~~~~~~~~~
+With BYOQ Builder UI, users can:
+ * Click on a tile for a configured node-type and view the instance data
+
+Navigation to *BYOQ Builder*
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+The *BYOQ Builder* view can be reached by clicking on the BYOQ Builder hamburger menu item
+
+.. image:: images/byoq-builder-hamburger.JPG
+ :scale: 100 %
+ :alt: alternate text
+ :align: center
+
+How to use *BYOQ Builder*
+~~~~~~~~~~~~~~~~~~~~~~~~~~~
+1. On the BYOQ Builder page click 'Start Building' to open the modal with all node types, to choose a starting node for your query
+
+.. image:: images/byoq-builder-view-1.JPG
+ :scale: 100 %
+ :alt: alternate text
+ :align: center
+
+2. In this example I chose generic-vnf and decided to filter on one of it's properties by clicking options and entering a filter
+
+.. image:: images/byoq-builder-view-2.JPG
+ :scale: 100 %
+ :alt: alternate text
+ :align: center
+
+The little blue + box allows for adding OR filter values (but I don't use it here)
+
+.. image:: images/byoq-builder-view-3.JPG
+ :scale: 100 %
+ :alt: alternate text
+ :align: center
+
+3. Scroll the modal to the bottom and click submit, you will see the element you chose and a DSL query being built
+
+.. image:: images/byoq-builder-view-4.JPG
+ :scale: 100 %
+ :alt: alternate text
+ :align: center
+
+4. From here you can add, remove, or edit via the icons on the node, in this case I choose + for add check a few more nodes in my query path
+
+.. image:: images/byoq-builder-view-5.JPG
+ :scale: 100 %
+ :alt: alternate text
+ :align: center
+
+5. After submitting that I can see the query being built at the top and it showing the same visually
+
+.. image:: images/byoq-builder-view-6.JPG
+ :scale: 100 %
+ :alt: alternate text
+ :align: center
+
+6. You can continue this process of adding/deleting/editing and adding filters until you have the final query for your desired output.
+
+At this point you would click Run Query or Manually Edit and Run Query if you want to make manual edits.
+
+After this is done, your qury will be ran and results returned.
+
+.. image:: images/byoq-builder-view-7.JPG
+ :scale: 100 %
+ :alt: alternate text
+ :align: center
+
+.. image:: images/byoq-builder-view-8.JPG
+ :scale: 100 %
+ :alt: alternate text
+ :align: center
+
:maxdepth: 2
architecture.rst
- view_inspect.rst
- vnfs.rst
+ browse.rst
+ specialized.rst
+ byoq.rst
+ byoqBuilder.rst
installation.rst
* camel
* http | ssl
- * portal
* fe-dev | fe-prod
* oxm-default | oxm-override
- * resources | gizmo
- * sync
+ * resources
* oxm-schema-dev | oxm-schema-prod
+ * aai-proxy
+ * gizmo (retired)
+ * sync (retired)
+ * portal (partially retired, only use if needing aaf auth and portal integration)
Profile descriptions:
* camel - Enables spring-boot camel routing rules
* http - Sets Sparky's communication protocol to HTTP
* ssl - Sets Sparky's communication protocol to HTTPS
- * portal - Adds ONAP portal processing to Sparky's flow
+ * portal - Adds ONAP portal processing to Sparky's flow (currently removed from oom)
* fe-dev - Exposes the static folder for UI development when running Sparky locally (target/static)
* fe-prod - Exposes the standard path for the UI in the docker container
* oxm-default - Sets the default version and version list of OXM files to be used
* oxm-override - Sets a custom version and version list of OXM files to be used
* resources - Sparky will use aai-resources (microservice) as the primary source of inventory information
- * gizmo - Sparky will use gizmo (microservice) as the primary source of inventory information
- * sync - Will cause Sparky to run any configured synchronizers to populate index data in a single large transaction
+ * gizmo - Sparky will use gizmo (microservice) as the primary source of inventory information (retired)
+ * sync - Will cause Sparky to run any configured synchronizers to populate index data in a single large transaction (retired)
* oxm-schema-dev - Sets the location to find the OXM files within a development environment
* oxm-schema-prod - Sets the location to find the OXM files within a deployed environment
+ * aai-proxy - Proxies call made from the UI to resources or traversal microservices
The idea behind the profiles is to create a simple approach to adjusting runtime behavior without needing to edit large xml files (see **Spring Beans** below). Ahead of running Sparky, some of the profiles will need to be edited to work within your environment (e.g. set where your custom OXM files need to be loaded from).
npm start
-By default the local instance of the UI will be served to ``http(s)://localhost:8001/``.
+By default the local instance of the UI will be served to ``http(s)://localhost:8001/#/browse``.
+
+If deploying through OOM use {host}:30220/services/aai/webapp/index.html#/browse
Deploy sparky-fe
================
--- /dev/null
+.. This work is licensed under a Creative Commons Attribution 4.0 International License.
+
+Sparky - Specialized Search
+=======================
+
+*Specialized Search* Overview
+~~~~~~~~~~~~~~~~~~~~~~~~~
+
+*Specialized Search* provides a way to easily filter the inventory items in A&AI
+
+.. image:: images/aai-ui-specialized-search.jpg
+ :scale: 100 %
+ :alt: alternate text
+ :align: center
+
+*Specialized Search* Features
+~~~~~~~~~~~~~~~~~~~~~~~~~
+With Specialized Search UI, users can:
+ * Click on a radio button for a configured node-type and add filters to run and view instance data
+ * The user can view the information on the subsequent page in a paginated format (50 results per page)
+ * The user can filter down the results by attributes on the top of the page (exact string matching only)
+ * The user can download their results to xslx (500 results at a time)
+ * The user can opt to download a range of pages to download to xslx
+ * The user can view results in card-based format
+ * The user can view results in a tabular-based format
+ * The user can choose a defaulted format (saved in local storage)
+ * The user can view relationships of an element
+ * The user can build a query giving the element and all related elements (1 hop) by clicking >>BYOQ
+
+Navigation to *Specialized Search*
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+The *Specialized Search* view can be reached by clicking on the hamburger menu item Specialized Search
+
+.. image:: images/specialized-hamburger.JPG
+ :scale: 100 %
+ :alt: alternate text
+ :align: center
+
+How to use *Specialized Search*
+~~~~~~~~~~~~~~~~~~~~~~~~~~~
+1. On Specialized Search a user can select an element type
+
+.. image:: images/specialized-search-1.JPG
+ :scale: 100 %
+ :alt: alternate text
+ :align: center
+
+2. Then add the desired filter(s) with the input fields in the center, by choosing the attribute key from the dropdown,
+entering a value and clicking add filter. Once the filter is added it will be present as a pill. Filters can be removed
+by clicking the X on the pill
+
+.. image:: images/specialized-search-2.JPG
+ :scale: 100 %
+ :alt: alternate text
+ :align: center
+
+3. When the desired filters are added, a user can hit run to access the results. The subsequent page will be the same as
+the resulting page in the browse documentation, just with the filters added. For more information on that screen, please
+view the documentation on browse.
+
+++ /dev/null
-.. 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
+++ /dev/null
-.. This work is licensed under a Creative Commons Attribution 4.0 International License.
-
-Sparky - VNFs
-==============
-
-*VNFs* Overview
-~~~~~~~~~~~~~~~
-
-*VNFs* is an aggregation-based view that provides aggregate counts of
-VNFs based off of provisioning status and orchestration status.
-
-*VNFs* Features
-~~~~~~~~~~~~~~~
-With VNFs UI, users can:
- * Search for generic-vnfs by attribute value(s) specified in the search box using suggested search terms.
- * View search results aggregated to display:
- - A count of the total VNFs returned by the search
- - A count of the VNFs for each prov-status values.
- * Filter out data to reduce the amount of data displayed to the user. Users can filter data based on:
- - Orchestration status
- - Provisioning status
- - Network function type
- - Network function role
-
-Navigation to *VNFs*
-~~~~~~~~~~~~~~~~~~~~
-
-1. Main navigation menu
-2. Selecting a search result related to an aggregation result (e.g. and
- VNFs)
-
-Using *VNFs*
-~~~~~~~~~~~~
-
-*VNFs* is driven by using the search bar at the top of the UI to find
-and select aggregation queries. Once selected, the aggregation queries
-will be sent to the *Sparky* backend component for processing. When a
-result set has been determined *VNFs* will render the data - as below:
-
-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 suggestible attributes. Sparky communicates with Synapse (data-router) to update ElasticSearch as entities are created/updated and deleted.
-
-
-.. image:: images/view6.jpg
- :height: 150px
- :width: 270 px
- :scale: 100 %
- :alt: alternate text
- :align: center
Code Review / aai / sparky-be.git / commitdiff
