imported>Jason.nicholls: moved appboard/2.4/builder/widgets/topology/SR example to appboard/2.4/builder/widgets/topology/selfref example

2014-01-20T13:16:36Z

moved appboard/2.4/builder/widgets/topology/SR example to appboard/2.4/builder/widgets/topology/selfref example

← Older revision	Revision as of 13:16, 20 January 2014
(No difference)

imported>David.moore at 16:29, 13 January 2014

2014-01-13T16:29:07Z

← Older revision		Revision as of 16:29, 13 January 2014
Line 1:		Line 1:
	{{DISPLAYTITLE:Topology Widget Self-Referential Example}}		{{DISPLAYTITLE:Topology Widget Self-Referential Example}}
	[[Category:AppBoard 2.4]]		[[Category:AppBoard 2.4]]

			The following is a step by step “hands on” example of using the Topology Widget:


	== Create a new Data Source ==		== Create a new Data Source ==

imported>David.moore at 16:20, 13 January 2014

2014-01-13T16:20:38Z

← Older revision		Revision as of 16:20, 13 January 2014
Line 1:		Line 1:
	== Topology Widget ~~Usage Example #2:~~ Self-Referential ~~Topology ==~~		{{DISPLAYTITLE:Topology Widget Self-Referential Example}}
			[[Category:AppBoard 2.4]]

			== Create a new Data Source ==
	=== Create a new Data Source ===

	# Click the '''Data Sources''' toolbar option on the left.		# Click the '''Data Sources''' toolbar option on the left.
Line 21:		Line 21:


	=== Create a new Relationship Model ===		== Create a new Relationship Model ==

	# Navigate to the '''Data Collections''' page and switch the '''Collection Type''' to the '''Relationship''' mode by clicking on the toggle switch.		# Navigate to the '''Data Collections''' page and switch the '''Collection Type''' to the '''Relationship''' mode by clicking on the toggle switch.
Line 48:		Line 48:


	=== Creating a Root-level Data Collection ===		== Creating a Root-level Data Collection ==

	# On the '''Data Collections''' page, switch the '''Collection Type''' to the '''Flat Collection''' mode by clicking on the toggle switch.		# On the '''Data Collections''' page, switch the '''Collection Type''' to the '''Flat Collection''' mode by clicking on the toggle switch.
Line 59:		Line 59:


	=== Creating a Stack ===		== Creating a Stack ==

	# Navigate to the '''Stacks & Boards''' page.		# Navigate to the '''Stacks & Boards''' page.
Line 65:		Line 65:


	=== Creating the Topology Widget ===		== Creating the Topology Widget ==

	# Navigate to the '''Widgets''' page and click the '''Add''' button to open the '''Widget Wizard'''.		# Navigate to the '''Widgets''' page and click the '''Add''' button to open the '''Widget Wizard'''.
Line 78:		Line 78:


	=== Viewing the Topology Widget ===		== Viewing the Topology Widget ==

	# Navigate to the '''Builder''' page and click on the tab for the stack called '''TopologyExample'''.		# Navigate to the '''Builder''' page and click on the tab for the stack called '''TopologyExample'''.
	# Use the mouse to drag (click and drag) and zoom in or out (mouse wheel up or down) on the widget as needed.		# Use the mouse to drag (click and drag) and zoom in or out (mouse wheel up or down) on the widget as needed.
	# Different nodes in the diagram can be clicked to perform a drill down and see connections at different levels in the hierarchy.		# Different nodes in the diagram can be clicked to perform a drill down and see connections at different levels in the hierarchy.

imported>David.moore: Created page with '== Topology Widget Usage Example #2: Self-Referential Topology == === Create a new Data Source === # Click the '''Data Sources''' toolbar option on the left. # Click the '''A…'

2014-01-13T16:18:57Z

Created page with '== Topology Widget Usage Example #2: Self-Referential Topology == === Create a new Data Source === # Click the '''Data Sources''' toolbar option on the left. # Click the '''A…'

New page

== Topology Widget Usage Example #2: Self-Referential Topology ==

=== Create a new Data Source ===

# Click the '''Data Sources''' toolbar option on the left.
# Click the '''Add''' button.
# Give the Data Source the name "TopologyExample" and choose the adapter type of '''File''' and then select '''CSV Directory''' .
# Click the '''Add Data Source''' button and you will be presented with a new Wizard.
# On the '''Connect''' wizard page use ''${application.home}/data/TopologyExample'' as the directory value and leave all the other configuration options alone.
# Click '''Next''' and you will be shown all the CSV Tables that were found in that directory.
# '''[IMPORTANT]''' For ''NetworkNodes'', click the '''Edit''' button and select ''UID'' as the primary key. Click the '''OK''' button.
# '''[IMPORTANT]''' For ''NetworkTopology'', click the '''Edit''' button and select both ''toID'' and ''fromID'' as the primary keys. Click the '''OK''' button.
# Click the '''Next''' button and you will be shown the '''Associate''' page.
# Click the '''Add Association''' button in the bottom left of the screen.
# For the association that appears, in the left dropdown list, select ''TopologyExample.NetworkTopology.toID''. Leave the middle dropdown list as ''EQUALS''. In the right dropdown list, select ''TopologyExample.NetworkNodes.UID''.
# For the name, if it is not entered automatically, enter "NetworkNodes". Set the '''Type''' as ''One to One''. Leave '''Publish''' as ''Always''.
# Click '''Add Association''' to add another association.
# In the left dropdown list, select ''TopologyExample.NetworkNodes.UID''. Leave the middle dropdown as ''EQUALS''. In the right dropdown list, select ''TopologyExample.NetworkTopology.fromID''.
# For the name, if it is not entered automatically, enter "NetworkTopology". Set the '''Type''' as ''One to Many'' and leave '''Publish''' as ''Always''. Click '''Finish''' to close the Wizard.[[Image:SRTopology_DSAssociate.PNG|thumb|center|700px|Associations]]

