GUI2 added in details panel, updated docs
Change-Id: I49a874deeb4de1082f190ea5d0d985c986a978f8
diff --git a/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/forcesvg.component.html b/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/forcesvg.component.html
index af33384..c4930c1 100644
--- a/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/forcesvg.component.html
+++ b/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/forcesvg.component.html
@@ -1,5 +1,5 @@
<!--
-~ Copyright 2018-present Open Networking Foundation
+~ Copyright 2019-present Open Networking Foundation
~
~ Licensed under the Apache License, Version 2.0 (the "License");
~ you may not use this file except in compliance with the License.
@@ -13,76 +13,67 @@
~ See the License for the specific language governing permissions and
~ limitations under the License.
-->
-<svg:g class="topo2-force" xmlns:svg="http://www.w3.org/2000/svg">
- <svg:g id="new-zoom-layer">
- <svg:g class="topo2-links">
- <!-- Template explanation: Creates an SVG Group and in
- line 1) use the svg component onos-linksvg, setting it's link
- Input parameter to the link item from the next line
- line 2) Use the built in NgFor directive to iterate through the
- set of links filtered by the filteredLinks() function.
- -->
- <svg:g onos-linksvg [link]="link"
- *ngFor="let link of filteredLinks()"
- (selectedEvent)="updateSelected($event)">
- </svg:g>
- </svg:g>
- <svg:g class="topo2-linkLabels" />
- <svg:g class="topo2-numLinkLabels" />
- <svg:g class="topo2-nodes">
- <!-- Template explanation - create an SVG Group and
- line 1) use the svg component onos-devicenodesvg, setting it's device
- Input parameter to the device item from the next line
- line 2) Use the built in NgFor directive to iterate through all
- of the devices in the chosen layer index. The current iteration
- is in the device variable
- line 3) Use the onosDraggable directive and pass this device in to
- its draggableNode Input parameter and setting the draggableInGraph
- Input parameter to 'graph'
- line 4) when the onos-devicenodesvg component emits the selectedEvent
- call the updateSelected() method of this (forcesvg) component
- -->
- <svg:g onos-devicenodesvg [device]="device"
- *ngFor="let device of regionData.devices[visibleLayerIdx()]"
- onosDraggableNode [draggableNode]="device" [draggableInGraph]="graph"
- (selectedEvent)="updateSelected($event)">
- </svg:g>
- <!-- Template explanation - only display the hosts if 'showHosts' is set true -->
- <svg:g *ngIf="showHosts">
- <!-- Template explanation - create an SVG Group and
- line 1) use the svg component onos-hostnodesvg, setting it's host
- Input parameter to the host item from the next line
- line 2) Use the built in NgFor directive to iterate through all
- of the hosts in the chosen layer index. The current iteration
- is in the 'host' variable
- line 3) Use the onosDraggable directive and pass this host in to
- its draggableNode Input parameter and setting the draggableInGraph
- Input parameter to 'graph'
- line 4) when the onos-hostnodesvg component emits the selectedEvent
- call the updateSelected() method of this (forcesvg) component
- -->
- <svg:g onos-hostnodesvg [host]="host"
- *ngFor="let host of regionData.hosts[visibleLayerIdx()]"
- onosDraggableNode [draggableNode]="host" [draggableInGraph]="graph"
- (selectedEvent)="updateSelected($event)">
- </svg:g>
- </svg:g>
- <svg:g onos-subregionnodesvg [subRegion]="subRegion"
- *ngFor="let subRegion of regionData.subregions"
- onosDraggableNode [draggableNode]="host" [draggableInGraph]="graph">
- </svg:g>
+<svg:desc xmlns:svg="http://www.w3.org/2000/svg">The force layout layer. This is
+ an SVG component that displays Nodes (Devices, Hosts and SubRegions) and
+ Links. Positions of each are driven by a forces computation engine</svg:desc>
+<svg:g xmlns:svg="http://www.w3.org/2000/svg" class="topo2-links">
+ <svg:desc>Topology links</svg:desc>
+ <!-- Template explanation: Creates an SVG Group and in
+ line 1) use the svg component onos-linksvg, setting it's link
+ Input parameter to the link item from the next line
+ line 2) Use the built in NgFor directive to iterate through the
+ set of links filtered by the filteredLinks() function.
+ -->
+ <svg:g onos-linksvg [link]="link"
+ *ngFor="let link of filteredLinks()"
+ [highlightsEnabled]="highlightPorts"
+ (selectedEvent)="updateSelected($event)">
+ </svg:g>
+</svg:g>
+<svg:g xmlns:svg="http://www.w3.org/2000/svg" class="topo2-nodes">
+ <svg:desc>Topology nodes</svg:desc>
+ <!-- Template explanation - create an SVG Group and
+ line 1) use the svg component onos-devicenodesvg, setting it's device
+ Input parameter to the device item from the next line
+ line 2) Use the built in NgFor directive to iterate through all
+ of the devices in the chosen layer index. The current iteration
+ is in the device variable
+ line 3) Use the onosDraggable directive and pass this device in to
+ its draggableNode Input parameter and setting the draggableInGraph
+ Input parameter to 'graph'
+ line 4) when the onos-devicenodesvg component emits the selectedEvent
+ call the updateSelected() method of this (forcesvg) component
+ -->
+ <svg:g onos-devicenodesvg [device]="device"
+ *ngFor="let device of regionData.devices[visibleLayerIdx()]"
+ onosDraggableNode [draggableNode]="device" [draggableInGraph]="graph"
+ (selectedEvent)="updateSelected($event)">
+ <svg:desc>Device nodes</svg:desc>
+ </svg:g>
+ <!-- Template explanation - only display the hosts if 'showHosts' is set true -->
+ <svg:g *ngIf="showHosts">
+ <!-- Template explanation - create an SVG Group and
+ line 1) use the svg component onos-hostnodesvg, setting it's host
+ Input parameter to the host item from the next line
+ line 2) Use the built in NgFor directive to iterate through all
+ of the hosts in the chosen layer index. The current iteration
+ is in the 'host' variable
+ line 3) Use the onosDraggable directive and pass this host in to
+ its draggableNode Input parameter and setting the draggableInGraph
+ Input parameter to 'graph'
+ line 4) when the onos-hostnodesvg component emits the selectedEvent
+ call the updateSelected() method of this (forcesvg) component
+ -->
+ <svg:g onos-hostnodesvg [host]="host"
+ *ngFor="let host of regionData.hosts[visibleLayerIdx()]"
+ onosDraggableNode [draggableNode]="host" [draggableInGraph]="graph"
+ (selectedEvent)="updateSelected($event)">
+ <svg:desc>Host nodes</svg:desc>
</svg:g>
</svg:g>
- <!--<svg:g class="topo2-portLabels">-->
- <!--<!–TODO make each of these in to a component that can be inserted –>-->
- <!--<svg:g *ngIf="selectedLink !== null" id="topo-port-src" class="portLabel" opacity="1">-->
- <!--<rect x="0" y="0" width="1" height="1" [ngStyle]="{'transform': 'scale(1)'}"></rect>-->
- <!--<text dy="0.3em" [ngStyle]="{'transform': 'scale(1)'}">{{ selectedLink.portA }}</text>-->
- <!--</svg:g>-->
-
- <!--<svg:g *ngIf="selectedLink !== null" id="topo-port-tgt" class="portLabel" opacity="1">-->
- <!--<rect x="0" y="0" width="1" height="1" [ngStyle]="{'transform': 'scale(1)'}"></rect>-->
- <!--<text dy="0.3em" [ngStyle]="{'transform': 'scale(1)'}">{{ selectedLink.portA }}</text>-->
- <!--</svg:g>-->
- <!--</svg:g>-->
+ <svg:g onos-subregionnodesvg [subRegion]="subRegion"
+ *ngFor="let subRegion of regionData.subregions"
+ onosDraggableNode [draggableNode]="host" [draggableInGraph]="graph">
+ <svg:desc>Subregion nodes</svg:desc>
+ </svg:g>
</svg:g>