GUI2 bug fix for Hosts hidden command
Change-Id: Ia1aedb4ab0f9c04bed0bfc324e08815fd8f0a6d1
diff --git a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/topology/topology.component.html b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/topology/topology.component.html
index e49ae9e..22ab277 100644
--- a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/topology/topology.component.html
+++ b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/topology/topology.component.html
@@ -44,38 +44,73 @@
<!-- Template explanation -
Line 0) This is the root of the whole SVG canvas of the Topology View - all
components beneath it are SVG components only (no HTML)
- line 1) the No Devices Connected banner is shown if the force component
- (from line 4) does not contain any devices
- line 2) Create an SVG Grouping and apply the onosZoomableOf directive to it,
- passing in the whole SVG canvas (#svgZoom)
- line 3) Add in the Background Svg Component (if showBackground is true - toggled
- by toolbar and by keyboard shortcut 'B'
- line 4) Add in the layer of the Force Svg Component. If any item is selected on it, pass
- to the details view and deselect all others. This is node and line graph
- whose contents are supplied through the Topology Service, and whose positions
- are driven by the d3.force engine
+ Line 1) if the background is clicked then send the event to the function
+ where it is filtered to make sure it really applied to the background
+ or the map and then used to clear any selections made
-->
<svg:svg #svgZoom xmlns:svg="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" id="topo2"
- preserveAspectRatio="xMaxYMax meet" (click)="backgroundClicked($event)">
+ preserveAspectRatio="xMaxYMax meet" (click)="backgroundClicked($event)"
+ transform="'translate(0,0), scale(1.0)'">
<svg:desc>The main SVG canvas of the Topology View</svg:desc>
+ <!-- Template explanation -
+ line 0) the No Devices Connected banner is shown if the force component
+ (from later) does not contain any devices
+ -->
<svg:g *ngIf="force.regionData?.devices[0].length +
force.regionData?.devices[1].length +
force.regionData?.devices[2].length=== 0"
onos-nodeviceconnected />
+ <!-- Template explanation -
+ line 0) Create an SVG Grouping and apply the onosZoomableOf directive to it,
+ passing in the whole SVG canvas (#svgZoom)
+ -->
<svg:g id="topo-zoomlayer" onosZoomableOf [zoomableOf]="svgZoom">
<svg:desc>A logical layer that allows the main SVG canvas to be zoomed and panned</svg:desc>
+ <!-- Template explanation
+ Line 0) Create an instance of the onos-gridsvg component with the name gridFull
+ All Inputs to that component will use default values
+ This is the grey grid of 1000x1000 with origin at top left
+ Only show it if the grid prefs value is 1 or 3
+ -->
<svg:g #gridFull *ngIf="prefsState.grid == 1 || prefsState.grid == 3" onos-gridsvg>
</svg:g>
+ <!-- Template explanation
+ Line 0) Create another instance of the onos-gridsvg component with the name geoGrid
+ This is the blue geo grid of -180 to +180 longitude and -75
+ to +75 latitude with with origin in the centre
+ Only show it if the grid prefs value is 2 or 3
+ Line 1) Set the Inputs for the longitude extents
+ Line 2) Set the Inputs for the latitude extents and set the minor line
+ spacing at 15 degrees long and lat
+ Line 3) Invert the vertical axis - positive in the y direction is up
+ Set the vertical extents of this grid to 1000 units high in SVG terms
+ Set the aspect ratio to 5/6 - this is because it is an eqi-
+ rectangular projection and looks stretched out horizontally
+ otherwise. This balances the distortion of equi-rect between
+ equator and the poles
+ Line 4) Set the color of the grid to light blue
+ -->
<svg:g #geoGrid *ngIf="prefsState.grid == 2 || prefsState.grid == 3"
onos-gridsvg [horizLowerLimit]="-180" [horizUpperLimit]="180"
[vertLowerLimit]="-75" [vertUpperLimit]="75" [spacing]="15"
[invertVertical]="true" [fit]="'fit1000high'" [aspectRatio]="0.83333"
[gridcolor]="'#bfe7fb'">
</svg:g>
+ <!-- Template explanation -
+ line 0) Add in the Background Svg Component (if showBackground is true - toggled
+ by toolbar and by keyboard shortcut 'B'
+ -->
<svg:g *ngIf="prefsState.bg"
onos-backgroundsvg [map]="mapIdState" (zoomlevel)="mapExtentsZoom($event)">
<svg:desc>The Background SVG component - contains maps</svg:desc>
</svg:g>
+ <!-- Template explanation -
+ line 0) Add in the layer of the Force Svg Component.
+ This is node and line graph
+ whose contents are supplied through the Topology Service, and whose positions
+ are driven by the d3.force engine
+ line 6) If any item is selected on it, pass to the details view and deselect all others.
+ -->
<svg:g #force onos-forcesvg
[deviceLabelToggle]="prefsState.dlbls"
[hostLabelToggle]="prefsState.hlbls"
diff --git a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/topology/topology.component.ts b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/topology/topology.component.ts
index 8c6b953..7a59801 100644
--- a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/topology/topology.component.ts
+++ b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/topology/topology.component.ts
@@ -144,7 +144,7 @@
templateUrl: './topology.component.html',
styleUrls: ['./topology.component.css']
})
-export class TopologyComponent implements AfterContentInit, OnInit, OnDestroy {
+export class TopologyComponent implements OnInit, OnDestroy {
@Input() bannerHeight: number = 48;
// These are references to the components inserted in the template
@ViewChild(InstanceComponent) instance: InstanceComponent;
@@ -285,20 +285,20 @@
// Service just to compartmentalize things a bit
this.ts.init(this.instance, this.background, this.force);
- this.ps.addListener((data) => this.prefsUpdateHandler(data));
+ // For the 2.1 release to not listen to updates of prefs as they are
+ // only the echo of what we have sent down and the event mechanism
+ // does not discern between users. Can get confused if multiple windows open
+ // this.ps.addListener((data) => this.prefsUpdateHandler(data));
+
this.prefsState = this.ps.getPrefs(TOPO2_PREFS, this.prefsState);
this.mapIdState = this.ps.getPrefs(TOPO_MAPID_PREFS, this.mapIdState);
this.trs.init(this.force);
- this.log.debug('Topology component initialized');
- }
-
- ngAfterContentInit(): void {
// Scale the window initially - then after resize
const zoomMapExtents = ZoomUtils.zoomToWindowSize(
this.bannerHeight, this.window.innerWidth, this.window.innerHeight);
this.zoomDirective.changeZoomLevel(zoomMapExtents, true);
- this.log.debug('Topology zoom initialized',
+ this.log.debug('TopologyComponent initialized',
this.bannerHeight, this.window.innerWidth, this.window.innerHeight,
zoomMapExtents);
}
@@ -462,8 +462,6 @@
bindCommands(additional?: any) {
const am = this.actionMap();
- const add = this.fs.isO(additional);
-
this.ks.keyBindings(am);
this.ks.gestureNotes([
@@ -610,7 +608,7 @@
protected toggleHosts() {
const current: boolean = !Boolean(this.prefsState.hosts);
this.flashMsg = this.lionFn('hosts') + ' ' +
- this.lionFn(this.force.showHosts ? 'visible' : 'hidden');
+ this.lionFn(current ? 'visible' : 'hidden');
this.updatePrefsState(PREF_HOSTS, current ? 1 : 0);
this.log.debug('toggling hosts: ', this.prefsState.hosts ? 'Show' : 'Hide');
}