GUI2 bug fix for Hosts hidden command
Change-Id: Ia1aedb4ab0f9c04bed0bfc324e08815fd8f0a6d1
diff --git a/web/gui2-topo-lib/package.json b/web/gui2-topo-lib/package.json
index f2886e4..253d02e 100644
--- a/web/gui2-topo-lib/package.json
+++ b/web/gui2-topo-lib/package.json
@@ -21,7 +21,7 @@
"@angular/platform-browser-dynamic": "~7.0.0",
"@angular/router": "~7.0.0",
"core-js": "^2.5.4",
- "d3": "^5.2.0",
+ "d3": "^5.9.2",
"gui2-fw-lib": "file:../gui2-fw-lib/dist/gui2-fw-lib/gui2-fw-lib-2.1.0.tgz",
"rxjs": "~6.3.3",
"topojson-client": "^3.0.0",
diff --git a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/visuals/devicenodesvg/devicenodesvg.component.html b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/visuals/devicenodesvg/devicenodesvg.component.html
index fb0569b..49f9416 100644
--- a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/visuals/devicenodesvg/devicenodesvg.component.html
+++ b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/visuals/devicenodesvg/devicenodesvg.component.html
@@ -70,9 +70,9 @@
<svg:rect x="-16" y="-16" width="32" height="32" [ngStyle]="{'fill': panelColor}">
</svg:rect>
<svg:path *ngIf="device.location && device.location.locType != 'none'"
- d="M-15 12 v3 h5" style="stroke: white; stroke-width: 1; fill: none"></svg:path>
+ d="M-15 12 v3 h3" style="stroke: white; stroke-width: 1; fill: none"></svg:path>
<svg:path *ngIf="device.fx != null"
- d="M15 -12 v-3 h-5" style="stroke: white; stroke-width: 1; fill: none"></svg:path>
+ d="M15 -12 v-3 h-3" style="stroke: white; stroke-width: 1; fill: none"></svg:path>
<!-- Template explanation: Creates an SVG Text element and in
line 1) make it left aligned and slightly down and to the right of the last rect
line 2) set its text length to be the calculated value - see that function
diff --git a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/zoomable.directive.ts b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/zoomable.directive.ts
index 8c3707b..9564444 100644
--- a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/zoomable.directive.ts
+++ b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/zoomable.directive.ts
@@ -54,10 +54,8 @@
const zoomed = () => {
const transform = d3.event.transform;
- if (transform) {
- container.attr('transform', 'translate(' + transform.x + ',' + transform.y + ') scale(' + transform.k + ')');
- this.updateZoomState(<TopoZoomPrefs>{tx: transform.x, ty: transform.y, sc: transform.k});
- }
+ container.attr('transform', 'translate(' + transform.x + ',' + transform.y + ') scale(' + transform.k + ')');
+ this.updateZoomState(<TopoZoomPrefs>{tx: transform.x, ty: transform.y, sc: transform.k});
};
this.zoom = d3.zoom().on('zoom', zoomed);
diff --git a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/panel/mapselector/mapselector.component.ts b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/panel/mapselector/mapselector.component.ts
index 881e742..b638dfb 100644
--- a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/panel/mapselector/mapselector.component.ts
+++ b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/panel/mapselector/mapselector.component.ts
@@ -81,6 +81,10 @@
}
choice(mapid: Object): void {
- this.chosenMap.emit(<MapObject>this.mapSelectorResponse.maps[mapid['mapid']]);
+ if (mapid) {
+ this.chosenMap.emit(<MapObject>this.mapSelectorResponse.maps[mapid['mapid']]);
+ } else {
+ this.chosenMap.emit(<MapObject>{});
+ }
}
}
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');
}