=== Create a new Relationship Model ===

# Navigate to the '''Data Collections''' page and switch the '''Collection Type''' to the '''Relationship''' mode by clicking on the toggle switch.
# Click the '''Add''' button to launch the relationship model editor.
# For the '''Model Name''', enter "TopologyExampleModel".
# First we need to add the “root” node type for our model. Click the '''Add Source''' button and pick ''TopologyExample.NetworkNodes''
# Next we want to add relationships to this root node. Click the '''green “+” button'''. In the dialog that appears, for the '''Relationship Target''' dropdown list, select ''NetworkTopology.NetworkNodes''. Leave the '''Relationship Type''' as ''Child''. Click '''Finish'''.[[Image:SRTopology_RME.PNG|thumb|center|700px|Relation Model Editor]]
# To describe the data with appearance rules, click the '''yellow “/” button'''.
# In the window that appears, on the '''Label''' page, select the ''Name'' token to use it in the '''Label'''.
# Click the '''Color''' tab and click the '''Add''' button to add a '''Color Filter'''.
# In the window that appears, change the name to "Status Rule".
# Click '''Add Color''. Change the color to ''red'' and set the '''Property''' to ''Status''.
# Leave the '''Comparator''' as ''='' and in '''Value''', enter "0".
# Click the '''Add Color''' button three more times. The '''Property''' and '''Comparator''' dropdown list selections should stay the same for each color and the '''Values''' should increment by one for each color. If this did not happen, be sure to set '''Property''' to ''Status'', '''Comparator''' to ''='', and '''Value''' to "1", "2", and "3". For these items, set the colors to ''orange'', ''yellow'', and ''green'' (''orange'' for "1", ''yellow'' for "2", ''green'' for "3"). Click '''Close'''.
# If the '''Color Filter''' dropdown list does not say ''Status Rule'', click the list and select ''Status Rule''.
# Click the '''Icon''' tab and click the '''Add''' button.
# In the window that appears, set the name to "Icon Rule" and click '''Add'''.
# Click the '''Available Icons''' button and select the icon for ''Server 1''. Click '''OK'''.
# Click the dropdown list under '''Property''' and select ''Type''.
# Leave '''Comparator''' as ''='' and for '''Value''' enter "Server".
# Click '''Add''' two more times.
# For the first item, set the icon to ''Router'' and in '''Value''', enter "Router".
# For the second item, set the icon to ''Monitor'' and in '''Value''', enter "Workstation". Click '''Close'''.
# If the Icon Filter dropdown list does not say ''Icon Rule'', click the list and select ''Icon Rule''.
# Click '''Close''' to exit the '''Configure Appearance''' window and then click '''Close''' again to exit the '''Relation Model Editor'''.

=== Creating a Root-level Data Collection ===

# On the '''Data Collections''' page, switch the '''Collection Type''' to the '''Flat Collection''' mode by clicking on the toggle switch.
# Click '''Add''' create a new data collection.
# For the '''Data Collection Name''', enter "TopologyExampleRouters" and in the '''Data Source''' dropdown list, select ''TopologyExample.NetworkNodes''.
# Check the '''Filter''' option and click '''Add Rule'''.
# In the '''Property''' dropdown list, select ''Type''.
# Leave '''Comparator''' as ''='' and set '''Value''' to "Router".
# Click '''OK'''.

=== Creating a Stack ===

# Navigate to the '''Stacks & Boards''' page.
# Click '''Add Stack''', enter "TopologyExample" for the title, and click '''Add Stack'''.

=== Creating the Topology Widget ===

# Navigate to the '''Widgets''' page and click the '''Add''' button to open the '''Widget Wizard'''.
# Click the '''Widget Type''' button and select ''Diagrams'' and choose ''Topology''. Click '''Use Selected'''.
# Click the '''Data Collection''' dropdown list and select ''TopologyExampleRouters''.
# Enter "TopologyExample" for the '''Widget Name'''. Click '''Next'''.
# Click the '''Relationship Model''' dropdown list and select ''TopologyExampleModel''.
# Set the '''Default Layout''' to ''Hierarchical Cyclic'' if it is not already selected and set '''Auto Node Drill Down''' to ''Enabled''.
# '''[Optional]''' Click the '''Link Arrows''' dropdown list and choose ''Directional'', and increase the '''Max Number of Hops''' to see different levels of the hierarchy. [[Image:SRTopology_WWVisualization.PNG|thumb|center|700px|Topology Widget Visualization]]
# Click '''Next''' and then click '''Finish'''.
# Select ''TopologyExample'' in the list of widgets and click the '''Board''' column to change the board to ''TopologyExample''.

=== Viewing the Topology Widget ===

# Navigate to the '''Builder''' page and click on the tab for the stack called '''TopologyExample'''.
# Use the mouse to drag (click and drag) and zoom in or out (mouse wheel up or down) on the widget as needed.
# Different nodes in the diagram can be clicked to perform a drill down and see connections at different levels in the hierarchy.

Appboard/2.4/builder/widgets/topology/selfref example - Revision history

imported>Jason.nicholls: moved appboard/2.4/builder/widgets/topology/SR example to appboard/2.4/builder/widgets/topology/selfref example

imported>David.moore at 16:29, 13 January 2014

imported>David.moore at 16:20, 13 January 2014

imported>David.moore: Created page with '== Topology Widget Usage Example #2: Self-Referential Topology == === Create a new Data Source === # Click the '''Data Sources''' toolbar option on the left. # Click the '''A…'