Added native Bazel build to GUI2. Reduced a lot of the unused Angular CLI structures
Reviewers should look at the changes in WORKSPACE, BUILD, BUILD.bazel, README.md files
This is only possible now as rules_nodejs went to 1.0.0 on December 20
gui2 has now been made the entry point (rather than gui2-fw-lib)
No tests or linting are functional yet for Typescript
Each NgModule now has its own BUILD.bazel file with ng_module
gui2-fw-lib is all one module and has been refactored to simplify the directory structure
gui2-topo-lib is also all one module - its directory structure has had 3 layers removed
The big bash script in web/gui2/BUILD has been removed - all is done through ng_module rules
in web/gui2/src/main/webapp/BUILD.bazel and web/gui2/src/main/webapp/app/BUILD.bazel
Change-Id: Ifcfcc23a87be39fe6d6c8324046cc8ebadb90551
diff --git a/web/gui2-topo-lib/lib/gui2-topo-lib.module.ts b/web/gui2-topo-lib/lib/gui2-topo-lib.module.ts
new file mode 100644
index 0000000..26afcc3
--- /dev/null
+++ b/web/gui2-topo-lib/lib/gui2-topo-lib.module.ts
@@ -0,0 +1,102 @@
+/*
+ * Copyright 2018-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.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an 'AS IS' BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TopologyRoutingModule } from './topology-routing.module';
+import { TopologyComponent } from './topology/topology.component';
+import { NoDeviceConnectedSvgComponent } from './layer/nodeviceconnectedsvg/nodeviceconnectedsvg.component';
+import { InstanceComponent } from './panel/instance/instance.component';
+import { SummaryComponent } from './panel/summary/summary.component';
+import { ToolbarComponent } from './panel/toolbar/toolbar.component';
+import { DetailsComponent } from './panel/details/details.component';
+import { Gui2FwLibModule } from '../../gui2-fw-lib/public_api';
+import { BackgroundSvgComponent } from './layer/backgroundsvg/backgroundsvg.component';
+import { ForceSvgComponent } from './layer/forcesvg/forcesvg.component';
+import { MapSvgComponent } from './layer/mapsvg/mapsvg.component';
+import { TopologyService } from './topology.service';
+import { DraggableDirective } from './layer/forcesvg/draggable/draggable.directive';
+import { MapSelectorComponent } from './panel/mapselector/mapselector.component';
+import { DeviceNodeSvgComponent} from './layer/forcesvg/visuals/devicenodesvg/devicenodesvg.component';
+import { HostNodeSvgComponent } from './layer/forcesvg/visuals/hostnodesvg/hostnodesvg.component';
+import { SubRegionNodeSvgComponent } from './layer/forcesvg/visuals/subregionnodesvg/subregionnodesvg.component';
+import { LinkSvgComponent} from './layer/forcesvg/visuals/linksvg/linksvg.component';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import { GridsvgComponent } from './layer/gridsvg/gridsvg.component';
+import {TrafficService} from './traffic.service';
+import {LayoutService} from './layout.service';
+import { BadgeSvgComponent } from './layer/forcesvg/visuals/badgesvg/badgesvg.component';
+
+/**
+ * ONOS GUI -- Topology View Module
+ *
+ * The main entry point is the TopologyComponent
+ *
+ * Note: This has been updated from onos-gui-1.0.0 where it was called 'topo2'
+ * whereas here it is now called 'topology'. This also merges in the old 'topo'
+ */
+@NgModule({
+ imports: [
+ CommonModule,
+ FormsModule,
+ ReactiveFormsModule,
+ TopologyRoutingModule,
+ Gui2FwLibModule
+ ],
+ declarations: [
+ BackgroundSvgComponent,
+ DetailsComponent,
+ DeviceNodeSvgComponent,
+ ForceSvgComponent,
+ GridsvgComponent,
+ HostNodeSvgComponent,
+ InstanceComponent,
+ LinkSvgComponent,
+ MapSelectorComponent,
+ MapSvgComponent,
+ NoDeviceConnectedSvgComponent,
+ SubRegionNodeSvgComponent,
+ SummaryComponent,
+ ToolbarComponent,
+ TopologyComponent,
+ DraggableDirective,
+ BadgeSvgComponent,
+ ],
+ providers: [
+ TopologyService,
+ TrafficService,
+ LayoutService
+ ],
+ exports: [
+ BackgroundSvgComponent,
+ DetailsComponent,
+ DeviceNodeSvgComponent,
+ ForceSvgComponent,
+ GridsvgComponent,
+ HostNodeSvgComponent,
+ InstanceComponent,
+ LinkSvgComponent,
+ MapSelectorComponent,
+ MapSvgComponent,
+ NoDeviceConnectedSvgComponent,
+ SubRegionNodeSvgComponent,
+ SummaryComponent,
+ ToolbarComponent,
+ TopologyComponent,
+ DraggableDirective,
+ BadgeSvgComponent
+ ]
+})
+export class Gui2TopoLibModule { }
diff --git a/web/gui2-topo-lib/lib/layer/backgroundsvg/backgroundsvg.component.css b/web/gui2-topo-lib/lib/layer/backgroundsvg/backgroundsvg.component.css
new file mode 100644
index 0000000..642c1c4
--- /dev/null
+++ b/web/gui2-topo-lib/lib/layer/backgroundsvg/backgroundsvg.component.css
@@ -0,0 +1,20 @@
+/*
+ * Copyright 2018-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.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+
+/*
+ ONOS GUI -- Topology View (background) -- CSS file
+ */
\ No newline at end of file
diff --git a/web/gui2-topo-lib/lib/layer/backgroundsvg/backgroundsvg.component.html b/web/gui2-topo-lib/lib/layer/backgroundsvg/backgroundsvg.component.html
new file mode 100644
index 0000000..9f8faf8
--- /dev/null
+++ b/web/gui2-topo-lib/lib/layer/backgroundsvg/backgroundsvg.component.html
@@ -0,0 +1,29 @@
+<!--
+~ Copyright 2018-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.
+~ You may obtain a copy of the License at
+~
+~ http://www.apache.org/licenses/LICENSE-2.0
+~
+~ Unless required by applicable law or agreed to in writing, software
+~ distributed under the License is distributed on an "AS IS" BASIS,
+~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+~ See the License for the specific language governing permissions and
+~ limitations under the License.
+-->
+<!-- The transform here goes from a 0,0 centred grid of -180 to 180 of
+ longitude to -75 to 75 of latitude
+ It is mapped to a 2000x1000 SVG grid with -500,0 at the top left
+ (The SVG viewbox of ONOS is 1000x1000 - for the geo grid we wanted
+ to keep it the same height 1000 representing +75 latitude down to
+ -75 latitude, but double the width. Why 75? There's no city in the
+ world above 70 - Murmansk)
+ The 6.66 represents 1000/150 and the 5.55 represents 2000/360
+ The reason for the difference is that mercator projection widens
+ countries in the northern and southern extremities, and so
+ the map is squashed horizontally slightly here to compensate
+ (with no squashing the width would be 2400)-->
+<svg:g xmlns:svg="http://www.w3.org/2000/svg" onos-mapsvg [map]="map" (mapBounds)="updatedBounds($event)"
+ transform="translate(500,500), scale(5.5555,6.666666)"/>
diff --git a/web/gui2-topo-lib/lib/layer/backgroundsvg/backgroundsvg.component.spec.ts b/web/gui2-topo-lib/lib/layer/backgroundsvg/backgroundsvg.component.spec.ts
new file mode 100644
index 0000000..1063017
--- /dev/null
+++ b/web/gui2-topo-lib/lib/layer/backgroundsvg/backgroundsvg.component.spec.ts
@@ -0,0 +1,95 @@
+/*
+ * Copyright 2018-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.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an 'AS IS' BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { async, ComponentFixture, TestBed, getTestBed } from '@angular/core/testing';
+import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
+import { BackgroundSvgComponent } from './backgroundsvg.component';
+import {MapSvgComponent, TopoData} from '../mapsvg/mapsvg.component';
+import {from} from 'rxjs';
+import {HttpClient} from '@angular/common/http';
+import {LocMeta, LogService, ZoomUtils} from '../../../gui2-fw-lib/public_api';
+import {MapObject} from '../maputils';
+import {ForceSvgComponent} from '../forcesvg/forcesvg.component';
+
+import {DraggableDirective} from '../forcesvg/draggable/draggable.directive';
+import {DeviceNodeSvgComponent} from '../forcesvg/visuals/devicenodesvg/devicenodesvg.component';
+import {SubRegionNodeSvgComponent} from '../forcesvg/visuals/subregionnodesvg/subregionnodesvg.component';
+import {LinkSvgComponent} from '../forcesvg/visuals/linksvg/linksvg.component';
+import {HostNodeSvgComponent} from '../forcesvg/visuals/hostnodesvg/hostnodesvg.component';
+import {BadgeSvgComponent} from '../forcesvg/visuals/badgesvg/badgesvg.component';
+
+
+describe('BackgroundSvgComponent', () => {
+ let httpMock: HttpTestingController;
+
+ let logServiceSpy: jasmine.SpyObj<LogService>;
+ let component: BackgroundSvgComponent;
+ let fixture: ComponentFixture<BackgroundSvgComponent>;
+
+ const testmap: MapObject = <MapObject>{
+ scale: 1.0,
+ id: 'bayareaGEO',
+ description: 'test map',
+ filePath: 'testmap'
+ };
+
+ const sampleTopoData = <TopoData>require('../mapsvg/tests/bayarea.json');
+
+ beforeEach(() => {
+ const logSpy = jasmine.createSpyObj('LogService', ['info', 'debug', 'warn', 'error']);
+
+
+ TestBed.configureTestingModule({
+ imports: [HttpClientTestingModule],
+ declarations: [
+ BackgroundSvgComponent,
+ MapSvgComponent,
+ ForceSvgComponent,
+ DeviceNodeSvgComponent,
+ HostNodeSvgComponent,
+ SubRegionNodeSvgComponent,
+ LinkSvgComponent,
+ DraggableDirective,
+ BadgeSvgComponent
+ ],
+ providers: [
+ { provide: LogService, useValue: logSpy },
+ ]
+ })
+ .compileComponents();
+
+ logServiceSpy = TestBed.get(LogService);
+ httpMock = TestBed.get(HttpTestingController);
+ fixture = TestBed.createComponent(BackgroundSvgComponent);
+
+ component = fixture.componentInstance;
+ component.map = testmap;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ httpMock.expectOne('testmap.topojson').flush(sampleTopoData);
+
+ expect(component).toBeTruthy();
+
+ httpMock.verify();
+ });
+
+ it('should convert latlong to xy', () => {
+ const result = ZoomUtils.convertGeoToCanvas(<LocMeta>{lat: 52, lng: -8});
+ expect(Math.round(result.x * 100)).toEqual(45556);
+ expect(Math.round(result.y * 100)).toEqual(15333);
+ });
+});
diff --git a/web/gui2-topo-lib/lib/layer/backgroundsvg/backgroundsvg.component.ts b/web/gui2-topo-lib/lib/layer/backgroundsvg/backgroundsvg.component.ts
new file mode 100644
index 0000000..1af98d6
--- /dev/null
+++ b/web/gui2-topo-lib/lib/layer/backgroundsvg/backgroundsvg.component.ts
@@ -0,0 +1,107 @@
+/*
+ * Copyright 2018-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.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an 'AS IS' BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import {Component, EventEmitter, Input, Output} from '@angular/core';
+import {MapObject} from '../maputils';
+import {MapBounds, TopoZoomPrefs, LogService, ZoomUtils} from '../../../../gui2-fw-lib/public_api';
+
+/**
+ * model of the topo2CurrentLayout attrs from BgZoom below
+ */
+export interface BgZoomAttrs {
+ offsetX: number;
+ offsetY: number;
+ scale: number;
+}
+
+/**
+ * model of the topo2CurrentLayout background zoom attrs from Layout below
+ */
+export interface BgZoom {
+ cfg: BgZoomAttrs;
+ usr?: BgZoomAttrs;
+}
+
+/**
+ * model of the topo2CurrentLayout breadcrumb from Layout below
+ */
+export interface LayoutCrumb {
+ id: string;
+ name: string;
+}
+
+/**
+ * Enum of the topo2CurrentRegion location type from Location below
+ */
+export enum LocationType {
+ NONE = 'none',
+ GEO = 'geo',
+ GRID = 'grid'
+}
+
+/**
+ * model of the topo2CurrentLayout WebSocket response
+ */
+export interface Layout {
+ id: string;
+ bgDefaultScale: number;
+ bgDesc: string;
+ bgFilePath: string;
+ bgId: string;
+ bgType: LocationType;
+ bgWarn: string;
+ bgZoom: BgZoom;
+ crumbs: LayoutCrumb[];
+ parent: string;
+ region: string;
+ regionName: string;
+}
+
+/**
+ * ONOS GUI -- Topology Background Layer View.
+ *
+ * TODO: consider that this layer has only one component the MapSvg and hence
+ * might be able to be eliminated
+ */
+@Component({
+ selector: '[onos-backgroundsvg]',
+ templateUrl: './backgroundsvg.component.html',
+ styleUrls: ['./backgroundsvg.component.css']
+})
+export class BackgroundSvgComponent {
+ @Input() map: MapObject;
+ @Output() zoomlevel = new EventEmitter<TopoZoomPrefs>();
+
+ layoutData: Layout = <Layout>{};
+
+ constructor(
+ private log: LogService
+ ) {
+ this.log.debug('BackgroundSvg constructed');
+ }
+
+ /**
+ * Called when ever the mapBounds event is raised by the MapSvgComponent
+ *
+ * @param bounds - the bounds of the newly loaded map in terms of Lat and Long
+ */
+ updatedBounds(bounds: MapBounds): void {
+ const zoomPrefs: TopoZoomPrefs =
+ ZoomUtils.convertBoundsToZoomLevel(bounds, this.log);
+
+ this.zoomlevel.emit(zoomPrefs);
+ }
+
+}
diff --git a/web/gui2-topo-lib/lib/layer/forcesvg/draggable/draggable.directive.spec.ts b/web/gui2-topo-lib/lib/layer/forcesvg/draggable/draggable.directive.spec.ts
new file mode 100644
index 0000000..bb7dfbf
--- /dev/null
+++ b/web/gui2-topo-lib/lib/layer/forcesvg/draggable/draggable.directive.spec.ts
@@ -0,0 +1,52 @@
+/*
+ * Copyright 2018-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.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { DraggableDirective } from './draggable.directive';
+import {inject, TestBed} from '@angular/core/testing';
+import {ElementRef} from '@angular/core';
+import {LogService} from '../../../../../gui2-fw-lib/public_api';
+
+export class MockElementRef extends ElementRef {
+ nativeElement = {};
+}
+
+describe('DraggableDirective', () => {
+ let logServiceSpy: jasmine.SpyObj<LogService>;
+ let mockWindow: Window;
+
+ beforeEach(() => {
+ const logSpy = jasmine.createSpyObj('LogService', ['info', 'debug', 'warn', 'error']);
+ mockWindow = <any>{
+ navigator: {
+ userAgent: 'HeadlessChrome',
+ vendor: 'Google Inc.'
+ }
+ };
+
+ TestBed.configureTestingModule({
+ providers: [DraggableDirective,
+ { provide: LogService, useValue: logSpy },
+ { provide: 'Window', useFactory: (() => mockWindow ) },
+ { provide: ElementRef, useValue: mockWindow }
+ ]
+ });
+ logServiceSpy = TestBed.get(LogService);
+ });
+
+ it('should create an instance', inject([DraggableDirective], (directive: DraggableDirective) => {
+
+ expect(directive).toBeTruthy();
+ }));
+});
diff --git a/web/gui2-topo-lib/lib/layer/forcesvg/draggable/draggable.directive.ts b/web/gui2-topo-lib/lib/layer/forcesvg/draggable/draggable.directive.ts
new file mode 100644
index 0000000..f476e46
--- /dev/null
+++ b/web/gui2-topo-lib/lib/layer/forcesvg/draggable/draggable.directive.ts
@@ -0,0 +1,86 @@
+/*
+ * Copyright 2018-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.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import {
+ Directive,
+ ElementRef,
+ EventEmitter,
+ Input,
+ OnChanges, Output
+} from '@angular/core';
+import {ForceDirectedGraph, Node} from '../models';
+import * as d3 from 'd3';
+import {LogService, MetaUi, ZoomUtils} from '../../../../../gui2-fw-lib/public_api';
+import {BackgroundSvgComponent} from '../../backgroundsvg/backgroundsvg.component';
+
+@Directive({
+ selector: '[onosDraggableNode]'
+})
+export class DraggableDirective implements OnChanges {
+ @Input() draggableNode: Node;
+ @Input() draggableInGraph: ForceDirectedGraph;
+ @Output() newLocation = new EventEmitter<MetaUi>();
+
+ constructor(
+ private _element: ElementRef,
+ private log: LogService
+ ) {
+ this.log.debug('DraggableDirective constructed');
+ }
+
+ ngOnChanges() {
+ this.applyDraggableBehaviour(
+ this._element.nativeElement,
+ this.draggableNode,
+ this.draggableInGraph,
+ this.newLocation);
+ }
+
+ /**
+ * A method to bind a draggable behaviour to an svg element
+ */
+ applyDraggableBehaviour(element, node: Node, graph: ForceDirectedGraph, newLocation: EventEmitter<MetaUi>) {
+ const d3element = d3.select(element);
+
+ function started() {
+ /** Preventing propagation of dragstart to parent elements */
+ d3.event.sourceEvent.stopPropagation();
+
+ if (!d3.event.active) {
+ graph.simulation.alphaTarget(0.3).restart();
+ }
+
+ d3.event.on('drag', () => dragged()).on('end', () => ended());
+
+ function dragged() {
+ node.fx = d3.event.x;
+ node.fy = d3.event.y;
+ }
+
+ function ended() {
+ if (!d3.event.active) {
+ graph.simulation.alphaTarget(0);
+ }
+ newLocation.emit(ZoomUtils.convertXYtoGeo(node.fx, node.fy));
+
+ // node.fx = null;
+ // node.fy = null;
+ }
+ }
+
+ d3element.call(d3.drag()
+ .on('start', started));
+ }
+}
diff --git a/web/gui2-topo-lib/lib/layer/forcesvg/forcesvg.component.css b/web/gui2-topo-lib/lib/layer/forcesvg/forcesvg.component.css
new file mode 100644
index 0000000..addd41c
--- /dev/null
+++ b/web/gui2-topo-lib/lib/layer/forcesvg/forcesvg.component.css
@@ -0,0 +1,20 @@
+/*
+ * Copyright 2018-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.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+
+/*
+ ONOS GUI -- Topology View (forces) -- CSS file
+ */
\ No newline at end of file
diff --git a/web/gui2-topo-lib/lib/layer/forcesvg/forcesvg.component.html b/web/gui2-topo-lib/lib/layer/forcesvg/forcesvg.component.html
new file mode 100644
index 0000000..026ef87
--- /dev/null
+++ b/web/gui2-topo-lib/lib/layer/forcesvg/forcesvg.component.html
@@ -0,0 +1,104 @@
+<!--
+~ 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.
+~ You may obtain a copy of the License at
+~
+~ http://www.apache.org/licenses/LICENSE-2.0
+~
+~ Unless required by applicable law or agreed to in writing, software
+~ distributed under the License is distributed on an "AS IS" BASIS,
+~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+~ See the License for the specific language governing permissions and
+~ limitations under the License.
+-->
+<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.
+ line 3) feed the highlightPorts of this (forcesvg) component in to
+ the highlightsEnabled of the link component
+ line 5) when the onos-linksvg component emits the selectedEvent,
+ call the updateSelected() method of this (forcesvg) component
+ line 6) feed the scale of this (forcesvg) component in to the scale
+ of the link
+ -->
+ <svg:g onos-linksvg [link]="link"
+ *ngFor="let link of filteredLinks()"
+ [highlightsEnabled]="highlightPorts"
+ (selectedEvent)="updateSelected($event)"
+ [scale]="scale">
+ </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) event handler of the draggable directive - causes the new location
+ to be written back to the server
+ line 5) when the onos-devicenodesvg component emits the selectedEvent,
+ call the updateSelected() method of this (forcesvg) component
+ line 6) feed the devicelabeltoggle of this (forcesvg) component in to
+ the labelToggle of the device
+ line 7) feed the scale of this (forcesvg) component in to the scale
+ of the device
+ -->
+ <svg:g onos-devicenodesvg [device]="device"
+ *ngFor="let device of regionData.devices[visibleLayerIdx()]"
+ onosDraggableNode [draggableNode]="device" [draggableInGraph]="graph"
+ (newLocation)="nodeMoved('device', device.id, $event)"
+ (selectedEvent)="updateSelected($event)"
+ [labelToggle]="deviceLabelToggle"
+ [scale]="scale">
+ <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) event handler of the draggable directive - causes the new location
+ to be written back to the server
+ line 5) when the onos-hostnodesvg component emits the selectedEvent
+ call the updateSelected() method of this (forcesvg) component
+ line 6) feed the hostLabelToggle of this (forcesvg) component in to
+ the labelToggle of the host
+ line 7) feed the scale of this (forcesvg) component in to the scale
+ of the host
+ -->
+ <svg:g onos-hostnodesvg [host]="host"
+ *ngFor="let host of regionData.hosts[visibleLayerIdx()]"
+ onosDraggableNode [draggableNode]="host" [draggableInGraph]="graph"
+ (newLocation)="nodeMoved('host', host.id, $event)"
+ (selectedEvent)="updateSelected($event)"
+ [labelToggle]="hostLabelToggle"
+ [scale]="scale">
+ <svg:desc>Host nodes</svg:desc>
+ </svg:g>
+ </svg:g>
+ <svg:g onos-subregionnodesvg [subRegion]="subRegion"
+ *ngFor="let subRegion of regionData.subregions"
+ onosDraggableNode [draggableNode]="subRegion" [draggableInGraph]="graph">
+ <svg:desc>Subregion nodes</svg:desc>
+ </svg:g>
+</svg:g>
diff --git a/web/gui2-topo-lib/lib/layer/forcesvg/forcesvg.component.spec.ts b/web/gui2-topo-lib/lib/layer/forcesvg/forcesvg.component.spec.ts
new file mode 100644
index 0000000..6ee354a
--- /dev/null
+++ b/web/gui2-topo-lib/lib/layer/forcesvg/forcesvg.component.spec.ts
@@ -0,0 +1,298 @@
+/*
+ * Copyright 2018-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.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an 'AS IS' BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+
+import {ForceSvgComponent} from './forcesvg.component';
+import {
+ FnService, IconService,
+ LionService,
+ LogService, SvgUtilService,
+ UrlFnService,
+ WebSocketService
+} from '../../../gui2-fw-lib/public_api';
+import {DraggableDirective} from './draggable/draggable.directive';
+import {ActivatedRoute, Params} from '@angular/router';
+import {of} from 'rxjs';
+import {DeviceNodeSvgComponent} from './visuals/devicenodesvg/devicenodesvg.component';
+import {SubRegionNodeSvgComponent} from './visuals/subregionnodesvg/subregionnodesvg.component';
+import {HostNodeSvgComponent} from './visuals/hostnodesvg/hostnodesvg.component';
+import {LinkSvgComponent} from './visuals/linksvg/linksvg.component';
+import {Device, Host, Link, LinkType, Region} from './models';
+import {ChangeDetectorRef, SimpleChange} from '@angular/core';
+import {TopologyService} from '../../topology.service';
+import {BadgeSvgComponent} from './visuals/badgesvg/badgesvg.component';
+
+class MockActivatedRoute extends ActivatedRoute {
+ constructor(params: Params) {
+ super();
+ this.queryParams = of(params);
+ }
+}
+
+class MockIconService {
+ loadIconDef() { }
+}
+
+class MockSvgUtilService {
+
+ cat7() {
+ const tcid = 'd3utilTestCard';
+
+ function getColor(id, muted, theme) {
+ // NOTE: since we are lazily assigning domain ids, we need to
+ // get the color from all 4 scales, to keep the domains
+ // in sync.
+ const ln = '#5b99d2';
+ const lm = '#9ebedf';
+ const dn = '#5b99d2';
+ const dm = '#9ebedf';
+ if (theme === 'dark') {
+ return muted ? dm : dn;
+ } else {
+ return muted ? lm : ln;
+ }
+ }
+
+ return {
+ // testCard: testCard,
+ getColor: getColor,
+ };
+ }
+}
+
+class MockUrlFnService { }
+
+class MockWebSocketService {
+ createWebSocket() { }
+ isConnected() { return false; }
+ unbindHandlers() { }
+ bindHandlers() { }
+}
+
+class MockTopologyService {
+ public instancesIndex: Map<string, number>;
+ constructor() {
+ this.instancesIndex = new Map();
+ }
+}
+
+describe('ForceSvgComponent', () => {
+ let fs: FnService;
+ let ar: MockActivatedRoute;
+ let windowMock: Window;
+ let logServiceSpy: jasmine.SpyObj<LogService>;
+ let component: ForceSvgComponent;
+ let fixture: ComponentFixture<ForceSvgComponent>;
+ const openflowSampleData = require('./tests/test-module-topo2CurrentRegion.json');
+ const openflowRegionData: Region = <Region><unknown>(openflowSampleData.payload);
+
+ const odtnSampleData = require('./tests/test-OdtnConfig-topo2CurrentRegion.json');
+ const odtnRegionData: Region = <Region><unknown>(odtnSampleData.payload);
+
+ const emptyRegion: Region = <Region>{devices: [ [], [], [] ], hosts: [ [], [], [] ], links: []};
+
+ beforeEach(() => {
+ const logSpy = jasmine.createSpyObj('LogService', ['info', 'debug', 'warn', 'error']);
+ ar = new MockActivatedRoute({ 'debug': 'txrx' });
+
+ windowMock = <any>{
+ location: <any>{
+ hostname: 'foo',
+ host: 'foo',
+ port: '80',
+ protocol: 'http',
+ search: { debug: 'true' },
+ href: 'ws://foo:123/onos/ui/websock/path',
+ absUrl: 'ws://foo:123/onos/ui/websock/path'
+ }
+ };
+
+ const bundleObj = {
+ 'core.view.Topo': {
+ test: 'test1'
+ }
+ };
+ const mockLion = (key) => {
+ return bundleObj[key] || '%' + key + '%';
+ };
+
+ fs = new FnService(ar, logSpy, windowMock);
+
+ TestBed.configureTestingModule({
+ declarations: [
+ ForceSvgComponent,
+ DeviceNodeSvgComponent,
+ HostNodeSvgComponent,
+ SubRegionNodeSvgComponent,
+ LinkSvgComponent,
+ DraggableDirective,
+ BadgeSvgComponent
+ ],
+ providers: [
+ { provide: LogService, useValue: logSpy },
+ { provide: ActivatedRoute, useValue: ar },
+ { provide: FnService, useValue: fs },
+ { provide: ChangeDetectorRef, useClass: ChangeDetectorRef },
+ { provide: UrlFnService, useClass: MockUrlFnService },
+ { provide: WebSocketService, useClass: MockWebSocketService },
+ { provide: LionService, useFactory: (() => {
+ return {
+ bundle: ((bundleId) => mockLion),
+ ubercache: new Array(),
+ loadCbs: new Map<string, () => void>([])
+ };
+ })
+ },
+ { provide: IconService, useClass: MockIconService },
+ { provide: SvgUtilService, useClass: MockSvgUtilService },
+ { provide: TopologyService, useClass: MockTopologyService },
+ { provide: 'Window', useValue: windowMock },
+ ]
+ })
+ .compileComponents();
+ logServiceSpy = TestBed.get(LogService);
+
+ fixture = TestBed.createComponent(ForceSvgComponent);
+ component = fixture.debugElement.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+
+ it('load sample files', () => {
+ expect(openflowSampleData).toBeTruthy();
+ expect(openflowSampleData.payload).toBeTruthy();
+ expect(openflowSampleData.payload.id).toBe('(root)');
+
+ expect(odtnSampleData).toBeTruthy();
+ expect(odtnSampleData.payload).toBeTruthy();
+ expect(odtnSampleData.payload.id).toBe('(root)');
+ });
+
+ it('should read sample data payload as Region', () => {
+ expect(openflowRegionData).toBeTruthy();
+ // console.log(regionData);
+ expect(openflowRegionData.id).toBe('(root)');
+ expect(openflowRegionData.devices).toBeTruthy();
+ expect(openflowRegionData.devices.length).toBe(3);
+ expect(openflowRegionData.devices[2].length).toBe(10);
+ expect(openflowRegionData.hosts.length).toBe(3);
+ expect(openflowRegionData.hosts[2].length).toBe(20);
+ expect(openflowRegionData.links.length).toBe(44);
+ });
+
+ it('should read device246 correctly', () => {
+ const device246: Device = openflowRegionData.devices[2][0];
+ expect(device246.id).toBe('of:0000000000000246');
+ expect(device246.nodeType).toBe('device');
+ expect(device246.type).toBe('switch');
+ expect(device246.online).toBe(true);
+ expect(device246.master).toBe('10.192.19.68');
+ expect(device246.layer).toBe('def');
+
+ expect(device246.props.managementAddress).toBe('10.192.19.69');
+ expect(device246.props.protocol).toBe('OF_13');
+ expect(device246.props.driver).toBe('ofdpa-ovs');
+ expect(device246.props.latitude).toBe('40.15');
+ expect(device246.props.name).toBe('s246');
+ expect(device246.props.locType).toBe('geo');
+ expect(device246.props.channelId).toBe('10.192.19.69:59980');
+ expect(device246.props.longitude).toBe('-121.679');
+
+ expect(device246.location.locType).toBe('geo');
+ expect(device246.location.latOrY).toBe(40.15);
+ expect(device246.location.longOrX).toBe(-121.679);
+ });
+
+ it('should read host 3 correctly', () => {
+ const host3: Host = openflowRegionData.hosts[2][0];
+ expect(host3.id).toBe('00:88:00:00:00:03/110');
+ expect(host3.nodeType).toBe('host');
+ expect(host3.layer).toBe('def');
+ expect(host3.configured).toBe(false);
+ expect(host3.ips.length).toBe(3);
+ expect(host3.ips[0]).toBe('fe80::288:ff:fe00:3');
+ expect(host3.ips[1]).toBe('2000::102');
+ expect(host3.ips[2]).toBe('10.0.1.2');
+ });
+
+ it('should read link 3-205 correctly', () => {
+ const link3_205: Link = openflowRegionData.links[0];
+ expect(link3_205.id).toBe('00:AA:00:00:00:03/None~of:0000000000000205/6');
+ expect(link3_205.epA).toBe('00:AA:00:00:00:03/None');
+ expect(link3_205.epB).toBe('of:0000000000000205');
+ expect(String(LinkType[link3_205.type])).toBe('2');
+ expect(link3_205.portA).toBe(undefined);
+ expect(link3_205.portB).toBe('6');
+
+ expect(link3_205.rollup).toBeTruthy();
+ expect(link3_205.rollup.length).toBe(1);
+ expect(link3_205.rollup[0].id).toBe('00:AA:00:00:00:03/None~of:0000000000000205/6');
+ expect(link3_205.rollup[0].epA).toBe('00:AA:00:00:00:03/None');
+ expect(link3_205.rollup[0].epB).toBe('of:0000000000000205');
+ expect(String(LinkType[link3_205.rollup[0].type])).toBe('2');
+ expect(link3_205.rollup[0].portA).toBe(undefined);
+ expect(link3_205.rollup[0].portB).toBe('6');
+
+ });
+
+ it('should handle regionData change - empty Region', () => {
+ component.ngOnChanges(
+ {'regionData' : new SimpleChange(<Region>{}, emptyRegion, true)});
+
+ expect(component.graph.nodes.length).toBe(0);
+ });
+
+ it('should know how to format names', () => {
+ expect(ForceSvgComponent.extractNodeName('00:AA:00:00:00:03/None', undefined))
+ .toEqual('00:AA:00:00:00:03/None');
+
+ expect(ForceSvgComponent.extractNodeName('00:AA:00:00:00:03/161', '161'))
+ .toEqual('00:AA:00:00:00:03');
+
+ // Like epB of first example in sampleData file - endPtStr contains port number
+ expect(ForceSvgComponent.extractNodeName('of:0000000000000206/6', '6'))
+ .toEqual('of:0000000000000206');
+
+ // Like epB of second example in sampleData file - endPtStr does not contain port number
+ expect(ForceSvgComponent.extractNodeName('of:0000000000000206', '6'))
+ .toEqual('of:0000000000000206');
+ });
+
+ it('should handle openflow regionData change - sample Region', () => {
+ component.regionData = openflowRegionData;
+ component.ngOnChanges(
+ {'regionData' : new SimpleChange(<Region>{}, openflowRegionData, true)});
+
+ expect(component.graph.nodes.length).toBe(30);
+
+ expect(component.graph.links.length).toBe(44);
+
+ });
+
+ it('should handle odtn regionData change - sample odtn Region', () => {
+ component.regionData = odtnRegionData;
+ component.ngOnChanges(
+ {'regionData' : new SimpleChange(<Region>{}, odtnRegionData, true)});
+
+ expect(component.graph.nodes.length).toBe(2);
+
+ expect(component.graph.links.length).toBe(6);
+
+ });
+});
diff --git a/web/gui2-topo-lib/lib/layer/forcesvg/forcesvg.component.ts b/web/gui2-topo-lib/lib/layer/forcesvg/forcesvg.component.ts
new file mode 100644
index 0000000..ec3e57d
--- /dev/null
+++ b/web/gui2-topo-lib/lib/layer/forcesvg/forcesvg.component.ts
@@ -0,0 +1,715 @@
+/*
+ * 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.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an 'AS IS' BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import {
+ ChangeDetectionStrategy,
+ ChangeDetectorRef,
+ Component,
+ EventEmitter,
+ HostListener,
+ Input,
+ OnChanges, OnDestroy,
+ OnInit,
+ Output,
+ QueryList,
+ SimpleChange,
+ SimpleChanges,
+ ViewChildren
+} from '@angular/core';
+import {LocMeta, LogService, MetaUi, WebSocketService, ZoomUtils} from '../../../../gui2-fw-lib/public_api';
+import {
+ Badge,
+ Device, DeviceHighlight,
+ DeviceProps,
+ ForceDirectedGraph,
+ Host, HostHighlight,
+ HostLabelToggle,
+ LabelToggle,
+ LayerType,
+ Link,
+ LinkHighlight,
+ Location,
+ ModelEventMemo,
+ ModelEventType,
+ Node,
+ Options,
+ Region,
+ RegionLink,
+ SubRegion,
+ UiElement
+} from './models';
+import {LocationType} from '../backgroundsvg/backgroundsvg.component';
+import {DeviceNodeSvgComponent} from './visuals/devicenodesvg/devicenodesvg.component';
+import {HostNodeSvgComponent} from './visuals/hostnodesvg/hostnodesvg.component';
+import {LinkSvgComponent} from './visuals/linksvg/linksvg.component';
+import {SelectedEvent} from './visuals/nodevisual';
+
+interface UpdateMeta {
+ id: string;
+ class: string;
+ memento: MetaUi;
+}
+
+const SVGCANVAS = <Options>{
+ width: 1000,
+ height: 1000
+};
+
+interface ChangeSummary {
+ numChanges: number;
+ locationChanged: boolean;
+}
+
+/**
+ * ONOS GUI -- Topology Forces Graph Layer View.
+ *
+ * The regionData is set by Topology Service on WebSocket topo2CurrentRegion callback
+ * This drives the whole Force graph
+ */
+@Component({
+ selector: '[onos-forcesvg]',
+ templateUrl: './forcesvg.component.html',
+ styleUrls: ['./forcesvg.component.css'],
+ changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ForceSvgComponent implements OnInit, OnDestroy, OnChanges {
+ @Input() deviceLabelToggle: LabelToggle.Enum = LabelToggle.Enum.NONE;
+ @Input() hostLabelToggle: HostLabelToggle.Enum = HostLabelToggle.Enum.NONE;
+ @Input() showHosts: boolean = false;
+ @Input() showAlarms: boolean = false;
+ @Input() highlightPorts: boolean = true;
+ @Input() onosInstMastership: string = '';
+ @Input() visibleLayer: LayerType = LayerType.LAYER_DEFAULT;
+ @Input() selectedLink: RegionLink = null;
+ @Input() scale: number = 1;
+ @Input() regionData: Region = <Region>{devices: [ [], [], [] ], hosts: [ [], [], [] ], links: []};
+ @Output() linkSelected = new EventEmitter<RegionLink>();
+ @Output() selectedNodeEvent = new EventEmitter<UiElement[]>();
+ public graph: ForceDirectedGraph;
+ private selectedNodes: UiElement[] = [];
+ viewInitialized: boolean = false;
+
+ // References to the children of this component - these are created in the
+ // template view with the *ngFor and we get them by a query here
+ @ViewChildren(DeviceNodeSvgComponent) devices: QueryList<DeviceNodeSvgComponent>;
+ @ViewChildren(HostNodeSvgComponent) hosts: QueryList<HostNodeSvgComponent>;
+ @ViewChildren(LinkSvgComponent) links: QueryList<LinkSvgComponent>;
+
+ constructor(
+ protected log: LogService,
+ private ref: ChangeDetectorRef,
+ protected wss: WebSocketService
+ ) {
+ this.selectedLink = null;
+ this.log.debug('ForceSvgComponent constructed');
+ }
+
+ /**
+ * Utility for extracting a node name from an endpoint string
+ * In some cases - have to remove the port number from the end of a device
+ * name
+ * @param endPtStr The end point name
+ */
+ static extractNodeName(endPtStr: string, portStr: string): string {
+ if (portStr === undefined || endPtStr === undefined) {
+ return endPtStr;
+ } else if (endPtStr.includes('/')) {
+ return endPtStr.substr(0, endPtStr.length - portStr.length - 1);
+ }
+ return endPtStr;
+ }
+
+ /**
+ * Recursive method to compare 2 objects attribute by attribute and update
+ * the first where a change is detected
+ * @param existingNode 1st object
+ * @param updatedNode 2nd object
+ */
+ private static updateObject(existingNode: Object, updatedNode: Object): ChangeSummary {
+ const changed = <ChangeSummary>{numChanges: 0, locationChanged: false};
+ for (const key of Object.keys(updatedNode)) {
+ const o = updatedNode[key];
+ if (['id', 'x', 'y', 'fx', 'fy', 'vx', 'vy', 'index'].some(k => k === key)) {
+ continue;
+ } else if (o && typeof o === 'object' && o.constructor === Object) {
+ const subChanged = ForceSvgComponent.updateObject(existingNode[key], updatedNode[key]);
+ changed.numChanges += subChanged.numChanges;
+ changed.locationChanged = subChanged.locationChanged ? true : changed.locationChanged;
+ } else if (existingNode === undefined) {
+ // Copy the whole object
+ existingNode = updatedNode;
+ changed.locationChanged = true;
+ changed.numChanges++;
+ } else if (existingNode[key] !== updatedNode[key]) {
+ if (['locType', 'latOrY', 'longOrX', 'latitude', 'longitude', 'gridX', 'gridY'].some(k => k === key)) {
+ changed.locationChanged = true;
+ }
+ changed.numChanges++;
+ existingNode[key] = updatedNode[key];
+ }
+ }
+ return changed;
+ }
+
+ @HostListener('window:resize', ['$event'])
+ onResize(event) {
+ this.graph.restartSimulation();
+ this.log.debug('Simulation restart after resize', event);
+ }
+
+ /**
+ * After the component is initialized create the Force simulation
+ * The list of devices, hosts and links will not have been receieved back
+ * from the WebSocket yet as this time - they will be updated later through
+ * ngOnChanges()
+ */
+ ngOnInit() {
+ // Receiving an initialized simulated graph from our custom d3 service
+ this.graph = new ForceDirectedGraph(SVGCANVAS, this.log);
+
+ /** Binding change detection check on each tick
+ * This along with an onPush change detection strategy should enforce
+ * checking only when relevant! This improves scripting computation
+ * duration in a couple of tests I've made, consistently. Also, it makes
+ * sense to avoid unnecessary checks when we are dealing only with
+ * simulations data binding.
+ */
+ this.graph.ticker.subscribe((simulation) => {
+ // this.log.debug("Force simulation has ticked. Alpha",
+ // Math.round(simulation.alpha() * 1000) / 1000);
+ this.ref.markForCheck();
+ });
+
+ this.log.debug('ForceSvgComponent initialized - waiting for nodes and links');
+
+ }
+
+ /**
+ * When any one of the inputs get changed by a containing component, this
+ * gets called automatically. In addition this is called manually by
+ * topology.service when a response is received from the WebSocket from the
+ * server
+ *
+ * The Devices, Hosts and SubRegions are all added to the Node list for the simulation
+ * The Links are added to the Link list of the simulation.
+ * Before they are added the Links are associated with Nodes based on their endPt
+ *
+ * @param changes - a list of changed @Input(s)
+ */
+ ngOnChanges(changes: SimpleChanges) {
+ if (changes['regionData']) {
+ const devices: Device[] =
+ changes['regionData'].currentValue.devices[this.visibleLayerIdx()];
+ const hosts: Host[] =
+ changes['regionData'].currentValue.hosts[this.visibleLayerIdx()];
+ const subRegions: SubRegion[] = changes['regionData'].currentValue.subRegion;
+ this.graph.nodes = [];
+ if (devices) {
+ this.graph.nodes = devices;
+ }
+ if (hosts) {
+ this.graph.nodes = this.graph.nodes.concat(hosts);
+ }
+ if (subRegions) {
+ this.graph.nodes = this.graph.nodes.concat(subRegions);
+ }
+
+ this.graph.nodes.forEach((n) => this.fixPosition(n));
+
+ // Associate the endpoints of each link with a real node
+ this.graph.links = [];
+ for (const linkIdx of Object.keys(this.regionData.links)) {
+ const link = this.regionData.links[linkIdx];
+ const epA = ForceSvgComponent.extractNodeName(link.epA, link.portA);
+ if (!this.graph.nodes.find((node) => node.id === epA)) {
+ this.log.error('ngOnChange Could not find endpoint A', epA, 'for', link);
+ continue;
+ }
+ const epB = ForceSvgComponent.extractNodeName(
+ link.epB, link.portB);
+ if (!this.graph.nodes.find((node) => node.id === epB)) {
+ this.log.error('ngOnChange Could not find endpoint B', epB, 'for', link);
+ continue;
+ }
+ this.regionData.links[linkIdx].source =
+ this.graph.nodes.find((node) =>
+ node.id === epA);
+ this.regionData.links[linkIdx].target =
+ this.graph.nodes.find((node) =>
+ node.id === epB);
+ this.regionData.links[linkIdx].index = Number(linkIdx);
+ }
+
+ this.graph.links = this.regionData.links;
+ if (this.graph.nodes.length > 0) {
+ this.graph.reinitSimulation();
+ }
+ this.log.debug('ForceSvgComponent input changed',
+ this.graph.nodes.length, 'nodes,', this.graph.links.length, 'links');
+ if (!this.viewInitialized) {
+ this.viewInitialized = true;
+ if (this.showAlarms) {
+ this.wss.sendEvent('alarmTopovDisplayStart', {});
+ }
+ }
+ }
+
+ if (changes['showAlarms'] && this.viewInitialized) {
+ if (this.showAlarms) {
+ this.wss.sendEvent('alarmTopovDisplayStart', {});
+ } else {
+ this.wss.sendEvent('alarmTopovDisplayStop', {});
+ this.cancelAllDeviceHighlightsNow();
+ }
+ }
+ }
+
+ ngOnDestroy(): void {
+ if (this.showAlarms) {
+ this.wss.sendEvent('alarmTopovDisplayStop', {});
+ this.cancelAllDeviceHighlightsNow();
+ }
+ this.viewInitialized = false;
+ }
+
+ /**
+ * If instance has a value then mute colors of devices not connected to it
+ * Otherwise if instance does not have a value unmute all
+ * @param instanceName name of the selected instance
+ */
+ changeInstSelection(instanceName: string) {
+ this.log.debug('Mastership changed', instanceName);
+ this.devices.filter((d) => d.device.master !== instanceName)
+ .forEach((d) => {
+ const isMuted = Boolean(instanceName);
+ d.ngOnChanges({'colorMuted': new SimpleChange(!isMuted, isMuted, true)});
+ }
+ );
+ }
+
+ /**
+ * If a node has a fixed location then assign it to fx and fy so
+ * that it doesn't get affected by forces
+ * @param graphNode The node whose location should be processed
+ */
+ private fixPosition(graphNode: Node): void {
+ const loc: Location = <Location>graphNode['location'];
+ const props: DeviceProps = <DeviceProps>graphNode['props'];
+ const metaUi = <MetaUi>graphNode['metaUi'];
+ if (loc && loc.locType === LocationType.GEO) {
+ const position: MetaUi =
+ ZoomUtils.convertGeoToCanvas(
+ <LocMeta>{lng: loc.longOrX, lat: loc.latOrY});
+ graphNode.fx = position.x;
+ graphNode.fy = position.y;
+ this.log.debug('Found node', graphNode.id, 'with', loc.locType);
+ } else if (loc && loc.locType === LocationType.GRID) {
+ graphNode.fx = loc.longOrX;
+ graphNode.fy = loc.latOrY;
+ this.log.debug('Found node', graphNode.id, 'with', loc.locType);
+ } else if (props && props.locType === LocationType.NONE && metaUi) {
+ graphNode.fx = metaUi.x;
+ graphNode.fy = metaUi.y;
+ this.log.debug('Found node', graphNode.id, 'with locType=none and metaUi');
+ } else {
+ graphNode.fx = null;
+ graphNode.fy = null;
+ }
+ }
+
+ /**
+ * Get the index of LayerType so it can drive the visibility of nodes and
+ * hosts on layers
+ */
+ visibleLayerIdx(): number {
+ const layerKeys: string[] = Object.keys(LayerType);
+ for (const idx in layerKeys) {
+ if (LayerType[layerKeys[idx]] === this.visibleLayer) {
+ return Number(idx);
+ }
+ }
+ return -1;
+ }
+
+ selectLink(link: RegionLink): void {
+ this.selectedLink = link;
+ this.linkSelected.emit(link);
+ }
+
+ /**
+ * Iterate through all hosts and devices and links to deselect the previously selected
+ * node. The emit an event to the parent that lets it know the selection has
+ * changed.
+ *
+ * This function collates all of the nodes that have been selected and passes
+ * a collection of nodes up to the topology component
+ *
+ * @param selectedNode the newly selected node
+ */
+ updateSelected(selectedNode: SelectedEvent): void {
+ this.log.debug('Node or link ',
+ selectedNode.uiElement ? selectedNode.uiElement.id : '--',
+ selectedNode.deselecting ? 'deselected' : 'selected',
+ selectedNode.isShift ? 'Multiple' : '');
+
+ if (selectedNode.isShift && selectedNode.deselecting) {
+ const idx = this.selectedNodes.findIndex((n) =>
+ n.id === selectedNode.uiElement.id
+ );
+ this.selectedNodes.splice(idx, 1);
+ this.log.debug('Removed node', idx);
+
+ } else if (selectedNode.isShift) {
+ this.selectedNodes.push(selectedNode.uiElement);
+
+ } else if (selectedNode.deselecting) {
+ this.devices
+ .forEach((d) => d.deselect());
+ this.hosts
+ .forEach((h) => h.deselect());
+ this.links
+ .forEach((l) => l.deselect());
+ this.selectedNodes = [];
+
+ } else {
+ const selNodeId = selectedNode.uiElement.id;
+ // Otherwise if shift was not pressed deselect previous
+ this.devices
+ .filter((d) => d.device.id !== selNodeId)
+ .forEach((d) => d.deselect());
+ this.hosts
+ .filter((h) => h.host.id !== selNodeId)
+ .forEach((h) => h.deselect());
+
+ this.links
+ .filter((l) => l.link.id !== selNodeId)
+ .forEach((l) => l.deselect());
+
+ this.selectedNodes = [selectedNode.uiElement];
+ }
+ // Push the changes back up to parent (Topology Component)
+ this.selectedNodeEvent.emit(this.selectedNodes);
+ }
+
+ /**
+ * We want to filter links to show only those not related to hosts if the
+ * 'showHosts' flag has been switched off. If 'showHosts' is true, then
+ * display all links.
+ */
+ filteredLinks(): Link[] {
+ return this.regionData.links.filter((h) =>
+ this.showHosts ||
+ ((<Host>h.source).nodeType !== 'host' &&
+ (<Host>h.target).nodeType !== 'host'));
+ }
+
+ /**
+ * When changes happen in the model, then model events are sent up through the
+ * Web Socket
+ * @param type - the type of the change
+ * @param memo - a qualifier on the type
+ * @param subject - the item that the update is for
+ * @param data - the new definition of the item
+ */
+ handleModelEvent(type: ModelEventType, memo: ModelEventMemo, subject: string, data: UiElement): void {
+ switch (type) {
+ case ModelEventType.DEVICE_ADDED_OR_UPDATED:
+ if (memo === ModelEventMemo.ADDED) {
+ this.fixPosition(<Device>data);
+ this.graph.nodes.push(<Device>data);
+ this.regionData.devices[this.visibleLayerIdx()].push(<Device>data);
+ this.log.debug('Device added', (<Device>data).id);
+ } else if (memo === ModelEventMemo.UPDATED) {
+ const oldDevice: Device =
+ this.regionData.devices[this.visibleLayerIdx()]
+ .find((d) => d.id === subject);
+ const changes = ForceSvgComponent.updateObject(oldDevice, <Device>data);
+ if (changes.numChanges > 0) {
+ this.log.debug('Device ', oldDevice.id, memo, ' - ', changes, 'changes');
+ if (changes.locationChanged) {
+ this.fixPosition(oldDevice);
+ }
+ const svgDevice: DeviceNodeSvgComponent =
+ this.devices.find((svgdevice) => svgdevice.device.id === subject);
+ svgDevice.ngOnChanges({'device':
+ new SimpleChange(<Device>{}, oldDevice, true)
+ });
+ }
+ } else {
+ this.log.warn('Device ', memo, ' - not yet implemented', data);
+ }
+ break;
+ case ModelEventType.HOST_ADDED_OR_UPDATED:
+ if (memo === ModelEventMemo.ADDED) {
+ this.fixPosition(<Host>data);
+ this.graph.nodes.push(<Host>data);
+ this.regionData.hosts[this.visibleLayerIdx()].push(<Host>data);
+ this.log.debug('Host added', (<Host>data).id);
+ } else if (memo === ModelEventMemo.UPDATED) {
+ const oldHost: Host = this.regionData.hosts[this.visibleLayerIdx()]
+ .find((h) => h.id === subject);
+ const changes = ForceSvgComponent.updateObject(oldHost, <Host>data);
+ if (changes.numChanges > 0) {
+ this.log.debug('Host ', oldHost.id, memo, ' - ', changes, 'changes');
+ if (changes.locationChanged) {
+ this.fixPosition(oldHost);
+ }
+ }
+ } else {
+ this.log.warn('Host change', memo, ' - unexpected');
+ }
+ break;
+ case ModelEventType.DEVICE_REMOVED:
+ if (memo === ModelEventMemo.REMOVED || memo === undefined) {
+ const removeIdx: number =
+ this.regionData.devices[this.visibleLayerIdx()]
+ .findIndex((d) => d.id === subject);
+ this.regionData.devices[this.visibleLayerIdx()].splice(removeIdx, 1);
+ this.removeRelatedLinks(subject);
+ this.log.debug('Device ', subject, 'removed. Links', this.regionData.links);
+ } else {
+ this.log.warn('Device removed - unexpected memo', memo);
+ }
+ break;
+ case ModelEventType.HOST_REMOVED:
+ if (memo === ModelEventMemo.REMOVED || memo === undefined) {
+ const removeIdx: number =
+ this.regionData.hosts[this.visibleLayerIdx()]
+ .findIndex((h) => h.id === subject);
+ this.regionData.hosts[this.visibleLayerIdx()].splice(removeIdx, 1);
+ this.removeRelatedLinks(subject);
+ this.log.debug('Host ', subject, 'removed');
+ } else {
+ this.log.warn('Host removed - unexpected memo', memo);
+ }
+ break;
+ case ModelEventType.LINK_ADDED_OR_UPDATED:
+ if (memo === ModelEventMemo.ADDED &&
+ this.regionData.links.findIndex((l) => l.id === subject) === -1) {
+ const newLink = <RegionLink>data;
+
+
+ const epA = ForceSvgComponent.extractNodeName(
+ newLink.epA, newLink.portA);
+ if (!this.graph.nodes.find((node) => node.id === epA)) {
+ this.log.error('Could not find endpoint A', epA, 'of', newLink);
+ break;
+ }
+ const epB = ForceSvgComponent.extractNodeName(
+ newLink.epB, newLink.portB);
+ if (!this.graph.nodes.find((node) => node.id === epB)) {
+ this.log.error('Could not find endpoint B', epB, 'of link', newLink);
+ break;
+ }
+
+ const listLen = this.regionData.links.push(<RegionLink>data);
+ this.regionData.links[listLen - 1].source =
+ this.graph.nodes.find((node) => node.id === epA);
+ this.regionData.links[listLen - 1].target =
+ this.graph.nodes.find((node) => node.id === epB);
+ this.log.debug('Link added', subject);
+ } else if (memo === ModelEventMemo.UPDATED) {
+ const oldLink = this.regionData.links.find((l) => l.id === subject);
+ const changes = ForceSvgComponent.updateObject(oldLink, <RegionLink>data);
+ this.log.debug('Link ', subject, '. Updated', changes, 'items');
+ } else {
+ this.log.warn('Link event ignored', subject, data);
+ }
+ break;
+ case ModelEventType.LINK_REMOVED:
+ if (memo === ModelEventMemo.REMOVED) {
+ const removeIdx = this.regionData.links.findIndex((l) => l.id === subject);
+ this.regionData.links.splice(removeIdx, 1);
+ this.log.debug('Link ', subject, 'removed');
+ }
+ break;
+ default:
+ this.log.error('Unexpected model event', type, 'for', subject, 'Data', data);
+ }
+ this.graph.links = this.regionData.links;
+ this.graph.reinitSimulation();
+ }
+
+ private removeRelatedLinks(subject: string) {
+ const len = this.regionData.links.length;
+ for (let i = 0; i < len; i++) {
+ const linkIdx = this.regionData.links.findIndex((l) =>
+ (ForceSvgComponent.extractNodeName(l.epA, l.portA) === subject ||
+ ForceSvgComponent.extractNodeName(l.epB, l.portB) === subject));
+ if (linkIdx >= 0) {
+ this.regionData.links.splice(linkIdx, 1);
+ this.log.debug('Link ', linkIdx, 'removed on attempt', i);
+ }
+ }
+ }
+
+ /**
+ * When traffic monitoring is turned on (A key) highlights will be sent back
+ * from the WebSocket through the Traffic Service
+ * Also handles Intent highlights in case one is selected
+ * @param devices - an array of device highlights
+ * @param hosts - an array of host highlights
+ * @param links - an array of link highlights
+ */
+ handleHighlights(devices: DeviceHighlight[], hosts: HostHighlight[], links: LinkHighlight[], fadeMs: number = 0): void {
+
+ if (devices.length > 0) {
+ this.log.debug(devices.length, 'Devices highlighted');
+ devices.forEach((dh: DeviceHighlight) => {
+ this.devices.forEach((d: DeviceNodeSvgComponent) => {
+ if (d.device.id === dh.id) {
+ d.badge = dh.badge;
+ this.ref.markForCheck(); // Forces ngOnChange in the DeviceSvgComponent
+ this.log.debug('Highlighting device', dh.id);
+ }
+ });
+ });
+ }
+ if (hosts.length > 0) {
+ this.log.debug(hosts.length, 'Hosts highlighted');
+ hosts.forEach((hh: HostHighlight) => {
+ this.hosts.forEach((h) => {
+ if (h.host.id === hh.id) {
+ h.badge = hh.badge;
+ this.ref.markForCheck(); // Forces ngOnChange in the HostSvgComponent
+ this.log.debug('Highlighting host', hh.id);
+ }
+ });
+ });
+ }
+ if (links.length > 0) {
+ this.log.debug(links.length, 'Links highlighted');
+ links.forEach((lh: LinkHighlight) => {
+ if (fadeMs > 0) {
+ lh.fadems = fadeMs;
+ }
+ // Don't user .filter() above as it will create a copy of the component which will be discarded
+ this.links.forEach((l) => {
+ if (l.link.id === Link.linkIdFromShowHighlights(lh.id)) {
+ l.linkHighlight = lh;
+ this.ref.markForCheck(); // Forces ngOnChange in the LinkSvgComponent
+ }
+ });
+ });
+ }
+ }
+
+ cancelAllHostHighlightsNow() {
+ this.hosts.forEach((host: HostNodeSvgComponent) => {
+ host.badge = undefined;
+ this.ref.markForCheck(); // Forces ngOnChange in the HostSvgComponent
+ });
+ }
+
+ cancelAllDeviceHighlightsNow() {
+ this.devices.forEach((device: DeviceNodeSvgComponent) => {
+ device.badge = undefined;
+ this.ref.markForCheck(); // Forces ngOnChange in the DeviceSvgComponent
+ });
+ }
+
+ cancelAllLinkHighlightsNow() {
+ this.links.forEach((link: LinkSvgComponent) => {
+ link.linkHighlight = <LinkHighlight>{};
+ this.ref.markForCheck(); // Forces ngOnChange in the LinkSvgComponent
+ });
+ }
+
+ /**
+ * As nodes are dragged around the graph, their new location should be sent
+ * back to server
+ * @param klass The class of node e.g. 'host' or 'device'
+ * @param id - the ID of the node
+ * @param newLocation - the new Location of the node
+ */
+ nodeMoved(klass: string, id: string, newLocation: MetaUi) {
+ this.wss.sendEvent('updateMeta2', <UpdateMeta>{
+ id: id,
+ class: klass,
+ memento: newLocation
+ });
+ this.log.debug(klass, id, 'has been moved to', newLocation);
+ }
+
+ /**
+ * If any nodes with fixed positions had been dragged out of place
+ * then put back where they belong
+ * If there are some devices selected reset only these
+ */
+ resetNodeLocations(): number {
+ let numbernodes = 0;
+ if (this.selectedNodes.length > 0) {
+ this.devices
+ .filter((d) => this.selectedNodes.some((s) => s.id === d.device.id))
+ .forEach((dev) => {
+ Node.resetNodeLocation(<Node>dev.device);
+ numbernodes++;
+ });
+ this.hosts
+ .filter((h) => this.selectedNodes.some((s) => s.id === h.host.id))
+ .forEach((h) => {
+ Host.resetNodeLocation(<Host>h.host);
+ numbernodes++;
+ });
+ } else {
+ this.devices.forEach((dev) => {
+ Node.resetNodeLocation(<Node>dev.device);
+ numbernodes++;
+ });
+ this.hosts.forEach((h) => {
+ Host.resetNodeLocation(<Host>h.host);
+ numbernodes++;
+ });
+ }
+ this.graph.reinitSimulation();
+ return numbernodes;
+ }
+
+ /**
+ * Toggle floating nodes between unpinned and frozen
+ * There may be frozen and unpinned in the selection
+ *
+ * If there are nodes selected toggle only these
+ */
+ unpinOrFreezeNodes(freeze: boolean): number {
+ let numbernodes = 0;
+ if (this.selectedNodes.length > 0) {
+ this.devices
+ .filter((d) => this.selectedNodes.some((s) => s.id === d.device.id))
+ .forEach((d) => {
+ Node.unpinOrFreezeNode(<Node>d.device, freeze);
+ numbernodes++;
+ });
+ this.hosts
+ .filter((h) => this.selectedNodes.some((s) => s.id === h.host.id))
+ .forEach((h) => {
+ Node.unpinOrFreezeNode(<Node>h.host, freeze);
+ numbernodes++;
+ });
+ } else {
+ this.devices.forEach((d) => {
+ Node.unpinOrFreezeNode(<Node>d.device, freeze);
+ numbernodes++;
+ });
+ this.hosts.forEach((h) => {
+ Node.unpinOrFreezeNode(<Node>h.host, freeze);
+ numbernodes++;
+ });
+ }
+ this.graph.reinitSimulation();
+ return numbernodes;
+ }
+}
+
diff --git a/web/gui2-topo-lib/lib/layer/forcesvg/models/force-directed-graph.spec.ts b/web/gui2-topo-lib/lib/layer/forcesvg/models/force-directed-graph.spec.ts
new file mode 100644
index 0000000..2fb9155
--- /dev/null
+++ b/web/gui2-topo-lib/lib/layer/forcesvg/models/force-directed-graph.spec.ts
@@ -0,0 +1,101 @@
+/*
+ * Copyright 2018-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.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an 'AS IS' BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import {ForceDirectedGraph, Options} from './force-directed-graph';
+import {Node} from './node';
+import {Link} from './link';
+import {LogService} from '../../../../../gui2-fw-lib/public_api';
+import {TestBed} from '@angular/core/testing';
+
+export class TestNode extends Node {
+ constructor(id: string) {
+ super(id);
+ }
+}
+
+export class TestLink extends Link {
+ constructor(source: Node, target: Node) {
+ super(source, target);
+ }
+}
+
+/**
+ * ONOS GUI -- ForceDirectedGraph - Unit Tests
+ */
+describe('ForceDirectedGraph', () => {
+ let logServiceSpy: jasmine.SpyObj<LogService>;
+ let fdg: ForceDirectedGraph;
+ const options: Options = {width: 1000, height: 1000};
+
+ beforeEach(() => {
+ const logSpy = jasmine.createSpyObj('LogService', ['info', 'debug', 'warn', 'error']);
+ const nodes: Node[] = [];
+ const links: Link[] = [];
+ fdg = new ForceDirectedGraph(options, logSpy);
+
+ for (let i = 0; i < 10; i++) {
+ const newNode: TestNode = new TestNode('id' + i);
+ nodes.push(newNode);
+ }
+ for (let j = 1; j < 10; j++) {
+ const newLink = new TestLink(nodes[0], nodes[j]);
+ links.push(newLink);
+ }
+ fdg.nodes = nodes;
+ fdg.links = links;
+ fdg.reinitSimulation();
+ logServiceSpy = TestBed.get(LogService);
+ });
+
+ afterEach(() => {
+ fdg.stopSimulation();
+ fdg.nodes = [];
+ fdg.links = [];
+ fdg.reinitSimulation();
+ });
+
+ it('should be created', () => {
+ expect(fdg).toBeTruthy();
+ });
+
+ it('should have simulation', () => {
+ expect(fdg.simulation).toBeTruthy();
+ });
+
+ it('should have 10 nodes', () => {
+ expect(fdg.nodes.length).toEqual(10);
+ });
+
+ it('should have 10 links', () => {
+ expect(fdg.links.length).toEqual(9);
+ });
+
+ // TODO fix these up to listen for tick
+ // it('nodes should not be at zero', () => {
+ // expect(nodes[0].x).toBeGreaterThan(0);
+ // });
+ // it('ticker should emit', () => {
+ // let tickMe = jasmine.createSpy("tickMe() spy");
+ // fdg.ticker.subscribe((simulation) => tickMe());
+ // expect(tickMe).toHaveBeenCalled();
+ // });
+
+ // it('init links chould be called ', () => {
+ // spyOn(fdg, 'initLinks');
+ // // expect(fdg).toBeTruthy();
+ // fdg.reinitSimulation(options);
+ // expect(fdg.initLinks).toHaveBeenCalled();
+ // });
+});
diff --git a/web/gui2-topo-lib/lib/layer/forcesvg/models/force-directed-graph.ts b/web/gui2-topo-lib/lib/layer/forcesvg/models/force-directed-graph.ts
new file mode 100644
index 0000000..7bf44af
--- /dev/null
+++ b/web/gui2-topo-lib/lib/layer/forcesvg/models/force-directed-graph.ts
@@ -0,0 +1,126 @@
+/*
+ * Copyright 2018-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.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an 'AS IS' BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { EventEmitter } from '@angular/core';
+import { Link } from './link';
+import { Node } from './node';
+import * as d3 from 'd3-force';
+import {LogService} from '../../../../../gui2-fw-lib/public_api';
+
+const FORCES = {
+ COLLISION: 1,
+ GRAVITY: 0.4,
+ FRICTION: 0.7
+};
+
+const CHARGES = {
+ device: -800,
+ host: -2000,
+ region: -800,
+ _def_: -1200
+};
+
+const LINK_DISTANCE = {
+ // note: key is link.type
+ direct: 100,
+ optical: 120,
+ UiEdgeLink: 3,
+ UiDeviceLink: 100,
+ _def_: 50,
+};
+
+/**
+ * note: key is link.type
+ * range: {0.0 ... 1.0}
+ */
+const LINK_STRENGTH = {
+ _def_: 0.5
+};
+
+export interface Options {
+ width: number;
+ height: number;
+}
+
+/**
+ * The inspiration for this approach comes from
+ * https://medium.com/netscape/visualizing-data-with-angular-and-d3-209dde784aeb
+ *
+ * Do yourself a favour and read https://d3indepth.com/force-layout/
+ */
+export class ForceDirectedGraph {
+ public ticker: EventEmitter<d3.Simulation<Node, Link>> = new EventEmitter();
+ public simulation: d3.Simulation<any, any>;
+ public canvasOptions: Options;
+ public nodes: Node[] = [];
+ public links: Link[] = [];
+
+ constructor(options: Options, public log: LogService) {
+ this.canvasOptions = options;
+ const ticker = this.ticker;
+
+ // Creating the force simulation and defining the charges
+ this.simulation = d3.forceSimulation()
+ .force('charge',
+ d3.forceManyBody().strength(this.charges.bind(this)))
+ // .distanceMin(100).distanceMax(500))
+ .force('gravity',
+ d3.forceManyBody().strength(FORCES.GRAVITY))
+ .force('friction',
+ d3.forceManyBody().strength(FORCES.FRICTION))
+ .force('center',
+ d3.forceCenter(this.canvasOptions.width / 2, this.canvasOptions.height / 2))
+ .force('x', d3.forceX())
+ .force('y', d3.forceY())
+ .on('tick', () => {
+ ticker.emit(this.simulation); // ForceSvgComponent.ngOnInit listens
+ });
+
+ }
+
+ /**
+ * Assigning updated node and restarting the simulation
+ * Setting alpha to 0.3 and it will count down to alphaTarget=0
+ */
+ public reinitSimulation() {
+ this.simulation.nodes(this.nodes);
+ this.simulation.force('link',
+ d3.forceLink(this.links)
+ .strength(LINK_STRENGTH._def_)
+ .distance(this.distance.bind(this))
+ );
+ this.simulation.alpha(0.3).restart();
+ }
+
+ charges(node: Node) {
+ const nodeType = node.nodeType;
+ return CHARGES[nodeType] || CHARGES._def_;
+ }
+
+ distance(link: Link) {
+ const linkType = link.type;
+ return LINK_DISTANCE[linkType] || LINK_DISTANCE._def_;
+ }
+
+ stopSimulation() {
+ this.simulation.stop();
+ this.log.debug('Simulation stopped');
+ }
+
+ public restartSimulation(alpha: number = 0.3) {
+ this.simulation.alpha(alpha).restart();
+ this.log.debug('Simulation restarted. Alpha:', alpha);
+ }
+}
diff --git a/web/gui2-topo-lib/lib/layer/forcesvg/models/index.ts b/web/gui2-topo-lib/lib/layer/forcesvg/models/index.ts
new file mode 100644
index 0000000..36fd2e7
--- /dev/null
+++ b/web/gui2-topo-lib/lib/layer/forcesvg/models/index.ts
@@ -0,0 +1,20 @@
+/*
+ * Copyright 2018-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.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an 'AS IS' BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export * from './node';
+export * from './link';
+export * from './regions';
+
+export * from './force-directed-graph';
diff --git a/web/gui2-topo-lib/lib/layer/forcesvg/models/link.ts b/web/gui2-topo-lib/lib/layer/forcesvg/models/link.ts
new file mode 100644
index 0000000..d5ff2a7
--- /dev/null
+++ b/web/gui2-topo-lib/lib/layer/forcesvg/models/link.ts
@@ -0,0 +1,115 @@
+/*
+ * 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.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an 'AS IS' BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import {Node, UiElement} from './node';
+import * as d3 from 'd3';
+
+export enum LinkType {
+ UiRegionLink,
+ UiDeviceLink,
+ UiEdgeLink
+}
+
+/**
+ * model of the topo2CurrentRegion region rollup from Region below
+ *
+ */
+export interface RegionRollup {
+ id: string;
+ epA: string;
+ epB: string;
+ portA: string;
+ portB: string;
+ type: LinkType;
+}
+
+/**
+ * Implementing SimulationLinkDatum interface into our custom Link class
+ */
+export class Link implements UiElement, d3.SimulationLinkDatum<Node> {
+ // Optional - defining optional implementation properties - required for relevant typing assistance
+ index?: number;
+ id: string; // The id of the link in the format epA/portA~epB/portB
+ epA: string; // The name of the device or host at one end
+ epB: string; // The name of the device or host at the other end
+ portA: string; // The number of the port at one end
+ portB: string; // The number of the port at the other end
+ type: LinkType;
+ rollup: RegionRollup[]; // Links in sub regions represented by this one link
+
+ // Must - defining enforced implementation properties
+ source: Node;
+ target: Node;
+
+ public static deviceNameFromEp(ep: string): string {
+ if (ep !== undefined && ep.lastIndexOf('/') > 0) {
+ return ep.substr(0, ep.lastIndexOf('/'));
+ }
+ return ep;
+ }
+
+ /**
+ * The WSS event showHighlights is sent up with a slightly different
+ * name format on the link id using the "-" separator rather than the "~"
+ * @param linkId The id of the link in either format
+ */
+ public static linkIdFromShowHighlights(linkId: string) {
+ if (linkId.includes('-')) {
+ const parts: string[] = linkId.split('-');
+ const part0 = Link.removeHostPortNum(parts[0]);
+ const part1 = Link.removeHostPortNum(parts[1]);
+ return part0 + '~' + part1;
+ }
+ return linkId;
+ }
+
+ private static removeHostPortNum(hostStr: string) {
+ if (hostStr.includes('/None/')) {
+ const subparts = hostStr.split('/');
+ return subparts[0] + '/' + subparts[1];
+ }
+ return hostStr;
+ }
+
+ constructor(source, target) {
+ this.source = source;
+ this.target = target;
+ }
+
+ linkTypeStr(): string {
+ return LinkType[this.type];
+ }
+}
+
+/**
+ * model of the topo2CurrentRegion region link from Region
+ */
+export class RegionLink extends Link {
+
+ constructor(type: LinkType, nodeA: Node, nodeB: Node) {
+ super(nodeA, nodeB);
+ this.type = type;
+ }
+}
+
+/**
+ * model of the highlights that are sent back from WebSocket when traffic is shown
+ */
+export interface LinkHighlight {
+ id: string;
+ css: string;
+ label: string;
+ fadems: number;
+}
diff --git a/web/gui2-topo-lib/lib/layer/forcesvg/models/node.ts b/web/gui2-topo-lib/lib/layer/forcesvg/models/node.ts
new file mode 100644
index 0000000..5bcba8c
--- /dev/null
+++ b/web/gui2-topo-lib/lib/layer/forcesvg/models/node.ts
@@ -0,0 +1,309 @@
+/*
+ * Copyright 2018-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.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an 'AS IS' BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import * as d3 from 'd3';
+import {LocationType} from '../../backgroundsvg/backgroundsvg.component';
+import {LayerType, Location, NodeType, RegionProps} from './regions';
+import {LocMeta, MetaUi, ZoomUtils} from '../../../../../gui2-fw-lib/public_api';
+
+export interface UiElement {
+ index?: number;
+ id: string;
+}
+
+export namespace LabelToggle {
+ /**
+ * Toggle state for how device labels should be displayed
+ */
+ export enum Enum {
+ NONE,
+ ID,
+ NAME
+ }
+
+ /**
+ * Add the method 'next()' to the LabelToggle enum above
+ */
+ export function next(current: Enum) {
+ if (current === Enum.NONE) {
+ return Enum.ID;
+ } else if (current === Enum.ID) {
+ return Enum.NAME;
+ } else if (current === Enum.NAME) {
+ return Enum.NONE;
+ }
+ }
+}
+
+export namespace HostLabelToggle {
+ /**
+ * Toggle state for how host labels should be displayed
+ */
+ export enum Enum {
+ NONE,
+ NAME,
+ IP,
+ MAC
+ }
+
+ /**
+ * Add the method 'next()' to the HostLabelToggle enum above
+ */
+ export function next(current: Enum) {
+ if (current === Enum.NONE) {
+ return Enum.NAME;
+ } else if (current === Enum.NAME) {
+ return Enum.IP;
+ } else if (current === Enum.IP) {
+ return Enum.MAC;
+ } else if (current === Enum.MAC) {
+ return Enum.NONE;
+ }
+ }
+}
+
+export namespace GridDisplayToggle {
+ /**
+ * Toggle state for how the grid should be displayed
+ */
+ export enum Enum {
+ GRIDNONE,
+ GRID1000,
+ GRIDGEO,
+ GRIDBOTH
+ }
+
+ /**
+ * Add the method 'next()' to the GridDisplayToggle enum above
+ */
+ export function next(current: Enum) {
+ if (current === Enum.GRIDNONE) {
+ return Enum.GRID1000;
+ } else if (current === Enum.GRID1000) {
+ return Enum.GRIDGEO;
+ } else if (current === Enum.GRIDGEO) {
+ return Enum.GRIDBOTH;
+ } else if (current === Enum.GRIDBOTH) {
+ return Enum.GRIDNONE;
+ }
+ }
+}
+
+/**
+ * model of the topo2CurrentRegion device props from Device below
+ */
+export interface DeviceProps {
+ latitude: string;
+ longitude: string;
+ gridX: number;
+ gridY: number;
+ name: string;
+ locType: LocationType;
+ uiType: string;
+ channelId: string;
+ managementAddress: string;
+ protocol: string;
+ driver: string;
+}
+
+export interface HostProps {
+ gridX: number;
+ gridY: number;
+ latitude: number;
+ longitude: number;
+ locType: LocationType;
+ name: string;
+}
+
+/**
+ * Implementing SimulationNodeDatum interface into our custom Node class
+ */
+export class Node implements UiElement, d3.SimulationNodeDatum {
+ // Optional - defining optional implementation properties - required for relevant typing assistance
+ index?: number;
+ x: number;
+ y: number;
+ vx?: number;
+ vy?: number;
+ fx?: number | null;
+ fy?: number | null;
+ nodeType: NodeType;
+ location: Location;
+ id: string;
+
+ protected constructor(id) {
+ this.id = id;
+ this.x = 0;
+ this.y = 0;
+ }
+
+ /**
+ * Static method to reset the node's position to that specified in its
+ * coordinates
+ * This is overridden for host
+ * @param node The node to reset
+ */
+ static resetNodeLocation(node: Node): void {
+ let origLoc: MetaUi;
+
+ if (!node.location || node.location.locType === LocationType.NONE) {
+ // No location - nothing to do
+ return;
+ } else if (node.location.locType === LocationType.GEO) {
+ origLoc = ZoomUtils.convertGeoToCanvas(<LocMeta>{
+ lng: node.location.longOrX,
+ lat: node.location.latOrY
+ });
+ } else if (node.location.locType === LocationType.GRID) {
+ origLoc = ZoomUtils.convertXYtoGeo(
+ node.location.longOrX, node.location.latOrY);
+ }
+ Node.moveNodeTo(node, origLoc);
+ }
+
+ protected static moveNodeTo(node: Node, origLoc: MetaUi) {
+ const currentX = node.fx;
+ const currentY = node.fy;
+ const distX = origLoc.x - node.fx;
+ const distY = origLoc.y - node.fy;
+ let count = 0;
+ const task = setInterval(() => {
+ count++;
+ if (count >= 10) {
+ clearInterval(task);
+ }
+ node.fx = currentX + count * distX / 10;
+ node.fy = currentY + count * distY / 10;
+ }, 50);
+ }
+
+ static unpinOrFreezeNode(node: Node, freeze: boolean): void {
+ if (!node.location || node.location.locType === LocationType.NONE) {
+ if (freeze) {
+ node.fx = node.x;
+ node.fy = node.y;
+ } else {
+ node.fx = null;
+ node.fy = null;
+ }
+ }
+ }
+}
+
+export interface Badge {
+ status: string;
+ isGlyph: boolean;
+ txt: string;
+ msg: string;
+}
+
+/**
+ * model of the topo2CurrentRegion device from Region below
+ */
+export class Device extends Node {
+ id: string;
+ layer: LayerType;
+ metaUi: MetaUi;
+ master: string;
+ online: boolean;
+ props: DeviceProps;
+ type: string;
+
+ constructor(id: string) {
+ super(id);
+ }
+}
+
+export interface DeviceHighlight {
+ id: string;
+ badge: Badge;
+}
+
+export interface HostHighlight {
+ id: string;
+ badge: Badge;
+}
+
+/**
+ * Model of the ONOS Host element in the topology
+ */
+export class Host extends Node {
+ configured: boolean;
+ id: string;
+ ips: string[];
+ layer: LayerType;
+ props: HostProps;
+
+ constructor(id: string) {
+ super(id);
+ }
+
+ static resetNodeLocation(host: Host): void {
+ let origLoc: MetaUi;
+
+ if (!host.props || host.props.locType === LocationType.NONE) {
+ // No location - nothing to do
+ return;
+ } else if (host.props.locType === LocationType.GEO) {
+ origLoc = ZoomUtils.convertGeoToCanvas(<LocMeta>{
+ lng: host.props.longitude,
+ lat: host.props.latitude
+ });
+ } else if (host.props.locType === LocationType.GRID) {
+ origLoc = ZoomUtils.convertXYtoGeo(
+ host.props.gridX, host.props.gridY);
+ }
+ Node.moveNodeTo(host, origLoc);
+ }
+}
+
+
+/**
+ * model of the topo2CurrentRegion subregion from Region below
+ */
+export class SubRegion extends Node {
+ id: string;
+ location: Location;
+ nDevs: number;
+ nHosts: number;
+ name: string;
+ props: RegionProps;
+
+ constructor(id: string) {
+ super(id);
+ }
+}
+
+/**
+ * Enumerated values for topology update event types
+ */
+export enum ModelEventType {
+ HOST_ADDED_OR_UPDATED,
+ LINK_ADDED_OR_UPDATED,
+ DEVICE_ADDED_OR_UPDATED,
+ DEVICE_REMOVED,
+ HOST_REMOVED,
+ LINK_REMOVED,
+}
+
+/**
+ * Enumerated values for topology update event memo field
+ */
+export enum ModelEventMemo {
+ ADDED = 'added',
+ REMOVED = 'removed',
+ UPDATED = 'updated'
+}
+
diff --git a/web/gui2-topo-lib/lib/layer/forcesvg/models/regions.ts b/web/gui2-topo-lib/lib/layer/forcesvg/models/regions.ts
new file mode 100644
index 0000000..3c1894b
--- /dev/null
+++ b/web/gui2-topo-lib/lib/layer/forcesvg/models/regions.ts
@@ -0,0 +1,80 @@
+/*
+ * Copyright 2018-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.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an 'AS IS' BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Enum of the topo2CurrentRegion node type from SubRegion below
+ */
+import {LocationType} from '../../backgroundsvg/backgroundsvg.component';
+import {Device, Host, SubRegion} from './node';
+import {RegionLink} from './link';
+
+export enum NodeType {
+ REGION = 'region',
+ DEVICE = 'device',
+ HOST = 'host',
+}
+
+/**
+ * Enum of the topo2CurrentRegion layerOrder from Region below
+ */
+export enum LayerType {
+ LAYER_OPTICAL = 'opt',
+ LAYER_PACKET = 'pkt',
+ LAYER_DEFAULT = 'def'
+}
+
+/**
+ * model of the topo2CurrentRegion location from SubRegion below
+ */
+export interface Location {
+ locType: LocationType;
+ latOrY: number;
+ longOrX: number;
+}
+
+/**
+ * model of the topo2CurrentRegion props from SubRegion below
+ */
+export interface RegionProps {
+ latitude: number;
+ longitude: number;
+ name: string;
+ peerLocations: string;
+}
+
+/**
+ * model of the topo2CurrentRegion WebSocket response
+ *
+ * The Devices are in a 2D array - 1st order is layer type, 2nd order is
+ * devices in that layer
+ */
+export interface Region {
+ note?: string;
+ id: string;
+ devices: Device[][];
+ hosts: Host[][];
+ links: RegionLink[];
+ layerOrder: LayerType[];
+ peerLocations?: Location[];
+ subregions: SubRegion[];
+}
+
+/**
+ * model of the topo2PeerRegions WebSocket response
+ */
+export interface Peer {
+ peers: SubRegion[];
+}
+
diff --git a/web/gui2-topo-lib/lib/layer/forcesvg/tests/test-OdtnConfig-topo2CurrentRegion.json b/web/gui2-topo-lib/lib/layer/forcesvg/tests/test-OdtnConfig-topo2CurrentRegion.json
new file mode 100644
index 0000000..2087940
--- /dev/null
+++ b/web/gui2-topo-lib/lib/layer/forcesvg/tests/test-OdtnConfig-topo2CurrentRegion.json
@@ -0,0 +1,165 @@
+{
+ "event": "topo2CurrentRegion",
+ "payload": {
+ "id": "(root)",
+ "subregions": [],
+ "links": [
+ {
+ "id": "netconf:127.0.0.1:11002/201~netconf:127.0.0.1:11003/201",
+ "epA": "netconf:127.0.0.1:11002/201",
+ "epB": "netconf:127.0.0.1:11003/201",
+ "type": "UiDeviceLink",
+ "portA": "201",
+ "portB": "201",
+ "rollup": [
+ {
+ "id": "netconf:127.0.0.1:11002/201~netconf:127.0.0.1:11003/201",
+ "epA": "netconf:127.0.0.1:11002/201",
+ "epB": "netconf:127.0.0.1:11003/201",
+ "type": "UiDeviceLink",
+ "portA": "201",
+ "portB": "201"
+ }
+ ]
+ },
+ {
+ "id": "netconf:127.0.0.1:11002/202~netconf:127.0.0.1:11003/202",
+ "epA": "netconf:127.0.0.1:11002/202",
+ "epB": "netconf:127.0.0.1:11003/202",
+ "type": "UiDeviceLink",
+ "portA": "202",
+ "portB": "202",
+ "rollup": [
+ {
+ "id": "netconf:127.0.0.1:11002/202~netconf:127.0.0.1:11003/202",
+ "epA": "netconf:127.0.0.1:11002/202",
+ "epB": "netconf:127.0.0.1:11003/202",
+ "type": "UiDeviceLink",
+ "portA": "202",
+ "portB": "202"
+ }
+ ]
+ },
+ {
+ "id": "netconf:127.0.0.1:11002/203~netconf:127.0.0.1:11003/203",
+ "epA": "netconf:127.0.0.1:11002/203",
+ "epB": "netconf:127.0.0.1:11003/203",
+ "type": "UiDeviceLink",
+ "portA": "203",
+ "portB": "203",
+ "rollup": [
+ {
+ "id": "netconf:127.0.0.1:11002/203~netconf:127.0.0.1:11003/203",
+ "epA": "netconf:127.0.0.1:11002/203",
+ "epB": "netconf:127.0.0.1:11003/203",
+ "type": "UiDeviceLink",
+ "portA": "203",
+ "portB": "203"
+ }
+ ]
+ },
+ {
+ "id": "netconf:127.0.0.1:11002/204~netconf:127.0.0.1:11003/204",
+ "epA": "netconf:127.0.0.1:11002/204",
+ "epB": "netconf:127.0.0.1:11003/204",
+ "type": "UiDeviceLink",
+ "portA": "204",
+ "portB": "204",
+ "rollup": [
+ {
+ "id": "netconf:127.0.0.1:11002/204~netconf:127.0.0.1:11003/204",
+ "epA": "netconf:127.0.0.1:11002/204",
+ "epB": "netconf:127.0.0.1:11003/204",
+ "type": "UiDeviceLink",
+ "portA": "204",
+ "portB": "204"
+ }
+ ]
+ },
+ {
+ "id": "netconf:127.0.0.1:11002/205~netconf:127.0.0.1:11003/205",
+ "epA": "netconf:127.0.0.1:11002/205",
+ "epB": "netconf:127.0.0.1:11003/205",
+ "type": "UiDeviceLink",
+ "portA": "205",
+ "portB": "205",
+ "rollup": [
+ {
+ "id": "netconf:127.0.0.1:11002/205~netconf:127.0.0.1:11003/205",
+ "epA": "netconf:127.0.0.1:11002/205",
+ "epB": "netconf:127.0.0.1:11003/205",
+ "type": "UiDeviceLink",
+ "portA": "205",
+ "portB": "205"
+ }
+ ]
+ },
+ {
+ "id": "netconf:127.0.0.1:11002/206~netconf:127.0.0.1:11003/206",
+ "epA": "netconf:127.0.0.1:11002/206",
+ "epB": "netconf:127.0.0.1:11003/206",
+ "type": "UiDeviceLink",
+ "portA": "206",
+ "portB": "206",
+ "rollup": [
+ {
+ "id": "netconf:127.0.0.1:11002/206~netconf:127.0.0.1:11003/206",
+ "epA": "netconf:127.0.0.1:11002/206",
+ "epB": "netconf:127.0.0.1:11003/206",
+ "type": "UiDeviceLink",
+ "portA": "206",
+ "portB": "206"
+ }
+ ]
+ }
+ ],
+ "devices": [
+ [],
+ [],
+ [
+ {
+ "id": "netconf:127.0.0.1:11002",
+ "nodeType": "device",
+ "type": "terminal_device",
+ "online": true,
+ "master": "127.0.0.1",
+ "layer": "def",
+ "props": {
+ "ipaddress": "127.0.0.1",
+ "protocol": "NETCONF",
+ "driver": "cassini-ocnos",
+ "port": "11002",
+ "name": "cassini2",
+ "locType": "none"
+ }
+ },
+ {
+ "id": "netconf:127.0.0.1:11003",
+ "nodeType": "device",
+ "type": "terminal_device",
+ "online": true,
+ "master": "127.0.0.1",
+ "layer": "def",
+ "props": {
+ "ipaddress": "127.0.0.1",
+ "protocol": "NETCONF",
+ "driver": "cassini-ocnos",
+ "port": "11003",
+ "name": "cassini1",
+ "locType": "none"
+ }
+ }
+ ]
+ ],
+ "hosts": [
+ [],
+ [],
+ []
+ ],
+ "layerOrder": [
+ "opt",
+ "pkt",
+ "def"
+ ]
+ }
+}
diff --git a/web/gui2-topo-lib/lib/layer/forcesvg/tests/test-module-topo2CurrentRegion.json b/web/gui2-topo-lib/lib/layer/forcesvg/tests/test-module-topo2CurrentRegion.json
new file mode 100644
index 0000000..e8af22f
--- /dev/null
+++ b/web/gui2-topo-lib/lib/layer/forcesvg/tests/test-module-topo2CurrentRegion.json
@@ -0,0 +1,1204 @@
+{
+ "event": "topo2CurrentRegion",
+ "payload": {
+ "id": "(root)",
+ "subregions": [],
+ "links": [
+ {
+ "id": "00:AA:00:00:00:03/None~of:0000000000000205/6",
+ "epA": "00:AA:00:00:00:03/None",
+ "epB": "of:0000000000000205",
+ "type": "UiEdgeLink",
+ "portB": "6",
+ "rollup": [
+ {
+ "id": "00:AA:00:00:00:03/None~of:0000000000000205/6",
+ "epA": "00:AA:00:00:00:03/None",
+ "epB": "of:0000000000000205",
+ "type": "UiEdgeLink",
+ "portB": "6"
+ }
+ ]
+ },
+ {
+ "id": "of:0000000000000205/3~of:0000000000000227/5",
+ "epA": "of:0000000000000205/3",
+ "epB": "of:0000000000000227/5",
+ "type": "UiDeviceLink",
+ "portA": "3",
+ "portB": "5",
+ "rollup": [
+ {
+ "id": "of:0000000000000205/3~of:0000000000000227/5",
+ "epA": "of:0000000000000205/3",
+ "epB": "of:0000000000000227/5",
+ "type": "UiDeviceLink",
+ "portA": "3",
+ "portB": "5"
+ }
+ ]
+ },
+ {
+ "id": "of:0000000000000206/2~of:0000000000000226/8",
+ "epA": "of:0000000000000206/2",
+ "epB": "of:0000000000000226/8",
+ "type": "UiDeviceLink",
+ "portA": "2",
+ "portB": "8",
+ "rollup": [
+ {
+ "id": "of:0000000000000206/2~of:0000000000000226/8",
+ "epA": "of:0000000000000206/2",
+ "epB": "of:0000000000000226/8",
+ "type": "UiDeviceLink",
+ "portA": "2",
+ "portB": "8"
+ }
+ ]
+ },
+ {
+ "id": "00:BB:00:00:00:05/None~of:0000000000000203/7",
+ "epA": "00:BB:00:00:00:05/None",
+ "epB": "of:0000000000000203",
+ "type": "UiEdgeLink",
+ "portB": "7",
+ "rollup": [
+ {
+ "id": "00:BB:00:00:00:05/None~of:0000000000000203/7",
+ "epA": "00:BB:00:00:00:05/None",
+ "epB": "of:0000000000000203",
+ "type": "UiEdgeLink",
+ "portB": "7"
+ }
+ ]
+ },
+ {
+ "id": "00:DD:00:00:00:01/None~of:0000000000000207/3",
+ "epA": "00:DD:00:00:00:01/None",
+ "epB": "of:0000000000000207",
+ "type": "UiEdgeLink",
+ "portB": "3",
+ "rollup": [
+ {
+ "id": "00:DD:00:00:00:01/None~of:0000000000000207/3",
+ "epA": "00:DD:00:00:00:01/None",
+ "epB": "of:0000000000000207",
+ "type": "UiEdgeLink",
+ "portB": "3"
+ }
+ ]
+ },
+ {
+ "id": "of:0000000000000203/1~of:0000000000000226/1",
+ "epA": "of:0000000000000203/1",
+ "epB": "of:0000000000000226/1",
+ "type": "UiDeviceLink",
+ "portA": "1",
+ "portB": "1",
+ "rollup": [
+ {
+ "id": "of:0000000000000203/1~of:0000000000000226/1",
+ "epA": "of:0000000000000203/1",
+ "epB": "of:0000000000000226/1",
+ "type": "UiDeviceLink",
+ "portA": "1",
+ "portB": "1"
+ }
+ ]
+ },
+ {
+ "id": "of:0000000000000207/2~of:0000000000000247/1",
+ "epA": "of:0000000000000207/2",
+ "epB": "of:0000000000000247/1",
+ "type": "UiDeviceLink",
+ "portA": "2",
+ "portB": "1",
+ "rollup": [
+ {
+ "id": "of:0000000000000207/2~of:0000000000000247/1",
+ "epA": "of:0000000000000207/2",
+ "epB": "of:0000000000000247/1",
+ "type": "UiDeviceLink",
+ "portA": "2",
+ "portB": "1"
+ }
+ ]
+ },
+ {
+ "id": "00:99:66:00:00:01/None~of:0000000000000205/10",
+ "epA": "00:99:66:00:00:01/None",
+ "epB": "of:0000000000000205",
+ "type": "UiEdgeLink",
+ "portB": "10",
+ "rollup": [
+ {
+ "id": "00:99:66:00:00:01/None~of:0000000000000205/10",
+ "epA": "00:99:66:00:00:01/None",
+ "epB": "of:0000000000000205",
+ "type": "UiEdgeLink",
+ "portB": "10"
+ }
+ ]
+ },
+ {
+ "id": "of:0000000000000208/1~of:0000000000000246/2",
+ "epA": "of:0000000000000208/1",
+ "epB": "of:0000000000000246/2",
+ "type": "UiDeviceLink",
+ "portA": "1",
+ "portB": "2",
+ "rollup": [
+ {
+ "id": "of:0000000000000208/1~of:0000000000000246/2",
+ "epA": "of:0000000000000208/1",
+ "epB": "of:0000000000000246/2",
+ "type": "UiDeviceLink",
+ "portA": "1",
+ "portB": "2"
+ }
+ ]
+ },
+ {
+ "id": "of:0000000000000206/1~of:0000000000000226/7",
+ "epA": "of:0000000000000206/1",
+ "epB": "of:0000000000000226/7",
+ "type": "UiDeviceLink",
+ "portA": "1",
+ "portB": "7",
+ "rollup": [
+ {
+ "id": "of:0000000000000206/1~of:0000000000000226/7",
+ "epA": "of:0000000000000206/1",
+ "epB": "of:0000000000000226/7",
+ "type": "UiDeviceLink",
+ "portA": "1",
+ "portB": "7"
+ }
+ ]
+ },
+ {
+ "id": "of:0000000000000226/9~of:0000000000000246/3",
+ "epA": "of:0000000000000226/9",
+ "epB": "of:0000000000000246/3",
+ "type": "UiDeviceLink",
+ "portA": "9",
+ "portB": "3",
+ "rollup": [
+ {
+ "id": "of:0000000000000226/9~of:0000000000000246/3",
+ "epA": "of:0000000000000226/9",
+ "epB": "of:0000000000000246/3",
+ "type": "UiDeviceLink",
+ "portA": "9",
+ "portB": "3"
+ }
+ ]
+ },
+ {
+ "id": "00:AA:00:00:00:04/None~of:0000000000000205/7",
+ "epA": "00:AA:00:00:00:04/None",
+ "epB": "of:0000000000000205",
+ "type": "UiEdgeLink",
+ "portB": "7",
+ "rollup": [
+ {
+ "id": "00:AA:00:00:00:04/None~of:0000000000000205/7",
+ "epA": "00:AA:00:00:00:04/None",
+ "epB": "of:0000000000000205",
+ "type": "UiEdgeLink",
+ "portB": "7"
+ }
+ ]
+ },
+ {
+ "id": "00:88:00:00:00:03/110~of:0000000000000205/11",
+ "epA": "00:88:00:00:00:03/110",
+ "epB": "of:0000000000000205",
+ "type": "UiEdgeLink",
+ "portB": "11",
+ "rollup": [
+ {
+ "id": "00:88:00:00:00:03/110~of:0000000000000205/11",
+ "epA": "00:88:00:00:00:03/110",
+ "epB": "of:0000000000000205",
+ "type": "UiEdgeLink",
+ "portB": "11"
+ }
+ ]
+ },
+ {
+ "id": "of:0000000000000204/1~of:0000000000000226/3",
+ "epA": "of:0000000000000204/1",
+ "epB": "of:0000000000000226/3",
+ "type": "UiDeviceLink",
+ "portA": "1",
+ "portB": "3",
+ "rollup": [
+ {
+ "id": "of:0000000000000204/1~of:0000000000000226/3",
+ "epA": "of:0000000000000204/1",
+ "epB": "of:0000000000000226/3",
+ "type": "UiDeviceLink",
+ "portA": "1",
+ "portB": "3"
+ }
+ ]
+ },
+ {
+ "id": "of:0000000000000203/2~of:0000000000000226/2",
+ "epA": "of:0000000000000203/2",
+ "epB": "of:0000000000000226/2",
+ "type": "UiDeviceLink",
+ "portA": "2",
+ "portB": "2",
+ "rollup": [
+ {
+ "id": "of:0000000000000203/2~of:0000000000000226/2",
+ "epA": "of:0000000000000203/2",
+ "epB": "of:0000000000000226/2",
+ "type": "UiDeviceLink",
+ "portA": "2",
+ "portB": "2"
+ }
+ ]
+ },
+ {
+ "id": "00:88:00:00:00:01/None~of:0000000000000205/12",
+ "epA": "00:88:00:00:00:01/None",
+ "epB": "of:0000000000000205",
+ "type": "UiEdgeLink",
+ "portB": "12",
+ "rollup": [
+ {
+ "id": "00:88:00:00:00:01/None~of:0000000000000205/12",
+ "epA": "00:88:00:00:00:01/None",
+ "epB": "of:0000000000000205",
+ "type": "UiEdgeLink",
+ "portB": "12"
+ }
+ ]
+ },
+ {
+ "id": "00:88:00:00:00:04/160~of:0000000000000206/6",
+ "epA": "00:88:00:00:00:04/160",
+ "epB": "of:0000000000000206",
+ "type": "UiEdgeLink",
+ "portB": "6",
+ "rollup": [
+ {
+ "id": "00:88:00:00:00:04/160~of:0000000000000206/6",
+ "epA": "00:88:00:00:00:04/160",
+ "epB": "of:0000000000000206",
+ "type": "UiEdgeLink",
+ "portB": "6"
+ }
+ ]
+ },
+ {
+ "id": "00:DD:00:00:00:02/None~of:0000000000000208/3",
+ "epA": "00:DD:00:00:00:02/None",
+ "epB": "of:0000000000000208",
+ "type": "UiEdgeLink",
+ "portB": "3",
+ "rollup": [
+ {
+ "id": "00:DD:00:00:00:02/None~of:0000000000000208/3",
+ "epA": "00:DD:00:00:00:02/None",
+ "epB": "of:0000000000000208",
+ "type": "UiEdgeLink",
+ "portB": "3"
+ }
+ ]
+ },
+ {
+ "id": "of:0000000000000203/3~of:0000000000000227/1",
+ "epA": "of:0000000000000203/3",
+ "epB": "of:0000000000000227/1",
+ "type": "UiDeviceLink",
+ "portA": "3",
+ "portB": "1",
+ "rollup": [
+ {
+ "id": "of:0000000000000203/3~of:0000000000000227/1",
+ "epA": "of:0000000000000203/3",
+ "epB": "of:0000000000000227/1",
+ "type": "UiDeviceLink",
+ "portA": "3",
+ "portB": "1"
+ }
+ ]
+ },
+ {
+ "id": "of:0000000000000208/2~of:0000000000000247/2",
+ "epA": "of:0000000000000208/2",
+ "epB": "of:0000000000000247/2",
+ "type": "UiDeviceLink",
+ "portA": "2",
+ "portB": "2",
+ "rollup": [
+ {
+ "id": "of:0000000000000208/2~of:0000000000000247/2",
+ "epA": "of:0000000000000208/2",
+ "epB": "of:0000000000000247/2",
+ "type": "UiDeviceLink",
+ "portA": "2",
+ "portB": "2"
+ }
+ ]
+ },
+ {
+ "id": "of:0000000000000205/1~of:0000000000000226/5",
+ "epA": "of:0000000000000205/1",
+ "epB": "of:0000000000000226/5",
+ "type": "UiDeviceLink",
+ "portA": "1",
+ "portB": "5",
+ "rollup": [
+ {
+ "id": "of:0000000000000205/1~of:0000000000000226/5",
+ "epA": "of:0000000000000205/1",
+ "epB": "of:0000000000000226/5",
+ "type": "UiDeviceLink",
+ "portA": "1",
+ "portB": "5"
+ }
+ ]
+ },
+ {
+ "id": "of:0000000000000204/2~of:0000000000000226/4",
+ "epA": "of:0000000000000204/2",
+ "epB": "of:0000000000000226/4",
+ "type": "UiDeviceLink",
+ "portA": "2",
+ "portB": "4",
+ "rollup": [
+ {
+ "id": "of:0000000000000204/2~of:0000000000000226/4",
+ "epA": "of:0000000000000204/2",
+ "epB": "of:0000000000000226/4",
+ "type": "UiDeviceLink",
+ "portA": "2",
+ "portB": "4"
+ }
+ ]
+ },
+ {
+ "id": "00:AA:00:00:00:01/None~of:0000000000000204/6",
+ "epA": "00:AA:00:00:00:01/None",
+ "epB": "of:0000000000000204",
+ "type": "UiEdgeLink",
+ "portB": "6",
+ "rollup": [
+ {
+ "id": "00:AA:00:00:00:01/None~of:0000000000000204/6",
+ "epA": "00:AA:00:00:00:01/None",
+ "epB": "of:0000000000000204",
+ "type": "UiEdgeLink",
+ "portB": "6"
+ }
+ ]
+ },
+ {
+ "id": "00:BB:00:00:00:03/None~of:0000000000000205/8",
+ "epA": "00:BB:00:00:00:03/None",
+ "epB": "of:0000000000000205",
+ "type": "UiEdgeLink",
+ "portB": "8",
+ "rollup": [
+ {
+ "id": "00:BB:00:00:00:03/None~of:0000000000000205/8",
+ "epA": "00:BB:00:00:00:03/None",
+ "epB": "of:0000000000000205",
+ "type": "UiEdgeLink",
+ "portB": "8"
+ }
+ ]
+ },
+ {
+ "id": "of:0000000000000206/4~of:0000000000000227/8",
+ "epA": "of:0000000000000206/4",
+ "epB": "of:0000000000000227/8",
+ "type": "UiDeviceLink",
+ "portA": "4",
+ "portB": "8",
+ "rollup": [
+ {
+ "id": "of:0000000000000206/4~of:0000000000000227/8",
+ "epA": "of:0000000000000206/4",
+ "epB": "of:0000000000000227/8",
+ "type": "UiDeviceLink",
+ "portA": "4",
+ "portB": "8"
+ }
+ ]
+ },
+ {
+ "id": "00:AA:00:00:00:05/None~of:0000000000000203/6",
+ "epA": "00:AA:00:00:00:05/None",
+ "epB": "of:0000000000000203",
+ "type": "UiEdgeLink",
+ "portB": "6",
+ "rollup": [
+ {
+ "id": "00:AA:00:00:00:05/None~of:0000000000000203/6",
+ "epA": "00:AA:00:00:00:05/None",
+ "epB": "of:0000000000000203",
+ "type": "UiEdgeLink",
+ "portB": "6"
+ }
+ ]
+ },
+ {
+ "id": "of:0000000000000205/5~of:0000000000000206/5",
+ "epA": "of:0000000000000205/5",
+ "epB": "of:0000000000000206/5",
+ "type": "UiDeviceLink",
+ "portA": "5",
+ "portB": "5",
+ "rollup": [
+ {
+ "id": "of:0000000000000205/5~of:0000000000000206/5",
+ "epA": "of:0000000000000205/5",
+ "epB": "of:0000000000000206/5",
+ "type": "UiDeviceLink",
+ "portA": "5",
+ "portB": "5"
+ }
+ ]
+ },
+ {
+ "id": "00:BB:00:00:00:02/None~of:0000000000000204/9",
+ "epA": "00:BB:00:00:00:02/None",
+ "epB": "of:0000000000000204",
+ "type": "UiEdgeLink",
+ "portB": "9",
+ "rollup": [
+ {
+ "id": "00:BB:00:00:00:02/None~of:0000000000000204/9",
+ "epA": "00:BB:00:00:00:02/None",
+ "epB": "of:0000000000000204",
+ "type": "UiEdgeLink",
+ "portB": "9"
+ }
+ ]
+ },
+ {
+ "id": "of:0000000000000204/3~of:0000000000000227/3",
+ "epA": "of:0000000000000204/3",
+ "epB": "of:0000000000000227/3",
+ "type": "UiDeviceLink",
+ "portA": "3",
+ "portB": "3",
+ "rollup": [
+ {
+ "id": "of:0000000000000204/3~of:0000000000000227/3",
+ "epA": "of:0000000000000204/3",
+ "epB": "of:0000000000000227/3",
+ "type": "UiDeviceLink",
+ "portA": "3",
+ "portB": "3"
+ }
+ ]
+ },
+ {
+ "id": "00:EE:00:00:00:01/None~of:0000000000000207/4",
+ "epA": "00:EE:00:00:00:01/None",
+ "epB": "of:0000000000000207",
+ "type": "UiEdgeLink",
+ "portB": "4",
+ "rollup": [
+ {
+ "id": "00:EE:00:00:00:01/None~of:0000000000000207/4",
+ "epA": "00:EE:00:00:00:01/None",
+ "epB": "of:0000000000000207",
+ "type": "UiEdgeLink",
+ "portB": "4"
+ }
+ ]
+ },
+ {
+ "id": "of:0000000000000203/4~of:0000000000000227/2",
+ "epA": "of:0000000000000203/4",
+ "epB": "of:0000000000000227/2",
+ "type": "UiDeviceLink",
+ "portA": "4",
+ "portB": "2",
+ "rollup": [
+ {
+ "id": "of:0000000000000203/4~of:0000000000000227/2",
+ "epA": "of:0000000000000203/4",
+ "epB": "of:0000000000000227/2",
+ "type": "UiDeviceLink",
+ "portA": "4",
+ "portB": "2"
+ }
+ ]
+ },
+ {
+ "id": "of:0000000000000205/2~of:0000000000000226/6",
+ "epA": "of:0000000000000205/2",
+ "epB": "of:0000000000000226/6",
+ "type": "UiDeviceLink",
+ "portA": "2",
+ "portB": "6",
+ "rollup": [
+ {
+ "id": "of:0000000000000205/2~of:0000000000000226/6",
+ "epA": "of:0000000000000205/2",
+ "epB": "of:0000000000000226/6",
+ "type": "UiDeviceLink",
+ "portA": "2",
+ "portB": "6"
+ }
+ ]
+ },
+ {
+ "id": "00:99:00:00:00:01/None~of:0000000000000205/10",
+ "epA": "00:99:00:00:00:01/None",
+ "epB": "of:0000000000000205",
+ "type": "UiEdgeLink",
+ "portB": "10",
+ "rollup": [
+ {
+ "id": "00:99:00:00:00:01/None~of:0000000000000205/10",
+ "epA": "00:99:00:00:00:01/None",
+ "epB": "of:0000000000000205",
+ "type": "UiEdgeLink",
+ "portB": "10"
+ }
+ ]
+ },
+ {
+ "id": "of:0000000000000205/4~of:0000000000000227/6",
+ "epA": "of:0000000000000205/4",
+ "epB": "of:0000000000000227/6",
+ "type": "UiDeviceLink",
+ "portA": "4",
+ "portB": "6",
+ "rollup": [
+ {
+ "id": "of:0000000000000205/4~of:0000000000000227/6",
+ "epA": "of:0000000000000205/4",
+ "epB": "of:0000000000000227/6",
+ "type": "UiDeviceLink",
+ "portA": "4",
+ "portB": "6"
+ }
+ ]
+ },
+ {
+ "id": "of:0000000000000206/3~of:0000000000000227/7",
+ "epA": "of:0000000000000206/3",
+ "epB": "of:0000000000000227/7",
+ "type": "UiDeviceLink",
+ "portA": "3",
+ "portB": "7",
+ "rollup": [
+ {
+ "id": "of:0000000000000206/3~of:0000000000000227/7",
+ "epA": "of:0000000000000206/3",
+ "epB": "of:0000000000000227/7",
+ "type": "UiDeviceLink",
+ "portA": "3",
+ "portB": "7"
+ }
+ ]
+ },
+ {
+ "id": "00:BB:00:00:00:04/None~of:0000000000000205/9",
+ "epA": "00:BB:00:00:00:04/None",
+ "epB": "of:0000000000000205",
+ "type": "UiEdgeLink",
+ "portB": "9",
+ "rollup": [
+ {
+ "id": "00:BB:00:00:00:04/None~of:0000000000000205/9",
+ "epA": "00:BB:00:00:00:04/None",
+ "epB": "of:0000000000000205",
+ "type": "UiEdgeLink",
+ "portB": "9"
+ }
+ ]
+ },
+ {
+ "id": "00:AA:00:00:00:02/None~of:0000000000000204/7",
+ "epA": "00:AA:00:00:00:02/None",
+ "epB": "of:0000000000000204",
+ "type": "UiEdgeLink",
+ "portB": "7",
+ "rollup": [
+ {
+ "id": "00:AA:00:00:00:02/None~of:0000000000000204/7",
+ "epA": "00:AA:00:00:00:02/None",
+ "epB": "of:0000000000000204",
+ "type": "UiEdgeLink",
+ "portB": "7"
+ }
+ ]
+ },
+ {
+ "id": "00:BB:00:00:00:01/None~of:0000000000000204/8",
+ "epA": "00:BB:00:00:00:01/None",
+ "epB": "of:0000000000000204",
+ "type": "UiEdgeLink",
+ "portB": "8",
+ "rollup": [
+ {
+ "id": "00:BB:00:00:00:01/None~of:0000000000000204/8",
+ "epA": "00:BB:00:00:00:01/None",
+ "epB": "of:0000000000000204",
+ "type": "UiEdgeLink",
+ "portB": "8"
+ }
+ ]
+ },
+ {
+ "id": "of:0000000000000207/1~of:0000000000000246/1",
+ "epA": "of:0000000000000207/1",
+ "epB": "of:0000000000000246/1",
+ "type": "UiDeviceLink",
+ "portA": "1",
+ "portB": "1",
+ "rollup": [
+ {
+ "id": "of:0000000000000207/1~of:0000000000000246/1",
+ "epA": "of:0000000000000207/1",
+ "epB": "of:0000000000000246/1",
+ "type": "UiDeviceLink",
+ "portA": "1",
+ "portB": "1"
+ }
+ ]
+ },
+ {
+ "id": "00:88:00:00:00:02/None~of:0000000000000206/7",
+ "epA": "00:88:00:00:00:02/None",
+ "epB": "of:0000000000000206",
+ "type": "UiEdgeLink",
+ "portB": "7",
+ "rollup": [
+ {
+ "id": "00:88:00:00:00:02/None~of:0000000000000206/7",
+ "epA": "00:88:00:00:00:02/None",
+ "epB": "of:0000000000000206",
+ "type": "UiEdgeLink",
+ "portB": "7"
+ }
+ ]
+ },
+ {
+ "id": "00:EE:00:00:00:02/None~of:0000000000000208/4",
+ "epA": "00:EE:00:00:00:02/None",
+ "epB": "of:0000000000000208",
+ "type": "UiEdgeLink",
+ "portB": "4",
+ "rollup": [
+ {
+ "id": "00:EE:00:00:00:02/None~of:0000000000000208/4",
+ "epA": "00:EE:00:00:00:02/None",
+ "epB": "of:0000000000000208",
+ "type": "UiEdgeLink",
+ "portB": "4"
+ }
+ ]
+ },
+ {
+ "id": "of:0000000000000204/4~of:0000000000000227/4",
+ "epA": "of:0000000000000204/4",
+ "epB": "of:0000000000000227/4",
+ "type": "UiDeviceLink",
+ "portA": "4",
+ "portB": "4",
+ "rollup": [
+ {
+ "id": "of:0000000000000204/4~of:0000000000000227/4",
+ "epA": "of:0000000000000204/4",
+ "epB": "of:0000000000000227/4",
+ "type": "UiDeviceLink",
+ "portA": "4",
+ "portB": "4"
+ }
+ ]
+ },
+ {
+ "id": "of:0000000000000203/5~of:0000000000000204/5",
+ "epA": "of:0000000000000203/5",
+ "epB": "of:0000000000000204/5",
+ "type": "UiDeviceLink",
+ "portA": "5",
+ "portB": "5",
+ "rollup": [
+ {
+ "id": "of:0000000000000203/5~of:0000000000000204/5",
+ "epA": "of:0000000000000203/5",
+ "epB": "of:0000000000000204/5",
+ "type": "UiDeviceLink",
+ "portA": "5",
+ "portB": "5"
+ }
+ ]
+ },
+ {
+ "id": "of:0000000000000227/9~of:0000000000000247/3",
+ "epA": "of:0000000000000227/9",
+ "epB": "of:0000000000000247/3",
+ "type": "UiDeviceLink",
+ "portA": "9",
+ "portB": "3",
+ "rollup": [
+ {
+ "id": "of:0000000000000227/9~of:0000000000000247/3",
+ "epA": "of:0000000000000227/9",
+ "epB": "of:0000000000000247/3",
+ "type": "UiDeviceLink",
+ "portA": "9",
+ "portB": "3"
+ }
+ ]
+ }
+ ],
+ "devices": [
+ [],
+ [],
+ [
+ {
+ "id": "of:0000000000000246",
+ "nodeType": "device",
+ "type": "switch",
+ "online": true,
+ "master": "10.192.19.68",
+ "layer": "def",
+ "props": {
+ "managementAddress": "10.192.19.69",
+ "protocol": "OF_13",
+ "driver": "ofdpa-ovs",
+ "latitude": "40.15",
+ "name": "s246",
+ "locType": "geo",
+ "channelId": "10.192.19.69:59980",
+ "longitude": "-121.679"
+ },
+ "location": {
+ "locType": "geo",
+ "latOrY": 40.15,
+ "longOrX": -121.679
+ }
+ },
+ {
+ "id": "of:0000000000000206",
+ "nodeType": "device",
+ "type": "switch",
+ "online": true,
+ "master": "10.192.19.68",
+ "layer": "def",
+ "props": {
+ "managementAddress": "10.192.19.69",
+ "protocol": "OF_13",
+ "driver": "ofdpa-ovs",
+ "latitude": "36.766",
+ "name": "s206",
+ "locType": "geo",
+ "channelId": "10.192.19.69:59975",
+ "longitude": "-92.029"
+ },
+ "location": {
+ "locType": "geo",
+ "latOrY": 36.766,
+ "longOrX": -92.029
+ }
+ },
+ {
+ "id": "of:0000000000000227",
+ "nodeType": "device",
+ "type": "switch",
+ "online": true,
+ "master": "10.192.19.68",
+ "layer": "def",
+ "props": {
+ "managementAddress": "10.192.19.69",
+ "protocol": "OF_13",
+ "driver": "ofdpa-ovs",
+ "latitude": "44.205",
+ "name": "s227",
+ "locType": "geo",
+ "channelId": "10.192.19.69:59979",
+ "longitude": "-96.359"
+ },
+ "location": {
+ "locType": "geo",
+ "latOrY": 44.205,
+ "longOrX": -96.359
+ }
+ },
+ {
+ "id": "of:0000000000000208",
+ "nodeType": "device",
+ "type": "switch",
+ "online": true,
+ "master": "10.192.19.68",
+ "layer": "def",
+ "props": {
+ "managementAddress": "10.192.19.69",
+ "protocol": "OF_13",
+ "driver": "ofdpa-ovs",
+ "latitude": "36.766",
+ "name": "s208",
+ "locType": "geo",
+ "channelId": "10.192.19.69:59977",
+ "longitude": "-116.029"
+ },
+ "location": {
+ "locType": "geo",
+ "latOrY": 36.766,
+ "longOrX": -116.029
+ }
+ },
+ {
+ "id": "of:0000000000000205",
+ "nodeType": "device",
+ "type": "switch",
+ "online": true,
+ "master": "10.192.19.68",
+ "layer": "def",
+ "props": {
+ "managementAddress": "10.192.19.69",
+ "protocol": "OF_13",
+ "driver": "ofdpa-ovs",
+ "latitude": "36.766",
+ "name": "s205",
+ "locType": "geo",
+ "channelId": "10.192.19.69:59974",
+ "longitude": "-96.89"
+ },
+ "location": {
+ "locType": "geo",
+ "latOrY": 36.766,
+ "longOrX": -96.89
+ }
+ },
+ {
+ "id": "of:0000000000000247",
+ "nodeType": "device",
+ "type": "switch",
+ "online": true,
+ "master": "10.192.19.68",
+ "layer": "def",
+ "props": {
+ "managementAddress": "10.192.19.69",
+ "protocol": "OF_13",
+ "driver": "ofdpa-ovs",
+ "latitude": "40.205",
+ "name": "s247",
+ "locType": "geo",
+ "channelId": "10.192.19.69:59981",
+ "longitude": "-117.359"
+ },
+ "location": {
+ "locType": "geo",
+ "latOrY": 40.205,
+ "longOrX": -117.359
+ }
+ },
+ {
+ "id": "of:0000000000000226",
+ "nodeType": "device",
+ "type": "switch",
+ "online": true,
+ "master": "10.192.19.68",
+ "layer": "def",
+ "props": {
+ "managementAddress": "10.192.19.69",
+ "protocol": "OF_13",
+ "driver": "ofdpa-ovs",
+ "latitude": "44.15",
+ "name": "s226",
+ "locType": "geo",
+ "channelId": "10.192.19.69:59978",
+ "longitude": "-107.679"
+ },
+ "location": {
+ "locType": "geo",
+ "latOrY": 44.15,
+ "longOrX": -107.679
+ }
+ },
+ {
+ "id": "of:0000000000000203",
+ "nodeType": "device",
+ "type": "switch",
+ "online": true,
+ "master": "10.192.19.68",
+ "layer": "def",
+ "props": {
+ "managementAddress": "10.192.19.69",
+ "protocol": "OF_13",
+ "driver": "ofdpa-ovs",
+ "latitude": "36.766",
+ "name": "s203",
+ "locType": "geo",
+ "channelId": "10.192.19.69:59972",
+ "longitude": "-111.359"
+ },
+ "location": {
+ "locType": "geo",
+ "latOrY": 36.766,
+ "longOrX": -111.359
+ }
+ },
+ {
+ "id": "of:0000000000000204",
+ "nodeType": "device",
+ "type": "switch",
+ "online": true,
+ "master": "10.192.19.68",
+ "layer": "def",
+ "props": {
+ "managementAddress": "10.192.19.69",
+ "protocol": "OF_13",
+ "driver": "ofdpa-ovs",
+ "latitude": "36.766",
+ "name": "s204",
+ "locType": "geo",
+ "channelId": "10.192.19.69:59973",
+ "longitude": "-106.359"
+ },
+ "location": {
+ "locType": "geo",
+ "latOrY": 36.766,
+ "longOrX": -106.359
+ }
+ },
+ {
+ "id": "of:0000000000000207",
+ "nodeType": "device",
+ "type": "switch",
+ "online": true,
+ "master": "10.192.19.68",
+ "layer": "def",
+ "props": {
+ "managementAddress": "10.192.19.69",
+ "protocol": "OF_13",
+ "driver": "ofdpa-ovs",
+ "latitude": "36.766",
+ "name": "s207",
+ "locType": "geo",
+ "channelId": "10.192.19.69:59976",
+ "longitude": "-122.359"
+ },
+ "location": {
+ "locType": "geo",
+ "latOrY": 36.766,
+ "longOrX": -122.359
+ }
+ }
+ ]
+ ],
+ "hosts": [
+ [],
+ [],
+ [
+ {
+ "id": "00:88:00:00:00:03/110",
+ "nodeType": "host",
+ "layer": "def",
+ "ips": [
+ "fe80::288:ff:fe00:3",
+ "2000::102",
+ "10.0.1.2"
+ ],
+ "props": {},
+ "configured": false
+ },
+ {
+ "id": "00:DD:00:00:00:01/None",
+ "nodeType": "host",
+ "layer": "def",
+ "ips": [],
+ "props": {},
+ "configured": false
+ },
+ {
+ "id": "00:88:00:00:00:04/160",
+ "nodeType": "host",
+ "layer": "def",
+ "ips": [
+ "fe80::288:ff:fe00:4",
+ "10.0.6.2",
+ "2000::602"
+ ],
+ "props": {},
+ "configured": false
+ },
+ {
+ "id": "00:BB:00:00:00:02/None",
+ "nodeType": "host",
+ "layer": "def",
+ "ips": [
+ "fe80::2bb:ff:fe00:2"
+ ],
+ "props": {},
+ "configured": false
+ },
+ {
+ "id": "00:AA:00:00:00:05/None",
+ "nodeType": "host",
+ "layer": "def",
+ "ips": [],
+ "props": {},
+ "configured": false
+ },
+ {
+ "id": "00:88:00:00:00:01/None",
+ "nodeType": "host",
+ "layer": "def",
+ "ips": [
+ "fe80::288:ff:fe00:1",
+ "2000::101",
+ "10.0.1.1"
+ ],
+ "props": {},
+ "configured": false
+ },
+ {
+ "id": "00:AA:00:00:00:01/None",
+ "nodeType": "host",
+ "layer": "def",
+ "ips": [],
+ "props": {},
+ "configured": false
+ },
+ {
+ "id": "00:AA:00:00:00:03/None",
+ "nodeType": "host",
+ "layer": "def",
+ "ips": [],
+ "props": {},
+ "configured": false
+ },
+ {
+ "id": "00:BB:00:00:00:04/None",
+ "nodeType": "host",
+ "layer": "def",
+ "ips": [
+ "fe80::2bb:ff:fe00:4"
+ ],
+ "props": {},
+ "configured": false
+ },
+ {
+ "id": "00:EE:00:00:00:02/None",
+ "nodeType": "host",
+ "layer": "def",
+ "ips": [
+ "fe80::2ee:ff:fe00:2"
+ ],
+ "props": {},
+ "configured": false
+ },
+ {
+ "id": "00:99:00:00:00:01/None",
+ "nodeType": "host",
+ "layer": "def",
+ "ips": [
+ "10.0.3.253",
+ "fe80::299:ff:fe00:1"
+ ],
+ "props": {},
+ "configured": false
+ },
+ {
+ "id": "00:99:66:00:00:01/None",
+ "nodeType": "host",
+ "layer": "def",
+ "ips": [
+ "fe80::299:66ff:fe00:1",
+ "2000::3fd"
+ ],
+ "props": {},
+ "configured": false
+ },
+ {
+ "id": "00:EE:00:00:00:01/None",
+ "nodeType": "host",
+ "layer": "def",
+ "ips": [
+ "fe80::2ee:ff:fe00:1"
+ ],
+ "props": {},
+ "configured": false
+ },
+ {
+ "id": "00:BB:00:00:00:01/None",
+ "nodeType": "host",
+ "layer": "def",
+ "ips": [
+ "fe80::2bb:ff:fe00:1"
+ ],
+ "props": {},
+ "configured": false
+ },
+ {
+ "id": "00:BB:00:00:00:03/None",
+ "nodeType": "host",
+ "layer": "def",
+ "ips": [
+ "fe80::2bb:ff:fe00:3"
+ ],
+ "props": {},
+ "configured": false
+ },
+ {
+ "id": "00:AA:00:00:00:04/None",
+ "nodeType": "host",
+ "layer": "def",
+ "ips": [],
+ "props": {},
+ "configured": false
+ },
+ {
+ "id": "00:BB:00:00:00:05/None",
+ "nodeType": "host",
+ "layer": "def",
+ "ips": [
+ "fe80::2bb:ff:fe00:5"
+ ],
+ "props": {},
+ "configured": false
+ },
+ {
+ "id": "00:88:00:00:00:02/None",
+ "nodeType": "host",
+ "layer": "def",
+ "ips": [
+ "fe80::288:ff:fe00:2",
+ "2000::601",
+ "10.0.6.1"
+ ],
+ "props": {},
+ "configured": false
+ },
+ {
+ "id": "00:AA:00:00:00:02/None",
+ "nodeType": "host",
+ "layer": "def",
+ "ips": [],
+ "props": {},
+ "configured": false
+ },
+ {
+ "id": "00:DD:00:00:00:02/None",
+ "nodeType": "host",
+ "layer": "def",
+ "ips": [],
+ "props": {},
+ "configured": false
+ }
+ ]
+ ],
+ "layerOrder": [
+ "opt",
+ "pkt",
+ "def"
+ ]
+ }
+}
diff --git a/web/gui2-topo-lib/lib/layer/forcesvg/visuals/badgesvg/badgesvg.component.css b/web/gui2-topo-lib/lib/layer/forcesvg/visuals/badgesvg/badgesvg.component.css
new file mode 100644
index 0000000..373b57b
--- /dev/null
+++ b/web/gui2-topo-lib/lib/layer/forcesvg/visuals/badgesvg/badgesvg.component.css
@@ -0,0 +1,43 @@
+/*
+ * Copyright 2018-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.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+
+.status.e {
+ fill: #c72930;
+}
+
+.text.e {
+ fill: white;
+ font-weight: bold;
+}
+
+.status.w {
+ fill: #db7773;
+}
+
+.text.w {
+ fill: white;
+ font-weight: bold;
+}
+
+.status.i {
+ fill: #007dc4;
+}
+
+.text.i {
+ fill: white;
+}
+
diff --git a/web/gui2-topo-lib/lib/layer/forcesvg/visuals/badgesvg/badgesvg.component.html b/web/gui2-topo-lib/lib/layer/forcesvg/visuals/badgesvg/badgesvg.component.html
new file mode 100644
index 0000000..e8dfcb9
--- /dev/null
+++ b/web/gui2-topo-lib/lib/layer/forcesvg/visuals/badgesvg/badgesvg.component.html
@@ -0,0 +1,19 @@
+<!--
+~ 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.
+~ You may obtain a copy of the License at
+~
+~ http://www.apache.org/licenses/LICENSE-2.0
+~
+~ Unless required by applicable law or agreed to in writing, software
+~ distributed under the License is distributed on an "AS IS" BASIS,
+~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+~ See the License for the specific language governing permissions and
+~ limitations under the License.
+-->
+<svg:g xmlns:svg="http://www.w3.org/2000/svg" [title]="badge.msg">
+ <svg:circle r="12" [ngClass]="['status', badge.status ? badge.status : '']" cx="-18" cy="-18"></svg:circle>
+ <svg:text x="-18" y="-11" text-anchor="middle" [ngClass]="['text', badge.status ? badge.status : '']">{{ badge.txt }}</svg:text>
+</svg:g>
diff --git a/web/gui2-topo-lib/lib/layer/forcesvg/visuals/badgesvg/badgesvg.component.spec.ts b/web/gui2-topo-lib/lib/layer/forcesvg/visuals/badgesvg/badgesvg.component.spec.ts
new file mode 100644
index 0000000..2b457b4
--- /dev/null
+++ b/web/gui2-topo-lib/lib/layer/forcesvg/visuals/badgesvg/badgesvg.component.spec.ts
@@ -0,0 +1,41 @@
+/*
+ * Copyright 2018-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.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an 'AS IS' BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+
+import {BadgeSvgComponent} from './badgesvg.component';
+
+describe('BadgeSvgComponent', () => {
+ let component: BadgeSvgComponent;
+ let fixture: ComponentFixture<BadgeSvgComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [BadgeSvgComponent]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(BadgeSvgComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/web/gui2-topo-lib/lib/layer/forcesvg/visuals/badgesvg/badgesvg.component.ts b/web/gui2-topo-lib/lib/layer/forcesvg/visuals/badgesvg/badgesvg.component.ts
new file mode 100644
index 0000000..f0bbc7a
--- /dev/null
+++ b/web/gui2-topo-lib/lib/layer/forcesvg/visuals/badgesvg/badgesvg.component.ts
@@ -0,0 +1,34 @@
+/*
+ * Copyright 2018-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.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an 'AS IS' BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {Component, Input, OnInit} from '@angular/core';
+import {Badge} from '../../models';
+
+@Component({
+ selector: '[onos-badgesvg]',
+ templateUrl: './badgesvg.component.html',
+ styleUrls: ['./badgesvg.component.css']
+})
+export class BadgeSvgComponent implements OnInit {
+ @Input() badge: Badge = <Badge>{};
+
+ constructor() {
+ }
+
+ ngOnInit() {
+ }
+
+}
diff --git a/web/gui2-topo-lib/lib/layer/forcesvg/visuals/devicenodesvg/devicenodesvg.component.css b/web/gui2-topo-lib/lib/layer/forcesvg/visuals/devicenodesvg/devicenodesvg.component.css
new file mode 100644
index 0000000..e7ce209
--- /dev/null
+++ b/web/gui2-topo-lib/lib/layer/forcesvg/visuals/devicenodesvg/devicenodesvg.component.css
@@ -0,0 +1,57 @@
+/*
+ * Copyright 2018-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.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+
+/*
+ ONOS GUI -- Topology View (forces device visual) -- CSS file
+ */
+g.node.device rect {
+ fill: #f0f0f070;
+}
+g.node.device text {
+ fill: #bbb;
+}
+g.node.device use {
+ fill: #777;
+}
+
+
+g.node.device.online rect {
+ fill: #fafafad0;
+}
+g.node.device.online text {
+ fill: #3c3a3a;
+}
+g.node.device.online use {
+ /* NOTE: this gets overridden programatically */
+ fill: #ffffff;
+}
+
+g.node.selected .node-container {
+ stroke-width: 2.0;
+ stroke: #009fdb;
+}
+
+g.node.hovered .node-container {
+ stroke-width: 2.0;
+ stroke: #454545;
+}
+
+path.bracket {
+ stroke: white;
+ stroke-width: 1;
+ fill: none
+}
diff --git a/web/gui2-topo-lib/lib/layer/forcesvg/visuals/devicenodesvg/devicenodesvg.component.html b/web/gui2-topo-lib/lib/layer/forcesvg/visuals/devicenodesvg/devicenodesvg.component.html
new file mode 100644
index 0000000..c4f5621
--- /dev/null
+++ b/web/gui2-topo-lib/lib/layer/forcesvg/visuals/devicenodesvg/devicenodesvg.component.html
@@ -0,0 +1,100 @@
+<!--
+~ 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.
+~ You may obtain a copy of the License at
+~
+~ http://www.apache.org/licenses/LICENSE-2.0
+~
+~ Unless required by applicable law or agreed to in writing, software
+~ distributed under the License is distributed on an "AS IS" BASIS,
+~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+~ See the License for the specific language governing permissions and
+~ limitations under the License.
+-->
+<svg:defs xmlns:svg="http://www.w3.org/2000/svg">
+ <!-- Template explanation: Define an SVG Filter that in
+ line 0) creates a box big enough to accommodate the drop shadow
+ line 1) render the target object in to a bit map and apply a blur to it
+ based on its alpha channel
+ line 2) take that blurred layer and shift it down and to the right by 4
+ line 3) Merge this blurred and shifted layer and overlay it with the
+ original target object
+ -->
+ <svg:filter id="drop-shadow" x="-25%" y="-25%" width="200%" height="200%">
+ <svg:feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur" />
+ <svg:feOffset in="blur" dx="4" dy="4" result="offsetBlur"/>
+ <svg:feMerge >
+ <svg:feMergeNode in="offsetBlur" />
+ <svg:feMergeNode in="SourceGraphic" />
+ </svg:feMerge>
+ </svg:filter>
+ <!-- Template explanation: Define a colour gradient that can be used in icons -->
+ <svg:linearGradient id="diagonal_blue" x1="0%" y1="0%" x2="100%" y2="100%">
+ <svg:stop offset= "0%" style="stop-color: #7fabdb;" />
+ <svg:stop offset= "100%" style="stop-color: #5b99d2;" />
+ </svg:linearGradient>
+</svg:defs>
+<!-- Template explanation: Creates an SVG Group and in
+ line 1) transform it to the position calculated by the d3 force graph engine
+ and scale it inversely to the zoom level
+ line 2) Give it various CSS styles depending on attributes
+ line 3) When it is clicked, call the method that toggles the selection and
+ emits an event.
+ Other child objects have their own description
+-->
+<svg:g xmlns:svg="http://www.w3.org/2000/svg"
+ [attr.transform]="'translate(' + device?.x + ',' + device?.y + '), scale(' + scale + ')'"
+ [ngClass]="['node', 'device', device.online?'online':'', selected?'selected':'']"
+ (click)="toggleSelected(device, $event)">
+ <svg:desc>Device {{device.id}}</svg:desc>
+ <!-- Template explanation: Creates an SVG Rectangle and in
+ line 1) set a css style and shift so that it's centred
+ line 2) set the initial width and height - width changes with label
+ line 3) link to the animation 'deviceLabelToggle', pass in to it a width
+ calculated from the width of the text, and additional padding at the end
+ line 4) Apply the filter defined above to this rectangle (even as its
+ width changes
+ -->
+ <svg:rect
+ class="node-container" x="-18" y="-18"
+ width="36" height="36"
+ [@deviceLabelToggle]="{ value: labelToggle, params: {txtWidth: (36 + labelTextLen() * 1.1)+'px' }}"
+ filter= "url(#drop-shadow)">
+ </svg:rect>
+ <!-- Template explanation: Creates an SVG Rectangle slightly smaller and
+ overlaid on the above. This is the blue box, and its width and height does
+ not change
+ -->
+ <svg:rect x="-16" y="-16" width="32" height="32" [ngStyle]="{'fill': panelColor}">
+ </svg:rect>
+ <!-- Create an L shaped bracket on bottom left of icon if it has either grid or geo location-->
+ <svg:path *ngIf="device.location && device.location.locType != 'none'"
+ d="M-15 12 v3 h3" class="bracket">
+ </svg:path>
+ <!-- Create an L shaped bracket on top right of icon if it has been pinned or has fixed location-->
+ <svg:path *ngIf="device.fx != null"
+ d="M15 -12 v-3 h-3" class="bracket">
+ </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
+ line 3) because of kerning the actual text might be shorter or longer than
+ the pre-calculated value - if so change the spacing between the letters
+ (and not the letter width to compensate)
+ line 4) link to the animation deviceLabelToggleTxt, so that the text appears
+ in gently
+ line 5) The text will be one of 3 values - blank, the id or the name
+ -->
+ <svg:text
+ text-anchor="start" y="0.3em" x="22"
+ [attr.textLength]= "labelTextLen()"
+ lengthAdjust= "spacing"
+ [@deviceLabelToggleTxt]="labelToggle">
+ {{ labelToggle == 0 ? '': labelToggle == 1 ? device.id:device.props.name }}
+ </svg:text>
+ <svg:use [attr.xlink:href]="'#' + deviceIcon()" width="36" height="36" x="-18" y="-18">
+ </svg:use>
+ <svg:g *ngIf="badge" onos-badgesvg [badge]="badge"></svg:g>
+</svg:g>
diff --git a/web/gui2-topo-lib/lib/layer/forcesvg/visuals/devicenodesvg/devicenodesvg.component.spec.ts b/web/gui2-topo-lib/lib/layer/forcesvg/visuals/devicenodesvg/devicenodesvg.component.spec.ts
new file mode 100644
index 0000000..deb175e
--- /dev/null
+++ b/web/gui2-topo-lib/lib/layer/forcesvg/visuals/devicenodesvg/devicenodesvg.component.spec.ts
@@ -0,0 +1,129 @@
+/*
+ * Copyright 2018-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.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an 'AS IS' BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DeviceNodeSvgComponent } from './devicenodesvg.component';
+import {FnService, IconService, LogService, SvgUtilService} from '../../../../../../gui2-fw-lib/public_api';
+import {ActivatedRoute, Params} from '@angular/router';
+import {of} from 'rxjs';
+import {ChangeDetectorRef} from '@angular/core';
+import {Device} from '../../models';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import {TopologyService} from '../../../../topology.service';
+import {BadgeSvgComponent} from '../badgesvg/badgesvg.component';
+
+class MockActivatedRoute extends ActivatedRoute {
+ constructor(params: Params) {
+ super();
+ this.queryParams = of(params);
+ }
+}
+
+class MockIconService {
+ loadIconDef() { }
+}
+
+class MockSvgUtilService {
+
+ cat7() {
+ const tcid = 'd3utilTestCard';
+
+ function getColor(id, muted, theme) {
+ // NOTE: since we are lazily assigning domain ids, we need to
+ // get the color from all 4 scales, to keep the domains
+ // in sync.
+ const ln = '#5b99d2';
+ const lm = '#9ebedf';
+ const dn = '#5b99d2';
+ const dm = '#9ebedf';
+ if (theme === 'dark') {
+ return muted ? dm : dn;
+ } else {
+ return muted ? lm : ln;
+ }
+ }
+
+ return {
+ // testCard: testCard,
+ getColor: getColor,
+ };
+ }
+}
+
+class MockTopologyService {
+ public instancesIndex: Map<string, number>;
+ constructor() {
+ this.instancesIndex = new Map();
+ }
+}
+
+describe('DeviceNodeSvgComponent', () => {
+ let fs: FnService;
+ let logServiceSpy: jasmine.SpyObj<LogService>;
+ let component: DeviceNodeSvgComponent;
+ let fixture: ComponentFixture<DeviceNodeSvgComponent>;
+ let windowMock: Window;
+ let ar: MockActivatedRoute;
+ let testDevice: Device;
+
+
+ beforeEach(async(() => {
+ const logSpy = jasmine.createSpyObj('LogService', ['info', 'debug', 'warn', 'error']);
+ ar = new MockActivatedRoute({ 'debug': 'txrx' });
+ testDevice = new Device('test:1');
+ testDevice.online = true;
+
+ windowMock = <any>{
+ location: <any>{
+ hostname: 'foo',
+ host: 'foo',
+ port: '80',
+ protocol: 'http',
+ search: { debug: 'true' },
+ href: 'ws://foo:123/onos/ui/websock/path',
+ absUrl: 'ws://foo:123/onos/ui/websock/path'
+ }
+ };
+ fs = new FnService(ar, logSpy, windowMock);
+
+ TestBed.configureTestingModule({
+ imports: [ BrowserAnimationsModule ],
+ declarations: [ DeviceNodeSvgComponent, BadgeSvgComponent ],
+ providers: [
+ { provide: LogService, useValue: logSpy },
+ { provide: ActivatedRoute, useValue: ar },
+ { provide: ChangeDetectorRef, useClass: ChangeDetectorRef },
+ { provide: IconService, useClass: MockIconService },
+ { provide: SvgUtilService, useClass: MockSvgUtilService },
+ { provide: TopologyService, useClass: MockTopologyService },
+ { provide: 'Window', useValue: windowMock },
+ ]
+ })
+ .compileComponents();
+ logServiceSpy = TestBed.get(LogService);
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(DeviceNodeSvgComponent);
+ component = fixture.componentInstance;
+ component.device = testDevice;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/web/gui2-topo-lib/lib/layer/forcesvg/visuals/devicenodesvg/devicenodesvg.component.ts b/web/gui2-topo-lib/lib/layer/forcesvg/visuals/devicenodesvg/devicenodesvg.component.ts
new file mode 100644
index 0000000..2243e20
--- /dev/null
+++ b/web/gui2-topo-lib/lib/layer/forcesvg/visuals/devicenodesvg/devicenodesvg.component.ts
@@ -0,0 +1,168 @@
+/*
+ * Copyright 2018-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.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an 'AS IS' BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import {
+ ChangeDetectionStrategy,
+ ChangeDetectorRef,
+ Component,
+ EventEmitter,
+ Input,
+ OnChanges, OnInit, Output,
+ SimpleChanges,
+} from '@angular/core';
+import {
+ Badge,
+ Device,
+ LabelToggle,
+} from '../../models';
+import {IconService, LogService, SvgUtilService} from '../../../../../../gui2-fw-lib/public_api';
+import {NodeVisual, SelectedEvent} from '../nodevisual';
+import {animate, state, style, transition, trigger} from '@angular/animations';
+import {TopologyService} from '../../../../topology.service';
+
+/**
+ * The Device node in the force graph
+ *
+ * Note: here the selector is given square brackets [] so that it can be
+ * inserted in SVG element like a directive
+ */
+@Component({
+ selector: '[onos-devicenodesvg]',
+ templateUrl: './devicenodesvg.component.html',
+ styleUrls: ['./devicenodesvg.component.css'],
+ changeDetection: ChangeDetectionStrategy.Default,
+ animations: [
+ trigger('deviceLabelToggle', [
+ state('0', style({ // none
+ width: '36px',
+ })),
+ state('1, 2', // id
+ style({ width: '{{ txtWidth }}'}),
+ { params: {'txtWidth': '36px'}}
+ ), // default
+ transition('0 => 1', animate('250ms ease-in')),
+ transition('1 => 2', animate('250ms ease-in')),
+ transition('* => 0', animate('250ms ease-out'))
+ ]),
+ trigger('deviceLabelToggleTxt', [
+ state('0', style( {
+ opacity: 0,
+ })),
+ state( '1,2', style({
+ opacity: 1.0
+ })),
+ transition('0 => 1', animate('250ms ease-in')),
+ transition('* => 0', animate('250ms ease-out'))
+ ])
+ ]
+})
+export class DeviceNodeSvgComponent extends NodeVisual implements OnInit, OnChanges {
+ @Input() device: Device;
+ @Input() scale: number = 1.0;
+ @Input() labelToggle: LabelToggle.Enum = LabelToggle.Enum.NONE;
+ @Input() colorMuted: boolean = false;
+ @Input() colorTheme: string = 'light';
+ @Input() badge: Badge;
+ @Output() selectedEvent = new EventEmitter<SelectedEvent>();
+ textWidth: number = 36;
+ panelColor: string = '#9ebedf';
+
+ constructor(
+ protected log: LogService,
+ private is: IconService,
+ protected sus: SvgUtilService,
+ protected ts: TopologyService,
+ private ref: ChangeDetectorRef
+ ) {
+ super();
+ }
+
+ ngOnInit(): void {
+ this.panelColor = this.panelColour();
+ }
+
+ /**
+ * Called by parent (forcesvg) when a change happens
+ *
+ * There is a difficulty in passing the SVG text object to the animation
+ * directly, to get its width, so we capture it here and update textWidth
+ * local variable here and use it in the animation
+ */
+ ngOnChanges(changes: SimpleChanges) {
+ if (changes['device']) {
+ if (!this.device.x) {
+ this.device.x = 0;
+ this.device.y = 0;
+ }
+ // The master might have changed - recalculate color
+ this.panelColor = this.panelColour();
+ }
+
+ if (changes['colorMuted']) {
+ this.colorMuted = changes['colorMuted'].currentValue;
+ this.panelColor = this.panelColour();
+ }
+
+ if (changes['badge']) {
+ this.badge = changes['badge'].currentValue;
+ }
+ }
+
+ /**
+ * Calculate the text length in advance as well as possible
+ *
+ * The length of SVG text cannot be exactly estimated, because depending on
+ * the letters kerning might mean that it is shorter or longer than expected
+ *
+ * This takes the approach of 8px width per letter of this size, that on average
+ * evens out over words. A word like 'ilj' will be much shorter than 'wm0'
+ * because of kerning
+ *
+ *
+ * In addition in the template, the <svg:text> properties
+ * textLength and lengthAdjust ensure that the text becomes long with extra
+ * wide spacing created as necessary.
+ *
+ * Other approaches like getBBox() of the text
+ */
+ labelTextLen() {
+ if (this.labelToggle === 1) {
+ return this.device.id.length * 8;
+ } else if (this.labelToggle === 2 && this.device &&
+ this.device.props.name && this.device.props.name.trim().length > 0) {
+ return this.device.props.name.length * 8;
+ } else {
+ return 0;
+ }
+ }
+
+ deviceIcon(): string {
+ if (this.device.props && this.device.props.uiType) {
+ this.is.loadIconDef(this.device.props.uiType);
+ return this.device.props.uiType;
+ } else {
+ return 'm_' + this.device.type;
+ }
+ }
+
+ /**
+ * Get a colour for the banner of the nth panel
+ * @param idx The index of the panel (0-6)
+ */
+ panelColour(): string {
+ const idx = this.ts.instancesIndex.get(this.device.master);
+ return this.sus.cat7().getColor(idx, this.colorMuted, this.colorTheme);
+ }
+}
diff --git a/web/gui2-topo-lib/lib/layer/forcesvg/visuals/hostnodesvg/hostnodesvg.component.css b/web/gui2-topo-lib/lib/layer/forcesvg/visuals/hostnodesvg/hostnodesvg.component.css
new file mode 100644
index 0000000..92a114f
--- /dev/null
+++ b/web/gui2-topo-lib/lib/layer/forcesvg/visuals/hostnodesvg/hostnodesvg.component.css
@@ -0,0 +1,43 @@
+/*
+ * Copyright 2018-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.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+
+/*
+ ONOS GUI -- Topology View (forces host visual) -- CSS file
+ */
+.node.host text {
+ stroke: none;
+ font-size: 13px;
+ fill: #846;
+}
+
+.node.host circle {
+ stroke: #a3a596;
+ fill: #e0dfd6;
+}
+
+.node.host.selected > circle {
+ stroke-width: 2.0;
+ stroke: #009fdb;
+}
+
+.node.host use {
+ fill: #3c3a3a;
+}
+
+.node.host rect {
+ fill: #ffffff;
+}
\ No newline at end of file
diff --git a/web/gui2-topo-lib/lib/layer/forcesvg/visuals/hostnodesvg/hostnodesvg.component.html b/web/gui2-topo-lib/lib/layer/forcesvg/visuals/hostnodesvg/hostnodesvg.component.html
new file mode 100644
index 0000000..bdaf54a
--- /dev/null
+++ b/web/gui2-topo-lib/lib/layer/forcesvg/visuals/hostnodesvg/hostnodesvg.component.html
@@ -0,0 +1,71 @@
+<!--
+~ Copyright 2018-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.
+~ You may obtain a copy of the License at
+~
+~ http://www.apache.org/licenses/LICENSE-2.0
+~
+~ Unless required by applicable law or agreed to in writing, software
+~ distributed under the License is distributed on an "AS IS" BASIS,
+~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+~ See the License for the specific language governing permissions and
+~ limitations under the License.
+-->
+<svg:defs xmlns:svg="http://www.w3.org/2000/svg">
+ <!-- Template explanation: Define an SVG Filter that in
+ line 1) render the target object in to a bit map and apply a blur to it
+ based on its alpha channel
+ line 2) take that blurred layer and shift it down and to the right by 4
+ line 3) Merge this blurred and shifted layer and overlay it with the
+ original target object
+ -->
+ <svg:filter id="drop-shadow-host" x="-25%" y="-25%" width="200%" height="200%">
+ <svg:feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur" />
+ <svg:feOffset in="blur" dx="4" dy="4" result="offsetBlur"/>
+ <svg:feMerge >
+ <svg:feMergeNode in="offsetBlur" />
+ <svg:feMergeNode in="SourceGraphic" />
+ </svg:feMerge>
+ </svg:filter>
+ <svg:radialGradient id="three_stops_radial">
+ <svg:stop offset= "0%" style="stop-color: #e3e5d6;" />
+ <svg:stop offset= "70%" style="stop-color: #c3c5b6;" />
+ <svg:stop offset="100%" style="stop-color: #a3a596;" />
+ </svg:radialGradient>
+</svg:defs>
+<!-- Template explanation: Creates an SVG Group and in
+ line 1) transform it to the position calculated by the d3 force graph engine
+ line 2) Give it various CSS styles depending on attributes
+ line 3) When it is clicked, call the method that toggles the selection and
+ emits an event.
+ Other child objects have their own description
+-->
+<svg:g xmlns:svg="http://www.w3.org/2000/svg"
+ [attr.transform]="'translate(' + host?.x + ',' + host?.y + '), scale(' + scale + ')'"
+ [ngClass]="['node', 'host', 'endstation', 'fixed', selected?'selected':'', 'hovered']"
+ (click)="toggleSelected(host, $event)">
+ <svg:desc>Host {{host.id}}</svg:desc>
+ <!-- Template explanation: Creates an SVG Circle and in
+ line 1) Apply the drop shadow defined above to this circle
+ line 2) Apply the radial gradient defined above to the circle
+ -->
+ <svg:circle r="15"
+ filter="url(#drop-shadow-host)"
+ style="fill: url(#three_stops_radial)">
+ </svg:circle>
+ <svg:use xlink:href="#m_endstation" width="22.5" height="22.5" x="-11.25" y="-11.25">
+ </svg:use>
+ <!-- Template explanation: Creates an SVG Text
+ line 1) if the labelToggle is not 0
+ line 2) shift it below the circle, and have it centred with the circle
+ line 3) apply a scale and call on the hostName(0 method to get the
+ displayed value
+ -->
+ <svg:text
+ *ngIf="labelToggle != 0"
+ dy="30" text-anchor="middle"
+ >{{hostName()}}</svg:text>
+ <svg:g *ngIf="badge" onos-badgesvg [badge]="badge"></svg:g>
+</svg:g>
diff --git a/web/gui2-topo-lib/lib/layer/forcesvg/visuals/hostnodesvg/hostnodesvg.component.spec.ts b/web/gui2-topo-lib/lib/layer/forcesvg/visuals/hostnodesvg/hostnodesvg.component.spec.ts
new file mode 100644
index 0000000..cf697bb
--- /dev/null
+++ b/web/gui2-topo-lib/lib/layer/forcesvg/visuals/hostnodesvg/hostnodesvg.component.spec.ts
@@ -0,0 +1,70 @@
+/*
+ * Copyright 2018-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.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an 'AS IS' BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HostNodeSvgComponent } from './hostnodesvg.component';
+import {ActivatedRoute, Params} from '@angular/router';
+import {of} from 'rxjs';
+import {LogService} from '../../../../../../gui2-fw-lib/public_api';
+import {Host} from '../../models';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import {ChangeDetectorRef} from '@angular/core';
+import {BadgeSvgComponent} from '../badgesvg/badgesvg.component';
+
+class MockActivatedRoute extends ActivatedRoute {
+ constructor(params: Params) {
+ super();
+ this.queryParams = of(params);
+ }
+}
+
+describe('HostNodeSvgComponent', () => {
+ let logServiceSpy: jasmine.SpyObj<LogService>;
+ let component: HostNodeSvgComponent;
+ let fixture: ComponentFixture<HostNodeSvgComponent>;
+ let ar: MockActivatedRoute;
+ let testHost: Host;
+
+ beforeEach(async(() => {
+ const logSpy = jasmine.createSpyObj('LogService', ['info', 'debug', 'warn', 'error']);
+ ar = new MockActivatedRoute({ 'debug': 'txrx' });
+ testHost = new Host('host:1');
+ testHost.ips = ['10.205.86.123', '192.168.56.10'];
+
+ TestBed.configureTestingModule({
+ imports: [ BrowserAnimationsModule ],
+ declarations: [ HostNodeSvgComponent, BadgeSvgComponent ],
+ providers: [
+ { provide: LogService, useValue: logSpy },
+ { provide: ActivatedRoute, useValue: ar },
+ { provide: ChangeDetectorRef, useClass: ChangeDetectorRef }
+ ]
+ })
+ .compileComponents();
+ logServiceSpy = TestBed.get(LogService);
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(HostNodeSvgComponent);
+ component = fixture.componentInstance;
+ component.host = testHost;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/web/gui2-topo-lib/lib/layer/forcesvg/visuals/hostnodesvg/hostnodesvg.component.ts b/web/gui2-topo-lib/lib/layer/forcesvg/visuals/hostnodesvg/hostnodesvg.component.ts
new file mode 100644
index 0000000..decd099
--- /dev/null
+++ b/web/gui2-topo-lib/lib/layer/forcesvg/visuals/hostnodesvg/hostnodesvg.component.ts
@@ -0,0 +1,77 @@
+/*
+ * Copyright 2018-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.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an 'AS IS' BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import {
+ Component,
+ EventEmitter,
+ Input,
+ OnChanges,
+ Output,
+ SimpleChanges
+} from '@angular/core';
+import {Badge, Host, HostLabelToggle, Node} from '../../models';
+import {LogService} from '../../../../../../gui2-fw-lib/public_api';
+import {NodeVisual, SelectedEvent} from '../nodevisual';
+
+/**
+ * The Host node in the force graph
+ *
+ * Note: here the selector is given square brackets [] so that it can be
+ * inserted in SVG element like a directive
+ */
+@Component({
+ selector: '[onos-hostnodesvg]',
+ templateUrl: './hostnodesvg.component.html',
+ styleUrls: ['./hostnodesvg.component.css']
+})
+export class HostNodeSvgComponent extends NodeVisual implements OnChanges {
+ @Input() host: Host;
+ @Input() scale: number = 1.0;
+ @Input() labelToggle: HostLabelToggle.Enum = HostLabelToggle.Enum.IP;
+ @Input() badge: Badge;
+ @Output() selectedEvent = new EventEmitter<SelectedEvent>();
+
+ constructor(
+ protected log: LogService
+ ) {
+ super();
+ }
+
+ ngOnChanges(changes: SimpleChanges) {
+ if (changes['host']) {
+ if (!this.host.x) {
+ this.host.x = 0;
+ this.host.y = 0;
+ }
+ }
+
+ if (changes['badge']) {
+ this.badge = changes['badge'].currentValue;
+ }
+ }
+
+ hostName(): string {
+ if (this.host === undefined) {
+ return undefined;
+ } else if (this.labelToggle === HostLabelToggle.Enum.IP) {
+ return this.host.ips.join(',');
+ } else if (this.labelToggle === HostLabelToggle.Enum.MAC) {
+ return this.host.id;
+ } else {
+ return this.host.id; // Todo - replace with a friendly name
+ }
+
+ }
+}
diff --git a/web/gui2-topo-lib/lib/layer/forcesvg/visuals/linksvg/linksvg.component.css b/web/gui2-topo-lib/lib/layer/forcesvg/visuals/linksvg/linksvg.component.css
new file mode 100644
index 0000000..e5f12ae
--- /dev/null
+++ b/web/gui2-topo-lib/lib/layer/forcesvg/visuals/linksvg/linksvg.component.css
@@ -0,0 +1,149 @@
+/*
+ * Copyright 2018-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.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+
+/*
+ ONOS GUI -- Topology View (forces link svg) -- CSS file
+ */
+/* --- Topo Links --- */
+line {
+ stroke: #888888;
+ stroke-width: 2px;
+}
+
+.link {
+ opacity: .9;
+}
+
+.link.selected {
+ stroke: #009fdb;
+}
+.link.enhanced {
+ stroke: #009fdb;
+ stroke-width: 4px;
+ cursor: pointer;
+}
+
+.link.inactive {
+ opacity: .5;
+ stroke-dasharray: 4 2;
+}
+/* TODO: Review for not-permitted links */
+.link.not-permitted {
+ stroke: rgb(255,0,0);
+ stroke-dasharray: 8 4;
+}
+
+.link.secondary {
+ stroke: rgba(0,153,51,0.5);
+}
+
+.link.secondary.port-traffic-green {
+ stroke: rgb(0,153,51);
+}
+
+.link.secondary.port-traffic-yellow {
+ stroke: rgb(128,145,27);
+}
+
+.link.secondary.port-traffic-orange {
+ stroke: rgb(255, 137, 3);
+}
+
+.link.secondary.port-traffic-red {
+ stroke: rgb(183, 30, 21);
+}
+
+/* Port traffic color visualization for Kbps, Mbps, and Gbps */
+
+.link.secondary.port-traffic-Kbps {
+ stroke: rgb(0,153,51);
+}
+
+.link.secondary.port-traffic-Mbps {
+ stroke: rgb(128,145,27);
+}
+
+.link.secondary.port-traffic-Gbps {
+ stroke: rgb(255, 137, 3);
+}
+
+.link.secondary.port-traffic-Gbps-choked {
+ stroke: rgb(183, 30, 21);
+}
+
+.link.animated {
+ stroke-dasharray: 8;
+ animation: ants 5s infinite linear;
+ /* below line could be added via Javascript, based on path, if we cared
+ * enough about the direction of ant-flow
+ */
+ /*animation-direction: reverse;*/
+}
+@keyframes ants {
+ from {
+ stroke-dashoffset: 0;
+ }
+ to {
+ stroke-dashoffset: 400;
+ }
+}
+
+.link.primary {
+ stroke-width: 4px;
+ stroke: #ffA300;
+}
+
+.link.secondary.optical {
+ stroke-width: 4px;
+ stroke: rgba(128,64,255,0.5);
+}
+
+.link.primary.optical {
+ stroke-width: 6px;
+ stroke: #74f;
+}
+
+/* Link Labels */
+.linkLabel rect {
+ stroke: none;
+ fill: #ffffff;
+}
+
+.linkLabel text {
+ fill: #444;
+ text-anchor: middle;
+}
+
+
+/* Port Labels */
+.portLabel rect {
+ stroke: #a3a596;
+ fill: #ffffff;
+}
+
+.portLabel {
+ fill: #444;
+ alignment-baseline: middle;
+ dominant-baseline: middle;
+}
+
+/* Number of Links Labels */
+
+
+#ov-topo2 text.numLinkText {
+ fill: #444;
+}
diff --git a/web/gui2-topo-lib/lib/layer/forcesvg/visuals/linksvg/linksvg.component.html b/web/gui2-topo-lib/lib/layer/forcesvg/visuals/linksvg/linksvg.component.html
new file mode 100644
index 0000000..ec3afae
--- /dev/null
+++ b/web/gui2-topo-lib/lib/layer/forcesvg/visuals/linksvg/linksvg.component.html
@@ -0,0 +1,101 @@
+<!--
+~ Copyright 2018-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.
+~ You may obtain a copy of the License at
+~
+~ http://www.apache.org/licenses/LICENSE-2.0
+~
+~ Unless required by applicable law or agreed to in writing, software
+~ distributed under the License is distributed on an "AS IS" BASIS,
+~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+~ See the License for the specific language governing permissions and
+~ limitations under the License.
+-->
+<svg:defs xmlns:svg="http://www.w3.org/2000/svg">
+ <svg:filter id="glow">
+ <svg:feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0.9 0 0 0 0 0.9 0 0 0 0 1 0" />
+ <svg:feGaussianBlur stdDeviation="2.5" result="coloredBlur" />
+ <svg:feMerge>
+ <svg:feMergeNode in="coloredBlur" />
+ <svg:feMergeNode in="SourceGraphic"/>
+ </svg:feMerge>
+ </svg:filter>
+</svg:defs>
+<!-- Template explanation: Creates an SVG Line and in
+ line 1) transform end A to the position calculated by the d3 force graph engine
+ line 2) transform end B to the position calculated by the d3 force graph engine
+ line 3) Give it various CSS styles depending on attributes
+ ling 4) Change the line width depending on the scale
+ line 4) When it is clicked, call the method that toggles the selection and
+ emits an event.
+ line 5) When the mouse is moved over call on enhance() function. This will
+ flash up the port labels, and display the link in blue for 1 second
+ Other child objects have their own description
+-->
+<svg:line xmlns:svg="http://www.w3.org/2000/svg"
+ [attr.x1]="link.source?.x" [attr.y1]="link.source?.y"
+ [attr.x2]="link.target?.x" [attr.y2]="link.target?.y"
+ [ngClass]="['link', selected?'selected':'', enhanced?'enhanced':'', highlightAsString()]"
+ [ngStyle]="{'stroke-width': (enhanced ? 4 : 2) * scale + 'px'}"
+ (click)="toggleSelected(link, $event)"
+ (mouseover)="enhance()">
+<!-- [attr.filter]="highlighted?'url(#glow)':'none'">-->
+ <svg:desc>{{link.id}} {{linkHighlight?.css}} {{isHighlighted}}</svg:desc>
+</svg:line>
+<svg:g xmlns:svg="http://www.w3.org/2000/svg"
+ [ngClass]="['linkLabel']"
+ [attr.transform]="'scale(' + scale + ')'">
+ <!-- Template explanation: Creates SVG Text in the middle of the link to
+ show traffic and in:
+ line 1) Performs the animation 'linkLabelVisible' whenever the isHighlighted
+ boolean value changes
+ line 2 & 3) Sets the text at half way between the 2 end points of the line
+ Note: we do not use an *ngIf to enable or disable this, because that would
+ cause the fade out of the text to not work
+ -->
+ <svg:text xmlns:svg="http://www.w3.org/2000/svg"
+ [@linkLabelVisible]="isHighlighted"
+ [attr.x]="link.source?.x + (link.target?.x - link.source?.x)/2"
+ [attr.y]="link.source?.y + (link.target?.y - link.source?.y)/2"
+ >{{ linkHighlight?.label }}</svg:text>
+</svg:g>
+<!-- Template explanation: Creates an SVG Group if
+ line 1) 'enhanced' is active and port text exists
+ line 2) assigns classes to it
+-->
+<svg:g xmlns:svg="http://www.w3.org/2000/svg"
+ *ngIf="enhanced && link.portA"
+ class="portLabel"
+ [attr.transform]="'translate(' + labelPosSrc.x + ',' + labelPosSrc.y + '),scale(' + scale + ')'">
+ <!-- Template explanation: Creates an SVG Rectangle and in
+ line 1) transform end A to the position calculated by the d3 force graph engine
+ line 2) assigns classes to it
+ -->
+ <svg:rect
+ [attr.x]="2 - textLength(link.portA)/2" y="-8"
+ [attr.width]="4 + textLength(link.portA)" height="16" >
+ </svg:rect>
+ <!-- Template explanation: Creates SVG Text and in
+ line 1) transform it to the position calculated by the method labelPosSrc()
+ line 2) centre aligns it
+ line 3) ensures that the text fills the rectangle by adjusting spacing
+ -->
+ <svg:text y="2" text-anchor="middle"
+ [attr.textLength]= "textLength(link.portA)" lengthAdjust="spacing"
+ >{{ link.portA }}</svg:text>
+</svg:g>
+<!-- A repeat of the above, but for the other end of the line -->
+<svg:g xmlns:svg="http://www.w3.org/2000/svg"
+ *ngIf="enhanced && link.portB"
+ class="portLabel"
+ [attr.transform]="'translate(' + labelPosTgt.x + ',' + labelPosTgt.y + '),scale(' + scale + ')'">
+ <svg:rect
+ [attr.x]="2 - textLength(link.portB)/2" y="-8"
+ [attr.width]="4 + textLength(link.portB)" height="16">
+ </svg:rect>
+ <svg:text x="2" y="2" text-anchor="middle"
+ [attr.textLength]= "textLength(link.portB)" lengthAdjust="spacing"
+ >{{ link.portB }}</svg:text>
+</svg:g>
diff --git a/web/gui2-topo-lib/lib/layer/forcesvg/visuals/linksvg/linksvg.component.spec.ts b/web/gui2-topo-lib/lib/layer/forcesvg/visuals/linksvg/linksvg.component.spec.ts
new file mode 100644
index 0000000..6418fb4
--- /dev/null
+++ b/web/gui2-topo-lib/lib/layer/forcesvg/visuals/linksvg/linksvg.component.spec.ts
@@ -0,0 +1,76 @@
+/*
+ * Copyright 2018-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.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an 'AS IS' BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LinkSvgComponent } from './linksvg.component';
+import {LogService} from '../../../../../../gui2-fw-lib/public_api';
+import {ActivatedRoute, Params} from '@angular/router';
+import {of} from 'rxjs';
+import {Device, Link, RegionLink, LinkType} from '../../models';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+
+class MockActivatedRoute extends ActivatedRoute {
+ constructor(params: Params) {
+ super();
+ this.queryParams = of(params);
+ }
+}
+
+describe('LinkVisualComponent', () => {
+ let logServiceSpy: jasmine.SpyObj<LogService>;
+ let component: LinkSvgComponent;
+ let fixture: ComponentFixture<LinkSvgComponent>;
+ let ar: MockActivatedRoute;
+ let testLink: Link;
+ let testDeviceA: Device;
+ let testDeviceB: Device;
+
+ beforeEach(async(() => {
+ const logSpy = jasmine.createSpyObj('LogService', ['info', 'debug', 'warn', 'error']);
+ ar = new MockActivatedRoute({ 'debug': 'txrx' });
+
+ testDeviceA = new Device('test:A');
+ testDeviceA.online = true;
+
+ testDeviceB = new Device('test:B');
+ testDeviceB.online = true;
+
+ testLink = new RegionLink(LinkType.UiDeviceLink, testDeviceA, testDeviceB);
+ testLink.id = 'test:A/1-test:B/1';
+
+ TestBed.configureTestingModule({
+ imports: [ BrowserAnimationsModule ],
+ declarations: [ LinkSvgComponent ],
+ providers: [
+ { provide: LogService, useValue: logSpy },
+ { provide: ActivatedRoute, useValue: ar },
+ ]
+ })
+ .compileComponents();
+ logServiceSpy = TestBed.get(LogService);
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(LinkSvgComponent);
+ component = fixture.componentInstance;
+ component.link = testLink;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/web/gui2-topo-lib/lib/layer/forcesvg/visuals/linksvg/linksvg.component.ts b/web/gui2-topo-lib/lib/layer/forcesvg/visuals/linksvg/linksvg.component.ts
new file mode 100644
index 0000000..9997897
--- /dev/null
+++ b/web/gui2-topo-lib/lib/layer/forcesvg/visuals/linksvg/linksvg.component.ts
@@ -0,0 +1,142 @@
+/*
+ * Copyright 2018-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.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an 'AS IS' BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import {
+ ChangeDetectorRef,
+ Component, EventEmitter,
+ Input, OnChanges, Output, SimpleChanges,
+} from '@angular/core';
+import {Link, LinkHighlight, UiElement} from '../../models';
+import {LogService} from '../../../../../../gui2-fw-lib/public_api';
+import {NodeVisual, SelectedEvent} from '../nodevisual';
+import {animate, state, style, transition, trigger} from '@angular/animations';
+
+interface Point {
+ x: number;
+ y: number;
+}
+
+/*
+ * LinkSvgComponent gets its data from 2 sources - the force SVG regionData (which
+ * gives the Link below), and other state data here.
+ */
+@Component({
+ selector: '[onos-linksvg]',
+ templateUrl: './linksvg.component.html',
+ styleUrls: ['./linksvg.component.css'],
+ animations: [
+ trigger('linkLabelVisible', [
+ state('true', style( {
+ opacity: 1.0,
+ })),
+ state( 'false', style({
+ opacity: 0
+ })),
+ transition('false => true', animate('500ms ease-in')),
+ transition('true => false', animate('1000ms ease-out'))
+ ])
+ ]
+})
+export class LinkSvgComponent extends NodeVisual implements OnChanges {
+ @Input() link: Link;
+ @Input() linkHighlight: LinkHighlight;
+ @Input() highlightsEnabled: boolean = true;
+ @Input() scale = 1.0;
+ isHighlighted: boolean = false;
+ @Output() selectedEvent = new EventEmitter<SelectedEvent>();
+ @Output() enhancedEvent = new EventEmitter<Link>();
+ enhanced: boolean = false;
+ labelPosSrc: Point = {x: 0, y: 0};
+ labelPosTgt: Point = {x: 0, y: 0};
+ lastTimer: any;
+
+ constructor(
+ protected log: LogService,
+ private ref: ChangeDetectorRef
+ ) {
+ super();
+ }
+
+ ngOnChanges(changes: SimpleChanges) {
+ if (changes['linkHighlight']) {
+ const hl: LinkHighlight = changes['linkHighlight'].currentValue;
+ clearTimeout(this.lastTimer);
+ this.isHighlighted = true;
+ this.log.debug('Link highlighted', this.link.id);
+
+ if (hl.fadems > 0) {
+ this.lastTimer = setTimeout(() => {
+ this.isHighlighted = false;
+ this.linkHighlight = <LinkHighlight>{};
+ this.ref.markForCheck();
+ }, this.linkHighlight.fadems); // Disappear slightly before next one comes in
+ }
+ }
+
+ this.ref.markForCheck();
+ }
+
+ highlightAsString(): string {
+ if (this.linkHighlight && this.linkHighlight.css) {
+ return this.linkHighlight.css;
+ }
+ return '';
+ }
+
+ enhance() {
+ if (!this.highlightsEnabled) {
+ return;
+ }
+ this.enhancedEvent.emit(this.link);
+ this.enhanced = true;
+ this.repositionLabels();
+ setTimeout(() => {
+ this.enhanced = false;
+ this.ref.markForCheck();
+ }, 1000);
+ }
+
+ /**
+ * We want to place the label for the port about 40 px from the node.
+ * If the distance between the nodes is less than 100, then just place the
+ * label 1/3 of the way from the node
+ */
+ repositionLabels(): void {
+ const x1: number = this.link.source.x;
+ const y1: number = this.link.source.y;
+ const x2: number = this.link.target.x;
+ const y2: number = this.link.target.y;
+
+ const dist = Math.sqrt(Math.pow((x2 - x1), 2) + Math.pow((y2 - y1), 2));
+ const offset = dist > 100 ? 40 : dist / 3;
+ this.labelPosSrc = <Point>{
+ x: x1 + (x2 - x1) * offset / dist,
+ y: y1 + (y2 - y1) * offset / dist
+ };
+
+ this.labelPosTgt = <Point>{
+ x: x2 - (x2 - x1) * offset / dist,
+ y: y2 - (y2 - y1) * offset / dist
+ };
+ }
+
+ /**
+ * For the 14pt font we are using, the average width seems to be about 8px
+ * @param text The string we want to calculate a width for
+ */
+ textLength(text: string) {
+ return text.length * 8;
+ }
+}
diff --git a/web/gui2-topo-lib/lib/layer/forcesvg/visuals/nodevisual.ts b/web/gui2-topo-lib/lib/layer/forcesvg/visuals/nodevisual.ts
new file mode 100644
index 0000000..10bf3d8
--- /dev/null
+++ b/web/gui2-topo-lib/lib/layer/forcesvg/visuals/nodevisual.ts
@@ -0,0 +1,48 @@
+/*
+ * Copyright 2018-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.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an 'AS IS' BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import {EventEmitter} from '@angular/core';
+import {UiElement} from '../models';
+
+export interface SelectedEvent {
+ uiElement: UiElement;
+ deselecting: boolean;
+ isShift: boolean;
+ isCtrl: boolean;
+ isAlt: boolean;
+}
+
+/**
+ * A base class for the Host and Device components
+ */
+export abstract class NodeVisual {
+ selected: boolean;
+ selectedEvent = new EventEmitter<SelectedEvent>();
+
+ toggleSelected(uiElement: UiElement, event: MouseEvent) {
+ this.selected = !this.selected;
+ this.selectedEvent.emit(<SelectedEvent>{
+ uiElement: uiElement,
+ deselecting: !this.selected,
+ isShift: event.shiftKey,
+ isCtrl: event.ctrlKey,
+ isAlt: event.altKey
+ });
+ }
+
+ deselect() {
+ this.selected = false;
+ }
+}
diff --git a/web/gui2-topo-lib/lib/layer/forcesvg/visuals/subregionnodesvg/subregionnodesvg.component.css b/web/gui2-topo-lib/lib/layer/forcesvg/visuals/subregionnodesvg/subregionnodesvg.component.css
new file mode 100644
index 0000000..87c23bd
--- /dev/null
+++ b/web/gui2-topo-lib/lib/layer/forcesvg/visuals/subregionnodesvg/subregionnodesvg.component.css
@@ -0,0 +1,20 @@
+/*
+ * Copyright 2018-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.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+
+/*
+ ONOS GUI -- Topology View (forces subRegion visual) -- CSS file
+ */
\ No newline at end of file
diff --git a/web/gui2-topo-lib/lib/layer/forcesvg/visuals/subregionnodesvg/subregionnodesvg.component.html b/web/gui2-topo-lib/lib/layer/forcesvg/visuals/subregionnodesvg/subregionnodesvg.component.html
new file mode 100644
index 0000000..5760634
--- /dev/null
+++ b/web/gui2-topo-lib/lib/layer/forcesvg/visuals/subregionnodesvg/subregionnodesvg.component.html
@@ -0,0 +1,23 @@
+<!--
+~ Copyright 2018-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.
+~ You may obtain a copy of the License at
+~
+~ http://www.apache.org/licenses/LICENSE-2.0
+~
+~ Unless required by applicable law or agreed to in writing, software
+~ distributed under the License is distributed on an "AS IS" BASIS,
+~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+~ See the License for the specific language governing permissions and
+~ limitations under the License.
+-->
+<svg:g xmlns:svg="http://www.w3.org/2000/svg" [attr.transform]="'translate(' + subRegion?.x + ',' + subRegion?.y + ')'">>
+ <svg:circle
+ cx="0"
+ cy="0"
+ r="5">
+ </svg:circle>
+ <svg:text>{{subRegion?.id}}</svg:text>
+</svg:g>
\ No newline at end of file
diff --git a/web/gui2-topo-lib/lib/layer/forcesvg/visuals/subregionnodesvg/subregionnodesvg.component.spec.ts b/web/gui2-topo-lib/lib/layer/forcesvg/visuals/subregionnodesvg/subregionnodesvg.component.spec.ts
new file mode 100644
index 0000000..d6f6446
--- /dev/null
+++ b/web/gui2-topo-lib/lib/layer/forcesvg/visuals/subregionnodesvg/subregionnodesvg.component.spec.ts
@@ -0,0 +1,46 @@
+/*
+ * Copyright 2018-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.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SubRegionNodeSvgComponent } from './subregionnodesvg.component';
+import {SubRegion} from '../../models';
+
+describe('SubRegionNodeSvgComponent', () => {
+ let component: SubRegionNodeSvgComponent;
+ let fixture: ComponentFixture<SubRegionNodeSvgComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ SubRegionNodeSvgComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(SubRegionNodeSvgComponent);
+ component = fixture.debugElement.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+
+ it('should create with an input', () => {
+ component.subRegion = new SubRegion('testId');
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/web/gui2-topo-lib/lib/layer/forcesvg/visuals/subregionnodesvg/subregionnodesvg.component.ts b/web/gui2-topo-lib/lib/layer/forcesvg/visuals/subregionnodesvg/subregionnodesvg.component.ts
new file mode 100644
index 0000000..5dd4736
--- /dev/null
+++ b/web/gui2-topo-lib/lib/layer/forcesvg/visuals/subregionnodesvg/subregionnodesvg.component.ts
@@ -0,0 +1,42 @@
+/*
+ * Copyright 2018-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.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an 'AS IS' BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import {Component, Input, OnChanges, SimpleChanges} from '@angular/core';
+import {SubRegion} from '../../models';
+
+/**
+ * The SubRegion node in the force graph
+ *
+ * Note 1: here the selector is given square brackets [] so that it can be
+ * inserted in SVG element like a directive
+ * Note 2: the selector is exactly the same as the @Input alias to make this
+ * directive trick work
+ */
+@Component({
+ selector: '[onos-subregionnodesvg]',
+ templateUrl: './subregionnodesvg.component.html',
+ styleUrls: ['./subregionnodesvg.component.css']
+})
+export class SubRegionNodeSvgComponent implements OnChanges {
+ @Input() subRegion: SubRegion;
+
+ ngOnChanges(changes: SimpleChanges) {
+ if (!this.subRegion.x) {
+ this.subRegion.x = 0;
+ this.subRegion.y = 0;
+ }
+ }
+
+}
diff --git a/web/gui2-topo-lib/lib/layer/gridsvg/gridsvg.component.css b/web/gui2-topo-lib/lib/layer/gridsvg/gridsvg.component.css
new file mode 100644
index 0000000..056a0a0
--- /dev/null
+++ b/web/gui2-topo-lib/lib/layer/gridsvg/gridsvg.component.css
@@ -0,0 +1,25 @@
+/*
+ * 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.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.gridrect {
+ stroke-width: 1;
+ fill: none;
+}
+
+.gridtext {
+ fill: lightgray;
+ text-anchor: middle;
+ dominant-baseline: middle;
+}
\ No newline at end of file
diff --git a/web/gui2-topo-lib/lib/layer/gridsvg/gridsvg.component.html b/web/gui2-topo-lib/lib/layer/gridsvg/gridsvg.component.html
new file mode 100644
index 0000000..c183ac1
--- /dev/null
+++ b/web/gui2-topo-lib/lib/layer/gridsvg/gridsvg.component.html
@@ -0,0 +1,48 @@
+<!--
+~ 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.
+~ You may obtain a copy of the License at
+~
+~ http://www.apache.org/licenses/LICENSE-2.0
+~
+~ Unless required by applicable law or agreed to in writing, software
+~ distributed under the License is distributed on an "AS IS" BASIS,
+~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+~ See the License for the specific language governing permissions and
+~ limitations under the License.
+-->
+<svg:g *ngFor="let pt of gridPointsHoriz" xmlns:svg="http://www.w3.org/2000/svg"
+ [attr.transform]="'translate(' + horizCentreOffset + ',' + vertCentreOffset + '), ' +
+ 'scale(' + gridScaleX + ',' + gridScaleY +')'">
+ <svg:desc>Vertical grid lines</svg:desc>
+ <svg:rect id="gridRectVert" class="gridrect"
+ [ngStyle]="{'stroke': gridcolor, 'stroke-width': 1/gridScaleX }"
+ [attr.width]="spacing"
+ [attr.height]="vertUpperLimit-vertLowerLimit"
+ [attr.x]="pt"
+ [attr.y]="vertLowerLimit">
+ </svg:rect>
+ <svg:text id="gridTextVert" class="gridtext"
+ [ngStyle]="{'stroke': gridcolor, 'font-size': 100/gridScaleX+'%', 'stroke-width': 1/gridScaleX }"
+ [attr.x]="pt"
+ [attr.y]="(vertUpperLimit - vertLowerLimit)/2">{{pt}}</svg:text>
+</svg:g>
+
+<svg:g *ngFor="let pt of gridPointsVert" xmlns:svg="http://www.w3.org/2000/svg"
+ [attr.transform]="'translate(' + horizCentreOffset + ',' + vertCentreOffset + '), ' +
+ 'scale(' + gridScaleX + ',' + gridScaleY + ')'">
+ <svg:desc>Horizontal grid lines</svg:desc>
+ <svg:rect id="gridRectHoriz" class="gridrect"
+ [ngStyle]="{'stroke': gridcolor, 'stroke-width': 1/gridScaleY }"
+ [attr.width]="horizUpperLimit-horizLowerLimit"
+ [attr.height]="spacing"
+ [attr.x]="horizLowerLimit"
+ [attr.y]="pt">
+ </svg:rect>
+ <svg:text id="gridTextHoriz" class="gridtext"
+ [ngStyle]="{'stroke': gridcolor, 'font-size': 100/gridScaleY+'%', 'stroke-width': 1/gridScaleY }"
+ [attr.x]="(horizUpperLimit - horizLowerLimit)/2"
+ [attr.y]="invertVertical ? -pt : pt">{{pt}}</svg:text>
+</svg:g>
\ No newline at end of file
diff --git a/web/gui2-topo-lib/lib/layer/gridsvg/gridsvg.component.spec.ts b/web/gui2-topo-lib/lib/layer/gridsvg/gridsvg.component.spec.ts
new file mode 100644
index 0000000..48a031a
--- /dev/null
+++ b/web/gui2-topo-lib/lib/layer/gridsvg/gridsvg.component.spec.ts
@@ -0,0 +1,40 @@
+/*
+ * Copyright 2018-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.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GridsvgComponent } from './gridsvg.component';
+
+describe('GridsvgComponent', () => {
+ let component: GridsvgComponent;
+ let fixture: ComponentFixture<GridsvgComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ GridsvgComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(GridsvgComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/web/gui2-topo-lib/lib/layer/gridsvg/gridsvg.component.ts b/web/gui2-topo-lib/lib/layer/gridsvg/gridsvg.component.ts
new file mode 100644
index 0000000..e0934be
--- /dev/null
+++ b/web/gui2-topo-lib/lib/layer/gridsvg/gridsvg.component.ts
@@ -0,0 +1,116 @@
+/*
+ * 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.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an 'AS IS' BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import {
+ Component,
+ Input,
+ OnChanges,
+ OnInit,
+ SimpleChanges
+} from '@angular/core';
+
+/**
+ * How to fit in to the 1000 by 100 SVG viewbox
+ */
+export enum FitOption {
+ FIT1000WIDE = 'fit1000wide',
+ FIT1000HIGH = 'fit1000high',
+ FITNONE = 'fitnone'// 1:1 ratio
+}
+
+const SVG_VIEWBOX_CENTRE = 500; // View box is 0,0,1000,1000
+
+@Component({
+ selector: '[onos-gridsvg]',
+ templateUrl: './gridsvg.component.html',
+ styleUrls: ['./gridsvg.component.css']
+})
+export class GridsvgComponent implements OnInit, OnChanges {
+ @Input() horizLowerLimit: number = 0;
+ @Input() horizUpperLimit: number = 1000;
+ @Input() vertLowerLimit: number = 0;
+ @Input() vertUpperLimit: number = 1000;
+ @Input() spacing: number = 100;
+ @Input() invertVertical: boolean = false;
+ @Input() gridcolor: string = '#e8e7e1'; // If specifying this in a template use [gridcolor]="'#e8e7e1'"
+ @Input() centre: boolean = true;
+ @Input() fit: FitOption = FitOption.FITNONE;
+ @Input() aspectRatio: number = 1.0;
+
+ gridPointsHoriz: number[];
+ gridPointsVert: number[];
+ horizCentreOffset: number = 0;
+ vertCentreOffset: number = 0;
+ gridScaleX: number = 1.0;
+ gridScaleY: number = 1.0;
+
+ public static calculateGridPoints(lwr: number, upper: number, step: number): number[] {
+ const gridPoints = new Array<number>();
+ for (let i = lwr; i < upper; i += step) {
+ gridPoints.push(i);
+ }
+ return gridPoints;
+ }
+
+ public static calcOffset(lwr: number, upper: number): number {
+ return -((upper + lwr) * (upper - lwr) / ((upper - lwr) * 2) - SVG_VIEWBOX_CENTRE);
+ }
+
+ public static calcScale(lwr: number, upper: number): number {
+ return SVG_VIEWBOX_CENTRE * 2 / Math.abs(upper - lwr);
+ }
+
+ constructor() { }
+
+ ngOnInit() {
+ this.gridPointsHoriz = GridsvgComponent.calculateGridPoints(
+ this.horizLowerLimit, this.horizUpperLimit, this.spacing);
+ this.gridPointsVert = GridsvgComponent.calculateGridPoints(
+ this.vertLowerLimit, this.vertUpperLimit, this.spacing);
+ this.horizCentreOffset = GridsvgComponent.calcOffset(this.horizUpperLimit, this.horizLowerLimit);
+ this.vertCentreOffset = GridsvgComponent.calcOffset(this.vertUpperLimit, this.vertLowerLimit);
+ this.gridScaleX = this.whichScale(this.fit, true);
+ this.gridScaleY = this.whichScale(this.fit, false);
+ }
+
+ ngOnChanges(changes: SimpleChanges) {
+ if (changes['horizLowerLimit'] ||
+ changes['horizUpperLimit'] ||
+ changes['horizSpacing']) {
+ this.gridPointsHoriz = GridsvgComponent.calculateGridPoints(
+ this.horizLowerLimit, this.horizUpperLimit, this.spacing);
+ this.horizCentreOffset = GridsvgComponent.calcOffset(this.horizUpperLimit, this.horizLowerLimit);
+ }
+ if (changes['vertLowerLimit'] ||
+ changes['vertUpperLimit'] ||
+ changes['vertSpacing'] ) {
+ this.gridPointsVert = GridsvgComponent.calculateGridPoints(
+ this.vertLowerLimit, this.vertUpperLimit, this.spacing);
+ this.vertCentreOffset = GridsvgComponent.calcOffset(this.vertUpperLimit, this.vertLowerLimit);
+ }
+ }
+
+ whichScale(fit: FitOption, isX: boolean): number {
+ if (fit === FitOption.FIT1000HIGH) {
+ return GridsvgComponent.calcScale(
+ this.vertUpperLimit, this.vertLowerLimit) * (isX ? this.aspectRatio : 1.0);
+ } else if (fit === FitOption.FIT1000WIDE) {
+ return GridsvgComponent.calcScale(
+ this.horizUpperLimit, this.horizLowerLimit) * (isX ? 1.0 : this.aspectRatio);
+ } else {
+ return 1.0;
+ }
+ }
+}
diff --git a/web/gui2-topo-lib/lib/layer/mapsvg/mapsvg.component.css b/web/gui2-topo-lib/lib/layer/mapsvg/mapsvg.component.css
new file mode 100644
index 0000000..d35aa7b
--- /dev/null
+++ b/web/gui2-topo-lib/lib/layer/mapsvg/mapsvg.component.css
@@ -0,0 +1,26 @@
+/*
+ * Copyright 2018-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.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * ONOS GUI -- Topology Map Layer -- CSS file
+ */
+/* --- Topo Map --- */
+
+path.topo-map {
+ stroke-width: 0.05px;
+ stroke: #f4f4f4;
+ fill: #e5e5e6;
+}
\ No newline at end of file
diff --git a/web/gui2-topo-lib/lib/layer/mapsvg/mapsvg.component.html b/web/gui2-topo-lib/lib/layer/mapsvg/mapsvg.component.html
new file mode 100644
index 0000000..b399732
--- /dev/null
+++ b/web/gui2-topo-lib/lib/layer/mapsvg/mapsvg.component.html
@@ -0,0 +1,21 @@
+<!--
+~ Copyright 2018-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.
+~ You may obtain a copy of the License at
+~
+~ http://www.apache.org/licenses/LICENSE-2.0
+~
+~ Unless required by applicable law or agreed to in writing, software
+~ distributed under the License is distributed on an "AS IS" BASIS,
+~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+~ See the License for the specific language governing permissions and
+~ limitations under the License.
+-->
+<svg:desc xmlns:svg="http://www.w3.org/2000/svg">Map of {{map.id}} in SVG format</svg:desc>
+<svg:path xmlns:svg="http://www.w3.org/2000/svg" id="bgmap" class="topo-map" *ngFor="let f of geodata?.features" [attr.d]="pathGenerator(f)">
+<!-- Something about 'title' disagrees with Angular 8 <svg:title>{{ f.id }} {{f.properties?.name}}</svg:title>-->
+ <svg:desc>{{ f.id }} {{f.properties?.name}}</svg:desc>
+</svg:path>
+
diff --git a/web/gui2-topo-lib/lib/layer/mapsvg/mapsvg.component.spec.ts b/web/gui2-topo-lib/lib/layer/mapsvg/mapsvg.component.spec.ts
new file mode 100644
index 0000000..454aad0
--- /dev/null
+++ b/web/gui2-topo-lib/lib/layer/mapsvg/mapsvg.component.spec.ts
@@ -0,0 +1,60 @@
+/*
+ * Copyright 2018-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.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an 'AS IS' BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MapSvgComponent } from './mapsvg.component';
+import {HttpClient} from '@angular/common/http';
+import {from} from 'rxjs';
+import {LogService} from '../../../gui2-fw-lib/public_api';
+
+class MockHttpClient {
+ get() {
+ return from(['{"id":"app","icon":"nav_apps","cat":"PLATFORM","label":"Applications"}']);
+ }
+
+ subscribe() {}
+}
+
+describe('MapSvgComponent', () => {
+ let logServiceSpy: jasmine.SpyObj<LogService>;
+ let component: MapSvgComponent;
+ let fixture: ComponentFixture<MapSvgComponent>;
+
+ beforeEach(async(() => {
+ const logSpy = jasmine.createSpyObj('LogService', ['info', 'debug', 'warn', 'error']);
+
+ TestBed.configureTestingModule({
+ declarations: [ MapSvgComponent ],
+ providers: [
+ { provide: LogService, useValue: logSpy },
+ { provide: HttpClient, useClass: MockHttpClient },
+ ]
+ })
+ .compileComponents();
+
+ logServiceSpy = TestBed.get(LogService);
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(MapSvgComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/web/gui2-topo-lib/lib/layer/mapsvg/mapsvg.component.ts b/web/gui2-topo-lib/lib/layer/mapsvg/mapsvg.component.ts
new file mode 100644
index 0000000..993aebf
--- /dev/null
+++ b/web/gui2-topo-lib/lib/layer/mapsvg/mapsvg.component.ts
@@ -0,0 +1,167 @@
+/*
+ * Copyright 2018-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.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an 'AS IS' BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import {
+ Component, EventEmitter,
+ Input,
+ OnChanges, Output,
+ SimpleChanges
+} from '@angular/core';
+import { MapObject } from '../maputils';
+import {LogService, MapBounds} from '../../../../gui2-fw-lib/public_api';
+import {HttpClient} from '@angular/common/http';
+import * as d3 from 'd3';
+import * as topojson from 'topojson-client';
+
+const BUNDLED_URL_PREFIX = 'data/map/';
+
+/**
+ * Model of the transform attribute of a topojson file
+ */
+interface TopoDataTransform {
+ scale: number[];
+ translate: number[];
+}
+
+/**
+ * Model of the Feature returned prom topojson library
+ */
+interface Feature {
+ geometry: Object;
+ id: string;
+ properties: Object;
+ type: string;
+}
+
+/**
+ * Model of the Features Collection returned by the topojson.features function
+ */
+interface FeatureCollection {
+ type: string;
+ features: Feature[];
+}
+
+/**
+ * Model of the topojson file
+ */
+export interface TopoData {
+ type: string; // Usually "Topology"
+ objects: Object; // Can be a list of countries or individual countries
+ arcs: number[][][]; // Coordinates
+ bbox: number[]; // Bounding box
+ transform: TopoDataTransform; // scale and translate
+}
+
+@Component({
+ selector: '[onos-mapsvg]',
+ templateUrl: './mapsvg.component.html',
+ styleUrls: ['./mapsvg.component.css']
+})
+export class MapSvgComponent implements OnChanges {
+ @Input() map: MapObject = <MapObject>{id: 'none'};
+ @Output() mapBounds = new EventEmitter<MapBounds>();
+
+ geodata: FeatureCollection;
+ pathgen: any; // (Feature) => string; have to leave it general, as there is the bounds method used below
+ // testPath: string;
+ // testFeature = <Feature>{
+ // id: 'test',
+ // type: 'Feature',
+ // geometry: {
+ // coordinates: [
+ // [[-15, 60], [45, 60], [45, 45], [-15, 45], [-15, 60]],
+ // [[-10, 55], [45, 55], [45, 50], [-10, 50], [-10, 55]],
+ // ],
+ // type: 'Polygon'
+ // },
+ // properties: { name: 'Test'}
+ // };
+
+ constructor(
+ private log: LogService,
+ private httpClient: HttpClient,
+ ) {
+ // Scale everything to 360 degrees wide and 150 high
+ // See background.component.html for more details
+ this.pathgen = d3.geoPath().projection(d3.geoIdentity().reflectY(true)
+ // MapSvgComponent.scale()
+ );
+
+ // this.log.debug('Feature Test',this.testFeature);
+ // this.testPath = this.pathgen(this.testFeature);
+ // this.log.debug('Feature Path', this.testPath);
+ this.log.debug('MapSvgComponent constructed');
+ }
+
+ static getUrl(id: string): string {
+ if (id && id[0] === '*') {
+ return BUNDLED_URL_PREFIX + id.slice(1) + '.topojson';
+ }
+ return id + '.topojson';
+ }
+
+ /**
+ * Wrapper for the path generator function
+ * @param feature The county or state within the map
+ */
+ pathGenerator(feature: Feature): string {
+ return this.pathgen(feature);
+ }
+
+ ngOnChanges(changes: SimpleChanges): void {
+ this.log.debug('Change detected', changes);
+ if (changes['map']) {
+ const map: MapObject = <MapObject>(changes['map'].currentValue);
+ if (map.id) {
+ this.httpClient
+ .get(MapSvgComponent.getUrl(map.filePath))
+ .subscribe((topoData: TopoData) => {
+ // this.mapPathGenerator =
+ this.handleTopoJson(map, topoData);
+ this.log.debug('Path Generated for', map.id,
+ 'from', MapSvgComponent.getUrl(map.filePath));
+ });
+ }
+ }
+ }
+
+ /**
+ * Handle the topojson file stream as it arrives back from the server
+ *
+ * The topojson library converts the topojson file in to a FeatureCollection
+ * d3.geo then further converts this in to a Path
+ *
+ * @param map The Map chosen in the GUI
+ * @param topoData The data in the TopoJson file
+ */
+ handleTopoJson(map: MapObject, topoData: TopoData): void {
+
+ let topoObject = topoData.objects[map.id];
+ if (!topoObject) {
+ topoObject = topoData.objects['states'];
+ }
+ this.log.debug('Topo obj', topoObject, 'topodata', topoData);
+ this.geodata = <FeatureCollection>topojson.feature(topoData, topoObject);
+ const bounds = this.pathgen.bounds(this.geodata);
+ this.mapBounds.emit(<MapBounds>{
+ lngMin: bounds[0][0],
+ latMin: -bounds[0][1], // Y was inverted in the transform
+ lngMax: bounds[1][0],
+ latMax: -bounds[1][1] // Y was inverted in the transform
+ });
+ this.log.debug('Map retrieved', topoData, this.geodata);
+
+ }
+}
diff --git a/web/gui2-topo-lib/lib/layer/mapsvg/tests/bayarea.json b/web/gui2-topo-lib/lib/layer/mapsvg/tests/bayarea.json
new file mode 100644
index 0000000..f42f01e
--- /dev/null
+++ b/web/gui2-topo-lib/lib/layer/mapsvg/tests/bayarea.json
@@ -0,0 +1,7951 @@
+{
+ "type": "Topology",
+ "objects": {
+ "bayareaGEO": {
+ "type": "GeometryCollection",
+ "geometries": [
+ {
+ "type": "Polygon",
+ "properties": {
+ "id": "1",
+ "id_2": null
+ },
+ "arcs": [
+ [
+ 0
+ ]
+ ]
+ },
+ {
+ "type": "Polygon",
+ "properties": {
+ "id": "1",
+ "id_2": null
+ },
+ "arcs": [
+ [
+ 1
+ ],
+ [
+ 2
+ ],
+ [
+ 3
+ ],
+ [
+ 4
+ ]
+ ]
+ },
+ {
+ "type": "Polygon",
+ "properties": {
+ "id": null,
+ "id_2": null
+ },
+ "arcs": [
+ [
+ 5
+ ]
+ ]
+ },
+ {
+ "type": "Polygon",
+ "properties": {
+ "id": null,
+ "id_2": null
+ },
+ "arcs": [
+ [
+ 6
+ ]
+ ]
+ },
+ {
+ "type": "Polygon",
+ "properties": {
+ "id": null,
+ "id_2": null
+ },
+ "arcs": [
+ [
+ 7
+ ]
+ ]
+ }
+ ]
+ }
+ },
+ "arcs": [
+ [
+ [
+ -121.88778346897,
+ 37.470932004314
+ ],
+ [
+ -121.88441331969,
+ 37.639946684024
+ ],
+ [
+ -121.69574230232,
+ 37.610112237286
+ ],
+ [
+ -121.5591846074,
+ 37.482407003812
+ ],
+ [
+ -121.65620306458,
+ 37.372876810855
+ ],
+ [
+ -121.88025019411,
+ 37.414543587788
+ ],
+ [
+ -121.88778346897,
+ 37.470932004314
+ ]
+ ],
+ [
+ [
+ -122.41917671268,
+ 37.241614091443
+ ],
+ [
+ -122.41848285842,
+ 37.24869087536
+ ],
+ [
+ -122.41382412265,
+ 37.25825206214
+ ],
+ [
+ -122.41481534302,
+ 37.259757760846
+ ],
+ [
+ -122.41362587857,
+ 37.260134185523
+ ],
+ [
+ -122.41293202431,
+ 37.266985114633
+ ],
+ [
+ -122.41134607171,
+ 37.266533405022
+ ],
+ [
+ -122.40648909186,
+ 37.291377433665
+ ],
+ [
+ -122.40708382409,
+ 37.296572094199
+ ],
+ [
+ -122.40490313926,
+ 37.311553796321
+ ],
+ [
+ -122.40401104092,
+ 37.32480394493
+ ],
+ [
+ -122.40093825776,
+ 37.339635077181
+ ],
+ [
+ -122.40232596628,
+ 37.348217559803
+ ],
+ [
+ -122.40093825776,
+ 37.349196263962
+ ],
+ [
+ -122.39984791534,
+ 37.356800042426
+ ],
+ [
+ -122.40143386795,
+ 37.360639574125
+ ],
+ [
+ -122.40827328854,
+ 37.364102681148
+ ],
+ [
+ -122.40886802077,
+ 37.375621276246
+ ],
+ [
+ -122.41104870559,
+ 37.377202259887
+ ],
+ [
+ -122.41085046152,
+ 37.378933813399
+ ],
+ [
+ -122.41471622099,
+ 37.379987802493
+ ],
+ [
+ -122.41630217359,
+ 37.383902619128
+ ],
+ [
+ -122.41541007525,
+ 37.385483602768
+ ],
+ [
+ -122.41848285842,
+ 37.386914016539
+ ],
+ [
+ -122.42274510603,
+ 37.392259246944
+ ],
+ [
+ -122.42284422807,
+ 37.399637170602
+ ],
+ [
+ -122.42770120792,
+ 37.406262244907
+ ],
+ [
+ -122.42750296384,
+ 37.409800636865
+ ],
+ [
+ -122.43176521146,
+ 37.41130633557
+ ],
+ [
+ -122.43632482519,
+ 37.423653064957
+ ],
+ [
+ -122.43999234058,
+ 37.427567881592
+ ],
+ [
+ -122.44098356096,
+ 37.431859122903
+ ],
+ [
+ -122.44306512375,
+ 37.432988396932
+ ],
+ [
+ -122.44455195431,
+ 37.437656062919
+ ],
+ [
+ -122.44564229673,
+ 37.461446102469
+ ],
+ [
+ -122.44960717823,
+ 37.476728944331
+ ],
+ [
+ -122.45783430735,
+ 37.490506087488
+ ],
+ [
+ -122.47012544002,
+ 37.500594268816
+ ],
+ [
+ -122.47299997911,
+ 37.500820123622
+ ],
+ [
+ -122.48757091864,
+ 37.494496189058
+ ],
+ [
+ -122.49341911886,
+ 37.492915205417
+ ],
+ [
+ -122.49520331554,
+ 37.495776032958
+ ],
+ [
+ -122.49946556316,
+ 37.495550178152
+ ],
+ [
+ -122.50075414965,
+ 37.497733441275
+ ],
+ [
+ -122.49867258686,
+ 37.500518983881
+ ],
+ [
+ -122.50045678353,
+ 37.503379811421
+ ],
+ [
+ -122.51175669582,
+ 37.513166853008
+ ],
+ [
+ -122.51413562473,
+ 37.519566072507
+ ],
+ [
+ -122.51720840789,
+ 37.522125760307
+ ],
+ [
+ -122.51810050623,
+ 37.528148555129
+ ],
+ [
+ -122.51701016382,
+ 37.529428399029
+ ],
+ [
+ -122.51988470291,
+ 37.536204043205
+ ],
+ [
+ -122.51899260457,
+ 37.537333317234
+ ],
+ [
+ -122.51522596714,
+ 37.546066369727
+ ],
+ [
+ -122.5135408925,
+ 37.555326416767
+ ],
+ [
+ -122.51582069936,
+ 37.558563668984
+ ],
+ [
+ -122.51413562473,
+ 37.560295222495
+ ],
+ [
+ -122.51532508918,
+ 37.562478485618
+ ],
+ [
+ -122.51453211288,
+ 37.566318017318
+ ],
+ [
+ -122.51800138419,
+ 37.567673146153
+ ],
+ [
+ -122.51621718752,
+ 37.569254129794
+ ],
+ [
+ -122.51829875031,
+ 37.571136253176
+ ],
+ [
+ -122.51740665197,
+ 37.573018376558
+ ],
+ [
+ -122.52047943513,
+ 37.574147650587
+ ],
+ [
+ -122.51800138419,
+ 37.576707338387
+ ],
+ [
+ -122.51730752993,
+ 37.586795519715
+ ],
+ [
+ -122.51740665197,
+ 37.591312615832
+ ],
+ [
+ -122.52087592328,
+ 37.594399298178
+ ],
+ [
+ -122.51492860103,
+ 37.595754427013
+ ],
+ [
+ -122.51463123491,
+ 37.598690539489
+ ],
+ [
+ -122.50689971598,
+ 37.59613085169
+ ],
+ [
+ -122.50105151576,
+ 37.600422093001
+ ],
+ [
+ -122.49986205131,
+ 37.603584060283
+ ],
+ [
+ -122.50204273613,
+ 37.606670742629
+ ],
+ [
+ -122.49857346482,
+ 37.6081011564
+ ],
+ [
+ -122.49728487833,
+ 37.610510274329
+ ],
+ [
+ -122.49718575629,
+ 37.618339907598
+ ],
+ [
+ -122.49896995297,
+ 37.62022203098
+ ],
+ [
+ -122.49609541388,
+ 37.622857003715
+ ],
+ [
+ -122.49490594943,
+ 37.631590056208
+ ],
+ [
+ -122.4951041935,
+ 37.664339003056
+ ],
+ [
+ -122.49639277999,
+ 37.666371696309
+ ],
+ [
+ -122.49649190203,
+ 37.683084951942
+ ],
+ [
+ -122.50075414965,
+ 37.700852196668
+ ],
+ [
+ -122.50283571244,
+ 37.708154835391
+ ],
+ [
+ -122.49827609871,
+ 37.708154835391
+ ],
+ [
+ -122.49847434278,
+ 37.714855194631
+ ],
+ [
+ -122.50055590557,
+ 37.720576849712
+ ],
+ [
+ -122.50650322783,
+ 37.72795477337
+ ],
+ [
+ -122.50680059394,
+ 37.735407981963
+ ],
+ [
+ -122.50818830247,
+ 37.750991963567
+ ],
+ [
+ -122.51046810933,
+ 37.764091542306
+ ],
+ [
+ -122.5111619636,
+ 37.771318896093
+ ],
+ [
+ -122.51314440435,
+ 37.770791901546
+ ],
+ [
+ -122.51334264842,
+ 37.777341690916
+ ],
+ [
+ -122.51492860103,
+ 37.779750808845
+ ],
+ [
+ -122.51264879416,
+ 37.784117335091
+ ],
+ [
+ -122.50987337711,
+ 37.784794899509
+ ],
+ [
+ -122.50600761764,
+ 37.788182721596
+ ],
+ [
+ -122.49341911886,
+ 37.787655727049
+ ],
+ [
+ -122.48598496604,
+ 37.790817694331
+ ],
+ [
+ -122.47755959284,
+ 37.810994056987
+ ],
+ [
+ -122.47478417579,
+ 37.80918721854
+ ],
+ [
+ -122.46992719594,
+ 37.809413073346
+ ],
+ [
+ -122.46883685353,
+ 37.807003955417
+ ],
+ [
+ -122.46358338554,
+ 37.804895977229
+ ],
+ [
+ -122.44812034767,
+ 37.806928670482
+ ],
+ [
+ -122.44871507989,
+ 37.808660223993
+ ],
+ [
+ -122.43959585243,
+ 37.808886078799
+ ],
+ [
+ -122.44088443892,
+ 37.806928670482
+ ],
+ [
+ -122.43444150647,
+ 37.807003955417
+ ],
+ [
+ -122.42988189274,
+ 37.807832089705
+ ],
+ [
+ -122.42680910958,
+ 37.808133229446
+ ],
+ [
+ -122.42670998754,
+ 37.809638928152
+ ],
+ [
+ -122.42482666882,
+ 37.810768202181
+ ],
+ [
+ -122.42522315698,
+ 37.812650325563
+ ],
+ [
+ -122.4210600314,
+ 37.812876180369
+ ],
+ [
+ -122.40748031224,
+ 37.812725610499
+ ],
+ [
+ -122.39846020682,
+ 37.807229810223
+ ],
+ [
+ -122.3889444912,
+ 37.796614634348
+ ],
+ [
+ -122.38686292841,
+ 37.790064844978
+ ],
+ [
+ -122.38170858246,
+ 37.783515055609
+ ],
+ [
+ -122.37794194503,
+ 37.753626936302
+ ],
+ [
+ -122.37605862631,
+ 37.752572947208
+ ],
+ [
+ -122.37278759907,
+ 37.745496163291
+ ],
+ [
+ -122.36763325312,
+ 37.740150932886
+ ],
+ [
+ -122.37397706352,
+ 37.739473368468
+ ],
+ [
+ -122.36743500904,
+ 37.738193524569
+ ],
+ [
+ -122.37288672111,
+ 37.737064250539
+ ],
+ [
+ -122.37635599243,
+ 37.738344094439
+ ],
+ [
+ -122.37486916186,
+ 37.737290105345
+ ],
+ [
+ -122.37566213816,
+ 37.732773009228
+ ],
+ [
+ -122.37189550073,
+ 37.734203422999
+ ],
+ [
+ -122.36971481591,
+ 37.732396584552
+ ],
+ [
+ -122.36713764293,
+ 37.735633836769
+ ],
+ [
+ -122.36941744979,
+ 37.732170729746
+ ],
+ [
+ -122.36525432421,
+ 37.733826998322
+ ],
+ [
+ -122.36614642255,
+ 37.73194487494
+ ],
+ [
+ -122.36505608014,
+ 37.732848294163
+ ],
+ [
+ -122.36584905644,
+ 37.731719020134
+ ],
+ [
+ -122.36287539531,
+ 37.732170729746
+ ],
+ [
+ -122.36188417493,
+ 37.730062751558
+ ],
+ [
+ -122.35881139177,
+ 37.729761611817
+ ],
+ [
+ -122.36228066308,
+ 37.728557052852
+ ],
+ [
+ -122.35692807305,
+ 37.728707622723
+ ],
+ [
+ -122.36039734437,
+ 37.708305405261
+ ],
+ [
+ -122.39360322697,
+ 37.708230120326
+ ],
+ [
+ -122.39241376252,
+ 37.705821002397
+ ],
+ [
+ -122.39300849475,
+ 37.701529761086
+ ],
+ [
+ -122.38785414879,
+ 37.67864314076
+ ],
+ [
+ -122.38111385023,
+ 37.67736329686
+ ],
+ [
+ -122.38101472819,
+ 37.671867496584
+ ],
+ [
+ -122.38725941656,
+ 37.671792211649
+ ],
+ [
+ -122.38795327083,
+ 37.668856099173
+ ],
+ [
+ -122.39241376252,
+ 37.669910088267
+ ],
+ [
+ -122.39489181346,
+ 37.664489572927
+ ],
+ [
+ -122.39043132177,
+ 37.665995271632
+ ],
+ [
+ -122.38716029453,
+ 37.664564857862
+ ],
+ [
+ -122.38567346396,
+ 37.665167137344
+ ],
+ [
+ -122.38597083008,
+ 37.667651540209
+ ],
+ [
+ -122.38379014525,
+ 37.668329104626
+ ],
+ [
+ -122.38101472819,
+ 37.668027964885
+ ],
+ [
+ -122.38121297227,
+ 37.664564857862
+ ],
+ [
+ -122.37427442964,
+ 37.664037863315
+ ],
+ [
+ -122.37477003982,
+ 37.661177035774
+ ],
+ [
+ -122.37992438578,
+ 37.660574756292
+ ],
+ [
+ -122.37546389409,
+ 37.655003671081
+ ],
+ [
+ -122.37784282299,
+ 37.654476676534
+ ],
+ [
+ -122.37754545688,
+ 37.652218128476
+ ],
+ [
+ -122.38022175189,
+ 37.64815274197
+ ],
+ [
+ -122.39132342011,
+ 37.64815274197
+ ],
+ [
+ -122.3934049829,
+ 37.641904092342
+ ],
+ [
+ -122.39043132177,
+ 37.645216629494
+ ],
+ [
+ -122.38973746751,
+ 37.640398393636
+ ],
+ [
+ -122.38408751136,
+ 37.64017253883
+ ],
+ [
+ -122.38240243672,
+ 37.63618243726
+ ],
+ [
+ -122.37903228744,
+ 37.635429587907
+ ],
+ [
+ -122.38755678268,
+ 37.634827308425
+ ],
+ [
+ -122.3889444912,
+ 37.633246324784
+ ],
+ [
+ -122.38825063694,
+ 37.630234927373
+ ],
+ [
+ -122.38527697581,
+ 37.628804513603
+ ],
+ [
+ -122.3789331654,
+ 37.631514771273
+ ],
+ [
+ -122.37387794149,
+ 37.628126949185
+ ],
+ [
+ -122.36535344625,
+ 37.62820223412
+ ],
+ [
+ -122.36485783606,
+ 37.626847105285
+ ],
+ [
+ -122.36882271757,
+ 37.620749025527
+ ],
+ [
+ -122.35504475434,
+ 37.614952085511
+ ],
+ [
+ -122.35881139177,
+ 37.609456285235
+ ],
+ [
+ -122.37219286685,
+ 37.615027370446
+ ],
+ [
+ -122.37804106707,
+ 37.6068213125
+ ],
+ [
+ -122.37437355167,
+ 37.604562764442
+ ],
+ [
+ -122.37486916186,
+ 37.60411105483
+ ],
+ [
+ -122.36852535145,
+ 37.601852506771
+ ],
+ [
+ -122.3657499344,
+ 37.59741069559
+ ],
+ [
+ -122.36386661569,
+ 37.598389399748
+ ],
+ [
+ -122.36029822233,
+ 37.592065465185
+ ],
+ [
+ -122.33442737051,
+ 37.59214075012
+ ],
+ [
+ -122.33422912644,
+ 37.587849508809
+ ],
+ [
+ -122.33303966198,
+ 37.587849508809
+ ],
+ [
+ -122.33343615013,
+ 37.59628142156
+ ],
+ [
+ -122.33036336697,
+ 37.593119454279
+ ],
+ [
+ -122.32144238358,
+ 37.596206136625
+ ],
+ [
+ -122.31291788835,
+ 37.596356706496
+ ],
+ [
+ -122.30954773907,
+ 37.589957486997
+ ],
+ [
+ -122.31014247129,
+ 37.584536971656
+ ],
+ [
+ -122.30419514903,
+ 37.579869305669
+ ],
+ [
+ -122.2948776775,
+ 37.579267026186
+ ],
+ [
+ -122.29309348082,
+ 37.577234332934
+ ],
+ [
+ -122.28843474505,
+ 37.579417596057
+ ],
+ [
+ -122.28774089079,
+ 37.575427494487
+ ],
+ [
+ -122.28466810762,
+ 37.575803919163
+ ],
+ [
+ -122.27951376167,
+ 37.573846510846
+ ],
+ [
+ -122.2788199074,
+ 37.571362107982
+ ],
+ [
+ -122.27336819533,
+ 37.570232833953
+ ],
+ [
+ -122.26256389323,
+ 37.573846510846
+ ],
+ [
+ -122.25175959113,
+ 37.567597861218
+ ],
+ [
+ -122.24511841461,
+ 37.556907400407
+ ],
+ [
+ -122.24630787906,
+ 37.55351957832
+ ],
+ [
+ -122.25066924872,
+ 37.550282326103
+ ],
+ [
+ -122.24938066223,
+ 37.549228337009
+ ],
+ [
+ -122.2440280722,
+ 37.553594863255
+ ],
+ [
+ -122.24184738737,
+ 37.550357611038
+ ],
+ [
+ -122.22777205803,
+ 37.550056471297
+ ],
+ [
+ -122.22578961727,
+ 37.545388805309
+ ],
+ [
+ -122.22291507818,
+ 37.546216939597
+ ],
+ [
+ -122.23332289213,
+ 37.532138656699
+ ],
+ [
+ -122.24293772978,
+ 37.527621560582
+ ],
+ [
+ -122.24868680796,
+ 37.521071771213
+ ],
+ [
+ -122.24809207574,
+ 37.512263433785
+ ],
+ [
+ -122.24501929257,
+ 37.508122762344
+ ],
+ [
+ -122.24601051295,
+ 37.504734940256
+ ],
+ [
+ -122.24006319069,
+ 37.499916704398
+ ],
+ [
+ -122.23976582458,
+ 37.508800326762
+ ],
+ [
+ -122.23857636013,
+ 37.508725041826
+ ],
+ [
+ -122.22915976655,
+ 37.505563074545
+ ],
+ [
+ -122.22420366467,
+ 37.501121263363
+ ],
+ [
+ -122.22232034596,
+ 37.505036079998
+ ],
+ [
+ -122.21369672868,
+ 37.509703745985
+ ],
+ [
+ -122.2111195557,
+ 37.516554675096
+ ],
+ [
+ -122.20646081994,
+ 37.522728039789
+ ],
+ [
+ -122.19674686025,
+ 37.529503683965
+ ],
+ [
+ -122.19456617542,
+ 37.532966790988
+ ],
+ [
+ -122.19664773821,
+ 37.524233738495
+ ],
+ [
+ -122.20309067066,
+ 37.521899905501
+ ],
+ [
+ -122.17860752736,
+ 37.506240638962
+ ],
+ [
+ -122.17751718495,
+ 37.503229241551
+ ],
+ [
+ -122.17959874774,
+ 37.487795829818
+ ],
+ [
+ -122.17761630699,
+ 37.487720544883
+ ],
+ [
+ -122.17751718495,
+ 37.498185150887
+ ],
+ [
+ -122.17355230344,
+ 37.496077172699
+ ],
+ [
+ -122.16919093379,
+ 37.496077172699
+ ],
+ [
+ -122.16512693025,
+ 37.498862715304
+ ],
+ [
+ -122.15729628927,
+ 37.49893800024
+ ],
+ [
+ -122.15402526203,
+ 37.497432301534
+ ],
+ [
+ -122.15521472648,
+ 37.494270334252
+ ],
+ [
+ -122.15194369924,
+ 37.490506087488
+ ],
+ [
+ -122.15293491962,
+ 37.489979092941
+ ],
+ [
+ -122.14639286514,
+ 37.491484791647
+ ],
+ [
+ -122.14222973956,
+ 37.489226243588
+ ],
+ [
+ -122.14351832604,
+ 37.4871182654
+ ],
+ [
+ -122.1510516009,
+ 37.4871182654
+ ],
+ [
+ -122.15144808905,
+ 37.482601169283
+ ],
+ [
+ -122.15065511275,
+ 37.486892410594
+ ],
+ [
+ -122.14272534974,
+ 37.486666555789
+ ],
+ [
+ -122.14123851918,
+ 37.488021684624
+ ],
+ [
+ -122.14232886159,
+ 37.490506087488
+ ],
+ [
+ -122.14530252272,
+ 37.491936501258
+ ],
+ [
+ -122.15293491962,
+ 37.492538780741
+ ],
+ [
+ -122.15352965184,
+ 37.498712145434
+ ],
+ [
+ -122.16007170633,
+ 37.501196548298
+ ],
+ [
+ -122.15333140777,
+ 37.502551677133
+ ],
+ [
+ -122.15352965184,
+ 37.500142559204
+ ],
+ [
+ -122.15263755351,
+ 37.502777531939
+ ],
+ [
+ -122.14847442793,
+ 37.502401107263
+ ],
+ [
+ -122.14847442793,
+ 37.504584370386
+ ],
+ [
+ -122.13925607843,
+ 37.507972192474
+ ],
+ [
+ -122.1346964647,
+ 37.506842918444
+ ],
+ [
+ -122.13003772893,
+ 37.503455096357
+ ],
+ [
+ -122.12795616614,
+ 37.499239139981
+ ],
+ [
+ -122.12904650855,
+ 37.498109865952
+ ],
+ [
+ -122.12478426093,
+ 37.486741840724
+ ],
+ [
+ -122.13122719338,
+ 37.484182152924
+ ],
+ [
+ -122.13251577987,
+ 37.479966196548
+ ],
+ [
+ -122.12666757965,
+ 37.475072675755
+ ],
+ [
+ -122.12141411165,
+ 37.476879514202
+ ],
+ [
+ -122.12339655241,
+ 37.473190552373
+ ],
+ [
+ -122.11616064366,
+ 37.466189053392
+ ],
+ [
+ -122.11328610457,
+ 37.467544182227
+ ],
+ [
+ -122.11150190789,
+ 37.466264338327
+ ],
+ [
+ -122.09643535817,
+ 37.466113768456
+ ],
+ [
+ -122.09673272429,
+ 37.459940403763
+ ],
+ [
+ -122.09058715795,
+ 37.456853721417
+ ],
+ [
+ -122.0862257883,
+ 37.450303932047
+ ],
+ [
+ -122.08295476106,
+ 37.452110770494
+ ],
+ [
+ -122.08027846604,
+ 37.451960200623
+ ],
+ [
+ -122.07809778121,
+ 37.448195953859
+ ],
+ [
+ -122.07720568287,
+ 37.450078077241
+ ],
+ [
+ -122.07363728952,
+ 37.448798233341
+ ],
+ [
+ -122.06739260115,
+ 37.450454501918
+ ],
+ [
+ -122.06412157391,
+ 37.445636266059
+ ],
+ [
+ -122.05995844833,
+ 37.445636266059
+ ],
+ [
+ -122.05966108221,
+ 37.464081075204
+ ],
+ [
+ -122.05123570902,
+ 37.45903698454
+ ],
+ [
+ -122.04459453249,
+ 37.460693253116
+ ],
+ [
+ -122.0361691593,
+ 37.464984494427
+ ],
+ [
+ -121.99671858832,
+ 37.467243042486
+ ],
+ [
+ -121.99265458478,
+ 37.464608069751
+ ],
+ [
+ -121.97996696396,
+ 37.460919107922
+ ],
+ [
+ -121.97471349597,
+ 37.460768538051
+ ],
+ [
+ -121.9684688076,
+ 37.462801231304
+ ],
+ [
+ -121.96727934315,
+ 37.466941902744
+ ],
+ [
+ -121.97401964171,
+ 37.468598171321
+ ],
+ [
+ -121.97421788578,
+ 37.480794330837
+ ],
+ [
+ -121.99334843904,
+ 37.499464994787
+ ],
+ [
+ -121.99711507647,
+ 37.500443698945
+ ],
+ [
+ -122.00028698168,
+ 37.494872613734
+ ],
+ [
+ -122.01029830748,
+ 37.493366915029
+ ],
+ [
+ -122.00970357525,
+ 37.489000388782
+ ],
+ [
+ -122.01376757879,
+ 37.481622465125
+ ],
+ [
+ -122.02318417237,
+ 37.484709147471
+ ],
+ [
+ -122.02704993183,
+ 37.478611067713
+ ],
+ [
+ -122.03081656926,
+ 37.481547180189
+ ],
+ [
+ -122.0309156913,
+ 37.490129662812
+ ],
+ [
+ -122.035376183,
+ 37.494722043864
+ ],
+ [
+ -122.04340506804,
+ 37.495851317893
+ ],
+ [
+ -122.05242517347,
+ 37.50021784414
+ ],
+ [
+ -122.0577777635,
+ 37.501121263363
+ ],
+ [
+ -122.05549795663,
+ 37.50706877325
+ ],
+ [
+ -122.05827337369,
+ 37.515726540808
+ ],
+ [
+ -122.06322947557,
+ 37.515651255872
+ ],
+ [
+ -122.06719435707,
+ 37.513467992749
+ ],
+ [
+ -122.06907767579,
+ 37.51775923406
+ ],
+ [
+ -122.0725469471,
+ 37.516855814837
+ ],
+ [
+ -122.07294343526,
+ 37.518135658737
+ ],
+ [
+ -122.06124703482,
+ 37.522728039789
+ ],
+ [
+ -122.06907767579,
+ 37.524534878236
+ ],
+ [
+ -122.06749172319,
+ 37.530105963447
+ ],
+ [
+ -122.06283298742,
+ 37.528976689418
+ ],
+ [
+ -122.06729347911,
+ 37.540194144775
+ ],
+ [
+ -122.07353816748,
+ 37.535902903464
+ ],
+ [
+ -122.09375906316,
+ 37.529654253835
+ ],
+ [
+ -122.10188707024,
+ 37.522652754854
+ ],
+ [
+ -122.11031244344,
+ 37.511887009108
+ ],
+ [
+ -122.11725098607,
+ 37.506692348574
+ ],
+ [
+ -122.11853957256,
+ 37.526417001618
+ ],
+ [
+ -122.12042289128,
+ 37.532816221117
+ ],
+ [
+ -122.13578680711,
+ 37.558864808725
+ ],
+ [
+ -122.1410402751,
+ 37.562177345877
+ ],
+ [
+ -122.15352965184,
+ 37.582203138663
+ ],
+ [
+ -122.15501648241,
+ 37.591086761026
+ ],
+ [
+ -122.15243930943,
+ 37.599066964166
+ ],
+ [
+ -122.15580945871,
+ 37.611564263423
+ ],
+ [
+ -122.16245063523,
+ 37.614726230705
+ ],
+ [
+ -122.15759365539,
+ 37.621577159815
+ ],
+ [
+ -122.15838663169,
+ 37.63219233569
+ ],
+ [
+ -122.15975602629,
+ 37.637743456844
+ ],
+ [
+ -122.16691112692,
+ 37.666748120985
+ ],
+ [
+ -122.17216459492,
+ 37.673147340484
+ ],
+ [
+ -122.19724247044,
+ 37.692495568852
+ ],
+ [
+ -122.1979363247,
+ 37.698518363674
+ ],
+ [
+ -122.20546959956,
+ 37.70258375018
+ ],
+ [
+ -122.20913711495,
+ 37.696109245745
+ ],
+ [
+ -122.21617477962,
+ 37.695506966263
+ ],
+ [
+ -122.25651744894,
+ 37.72125441413
+ ],
+ [
+ -122.26910594772,
+ 37.737967669763
+ ],
+ [
+ -122.25949111007,
+ 37.752572947208
+ ],
+ [
+ -122.32154150562,
+ 37.771243611158
+ ],
+ [
+ -122.34027557073,
+ 37.800604735918
+ ],
+ [
+ -122.34671850318,
+ 37.810994056987
+ ],
+ [
+ -122.33393176032,
+ 37.81031649257
+ ],
+ [
+ -122.32302833618,
+ 37.810165922699
+ ],
+ [
+ -122.31767574615,
+ 37.815059443492
+ ],
+ [
+ -122.33284141791,
+ 37.814908873622
+ ],
+ [
+ -122.33284141791,
+ 37.818898975192
+ ],
+ [
+ -122.3288765364,
+ 37.819275399868
+ ],
+ [
+ -122.3288765364,
+ 37.820555243768
+ ],
+ [
+ -122.33066073308,
+ 37.820404673897
+ ],
+ [
+ -122.32996687882,
+ 37.821609232862
+ ],
+ [
+ -122.31767574615,
+ 37.824846485079
+ ],
+ [
+ -122.29358909101,
+ 37.828535446908
+ ],
+ [
+ -122.2948776775,
+ 37.833654822507
+ ],
+ [
+ -122.32025291913,
+ 37.838473058365
+ ],
+ [
+ -122.32005467505,
+ 37.843291294223
+ ],
+ [
+ -122.30954773907,
+ 37.845549842282
+ ],
+ [
+ -122.31083632556,
+ 37.854057039969
+ ],
+ [
+ -122.32233448192,
+ 37.853605330357
+ ],
+ [
+ -122.33125546531,
+ 37.857219007251
+ ],
+ [
+ -122.33264317383,
+ 37.862639522591
+ ],
+ [
+ -122.32927302455,
+ 37.871222005213
+ ],
+ [
+ -122.32590287527,
+ 37.874383972495
+ ],
+ [
+ -122.32758794991,
+ 37.877320084971
+ ],
+ [
+ -122.30835827462,
+ 37.8822888907
+ ],
+ [
+ -122.30835827462,
+ 37.890043239034
+ ],
+ [
+ -122.31182754593,
+ 37.897496447627
+ ],
+ [
+ -122.335715957,
+ 37.892301787093
+ ],
+ [
+ -122.33472473662,
+ 37.900583129974
+ ],
+ [
+ -122.33799576387,
+ 37.90351924245
+ ],
+ [
+ -122.34116766907,
+ 37.903368672579
+ ],
+ [
+ -122.34443869631,
+ 37.90223939855
+ ],
+ [
+ -122.34661938114,
+ 37.899228001139
+ ],
+ [
+ -122.34374484205,
+ 37.891398367869
+ ],
+ [
+ -122.35930700195,
+ 37.891172513063
+ ],
+ [
+ -122.36456046995,
+ 37.895313184504
+ ],
+ [
+ -122.37605862631,
+ 37.895012044763
+ ],
+ [
+ -122.38101472819,
+ 37.898776291527
+ ],
+ [
+ -122.38220419265,
+ 37.903368672579
+ ],
+ [
+ -122.39092693196,
+ 37.904497946608
+ ],
+ [
+ -122.3965768881,
+ 37.90765991389
+ ],
+ [
+ -122.39330586086,
+ 37.918124519895
+ ],
+ [
+ -122.39905493904,
+ 37.922942755753
+ ],
+ [
+ -122.41094958356,
+ 37.92745985187
+ ],
+ [
+ -122.41778900415,
+ 37.932503942534
+ ],
+ [
+ -122.41987056694,
+ 37.935967049557
+ ],
+ [
+ -122.41977144491,
+ 37.940333575803
+ ],
+ [
+ -122.42780032995,
+ 37.944624817114
+ ],
+ [
+ -122.42839506218,
+ 37.947862069331
+ ],
+ [
+ -122.42651174346,
+ 37.951701601031
+ ],
+ [
+ -122.4342432624,
+ 37.959305379494
+ ],
+ [
+ -122.435829215,
+ 37.964349470158
+ ],
+ [
+ -122.4342432624,
+ 37.967812577181
+ ],
+ [
+ -122.40321806462,
+ 37.967737292246
+ ],
+ [
+ -122.39984791534,
+ 37.972555528104
+ ],
+ [
+ -122.3926120066,
+ 37.974437651486
+ ],
+ [
+ -122.38488048766,
+ 37.980309876438
+ ],
+ [
+ -122.3773472128,
+ 37.980460446309
+ ],
+ [
+ -122.36822798534,
+ 37.991301476989
+ ],
+ [
+ -122.37100340239,
+ 37.995969142977
+ ],
+ [
+ -122.3733823313,
+ 38.008617012105
+ ],
+ [
+ -122.37080515832,
+ 38.014263382251
+ ],
+ [
+ -122.36783149719,
+ 38.016898354986
+ ],
+ [
+ -122.36366837161,
+ 38.017274779662
+ ],
+ [
+ -122.33769839775,
+ 38.007713592881
+ ],
+ [
+ -122.33185019753,
+ 38.008918151846
+ ],
+ [
+ -122.33125546531,
+ 38.006433748981
+ ],
+ [
+ -122.32639848546,
+ 38.009821571069
+ ],
+ [
+ -122.31926169875,
+ 38.015994935762
+ ],
+ [
+ -122.30469075922,
+ 38.01539265628
+ ],
+ [
+ -122.3025100744,
+ 38.017651204338
+ ],
+ [
+ -122.29656275214,
+ 38.019909752397
+ ],
+ [
+ -122.29477855546,
+ 38.024351563579
+ ],
+ [
+ -122.28873211117,
+ 38.026760681508
+ ],
+ [
+ -122.28674967041,
+ 38.030374358401
+ ],
+ [
+ -122.28119883631,
+ 38.031654202301
+ ],
+ [
+ -122.28090147019,
+ 38.039559120506
+ ],
+ [
+ -122.27604449035,
+ 38.04347393714
+ ],
+ [
+ -122.26950243587,
+ 38.044452641299
+ ],
+ [
+ -122.26861033753,
+ 38.047087614034
+ ],
+ [
+ -122.26989892402,
+ 38.058305069391
+ ],
+ [
+ -122.2696015579,
+ 38.060413047579
+ ],
+ [
+ -122.26533931029,
+ 38.059886053032
+ ],
+ [
+ -122.24521753665,
+ 38.063951439537
+ ],
+ [
+ -122.23203430564,
+ 38.061843461349
+ ],
+ [
+ -122.26099075155,
+ 38.095244490583
+ ],
+ [
+ -122.28139708038,
+ 38.119963431388
+ ],
+ [
+ -122.2748550259,
+ 38.121469130093
+ ],
+ [
+ -122.26335686953,
+ 38.13110560181
+ ],
+ [
+ -122.25592271671,
+ 38.132385445709
+ ],
+ [
+ -122.25532798449,
+ 38.12598622621
+ ],
+ [
+ -122.24987627242,
+ 38.128018919463
+ ],
+ [
+ -122.24848856389,
+ 38.122523119187
+ ],
+ [
+ -122.22935801063,
+ 38.124329957634
+ ],
+ [
+ -122.21726512204,
+ 38.143377046261
+ ],
+ [
+ -122.21468794906,
+ 38.154895641359
+ ],
+ [
+ -122.19535915172,
+ 38.15504621123
+ ],
+ [
+ -122.19902666711,
+ 38.159337452541
+ ],
+ [
+ -122.19446705338,
+ 38.164682682946
+ ],
+ [
+ -122.19803544674,
+ 38.16844692971
+ ],
+ [
+ -122.20190120621,
+ 38.168296359839
+ ],
+ [
+ -122.18068909015,
+ 38.185461325084
+ ],
+ [
+ -122.17652596457,
+ 38.184859045602
+ ],
+ [
+ -122.16195502504,
+ 38.191408834971
+ ],
+ [
+ -122.15719716724,
+ 38.187719873142
+ ],
+ [
+ -122.15590858075,
+ 38.180191379614
+ ],
+ [
+ -122.15362877388,
+ 38.178384541167
+ ],
+ [
+ -122.1518445772,
+ 38.172662886086
+ ],
+ [
+ -122.16611815062,
+ 38.14706600809
+ ],
+ [
+ -122.16988478805,
+ 38.137203681568
+ ],
+ [
+ -122.1655234184,
+ 38.126061511146
+ ],
+ [
+ -122.16651463877,
+ 38.119210582035
+ ],
+ [
+ -122.16463132006,
+ 38.114994625659
+ ],
+ [
+ -122.16542429636,
+ 38.110778669283
+ ],
+ [
+ -122.16364009968,
+ 38.108218981484
+ ],
+ [
+ -122.16284712338,
+ 38.101217482502
+ ],
+ [
+ -122.16086468263,
+ 38.10046463315
+ ],
+ [
+ -122.16344185561,
+ 38.106336858102
+ ],
+ [
+ -122.16324361153,
+ 38.120264571129
+ ],
+ [
+ -122.15779189946,
+ 38.12199612464
+ ],
+ [
+ -122.1547191163,
+ 38.120114001258
+ ],
+ [
+ -122.14897003811,
+ 38.120490425935
+ ],
+ [
+ -122.14827618385,
+ 38.124329957634
+ ],
+ [
+ -122.14738408551,
+ 38.121243275288
+ ],
+ [
+ -122.14014817677,
+ 38.117704883329
+ ],
+ [
+ -122.14153588529,
+ 38.121544415029
+ ],
+ [
+ -122.13806661398,
+ 38.124179387764
+ ],
+ [
+ -122.13241665783,
+ 38.126136796081
+ ],
+ [
+ -122.1278570441,
+ 38.125007522052
+ ],
+ [
+ -122.12161235573,
+ 38.129750472975
+ ],
+ [
+ -122.12428865075,
+ 38.137580106244
+ ],
+ [
+ -122.12240533203,
+ 38.14194663249
+ ],
+ [
+ -122.11507030125,
+ 38.146840153284
+ ],
+ [
+ -122.1102133214,
+ 38.145861449125
+ ],
+ [
+ -122.11130366382,
+ 38.14849642186
+ ],
+ [
+ -122.11259225031,
+ 38.148195282119
+ ],
+ [
+ -122.11526854532,
+ 38.156476625
+ ],
+ [
+ -122.12736143391,
+ 38.171383042186
+ ],
+ [
+ -122.11388083679,
+ 38.170931332574
+ ],
+ [
+ -122.11378171476,
+ 38.16844692971
+ ],
+ [
+ -122.10852824676,
+ 38.164080403464
+ ],
+ [
+ -122.11407908087,
+ 38.162122995146
+ ],
+ [
+ -122.11427732495,
+ 38.158208178512
+ ],
+ [
+ -122.11189839604,
+ 38.1551967811
+ ],
+ [
+ -122.10833000269,
+ 38.154970926294
+ ],
+ [
+ -122.10297741266,
+ 38.158961027864
+ ],
+ [
+ -122.10059848375,
+ 38.156551909935
+ ],
+ [
+ -122.0846398357,
+ 38.150980824724
+ ],
+ [
+ -122.09554325983,
+ 38.137881245985
+ ],
+ [
+ -122.08662227645,
+ 38.135170988315
+ ],
+ [
+ -122.08245915087,
+ 38.136300262344
+ ],
+ [
+ -122.0825582729,
+ 38.127416639981
+ ],
+ [
+ -122.08008022196,
+ 38.12455581244
+ ],
+ [
+ -122.07264606914,
+ 38.121318560223
+ ],
+ [
+ -122.06590577058,
+ 38.120791565676
+ ],
+ [
+ -122.06451806206,
+ 38.117403743588
+ ],
+ [
+ -122.06580664855,
+ 38.10731556226
+ ],
+ [
+ -122.06768996726,
+ 38.103927740173
+ ],
+ [
+ -122.10317565673,
+ 38.075319464765
+ ],
+ [
+ -122.11804396237,
+ 38.060940042126
+ ],
+ [
+ -122.11933254886,
+ 38.062897450443
+ ],
+ [
+ -122.12002640313,
+ 38.062144601091
+ ],
+ [
+ -122.12438777278,
+ 38.057853359779
+ ],
+ [
+ -122.1278570441,
+ 38.047388753775
+ ],
+ [
+ -122.13142543745,
+ 38.043398652205
+ ],
+ [
+ -122.13826485805,
+ 38.039784975312
+ ],
+ [
+ -122.13330875617,
+ 38.042871657658
+ ],
+ [
+ -122.15253843147,
+ 38.042796372723
+ ],
+ [
+ -122.15967521818,
+ 38.033385755813
+ ],
+ [
+ -122.16453219802,
+ 38.034740884648
+ ],
+ [
+ -122.17612947642,
+ 38.047765178452
+ ],
+ [
+ -122.18386099536,
+ 38.05401382808
+ ],
+ [
+ -122.1947644195,
+ 38.056498230944
+ ],
+ [
+ -122.22519488505,
+ 38.061015327061
+ ],
+ [
+ -122.22420366467,
+ 38.057702789909
+ ],
+ [
+ -122.20596520975,
+ 38.055368956915
+ ],
+ [
+ -122.20368540288,
+ 38.05401382808
+ ],
+ [
+ -122.19070041595,
+ 38.052432844439
+ ],
+ [
+ -122.18584343611,
+ 38.04987315664
+ ],
+ [
+ -122.17890489348,
+ 38.04460321117
+ ],
+ [
+ -122.1747417679,
+ 38.038806271153
+ ],
+ [
+ -122.17345318141,
+ 38.034740884648
+ ],
+ [
+ -122.17464264586,
+ 38.035945443612
+ ],
+ [
+ -122.17662508661,
+ 38.033988035295
+ ],
+ [
+ -122.17067776435,
+ 38.031051922819
+ ],
+ [
+ -122.16215326912,
+ 38.02608311709
+ ],
+ [
+ -122.16582078451,
+ 38.024200993708
+ ],
+ [
+ -122.17454352382,
+ 38.024200993708
+ ],
+ [
+ -122.17414703567,
+ 38.022620010067
+ ],
+ [
+ -122.1779136731,
+ 38.017425349533
+ ],
+ [
+ -122.17761630699,
+ 38.015091516539
+ ],
+ [
+ -122.16542429636,
+ 38.006509033917
+ ],
+ [
+ -122.15511560445,
+ 38.00470219547
+ ],
+ [
+ -122.14758232959,
+ 38.000260384288
+ ],
+ [
+ -122.14530252272,
+ 37.997023132071
+ ],
+ [
+ -122.13985081065,
+ 37.997926551294
+ ],
+ [
+ -122.14520340068,
+ 38.0007120939
+ ],
+ [
+ -122.14421218031,
+ 38.005906754434
+ ],
+ [
+ -122.14312183789,
+ 38.005831469499
+ ],
+ [
+ -122.14460866846,
+ 38.007487738075
+ ],
+ [
+ -122.15095247887,
+ 38.009746286134
+ ],
+ [
+ -122.15214194332,
+ 38.011477839645
+ ],
+ [
+ -122.15075423479,
+ 38.012757683545
+ ],
+ [
+ -122.15491736037,
+ 38.013359963027
+ ],
+ [
+ -122.14857354996,
+ 38.017575919403
+ ],
+ [
+ -122.14748320755,
+ 38.019006333174
+ ],
+ [
+ -122.14847442793,
+ 38.020888456556
+ ],
+ [
+ -122.15848575373,
+ 38.024878558126
+ ],
+ [
+ -122.14669023125,
+ 38.023598714226
+ ],
+ [
+ -122.14688847532,
+ 38.031729487236
+ ],
+ [
+ -122.12399128463,
+ 38.035719588806
+ ],
+ [
+ -122.09336257501,
+ 38.049120307287
+ ],
+ [
+ -122.07740392695,
+ 38.05401382808
+ ],
+ [
+ -122.06114791278,
+ 38.062144601091
+ ],
+ [
+ -122.05083922086,
+ 38.060187192773
+ ],
+ [
+ -122.02923061666,
+ 38.05928377355
+ ],
+ [
+ -122.02923061666,
+ 38.05657351588
+ ],
+ [
+ -122.03369110836,
+ 38.050550721057
+ ],
+ [
+ -122.03071744723,
+ 38.043775076882
+ ],
+ [
+ -122.04846029196,
+ 38.03150363243
+ ],
+ [
+ -122.03884545431,
+ 38.030148503595
+ ],
+ [
+ -122.03894457635,
+ 38.028191095278
+ ],
+ [
+ -122.0325016439,
+ 38.027513530861
+ ],
+ [
+ -122.03260076594,
+ 38.029772078919
+ ],
+ [
+ -122.03151042353,
+ 38.029621509048
+ ],
+ [
+ -122.03111393538,
+ 38.032557621524
+ ],
+ [
+ -122.02843764036,
+ 38.032858761266
+ ],
+ [
+ -122.02972622685,
+ 38.031277777625
+ ],
+ [
+ -122.02605871146,
+ 38.024351563579
+ ],
+ [
+ -122.01123526801,
+ 38.016975195765
+ ],
+ [
+ -122.00593693782,
+ 38.015769080956
+ ],
+ [
+ -122.00355800892,
+ 38.01667250018
+ ],
+ [
+ -121.99959312741,
+ 38.014940946668
+ ],
+ [
+ -121.99493439164,
+ 38.018554623562
+ ],
+ [
+ -121.99671858832,
+ 38.018855763303
+ ],
+ [
+ -122.00028698168,
+ 38.028040525407
+ ],
+ [
+ -121.99681771036,
+ 38.030223788531
+ ],
+ [
+ -121.99721419851,
+ 38.036848862836
+ ],
+ [
+ -121.99235721867,
+ 38.036848862836
+ ],
+ [
+ -121.99225809663,
+ 38.033310470877
+ ],
+ [
+ -121.98759936086,
+ 38.033385755813
+ ],
+ [
+ -121.98740111678,
+ 38.036171298418
+ ],
+ [
+ -121.98095818434,
+ 38.034213890101
+ ],
+ [
+ -121.97947135377,
+ 38.03391275036
+ ],
+ [
+ -121.99602473406,
+ 38.038806271153
+ ],
+ [
+ -121.99602473406,
+ 38.041290674017
+ ],
+ [
+ -121.99731332055,
+ 38.041290674017
+ ],
+ [
+ -121.99731332055,
+ 38.045205490652
+ ],
+ [
+ -121.98799584901,
+ 38.044076216623
+ ],
+ [
+ -121.98759936086,
+ 38.052131704698
+ ],
+ [
+ -121.98343623528,
+ 38.04987315664
+ ],
+ [
+ -121.98482394381,
+ 38.047614608581
+ ],
+ [
+ -121.9832379912,
+ 38.047765178452
+ ],
+ [
+ -121.98294062509,
+ 38.049647301834
+ ],
+ [
+ -121.97758803506,
+ 38.047840463387
+ ],
+ [
+ -121.97729066895,
+ 38.045732485199
+ ],
+ [
+ -121.97709242487,
+ 38.047915748322
+ ],
+ [
+ -121.95736713938,
+ 38.048442742869
+ ],
+ [
+ -121.95697065123,
+ 38.040161399988
+ ],
+ [
+ -121.95994431236,
+ 38.040387254794
+ ],
+ [
+ -121.96043992255,
+ 38.038505131412
+ ],
+ [
+ -121.93268575202,
+ 38.031127207754
+ ],
+ [
+ -121.93248750794,
+ 38.033536325683
+ ],
+ [
+ -121.92852262644,
+ 38.034439744907
+ ],
+ [
+ -121.9284235044,
+ 38.047087614034
+ ],
+ [
+ -121.91018504947,
+ 38.044979635846
+ ],
+ [
+ -121.88520629599,
+ 38.047614608581
+ ],
+ [
+ -121.87113096665,
+ 38.053035123921
+ ],
+ [
+ -121.86448979013,
+ 38.061015327061
+ ],
+ [
+ -121.86250734938,
+ 38.066059417725
+ ],
+ [
+ -121.86161525104,
+ 38.069898949425
+ ],
+ [
+ -121.87668180076,
+ 38.072985631771
+ ],
+ [
+ -121.88272824505,
+ 38.076072314118
+ ],
+ [
+ -121.88520629599,
+ 38.080137700623
+ ],
+ [
+ -121.88322385524,
+ 38.088795468181
+ ],
+ [
+ -121.88768434693,
+ 38.094140698586
+ ],
+ [
+ -121.89591147606,
+ 38.097453235738
+ ],
+ [
+ -121.88966678769,
+ 38.104755874461
+ ],
+ [
+ -121.89095537418,
+ 38.11243493786
+ ],
+ [
+ -121.88857644527,
+ 38.120942135546
+ ],
+ [
+ -121.88966678769,
+ 38.124932237116
+ ],
+ [
+ -121.89382991327,
+ 38.126663790628
+ ],
+ [
+ -121.89690269643,
+ 38.12598622621
+ ],
+ [
+ -121.90512982556,
+ 38.118834157359
+ ],
+ [
+ -121.90968943929,
+ 38.119210582035
+ ],
+ [
+ -121.91365432079,
+ 38.121694984899
+ ],
+ [
+ -121.91543851747,
+ 38.131557311421
+ ],
+ [
+ -121.90859909687,
+ 38.140139794044
+ ],
+ [
+ -121.90899558502,
+ 38.143904040808
+ ],
+ [
+ -121.91038329355,
+ 38.146689583413
+ ],
+ [
+ -121.92832438236,
+ 38.160542011505
+ ],
+ [
+ -121.93407346054,
+ 38.167919935163
+ ],
+ [
+ -121.91801569045,
+ 38.178459826103
+ ],
+ [
+ -121.91861042267,
+ 38.180191379614
+ ],
+ [
+ -121.92782877217,
+ 38.183805056508
+ ],
+ [
+ -121.92991033496,
+ 38.18696702379
+ ],
+ [
+ -121.92881999255,
+ 38.183805056508
+ ],
+ [
+ -121.92069198546,
+ 38.178685680908
+ ],
+ [
+ -121.92128671769,
+ 38.177405837009
+ ],
+ [
+ -121.92326915844,
+ 38.178610395973
+ ],
+ [
+ -121.9215840838,
+ 38.177179982203
+ ],
+ [
+ -121.92891911459,
+ 38.173641590244
+ ],
+ [
+ -121.93199189775,
+ 38.17371687518
+ ],
+ [
+ -121.93565941314,
+ 38.176351847915
+ ],
+ [
+ -121.93615502333,
+ 38.181471223514
+ ],
+ [
+ -121.93893044039,
+ 38.183654486637
+ ],
+ [
+ -121.9392278065,
+ 38.18711759366
+ ],
+ [
+ -121.94349005412,
+ 38.189903136266
+ ],
+ [
+ -121.94428303042,
+ 38.187494018337
+ ],
+ [
+ -121.94210234559,
+ 38.184106196249
+ ],
+ [
+ -121.94527425079,
+ 38.181245368708
+ ],
+ [
+ -121.94854527804,
+ 38.184633190796
+ ],
+ [
+ -121.95191542731,
+ 38.183805056508
+ ],
+ [
+ -121.95389786807,
+ 38.185084900407
+ ],
+ [
+ -121.95736713938,
+ 38.184332051055
+ ],
+ [
+ -121.95825923772,
+ 38.180492519355
+ ],
+ [
+ -121.96192675312,
+ 38.183353346896
+ ],
+ [
+ -121.96400831591,
+ 38.182449927673
+ ],
+ [
+ -121.96172850904,
+ 38.172286461409
+ ],
+ [
+ -121.96222411923,
+ 38.172662886086
+ ],
+ [
+ -121.9632153396,
+ 38.172662886086
+ ],
+ [
+ -121.96361182775,
+ 38.172587601151
+ ],
+ [
+ -121.96371094979,
+ 38.172512316215
+ ],
+ [
+ -121.96093553274,
+ 38.170404338027
+ ],
+ [
+ -121.95538469863,
+ 38.170479622963
+ ],
+ [
+ -121.95260928158,
+ 38.167091800875
+ ],
+ [
+ -121.9532040138,
+ 38.164080403464
+ ],
+ [
+ -121.95736713938,
+ 38.160316156699
+ ],
+ [
+ -121.96549514647,
+ 38.160843151246
+ ],
+ [
+ -121.96450392609,
+ 38.159864447088
+ ],
+ [
+ -121.96569339054,
+ 38.159262167605
+ ],
+ [
+ -121.9660898787,
+ 38.158584603188
+ ],
+ [
+ -121.95677240716,
+ 38.160165586829
+ ],
+ [
+ -121.9508250849,
+ 38.156326055129
+ ],
+ [
+ -121.95310489177,
+ 38.154820356424
+ ],
+ [
+ -121.95013123064,
+ 38.156250770194
+ ],
+ [
+ -121.94487776264,
+ 38.154443931747
+ ],
+ [
+ -121.95151893916,
+ 38.148421136925
+ ],
+ [
+ -121.94914001026,
+ 38.142172487296
+ ],
+ [
+ -121.95221279343,
+ 38.138483525467
+ ],
+ [
+ -121.94517512876,
+ 38.135999122603
+ ],
+ [
+ -121.93674975556,
+ 38.128922338686
+ ],
+ [
+ -121.93219014183,
+ 38.122824258929
+ ],
+ [
+ -121.9416067354,
+ 38.113263072148
+ ],
+ [
+ -121.94448127449,
+ 38.117253173718
+ ],
+ [
+ -121.95330313584,
+ 38.121469130093
+ ],
+ [
+ -121.97629944857,
+ 38.129675188039
+ ],
+ [
+ -121.98056169619,
+ 38.128997623622
+ ],
+ [
+ -121.98105730638,
+ 38.130653892198
+ ],
+ [
+ -121.99126687625,
+ 38.138935235079
+ ],
+ [
+ -121.98145379453,
+ 38.130277467522
+ ],
+ [
+ -121.98135467249,
+ 38.125760371405
+ ],
+ [
+ -121.97857925544,
+ 38.122824258929
+ ],
+ [
+ -121.97709242487,
+ 38.117629598394
+ ],
+ [
+ -121.98125555045,
+ 38.112660792665
+ ],
+ [
+ -121.98789672697,
+ 38.111456233701
+ ],
+ [
+ -121.98393184547,
+ 38.114241776306
+ ],
+ [
+ -121.98948267957,
+ 38.125760371405
+ ],
+ [
+ -121.99959312741,
+ 38.136977826762
+ ],
+ [
+ -122.00702728023,
+ 38.140742073526
+ ],
+ [
+ -122.02021051124,
+ 38.137354251438
+ ],
+ [
+ -122.04419804434,
+ 38.137053111697
+ ],
+ [
+ -122.05301990569,
+ 38.133138295062
+ ],
+ [
+ -122.05629093293,
+ 38.13381585948
+ ],
+ [
+ -122.05976020425,
+ 38.138709380273
+ ],
+ [
+ -122.05837249572,
+ 38.143979325743
+ ],
+ [
+ -122.03646652541,
+ 38.170103198286
+ ],
+ [
+ -122.03289813205,
+ 38.170404338027
+ ],
+ [
+ -122.0285367624,
+ 38.168221074904
+ ],
+ [
+ -122.02080524346,
+ 38.169124494128
+ ],
+ [
+ -122.00970357525,
+ 38.176125993109
+ ],
+ [
+ -121.99632210017,
+ 38.179589100132
+ ],
+ [
+ -121.99721419851,
+ 38.175824853368
+ ],
+ [
+ -122.00028698168,
+ 38.172587601151
+ ],
+ [
+ -122.00425186318,
+ 38.170630192833
+ ],
+ [
+ -122.00454922929,
+ 38.169952628416
+ ],
+ [
+ -122.0032606428,
+ 38.168371644775
+ ],
+ [
+ -122.0000887376,
+ 38.166338951522
+ ],
+ [
+ -121.99315019497,
+ 38.164381543205
+ ],
+ [
+ -121.99394317127,
+ 38.161671285535
+ ],
+ [
+ -121.99533087979,
+ 38.162122995146
+ ],
+ [
+ -121.99761068666,
+ 38.160993721117
+ ],
+ [
+ -121.99404229331,
+ 38.161144290988
+ ],
+ [
+ -121.99176248644,
+ 38.163628693852
+ ],
+ [
+ -121.99374492719,
+ 38.164908537752
+ ],
+ [
+ -122.00107995798,
+ 38.167091800875
+ ],
+ [
+ -122.00435098522,
+ 38.170404338027
+ ],
+ [
+ -122.00107995798,
+ 38.171759466862
+ ],
+ [
+ -121.99919663926,
+ 38.173340450503
+ ],
+ [
+ -121.99622297813,
+ 38.176803557526
+ ],
+ [
+ -121.99572736795,
+ 38.179739670002
+ ],
+ [
+ -121.98175116064,
+ 38.186364744307
+ ],
+ [
+ -121.9768941808,
+ 38.18696702379
+ ],
+ [
+ -121.97957047581,
+ 38.187795158078
+ ],
+ [
+ -121.98809497105,
+ 38.184934330537
+ ],
+ [
+ -121.98700462863,
+ 38.189150286913
+ ],
+ [
+ -121.9961238561,
+ 38.192613393936
+ ],
+ [
+ -121.98829321512,
+ 38.189225571848
+ ],
+ [
+ -121.98829321512,
+ 38.186590599113
+ ],
+ [
+ -121.9969168324,
+ 38.181922933126
+ ],
+ [
+ -122.01495704324,
+ 38.177255267138
+ ],
+ [
+ -122.02496836904,
+ 38.170630192833
+ ],
+ [
+ -122.03577267115,
+ 38.172286461409
+ ],
+ [
+ -122.03557442707,
+ 38.17898682065
+ ],
+ [
+ -122.03716037967,
+ 38.178384541167
+ ],
+ [
+ -122.03815160005,
+ 38.178459826103
+ ],
+ [
+ -122.04152174933,
+ 38.180191379614
+ ],
+ [
+ -122.03706125763,
+ 38.178535111038
+ ],
+ [
+ -122.03002359296,
+ 38.181772363255
+ ],
+ [
+ -122.02962710481,
+ 38.178610395973
+ ],
+ [
+ -122.02298592829,
+ 38.177179982203
+ ],
+ [
+ -122.01317284657,
+ 38.180643089226
+ ],
+ [
+ -122.01951665698,
+ 38.179212675455
+ ],
+ [
+ -122.01872368067,
+ 38.181019513902
+ ],
+ [
+ -122.02070612143,
+ 38.180793659096
+ ],
+ [
+ -122.02268856218,
+ 38.178384541167
+ ],
+ [
+ -122.02546397923,
+ 38.179664385067
+ ],
+ [
+ -122.02407627071,
+ 38.181998218061
+ ],
+ [
+ -122.02744641999,
+ 38.18184764819
+ ],
+ [
+ -122.02883412851,
+ 38.183805056508
+ ],
+ [
+ -122.02576134535,
+ 38.188773862236
+ ],
+ [
+ -122.03369110836,
+ 38.194796657059
+ ],
+ [
+ -122.03755686782,
+ 38.193290958353
+ ],
+ [
+ -122.0361691593,
+ 38.19110769523
+ ],
+ [
+ -122.03468232873,
+ 38.193592098094
+ ],
+ [
+ -122.03636740337,
+ 38.190279560942
+ ],
+ [
+ -122.0377551119,
+ 38.189225571848
+ ],
+ [
+ -122.04370243416,
+ 38.190053706136
+ ],
+ [
+ -122.05440761422,
+ 38.185913034696
+ ],
+ [
+ -122.05411024811,
+ 38.183202777025
+ ],
+ [
+ -122.0469734614,
+ 38.181772363255
+ ],
+ [
+ -122.04637872917,
+ 38.178459826103
+ ],
+ [
+ -122.05767864146,
+ 38.179513815197
+ ],
+ [
+ -122.05896722795,
+ 38.177255267138
+ ],
+ [
+ -122.05728215331,
+ 38.172211176474
+ ],
+ [
+ -122.06372508576,
+ 38.173039310762
+ ],
+ [
+ -122.06838382152,
+ 38.179287960391
+ ],
+ [
+ -122.07185309284,
+ 38.180266664549
+ ],
+ [
+ -122.07215045895,
+ 38.181471223514
+ ],
+ [
+ -122.06788821134,
+ 38.183503916767
+ ],
+ [
+ -122.0662031367,
+ 38.188246867689
+ ],
+ [
+ -122.06679786892,
+ 38.190580700683
+ ],
+ [
+ -122.06590577058,
+ 38.191484119907
+ ],
+ [
+ -122.0662031367,
+ 38.19238753913
+ ],
+ [
+ -122.0677890893,
+ 38.192312254195
+ ],
+ [
+ -122.06630225873,
+ 38.191182980165
+ ],
+ [
+ -122.06927591986,
+ 38.191032410295
+ ],
+ [
+ -122.04231472563,
+ 38.241849741611
+ ],
+ [
+ -122.03815160005,
+ 38.246592692534
+ ],
+ [
+ -122.01485792121,
+ 38.259767556208
+ ],
+ [
+ -122.01485792121,
+ 38.25765957802
+ ],
+ [
+ -122.01237987027,
+ 38.25765957802
+ ],
+ [
+ -122.01198338212,
+ 38.261273254914
+ ],
+ [
+ -122.00524308356,
+ 38.265037501678
+ ],
+ [
+ -122.00722552431,
+ 38.263682372843
+ ],
+ [
+ -122.00663079208,
+ 38.253293051774
+ ],
+ [
+ -121.98819409309,
+ 38.252991912033
+ ],
+ [
+ -121.98809497105,
+ 38.264435222196
+ ],
+ [
+ -121.98492306584,
+ 38.264736361937
+ ],
+ [
+ -121.97966959785,
+ 38.264585792066
+ ],
+ [
+ -121.98155291656,
+ 38.26149910972
+ ],
+ [
+ -121.98135467249,
+ 38.252991912033
+ ],
+ [
+ -121.96936090594,
+ 38.252841342162
+ ],
+ [
+ -121.9692617839,
+ 38.254422325803
+ ],
+ [
+ -121.97401964171,
+ 38.254422325803
+ ],
+ [
+ -121.97491174004,
+ 38.267296049736
+ ],
+ [
+ -121.93347872832,
+ 38.266392630513
+ ],
+ [
+ -121.92247618214,
+ 38.275953817294
+ ],
+ [
+ -121.92654018568,
+ 38.279191069511
+ ],
+ [
+ -121.91484378524,
+ 38.279191069511
+ ],
+ [
+ -121.91474466321,
+ 38.273544699365
+ ],
+ [
+ -121.89660533032,
+ 38.286493708233
+ ],
+ [
+ -121.86032666455,
+ 38.286117283557
+ ],
+ [
+ -121.86032666455,
+ 38.271888430789
+ ],
+ [
+ -121.85606441693,
+ 38.269328742989
+ ],
+ [
+ -121.84902675226,
+ 38.268651178571
+ ],
+ [
+ -121.84248469778,
+ 38.271361436242
+ ],
+ [
+ -121.8422864537,
+ 38.278362935223
+ ],
+ [
+ -121.82900410066,
+ 38.278362935223
+ ],
+ [
+ -121.8238497547,
+ 38.271512006112
+ ],
+ [
+ -121.80977442536,
+ 38.258036002697
+ ],
+ [
+ -121.80551217774,
+ 38.260068695949
+ ],
+ [
+ -121.80184466235,
+ 38.258111287632
+ ],
+ [
+ -121.77190980699,
+ 38.261423824784
+ ],
+ [
+ -121.77121595272,
+ 38.263230663231
+ ],
+ [
+ -121.77567644442,
+ 38.261950819331
+ ],
+ [
+ -121.77954220388,
+ 38.263381233102
+ ],
+ [
+ -121.77874922758,
+ 38.284385730046
+ ],
+ [
+ -121.76011428451,
+ 38.284988009528
+ ],
+ [
+ -121.75912306413,
+ 38.293645777085
+ ],
+ [
+ -121.74891349426,
+ 38.296732459432
+ ],
+ [
+ -121.74306529404,
+ 38.294473911373
+ ],
+ [
+ -121.74098373125,
+ 38.291763653703
+ ],
+ [
+ -121.72690840191,
+ 38.290107385127
+ ],
+ [
+ -121.7221505441,
+ 38.285063294463
+ ],
+ [
+ -121.71848302871,
+ 38.283783450563
+ ],
+ [
+ -121.71035502162,
+ 38.2761796721
+ ],
+ [
+ -121.70926467921,
+ 38.272490710271
+ ],
+ [
+ -121.69945159748,
+ 38.264886931807
+ ],
+ [
+ -121.6944954956,
+ 38.257057298538
+ ],
+ [
+ -121.69647793635,
+ 38.247345541886
+ ],
+ [
+ -121.70272262473,
+ 38.247646681628
+ ],
+ [
+ -121.70242525861,
+ 38.245990413051
+ ],
+ [
+ -121.69717179062,
+ 38.245990413051
+ ],
+ [
+ -121.69518934987,
+ 38.243807149928
+ ],
+ [
+ -121.68854817334,
+ 38.244108289669
+ ],
+ [
+ -121.68398855961,
+ 38.238236064717
+ ],
+ [
+ -121.67853684754,
+ 38.243731864993
+ ],
+ [
+ -121.67179654899,
+ 38.254648180609
+ ],
+ [
+ -121.67169742695,
+ 38.265940920901
+ ],
+ [
+ -121.66545273858,
+ 38.274673973394
+ ],
+ [
+ -121.66426327413,
+ 38.282578891599
+ ],
+ [
+ -121.6668404471,
+ 38.292892927733
+ ],
+ [
+ -121.66674132507,
+ 38.313521
+ ],
+ [
+ -121.63066090337,
+ 38.313144575324
+ ],
+ [
+ -121.63085914745,
+ 38.291763653703
+ ],
+ [
+ -121.64513272086,
+ 38.289053396033
+ ],
+ [
+ -121.64354676826,
+ 38.282277751858
+ ],
+ [
+ -121.63809505619,
+ 38.277760655741
+ ],
+ [
+ -121.64235730381,
+ 38.272114285594
+ ],
+ [
+ -121.64087047325,
+ 38.267973614154
+ ],
+ [
+ -121.65187301942,
+ 38.26164967959
+ ],
+ [
+ -121.6520712635,
+ 38.255551599832
+ ],
+ [
+ -121.65593702297,
+ 38.254121186062
+ ],
+ [
+ -121.65692824334,
+ 38.249152380333
+ ],
+ [
+ -121.65910892817,
+ 38.246667977469
+ ],
+ [
+ -121.65881156206,
+ 38.244108289669
+ ],
+ [
+ -121.66535361654,
+ 38.239892333293
+ ],
+ [
+ -121.66634483692,
+ 38.235074097435
+ ],
+ [
+ -121.67328337955,
+ 38.232213269895
+ ],
+ [
+ -121.67467108808,
+ 38.228674877936
+ ],
+ [
+ -121.67159830491,
+ 38.218285556867
+ ],
+ [
+ -121.65891068409,
+ 38.206014112416
+ ],
+ [
+ -121.65732473149,
+ 38.195173081735
+ ],
+ [
+ -121.66257819949,
+ 38.183278061961
+ ],
+ [
+ -121.66812903359,
+ 38.175222573885
+ ],
+ [
+ -121.67913157977,
+ 38.163854548658
+ ],
+ [
+ -121.68557451222,
+ 38.159713877217
+ ],
+ [
+ -121.67645528475,
+ 38.1551967811
+ ],
+ [
+ -121.68190699682,
+ 38.15120667953
+ ],
+ [
+ -121.68616924444,
+ 38.138031815856
+ ],
+ [
+ -121.6860701224,
+ 38.132234875839
+ ],
+ [
+ -121.69062973613,
+ 38.123050113734
+ ],
+ [
+ -121.66584922673,
+ 38.123501823346
+ ],
+ [
+ -121.66138873504,
+ 38.118307162812
+ ],
+ [
+ -121.65990190447,
+ 38.119888146453
+ ],
+ [
+ -121.65108004312,
+ 38.116650894235
+ ],
+ [
+ -121.6512782872,
+ 38.095947537033
+ ],
+ [
+ -121.64265466992,
+ 38.090903446369
+ ],
+ [
+ -121.63640998155,
+ 38.090000027145
+ ],
+ [
+ -121.63413017469,
+ 38.092710284815
+ ],
+ [
+ -121.6328415882,
+ 38.099485928991
+ ],
+ [
+ -121.63036353726,
+ 38.102346756532
+ ],
+ [
+ -121.61737855033,
+ 38.105734578619
+ ],
+ [
+ -121.6136119129,
+ 38.108821260966
+ ],
+ [
+ -121.60260936672,
+ 38.107993126678
+ ],
+ [
+ -121.59319277315,
+ 38.102798466143
+ ],
+ [
+ -121.57445870804,
+ 38.100314063279
+ ],
+ [
+ -121.56950260616,
+ 38.096926241191
+ ],
+ [
+ -121.58129812863,
+ 38.09391484378
+ ],
+ [
+ -121.58526301014,
+ 38.096399246644
+ ],
+ [
+ -121.60488917359,
+ 38.099862353667
+ ],
+ [
+ -121.62738987613,
+ 38.098356654962
+ ],
+ [
+ -121.63264334412,
+ 38.08864489831
+ ],
+ [
+ -121.63809505619,
+ 38.086160495446
+ ],
+ [
+ -121.6452318429,
+ 38.087440339346
+ ],
+ [
+ -121.66188434522,
+ 38.095646397291
+ ],
+ [
+ -121.67308513548,
+ 38.093538419104
+ ],
+ [
+ -121.67923070181,
+ 38.089322462728
+ ],
+ [
+ -121.68190699682,
+ 38.082019824005
+ ],
+ [
+ -121.67962718996,
+ 38.068092110978
+ ],
+ [
+ -121.68200611886,
+ 38.060638902385
+ ],
+ [
+ -121.70093842805,
+ 38.044452641299
+ ],
+ [
+ -121.73255835805,
+ 38.029019229566
+ ],
+ [
+ -121.73226099194,
+ 38.014715091862
+ ],
+ [
+ -121.73077416137,
+ 38.015016231604
+ ],
+ [
+ -121.73027855118,
+ 38.013209393157
+ ],
+ [
+ -121.72621454764,
+ 38.012983538351
+ ],
+ [
+ -121.71322956071,
+ 38.005530329758
+ ],
+ [
+ -121.71422078109,
+ 38.006584318852
+ ],
+ [
+ -121.69618057024,
+ 38.007186598334
+ ],
+ [
+ -121.69667618043,
+ 38.006057324305
+ ],
+ [
+ -121.70906643513,
+ 38.005680899628
+ ],
+ [
+ -121.70906643513,
+ 38.001314373382
+ ],
+ [
+ -121.70500243159,
+ 38.001389658317
+ ],
+ [
+ -121.70480418752,
+ 37.997926551294
+ ],
+ [
+ -121.69558583802,
+ 37.998378260906
+ ],
+ [
+ -121.68944027168,
+ 38.014037527445
+ ],
+ [
+ -121.68438504776,
+ 38.014338667186
+ ],
+ [
+ -121.67863596958,
+ 38.011026130034
+ ],
+ [
+ -121.66733605729,
+ 38.013209393157
+ ],
+ [
+ -121.63571612729,
+ 38.011703694451
+ ],
+ [
+ -121.62699338798,
+ 38.009294576522
+ ],
+ [
+ -121.62709251002,
+ 38.00613260924
+ ],
+ [
+ -121.62401972685,
+ 38.006283179111
+ ],
+ [
+ -121.62372236074,
+ 38.008165302493
+ ],
+ [
+ -121.62074869961,
+ 38.008165302493
+ ],
+ [
+ -121.62035221146,
+ 38.009445146393
+ ],
+ [
+ -121.62471358111,
+ 38.010649705357
+ ],
+ [
+ -121.6196583572,
+ 38.012908253416
+ ],
+ [
+ -121.6167838181,
+ 38.012004834192
+ ],
+ [
+ -121.61658557403,
+ 38.013886957574
+ ],
+ [
+ -121.61341366882,
+ 38.014338667186
+ ],
+ [
+ -121.60706985842,
+ 38.018780478368
+ ],
+ [
+ -121.60736722453,
+ 38.020135607203
+ ],
+ [
+ -121.6020146345,
+ 38.022243585391
+ ],
+ [
+ -121.59666204447,
+ 38.026835966443
+ ],
+ [
+ -121.58466827791,
+ 38.030299073466
+ ],
+ [
+ -121.58387530161,
+ 38.016597215244
+ ],
+ [
+ -121.58228934901,
+ 38.016747785115
+ ],
+ [
+ -121.5804060303,
+ 38.006509033917
+ ],
+ [
+ -121.5775314912,
+ 38.003572921441
+ ],
+ [
+ -121.56880875189,
+ 38.002217792605
+ ],
+ [
+ -121.57059294857,
+ 37.999055825324
+ ],
+ [
+ -121.57891919973,
+ 37.998528830777
+ ],
+ [
+ -121.57604466064,
+ 37.994839868948
+ ],
+ [
+ -121.58100076252,
+ 37.989494638543
+ ],
+ [
+ -121.58248759309,
+ 37.983923553332
+ ],
+ [
+ -121.57237714525,
+ 37.979030032538
+ ],
+ [
+ -121.57326924359,
+ 37.977674903703
+ ],
+ [
+ -121.58020778622,
+ 37.976395059803
+ ],
+ [
+ -121.57445870804,
+ 37.972480243169
+ ],
+ [
+ -121.57366573174,
+ 37.966457448346
+ ],
+ [
+ -121.5651412365,
+ 37.959832374041
+ ],
+ [
+ -121.56553772465,
+ 37.957799680789
+ ],
+ [
+ -121.57326924359,
+ 37.957347971177
+ ],
+ [
+ -121.5751525623,
+ 37.955014138183
+ ],
+ [
+ -121.5735666097,
+ 37.953734294283
+ ],
+ [
+ -121.5635552839,
+ 37.954712998442
+ ],
+ [
+ -121.56880875189,
+ 37.948464348814
+ ],
+ [
+ -121.56742104337,
+ 37.943947252697
+ ],
+ [
+ -121.56068074481,
+ 37.94756092959
+ ],
+ [
+ -121.55780620572,
+ 37.947033935043
+ ],
+ [
+ -121.55820269387,
+ 37.945377666467
+ ],
+ [
+ -121.56365440594,
+ 37.94342025815
+ ],
+ [
+ -121.56087898888,
+ 37.939881866191
+ ],
+ [
+ -121.56147372111,
+ 37.935891764621
+ ],
+ [
+ -121.55731059553,
+ 37.932278087728
+ ],
+ [
+ -121.55889654813,
+ 37.927911561481
+ ],
+ [
+ -121.55641849719,
+ 37.923319180429
+ ],
+ [
+ -121.56563684669,
+ 37.91819980483
+ ],
+ [
+ -121.57247626729,
+ 37.916995245865
+ ],
+ [
+ -121.57822534547,
+ 37.920081928212
+ ],
+ [
+ -121.59160682055,
+ 37.921512341982
+ ],
+ [
+ -121.59487784779,
+ 37.919780788471
+ ],
+ [
+ -121.60687161434,
+ 37.918802084312
+ ],
+ [
+ -121.60915142121,
+ 37.932579227469
+ ],
+ [
+ -121.62273114036,
+ 37.932805082275
+ ],
+ [
+ -121.62292938444,
+ 37.919027939118
+ ],
+ [
+ -121.62183904202,
+ 37.918952654183
+ ],
+ [
+ -121.6228302624,
+ 37.918651514442
+ ],
+ [
+ -121.62302850647,
+ 37.903594527385
+ ],
+ [
+ -121.61836977071,
+ 37.903745097256
+ ],
+ [
+ -121.61946011312,
+ 37.897797587368
+ ],
+ [
+ -121.61817152663,
+ 37.896291888663
+ ],
+ [
+ -121.62302850647,
+ 37.896442458533
+ ],
+ [
+ -121.62729075409,
+ 37.894485050216
+ ],
+ [
+ -121.62738987613,
+ 37.892602926834
+ ],
+ [
+ -121.63066090337,
+ 37.892527641898
+ ],
+ [
+ -121.63224685597,
+ 37.896291888663
+ ],
+ [
+ -121.63214773394,
+ 37.889290389681
+ ],
+ [
+ -121.64146520547,
+ 37.889139819811
+ ],
+ [
+ -121.64136608344,
+ 37.896442458533
+ ],
+ [
+ -121.65028706682,
+ 37.896517743468
+ ],
+ [
+ -121.65187301942,
+ 37.882138320829
+ ],
+ [
+ -121.65980278243,
+ 37.889892669163
+ ],
+ [
+ -121.66000102651,
+ 37.885601427852
+ ],
+ [
+ -121.67120181676,
+ 37.886580132011
+ ],
+ [
+ -121.67070620657,
+ 37.881536041347
+ ],
+ [
+ -121.67814035939,
+ 37.8810090468
+ ],
+ [
+ -121.67764474921,
+ 37.882891170182
+ ],
+ [
+ -121.68864729538,
+ 37.882966455117
+ ],
+ [
+ -121.67794211532,
+ 37.871297290149
+ ],
+ [
+ -121.65355809406,
+ 37.85691786751
+ ],
+ [
+ -121.6468177955,
+ 37.849765798658
+ ],
+ [
+ -121.64691691754,
+ 37.839376477589
+ ],
+ [
+ -121.65425194833,
+ 37.833353682766
+ ],
+ [
+ -121.65534229074,
+ 37.820254104027
+ ],
+ [
+ -121.66099224688,
+ 37.816414572327
+ ],
+ [
+ -121.66327205375,
+ 37.812424470757
+ ],
+ [
+ -121.66465976228,
+ 37.81844726558
+ ],
+ [
+ -121.66158697911,
+ 37.82514762482
+ ],
+ [
+ -121.66793078952,
+ 37.82898715652
+ ],
+ [
+ -121.66565098265,
+ 37.830643425096
+ ],
+ [
+ -121.67467108808,
+ 37.831095134708
+ ],
+ [
+ -121.68309646128,
+ 37.835612230825
+ ],
+ [
+ -121.68319558331,
+ 37.838247203559
+ ],
+ [
+ -121.68864729538,
+ 37.838322488495
+ ],
+ [
+ -121.68963851576,
+ 37.840656321488
+ ],
+ [
+ -121.68755695297,
+ 37.842011450324
+ ],
+ [
+ -121.69231481077,
+ 37.842237305129
+ ],
+ [
+ -121.69766740081,
+ 37.845850982023
+ ],
+ [
+ -121.69826213303,
+ 37.848485954758
+ ],
+ [
+ -121.69439637356,
+ 37.850669217881
+ ],
+ [
+ -121.69409900745,
+ 37.853304190616
+ ],
+ [
+ -121.69627969228,
+ 37.855939163351
+ ],
+ [
+ -121.69637881432,
+ 37.861209108821
+ ],
+ [
+ -121.69855949914,
+ 37.864145221297
+ ],
+ [
+ -121.6989559873,
+ 37.868812887284
+ ],
+ [
+ -121.7237364967,
+ 37.86888817222
+ ],
+ [
+ -121.72363737466,
+ 37.852701911134
+ ],
+ [
+ -121.77022473235,
+ 37.853228905681
+ ],
+ [
+ -121.76992736624,
+ 37.843743003835
+ ],
+ [
+ -121.76526863047,
+ 37.843743003835
+ ],
+ [
+ -121.76497126435,
+ 37.833278397831
+ ],
+ [
+ -121.76497126435,
+ 37.814833588686
+ ],
+ [
+ -121.75852833191,
+ 37.814758303751
+ ],
+ [
+ -121.75852833191,
+ 37.806928670482
+ ],
+ [
+ -121.7537704741,
+ 37.806928670482
+ ],
+ [
+ -121.7537704741,
+ 37.802787999041
+ ],
+ [
+ -121.75149066724,
+ 37.802787999041
+ ],
+ [
+ -121.74990471463,
+ 37.774255008569
+ ],
+ [
+ -121.73929865661,
+ 37.772147030381
+ ],
+ [
+ -121.67040884046,
+ 37.789462565496
+ ],
+ [
+ -121.67040884046,
+ 37.783891480285
+ ],
+ [
+ -121.66862464378,
+ 37.779600238974
+ ],
+ [
+ -121.67407635585,
+ 37.768307498682
+ ],
+ [
+ -121.67764474921,
+ 37.764618536853
+ ],
+ [
+ -121.67764474921,
+ 37.747754711349
+ ],
+ [
+ -121.67506757623,
+ 37.742560050815
+ ],
+ [
+ -121.67169742695,
+ 37.739398083533
+ ],
+ [
+ -121.65663087723,
+ 37.746926577061
+ ],
+ [
+ -121.64800725996,
+ 37.742560050815
+ ],
+ [
+ -121.64196081566,
+ 37.743087045362
+ ],
+ [
+ -121.63353544246,
+ 37.739849793145
+ ],
+ [
+ -121.62996704911,
+ 37.732547154422
+ ],
+ [
+ -121.62312762851,
+ 37.729611041946
+ ],
+ [
+ -121.61222420437,
+ 37.730815600911
+ ],
+ [
+ -121.605979516,
+ 37.728782907658
+ ],
+ [
+ -121.60221287857,
+ 37.725922080117
+ ],
+ [
+ -121.60251024469,
+ 37.670512367749
+ ],
+ [
+ -121.55691410738,
+ 37.67066293762
+ ],
+ [
+ -121.55661674127,
+ 37.542753832574
+ ],
+ [
+ -121.55047117493,
+ 37.539366010487
+ ],
+ [
+ -121.54571331713,
+ 37.532515081376
+ ],
+ [
+ -121.54065809321,
+ 37.529804823706
+ ],
+ [
+ -121.53034940129,
+ 37.527094566035
+ ],
+ [
+ -121.52886257073,
+ 37.528073270194
+ ],
+ [
+ -121.52232051625,
+ 37.524685448106
+ ],
+ [
+ -121.50150488835,
+ 37.524986587848
+ ],
+ [
+ -121.4982338611,
+ 37.522426900048
+ ],
+ [
+ -121.50239698668,
+ 37.518436798478
+ ],
+ [
+ -121.49724264073,
+ 37.512489288591
+ ],
+ [
+ -121.49535932201,
+ 37.508122762344
+ ],
+ [
+ -121.49605317628,
+ 37.504960795062
+ ],
+ [
+ -121.49317863719,
+ 37.502401107263
+ ],
+ [
+ -121.48207696897,
+ 37.501422403104
+ ],
+ [
+ -121.47940067396,
+ 37.496453597375
+ ],
+ [
+ -121.46929022612,
+ 37.4896779532
+ ],
+ [
+ -121.47117354483,
+ 37.482827024089
+ ],
+ [
+ -121.47454369411,
+ 37.479363917066
+ ],
+ [
+ -121.47771559932,
+ 37.48026733629
+ ],
+ [
+ -121.48336555546,
+ 37.475449100431
+ ],
+ [
+ -121.48673570474,
+ 37.475674955237
+ ],
+ [
+ -121.4842576538,
+ 37.466038483521
+ ],
+ [
+ -121.4750393043,
+ 37.462048381951
+ ],
+ [
+ -121.47305686355,
+ 37.456778436481
+ ],
+ [
+ -121.46958759223,
+ 37.455724447387
+ ],
+ [
+ -121.46889373797,
+ 37.453842324005
+ ],
+ [
+ -121.46403675812,
+ 37.453842324005
+ ],
+ [
+ -121.46215343941,
+ 37.442323728907
+ ],
+ [
+ -121.46235168348,
+ 37.437957202661
+ ],
+ [
+ -121.46492885646,
+ 37.437053783437
+ ],
+ [
+ -121.47028144649,
+ 37.430127569391
+ ],
+ [
+ -121.46889373797,
+ 37.425008193792
+ ],
+ [
+ -121.47256125336,
+ 37.423351925216
+ ],
+ [
+ -121.46621744295,
+ 37.415070582335
+ ],
+ [
+ -121.46354114794,
+ 37.415898716623
+ ],
+ [
+ -121.45630523919,
+ 37.406713954518
+ ],
+ [
+ -121.45561138493,
+ 37.401067584372
+ ],
+ [
+ -121.45828767994,
+ 37.398131471896
+ ],
+ [
+ -121.4566026053,
+ 37.395571784096
+ ],
+ [
+ -121.45154738138,
+ 37.394668364873
+ ],
+ [
+ -121.4481772321,
+ 37.391656967462
+ ],
+ [
+ -121.43608434351,
+ 37.396098778643
+ ],
+ [
+ -121.4125924206,
+ 37.389398419403
+ ],
+ [
+ -121.41060997984,
+ 37.386085882251
+ ],
+ [
+ -121.40912314928,
+ 37.38066536691
+ ],
+ [
+ -121.41586344784,
+ 37.375922415988
+ ],
+ [
+ -121.41933271915,
+ 37.364479105825
+ ],
+ [
+ -121.42250462436,
+ 37.363123976989
+ ],
+ [
+ -121.42369408881,
+ 37.358832735678
+ ],
+ [
+ -121.41943184119,
+ 37.351981806568
+ ],
+ [
+ -121.42072042768,
+ 37.34475445278
+ ],
+ [
+ -121.40912314928,
+ 37.330600884947
+ ],
+ [
+ -121.41110559003,
+ 37.327514202601
+ ],
+ [
+ -121.41021349169,
+ 37.325029799736
+ ],
+ [
+ -121.41189856633,
+ 37.324427520254
+ ],
+ [
+ -121.40942051539,
+ 37.321491407778
+ ],
+ [
+ -121.405753,
+ 37.311026801774
+ ],
+ [
+ -121.41834149878,
+ 37.30327245344
+ ],
+ [
+ -121.42270286843,
+ 37.299131781999
+ ],
+ [
+ -121.42349584473,
+ 37.2952922503
+ ],
+ [
+ -121.4257756516,
+ 37.296346239394
+ ],
+ [
+ -121.43142560774,
+ 37.294991110558
+ ],
+ [
+ -121.43677819778,
+ 37.291979713147
+ ],
+ [
+ -121.44351849634,
+ 37.296647379135
+ ],
+ [
+ -121.44966406267,
+ 37.293937121465
+ ],
+ [
+ -121.44867284229,
+ 37.290323444571
+ ],
+ [
+ -121.45402543232,
+ 37.284074794942
+ ],
+ [
+ -121.45808943587,
+ 37.284150079878
+ ],
+ [
+ -121.45908065624,
+ 37.282719666107
+ ],
+ [
+ -121.45392631029,
+ 37.277148580896
+ ],
+ [
+ -121.45412455436,
+ 37.273986613615
+ ],
+ [
+ -121.53371955057,
+ 37.273610188938
+ ],
+ [
+ -121.54026160506,
+ 37.286258058066
+ ],
+ [
+ -121.54729926973,
+ 37.282493811302
+ ],
+ [
+ -121.55364308014,
+ 37.28219267156
+ ],
+ [
+ -121.55602200904,
+ 37.280461118049
+ ],
+ [
+ -121.56603333484,
+ 37.294614685882
+ ],
+ [
+ -121.56742104337,
+ 37.292958417306
+ ],
+ [
+ -121.57029558246,
+ 37.290925724053
+ ],
+ [
+ -121.57663939287,
+ 37.290097589765
+ ],
+ [
+ -121.57981129807,
+ 37.286258058066
+ ],
+ [
+ -121.60003219375,
+ 37.289645880153
+ ],
+ [
+ -121.61608996384,
+ 37.286785052613
+ ],
+ [
+ -121.62005484535,
+ 37.290474014442
+ ],
+ [
+ -121.62620041168,
+ 37.291226863794
+ ],
+ [
+ -121.62857934058,
+ 37.2901728747
+ ],
+ [
+ -121.62818285243,
+ 37.288441321189
+ ],
+ [
+ -121.60885405509,
+ 37.268340243468
+ ],
+ [
+ -121.61182771622,
+ 37.26209159384
+ ],
+ [
+ -121.61390927901,
+ 37.260510610199
+ ],
+ [
+ -121.61549523161,
+ 37.261263459552
+ ],
+ [
+ -121.61708118422,
+ 37.255692374341
+ ],
+ [
+ -121.624416215,
+ 37.254939524988
+ ],
+ [
+ -121.62372236074,
+ 37.252153982383
+ ],
+ [
+ -121.62957056096,
+ 37.253358541347
+ ],
+ [
+ -121.63750032397,
+ 37.258553201882
+ ],
+ [
+ -121.64622306328,
+ 37.260736465005
+ ],
+ [
+ -121.64741252773,
+ 37.263597292546
+ ],
+ [
+ -121.65236862961,
+ 37.264199572028
+ ],
+ [
+ -121.65900980613,
+ 37.260962319811
+ ],
+ [
+ -121.65712648742,
+ 37.25682164837
+ ],
+ [
+ -121.65910892817,
+ 37.256068799017
+ ],
+ [
+ -121.66753430137,
+ 37.259607190976
+ ],
+ [
+ -121.67011147435,
+ 37.259155481364
+ ],
+ [
+ -121.67566230845,
+ 37.265027706316
+ ],
+ [
+ -121.67397723381,
+ 37.259004911493
+ ],
+ [
+ -121.67774387124,
+ 37.255315949664
+ ],
+ [
+ -121.67734738309,
+ 37.252304552253
+ ],
+ [
+ -121.66872376582,
+ 37.24086124209
+ ],
+ [
+ -121.66882288786,
+ 37.226632389322
+ ],
+ [
+ -121.67477021011,
+ 37.223244567234
+ ],
+ [
+ -121.6668404471,
+ 37.215113794223
+ ],
+ [
+ -121.66713781322,
+ 37.213457525647
+ ],
+ [
+ -121.66228083337,
+ 37.211198977589
+ ],
+ [
+ -121.66584922673,
+ 37.205552607442
+ ],
+ [
+ -121.67140006084,
+ 37.201186081196
+ ],
+ [
+ -121.67764474921,
+ 37.200132092102
+ ],
+ [
+ -121.67774387124,
+ 37.197873544044
+ ],
+ [
+ -121.69409900745,
+ 37.198174683785
+ ],
+ [
+ -121.70341647899,
+ 37.200132092102
+ ],
+ [
+ -121.71065238774,
+ 37.20894042953
+ ],
+ [
+ -121.71471639128,
+ 37.20894042953
+ ],
+ [
+ -121.71441902516,
+ 37.207886440436
+ ],
+ [
+ -121.72343913059,
+ 37.215941928512
+ ],
+ [
+ -121.72839523247,
+ 37.215941928512
+ ],
+ [
+ -121.74683193147,
+ 37.230321351151
+ ],
+ [
+ -121.75119330112,
+ 37.226406534516
+ ],
+ [
+ -121.74653456536,
+ 37.222868142558
+ ],
+ [
+ -121.75922218617,
+ 37.218953325923
+ ],
+ [
+ -121.75852833191,
+ 37.217824051894
+ ],
+ [
+ -121.76100638285,
+ 37.216544207994
+ ],
+ [
+ -121.76269145749,
+ 37.217824051894
+ ],
+ [
+ -121.76556599658,
+ 37.214360944871
+ ],
+ [
+ -121.76804404752,
+ 37.216995917605
+ ],
+ [
+ -121.77081946457,
+ 37.217372342282
+ ],
+ [
+ -121.7782536174,
+ 37.208187580177
+ ],
+ [
+ -121.77974044796,
+ 37.205176182766
+ ],
+ [
+ -121.77706415294,
+ 37.198626393396
+ ],
+ [
+ -121.77964132592,
+ 37.196443130273
+ ],
+ [
+ -121.77448697997,
+ 37.193205878056
+ ],
+ [
+ -121.76715194918,
+ 37.192076604027
+ ],
+ [
+ -121.7645747762,
+ 37.190194480645
+ ],
+ [
+ -121.76308794564,
+ 37.191022614933
+ ],
+ [
+ -121.7637817999,
+ 37.18898992168
+ ],
+ [
+ -121.75971779636,
+ 37.18612909414
+ ],
+ [
+ -121.7598169184,
+ 37.183494121405
+ ],
+ [
+ -121.76170023711,
+ 37.180783863734
+ ],
+ [
+ -121.76556599658,
+ 37.180558008929
+ ],
+ [
+ -121.76388092194,
+ 37.177471326582
+ ],
+ [
+ -121.76596248473,
+ 37.179654589705
+ ],
+ [
+ -121.76735019326,
+ 37.178148891
+ ],
+ [
+ -121.7737931257,
+ 37.181386143217
+ ],
+ [
+ -121.77329751551,
+ 37.183268266599
+ ],
+ [
+ -121.78182201075,
+ 37.182816556987
+ ],
+ [
+ -121.78430006169,
+ 37.180633293864
+ ],
+ [
+ -121.78271410909,
+ 37.181235573346
+ ],
+ [
+ -121.78241674298,
+ 37.179504019835
+ ],
+ [
+ -121.77954220388,
+ 37.179052310223
+ ],
+ [
+ -121.78529128207,
+ 37.178826455417
+ ],
+ [
+ -121.78519216003,
+ 37.175513918265
+ ],
+ [
+ -121.78370532946,
+ 37.175438633329
+ ],
+ [
+ -121.78786845505,
+ 37.171900241371
+ ],
+ [
+ -121.79649207232,
+ 37.172351950983
+ ],
+ [
+ -121.79867275715,
+ 37.171072107083
+ ],
+ [
+ -121.79976309956,
+ 37.168211279542
+ ],
+ [
+ -121.80352973699,
+ 37.165651591743
+ ],
+ [
+ -121.79877187918,
+ 37.15706910912
+ ],
+ [
+ -121.79916836733,
+ 37.155412840544
+ ],
+ [
+ -121.80184466235,
+ 37.156391544703
+ ],
+ [
+ -121.80501656755,
+ 37.15307900755
+ ],
+ [
+ -121.80808935072,
+ 37.152627297939
+ ],
+ [
+ -121.81284720853,
+ 37.153907141838
+ ],
+ [
+ -121.81473052724,
+ 37.151799163651
+ ],
+ [
+ -121.81720857818,
+ 37.142689686481
+ ],
+ [
+ -121.80422359125,
+ 37.135763472435
+ ],
+ [
+ -121.80372798107,
+ 37.102562815976
+ ],
+ [
+ -121.80253851661,
+ 37.100379552852
+ ],
+ [
+ -121.8330681042,
+ 37.100605407658
+ ],
+ [
+ -121.83584352126,
+ 37.109790169763
+ ],
+ [
+ -121.83842069423,
+ 37.10647763261
+ ],
+ [
+ -121.84813465392,
+ 37.105423643516
+ ],
+ [
+ -121.84298030796,
+ 37.10120768714
+ ],
+ [
+ -121.84397152834,
+ 37.097594010247
+ ],
+ [
+ -121.84625133521,
+ 37.096991730765
+ ],
+ [
+ -121.84416977242,
+ 37.094733182706
+ ],
+ [
+ -121.83415844662,
+ 37.091194790748
+ ],
+ [
+ -121.83039180919,
+ 37.088108108401
+ ],
+ [
+ -121.82424624285,
+ 37.08780696866
+ ],
+ [
+ -121.82355238859,
+ 37.086000130213
+ ],
+ [
+ -121.81819979856,
+ 37.083741582155
+ ],
+ [
+ -121.81651472392,
+ 37.080353760067
+ ],
+ [
+ -121.81720857818,
+ 37.077869357203
+ ],
+ [
+ -121.81264896445,
+ 37.075384954338
+ ],
+ [
+ -121.8090805711,
+ 37.069286874581
+ ],
+ [
+ -121.81284720853,
+ 37.065221488075
+ ],
+ [
+ -121.81681209003,
+ 37.064920348334
+ ],
+ [
+ -121.82523746323,
+ 37.067931745745
+ ],
+ [
+ -121.83009444307,
+ 37.066953041587
+ ],
+ [
+ -121.83009444307,
+ 37.06514620314
+ ],
+ [
+ -121.84159259944,
+ 37.070717288351
+ ],
+ [
+ -121.84099786721,
+ 37.065070918205
+ ],
+ [
+ -121.84416977242,
+ 37.068458740292
+ ],
+ [
+ -121.84902675226,
+ 37.068232885487
+ ],
+ [
+ -121.84863026411,
+ 37.071093713027
+ ],
+ [
+ -121.85576705082,
+ 37.072900551474
+ ],
+ [
+ -121.85883983398,
+ 37.075761379015
+ ],
+ [
+ -121.8583442238,
+ 37.084946141119
+ ],
+ [
+ -121.8899641538,
+ 37.093829763483
+ ],
+ [
+ -121.89432552345,
+ 37.092474634648
+ ],
+ [
+ -121.90255265258,
+ 37.086451839825
+ ],
+ [
+ -121.91732183618,
+ 37.081708888902
+ ],
+ [
+ -121.91910603286,
+ 37.078622206556
+ ],
+ [
+ -121.92564808734,
+ 37.074330965244
+ ],
+ [
+ -121.92465686697,
+ 37.073427546021
+ ],
+ [
+ -121.92663930772,
+ 37.07056671848
+ ],
+ [
+ -121.92485511104,
+ 37.068910449904
+ ],
+ [
+ -121.93774097593,
+ 37.069813869128
+ ],
+ [
+ -121.9408137591,
+ 37.065823767558
+ ],
+ [
+ -121.94180497948,
+ 37.057166
+ ],
+ [
+ -121.94596810506,
+ 37.064393353787
+ ],
+ [
+ -121.94834703396,
+ 37.065522627816
+ ],
+ [
+ -121.94626547117,
+ 37.068534025228
+ ],
+ [
+ -121.94636459321,
+ 37.076137803691
+ ],
+ [
+ -121.95350137992,
+ 37.076213088627
+ ],
+ [
+ -121.95459172233,
+ 37.081708888902
+ ],
+ [
+ -121.96281885145,
+ 37.089162097495
+ ],
+ [
+ -121.95855660384,
+ 37.09563660193
+ ],
+ [
+ -121.97312754337,
+ 37.104369654422
+ ],
+ [
+ -121.97530822819,
+ 37.104294369487
+ ],
+ [
+ -121.9768941808,
+ 37.109489030022
+ ],
+ [
+ -121.98393184547,
+ 37.113479131592
+ ],
+ [
+ -121.98680638456,
+ 37.114006126139
+ ],
+ [
+ -121.98650901845,
+ 37.111220583533
+ ],
+ [
+ -121.98829321512,
+ 37.112048717821
+ ],
+ [
+ -121.99077126606,
+ 37.104520224293
+ ],
+ [
+ -121.99196073052,
+ 37.105122503775
+ ],
+ [
+ -121.99186160848,
+ 37.109263175216
+ ],
+ [
+ -121.99562824591,
+ 37.110016024569
+ ],
+ [
+ -121.99632210017,
+ 37.111521723274
+ ],
+ [
+ -121.99493439164,
+ 37.112876852109
+ ],
+ [
+ -121.99800717481,
+ 37.119577211349
+ ],
+ [
+ -121.99671858832,
+ 37.113479131592
+ ],
+ [
+ -122.01128952785,
+ 37.113554416527
+ ],
+ [
+ -122.01406494491,
+ 37.116716383809
+ ],
+ [
+ -122.01376757879,
+ 37.118071512644
+ ],
+ [
+ -122.00990181933,
+ 37.116641098873
+ ],
+ [
+ -122.01257811434,
+ 37.120028920961
+ ],
+ [
+ -122.0124789923,
+ 37.127783269295
+ ],
+ [
+ -122.01822807049,
+ 37.12770798436
+ ],
+ [
+ -122.01763333826,
+ 37.131171091383
+ ],
+ [
+ -122.02804115221,
+ 37.135311762824
+ ],
+ [
+ -122.0269508098,
+ 37.13711860127
+ ],
+ [
+ -122.02863588444,
+ 37.137495025947
+ ],
+ [
+ -122.02823939629,
+ 37.138925439717
+ ],
+ [
+ -122.03240252187,
+ 37.1382478753
+ ],
+ [
+ -122.03220427779,
+ 37.135537617629
+ ],
+ [
+ -122.03636740337,
+ 37.13711860127
+ ],
+ [
+ -122.03973755265,
+ 37.133354354506
+ ],
+ [
+ -122.04320682397,
+ 37.134860053212
+ ],
+ [
+ -122.04489189861,
+ 37.133655494247
+ ],
+ [
+ -122.04489189861,
+ 37.130719381771
+ ],
+ [
+ -122.04766731566,
+ 37.130644096836
+ ],
+ [
+ -122.04875765807,
+ 37.127632699425
+ ],
+ [
+ -122.05301990569,
+ 37.12514829656
+ ],
+ [
+ -122.05401112607,
+ 37.127632699425
+ ],
+ [
+ -122.06144527889,
+ 37.124470732143
+ ],
+ [
+ -122.05629093293,
+ 37.128009124101
+ ],
+ [
+ -122.06144527889,
+ 37.124470732143
+ ],
+ [
+ -122.05837249572,
+ 37.128009124101
+ ],
+ [
+ -122.05827337369,
+ 37.132074510606
+ ],
+ [
+ -122.08573017811,
+ 37.139000724652
+ ],
+ [
+ -122.09752570059,
+ 37.117996227709
+ ],
+ [
+ -122.10149058209,
+ 37.11829736745
+ ],
+ [
+ -122.1017879482,
+ 37.115060115233
+ ],
+ [
+ -122.09663360225,
+ 37.113102706915
+ ],
+ [
+ -122.1009949719,
+ 37.108962035475
+ ],
+ [
+ -122.11269137234,
+ 37.112425142498
+ ],
+ [
+ -122.11427732495,
+ 37.111220583533
+ ],
+ [
+ -122.11437644698,
+ 37.108585610798
+ ],
+ [
+ -122.10763614842,
+ 37.107531621704
+ ],
+ [
+ -122.11368259272,
+ 37.104896648969
+ ],
+ [
+ -122.12210796592,
+ 37.103917944811
+ ],
+ [
+ -122.11645800977,
+ 37.10376737494
+ ],
+ [
+ -122.1194316709,
+ 37.101734681687
+ ],
+ [
+ -122.13905783435,
+ 37.104369654422
+ ],
+ [
+ -122.14431130235,
+ 37.111070013663
+ ],
+ [
+ -122.14391481419,
+ 37.113328561721
+ ],
+ [
+ -122.15491736037,
+ 37.120857055249
+ ],
+ [
+ -122.1610629267,
+ 37.128009124101
+ ],
+ [
+ -122.16086468263,
+ 37.129740677613
+ ],
+ [
+ -122.16681200489,
+ 37.133279069571
+ ],
+ [
+ -122.16701024896,
+ 37.135462332694
+ ],
+ [
+ -122.17117337454,
+ 37.136742176594
+ ],
+ [
+ -122.17325493733,
+ 37.139828858941
+ ],
+ [
+ -122.17801279514,
+ 37.138473730105
+ ],
+ [
+ -122.18931270743,
+ 37.142539116611
+ ],
+ [
+ -122.19981964342,
+ 37.142840256352
+ ],
+ [
+ -122.19753983655,
+ 37.150067610139
+ ],
+ [
+ -122.20527135548,
+ 37.150669889621
+ ],
+ [
+ -122.20675818605,
+ 37.152476728068
+ ],
+ [
+ -122.20745204031,
+ 37.16090864082
+ ],
+ [
+ -122.21181340997,
+ 37.160983925755
+ ],
+ [
+ -122.21181340997,
+ 37.164823457454
+ ],
+ [
+ -122.20289242658,
+ 37.16489874239
+ ],
+ [
+ -122.21548092536,
+ 37.168361849413
+ ],
+ [
+ -122.22787118006,
+ 37.164447032778
+ ],
+ [
+ -122.230349231,
+ 37.160758070949
+ ],
+ [
+ -122.24164914329,
+ 37.16105921069
+ ],
+ [
+ -122.24264036367,
+ 37.190043910774
+ ],
+ [
+ -122.26890770364,
+ 37.189818055968
+ ],
+ [
+ -122.28853386709,
+ 37.186731373622
+ ],
+ [
+ -122.31767574615,
+ 37.186957228428
+ ],
+ [
+ -122.31182754593,
+ 37.147507922339
+ ],
+ [
+ -122.28942596543,
+ 37.113479131592
+ ],
+ [
+ -122.29299435878,
+ 37.107381051834
+ ],
+ [
+ -122.30597934571,
+ 37.116415244068
+ ],
+ [
+ -122.31153017982,
+ 37.117920942773
+ ],
+ [
+ -122.31559418336,
+ 37.116264674197
+ ],
+ [
+ -122.31846872245,
+ 37.11701752355
+ ],
+ [
+ -122.32927302455,
+ 37.112274572627
+ ],
+ [
+ -122.33204844161,
+ 37.116942238615
+ ],
+ [
+ -122.33690542145,
+ 37.117092808485
+ ],
+ [
+ -122.33938347239,
+ 37.120932340185
+ ],
+ [
+ -122.33720278756,
+ 37.13026767216
+ ],
+ [
+ -122.33829312998,
+ 37.136215182047
+ ],
+ [
+ -122.34315010982,
+ 37.140431138423
+ ],
+ [
+ -122.34582640484,
+ 37.145249374281
+ ],
+ [
+ -122.3517737271,
+ 37.145249374281
+ ],
+ [
+ -122.35147636098,
+ 37.146529218181
+ ],
+ [
+ -122.35435090007,
+ 37.146830357922
+ ],
+ [
+ -122.3557386086,
+ 37.14908890598
+ ],
+ [
+ -122.36089295456,
+ 37.149691185463
+ ],
+ [
+ -122.35960436807,
+ 37.152853152744
+ ],
+ [
+ -122.36128944271,
+ 37.160607501079
+ ],
+ [
+ -122.36763325312,
+ 37.17287894553
+ ],
+ [
+ -122.37021042609,
+ 37.173556509947
+ ],
+ [
+ -122.37923053152,
+ 37.181235573346
+ ],
+ [
+ -122.38121297227,
+ 37.180783863734
+ ],
+ [
+ -122.38666468434,
+ 37.183418836469
+ ],
+ [
+ -122.39171990826,
+ 37.183192981663
+ ],
+ [
+ -122.39469356939,
+ 37.181386143217
+ ],
+ [
+ -122.39429708124,
+ 37.182816556987
+ ],
+ [
+ -122.39707249829,
+ 37.185376244787
+ ],
+ [
+ -122.39796459663,
+ 37.192227173897
+ ],
+ [
+ -122.40510138334,
+ 37.195916135726
+ ],
+ [
+ -122.40520050538,
+ 37.206907736278
+ ],
+ [
+ -122.40698470205,
+ 37.208187580177
+ ],
+ [
+ -122.40777767835,
+ 37.213457525647
+ ],
+ [
+ -122.40916538688,
+ 37.213833950324
+ ],
+ [
+ -122.40728206817,
+ 37.218652186182
+ ],
+ [
+ -122.41065221744,
+ 37.224072701522
+ ],
+ [
+ -122.4089671428,
+ 37.225503115292
+ ],
+ [
+ -122.41154431578,
+ 37.226481819451
+ ],
+ [
+ -122.41134607171,
+ 37.228363942833
+ ],
+ [
+ -122.41590568544,
+ 37.23288103895
+ ],
+ [
+ -122.41570744136,
+ 37.237021710391
+ ],
+ [
+ -122.41917671268,
+ 37.241614091443
+ ]
+ ],
+ [
+ [
+ -122.1663163947,
+ 37.923018040688
+ ],
+ [
+ -122.14827618385,
+ 37.923846174976
+ ],
+ [
+ -122.13727363767,
+ 37.918049234959
+ ],
+ [
+ -122.12577548131,
+ 37.9183503747
+ ],
+ [
+ -122.12646933557,
+ 37.923018040688
+ ],
+ [
+ -122.11814308441,
+ 37.924147314717
+ ],
+ [
+ -122.11794484034,
+ 37.929868969799
+ ],
+ [
+ -122.11338522661,
+ 37.931525238375
+ ],
+ [
+ -122.11070893159,
+ 37.934762490592
+ ],
+ [
+ -122.11427732495,
+ 37.934536635786
+ ],
+ [
+ -122.11606152162,
+ 37.940032436062
+ ],
+ [
+ -122.11923342683,
+ 37.941387564897
+ ],
+ [
+ -122.10961858918,
+ 37.945227096596
+ ],
+ [
+ -122.11675537589,
+ 37.946506940496
+ ],
+ [
+ -122.117052742,
+ 37.949443052972
+ ],
+ [
+ -122.11675537589,
+ 37.951475746225
+ ],
+ [
+ -122.12042289128,
+ 37.953508439477
+ ],
+ [
+ -122.1254781152,
+ 37.953433154542
+ ],
+ [
+ -122.12755967799,
+ 37.950798181807
+ ],
+ [
+ -122.1286500204,
+ 37.943947252697
+ ],
+ [
+ -122.13162368153,
+ 37.947711499461
+ ],
+ [
+ -122.13697627156,
+ 37.942366269056
+ ],
+ [
+ -122.14431130235,
+ 37.945227096596
+ ],
+ [
+ -122.14956477034,
+ 37.943344973214
+ ],
+ [
+ -122.15303404166,
+ 37.935214200204
+ ],
+ [
+ -122.14906916015,
+ 37.935741194751
+ ],
+ [
+ -122.14817706181,
+ 37.932353372663
+ ],
+ [
+ -122.15214194332,
+ 37.928589125899
+ ],
+ [
+ -122.16235151319,
+ 37.925803583293
+ ],
+ [
+ -122.16572166247,
+ 37.93032067941
+ ],
+ [
+ -122.17384966956,
+ 37.931374668504
+ ],
+ [
+ -122.18643816834,
+ 37.93830088255
+ ],
+ [
+ -122.20190120621,
+ 37.938225597615
+ ],
+ [
+ -122.20299154862,
+ 37.939505441515
+ ],
+ [
+ -122.20655994197,
+ 37.937171608521
+ ],
+ [
+ -122.20467662326,
+ 37.939806581256
+ ],
+ [
+ -122.2087406268,
+ 37.948012639202
+ ],
+ [
+ -122.2195449289,
+ 37.948012639202
+ ],
+ [
+ -122.21944580687,
+ 37.957122116371
+ ],
+ [
+ -122.20774940643,
+ 37.956896261565
+ ],
+ [
+ -122.20685730809,
+ 37.965930453799
+ ],
+ [
+ -122.22142824762,
+ 37.984525832814
+ ],
+ [
+ -122.23411586843,
+ 37.984450547879
+ ],
+ [
+ -122.24977715038,
+ 37.993033030501
+ ],
+ [
+ -122.25047100464,
+ 37.991075622184
+ ],
+ [
+ -122.24055880088,
+ 37.985956246584
+ ],
+ [
+ -122.23738689568,
+ 37.981815575144
+ ],
+ [
+ -122.24006319069,
+ 37.977825473574
+ ],
+ [
+ -122.24412719423,
+ 37.97549164058
+ ],
+ [
+ -122.24174826533,
+ 37.971802678751
+ ],
+ [
+ -122.24769558759,
+ 37.972179103428
+ ],
+ [
+ -122.24313597386,
+ 37.971125114334
+ ],
+ [
+ -122.24313597386,
+ 37.967812577181
+ ],
+ [
+ -122.24680348925,
+ 37.964048330417
+ ],
+ [
+ -122.23758513975,
+ 37.9582513904
+ ],
+ [
+ -122.24343333997,
+ 37.954487143636
+ ],
+ [
+ -122.24670436721,
+ 37.955239992989
+ ],
+ [
+ -122.24908329612,
+ 37.952303880513
+ ],
+ [
+ -122.25602183875,
+ 37.94884077349
+ ],
+ [
+ -122.25364290985,
+ 37.945754091143
+ ],
+ [
+ -122.25522886245,
+ 37.946055230884
+ ],
+ [
+ -122.25602183875,
+ 37.944398962308
+ ],
+ [
+ -122.26187003897,
+ 37.944700102049
+ ],
+ [
+ -122.27108838847,
+ 37.939806581256
+ ],
+ [
+ -122.25463413022,
+ 37.920608922759
+ ],
+ [
+ -122.25423764207,
+ 37.917672810283
+ ],
+ [
+ -122.25106573687,
+ 37.915113122483
+ ],
+ [
+ -122.25304817762,
+ 37.911574730525
+ ],
+ [
+ -122.2495789063,
+ 37.911123020913
+ ],
+ [
+ -122.24759646555,
+ 37.908864472855
+ ],
+ [
+ -122.24779470963,
+ 37.905627220638
+ ],
+ [
+ -122.2448210485,
+ 37.904874371285
+ ],
+ [
+ -122.25086749279,
+ 37.90095955465
+ ],
+ [
+ -122.25265168947,
+ 37.896442458533
+ ],
+ [
+ -122.25294905558,
+ 37.893732200863
+ ],
+ [
+ -122.24947978427,
+ 37.893054636445
+ ],
+ [
+ -122.24947978427,
+ 37.888236400587
+ ],
+ [
+ -122.24194650941,
+ 37.881912466023
+ ],
+ [
+ -122.23867548216,
+ 37.883342879794
+ ],
+ [
+ -122.22707820376,
+ 37.8797292029
+ ],
+ [
+ -122.22172561373,
+ 37.87957863303
+ ],
+ [
+ -122.22212210188,
+ 37.882063035894
+ ],
+ [
+ -122.22727644784,
+ 37.891850077481
+ ],
+ [
+ -122.21429146091,
+ 37.901486549197
+ ],
+ [
+ -122.21746336611,
+ 37.903820382191
+ ],
+ [
+ -122.22678083765,
+ 37.905551935702
+ ],
+ [
+ -122.23252991583,
+ 37.909692607143
+ ],
+ [
+ -122.23441323455,
+ 37.916995245865
+ ],
+ [
+ -122.23233167176,
+ 37.916392966383
+ ],
+ [
+ -122.2295562547,
+ 37.911574730525
+ ],
+ [
+ -122.22767293599,
+ 37.908412763243
+ ],
+ [
+ -122.22271683411,
+ 37.906530639861
+ ],
+ [
+ -122.21577829147,
+ 37.907132919343
+ ],
+ [
+ -122.21300287442,
+ 37.90750934402
+ ],
+ [
+ -122.21072306755,
+ 37.910972451043
+ ],
+ [
+ -122.2163730237,
+ 37.91548954716
+ ],
+ [
+ -122.21587741351,
+ 37.921662911853
+ ],
+ [
+ -122.21320111849,
+ 37.924373169523
+ ],
+ [
+ -122.20893887088,
+ 37.921135917306
+ ],
+ [
+ -122.21330024053,
+ 37.920985347435
+ ],
+ [
+ -122.21240814219,
+ 37.915338977289
+ ],
+ [
+ -122.20596520975,
+ 37.911725300395
+ ],
+ [
+ -122.20378452492,
+ 37.914811982742
+ ],
+ [
+ -122.20368540288,
+ 37.909692607143
+ ],
+ [
+ -122.20011700953,
+ 37.917522240412
+ ],
+ [
+ -122.19585476191,
+ 37.922114621465
+ ],
+ [
+ -122.17404791363,
+ 37.917898665089
+ ],
+ [
+ -122.16453219802,
+ 37.921286487176
+ ],
+ [
+ -122.1663163947,
+ 37.923018040688
+ ]
+ ],
+ [
+ [
+ -122.23431411251,
+ 38.021791875779
+ ],
+ [
+ -122.2295562547,
+ 38.021641305908
+ ],
+ [
+ -122.22965537674,
+ 38.014715091862
+ ],
+ [
+ -122.22519488505,
+ 38.01396224251
+ ],
+ [
+ -122.22569049524,
+ 38.011101414969
+ ],
+ [
+ -122.22023878317,
+ 38.00884286691
+ ],
+ [
+ -122.21617477962,
+ 38.008993436781
+ ],
+ [
+ -122.21597653555,
+ 38.007186598334
+ ],
+ [
+ -122.2139940948,
+ 38.007111313399
+ ],
+ [
+ -122.20507311141,
+ 38.008918151846
+ ],
+ [
+ -122.19040304984,
+ 38.015693796021
+ ],
+ [
+ -122.198729301,
+ 38.025405552673
+ ],
+ [
+ -122.20606433179,
+ 38.028191095278
+ ],
+ [
+ -122.20725379624,
+ 38.041591813758
+ ],
+ [
+ -122.20616345382,
+ 38.046184194811
+ ],
+ [
+ -122.21240814219,
+ 38.045958340005
+ ],
+ [
+ -122.21577829147,
+ 38.041817668564
+ ],
+ [
+ -122.21964405094,
+ 38.045958340005
+ ],
+ [
+ -122.22113088151,
+ 38.045356060523
+ ],
+ [
+ -122.21974317298,
+ 38.042344663111
+ ],
+ [
+ -122.22103175947,
+ 38.041064819211
+ ],
+ [
+ -122.22737556988,
+ 38.04475378104
+ ],
+ [
+ -122.23193518361,
+ 38.04347393714
+ ],
+ [
+ -122.23411586843,
+ 38.044226786493
+ ],
+ [
+ -122.23431411251,
+ 38.021791875779
+ ]
+ ],
+ [
+ [
+ -122.00573869375,
+ 37.994087019595
+ ],
+ [
+ -121.9776871571,
+ 37.973760087069
+ ],
+ [
+ -121.97550647227,
+ 37.97549164058
+ ],
+ [
+ -121.9700547602,
+ 37.971727393816
+ ],
+ [
+ -121.96836968556,
+ 37.973157807586
+ ],
+ [
+ -121.96390919387,
+ 37.972856667845
+ ],
+ [
+ -121.95360050195,
+ 37.964876464705
+ ],
+ [
+ -121.94527425079,
+ 37.96352133587
+ ],
+ [
+ -121.94041727095,
+ 37.967737292246
+ ],
+ [
+ -121.93912868446,
+ 37.971576823945
+ ],
+ [
+ -121.93912868446,
+ 37.979858166826
+ ],
+ [
+ -121.94220146763,
+ 37.981665005273
+ ],
+ [
+ -121.9416067354,
+ 37.983396558785
+ ],
+ [
+ -121.93199189775,
+ 37.983321273849
+ ],
+ [
+ -121.93109979941,
+ 37.999658104806
+ ],
+ [
+ -121.93248750794,
+ 38.003497636505
+ ],
+ [
+ -121.93595677926,
+ 38.003949346117
+ ],
+ [
+ -121.93298311813,
+ 38.010499135487
+ ],
+ [
+ -121.93357785035,
+ 38.011929549257
+ ],
+ [
+ -121.94180497948,
+ 38.012080119128
+ ],
+ [
+ -121.94091288114,
+ 38.006810173658
+ ],
+ [
+ -121.9460672271,
+ 38.003347066635
+ ],
+ [
+ -121.94814878989,
+ 37.994990438818
+ ],
+ [
+ -121.94993298656,
+ 37.997625411553
+ ],
+ [
+ -121.9568715292,
+ 37.994990438818
+ ],
+ [
+ -121.96113377681,
+ 37.998754685582
+ ],
+ [
+ -121.96153026496,
+ 38.00470219547
+ ],
+ [
+ -121.96628812277,
+ 38.006057324305
+ ],
+ [
+ -121.96827056352,
+ 38.003648206376
+ ],
+ [
+ -121.96718022111,
+ 38.008240587428
+ ],
+ [
+ -121.97491174004,
+ 38.006207894175
+ ],
+ [
+ -121.97510998412,
+ 38.007788877816
+ ],
+ [
+ -121.97957047581,
+ 38.008090017558
+ ],
+ [
+ -121.98105730638,
+ 38.009520431328
+ ],
+ [
+ -121.97867837747,
+ 38.00884286691
+ ],
+ [
+ -121.97857925544,
+ 38.011854264322
+ ],
+ [
+ -121.98373360139,
+ 38.011778979386
+ ],
+ [
+ -121.98254413694,
+ 38.010423850551
+ ],
+ [
+ -121.98938355754,
+ 38.014338667186
+ ],
+ [
+ -121.99186160848,
+ 38.014188097315
+ ],
+ [
+ -121.99582648998,
+ 38.007111313399
+ ],
+ [
+ -121.99790805277,
+ 38.008617012105
+ ],
+ [
+ -122.00098083594,
+ 37.999356965065
+ ],
+ [
+ -122.00663079208,
+ 38.000260384288
+ ],
+ [
+ -122.0061351819,
+ 37.997625411553
+ ],
+ [
+ -122.01069479563,
+ 37.994087019595
+ ],
+ [
+ -122.0077211345,
+ 37.993033030501
+ ],
+ [
+ -122.00573869375,
+ 37.994087019595
+ ]
+ ],
+ [
+ [
+ -122.37942877559,
+ 37.826803893396
+ ],
+ [
+ -122.3781401891,
+ 37.83041757029
+ ],
+ [
+ -122.37328320926,
+ 37.832450263543
+ ],
+ [
+ -122.36743500904,
+ 37.829438866131
+ ],
+ [
+ -122.36644378866,
+ 37.830793994966
+ ],
+ [
+ -122.36545256829,
+ 37.829062441455
+ ],
+ [
+ -122.36703852089,
+ 37.828610731843
+ ],
+ [
+ -122.36188417493,
+ 37.821533947927
+ ],
+ [
+ -122.3633710055,
+ 37.821533947927
+ ],
+ [
+ -122.36208241901,
+ 37.820781098574
+ ],
+ [
+ -122.36356924957,
+ 37.820856383509
+ ],
+ [
+ -122.36237978512,
+ 37.820103534156
+ ],
+ [
+ -122.36406485976,
+ 37.820103534156
+ ],
+ [
+ -122.36465959199,
+ 37.817920271033
+ ],
+ [
+ -122.37110252443,
+ 37.816038147651
+ ],
+ [
+ -122.36763325312,
+ 37.812424470757
+ ],
+ [
+ -122.35841490362,
+ 37.81430659414
+ ],
+ [
+ -122.36089295456,
+ 37.812499755693
+ ],
+ [
+ -122.36218154105,
+ 37.807003955417
+ ],
+ [
+ -122.36753413108,
+ 37.80775680477
+ ],
+ [
+ -122.37268847703,
+ 37.810617632311
+ ],
+ [
+ -122.37169725666,
+ 37.815134728428
+ ],
+ [
+ -122.37942877559,
+ 37.826803893396
+ ]
+ ],
+ [
+ [
+ -122.30141973198,
+ 38.105508723814
+ ],
+ [
+ -122.29021894173,
+ 38.114618200983
+ ],
+ [
+ -122.28823650098,
+ 38.11258550773
+ ],
+ [
+ -122.28813737894,
+ 38.116876749041
+ ],
+ [
+ -122.28734440264,
+ 38.116500324365
+ ],
+ [
+ -122.28308215502,
+ 38.118081308006
+ ],
+ [
+ -122.28149620242,
+ 38.118608302553
+ ],
+ [
+ -122.28119883631,
+ 38.118457732682
+ ],
+ [
+ -122.27832429721,
+ 38.113639496824
+ ],
+ [
+ -122.28119883631,
+ 38.118457732682
+ ],
+ [
+ -122.28288391095,
+ 38.11800602307
+ ],
+ [
+ -122.27981112778,
+ 38.112736077601
+ ],
+ [
+ -122.2680156053,
+ 38.100012923538
+ ],
+ [
+ -122.26890770364,
+ 38.098356654962
+ ],
+ [
+ -122.26742087308,
+ 38.098883649509
+ ],
+ [
+ -122.26593404251,
+ 38.097227380932
+ ],
+ [
+ -122.26851121549,
+ 38.097679090544
+ ],
+ [
+ -122.2648437001,
+ 38.096248676774
+ ],
+ [
+ -122.26692526289,
+ 38.096399246644
+ ],
+ [
+ -122.2587972558,
+ 38.090225881951
+ ],
+ [
+ -122.26097794063,
+ 38.089096607922
+ ],
+ [
+ -122.25810340154,
+ 38.089397747663
+ ],
+ [
+ -122.25978847618,
+ 38.087967333893
+ ],
+ [
+ -122.25731042524,
+ 38.08864489831
+ ],
+ [
+ -122.25899549988,
+ 38.08721448454
+ ],
+ [
+ -122.25651744894,
+ 38.087892048957
+ ],
+ [
+ -122.25820252358,
+ 38.086461635187
+ ],
+ [
+ -122.2556253506,
+ 38.087139199605
+ ],
+ [
+ -122.25582359467,
+ 38.085482931028
+ ],
+ [
+ -122.25384115392,
+ 38.084805366611
+ ],
+ [
+ -122.24710085536,
+ 38.075771174377
+ ],
+ [
+ -122.24829031981,
+ 38.0766745936
+ ],
+ [
+ -122.25126398094,
+ 38.072985631771
+ ],
+ [
+ -122.25126398094,
+ 38.069447239813
+ ],
+ [
+ -122.25304817762,
+ 38.069070815137
+ ],
+ [
+ -122.25146222502,
+ 38.069748379554
+ ],
+ [
+ -122.25294905558,
+ 38.072383352289
+ ],
+ [
+ -122.2556253506,
+ 38.072759776965
+ ],
+ [
+ -122.25830164561,
+ 38.06869439046
+ ],
+ [
+ -122.26979980198,
+ 38.067113406819
+ ],
+ [
+ -122.26841209345,
+ 38.070802368648
+ ],
+ [
+ -122.27118751051,
+ 38.0753947497
+ ],
+ [
+ -122.28000937185,
+ 38.080890549976
+ ],
+ [
+ -122.30141973198,
+ 38.105508723814
+ ]
+ ],
+ [
+ [
+ -122.69929559101,
+ 37.890344378775
+ ],
+ [
+ -122.70306222844,
+ 37.889892669163
+ ],
+ [
+ -122.7121814559,
+ 37.892377072028
+ ],
+ [
+ -122.71386653054,
+ 37.894635620086
+ ],
+ [
+ -122.73210498546,
+ 37.898926861397
+ ],
+ [
+ -122.74290928756,
+ 37.921286487176
+ ],
+ [
+ -122.74528821647,
+ 37.924072029782
+ ],
+ [
+ -122.75688549487,
+ 37.930471249281
+ ],
+ [
+ -122.76897838346,
+ 37.933482646692
+ ],
+ [
+ -122.77482658368,
+ 37.938827877097
+ ],
+ [
+ -122.78017917371,
+ 37.939053731903
+ ],
+ [
+ -122.78444142133,
+ 37.942667408797
+ ],
+ [
+ -122.78850542487,
+ 37.943043833473
+ ],
+ [
+ -122.79118171989,
+ 37.954562428571
+ ],
+ [
+ -122.79623694381,
+ 37.96480117977
+ ],
+ [
+ -122.80545529331,
+ 37.976244489933
+ ],
+ [
+ -122.81080788334,
+ 37.980234591503
+ ],
+ [
+ -122.81725081578,
+ 37.981815575144
+ ],
+ [
+ -122.82458584657,
+ 37.992204896213
+ ],
+ [
+ -122.83201999939,
+ 37.994312874401
+ ],
+ [
+ -122.83509278256,
+ 37.998754685582
+ ],
+ [
+ -122.84054449462,
+ 38.0019919378
+ ],
+ [
+ -122.85967504789,
+ 38.01268239861
+ ],
+ [
+ -122.87989594356,
+ 38.020512031879
+ ],
+ [
+ -122.90517206316,
+ 38.024426848514
+ ],
+ [
+ -122.92469910457,
+ 38.02480327319
+ ],
+ [
+ -122.92995257256,
+ 38.025857262284
+ ],
+ [
+ -122.93371920999,
+ 38.028868659696
+ ],
+ [
+ -122.95869796347,
+ 38.023598714226
+ ],
+ [
+ -122.97465661153,
+ 38.012531828739
+ ],
+ [
+ -122.9801083236,
+ 38.002594217282
+ ],
+ [
+ -122.97307065893,
+ 37.998227691035
+ ],
+ [
+ -122.96553738407,
+ 37.997625411553
+ ],
+ [
+ -122.96355494332,
+ 37.99544214843
+ ],
+ [
+ -122.960085672,
+ 37.990473342701
+ ],
+ [
+ -122.96226635683,
+ 37.986407956196
+ ],
+ [
+ -122.96424879758,
+ 37.985805676714
+ ],
+ [
+ -122.97356626912,
+ 37.98603153152
+ ],
+ [
+ -122.97753115062,
+ 37.98889235906
+ ],
+ [
+ -123.00469058893,
+ 37.989042928931
+ ],
+ [
+ -123.010142301,
+ 37.991301476989
+ ],
+ [
+ -123.01658523345,
+ 37.990247487895
+ ],
+ [
+ -123.02501060665,
+ 37.991301476989
+ ],
+ [
+ -123.028579,
+ 37.994614014142
+ ],
+ [
+ -123.02679480332,
+ 37.999959244547
+ ],
+ [
+ -123.02203694552,
+ 38.002669502217
+ ],
+ [
+ -123.0161887453,
+ 38.003572921441
+ ],
+ [
+ -123.00921069625,
+ 38.018021404017
+ ],
+ [
+ -122.99462924096,
+ 38.048213209999
+ ],
+ [
+ -122.9742860523,
+ 38.093301559952
+ ],
+ [
+ -122.96097777034,
+ 38.124932237116
+ ],
+ [
+ -122.9608786483,
+ 38.128997623622
+ ],
+ [
+ -122.95354361752,
+ 38.150679684983
+ ],
+ [
+ -122.95354361752,
+ 38.16046672657
+ ],
+ [
+ -122.95869796347,
+ 38.168898639322
+ ],
+ [
+ -122.95869796347,
+ 38.174469724533
+ ],
+ [
+ -122.96583475018,
+ 38.17770697675
+ ],
+ [
+ -122.97039436391,
+ 38.177932831556
+ ],
+ [
+ -122.97217856059,
+ 38.180718374161
+ ],
+ [
+ -122.97188119448,
+ 38.184106196249
+ ],
+ [
+ -122.96940314354,
+ 38.18711759366
+ ],
+ [
+ -122.97138558429,
+ 38.192538109
+ ],
+ [
+ -122.97059260799,
+ 38.198711473694
+ ],
+ [
+ -122.98437057122,
+ 38.212187477109
+ ],
+ [
+ -122.9861547679,
+ 38.220393535055
+ ],
+ [
+ -122.99150735793,
+ 38.224985916107
+ ],
+ [
+ -122.99844590056,
+ 38.227169179231
+ ],
+ [
+ -122.99943712094,
+ 38.230557001318
+ ],
+ [
+ -122.99785116834,
+ 38.233417828859
+ ],
+ [
+ -123.00023009724,
+ 38.240042903164
+ ],
+ [
+ -122.99824765649,
+ 38.243731864993
+ ],
+ [
+ -122.99567048351,
+ 38.245388133569
+ ],
+ [
+ -122.98556003567,
+ 38.24169917174
+ ],
+ [
+ -122.98238813047,
+ 38.238913629135
+ ],
+ [
+ -122.97802676081,
+ 38.240193473035
+ ],
+ [
+ -122.97198031652,
+ 38.230481716383
+ ],
+ [
+ -122.93542639084,
+ 38.200335948135
+ ],
+ [
+ -122.88118453005,
+ 38.126889645434
+ ],
+ [
+ -122.86225222086,
+ 38.112359652924
+ ],
+ [
+ -122.83281297569,
+ 38.132611300515
+ ],
+ [
+ -122.83479541644,
+ 38.135396843121
+ ],
+ [
+ -122.80763597813,
+ 38.141193783138
+ ],
+ [
+ -122.80763597813,
+ 38.139763369367
+ ],
+ [
+ -122.79633606584,
+ 38.132385445709
+ ],
+ [
+ -122.79197469619,
+ 38.135396843121
+ ],
+ [
+ -122.78900103506,
+ 38.132009021033
+ ],
+ [
+ -122.78533351967,
+ 38.132987725192
+ ],
+ [
+ -122.78166600428,
+ 38.12982575791
+ ],
+ [
+ -122.77918795333,
+ 38.124706382311
+ ],
+ [
+ -122.77641253628,
+ 38.123727678152
+ ],
+ [
+ -122.77611517017,
+ 38.120490425935
+ ],
+ [
+ -122.77205116663,
+ 38.121092705417
+ ],
+ [
+ -122.76620296641,
+ 38.126212081016
+ ],
+ [
+ -122.75966091192,
+ 38.121092705417
+ ],
+ [
+ -122.74033211459,
+ 38.128847053751
+ ],
+ [
+ -122.74023299255,
+ 38.130653892198
+ ],
+ [
+ -122.73626811104,
+ 38.132009021033
+ ],
+ [
+ -122.73567337882,
+ 38.135472128056
+ ],
+ [
+ -122.72496819875,
+ 38.14322647639
+ ],
+ [
+ -122.71911999853,
+ 38.144958029902
+ ],
+ [
+ -122.71099199145,
+ 38.138935235079
+ ],
+ [
+ -122.70960428292,
+ 38.135999122603
+ ],
+ [
+ -122.70563940142,
+ 38.142548911973
+ ],
+ [
+ -122.7021701301,
+ 38.14194663249
+ ],
+ [
+ -122.69661929599,
+ 38.142473627037
+ ],
+ [
+ -122.6921588043,
+ 38.14578616419
+ ],
+ [
+ -122.68323782091,
+ 38.149173986278
+ ],
+ [
+ -122.66688268471,
+ 38.148571706795
+ ],
+ [
+ -122.66113360652,
+ 38.145485024449
+ ],
+ [
+ -122.65280735536,
+ 38.148044712248
+ ],
+ [
+ -122.64160656511,
+ 38.146313158737
+ ],
+ [
+ -122.63030665282,
+ 38.150604400048
+ ],
+ [
+ -122.62584616113,
+ 38.149475126019
+ ],
+ [
+ -122.61712342182,
+ 38.150529115113
+ ],
+ [
+ -122.6197005948,
+ 38.152862948106
+ ],
+ [
+ -122.61920498461,
+ 38.155723775647
+ ],
+ [
+ -122.6236654763,
+ 38.159939732023
+ ],
+ [
+ -122.62584616113,
+ 38.165586102169
+ ],
+ [
+ -122.62307074408,
+ 38.169576203739
+ ],
+ [
+ -122.62624264928,
+ 38.171834751798
+ ],
+ [
+ -122.6228725,
+ 38.173340450503
+ ],
+ [
+ -122.61870937442,
+ 38.168898639322
+ ],
+ [
+ -122.61543834718,
+ 38.171232472315
+ ],
+ [
+ -122.60800419436,
+ 38.170103198286
+ ],
+ [
+ -122.604435801,
+ 38.168070505034
+ ],
+ [
+ -122.59700164818,
+ 38.167769365292
+ ],
+ [
+ -122.59511832946,
+ 38.169350348933
+ ],
+ [
+ -122.5936314989,
+ 38.168748069451
+ ],
+ [
+ -122.58927012925,
+ 38.173039310762
+ ],
+ [
+ -122.57350972526,
+ 38.16189714034
+ ],
+ [
+ -122.56766152504,
+ 38.164532113075
+ ],
+ [
+ -122.57172552859,
+ 38.173039310762
+ ],
+ [
+ -122.57053606413,
+ 38.174846149209
+ ],
+ [
+ -122.5736088473,
+ 38.176502417785
+ ],
+ [
+ -122.5796552916,
+ 38.185386040149
+ ],
+ [
+ -122.57816846103,
+ 38.183579201702
+ ],
+ [
+ -122.57073430821,
+ 38.183503916767
+ ],
+ [
+ -122.57321235915,
+ 38.186289459372
+ ],
+ [
+ -122.57073430821,
+ 38.18711759366
+ ],
+ [
+ -122.56528259614,
+ 38.182751067414
+ ],
+ [
+ -122.56845450134,
+ 38.177029412332
+ ],
+ [
+ -122.56448961984,
+ 38.175072004015
+ ],
+ [
+ -122.56320103335,
+ 38.169350348933
+ ],
+ [
+ -122.55923615184,
+ 38.168597499581
+ ],
+ [
+ -122.55428004996,
+ 38.170103198286
+ ],
+ [
+ -122.5520002431,
+ 38.168973924257
+ ],
+ [
+ -122.55794756536,
+ 38.163553408917
+ ],
+ [
+ -122.55794756536,
+ 38.160165586829
+ ],
+ [
+ -122.54962131419,
+ 38.157304759288
+ ],
+ [
+ -122.54446696824,
+ 38.158735173058
+ ],
+ [
+ -122.53485213059,
+ 38.149173986278
+ ],
+ [
+ -122.52107416736,
+ 38.141494922879
+ ],
+ [
+ -122.51403650269,
+ 38.13381585948
+ ],
+ [
+ -122.50689971598,
+ 38.116650894235
+ ],
+ [
+ -122.49996117334,
+ 38.111531518636
+ ],
+ [
+ -122.48400252529,
+ 38.107767271872
+ ],
+ [
+ -122.48261481676,
+ 38.09918478925
+ ],
+ [
+ -122.48083062008,
+ 38.091957435463
+ ],
+ [
+ -122.47983939971,
+ 38.06854382059
+ ],
+ [
+ -122.4874717966,
+ 38.04731346884
+ ],
+ [
+ -122.49361736294,
+ 38.027287676055
+ ],
+ [
+ -122.49292350867,
+ 38.02209301552
+ ],
+ [
+ -122.48539023381,
+ 38.017124209791
+ ],
+ [
+ -122.47874905729,
+ 38.011477839645
+ ],
+ [
+ -122.45951938199,
+ 38.006734888722
+ ],
+ [
+ -122.45783430735,
+ 38.002820072088
+ ],
+ [
+ -122.44643527303,
+ 37.993183600372
+ ],
+ [
+ -122.44276775763,
+ 37.984601117749
+ ],
+ [
+ -122.44782298155,
+ 37.979331172279
+ ],
+ [
+ -122.45634747679,
+ 37.975943350192
+ ],
+ [
+ -122.46844036538,
+ 37.979782881891
+ ],
+ [
+ -122.47072017225,
+ 37.977674903703
+ ],
+ [
+ -122.4711166604,
+ 37.973609517198
+ ],
+ [
+ -122.4618983109,
+ 37.966608018217
+ ],
+ [
+ -122.4618983109,
+ 37.963220196129
+ ],
+ [
+ -122.4642772398,
+ 37.9608110782
+ ],
+ [
+ -122.47101753836,
+ 37.960058228847
+ ],
+ [
+ -122.47874905729,
+ 37.965252889382
+ ],
+ [
+ -122.48449813548,
+ 37.965554029123
+ ],
+ [
+ -122.48578672196,
+ 37.958552530141
+ ],
+ [
+ -122.48400252529,
+ 37.952454450384
+ ],
+ [
+ -122.47299997911,
+ 37.948389063878
+ ],
+ [
+ -122.47151314855,
+ 37.944323677373
+ ],
+ [
+ -122.47230612485,
+ 37.941538134767
+ ],
+ [
+ -122.47696486062,
+ 37.938225597615
+ ],
+ [
+ -122.48400252529,
+ 37.935891764621
+ ],
+ [
+ -122.48816565087,
+ 37.932955652145
+ ],
+ [
+ -122.48717443049,
+ 37.924975449005
+ ],
+ [
+ -122.48202008453,
+ 37.922415761206
+ ],
+ [
+ -122.4711166604,
+ 37.920307783018
+ ],
+ [
+ -122.46992719594,
+ 37.913080429231
+ ],
+ [
+ -122.46516933814,
+ 37.902465253356
+ ],
+ [
+ -122.45723957513,
+ 37.898701006592
+ ],
+ [
+ -122.44762473748,
+ 37.898324581915
+ ],
+ [
+ -122.4350362387,
+ 37.885149718241
+ ],
+ [
+ -122.43473887259,
+ 37.876266095877
+ ],
+ [
+ -122.42215037381,
+ 37.87445925743
+ ],
+ [
+ -122.41868110249,
+ 37.852476056328
+ ],
+ [
+ -122.4242319366,
+ 37.850443363075
+ ],
+ [
+ -122.42968364867,
+ 37.851196212428
+ ],
+ [
+ -122.43573009296,
+ 37.849389373981
+ ],
+ [
+ -122.44385810005,
+ 37.852099631651
+ ],
+ [
+ -122.45198610713,
+ 37.861585533497
+ ],
+ [
+ -122.45872640569,
+ 37.857821286733
+ ],
+ [
+ -122.47161227058,
+ 37.863542941814
+ ],
+ [
+ -122.47409032152,
+ 37.860230404662
+ ],
+ [
+ -122.47458593171,
+ 37.849690513722
+ ],
+ [
+ -122.47141402651,
+ 37.842463159935
+ ],
+ [
+ -122.46754826704,
+ 37.838171918624
+ ],
+ [
+ -122.46754826704,
+ 37.83583808563
+ ],
+ [
+ -122.46804387723,
+ 37.833654822507
+ ],
+ [
+ -122.47220700281,
+ 37.832073838866
+ ],
+ [
+ -122.47418944356,
+ 37.833353682766
+ ],
+ [
+ -122.47805520303,
+ 37.832450263543
+ ],
+ [
+ -122.47964115563,
+ 37.830492855225
+ ],
+ [
+ -122.47835256914,
+ 37.828083737296
+ ],
+ [
+ -122.47914554544,
+ 37.825599334432
+ ],
+ [
+ -122.491139312,
+ 37.82642746872
+ ],
+ [
+ -122.49480682739,
+ 37.822738506891
+ ],
+ [
+ -122.49986205131,
+ 37.821835087668
+ ],
+ [
+ -122.49976292927,
+ 37.81972710948
+ ],
+ [
+ -122.50144800391,
+ 37.821684517797
+ ],
+ [
+ -122.50412429892,
+ 37.82100695338
+ ],
+ [
+ -122.50521464134,
+ 37.822889076762
+ ],
+ [
+ -122.51106284156,
+ 37.824470060403
+ ],
+ [
+ -122.5235522183,
+ 37.824695915209
+ ],
+ [
+ -122.52920217444,
+ 37.819049545062
+ ],
+ [
+ -122.52741797777,
+ 37.814984158557
+ ],
+ [
+ -122.53405915429,
+ 37.815360583233
+ ],
+ [
+ -122.53960998839,
+ 37.821458662991
+ ],
+ [
+ -122.54020472062,
+ 37.826954463267
+ ],
+ [
+ -122.55269409736,
+ 37.831471559384
+ ],
+ [
+ -122.55338795162,
+ 37.835386376019
+ ],
+ [
+ -122.56389488761,
+ 37.843592433965
+ ],
+ [
+ -122.56706679282,
+ 37.849464658917
+ ],
+ [
+ -122.57073430821,
+ 37.849464658917
+ ],
+ [
+ -122.57806933899,
+ 37.854508749581
+ ],
+ [
+ -122.58411578329,
+ 37.853379475551
+ ],
+ [
+ -122.5920455463,
+ 37.85834828128
+ ],
+ [
+ -122.60136301784,
+ 37.869716306508
+ ],
+ [
+ -122.61117609956,
+ 37.873480553272
+ ],
+ [
+ -122.61900674053,
+ 37.872953558725
+ ],
+ [
+ -122.62475581871,
+ 37.876341380813
+ ],
+ [
+ -122.62842333411,
+ 37.876491950683
+ ],
+ [
+ -122.64626530088,
+ 37.894560335151
+ ],
+ [
+ -122.66718005082,
+ 37.901561834132
+ ],
+ [
+ -122.68006591571,
+ 37.902314683485
+ ],
+ [
+ -122.69473597728,
+ 37.895990748921
+ ],
+ [
+ -122.69929559101,
+ 37.890344378775
+ ]
+ ]
+ ],
+ "bbox": [
+ -123.028579,
+ 37.057166,
+ -121.405753,
+ 38.313521
+ ]
+}
\ No newline at end of file
diff --git a/web/gui2-topo-lib/lib/layer/maputils.ts b/web/gui2-topo-lib/lib/layer/maputils.ts
new file mode 100644
index 0000000..45c3140
--- /dev/null
+++ b/web/gui2-topo-lib/lib/layer/maputils.ts
@@ -0,0 +1,21 @@
+/*
+ * 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.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an 'AS IS' BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export interface MapObject {
+ id: string;
+ description: string;
+ filePath: string;
+ scale: number;
+}
diff --git a/web/gui2-topo-lib/lib/layer/nodeviceconnectedsvg/nodeviceconnectedsvg.component.css b/web/gui2-topo-lib/lib/layer/nodeviceconnectedsvg/nodeviceconnectedsvg.component.css
new file mode 100644
index 0000000..7897595
--- /dev/null
+++ b/web/gui2-topo-lib/lib/layer/nodeviceconnectedsvg/nodeviceconnectedsvg.component.css
@@ -0,0 +1,34 @@
+/*
+ * Copyright 2018-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.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+
+/*
+ ONOS GUI -- Topology View (no devices connected) -- CSS file
+ */
+/* --- "No Devices" Layer --- */
+#topo-noDevsLayer {
+ visibility: hidden;
+}
+
+#topo-noDevsLayer text {
+ font-size: 60pt;
+ font-style: italic;
+ fill: #7e9aa8;
+}
+
+#topo-noDevsLayer .noDevsBird {
+ fill: #db7773;
+}
diff --git a/web/gui2-topo-lib/lib/layer/nodeviceconnectedsvg/nodeviceconnectedsvg.component.html b/web/gui2-topo-lib/lib/layer/nodeviceconnectedsvg/nodeviceconnectedsvg.component.html
new file mode 100644
index 0000000..efe044f
--- /dev/null
+++ b/web/gui2-topo-lib/lib/layer/nodeviceconnectedsvg/nodeviceconnectedsvg.component.html
@@ -0,0 +1,23 @@
+<!--
+~ Copyright 2018-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.
+~ You may obtain a copy of the License at
+~
+~ http://www.apache.org/licenses/LICENSE-2.0
+~
+~ Unless required by applicable law or agreed to in writing, software
+~ distributed under the License is distributed on an "AS IS" BASIS,
+~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+~ See the License for the specific language governing permissions and
+~ limitations under the License.
+-->
+<svg:g xmlns:svg="http://www.w3.org/2000/svg" id="topo-noDevsLayer"
+ [attr.transform]="'translate(' + (zoomExtents.tx) + ',' + (450 * zoomExtents.sc) + '),' +
+ 'scale(' + zoomExtents.sc + ')'"
+ style="visibility: visible;">
+ <svg:use width="100" height="100" class="noDevsBird" href="#bird"></svg:use>
+ <svg:text x="120" y="80">{{lionFn('no_devices_are_connected')}}</svg:text>
+</svg:g>
+
diff --git a/web/gui2-topo-lib/lib/layer/nodeviceconnectedsvg/nodeviceconnectedsvg.component.spec.ts b/web/gui2-topo-lib/lib/layer/nodeviceconnectedsvg/nodeviceconnectedsvg.component.spec.ts
new file mode 100644
index 0000000..218f063
--- /dev/null
+++ b/web/gui2-topo-lib/lib/layer/nodeviceconnectedsvg/nodeviceconnectedsvg.component.spec.ts
@@ -0,0 +1,119 @@
+/*
+ * Copyright 2018-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.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ActivatedRoute, Params } from '@angular/router';
+import { NoDeviceConnectedSvgComponent } from './nodeviceconnectedsvg.component';
+import { DebugElement } from '@angular/core';
+import { By } from '@angular/platform-browser';
+import {
+ FnService,
+ IconService,
+ LionService,
+ LogService,
+ UrlFnService,
+ TableFilterPipe,
+ IconComponent,
+ WebSocketService, SvgUtilService, PrefsService
+} from '../../../../gui2-fw-lib/public_api';
+import { of } from 'rxjs';
+
+class MockActivatedRoute extends ActivatedRoute {
+ constructor(params: Params) {
+ super();
+ this.queryParams = of(params);
+ }
+}
+
+class MockWebSocketService {
+ createWebSocket() { }
+ isConnected() { return false; }
+ unbindHandlers() { }
+ bindHandlers() { }
+}
+
+class MockSvgUtilService {
+ translate() {}
+ scale() {}
+}
+
+class MockPrefsService {
+}
+
+
+/**
+ * ONOS GUI -- Topology NoDevicesConnected -- Unit Tests
+ */
+describe('NoDeviceConnectedSvgComponent', () => {
+ let fs: FnService;
+ let ar: MockActivatedRoute;
+ let windowMock: Window;
+ let logServiceSpy: jasmine.SpyObj<LogService>;
+ let component: NoDeviceConnectedSvgComponent;
+ let fixture: ComponentFixture<NoDeviceConnectedSvgComponent>;
+
+
+ beforeEach(async(() => {
+ const logSpy = jasmine.createSpyObj('LogService', ['info', 'debug', 'warn', 'error']);
+ ar = new MockActivatedRoute({'debug': 'panel'});
+
+ windowMock = <any>{
+ innerWidth: 800,
+ innerHeight: 600,
+ };
+ fs = new FnService(ar, logSpy, windowMock);
+
+ const bundleObj = {
+ 'core.view.Topo': {
+ test: 'test1'
+ }
+ };
+ const mockLion = (key) => {
+ return bundleObj[key] || '%' + key + '%';
+ };
+
+ TestBed.configureTestingModule({
+ declarations: [ NoDeviceConnectedSvgComponent ],
+ providers: [
+ { provide: FnService, useValue: fs },
+ { provide: LogService, useValue: logSpy },
+ { provide: SvgUtilService, useClass: MockSvgUtilService },
+ { provide: WebSocketService, useClass: MockWebSocketService },
+ { provide: PrefsService, useClass: MockPrefsService },
+ {
+ provide: LionService, useFactory: (() => {
+ return {
+ bundle: ((bundleId) => mockLion),
+ ubercache: new Array(),
+ loadCbs: new Map<string, () => void>([])
+ };
+ })
+ },
+ { provide: 'Window', useValue: windowMock },
+ ]
+ }).compileComponents();
+ logServiceSpy = TestBed.get(LogService);
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(NoDeviceConnectedSvgComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/web/gui2-topo-lib/lib/layer/nodeviceconnectedsvg/nodeviceconnectedsvg.component.ts b/web/gui2-topo-lib/lib/layer/nodeviceconnectedsvg/nodeviceconnectedsvg.component.ts
new file mode 100644
index 0000000..84965fa
--- /dev/null
+++ b/web/gui2-topo-lib/lib/layer/nodeviceconnectedsvg/nodeviceconnectedsvg.component.ts
@@ -0,0 +1,102 @@
+/*
+ * Copyright 2018-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.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import {
+ AfterContentInit,
+ Component,
+ HostListener,
+ Inject,
+ Input,
+ OnInit
+} from '@angular/core';
+import { ViewControllerImpl } from '../viewcontroller';
+import {
+ FnService,
+ LogService,
+ PrefsService,
+ SvgUtilService, LionService, ZoomUtils, TopoZoomPrefs
+} from '../../../../gui2-fw-lib/public_api';
+
+/**
+ * ONOS GUI -- Topology No Connected Devices View.
+ * View that contains the 'No Connected Devices' message
+ *
+ * This component is an SVG snippet that expects to be in an SVG element with a view box of 1000x1000
+ *
+ * It should be added to a template with a tag like <svg:g onos-nodeviceconnected />
+ */
+@Component({
+ selector: '[onos-nodeviceconnected]',
+ templateUrl: './nodeviceconnectedsvg.component.html',
+ styleUrls: ['./nodeviceconnectedsvg.component.css']
+})
+export class NoDeviceConnectedSvgComponent extends ViewControllerImpl implements AfterContentInit, OnInit {
+ @Input() bannerHeight: number = 48;
+ lionFn; // Function
+ zoomExtents: TopoZoomPrefs = <TopoZoomPrefs>{
+ sc: 1.0, tx: 0, ty: 0
+ };
+
+ constructor(
+ protected fs: FnService,
+ protected log: LogService,
+ protected ps: PrefsService,
+ protected sus: SvgUtilService,
+ private lion: LionService,
+ @Inject('Window') public window: any,
+ ) {
+ super(fs, log, ps);
+
+ if (this.lion.ubercache.length === 0) {
+ this.lionFn = this.dummyLion;
+ this.lion.loadCbs.set('topo-nodevices', () => this.doLion());
+ } else {
+ this.doLion();
+ }
+
+ this.log.debug('NoDeviceConnectedSvgComponent constructed');
+ }
+
+ ngOnInit() {
+ this.log.debug('NoDeviceConnectedSvgComponent initialized');
+ }
+
+ ngAfterContentInit(): void {
+ this.zoomExtents = ZoomUtils.zoomToWindowSize(
+ this.bannerHeight, this.window.innerWidth, this.window.innerHeight);
+ }
+
+ @HostListener('window:resize', ['$event'])
+ onResize(event) {
+ this.zoomExtents = ZoomUtils.zoomToWindowSize(
+ this.bannerHeight, event.target.innerWidth, event.target.innerHeight);
+ }
+
+ /**
+ * Read the LION bundle for Details panel and set up the lionFn
+ */
+ doLion() {
+ this.lionFn = this.lion.bundle('core.view.Topo');
+
+ }
+
+ /**
+ * A dummy implementation of the lionFn until the response is received and the LION
+ * bundle is received from the WebSocket
+ */
+ dummyLion(key: string): string {
+ return '%' + key + '%';
+ }
+}
diff --git a/web/gui2-topo-lib/lib/layer/viewcontroller.ts b/web/gui2-topo-lib/lib/layer/viewcontroller.ts
new file mode 100644
index 0000000..e6568ed
--- /dev/null
+++ b/web/gui2-topo-lib/lib/layer/viewcontroller.ts
@@ -0,0 +1,82 @@
+/*
+ * Copyright 2018-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.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { FnService, LogService, PrefsService } from '../../../gui2-fw-lib/public_api';
+
+export interface ViewControllerPrefs {
+ visible: string;
+}
+
+/*
+ ONOS GUI -- View Controller.
+ A base class for view controllers to extend from
+ */
+export abstract class ViewControllerImpl {
+ id: string;
+ displayName: string = 'View';
+ name: string;
+ prefs: ViewControllerPrefs;
+ visibility: string;
+
+ constructor(
+ protected fs: FnService,
+ protected log: LogService,
+ protected ps: PrefsService
+ ) {
+ this.log.debug('View Controller constructed');
+ }
+
+ initialize() {
+ this.name = this.displayName.toLowerCase().replace(/ /g, '_');
+ this.prefs = {
+ visible: this.name + '_visible',
+ };
+ }
+
+ enabled() {
+ return this.ps.getPrefs('topo2_prefs', null)[this.prefs.visible];
+ }
+
+ isVisible() {
+ return this.visibility;
+ }
+
+ hide() {
+ this.visibility = 'hidden';
+ }
+
+ show() {
+ this.visibility = 'visible';
+ }
+
+ toggle() {
+ if (this.visibility === 'hidden') {
+ this.visibility = 'visible';
+ } else if (this.visibility === 'visible') {
+ this.visibility = 'hidden';
+ }
+ }
+
+ lookupPrefState(key: string): number {
+ // Return 0 if not defined
+ return this.ps.getPrefs('topo2_prefs', null)[key] || 0;
+ }
+
+ updatePrefState(key: string, value: number) {
+ const state = this.ps.getPrefs('topo2_prefs', null);
+ state[key] = value ? 1 : 0;
+ this.ps.setPrefs('topo2_prefs', state);
+ }
+}
diff --git a/web/gui2-topo-lib/lib/layout.service.spec.ts b/web/gui2-topo-lib/lib/layout.service.spec.ts
new file mode 100644
index 0000000..2f8483f
--- /dev/null
+++ b/web/gui2-topo-lib/lib/layout.service.spec.ts
@@ -0,0 +1,72 @@
+/*
+ * 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.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { TestBed } from '@angular/core/testing';
+
+import { LayoutService } from './layout.service';
+import {ActivatedRoute, Params} from '@angular/router';
+import {of} from 'rxjs';
+import {FnService, LogService} from '../../gui2-fw-lib/public_api';
+
+class MockActivatedRoute extends ActivatedRoute {
+ constructor(params: Params) {
+ super();
+ this.queryParams = of(params);
+ }
+}
+
+describe('LayoutService', () => {
+ let logServiceSpy: jasmine.SpyObj<LogService>;
+ let ar: ActivatedRoute;
+ let fs: FnService;
+ let mockWindow: Window;
+
+ beforeEach(() => {
+ const logSpy = jasmine.createSpyObj('LogService', ['debug', 'warn', 'info']);
+ ar = new MockActivatedRoute({'debug': 'TestService'});
+ mockWindow = <any>{
+ innerWidth: 400,
+ innerHeight: 200,
+ navigator: {
+ userAgent: 'defaultUA'
+ },
+ location: <any>{
+ hostname: 'foo',
+ host: 'foo',
+ port: '80',
+ protocol: 'http',
+ search: { debug: 'true' },
+ href: 'ws://foo:123/onos/ui/websock/path',
+ absUrl: 'ws://foo:123/onos/ui/websock/path'
+ }
+ };
+ fs = new FnService(ar, logSpy, mockWindow);
+
+ TestBed.configureTestingModule({
+ providers: [LayoutService,
+ { provide: FnService, useValue: fs},
+ { provide: LogService, useValue: logSpy },
+ { provide: ActivatedRoute, useValue: ar },
+ { provide: 'Window', useFactory: (() => mockWindow ) }
+ ]
+ });
+ logServiceSpy = TestBed.get(LogService);
+ });
+
+ it('should be created', () => {
+ const service: LayoutService = TestBed.get(LayoutService);
+ expect(service).toBeTruthy();
+ });
+});
diff --git a/web/gui2-topo-lib/lib/layout.service.ts b/web/gui2-topo-lib/lib/layout.service.ts
new file mode 100644
index 0000000..39844c54
--- /dev/null
+++ b/web/gui2-topo-lib/lib/layout.service.ts
@@ -0,0 +1,47 @@
+/*
+ * 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.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { Injectable } from '@angular/core';
+import {LogService, WebSocketService} from '../../gui2-fw-lib/public_api';
+
+export enum LayoutType {
+ LAYOUT_DEFAULT = 'default',
+ LAYOUT_ACCESS = 'access'
+}
+
+/**
+ * ONOS GUI - Layout service - connects to the Layout UI Extension app
+ */
+@Injectable()
+export class LayoutService {
+
+ constructor(
+ protected log: LogService,
+ protected wss: WebSocketService
+ ) {
+ this.log.debug('LayoutService constructed');
+ }
+
+ /**
+ * tell the server we want a new layout
+ * @param type The type of layout we want
+ */
+ changeLayout(type: LayoutType): void {
+ this.wss.sendEvent('doLayout', {
+ type: type
+ });
+ this.log.debug('Layout changed to', type);
+ }
+}
diff --git a/web/gui2-topo-lib/lib/panel/details/details.component.css b/web/gui2-topo-lib/lib/panel/details/details.component.css
new file mode 100644
index 0000000..05402c8
--- /dev/null
+++ b/web/gui2-topo-lib/lib/panel/details/details.component.css
@@ -0,0 +1,44 @@
+/*
+ * 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.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* --- Topo Details Panel --- */
+
+#topo2-p-detail {
+ padding: 16px;
+ opacity: 1;
+ right: 20px;
+ width: 260px;
+ top: 390px;
+}
+
+#topo2-p-detail div.actionBtns {
+ padding-top: 6px;
+}
+
+html[data-platform='iPad'] {
+ top: 386px;
+}
+
+.actionBtns .actionBtn {
+ display: inline-block;
+}
+.actionBtns .actionBtn svg {
+ width: 28px;
+ height: 28px;
+}
+
+div.actionBtns {
+ padding-top: 6px;
+}
\ No newline at end of file
diff --git a/web/gui2-topo-lib/lib/panel/details/details.component.html b/web/gui2-topo-lib/lib/panel/details/details.component.html
new file mode 100644
index 0000000..5421776
--- /dev/null
+++ b/web/gui2-topo-lib/lib/panel/details/details.component.html
@@ -0,0 +1,80 @@
+<!--
+~ 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.
+~ You may obtain a copy of the License at
+~
+~ http://www.apache.org/licenses/LICENSE-2.0
+~
+~ Unless required by applicable law or agreed to in writing, software
+~ distributed under the License is distributed on an "AS IS" BASIS,
+~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+~ See the License for the specific language governing permissions and
+~ limitations under the License.
+-->
+<div id="topo2-p-detail" class="floatpanel topo2-p"
+ [@detailsPanelState]="on && selectedNodes.length > 0">
+ <!-- Template explanation - Create a HTML header which has an SVG icon along
+ side title text. -->
+ <div class="header">
+ <div class="icon clickable">
+ <onos-icon
+ [iconSize]="26"
+ [iconId]="showDetails?.glyphId">
+ </onos-icon>
+ </div>
+ <h2 class="clickable">{{ showDetails?.title }}</h2>
+ </div>
+ <div class="body">
+ <table>
+ <tbody>
+ <!-- Template explanation - Inside a HTML table, create a row per
+ item in the propOrder array returned through the WSS showDetails.
+ If the row name contains only '-' then draw a horiz rule otherwise
+ create a cell for the name and another for the value -->
+ <tr *ngFor="let p of showDetails?.propOrder">
+ <td *ngIf="showDetails?.propLabels[p] !== '-'"
+ class="label">{{showDetails?.propLabels[p]}} :</td>
+ <td *ngIf="showDetails?.propLabels[p] !== '-'"
+ class="value">{{ showDetails?.propValues[p]}}</td>
+ <!-- If the label is '-' then insert a horiz line -->
+ <td *ngIf="showDetails?.propLabels[p] === '-'"
+ colspan="2"><hr></td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ <div class="footer">
+ <hr>
+ <div class="actionBtns">
+ <!-- Template explanation - Inside the panel footer, create an SVG icon
+ per entry in the buttons array returned from the WSS showDetails
+ The icons used here are loaded in the ForceSvgComponent
+ -->
+ <div *ngFor="let btn of showDetails?.buttons" class="actionBtn">
+ <onos-icon id="topo2-p-detail-core-{{ btn }}"
+ (click)="navto(buttonAttribs(btn).path)"
+ [iconSize]="25"
+ [iconId]="buttonAttribs(btn).gid"
+ [toolTip]="lionFnTopo(buttonAttribs(btn).tt)"
+ classes="button icon selected">
+ </onos-icon>
+ </div>
+ <div *ngIf="showDetails?.buttons?.includes('showDeviceView')" class="actionBtn">
+ <onos-icon id="topo2-p-detail-core-alarms"
+ (click)="navto('alarmTable')"
+ [iconSize]="25"
+ [iconId]="'clock'"
+ classes="button icon selected">
+ </onos-icon>
+ <onos-icon id="topo2-p-detail-core-pipeconf"
+ (click)="navto('pipeconf')"
+ [iconSize]="25"
+ [iconId]="'pipeconfTable'"
+ classes="button icon selected">
+ </onos-icon>
+ </div>
+ </div>
+ </div>
+</div>
diff --git a/web/gui2-topo-lib/lib/panel/details/details.component.spec.ts b/web/gui2-topo-lib/lib/panel/details/details.component.spec.ts
new file mode 100644
index 0000000..0648c46
--- /dev/null
+++ b/web/gui2-topo-lib/lib/panel/details/details.component.spec.ts
@@ -0,0 +1,103 @@
+/*
+ * 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.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ActivatedRoute, Params } from '@angular/router';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { of } from 'rxjs';
+import { DetailsComponent } from './details.component';
+
+import {
+ FnService, LionService,
+ LogService, IconComponent
+} from '../../../../gui2-fw-lib/public_api';
+import {RouterTestingModule} from '@angular/router/testing';
+
+class MockActivatedRoute extends ActivatedRoute {
+ constructor(params: Params) {
+ super();
+ this.queryParams = of(params);
+ }
+}
+
+/**
+ * ONOS GUI -- Topology View Details Panel-- Unit Tests
+ */
+describe('DetailsComponent', () => {
+ let fs: FnService;
+ let ar: MockActivatedRoute;
+ let windowMock: Window;
+ let logServiceSpy: jasmine.SpyObj<LogService>;
+ let component: DetailsComponent;
+ let fixture: ComponentFixture<DetailsComponent>;
+
+ const bundleObj = {
+ 'core.view.Flow': {
+ test: 'test1'
+ }
+ };
+ const mockLion = (key) => {
+ return bundleObj[key] || '%' + key + '%';
+ };
+
+ beforeEach(async(() => {
+ const logSpy = jasmine.createSpyObj('LogService', ['info', 'debug', 'warn', 'error']);
+ ar = new MockActivatedRoute({ 'debug': 'txrx' });
+
+ windowMock = <any>{
+ location: <any>{
+ hostname: 'foo',
+ host: 'foo',
+ port: '80',
+ protocol: 'http',
+ search: { debug: 'true' },
+ href: 'ws://foo:123/onos/ui/websock/path',
+ absUrl: 'ws://foo:123/onos/ui/websock/path'
+ }
+ };
+ fs = new FnService(ar, logSpy, windowMock);
+
+ TestBed.configureTestingModule({
+ imports: [ BrowserAnimationsModule, RouterTestingModule ],
+ declarations: [ DetailsComponent, IconComponent ],
+ providers: [
+ { provide: FnService, useValue: fs },
+ { provide: LogService, useValue: logSpy },
+ {
+ provide: LionService, useFactory: (() => {
+ return {
+ bundle: ((bundleId) => mockLion),
+ ubercache: new Array(),
+ loadCbs: new Map<string, () => void>([])
+ };
+ })
+ },
+ { provide: 'Window', useValue: windowMock },
+ ]
+ })
+ .compileComponents();
+ logServiceSpy = TestBed.get(LogService);
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(DetailsComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/web/gui2-topo-lib/lib/panel/details/details.component.ts b/web/gui2-topo-lib/lib/panel/details/details.component.ts
new file mode 100644
index 0000000..a0a2837
--- /dev/null
+++ b/web/gui2-topo-lib/lib/panel/details/details.component.ts
@@ -0,0 +1,361 @@
+/*
+ * 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.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import {Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges} from '@angular/core';
+import {animate, state, style, transition, trigger} from '@angular/animations';
+import {DetailsPanelBaseImpl, FnService, LionService, LogService, WebSocketService} from '../../../../gui2-fw-lib/public_api';
+import {Host, Link, LinkType, NodeType, UiElement} from '../../layer/forcesvg/models';
+import {Params, Router} from '@angular/router';
+
+
+interface ButtonAttrs {
+ gid: string;
+ tt: string;
+ path: string;
+}
+
+const SHOWDEVICEVIEW: ButtonAttrs = {
+ gid: 'deviceTable',
+ tt: 'tt_ctl_show_device',
+ path: 'device',
+};
+const SHOWFLOWVIEW: ButtonAttrs = {
+ gid: 'flowTable',
+ tt: 'title_flows',
+ path: 'flow',
+};
+const SHOWPORTVIEW: ButtonAttrs = {
+ gid: 'portTable',
+ tt: 'tt_ctl_show_port',
+ path: 'port',
+};
+const SHOWGROUPVIEW: ButtonAttrs = {
+ gid: 'groupTable',
+ tt: 'tt_ctl_show_group',
+ path: 'group',
+};
+const SHOWMETERVIEW: ButtonAttrs = {
+ gid: 'meterTable',
+ tt: 'tt_ctl_show_meter',
+ path: 'meter',
+};
+const SHOWPIPECONFVIEW: ButtonAttrs = {
+ gid: 'pipeconfTable',
+ tt: 'tt_ctl_show_pipeconf',
+ path: 'pipeconf',
+};
+const RELATEDINTENTS: ButtonAttrs = {
+ gid: 'm_relatedIntents',
+ tt: 'tr_btn_show_related_traffic',
+ path: 'relatedIntents',
+};
+const CREATEHOSTTOHOSTFLOW: ButtonAttrs = {
+ gid: 'm_endstation',
+ tt: 'tr_btn_create_h2h_flow',
+ path: 'create_h2h_flow',
+};
+const CREATEMULTISOURCEFLOW: ButtonAttrs = {
+ gid: 'm_flows',
+ tt: 'tr_btn_create_msrc_flow',
+ path: 'create_msrc_flow',
+};
+
+
+interface ShowDetails {
+ buttons: string[];
+ glyphId: string;
+ id: string;
+ navPath: string;
+ propLabels: Object;
+ propOrder: string[];
+ propValues: Object;
+ title: string;
+}
+/**
+ * ONOS GUI -- Topology Details Panel.
+ * Displays details of selected device. When no device is selected the panel slides
+ * off to the side and disappears
+ *
+ * This Panel is a child of the Topology component and it gets the 'selectedNodes'
+ * from there as an input component. See TopologyComponent.nodeSelected()
+ * The topology component gets these by listening to events from ForceSvgComponent
+ * which gets them in turn from Device, Host, SubRegion and Link components. This
+ * is so that each component respects the hierarchy
+ */
+@Component({
+ selector: 'onos-details',
+ templateUrl: './details.component.html',
+ styleUrls: [
+ './details.component.css', './details.theme.css',
+ '../../topology.common.css',
+ '../../../../gui2-fw-lib/lib/widget/panel.css',
+ '../../../../gui2-fw-lib/lib/widget/panel-theme.css'
+ ],
+ animations: [
+ trigger('detailsPanelState', [
+ state('true', style({
+ transform: 'translateX(0%)',
+ opacity: '1.0'
+ })),
+ state('false', style({
+ transform: 'translateX(100%)',
+ opacity: '0'
+ })),
+ transition('0 => 1', animate('100ms ease-in')),
+ transition('1 => 0', animate('100ms ease-out'))
+ ])
+ ]
+})
+export class DetailsComponent extends DetailsPanelBaseImpl implements OnInit, OnDestroy, OnChanges {
+ @Input() selectedNodes: UiElement[] = []; // Populated when user selects node or link
+ @Input() on: boolean = false; // Override the parent class attribute
+
+ // deferred localization strings
+ lionFnTopo; // Function
+ lionFnFlow; // Function for flow bundle
+ showDetails: ShowDetails; // Will be populated on callback. Cleared if nothing is selected
+
+ constructor(
+ protected fs: FnService,
+ protected log: LogService,
+ protected router: Router,
+ protected wss: WebSocketService,
+ private lion: LionService
+ ) {
+ super(fs, log, wss, 'topo');
+
+ if (this.lion.ubercache.length === 0) {
+ this.lionFnTopo = this.dummyLion;
+ this.lionFnFlow = this.dummyLion;
+ this.lion.loadCbs.set('detailscore', () => this.doLion());
+ } else {
+ this.doLion();
+ }
+
+ this.log.debug('Topo DetailsComponent constructed');
+ }
+
+ /**
+ * When the component is initializing set up the handler for callbacks of
+ * ShowDetails from the WSS. Set the variable showDetails when ever a callback
+ * is made
+ */
+ ngOnInit(): void {
+ this.wss.bindHandlers(new Map<string, (data) => void>([
+ ['showDetails', (data) => {
+ this.showDetails = data;
+ // this.log.debug('showDetails received', data);
+ }
+ ]
+ ]));
+ this.log.debug('Topo DetailsComponent initialized');
+ }
+
+ /**
+ * When the component is being unloaded then unbind the WSS handler.
+ */
+ ngOnDestroy(): void {
+ this.wss.unbindHandlers(['showDetails']);
+ this.log.debug('Topo DetailsComponent destroyed');
+ }
+
+ /**
+ * If changes are detected on the Input param selectedNode, call on WSS sendEvent
+ * and expect ShowDetails to be updated from data sent back from server.
+ *
+ * Note the difference in call to the WSS with requestDetails between a node
+ * and a link - the handling is done in TopologyViewMessageHandler#RequestDetails.process()
+ *
+ * When multiple items are selected fabricate the ShowDetails here, and
+ * present buttons that allow custom actions
+ *
+ * The WSS will call back asynchronously (see fn in ngOnInit())
+ *
+ * @param changes Simple Changes set of updates
+ */
+ ngOnChanges(changes: SimpleChanges): void {
+ if (changes['selectedNodes']) {
+ this.selectedNodes = changes['selectedNodes'].currentValue;
+ let type: any;
+ if (this.selectedNodes.length === 0) {
+ // Selection has been cleared
+ this.showDetails = <ShowDetails>{};
+ return;
+ } else if (this.selectedNodes.length > 1) {
+ // Don't send message to WSS just form dialog here
+ const propOrder: string[] = [];
+ const propValues: Object = {};
+ const propLabels: Object = {};
+ let numHosts: number = 0;
+ for (let i = 0; i < this.selectedNodes.length; i++) {
+ propOrder.push(i.toString());
+ propLabels[i.toString()] = i.toString();
+ propValues[i.toString()] = this.selectedNodes[i].id;
+ if (this.selectedNodes[i].hasOwnProperty('nodeType') &&
+ (<Host>this.selectedNodes[i]).nodeType === NodeType.HOST) {
+ numHosts++;
+ } else {
+ numHosts = -128; // Negate the whole thing so other buttons will not be shown
+ }
+ }
+ const buttons: string[] = [];
+ if (numHosts === 2) {
+ buttons.push('createHostToHostFlow');
+ } else if (numHosts > 2) {
+ buttons.push('createMultiSourceFlow');
+ }
+ buttons.push('relatedIntents');
+
+ this.showDetails = <ShowDetails>{
+ buttons: buttons,
+ glyphId: undefined,
+ id: 'multiple',
+ navPath: undefined,
+ propLabels: propLabels,
+ propOrder: propOrder,
+ propValues: propValues,
+ title: this.lionFnTopo('title_selected_items')
+ };
+ this.log.debug('Details panel generated from multiple devices', this.showDetails);
+ return;
+ }
+
+ // If only one thing has been selected then request details of that from the server
+ const selectedNode = this.selectedNodes[0];
+ if (selectedNode.hasOwnProperty('nodeType')) { // For Device, Host, SubRegion
+ type = (<Host>selectedNode).nodeType;
+ this.wss.sendEvent('requestDetails', {
+ id: selectedNode.id,
+ class: type,
+ });
+ } else if (selectedNode.hasOwnProperty('type')) { // Must be link
+ const link: Link = <Link>selectedNode;
+ if (<LinkType><unknown>LinkType[link.type] === LinkType.UiEdgeLink) { // Number based enum
+ this.wss.sendEvent('requestDetails', {
+ key: link.id,
+ class: 'link',
+ sourceId: link.epA,
+ targetId: Link.deviceNameFromEp(link.epB),
+ targetPort: link.portB,
+ isEdgeLink: true
+ });
+ } else {
+ this.wss.sendEvent('requestDetails', {
+ key: link.id,
+ class: 'link',
+ sourceId: Link.deviceNameFromEp(link.epA),
+ sourcePort: link.portA,
+ targetId: Link.deviceNameFromEp(link.epB),
+ targetPort: link.portB,
+ isEdgeLink: false
+ });
+ }
+ } else {
+ this.log.warn('Unexpected type for selected element', selectedNode);
+ }
+ }
+ }
+
+ /**
+ * Table of core button attributes to return per button icon
+ * @param btnName The name of the button
+ * @returns A structure with the button attributes
+ */
+ buttonAttribs(btnName: string): ButtonAttrs {
+ switch (btnName) {
+ case 'showDeviceView':
+ return SHOWDEVICEVIEW;
+ case 'showFlowView':
+ return SHOWFLOWVIEW;
+ case 'showPortView':
+ return SHOWPORTVIEW;
+ case 'showGroupView':
+ return SHOWGROUPVIEW;
+ case 'showMeterView':
+ return SHOWMETERVIEW;
+ case 'showPipeConfView':
+ return SHOWPIPECONFVIEW;
+ case 'relatedIntents':
+ return RELATEDINTENTS;
+ case 'createHostToHostFlow':
+ return CREATEHOSTTOHOSTFLOW;
+ case 'createMultiSourceFlow':
+ return CREATEMULTISOURCEFLOW;
+ default:
+ return <ButtonAttrs>{
+ gid: btnName,
+ path: btnName
+ };
+ }
+ }
+
+ /**
+ * Navigate using Angular Routing. Combines the parameters to generate a relative URL
+ * e.g. if params are 'meter', 'device' and 'null:0000000000001' then the
+ * navigation URL will become "http://localhost:4200/#/meter?devId=null:0000000000000002"
+ *
+ * When multiple hosts are selected other actions have to be accommodated
+ *
+ * @param path The path to navigate to
+ * @param navPath The parameter name to use
+ * @param selId the parameter value to use
+ */
+ navto(path: string): void {
+ this.log.debug('navigate to', path, 'for',
+ this.showDetails.navPath, '=', this.showDetails.id);
+
+ const ids: string[] = [];
+ Object.values(this.showDetails.propValues).forEach((v) => ids.push(v));
+ if (path === 'relatedIntents' && this.showDetails.id === 'multiple') {
+ this.wss.sendEvent('topo2RequestRelatedIntents', {
+ 'ids': ids,
+ 'hover': ''
+ });
+
+ } else if (path === 'create_h2h_flow' && this.showDetails.id === 'multiple') {
+ this.wss.sendEvent('topo2AddHostIntent', {
+ 'one': ids[0],
+ 'two': ids[1],
+ 'ids': ids
+ });
+
+ } else if (path === 'create_msrc_flow' && this.showDetails.id === 'multiple') {
+ // Should only happen when there are 3 or more ids
+ this.wss.sendEvent('topo2AddMultiSourceIntent', {
+ 'src': ids.slice(0, ids.length - 1),
+ 'dst': ids[ids.length - 1],
+ 'ids': ids
+ });
+
+ } else if (this.showDetails.id) {
+ let navPath = this.showDetails.navPath;
+ if (navPath === 'device') {
+ navPath = 'devId';
+ }
+ const queryPar: Params = {};
+ queryPar[navPath] = this.showDetails.id;
+ this.router.navigate([path], { queryParams: queryPar });
+ }
+ }
+
+ /**
+ * Read the LION bundle for Details panel and set up the lionFn
+ */
+ doLion() {
+ this.lionFnTopo = this.lion.bundle('core.view.Topo');
+ this.lionFnFlow = this.lion.bundle('core.view.Flow');
+ }
+
+}
diff --git a/web/gui2-topo-lib/lib/panel/details/details.theme.css b/web/gui2-topo-lib/lib/panel/details/details.theme.css
new file mode 100644
index 0000000..7ad72dd
--- /dev/null
+++ b/web/gui2-topo-lib/lib/panel/details/details.theme.css
@@ -0,0 +1,28 @@
+/*
+ * Copyright 2018-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.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* --- Topo Details Panel Theme --- */
+
+#topo2-p-detail svg {
+ background: none;
+}
+
+#topo2-p-detail .header svg .glyph {
+ fill: #c0242b;
+}
+
+.dark #topo2-p-detail .header svg .glyph {
+ fill: #91292f;
+}
\ No newline at end of file
diff --git a/web/gui2-topo-lib/lib/panel/instance/instance.component.css b/web/gui2-topo-lib/lib/panel/instance/instance.component.css
new file mode 100644
index 0000000..f335726
--- /dev/null
+++ b/web/gui2-topo-lib/lib/panel/instance/instance.component.css
@@ -0,0 +1,33 @@
+/*
+ * Copyright 2018-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.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* --- Topo Instance Panel --- */
+
+#topo-p-instance div.onosInst {
+ display: inline-block;
+ width: 170px;
+ height: 85px;
+ cursor: pointer;
+}
+
+#topo-p-instance svg text.instTitle {
+ font-size: 11pt;
+ font-weight: bold;
+ font-variant: small-caps;
+ text-transform: uppercase;
+}
+#topo-p-instance svg text.instLabel {
+ font-size: 10pt;
+}
\ No newline at end of file
diff --git a/web/gui2-topo-lib/lib/panel/instance/instance.component.html b/web/gui2-topo-lib/lib/panel/instance/instance.component.html
new file mode 100644
index 0000000..9f2ee1a
--- /dev/null
+++ b/web/gui2-topo-lib/lib/panel/instance/instance.component.html
@@ -0,0 +1,40 @@
+<!--
+~ Copyright 2018-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.
+~ You may obtain a copy of the License at
+~
+~ http://www.apache.org/licenses/LICENSE-2.0
+~
+~ Unless required by applicable law or agreed to in writing, software
+~ distributed under the License is distributed on an "AS IS" BASIS,
+~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+~ See the License for the specific language governing permissions and
+~ limitations under the License.
+-->
+<div id="topo-p-instance" class="floatpanel" [ngStyle]="{'left': '20px', 'top':divTopPx+'px', 'width': (onosInstances.length * 170)+'px', 'height': '85px'}" [@instancePanelState]="on">
+ <div *ngFor="let inst of onosInstances | keyvalue ; let i=index"
+ [ngClass]="['onosInst', inst.value.online?'online':'', inst.value.ready? 'ready': '', mastership===inst.value.id?'mastership':'', 'affinity']"
+ (click)="chooseMastership(inst.value.id)">
+ <svg xmlns="http://www.w3.org/2000/svg" width="170" height="85" viewBox="0 0 170 85">
+ <!-- The following blue-glow effect is applied (through CSS) when mastership style is activated on a rectangle -->
+ <filter x="-50%" y="-50%" width="200%" height="200%" id="blue-glow">
+ <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.7 0 0 0 1 0 "></feColorMatrix>
+ <feGaussianBlur stdDeviation="3" result="coloredBlur"></feGaussianBlur>
+ <feMerge>
+ <feMergeNode in="coloredBlur"></feMergeNode>
+ <feMergeNode in="SourceGraphic"></feMergeNode>
+ </feMerge>
+ </filter>
+ <rect x="5" y="5" width="160" height="30" [ngStyle]="{ 'fill': panelColour(i)}"></rect>
+ <text class="instTitle" x="48" y="27">{{ inst.value.id }}</text>
+ <rect x="5" y="35" width="160" height="45"></rect>
+ <text class="instLabel ip" x="48" y="55">{{ inst.value.ip }}</text>
+ <use width="20" height="20" class="glyph badgeIcon bird" xlink:href="#bird" transform="translate(15,10)"></use>
+ <use *ngIf="inst.value.ready" width="16" height="16" class="glyph overlay badgeIcon readyBadge" xlink:href="#checkMark" transform="translate(18,40)"></use>
+ <text class="instLabel ns" x="48" y="73">{{lionFn('devices')}} {{ inst.value.switches }}</text>
+ <use *ngIf="inst.value.uiAttached" width="24" height="24" class="glyph overlay badgeIcon uiBadge" xlink:href="#uiAttached" transform="translate(14,54)"></use>
+ </svg>
+ </div>
+</div>
diff --git a/web/gui2-topo-lib/lib/panel/instance/instance.component.spec.ts b/web/gui2-topo-lib/lib/panel/instance/instance.component.spec.ts
new file mode 100644
index 0000000..6b06753
--- /dev/null
+++ b/web/gui2-topo-lib/lib/panel/instance/instance.component.spec.ts
@@ -0,0 +1,84 @@
+/*
+ * Copyright 2018-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.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ActivatedRoute, Params } from '@angular/router';
+import { of } from 'rxjs';
+import { InstanceComponent } from './instance.component';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+import {
+ FnService,
+ LogService
+} from '../../../../gui2-fw-lib/public_api';
+
+class MockActivatedRoute extends ActivatedRoute {
+ constructor(params: Params) {
+ super();
+ this.queryParams = of(params);
+ }
+}
+
+/**
+ * ONOS GUI -- Topology View Instance Panel-- Unit Tests
+ */
+describe('InstanceComponent', () => {
+ let fs: FnService;
+ let ar: MockActivatedRoute;
+ let windowMock: Window;
+ let logServiceSpy: jasmine.SpyObj<LogService>;
+ let component: InstanceComponent;
+ let fixture: ComponentFixture<InstanceComponent>;
+
+ beforeEach(async(() => {
+ const logSpy = jasmine.createSpyObj('LogService', ['info', 'debug', 'warn', 'error']);
+ ar = new MockActivatedRoute({ 'debug': 'txrx' });
+
+ windowMock = <any>{
+ location: <any>{
+ hostname: 'foo',
+ host: 'foo',
+ port: '80',
+ protocol: 'http',
+ search: { debug: 'true' },
+ href: 'ws://foo:123/onos/ui/websock/path',
+ absUrl: 'ws://foo:123/onos/ui/websock/path'
+ }
+ };
+ fs = new FnService(ar, logSpy, windowMock);
+
+ TestBed.configureTestingModule({
+ imports: [ BrowserAnimationsModule ],
+ declarations: [ InstanceComponent ],
+ providers: [
+ { provide: FnService, useValue: fs },
+ { provide: LogService, useValue: logSpy },
+ { provide: 'Window', useValue: windowMock },
+ ]
+ })
+ .compileComponents();
+ logServiceSpy = TestBed.get(LogService);
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(InstanceComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/web/gui2-topo-lib/lib/panel/instance/instance.component.ts b/web/gui2-topo-lib/lib/panel/instance/instance.component.ts
new file mode 100644
index 0000000..53ecf12
--- /dev/null
+++ b/web/gui2-topo-lib/lib/panel/instance/instance.component.ts
@@ -0,0 +1,137 @@
+/*
+ * Copyright 2018-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.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import {
+ Component,
+ Input,
+ Output,
+ EventEmitter, OnChanges, SimpleChanges
+} from '@angular/core';
+import { animate, state, style, transition, trigger } from '@angular/animations';
+import {
+ LogService,
+ FnService,
+ PanelBaseImpl,
+ IconService,
+ SvgUtilService, LionService
+} from '../../../../gui2-fw-lib/public_api';
+
+/**
+ * A model of instance information that drives each panel
+ */
+export interface Instance {
+ id: string;
+ ip: string;
+ online: boolean;
+ ready: boolean;
+ switches: number;
+ uiAttached: boolean;
+}
+
+/**
+ * ONOS GUI -- Topology Instances Panel.
+ * Displays ONOS instances. The onosInstances Array gets updated by topology.service
+ * whenever a topo2AllInstances update arrives back on the WebSocket
+ *
+ * This emits a mastership event when the user clicks on an instance, to
+ * see the devices that it has mastership of.
+ */
+@Component({
+ selector: 'onos-instance',
+ templateUrl: './instance.component.html',
+ styleUrls: [
+ './instance.component.css', './instance.theme.css',
+ '../../topology.common.css',
+ '../../../../gui2-fw-lib/lib/widget/panel.css',
+ '../../../../gui2-fw-lib/lib/widget/panel-theme.css'
+ ],
+ animations: [
+ trigger('instancePanelState', [
+ state('true', style({
+ transform: 'translateX(0%)',
+ opacity: '1.0'
+ })),
+ state('false', style({
+ transform: 'translateX(-100%)',
+ opacity: '0.0'
+ })),
+ transition('0 => 1', animate('100ms ease-in')),
+ transition('1 => 0', animate('100ms ease-out'))
+ ])
+ ]
+})
+export class InstanceComponent extends PanelBaseImpl implements OnChanges {
+ @Input() onosInstances: Instance[] = [];
+ @Input() divTopPx: number = 100;
+ @Input() on: boolean = false; // Override the parent class attribute
+ @Output() mastershipEvent = new EventEmitter<string>();
+ public mastership: string;
+ lionFn; // Function
+
+ constructor(
+ protected fs: FnService,
+ protected log: LogService,
+ protected is: IconService,
+ protected sus: SvgUtilService,
+ private lion: LionService
+ ) {
+ super(fs, log);
+
+ if (this.lion.ubercache.length === 0) {
+ this.lionFn = this.dummyLion;
+ this.lion.loadCbs.set('topo-inst', () => this.doLion());
+ } else {
+ this.doLion();
+ }
+ this.log.debug('InstanceComponent constructed');
+ }
+
+ ngOnChanges(changes: SimpleChanges): void {
+ if (changes['onosInstances']) {
+ this.onosInstances = <Instance[]>changes['onosInstances'].currentValue;
+ }
+ }
+
+ /**
+ * Get a colour for the banner of the nth panel
+ * @param idx The index of the panel (0-6)
+ */
+ panelColour(idx: number): string {
+ return this.sus.cat7().getColor(idx, false, '');
+ }
+
+ /**
+ * Toggle the display of mastership
+ * If the same instance is clicked a second time then cancel display of mastership
+ * @param instId The instance to display mastership for
+ */
+ chooseMastership(instId: string): void {
+ if (this.mastership === instId) {
+ this.mastership = undefined;
+ } else {
+ this.mastership = instId;
+ }
+ this.mastershipEvent.emit(this.mastership);
+ this.log.debug('Instance', this.mastership, 'chosen on GUI');
+ }
+
+ /**
+ * Read the LION bundle for Details panel and set up the lionFn
+ */
+ doLion() {
+ this.lionFn = this.lion.bundle('core.view.Topo');
+
+ }
+}
diff --git a/web/gui2-topo-lib/lib/panel/instance/instance.theme.css b/web/gui2-topo-lib/lib/panel/instance/instance.theme.css
new file mode 100644
index 0000000..3be7bdd
--- /dev/null
+++ b/web/gui2-topo-lib/lib/panel/instance/instance.theme.css
@@ -0,0 +1,152 @@
+/*
+ * Copyright 2018-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.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* --- Topo Instance Panel --- */
+
+#topo-p-instance svg rect {
+ stroke-width: 0;
+ fill: #fbfbfb;
+}
+
+/* body of an instance */
+#topo-p-instance .online svg rect {
+ opacity: 1;
+ fill: #fbfbfb;
+}
+
+#topo-p-instance svg .glyph {
+ fill: #fff;
+}
+#topo-p-instance .online svg .glyph {
+ fill: #fff;
+}
+.dark #topo-p-instance .online svg .glyph.overlay {
+ fill: #fff;
+}
+
+/* offline */
+#topo-p-instance svg .badgeIcon {
+ opacity: 0.4;
+ fill: #939598;
+}
+
+/* online */
+#topo-p-instance .online svg .badgeIcon {
+ opacity: 1.0;
+ fill: #939598;
+}
+#topo-p-instance .online svg .badgeIcon.bird {
+ fill: #ffffff;
+}
+
+#topo-p-instance svg .readyBadge {
+ visibility: hidden;
+}
+#topo-p-instance .ready svg .readyBadge {
+ visibility: visible;
+}
+
+#topo-p-instance svg text {
+ text-anchor: start;
+ opacity: 0.5;
+ fill: #3c3a3a;
+}
+
+#topo-p-instance .online svg text {
+ opacity: 1.0;
+ fill: #3c3a3a;
+}
+
+#topo-p-instance .onosInst.mastership {
+ opacity: 0.3;
+}
+#topo-p-instance .onosInst.mastership.affinity {
+ opacity: 1.0;
+}
+#topo-p-instance .onosInst.mastership.affinity svg rect {
+ filter: url(#blue-glow);
+}
+
+.firefox #topo-p-instance .onosInst.mastership.affinity svg rect {
+ filter: url(#blue-glow);
+}
+
+.dark #topo-p-instance {
+ background-color: #2f313c;
+ color: #c2c2b7;
+ border: 1px solid #364144;
+
+}
+
+.dark #topo-p-instance svg rect {
+ stroke-width: 0;
+ fill: #525660;
+}
+
+/* body of an instance */
+.dark #topo-p-instance .online svg rect {
+ opacity: 1;
+ fill: #838992;
+}
+
+.dark #topo-p-instance svg .glyph {
+ fill: #ddd;
+}
+.dark #topo-p-instance .online svg .glyph {
+ fill: #fff;
+}
+.dark #topo-p-instance .online svg .glyph.overlay {
+ fill: #c7c7c7;
+}
+
+/* offline */
+.dark #topo-p-instance svg .badgeIcon {
+ opacity: 0.4;
+ fill: #939598;
+}
+
+/* online */
+.dark #topo-p-instance .online svg .badgeIcon {
+ opacity: 1.0;
+ fill: #939598;
+}
+.dark #topo-p-instance .online svg .badgeIcon.bird {
+ fill: #ffffff;
+}
+
+.dark #topo-p-instance svg text {
+ text-anchor: start;
+ opacity: 0.5;
+ fill: #aaa;
+}
+
+.dark #topo-p-instance .online svg text {
+ opacity: 1.0;
+ fill: #fff;
+}
+
+.dark #topo-p-instance .onosInst.mastership {
+ opacity: 0.3;
+}
+.dark #topo-p-instance .onosInst.mastership.affinity {
+ opacity: 1.0;
+}
+.dark #topo-p-instance .onosInst.mastership.affinity svg rect {
+ filter: url(#blue-glow);
+}
+
+.dark.firefox #topo-p-instance .onosInst.mastership.affinity svg rect {
+ filter: url(#blue-glow);
+}
\ No newline at end of file
diff --git a/web/gui2-topo-lib/lib/panel/mapselector/mapselector.component.css b/web/gui2-topo-lib/lib/panel/mapselector/mapselector.component.css
new file mode 100644
index 0000000..59c0d78
--- /dev/null
+++ b/web/gui2-topo-lib/lib/panel/mapselector/mapselector.component.css
@@ -0,0 +1,35 @@
+/*
+ * 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.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * ONOS GUI -- Topology Map Selector -- CSS file
+ */
+.dialog h2 {
+ margin: 0;
+ word-wrap: break-word;
+ display: inline-block;
+ width: 210px;
+ vertical-align: middle;
+}
+
+.dialog .dialog-button {
+ display: inline-block;
+ cursor: pointer;
+ height: 20px;
+ padding: 6px 8px 2px 8px;
+ margin: 4px;
+ float: right;
+}
diff --git a/web/gui2-topo-lib/lib/panel/mapselector/mapselector.component.html b/web/gui2-topo-lib/lib/panel/mapselector/mapselector.component.html
new file mode 100644
index 0000000..579a43b
--- /dev/null
+++ b/web/gui2-topo-lib/lib/panel/mapselector/mapselector.component.html
@@ -0,0 +1,33 @@
+<!--
+~ 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.
+~ You may obtain a copy of the License at
+~
+~ http://www.apache.org/licenses/LICENSE-2.0
+~
+~ Unless required by applicable law or agreed to in writing, software
+~ distributed under the License is distributed on an "AS IS" BASIS,
+~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+~ See the License for the specific language governing permissions and
+~ limitations under the License.
+-->
+<div id="topo-p-dialog"
+ class="floatpanel dialog topo-p"
+ style="opacity: 1; left: 20px; width: 300px;">
+ <div class="header">
+ <h2>{{ lionFn('title_select_map') }}</h2>
+ </div>
+ <div class="map-list">
+ <form [formGroup]="form">
+ <select formControlName="mapid">
+ <option *ngFor="let o of mapSelectorResponse.order" [ngValue]="o">{{ mapSelectorResponse.maps[o]['description'] }}</option>
+ </select>
+ </form>
+ </div>
+ <div class="footer">
+ <div class="dialog-button" (click)="choice(form.value)">{{ lionFn('ok') }}</div>
+ <div class="dialog-button" (click)="choice(undefined)">{{ lionFn('close') }}</div>
+ </div>
+</div>
diff --git a/web/gui2-topo-lib/lib/panel/mapselector/mapselector.component.spec.ts b/web/gui2-topo-lib/lib/panel/mapselector/mapselector.component.spec.ts
new file mode 100644
index 0000000..3a30421
--- /dev/null
+++ b/web/gui2-topo-lib/lib/panel/mapselector/mapselector.component.spec.ts
@@ -0,0 +1,98 @@
+/*
+ * 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.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an 'AS IS' BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MapSelectorComponent } from './mapselector.component';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {ActivatedRoute, Params} from '@angular/router';
+import {of} from 'rxjs';
+import {FnService, LogService} from '../../../../gui2-fw-lib/public_api';
+
+class MockActivatedRoute extends ActivatedRoute {
+ constructor(params: Params) {
+ super();
+ this.queryParams = of(params);
+ }
+}
+
+describe('MapSelectorComponent', () => {
+ let fs: FnService;
+ let ar: MockActivatedRoute;
+ let windowMock: Window;
+ let logServiceSpy: jasmine.SpyObj<LogService>;
+ let component: MapSelectorComponent;
+ let fixture: ComponentFixture<MapSelectorComponent>;
+
+ beforeEach(async(() => {
+ const logSpy = jasmine.createSpyObj('LogService', ['info', 'debug', 'warn', 'error']);
+ ar = new MockActivatedRoute({ 'debug': 'txrx' });
+
+ windowMock = <any>{
+ location: <any>{
+ hostname: 'foo',
+ host: 'foo',
+ port: '80',
+ protocol: 'http',
+ search: { debug: 'true' },
+ href: 'ws://foo:123/onos/ui/websock/path',
+ absUrl: 'ws://foo:123/onos/ui/websock/path'
+ }
+ };
+ fs = new FnService(ar, logSpy, windowMock);
+
+ TestBed.configureTestingModule({
+ imports: [
+ FormsModule,
+ ReactiveFormsModule
+ ],
+ declarations: [ MapSelectorComponent ],
+ providers: [
+ { provide: FnService, useValue: fs },
+ { provide: LogService, useValue: logSpy },
+ { provide: 'Window', useValue: windowMock },
+ ]
+ })
+ .compileComponents();
+ logServiceSpy = TestBed.get(LogService);
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(MapSelectorComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
+
+// Expecting WebSocket request and response similar to:
+//
+// {"event":"mapSelectorRequest","payload":{}}
+//
+// {
+// "event": "mapSelectorResponse",
+// "payload": {
+// "order": ["australia", "americas", "n_america", "s_america", "usa", "bayareaGEO",
+// "europe", "italy", "uk", "japan", "s_korea", "taiwan", "africa", "oceania", "asia"],
+// "maps": {
+// "australia": {
+// "id": "australia",
+// "description": "Australia",
+// "filePath": "*australia",
+// "scale": 1.0
+// },
diff --git a/web/gui2-topo-lib/lib/panel/mapselector/mapselector.component.ts b/web/gui2-topo-lib/lib/panel/mapselector/mapselector.component.ts
new file mode 100644
index 0000000..e9cb56a
--- /dev/null
+++ b/web/gui2-topo-lib/lib/panel/mapselector/mapselector.component.ts
@@ -0,0 +1,90 @@
+
+import {
+ Component, EventEmitter,
+ OnDestroy,
+ OnInit, Output,
+} from '@angular/core';
+import {
+ DetailsPanelBaseImpl,
+ FnService,
+ LionService,
+ LogService,
+ WebSocketService
+} from '../../../../gui2-fw-lib/public_api';
+import {FormControl, FormGroup} from '@angular/forms';
+import { MapObject } from '../../layer/maputils';
+
+interface MapSelection {
+ order: string[];
+ maps: Object[];
+}
+
+@Component({
+ selector: 'onos-mapselector',
+ templateUrl: './mapselector.component.html',
+ styleUrls: ['./mapselector.component.css', './mapselector.theme.css', '../../topology.common.css']
+})
+export class MapSelectorComponent extends DetailsPanelBaseImpl implements OnInit, OnDestroy {
+ @Output() chosenMap = new EventEmitter<MapObject>();
+ lionFn; // Function
+ mapSelectorResponse: MapSelection = <MapSelection>{
+ order: [],
+ maps: []
+ };
+ form = new FormGroup({
+ mapid: new FormControl(this.mapSelectorResponse.order[0]),
+ });
+
+ constructor(
+ protected fs: FnService,
+ protected log: LogService,
+ protected wss: WebSocketService,
+ private lion: LionService
+ ) {
+ super(fs, log, wss, 'topo');
+
+ if (this.lion.ubercache.length === 0) {
+ this.lionFn = this.dummyLion;
+ this.lion.loadCbs.set('topoms', () => this.doLion());
+ } else {
+ this.doLion();
+ }
+
+ this.log.debug('Topo MapSelectorComponent constructed');
+ }
+
+ ngOnInit() {
+ this.wss.bindHandlers(new Map<string, (data) => void>([
+ ['mapSelectorResponse', (data) => {
+ this.mapSelectorResponse = data;
+ this.form.setValue({'mapid': this.mapSelectorResponse.order[0]});
+ }
+ ]
+ ]));
+ this.wss.sendEvent('mapSelectorRequest', {});
+ this.log.debug('Topo MapSelectorComponent initialized');
+ }
+
+ /**
+ * When the component is being unloaded then unbind the WSS handler.
+ */
+ ngOnDestroy(): void {
+ this.wss.unbindHandlers(['mapSelectorResponse']);
+ this.log.debug('Topo MapSelectorComponent destroyed');
+ }
+
+ /**
+ * Read the LION bundle for panel and set up the lionFn
+ */
+ doLion() {
+ this.lionFn = this.lion.bundle('core.view.Topo');
+ }
+
+ choice(mapid: Object): void {
+ if (mapid) {
+ this.chosenMap.emit(<MapObject>this.mapSelectorResponse.maps[mapid['mapid']]);
+ } else {
+ this.chosenMap.emit(<MapObject>{});
+ }
+ }
+}
diff --git a/web/gui2-topo-lib/lib/panel/mapselector/mapselector.theme.css b/web/gui2-topo-lib/lib/panel/mapselector/mapselector.theme.css
new file mode 100644
index 0000000..0ef1538
--- /dev/null
+++ b/web/gui2-topo-lib/lib/panel/mapselector/mapselector.theme.css
@@ -0,0 +1,33 @@
+/*
+ * 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.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * ONOS GUI -- Topology Map Selector theme -- CSS file
+ */
+
+/*.light */
+.dialog .dialog-button {
+ background-color: #518ecc;
+ color: white;
+}
+
+
+/* ========== DARK Theme ========== */
+
+.dark .dialog .dialog-button {
+ background-color: #345e85;
+ color: #cccccd;
+}
diff --git a/web/gui2-topo-lib/lib/panel/summary/summary.component.css b/web/gui2-topo-lib/lib/panel/summary/summary.component.css
new file mode 100644
index 0000000..b4bd37b
--- /dev/null
+++ b/web/gui2-topo-lib/lib/panel/summary/summary.component.css
@@ -0,0 +1,36 @@
+/*
+ * Copyright 2016-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.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+
+/*
+ ONOS GUI -- Topology Summary Panel -- CSS file
+ */
+#topo2-p-summary {
+ padding: 16px;
+ top: 100px;
+}
+
+#topo2-p-summary td.label {
+ width: 50%;
+}
+
+#topo2-p div.header div.icon {
+ padding: 10px
+}
+
+#topo2-p-summary div.header h2 {
+ padding: 10px;
+}
\ No newline at end of file
diff --git a/web/gui2-topo-lib/lib/panel/summary/summary.component.html b/web/gui2-topo-lib/lib/panel/summary/summary.component.html
new file mode 100644
index 0000000..d781418
--- /dev/null
+++ b/web/gui2-topo-lib/lib/panel/summary/summary.component.html
@@ -0,0 +1,20 @@
+<!--
+~ Copyright 2018-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.
+~ You may obtain a copy of the License at
+~
+~ http://www.apache.org/licenses/LICENSE-2.0
+~
+~ Unless required by applicable law or agreed to in writing, software
+~ distributed under the License is distributed on an "AS IS" BASIS,
+~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+~ See the License for the specific language governing permissions and
+~ limitations under the License.
+-->
+<div id="topo2-p-summary" class="floatpanel topo2-p"
+ style="opacity: 1; right: 20px; width: 260px;" [@summaryPanelState]="on">
+ <!-- everything else is filled in dynamically by listProps() and the
+ response showSummary received from the server -->
+</div>
\ No newline at end of file
diff --git a/web/gui2-topo-lib/lib/panel/summary/summary.component.spec.ts b/web/gui2-topo-lib/lib/panel/summary/summary.component.spec.ts
new file mode 100644
index 0000000..0a07d2e
--- /dev/null
+++ b/web/gui2-topo-lib/lib/panel/summary/summary.component.spec.ts
@@ -0,0 +1,84 @@
+/*
+ * Copyright 2018-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.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ActivatedRoute, Params } from '@angular/router';
+import { of } from 'rxjs';
+import { SummaryComponent } from './summary.component';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+import {
+ FnService,
+ LogService
+} from '../../../../gui2-fw-lib/public_api';
+
+class MockActivatedRoute extends ActivatedRoute {
+ constructor(params: Params) {
+ super();
+ this.queryParams = of(params);
+ }
+}
+
+/**
+ * ONOS GUI -- Topology View Summary Panel -- Unit Tests
+ */
+describe('SummaryComponent', () => {
+ let fs: FnService;
+ let ar: MockActivatedRoute;
+ let windowMock: Window;
+ let logServiceSpy: jasmine.SpyObj<LogService>;
+ let component: SummaryComponent;
+ let fixture: ComponentFixture<SummaryComponent>;
+
+ beforeEach(async(() => {
+ const logSpy = jasmine.createSpyObj('LogService', ['info', 'debug', 'warn', 'error']);
+ ar = new MockActivatedRoute({ 'debug': 'txrx' });
+
+ windowMock = <any>{
+ location: <any>{
+ hostname: 'foo',
+ host: 'foo',
+ port: '80',
+ protocol: 'http',
+ search: { debug: 'true' },
+ href: 'ws://foo:123/onos/ui/websock/path',
+ absUrl: 'ws://foo:123/onos/ui/websock/path'
+ }
+ };
+ fs = new FnService(ar, logSpy, windowMock);
+
+ TestBed.configureTestingModule({
+ imports: [ BrowserAnimationsModule ],
+ declarations: [ SummaryComponent ],
+ providers: [
+ { provide: FnService, useValue: fs },
+ { provide: LogService, useValue: logSpy },
+ { provide: 'Window', useValue: windowMock },
+ ]
+ })
+ .compileComponents();
+ logServiceSpy = TestBed.get(LogService);
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(SummaryComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/web/gui2-topo-lib/lib/panel/summary/summary.component.ts b/web/gui2-topo-lib/lib/panel/summary/summary.component.ts
new file mode 100644
index 0000000..0191cd9
--- /dev/null
+++ b/web/gui2-topo-lib/lib/panel/summary/summary.component.ts
@@ -0,0 +1,124 @@
+/*
+ * Copyright 2018-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.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import {
+ Component,
+ Input,
+ OnDestroy,
+ OnInit,
+ ViewEncapsulation
+} from '@angular/core';
+import { animate, state, style, transition, trigger } from '@angular/animations';
+import * as d3 from 'd3';
+import { TopoPanelBaseImpl } from '../topopanel.base';
+import {
+ LogService,
+ FnService,
+ WebSocketService,
+ GlyphService
+} from '../../../../gui2-fw-lib/public_api';
+
+export interface SummaryResponse {
+ title: string;
+}
+/**
+ * ONOS GUI -- Topology Summary Module.
+ * Defines modeling of ONOS Summary Panel.
+ * Note: This component uses the d3 DOM building technique from the old GUI - this
+ * is not the Angular way of building components and should be avoided generally
+ * See DetailsPanelComponent for a better way of doing this kind of thing
+ */
+@Component({
+ selector: 'onos-summary',
+ templateUrl: './summary.component.html',
+ styleUrls: [
+ './summary.component.css',
+ '../../topology.common.css', '../../topology.theme.css',
+ '../../../../gui2-fw-lib/lib/widget/panel.css',
+ '../../../../gui2-fw-lib/lib/widget/panel-theme.css'
+ ],
+ encapsulation: ViewEncapsulation.None,
+ animations: [
+ trigger('summaryPanelState', [
+ state('true', style({
+ transform: 'translateX(0%)',
+ opacity: '100'
+ })),
+ state('false', style({
+ transform: 'translateX(100%)',
+ opacity: '0'
+ })),
+ transition('0 => 1', animate('100ms ease-in')),
+ transition('1 => 0', animate('100ms ease-out'))
+ ])
+ ]
+})
+export class SummaryComponent extends TopoPanelBaseImpl implements OnInit, OnDestroy {
+ @Input() on: boolean = false; // Override the parent class attribute
+ private handlers: string[] = [];
+ private resp: string = 'showSummary';
+ private summaryData: SummaryResponse;
+
+ constructor(
+ protected fs: FnService,
+ protected log: LogService,
+ protected wss: WebSocketService,
+ protected gs: GlyphService
+ ) {
+ super(fs, log, 'summary');
+ this.summaryData = <SummaryResponse>{};
+ this.log.debug('SummaryComponent constructed');
+ }
+
+
+ ngOnInit() {
+ this.wss.bindHandlers(new Map<string, (data) => void>([
+ [this.resp, (data) => this.handleSummaryData(data)]
+ ]));
+ this.handlers.push(this.resp);
+
+ this.init(d3.select('#topo2-p-summary'));
+
+ this.wss.sendEvent('requestSummary', {});
+ }
+
+ ngOnDestroy() {
+ this.wss.sendEvent('cancelSummary', {});
+ this.wss.unbindHandlers(this.handlers);
+ }
+
+ handleSummaryData(data: SummaryResponse) {
+ this.summaryData = data;
+ this.render();
+ }
+
+ private render() {
+ let endedWithSeparator;
+
+ this.emptyRegions();
+
+ const svg = this.appendToHeader('div')
+ .classed('icon', true)
+ .append('svg');
+ const title = this.appendToHeader('h2');
+ const table = this.appendToBody('table');
+ const tbody = table.append('tbody');
+
+ title.text(this.summaryData.title);
+ this.gs.addGlyph(svg, 'bird', 24, 0, [1, 1]);
+ endedWithSeparator = this.listProps(tbody, this.summaryData);
+ // TODO : review whether we need to use/store end-with-sep state
+ }
+}
diff --git a/web/gui2-topo-lib/lib/panel/toolbar/button.css b/web/gui2-topo-lib/lib/panel/toolbar/button.css
new file mode 100644
index 0000000..1effdbc
--- /dev/null
+++ b/web/gui2-topo-lib/lib/panel/toolbar/button.css
@@ -0,0 +1,41 @@
+/*
+ * Copyright 2015-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.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ ONOS GUI -- Button Service (layout) -- CSS file
+ */
+
+.button,
+.toggleButton,
+.radioSet {
+ display: inline-block;
+ padding: 0 4px;
+}
+.radioButton {
+ display: inline-block;
+ padding: 0 2px;
+}
+
+.button svg.embeddedIcon,
+.toggleButton svg.embeddedIcon,
+.radioButton svg.embeddedIcon {
+ cursor: pointer;
+}
+.button svg.embeddedIcon .icon rect,
+.toggleButton svg.embeddedIcon .icon rect,
+.radioButton svg.embeddedIcon .icon rect{
+ stroke: none;
+}
diff --git a/web/gui2-topo-lib/lib/panel/toolbar/toolbar.component.css b/web/gui2-topo-lib/lib/panel/toolbar/toolbar.component.css
new file mode 100644
index 0000000..449d436
--- /dev/null
+++ b/web/gui2-topo-lib/lib/panel/toolbar/toolbar.component.css
@@ -0,0 +1,68 @@
+/*
+ * Copyright 2016-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.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+
+/*
+ ONOS GUI -- Topology Toolbar Panel -- CSS file
+ */
+
+
+
+div.tbar-arrow {
+ position: absolute;
+ top: 53%;
+ left: 96%;
+ margin-right: -4%;
+ transform: translate(-50%, -50%);
+ cursor: pointer;
+}
+.safari div.tbar-arrow {
+ top: 46%;
+}
+.firefox div.tbar-arrow {
+ left: 97%;
+ margin-right: -3%;
+}
+
+.toolbar {
+ line-height: 125%;
+}
+.tbar-row {
+ display: inline-block;
+}
+
+.separator {
+ border: 1px solid;
+ margin: 0 4px 0 4px;
+ display: inline-block;
+ height: 23px;
+ width: 0;
+}
+
+#toolbar-topo2-toolbar {
+ padding: 6px;
+}
+
+#toolbar-topo2-toolbar .tbar-row.right {
+ width: 100%;
+}
+
+#toolbar-topo2-toolbar .tbar-row-text {
+ height: 21px;
+ text-align: right;
+ padding: 8px 60px 0 0;
+ font-style: italic;
+}
\ No newline at end of file
diff --git a/web/gui2-topo-lib/lib/panel/toolbar/toolbar.component.html b/web/gui2-topo-lib/lib/panel/toolbar/toolbar.component.html
new file mode 100644
index 0000000..a0e2d23
--- /dev/null
+++ b/web/gui2-topo-lib/lib/panel/toolbar/toolbar.component.html
@@ -0,0 +1,88 @@
+<!--
+~ Copyright 2018-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.
+~ You may obtain a copy of the License at
+~
+~ http://www.apache.org/licenses/LICENSE-2.0
+~
+~ Unless required by applicable law or agreed to in writing, software
+~ distributed under the License is distributed on an "AS IS" BASIS,
+~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+~ See the License for the specific language governing permissions and
+~ limitations under the License.
+-->
+<div id="toolbar-topo2-toolbar" class="floatpanel toolbar" [@toolbarState]="on"
+ style="opacity: 1; left: 0px; width: 286px; top: auto; bottom: 10px;">
+ <div class="tbar-arrow" (click)="on =! on">
+ <onos-icon [iconSize]="10" [iconId]="on?'triangleLeft':'triangleRight'"></onos-icon>
+ </div>
+ <div class="tbar-row ctrl-btns">
+ <div class="toggleButton" id="toolbar-topo2-toolbar-topo2-instance-tog" (click)="buttonClicked('instance-tog')">
+ <onos-icon [iconSize]="25" iconId="m_uiAttached" [toolTip]="lionFn('tbtt_tog_instances')" [classes]="['toggleButton', instancesVisible?'selected':'']"></onos-icon>
+ </div>
+ <div class="toggleButton" id="toolbar-topo2-toolbar-topo2-summary-tog" (click)="buttonClicked('summary-tog')">
+ <onos-icon [iconSize]="25" iconId="m_summary" [toolTip]="lionFn('tbtt_tog_summary')" [classes]="['toggleButton', summaryVisible?'selected':'']"></onos-icon>
+ </div>
+ <div class="toggleButton" id="toolbar-topo2-toolbar-details-tog" (click)="buttonClicked('details-tog')">
+ <onos-icon [iconSize]="25" iconId="m_details" [toolTip]="lionFn('tbtt_tog_use_detail')" [classes]="['toggleButton', detailsVisible?'selected':'']"></onos-icon>
+ </div>
+ <div class="separator"></div>
+ <div class="toggleButton" id="toolbar-topo2-toolbar-hosts-tog" (click)="buttonClicked('hosts-tog')">
+ <onos-icon [iconSize]="25" iconId="m_endstation" [toolTip]="lionFn('tbtt_tog_host')" [classes]="['toggleButton', hostsVisible?'selected':'']"></onos-icon>
+ </div>
+ <div class="toggleButton" id="toolbar-topo2-toolbar-offline-tog" (click)="buttonClicked('offline-tog')">
+ <onos-icon [iconSize]="25" iconId="m_switch" [toolTip]="lionFn('tbtt_tog_offline')" classes="toggleButton selected"></onos-icon>
+ </div>
+ <div class="toggleButton" id="toolbar-topo2-toolbar-topo2-ports-tog" (click)="buttonClicked('ports-tog')">
+ <onos-icon [iconSize]="25" iconId="m_ports" [toolTip]="lionFn('tbtt_tog_porthi')" classes="toggleButton selected" [classes]="['toggleButton', portsVisible?'selected':'']"></onos-icon>
+ </div>
+ <div class="toggleButton" id="toolbar-topo2-toolbar-topo2-bkgrnd-tog" (click)="buttonClicked('bkgrnd-tog')">
+ <onos-icon [iconSize]="25" iconId="m_map" [toolTip]="lionFn('tbtt_tog_map')" classes="toggleButton selected" [classes]="['toggleButton', backgroundVisible?'selected':'']"></onos-icon>
+ </div>
+ <div class="toggleButton" id="toolbar-topo2-toolbar-topo2-bkgrnd-sel" (click)="buttonClicked('bkgrnd-sel')">
+ <onos-icon [iconSize]="25" iconId="m_selectMap" [toolTip]="lionFn('tbtt_sel_map')" classes="button"></onos-icon>
+ </div>
+ </div>
+ <br>
+ <div class="tbar-row">
+ <div class="button" id="toolbar-topo2-toolbar-topo2-cycleLabels-btn" (click)="buttonClicked('cycleLabels-btn')">
+ <onos-icon [iconSize]="25" iconId="m_cycleLabels" [toolTip]="lionFn('tbtt_cyc_dev_labs')" classes="button"></onos-icon>
+ </div>
+ <div class="button" id="toolbar-topo2-toolbar-topo2-resetZoom-btn" (click)="buttonClicked('resetZoom-btn')">
+ <onos-icon [iconSize]="25" iconId="m_resetZoom" [toolTip]="lionFn('tbtt_reset_zoom')" classes="button"></onos-icon>
+ </div>
+ <div class="separator"></div>
+ <div class="button" id="toolbar-topo2-toolbar-topo2-eqMaster-btn" (click)="buttonClicked('eqMaster-btn')">
+ <onos-icon [iconSize]="25" iconId="m_eqMaster" [toolTip]="lionFn('tbtt_eq_master')" classes="button"></onos-icon>
+ </div>
+ <div class="separator"></div>
+ <div class="radioSet" id="toolbar-topo2-traffic">
+ <div class="radioButton selected" id="toolbar-topo2-cancel-traffic" (click)="buttonClicked('cancel-traffic')">
+ <onos-icon [iconSize]="25" iconId="m_unknown" [toolTip]="lionFn('tr_btn_cancel_monitoring')" classes="radioButton selected"></onos-icon>
+ </div>
+ <div class="radioButton" id="toolbar-topo2-all-traffic" (click)="buttonClicked('all-traffic')">
+ <onos-icon [iconSize]="25" iconId="m_allTraffic" [toolTip]="lionFn('tr_btn_show_related_traffic')" classes="radioButton selected"></onos-icon>
+ </div>
+ </div>
+ <div class="separator"></div>
+ <div class="button" id="toolbar-topo2-toolbar-topo2-quickhelp" (click)="buttonClicked('quickhelp-btn')">
+ <onos-icon [iconSize]="25" iconId="query" [toolTip]="lionFn('qh_title')" classes="button"></onos-icon>
+ </div>
+ <div class="button" id="toolbar-topo2-toolbar-topo2-cycleGrid-btn" (click)="buttonClicked('cycleGridDisplay-btn')">
+ <onos-icon [iconSize]="25" iconId="m_cycleGridDisplay" [toolTip]="lionFn('tbtt_cyc_grid_display')" classes="button"></onos-icon>
+ </div>
+ </div>
+ <div class="tbar-row">
+ <div class="button" id="toolbar-topo2-toolbar-topo2-layout-default" (click)="buttonClicked('layout-default-btn')">
+ <onos-icon iconSize="25" iconId="m_fiberSwitch" toolTip="Default (force-based) layout" classes="button"></onos-icon>
+ </div>
+ <div class="button" id="toolbar-topo2-toolbar-topo2-layout-access" (click)="buttonClicked('layout-access-btn')">
+ <onos-icon iconSize="25" iconId="m_disjointPaths" toolTip="Access layout - separate service leafs" classes="button"></onos-icon>
+ </div>
+ <div class="button" id="toolbar-topo2-toolbar-topo2-alarms-tog" (click)="buttonClicked('alarms-tog')">
+ <onos-icon iconSize="25" iconId="clock" toolTip="Toggle Alarms display" classes="button" [classes]="['toggleButton', alarmsVisible?'selected':'']"></onos-icon>
+ </div>
+ </div>
+</div>
diff --git a/web/gui2-topo-lib/lib/panel/toolbar/toolbar.component.spec.ts b/web/gui2-topo-lib/lib/panel/toolbar/toolbar.component.spec.ts
new file mode 100644
index 0000000..b1dff0b
--- /dev/null
+++ b/web/gui2-topo-lib/lib/panel/toolbar/toolbar.component.spec.ts
@@ -0,0 +1,101 @@
+/*
+ * Copyright 2018-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.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ActivatedRoute, Params } from '@angular/router';
+import { of } from 'rxjs';
+import { ToolbarComponent } from './toolbar.component';
+
+import {
+ FnService, LionService,
+ LogService, IconComponent
+} from '../../../../gui2-fw-lib/public_api';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+
+class MockActivatedRoute extends ActivatedRoute {
+ constructor(params: Params) {
+ super();
+ this.queryParams = of(params);
+ }
+}
+
+/**
+ * ONOS GUI -- Topology View Topology Panel-- Unit Tests
+ */
+describe('ToolbarComponent', () => {
+ let fs: FnService;
+ let ar: MockActivatedRoute;
+ let windowMock: Window;
+ let logServiceSpy: jasmine.SpyObj<LogService>;
+ let component: ToolbarComponent;
+ let fixture: ComponentFixture<ToolbarComponent>;
+
+ const bundleObj = {
+ 'core.view.Topo': {
+ test: 'test1'
+ }
+ };
+ const mockLion = (key) => {
+ return bundleObj[key] || '%' + key + '%';
+ };
+
+ beforeEach(async(() => {
+ const logSpy = jasmine.createSpyObj('LogService', ['info', 'debug', 'warn', 'error']);
+ ar = new MockActivatedRoute({ 'debug': 'txrx' });
+
+ windowMock = <any>{
+ location: <any>{
+ hostname: 'foo',
+ host: 'foo',
+ port: '80',
+ protocol: 'http',
+ search: { debug: 'true' },
+ href: 'ws://foo:123/onos/ui/websock/path',
+ absUrl: 'ws://foo:123/onos/ui/websock/path'
+ }
+ };
+ fs = new FnService(ar, logSpy, windowMock);
+ TestBed.configureTestingModule({
+ imports: [ BrowserAnimationsModule ],
+ declarations: [ ToolbarComponent, IconComponent ],
+ providers: [
+ { provide: FnService, useValue: fs },
+ { provide: LogService, useValue: logSpy },
+ {
+ provide: LionService, useFactory: (() => {
+ return {
+ bundle: ((bundleId) => mockLion),
+ ubercache: new Array(),
+ loadCbs: new Map<string, () => void>([])
+ };
+ })
+ },
+ { provide: 'Window', useValue: windowMock },
+ ]
+ })
+ .compileComponents();
+ logServiceSpy = TestBed.get(LogService);
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(ToolbarComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/web/gui2-topo-lib/lib/panel/toolbar/toolbar.component.ts b/web/gui2-topo-lib/lib/panel/toolbar/toolbar.component.ts
new file mode 100644
index 0000000..725cbb1
--- /dev/null
+++ b/web/gui2-topo-lib/lib/panel/toolbar/toolbar.component.ts
@@ -0,0 +1,147 @@
+/*
+ * 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.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+import {
+ LogService,
+ FnService,
+ PanelBaseImpl, LionService
+} from '../../../../gui2-fw-lib/public_api';
+
+import {animate, state, style, transition, trigger} from '@angular/animations';
+
+export const INSTANCE_TOGGLE = 'instance-tog';
+export const SUMMARY_TOGGLE = 'summary-tog';
+export const DETAILS_TOGGLE = 'details-tog';
+export const HOSTS_TOGGLE = 'hosts-tog';
+export const OFFLINE_TOGGLE = 'offline-tog';
+export const PORTS_TOGGLE = 'ports-tog';
+export const BKGRND_TOGGLE = 'bkgrnd-tog';
+export const BKGRND_SELECT = 'bkgrnd-sel';
+export const CYCLELABELS_BTN = 'cycleLabels-btn';
+export const CYCLEHOSTLABEL_BTN = 'cycleHostLabel-btn';
+export const CYCLEGRIDDISPLAY_BTN = 'cycleGridDisplay-btn';
+export const RESETZOOM_BTN = 'resetZoom-btn';
+export const EQMASTER_BTN = 'eqMaster-btn';
+export const CANCEL_TRAFFIC = 'cancel-traffic';
+export const ALL_TRAFFIC = 'all-traffic';
+export const QUICKHELP_BTN = 'quickhelp-btn';
+export const LAYOUT_DEFAULT_BTN = 'layout-default-btn';
+export const LAYOUT_ACCESS_BTN = 'layout-access-btn';
+export const ALARMS_TOGGLE = 'alarms-tog';
+
+/*
+ ONOS GUI -- Topology Toolbar Module.
+ Defines modeling of ONOS toolbar.
+ */
+@Component({
+ selector: 'onos-toolbar',
+ templateUrl: './toolbar.component.html',
+ styleUrls: [
+ './toolbar.component.css', './toolbar.theme.css',
+ '../../topology.common.css',
+ '../../../../gui2-fw-lib/lib/widget/panel.css',
+ '../../../../gui2-fw-lib/lib/widget/panel-theme.css',
+ './button.css'
+ ],
+ animations: [
+ trigger('toolbarState', [
+ state('true', style({
+ transform: 'translateX(0%)',
+ // opacity: '1.0'
+ })),
+ state('false', style({
+ transform: 'translateX(-93%)',
+ // opacity: '0.0'
+ })),
+ transition('0 => 1', animate('500ms ease-in')),
+ transition('1 => 0', animate('500ms ease-out'))
+ ])
+ ]
+})
+export class ToolbarComponent extends PanelBaseImpl {
+ @Input() on: boolean = false; // Override the parent class attribute
+ // deferred localization strings
+ lionFn; // Function
+ // Used to drive the display of the hosts icon - there is also another such variable on the forcesvg
+ @Input() hostsVisible: boolean = false;
+ @Input() instancesVisible: boolean = true;
+ @Input() summaryVisible: boolean = true;
+ @Input() detailsVisible: boolean = true;
+ @Input() backgroundVisible: boolean = false;
+ @Input() portsVisible: boolean = true;
+ @Input() alarmsVisible: boolean = true;
+
+ @Output() buttonEvent = new EventEmitter<string>();
+
+ constructor(
+ protected fs: FnService,
+ protected log: LogService,
+ private lion: LionService
+ ) {
+ super(fs, log);
+
+ if (this.lion.ubercache.length === 0) {
+ this.lionFn = this.dummyLion;
+ this.lion.loadCbs.set('topo-toolbar', () => this.doLion());
+ } else {
+ this.doLion();
+ }
+
+ this.log.debug('ToolbarComponent constructed');
+ }
+
+ /**
+ * Read the LION bundle for Toolbar and set up the lionFn
+ */
+ doLion() {
+ this.lionFn = this.lion.bundle('core.view.Topo');
+ }
+
+ /**
+ * As buttons are clicked on the toolbar, emit events up to the parent
+ *
+ * The toggling of the input variables here is in addition to the control
+ * of these input variables from the parent. This is so that this component
+ * may be reused and is not dependent on a particular parent implementation
+ * to work
+ * @param name The name of button clicked.
+ */
+ buttonClicked(name: string): void {
+ switch (name) {
+ case HOSTS_TOGGLE:
+ this.hostsVisible = !this.hostsVisible;
+ break;
+ case INSTANCE_TOGGLE:
+ this.instancesVisible = !this.instancesVisible;
+ break;
+ case SUMMARY_TOGGLE:
+ this.summaryVisible = !this.summaryVisible;
+ break;
+ case DETAILS_TOGGLE:
+ this.detailsVisible = !this.detailsVisible;
+ break;
+ case BKGRND_TOGGLE:
+ this.backgroundVisible = !this.backgroundVisible;
+ break;
+ case ALARMS_TOGGLE:
+ this.alarmsVisible = !this.alarmsVisible;
+ break;
+ default:
+ }
+ // Send a message up to let TopologyComponent know of the event
+ this.buttonEvent.emit(name);
+ }
+}
diff --git a/web/gui2-topo-lib/lib/panel/toolbar/toolbar.theme.css b/web/gui2-topo-lib/lib/panel/toolbar/toolbar.theme.css
new file mode 100644
index 0000000..7933ee6
--- /dev/null
+++ b/web/gui2-topo-lib/lib/panel/toolbar/toolbar.theme.css
@@ -0,0 +1,53 @@
+/*
+ * Copyright 2016-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.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+
+/**
+ * ONOS GUI -- Topology Toolbar Panel -- Theme CSS file
+ */
+.tbar-arrow svg.embeddedIcon .icon rect {
+ stroke: none;
+}
+
+.tbar-arrow svg.embeddedIcon .icon .glyph {
+ fill: #838383;
+}
+
+.tbar-arrow svg.embeddedIcon .icon rect {
+ fill: none;
+}
+
+.separator {
+ border-color: #ddd;
+}
+
+/* ========== DARK Theme ========== */
+
+.dark .tbar-arrow svg.embeddedIcon .icon .glyph {
+ fill: #B2B2B2;
+}
+
+.dark .tbar-arrow svg.embeddedIcon .icon rect {
+ fill: none;
+}
+
+.dark .separator {
+ border-color: #454545;
+}
+
+.dark #toolbar-topo2-toolbar .tbar-row.right {
+ color: #666;
+}
\ No newline at end of file
diff --git a/web/gui2-topo-lib/lib/panel/topopanel.base.ts b/web/gui2-topo-lib/lib/panel/topopanel.base.ts
new file mode 100644
index 0000000..bea8f58
--- /dev/null
+++ b/web/gui2-topo-lib/lib/panel/topopanel.base.ts
@@ -0,0 +1,107 @@
+/*
+ * Copyright 2018-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.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import {
+ FnService,
+ LogService,
+ PanelBaseImpl
+} from '../../../gui2-fw-lib/public_api';
+
+/**
+ * Base model of panel view - implemented by Topology Panel components
+ */
+export abstract class TopoPanelBaseImpl extends PanelBaseImpl {
+
+ protected header: any;
+ protected body: any;
+ protected footer: any;
+
+ protected constructor(
+ protected fs: FnService,
+ protected log: LogService,
+ protected id: string
+ ) {
+ super(fs, log);
+ }
+
+ protected init(el: any) {
+ this.header = el.append('div').classed('header', true);
+ this.body = el.append('div').classed('body', true);
+ this.footer = el.append('div').classed('footer', true);
+ }
+
+ /**
+ * Decode lists of props sent back through Web Socket
+ *
+ * Means that panels do not have to know property names in advance
+ * Driven by PropertyPanel on Server side
+ */
+ listProps(el, data) {
+ let sepLast: boolean = false;
+
+ // note: track whether we end with a separator or not...
+ data.propOrder.forEach((p) => {
+ if (p === '-') {
+ this.addSep(el);
+ sepLast = true;
+ } else {
+ this.addProp(el, data.propLabels[p], data.propValues[p]);
+ sepLast = false;
+ }
+ });
+ return sepLast;
+ }
+
+ addProp(el, label, value) {
+ const tr = el.append('tr');
+ let lab;
+
+ if (typeof label === 'string') {
+ lab = label.replace(/_/g, ' ');
+ } else {
+ lab = label;
+ }
+
+ function addCell(cls, txt) {
+ tr.append('td').attr('class', cls).text(txt);
+ }
+
+ addCell('label', lab + ' :');
+ addCell('value', value);
+ }
+
+ addSep(el) {
+ el.append('tr').append('td').attr('colspan', 2).append('hr');
+ }
+
+ appendToHeader(x) {
+ return this.header.append(x);
+ }
+
+ appendToBody(x) {
+ return this.body.append(x);
+ }
+
+ appendToFooter(x) {
+ return this.footer.append(x);
+ }
+
+ emptyRegions() {
+ this.header.selectAll('*').remove();
+ this.body.selectAll('*').remove();
+ this.footer.selectAll('*').remove();
+ }
+
+}
diff --git a/web/gui2-topo-lib/lib/topology-routing.module.ts b/web/gui2-topo-lib/lib/topology-routing.module.ts
new file mode 100644
index 0000000..66e17b6
--- /dev/null
+++ b/web/gui2-topo-lib/lib/topology-routing.module.ts
@@ -0,0 +1,36 @@
+/*
+ * Copyright 2018-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.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an 'AS IS' BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { TopologyComponent } from './topology/topology.component';
+
+const topologyRoutes: Routes = [
+ {
+ path: '',
+ component: TopologyComponent
+ },
+];
+
+/**
+ * ONOS GUI -- Topology Tabular View Feature Routing Module - allows it to be lazy loaded
+ *
+ * See https://angular.io/guide/lazy-loading-ngmodules
+ */
+@NgModule({
+ imports: [RouterModule.forChild(topologyRoutes)],
+ exports: [RouterModule]
+})
+export class TopologyRoutingModule { }
diff --git a/web/gui2-topo-lib/lib/topology.common.css b/web/gui2-topo-lib/lib/topology.common.css
new file mode 100644
index 0000000..1ad9fbe
--- /dev/null
+++ b/web/gui2-topo-lib/lib/topology.common.css
@@ -0,0 +1,86 @@
+/*
+ * Copyright 2018-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.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * ONOS GUI -- Topology Common styles -- CSS file
+ */
+.topo2-p div.header {
+ margin-bottom: 10px;
+}
+
+.topo2-p div.header div.icon {
+ vertical-align: middle;
+ display: inline-block;
+}
+.topo2-p div.body {
+ overflow-y: scroll;
+}
+
+.topo2-p div.body::-webkit-scrollbar {
+ display: none;
+}
+
+.topo2-p svg {
+ display: inline-block;
+ width: 26px;
+ height: 26px;
+}
+
+
+.topo2-p h2 {
+ padding: 0 0 0 10px;
+ margin: 0;
+ font-weight: lighter;
+ word-wrap: break-word;
+ display: inline-block;
+ vertical-align: middle;
+}
+
+.topo2-p h3 {
+ padding: 0 4px;
+ margin: 0;
+ word-wrap: break-word;
+ top: 20px;
+ left: 50px;
+}
+
+.topo2-p p,
+.topo2-p table {
+ padding: 0;
+ margin: 0;
+ width: 100%;
+}
+
+.topo2-p td {
+ word-wrap: break-word;
+}
+.topo2-p td.label {
+ font-weight: bold;
+ padding: 0 10px 0 0;
+}
+.topo2-p td.value {
+ padding: 0;
+}
+
+#topo2-p-summary td.label {
+ width: 50%;
+}
+
+.topo2-p hr {
+ height: 1px;
+ border: 0;
+ margin: 4px -3px;
+}
\ No newline at end of file
diff --git a/web/gui2-topo-lib/lib/topology.service.spec.ts b/web/gui2-topo-lib/lib/topology.service.spec.ts
new file mode 100644
index 0000000..a7c8463
--- /dev/null
+++ b/web/gui2-topo-lib/lib/topology.service.spec.ts
@@ -0,0 +1,77 @@
+/*
+ * Copyright 2018-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.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { TestBed, inject } from '@angular/core/testing';
+import { ActivatedRoute, Params } from '@angular/router';
+import {of} from 'rxjs';
+
+import { TopologyService } from './topology.service';
+import {
+ LogService,
+ FnService
+} from '../../gui2-fw-lib/public_api';
+
+class MockActivatedRoute extends ActivatedRoute {
+ constructor(params: Params) {
+ super();
+ this.queryParams = of(params);
+ }
+}
+
+/**
+ * ONOS GUI -- Topology Service - Unit Tests
+ */
+describe('TopologyService', () => {
+ let logServiceSpy: jasmine.SpyObj<LogService>;
+ let ar: ActivatedRoute;
+ let fs: FnService;
+ let mockWindow: Window;
+
+ beforeEach(() => {
+ const logSpy = jasmine.createSpyObj('LogService', ['debug', 'warn', 'info']);
+ ar = new MockActivatedRoute({'debug': 'TestService'});
+ mockWindow = <any>{
+ innerWidth: 400,
+ innerHeight: 200,
+ navigator: {
+ userAgent: 'defaultUA'
+ },
+ location: <any>{
+ hostname: 'foo',
+ host: 'foo',
+ port: '80',
+ protocol: 'http',
+ search: { debug: 'true' },
+ href: 'ws://foo:123/onos/ui/websock/path',
+ absUrl: 'ws://foo:123/onos/ui/websock/path'
+ }
+ };
+ fs = new FnService(ar, logSpy, mockWindow);
+
+ TestBed.configureTestingModule({
+ providers: [TopologyService,
+ { provide: FnService, useValue: fs},
+ { provide: LogService, useValue: logSpy },
+ { provide: ActivatedRoute, useValue: ar },
+ { provide: 'Window', useFactory: (() => mockWindow ) }
+ ]
+ });
+ logServiceSpy = TestBed.get(LogService);
+ });
+
+ it('should be created', inject([TopologyService], (service: TopologyService) => {
+ expect(service).toBeTruthy();
+ }));
+});
diff --git a/web/gui2-topo-lib/lib/topology.service.ts b/web/gui2-topo-lib/lib/topology.service.ts
new file mode 100644
index 0000000..693a29a
--- /dev/null
+++ b/web/gui2-topo-lib/lib/topology.service.ts
@@ -0,0 +1,170 @@
+/*
+ * 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.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import {Injectable, SimpleChange} from '@angular/core';
+import {
+ LogService, WebSocketService,
+} from '../../gui2-fw-lib/public_api';
+import {Instance, InstanceComponent} from './panel/instance/instance.component';
+import { BackgroundSvgComponent } from './layer/backgroundsvg/backgroundsvg.component';
+import { ForceSvgComponent } from './layer/forcesvg/forcesvg.component';
+import {
+ ModelEventMemo,
+ ModelEventType,
+ Region
+} from './layer/forcesvg/models';
+
+/**
+ * Model of the Intent to be displayed
+ */
+export interface Intent {
+ appId: string;
+ appName: string;
+ key: string;
+ type: string;
+}
+
+export interface RelatedIntent {
+ ids: string[];
+ hover: string;
+}
+
+/**
+ * ONOS GUI -- Topology Service Module.
+ */
+@Injectable()
+export class TopologyService {
+
+ private handlers: string[] = [];
+ private openListener: any;
+ public instancesIndex: Map<string, number>;
+
+ constructor(
+ protected log: LogService,
+ protected wss: WebSocketService
+ ) {
+ this.instancesIndex = new Map();
+ this.log.debug('TopologyService constructed');
+ }
+
+ /**
+ * bind our event handlers to the web socket service, so that our
+ * callbacks get invoked for incoming events
+ */
+ init(instance: InstanceComponent, background: BackgroundSvgComponent, force: ForceSvgComponent) {
+ this.wss.bindHandlers(new Map<string, (data) => void>([
+ ['topo2AllInstances', (data) => {
+ this.log.debug('Instances updated through WSS as topo2AllInstances', data);
+ instance.ngOnChanges(
+ {'onosInstances': new SimpleChange({}, data.members, true)});
+
+ // Also generate an index locally of the instances
+ // needed so that devices can be coloured by instance
+ this.instancesIndex.clear();
+ (<Instance[]>data.members).forEach((inst, idx) => this.instancesIndex.set(inst.id, idx));
+ this.log.debug('Created local index of instances', this.instancesIndex);
+ }
+ ],
+ ['topo2CurrentLayout', (data) => {
+ this.log.debug('Background Data updated from WSS as topo2CurrentLayout', data);
+ if (background) {
+ background.layoutData = data;
+ }
+ }
+ ],
+ ['topo2CurrentRegion', (data) => {
+ force.regionData = data;
+ force.ngOnChanges({
+ 'regionData' : new SimpleChange(<Region>{}, data, true)
+ });
+ this.log.debug('Region Data replaced from WSS as topo2CurrentRegion', force.regionData);
+ }
+ ],
+ ['topo2PeerRegions', (data) => { this.log.warn('Add fn for topo2PeerRegions callback', data); } ],
+ ['topo2UiModelEvent', (event) => {
+ // this.log.debug('Handling', event);
+ force.handleModelEvent(
+ <ModelEventType><unknown>(ModelEventType[event.type]), // Number based enum
+ <ModelEventMemo>(event.memo), // String based enum
+ event.subject, event.data);
+ }
+ ],
+ ['showHighlights', (event) => {
+ this.log.debug('Handling showHighlights', event);
+ force.handleHighlights(event.devices, event.hosts, event.links, 5000);
+ }]
+ // topo2Highlights is handled by TrafficService
+ ]));
+ this.handlers.push('topo2AllInstances');
+ this.handlers.push('topo2CurrentLayout');
+ this.handlers.push('topo2CurrentRegion');
+ this.handlers.push('topo2PeerRegions');
+ this.handlers.push('topo2UiModelEvent');
+ this.handlers.push('showHighlights');
+ // this.handlers.push('topo2Highlights');
+
+ // in case we fail over to a new server,
+ // listen for wsock-open events
+ this.openListener = this.wss.addOpenListener(() => this.wsOpen);
+
+ // tell the server we are ready to receive topology events
+ this.wss.sendEvent('topo2Start', {});
+ this.log.debug('TopologyService initialized');
+ }
+
+ /**
+ * tell the server we no longer wish to receive topology events
+ */
+ destroy() {
+ this.wss.sendEvent('topo2Stop', {});
+ this.wss.unbindHandlers(this.handlers);
+ this.wss.removeOpenListener(this.openListener);
+ this.openListener = null;
+ this.log.debug('TopologyService destroyed');
+ }
+
+
+ wsOpen(host: string, url: string) {
+ this.log.debug('topo2Event: WSopen - cluster node:', host, 'URL:', url);
+ // tell the server we are ready to receive topo events
+ this.wss.sendEvent('topo2Start', {});
+ }
+
+ /*
+ * Result will be handled by showHighlights handler (set up in topology service)
+ * which will call handleHighlights() in Force Component
+ */
+ setSelectedIntent(selectedIntent: Intent): void {
+ this.log.debug('Selected intent changed to', selectedIntent);
+ this.wss.sendEvent('selectIntent', selectedIntent);
+ }
+
+ selectRelatedIntent(ids: string[]): void {
+ this.log.debug('Select next intent');
+ this.wss.sendEvent('requestNextRelatedIntent', <RelatedIntent>{
+ ids: ids,
+ hover: undefined,
+ });
+ }
+
+ /*
+ * Tell the backend to stop sending highlights - any present will fade after 5 seconds
+ * There is also a cancel traffic for Topo 2 in Traffic Service
+ */
+ cancelHighlights(): void {
+ this.wss.sendEvent('cancelTraffic', {});
+ this.log.debug('Highlights canceled');
+ }
+}
diff --git a/web/gui2-topo-lib/lib/topology.theme.css b/web/gui2-topo-lib/lib/topology.theme.css
new file mode 100644
index 0000000..caa6199
--- /dev/null
+++ b/web/gui2-topo-lib/lib/topology.theme.css
@@ -0,0 +1,46 @@
+/*
+ * Copyright 2018-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.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * ONOS GUI -- Topology Common styles -- CSS file
+ */
+
+.topo2-p h2 {
+ display: inline-block;
+ padding: 6px;
+}
+
+.topo2-p svg {
+ background: #c0242b;
+ width: 28px;
+ height: 28px;
+}
+
+.topo2-p svg .glyph {
+ fill: #ffffff;
+}
+
+.topo2-p hr {
+ background-color: #cccccc;
+}
+
+#topo2-p-detail svg {
+ background: none;
+}
+
+#topo2-p-detail .header svg .glyph {
+ fill: #c0242b;
+}
\ No newline at end of file
diff --git a/web/gui2-topo-lib/lib/topology/topology.component.css b/web/gui2-topo-lib/lib/topology/topology.component.css
new file mode 100644
index 0000000..f1cde38
--- /dev/null
+++ b/web/gui2-topo-lib/lib/topology/topology.component.css
@@ -0,0 +1,26 @@
+/*
+ * Copyright 2018-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.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+
+/*
+ ONOS GUI -- Topology View (layout) -- CSS file
+ */
+/* --- Base SVG Layer --- */
+#ov-topo2 svg {
+ /* prevents the little cut/copy/paste square that would appear on iPad */
+ -webkit-user-select: none;
+ background-color: #f4f4f4;
+}
\ No newline at end of file
diff --git a/web/gui2-topo-lib/lib/topology/topology.component.html b/web/gui2-topo-lib/lib/topology/topology.component.html
new file mode 100644
index 0000000..019c0d6
--- /dev/null
+++ b/web/gui2-topo-lib/lib/topology/topology.component.html
@@ -0,0 +1,128 @@
+<!--
+~ 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.
+~ You may obtain a copy of the License at
+~
+~ http://www.apache.org/licenses/LICENSE-2.0
+~
+~ Unless required by applicable law or agreed to in writing, software
+~ distributed under the License is distributed on an "AS IS" BASIS,
+~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+~ See the License for the specific language governing permissions and
+~ limitations under the License.
+-->
+<!-- Template explaination - Add in the flash message component - and link it to
+the local variable - this is used to display messages when keyboard shortcuts are pressed
+-->
+<onos-flash id="topoMsgFlash" message="{{ flashMsg }}" (closed)="flashMsg = ''"></onos-flash>
+
+<onos-quickhelp id="topoQuickHelp"></onos-quickhelp>
+<!-- Template explanation - Add in the Panel components for the Topology view
+ These are referenced inside the typescript by @ViewChild and their label
+-->
+<onos-instance #instance [divTopPx]="80"
+ (mastershipEvent)="force.changeInstSelection($event)"
+ [on]="prefsState.insts">
+</onos-instance>
+<onos-summary #summary [on]="prefsState.summary"></onos-summary>
+<onos-toolbar #toolbar
+ (buttonEvent)="toolbarButtonClicked($event)"
+ [on]="prefsState.toolbar"
+ [backgroundVisible]="prefsState.bg"
+ [detailsVisible]="prefsState.detail"
+ [hostsVisible]="prefsState.hosts"
+ [instancesVisible]="prefsState.insts"
+ [portsVisible]="prefsState.porthl"
+ [summaryVisible]="prefsState.summary">
+</onos-toolbar>
+<onos-details #details [on]="prefsState.detail"></onos-details>
+<onos-mapselector *ngIf="mapSelShown" (chosenMap)="changeMap($event)"></onos-mapselector>
+
+<div id="ov-topo2">
+ <!-- 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) 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)"
+ 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" #onosZoom>
+ <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"
+ [showHosts]="prefsState.hosts"
+ [showAlarms]="prefsState.alarms"
+ [highlightPorts]="prefsState.porthl"
+ [scale]="window.innerHeight / (window.innerWidth * zoomDirective?.zoomCached.sc)"
+ (selectedNodeEvent)="nodeSelected($event)">
+ <svg:desc>The Force SVG component - contains all the devices, hosts and links</svg:desc>
+ </svg:g>
+ </svg:g>
+ </svg:svg>
+</div>
+
+<div id="breadcrumbs"></div>
diff --git a/web/gui2-topo-lib/lib/topology/topology.component.spec.ts b/web/gui2-topo-lib/lib/topology/topology.component.spec.ts
new file mode 100644
index 0000000..0ef9c5b
--- /dev/null
+++ b/web/gui2-topo-lib/lib/topology/topology.component.spec.ts
@@ -0,0 +1,254 @@
+/*
+ * 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.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ActivatedRoute, Params } from '@angular/router';
+import { of } from 'rxjs';
+import { HttpClient } from '@angular/common/http';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import * as d3 from 'd3';
+import { TopologyComponent } from './topology.component';
+import {
+ Instance,
+ InstanceComponent
+} from '../panel/instance/instance.component';
+import { SummaryComponent } from '../panel/summary/summary.component';
+import { ToolbarComponent } from '../panel/toolbar/toolbar.component';
+import { DetailsComponent } from '../panel/details/details.component';
+import {Intent, TopologyService} from '../topology.service';
+
+import {
+ FlashComponent,
+ QuickhelpComponent,
+ FnService,
+ LogService,
+ IconService, IconComponent, PrefsService, KeysService, LionService, ZoomableDirective
+} from '../../../gui2-fw-lib/public_api';
+import {RouterTestingModule} from '@angular/router/testing';
+import {TrafficService} from '../traffic.service';
+import {ForceSvgComponent} from '../layer/forcesvg/forcesvg.component';
+import {DraggableDirective} from '../layer/forcesvg/draggable/draggable.directive';
+import {MapSelectorComponent} from '../panel/mapselector/mapselector.component';
+import {BackgroundSvgComponent} from '../layer/backgroundsvg/backgroundsvg.component';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {MapSvgComponent} from '../layer/mapsvg/mapsvg.component';
+import {GridsvgComponent} from '../layer/gridsvg/gridsvg.component';
+import {LinkSvgComponent} from '../layer/forcesvg/visuals/linksvg/linksvg.component';
+import {DeviceNodeSvgComponent} from '../layer/forcesvg/visuals/devicenodesvg/devicenodesvg.component';
+import {SubRegionNodeSvgComponent} from '../layer/forcesvg/visuals/subregionnodesvg/subregionnodesvg.component';
+import {HostNodeSvgComponent} from '../layer/forcesvg/visuals/hostnodesvg/hostnodesvg.component';
+import {LayoutService} from '../layout.service';
+import {BadgeSvgComponent} from '../layer/forcesvg/visuals/badgesvg/badgesvg.component';
+
+
+class MockActivatedRoute extends ActivatedRoute {
+ constructor(params: Params) {
+ super();
+ this.queryParams = of(params);
+ }
+}
+
+class MockHttpClient {}
+
+class MockTopologyService {
+ init(instance: InstanceComponent) {
+ instance.onosInstances = [
+ <Instance>{
+ 'id': 'inst1',
+ 'ip': '127.0.0.1',
+ 'reachable': true,
+ 'online': true,
+ 'ready': true,
+ 'switches': 4,
+ 'uiAttached': true
+ },
+ <Instance>{
+ 'id': 'inst1',
+ 'ip': '127.0.0.2',
+ 'reachable': true,
+ 'online': true,
+ 'ready': true,
+ 'switches': 3,
+ 'uiAttached': false
+ }
+ ];
+ }
+ destroy() {}
+ setSelectedIntent(selectedIntent: Intent): void {}
+ selectRelatedIntent(ids: string[]): void {}
+ cancelHighlights(): void {}
+}
+
+class MockIconService {
+ loadIconDef() { }
+}
+
+class MockKeysService {
+ quickHelpShown: boolean = true;
+
+ keyHandler: {
+ viewKeys: any[],
+ globalKeys: any[]
+ };
+
+ mockViewKeys: Object[];
+ constructor() {
+ this.mockViewKeys = [];
+ this.keyHandler = {
+ viewKeys: this.mockViewKeys,
+ globalKeys: this.mockViewKeys
+ };
+ }
+
+ keyBindings(x) {
+ return {};
+ }
+
+ gestureNotes() {
+ return {};
+ }
+}
+
+class MockTrafficService {
+ init(force: ForceSvgComponent) {}
+ destroy() {}
+}
+
+class MockLayoutService {}
+
+class MockPrefsService {
+ listeners: ((data) => void)[] = [];
+
+ getPrefs() {
+ return { 'topo2_prefs': ''};
+ }
+
+ addListener(listener: (data) => void): void {
+ this.listeners.push(listener);
+ }
+
+ removeListener(listener: (data) => void) {
+ this.listeners = this.listeners.filter((obj) => obj !== listener);
+ }
+
+ setPrefs(name: string, obj: Object) {
+
+ }
+
+}
+
+/**
+ * ONOS GUI -- Topology View -- Unit Tests
+ */
+// Skipping temporarily
+describe('TopologyComponent', () => {
+ let fs: FnService;
+ let ar: MockActivatedRoute;
+ let windowMock: Window;
+ let logServiceSpy: jasmine.SpyObj<LogService>;
+ let component: TopologyComponent;
+ let fixture: ComponentFixture<TopologyComponent>;
+
+ const bundleObj = {
+ 'core.fw.QuickHelp': {
+ test: 'test1',
+ tt_help: 'Help!'
+ }
+ };
+ const mockLion = (key) => {
+ return bundleObj[key] || '%' + key + '%';
+ };
+
+ beforeEach(() => {
+ const logSpy = jasmine.createSpyObj('LogService', ['info', 'debug', 'warn', 'error']);
+ ar = new MockActivatedRoute({ 'debug': 'txrx' });
+
+ windowMock = <any>{
+ location: <any>{
+ hostname: 'foo',
+ host: 'foo',
+ port: '80',
+ protocol: 'http',
+ search: { debug: 'true' },
+ href: 'ws://foo:123/onos/ui/websock/path',
+ absUrl: 'ws://foo:123/onos/ui/websock/path'
+ }
+ };
+ fs = new FnService(ar, logSpy, windowMock);
+
+ TestBed.configureTestingModule({
+ imports: [
+ BrowserAnimationsModule,
+ RouterTestingModule,
+ FormsModule,
+ ReactiveFormsModule
+ ],
+ declarations: [
+ TopologyComponent,
+ InstanceComponent,
+ SummaryComponent,
+ ToolbarComponent,
+ DetailsComponent,
+ FlashComponent,
+ IconComponent,
+ QuickhelpComponent,
+ ForceSvgComponent,
+ LinkSvgComponent,
+ DeviceNodeSvgComponent,
+ HostNodeSvgComponent,
+ DraggableDirective,
+ ZoomableDirective,
+ SubRegionNodeSvgComponent,
+ MapSelectorComponent,
+ BackgroundSvgComponent,
+ MapSvgComponent,
+ GridsvgComponent,
+ BadgeSvgComponent
+ ],
+ providers: [
+ { provide: FnService, useValue: fs },
+ { provide: LogService, useValue: logSpy },
+ { provide: 'Window', useValue: windowMock },
+ { provide: HttpClient, useClass: MockHttpClient },
+ { provide: TopologyService, useClass: MockTopologyService },
+ { provide: TrafficService, useClass: MockTrafficService },
+ { provide: LayoutService, useClass: MockLayoutService },
+ { provide: IconService, useClass: MockIconService },
+ { provide: PrefsService, useClass: MockPrefsService },
+ { provide: KeysService, useClass: MockKeysService },
+ { provide: LionService, useFactory: (() => {
+ return {
+ bundle: ((bundleId) => mockLion),
+ ubercache: new Array(),
+ loadCbs: new Map<string, () => void>([])
+ };
+ })
+ },
+ ]
+ }).compileComponents();
+ logServiceSpy = TestBed.get(LogService);
+ });
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(TopologyComponent);
+ component = fixture.componentInstance;
+
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/web/gui2-topo-lib/lib/topology/topology.component.ts b/web/gui2-topo-lib/lib/topology/topology.component.ts
new file mode 100644
index 0000000..601cfb1
--- /dev/null
+++ b/web/gui2-topo-lib/lib/topology/topology.component.ts
@@ -0,0 +1,805 @@
+/*
+ * 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.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an 'AS IS' BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import {
+ AfterViewInit,
+ Component, HostListener, Inject, Input,
+ OnDestroy,
+ OnInit, SimpleChange,
+ ViewChild
+} from '@angular/core';
+import * as d3 from 'd3';
+import {
+ FnService,
+ IconService,
+ KeysService,
+ KeysToken,
+ LionService,
+ LogService,
+ PrefsService,
+ SvgUtilService,
+ TopoZoomPrefs,
+ WebSocketService,
+ ZoomUtils
+} from '../../../gui2-fw-lib/public_api';
+import {InstanceComponent} from '../panel/instance/instance.component';
+import {DetailsComponent} from '../panel/details/details.component';
+import {BackgroundSvgComponent} from '../layer/backgroundsvg/backgroundsvg.component';
+import {ForceSvgComponent} from '../layer/forcesvg/forcesvg.component';
+import {Intent, TopologyService} from '../topology.service';
+import {
+ GridDisplayToggle,
+ HostLabelToggle,
+ LabelToggle,
+ UiElement
+} from '../layer/forcesvg/models';
+import {
+ ALL_TRAFFIC,
+ BKGRND_SELECT,
+ BKGRND_TOGGLE,
+ CANCEL_TRAFFIC,
+ CYCLEGRIDDISPLAY_BTN,
+ CYCLEHOSTLABEL_BTN,
+ CYCLELABELS_BTN,
+ DETAILS_TOGGLE,
+ EQMASTER_BTN,
+ HOSTS_TOGGLE,
+ INSTANCE_TOGGLE,
+ LAYOUT_ACCESS_BTN,
+ LAYOUT_DEFAULT_BTN,
+ OFFLINE_TOGGLE,
+ PORTS_TOGGLE,
+ QUICKHELP_BTN,
+ RESETZOOM_BTN,
+ SUMMARY_TOGGLE,
+ ALARMS_TOGGLE
+} from '../panel/toolbar/toolbar.component';
+import {TrafficService, TrafficType} from '../traffic.service';
+import {ZoomableDirective} from '../../../gui2-fw-lib/public_api';
+import {MapObject} from '../layer/maputils';
+import {LayoutService, LayoutType} from '../layout.service';
+import {SelectedEvent} from '../layer/forcesvg/visuals/nodevisual';
+import {ActivatedRoute} from '@angular/router';
+
+const TOPO2_PREFS = 'topo2_prefs';
+const TOPO_MAPID_PREFS = 'topo_mapid';
+
+const PREF_BG = 'bg';
+const PREF_DETAIL = 'detail';
+const PREF_DLBLS = 'dlbls';
+const PREF_HLBLS = 'hlbls';
+const PREF_GRID = 'grid';
+const PREF_HOSTS = 'hosts';
+const PREF_INSTS = 'insts';
+const PREF_OFFDEV = 'offdev';
+const PREF_PORTHL = 'porthl';
+const PREF_SUMMARY = 'summary';
+const PREF_TOOLBAR = 'toolbar';
+const PREF_PINNED = 'pinned';
+const PREF_TRAFFIC = 'traffic';
+const PREF_ALARMS = 'alarms';
+
+const BACKGROUND_ELEMENTS = [
+ 'svg topo2',
+ 'path bgmap'
+];
+
+/**
+ * Model of the topo2_prefs object - this is a subset of the overall Prefs returned
+ * by the server
+ */
+export interface Topo2Prefs {
+ bg: number;
+ detail: number;
+ dlbls: number;
+ hlbls: number;
+ hosts: number;
+ insts: number;
+ offdev: number;
+ porthl: number;
+ spr: number;
+ ovid: string;
+ summary: number;
+ toolbar: number;
+ grid: number;
+ pinned: number;
+ traffic: number;
+ alarms: number;
+}
+
+/**
+ * ONOS GUI Topology View
+ *
+ * This Topology View component is the top level component in a hierarchy that
+ * comprises the whole Topology View
+ *
+ * There are three main parts (panels, graphical and breadcrumbs)
+ * The panel hierarchy
+ * |-- Instances Panel (shows ONOS instances)
+ * |-- Summary Panel (summary of ONOS)
+ * |-- Toolbar Panel (the toolbar)
+ * |-- Details Panel (when a node is selected in the Force graphical view (see below))
+ *
+ * The graphical hierarchy contains
+ * Topology (this)
+ * |-- No Devices Connected (only of there are no nodes to show)
+ * |-- Zoom Layer (everything beneath this can be zoomed and panned)
+ * |-- Background (container for any backgrounds - can be toggled on and off)
+ * |-- Map
+ * |-- Forces (all of the nodes and links laid out by a d3.force simulation)
+ *
+ * The breadcrumbs
+ * |-- Breadcrumb (in region view a way of navigating back up through regions)
+ */
+@Component({
+ selector: 'onos-topology',
+ templateUrl: './topology.component.html',
+ styleUrls: ['./topology.component.css']
+})
+export class TopologyComponent implements OnInit, OnDestroy, AfterViewInit {
+ @Input() bannerHeight: number = 48;
+ // These are references to the components inserted in the template
+ @ViewChild(InstanceComponent, {static: true}) instance: InstanceComponent;
+ @ViewChild(DetailsComponent, {static: true}) details: DetailsComponent;
+ @ViewChild(BackgroundSvgComponent, {static: true}) background: BackgroundSvgComponent;
+ @ViewChild(ForceSvgComponent, {static: true}) force: ForceSvgComponent;
+ @ViewChild(ZoomableDirective, {static: true}) zoomDirective: ZoomableDirective;
+
+ flashMsg: string = '';
+ // These are used as defaults if nothing is set on the server
+ prefsState: Topo2Prefs = <Topo2Prefs>{
+ bg: 0,
+ detail: 1,
+ dlbls: 0,
+ hlbls: 2,
+ hosts: 0,
+ insts: 1,
+ offdev: 1,
+ ovid: 'traffic', // default to traffic overlay
+ porthl: 1,
+ spr: 0,
+ summary: 1,
+ toolbar: 0,
+ grid: 0,
+ pinned: 0,
+ traffic: 2, // default to PORTSTATSPKTSEC, as it will iterate over to 0 on init
+ alarms: 1,
+ };
+
+ mapIdState: MapObject = <MapObject>{
+ id: undefined,
+ scale: 1.0
+ };
+ mapSelShown: boolean = false;
+ lionFn; // Function
+
+ gridShown: boolean = true;
+ geoGridShown: boolean = true;
+
+ constructor(
+ protected log: LogService,
+ protected fs: FnService,
+ protected ks: KeysService,
+ protected sus: SvgUtilService,
+ protected ps: PrefsService,
+ protected wss: WebSocketService,
+ protected ts: TopologyService,
+ protected trs: TrafficService,
+ protected is: IconService,
+ private lion: LionService,
+ private layout: LayoutService,
+ protected ar: ActivatedRoute,
+ @Inject('Window') public window: any,
+ ) {
+ if (this.lion.ubercache.length === 0) {
+ this.lionFn = this.dummyLion;
+ this.lion.loadCbs.set('topo-toolbar', () => this.doLion());
+ } else {
+ this.doLion();
+ }
+
+ this.log.warn('Constructor', this.zoomDirective);
+
+ this.is.loadIconDef('active');
+ this.is.loadIconDef('bgpSpeaker');
+ this.is.loadIconDef('bird');
+ this.is.loadIconDef('deviceTable');
+ this.is.loadIconDef('fiber_switch');
+ this.is.loadIconDef('flowTable');
+ this.is.loadIconDef('groupTable');
+ this.is.loadIconDef('m_allTraffic');
+ this.is.loadIconDef('m_cycleLabels');
+ this.is.loadIconDef('m_cycleGridDisplay');
+ this.is.loadIconDef('m_disjointPaths');
+ this.is.loadIconDef('m_details');
+ this.is.loadIconDef('m_endstation');
+ this.is.loadIconDef('m_eqMaster');
+ this.is.loadIconDef('m_fiberSwitch');
+ this.is.loadIconDef('m_firewall');
+ this.is.loadIconDef('m_map');
+ this.is.loadIconDef('m_microwave');
+ this.is.loadIconDef('m_ols');
+ this.is.loadIconDef('m_otn');
+ this.is.loadIconDef('m_ports');
+ this.is.loadIconDef('m_resetZoom');
+ this.is.loadIconDef('m_roadm');
+ this.is.loadIconDef('m_roadm_otn');
+ this.is.loadIconDef('m_router');
+ this.is.loadIconDef('m_selectMap');
+ this.is.loadIconDef('m_summary');
+ this.is.loadIconDef('m_switch');
+ this.is.loadIconDef('m_terminal_device');
+ this.is.loadIconDef('m_uiAttached');
+ this.is.loadIconDef('m_unknown');
+ this.is.loadIconDef('meterTable');
+ this.is.loadIconDef('microwave');
+ this.is.loadIconDef('otn');
+ this.is.loadIconDef('portTable');
+ this.is.loadIconDef('roadm_otn');
+ this.is.loadIconDef('triangleUp');
+ this.is.loadIconDef('uiAttached');
+ }
+
+ /**
+ * Static functions must come before member variables
+ * @param index Corresponds to LabelToggle.Enum index
+ */
+ private static deviceLabelFlashMessage(index: number): string {
+ switch (index) {
+ case 0: return 'fl_device_labels_hide';
+ case 1: return 'fl_device_labels_show_friendly';
+ case 2: return 'fl_device_labels_show_id';
+ }
+ }
+
+ private static hostLabelFlashMessage(index: number): string {
+ switch (index) {
+ case 0: return 'fl_host_labels_hide';
+ case 1: return 'fl_host_labels_show_friendly';
+ case 2: return 'fl_host_labels_show_ip';
+ case 3: return 'fl_host_labels_show_mac';
+ }
+ }
+
+ private static gridDisplayFlashMessage(index: number): string {
+ switch (index) {
+ case 0: return 'fl_grid_display_hide';
+ case 1: return 'fl_grid_display_1000';
+ case 2: return 'fl_grid_display_geo';
+ case 3: return 'fl_grid_display_both';
+ }
+ }
+
+ private static trafficTypeFlashMessage(index: number): string {
+ switch (index) {
+ case 0: return 'tr_fl_fstats_bytes';
+ case 1: return 'tr_fl_pstats_bits';
+ case 2: return 'tr_fl_pstats_pkts';
+ }
+ }
+
+ /**
+ * Pass the list of Key Commands to the KeyService, and initialize the Topology
+ * Service - which communicates with through the WebSocket to the ONOS server
+ * to get the nodes and links.
+ */
+ ngOnInit() {
+ this.bindCommands();
+
+ // The components from the template are handed over to TopologyService here
+ // so that WebSocket responses can be passed back in to them
+ // The handling of the WebSocket call is delegated out to the Topology
+ // Service just to compartmentalize things a bit
+ this.ts.init(this.instance, this.background, this.force);
+
+ // 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);
+
+ // Scale the window initially - then after resize
+ const zoomMapExtents = ZoomUtils.zoomToWindowSize(
+ this.bannerHeight, this.window.innerWidth, this.window.innerHeight);
+ this.zoomDirective.changeZoomLevel(zoomMapExtents, true);
+
+ // TODO find out why the following is never printed
+ this.log.debug('TopologyComponent initialized,',
+ this.bannerHeight, this.window.innerWidth, this.window.innerHeight,
+ zoomMapExtents);
+ }
+
+ ngAfterViewInit(): void {
+ this.ar.queryParams.subscribe(params => {
+ const intentId = params['intentId'];
+ const intentType = params['intentType'];
+ const appId = params['appId'];
+ const appName = params['appName'];
+
+ if (intentId && intentType && appId) {
+ const selectedIntent = <Intent>{
+ key: intentId,
+ type: intentType,
+ appId: appId,
+ appName: appName,
+ };
+ this.ts.setSelectedIntent(selectedIntent);
+
+ this.log.warn('TopologyComponent init with Intent: ', selectedIntent, params);
+ }
+ });
+ }
+
+ /**
+ * Callback function that's called whenever new Prefs are received from WebSocket
+ *
+ * Note: At present the backend server does not filter updated by logged in user,
+ * so you might get updates pertaining to a different user
+ */
+ prefsUpdateHandler(data: any): void {
+ // Extract the TOPO2 prefs from it
+ if (data[TOPO2_PREFS]) {
+ this.prefsState = data[TOPO2_PREFS];
+ }
+ this.log.debug('Updated topo2 prefs', this.prefsState, this.mapIdState);
+ }
+
+ /**
+ * When this component is being stopped, disconnect the TopologyService from
+ * the WebSocket
+ */
+ ngOnDestroy() {
+ this.ts.destroy();
+ this.ps.removeListener((data) => this.prefsUpdateHandler(data));
+ this.trs.destroy();
+ this.log.debug('Topology component destroyed');
+ }
+
+ @HostListener('window:resize', ['$event'])
+ onResize(event) {
+ const zoomMapExtents = ZoomUtils.zoomToWindowSize(
+ this.bannerHeight, event.target.innerWidth, event.target.innerHeight);
+ this.zoomDirective.changeZoomLevel(zoomMapExtents, true);
+ this.log.debug('Topology window resize',
+ event.target.innerWidth, event.target.innerHeight, this.bannerHeight, zoomMapExtents);
+ }
+
+ /**
+ * When ever a toolbar button is clicked, an event is sent up from toolbar
+ * component which is caught and passed on to here.
+ * @param name The name of the button that was clicked
+ */
+ toolbarButtonClicked(name: string) {
+ switch (name) {
+ case INSTANCE_TOGGLE:
+ this.toggleInstancePanel();
+ break;
+ case SUMMARY_TOGGLE:
+ this.toggleSummary();
+ break;
+ case DETAILS_TOGGLE:
+ this.toggleDetails();
+ break;
+ case HOSTS_TOGGLE:
+ this.toggleHosts();
+ break;
+ case OFFLINE_TOGGLE:
+ this.toggleOfflineDevices();
+ break;
+ case PORTS_TOGGLE:
+ this.togglePorts();
+ break;
+ case BKGRND_TOGGLE:
+ this.toggleBackground();
+ break;
+ case BKGRND_SELECT:
+ this.mapSelShown = !this.mapSelShown;
+ break;
+ case CYCLELABELS_BTN:
+ this.cycleDeviceLabels();
+ break;
+ case CYCLEHOSTLABEL_BTN:
+ this.cycleHostLabels();
+ break;
+ case CYCLEGRIDDISPLAY_BTN:
+ this.cycleGridDisplay();
+ break;
+ case RESETZOOM_BTN:
+ this.resetZoom();
+ break;
+ case EQMASTER_BTN:
+ this.equalizeMasters();
+ break;
+ case CANCEL_TRAFFIC:
+ this.cancelTraffic();
+ break;
+ case ALL_TRAFFIC:
+ this.cycleTrafficTypeDisplay();
+ break;
+ case QUICKHELP_BTN:
+ this.ks.quickHelpShown = true;
+ break;
+ case LAYOUT_DEFAULT_BTN:
+ this.layout.changeLayout(LayoutType.LAYOUT_DEFAULT);
+ break;
+ case LAYOUT_ACCESS_BTN:
+ this.layout.changeLayout(LayoutType.LAYOUT_ACCESS);
+ break;
+ case ALARMS_TOGGLE:
+ this.toggleAlarms();
+ break;
+ default:
+ this.log.warn('Unhandled Toolbar action', name);
+ }
+ }
+
+ /**
+ * The list of key strokes that will be active in the Topology View.
+ *
+ * This action map is passed to the KeyService through the bindCommands()
+ * when this component is being initialized
+ *
+ * TODO - Replace this doggy doo doo (copied over from GUI-1)
+ * with something more structured
+ */
+ actionMap() {
+ return {
+ A: [() => {this.cycleTrafficTypeDisplay(); }, this.lionFn('tr_btn_monitor_all')],
+ B: [(token) => {this.toggleBackground(token); }, this.lionFn('tbtt_tog_map')],
+ D: [(token) => {this.toggleDetails(token); }, this.lionFn('tbtt_tog_use_detail')],
+ E: [() => {this.equalizeMasters(); }, this.lionFn('tbtt_eq_master')],
+ H: [() => {this.toggleHosts(); }, this.lionFn('tbtt_tog_host')],
+ I: [(token) => {this.toggleInstancePanel(token); }, this.lionFn('tbtt_tog_instances')],
+ G: [() => {this.mapSelShown = !this.mapSelShown; }, this.lionFn('tbtt_sel_map')],
+ L: [() => {this.cycleDeviceLabels(); }, this.lionFn('tbtt_cyc_dev_labs')],
+ M: [() => {this.toggleOfflineDevices(); }, this.lionFn('tbtt_tog_offline')],
+ O: [() => {this.toggleSummary(); }, this.lionFn('tbtt_tog_summary')],
+ P: [(token) => {this.togglePorts(token); }, this.lionFn('tbtt_tog_porthi')],
+ Q: [() => {this.cycleGridDisplay(); }, this.lionFn('tbtt_cyc_grid_display')],
+ R: [() => {this.resetZoom(); }, this.lionFn('tbtt_reset_zoom')],
+ U: [() => {this.unpinOrFreezeNodes(); }, this.lionFn('tbtt_unpin_node')],
+ X: [() => {this.resetNodeLocation(); }, this.lionFn('tbtt_reset_loc')],
+ dot: [() => {this.toggleToolbar(); }, this.lionFn('tbtt_tog_toolbar')],
+ 0: [() => {this.cancelTraffic(); }, this.lionFn('tr_btn_cancel_monitoring')],
+ 'shift-L': [() => {this.cycleHostLabels(); }, this.lionFn('tbtt_cyc_host_labs')],
+
+ // -- instance color palette debug
+ 9: () => {
+ this.sus.cat7().testCard(d3.select('svg#topo2'));
+ },
+
+ esc: [() => {this.handleEscape(); }, this.lionFn('qh_hint_esc')],
+
+ // TODO update after adding in Background Service
+ // topology overlay selections
+ // F1: function () { t2tbs.fnKey(0); },
+ // F2: function () { t2tbs.fnKey(1); },
+ // F3: function () { t2tbs.fnKey(2); },
+ // F4: function () { t2tbs.fnKey(3); },
+ // F5: function () { t2tbs.fnKey(4); },
+ //
+ // _keyListener: t2tbs.keyListener.bind(t2tbs),
+
+ _helpFormat: [
+ ['I', 'O', 'D', 'H', 'M', 'P', 'dash', 'B'],
+ ['X', 'Z', 'N', 'L', 'shift-L', 'U', 'R', 'E', 'dot'],
+ [], // this column reserved for overlay actions
+ ],
+ };
+ }
+
+
+ bindCommands(additional?: any) {
+
+ const am = this.actionMap();
+ this.ks.keyBindings(am);
+
+ this.ks.gestureNotes([
+ ['click', 'Select the item and show details'],
+ ['shift-click', 'Toggle selection state'],
+ ['drag', 'Reposition (and pin) device / host'],
+ ['cmd-scroll', 'Zoom in / out'],
+ ['cmd-drag', 'Pan'],
+ ]);
+ }
+
+ handleEscape() {
+
+ if (false) {
+ // TODO: Cancel show mastership
+ // TODO: Cancel Active overlay
+ // TODO: Reinstate with components
+ } else {
+ this.nodeSelected(undefined);
+ this.log.debug('Handling escape');
+ // } else if (t2rs.deselectAllNodes()) {
+ // // else if we have node selections, deselect them all
+ // // (work already done)
+ // } else if (t2rs.deselectLink()) {
+ // // else if we have a link selection, deselect it
+ // // (work already done)
+ // } else if (t2is.isVisible()) {
+ // // If the instance panel is visible, close it
+ // t2is.toggle();
+ // } else if (t2sp.isVisible()) {
+ // // If the summary panel is visible, close it
+ // t2sp.toggle();
+ }
+ }
+
+ /**
+ * Updates the cache of preferences locally and onwards to the PrefsService
+ * @param what The attribute of the local topo2-prefs cache to update
+ * @param b the value to update it with
+ */
+ updatePrefsState(what: string, b: number) {
+ this.prefsState[what] = b;
+ this.ps.setPrefs(TOPO2_PREFS, this.prefsState);
+ }
+
+ /**
+ * When the button is clicked on the toolbar or the L key is pressed
+ * 1) cycle through options
+ * 2) flash up a message
+ * 3a) Update the local prefs cache
+ * 3b) And passes on to the global prefs service which sends back to the server
+ * 3c) It also has a knock on effect of passing it on to ForceSvgComponent
+ * because prefsState.dlbls is given as an input to it
+ * 3d) This will in turn pass it down to the DeviceSvgComponent which
+ * displays the label
+ */
+ protected cycleDeviceLabels() {
+ const old: LabelToggle.Enum = this.prefsState.dlbls;
+ const next = LabelToggle.next(old);
+ this.flashMsg = this.lionFn(TopologyComponent.deviceLabelFlashMessage(next));
+ this.updatePrefsState(PREF_DLBLS, next);
+ this.log.debug('Cycling device labels', old, next);
+ }
+
+ protected cycleHostLabels() {
+ const old: HostLabelToggle.Enum = this.prefsState.hlbls;
+ const next = HostLabelToggle.next(old);
+ this.flashMsg = this.lionFn(TopologyComponent.hostLabelFlashMessage(next));
+ this.updatePrefsState(PREF_HLBLS, next);
+ this.log.debug('Cycling host labels', old, next);
+ }
+
+ protected cycleGridDisplay() {
+ const old: GridDisplayToggle.Enum = this.prefsState.grid;
+ const next = GridDisplayToggle.next(old);
+ this.flashMsg = this.lionFn(TopologyComponent.gridDisplayFlashMessage(next));
+ this.updatePrefsState(PREF_GRID, next);
+ this.log.debug('Cycling grid display', old, next);
+ }
+
+ protected cycleTrafficTypeDisplay() {
+ const old: TrafficType.Enum = this.prefsState.traffic; // by number
+ const next = TrafficType.next(old);
+ this.flashMsg = this.lionFn(TopologyComponent.trafficTypeFlashMessage(next));
+ this.updatePrefsState(PREF_TRAFFIC, next);
+ this.trs.requestTraffic(next);
+ this.log.debug('Cycling traffic display', old, next);
+ }
+
+ /**
+ * When the button is clicked on the toolbar or the B key is pressed
+ * 1) Find the inverse of the current state (held as 1 or 0)
+ * 2) Flash up a message on screen
+ * 3b) And passes on to the global prefs service which sends back to the server
+ * 3c) It also has a knock on effect of passing it on to ToolbarComponent
+ * because prefsState.bg is given as an input to it
+ * @param token not currently used
+ */
+ protected toggleBackground(token?: KeysToken) {
+ const bg: boolean = !Boolean(this.prefsState.bg);
+ this.flashMsg = this.lionFn(bg ? 'show' : 'hide') +
+ ' ' + this.lionFn('fl_background_map');
+ this.updatePrefsState(PREF_BG, bg ? 1 : 0);
+ this.log.debug('Toggling background', token, bg ? 'shown' : 'hidden');
+ }
+
+ protected toggleDetails(token?: KeysToken) {
+ const on: boolean = !Boolean(this.prefsState.detail);
+ this.flashMsg = this.lionFn(on ? 'show' : 'hide') +
+ ' ' + this.lionFn('fl_panel_details');
+ this.updatePrefsState(PREF_DETAIL, on ? 1 : 0);
+ this.log.debug('Toggling details', token);
+ }
+
+ protected toggleInstancePanel(token?: KeysToken) {
+ const on: boolean = !Boolean(this.prefsState.insts);
+ this.flashMsg = this.lionFn(on ? 'show' : 'hide') +
+ ' ' + this.lionFn('fl_panel_instances');
+ this.updatePrefsState(PREF_INSTS, on ? 1 : 0);
+ this.log.debug('Toggling instances', token, on);
+ }
+
+ protected toggleSummary() {
+ const on: boolean = !Boolean(this.prefsState.summary);
+ this.flashMsg = this.lionFn(on ? 'show' : 'hide') +
+ ' ' + this.lionFn('fl_panel_summary');
+ this.updatePrefsState(PREF_SUMMARY, on ? 1 : 0);
+ }
+
+ protected togglePorts(token?: KeysToken) {
+ const current: boolean = !Boolean(this.prefsState.porthl);
+ this.flashMsg = this.lionFn(current ? 'enable' : 'disable') +
+ ' ' + this.lionFn('fl_port_highlighting');
+ this.updatePrefsState(PREF_PORTHL, current ? 1 : 0);
+ this.log.debug(current ? 'Enable' : 'Disable', 'port highlighting');
+ }
+
+ protected toggleToolbar() {
+ const on: boolean = !Boolean(this.prefsState.toolbar);
+ this.updatePrefsState(PREF_TOOLBAR, on ? 1 : 0);
+ this.log.debug('toggling toolbar', on ? 'shown' : 'hidden');
+ }
+
+ protected toggleHosts() {
+ const current: boolean = !Boolean(this.prefsState.hosts);
+ this.flashMsg = this.lionFn('hosts') + ' ' +
+ this.lionFn(current ? 'visible' : 'hidden');
+ this.updatePrefsState(PREF_HOSTS, current ? 1 : 0);
+ this.log.debug('toggling hosts: ', this.prefsState.hosts ? 'Show' : 'Hide');
+ }
+
+ protected toggleOfflineDevices() {
+ const on: boolean = !Boolean(this.prefsState.offdev);
+ this.flashMsg = this.lionFn(on ? 'show' : 'hide') +
+ ' ' + this.lionFn('fl_offline_devices');
+ this.updatePrefsState(PREF_OFFDEV, on ? 1 : 0);
+ this.log.debug('toggling offline devices', this.prefsState.offdev);
+ }
+
+
+ protected toggleAlarms() {
+ const on: boolean = !Boolean(this.prefsState.alarms);
+ this.flashMsg = this.lionFn(on ? 'show' : 'hide') + ' Alarms';
+ this.updatePrefsState(PREF_ALARMS, on ? 1 : 0);
+ this.log.debug('Alarms toggled', on);
+ }
+
+ protected resetZoom() {
+ const zoomMapExtents = ZoomUtils.zoomToWindowSize(
+ this.bannerHeight, this.window.innerWidth, this.window.innerHeight);
+ this.zoomDirective.changeZoomLevel(zoomMapExtents, false);
+ this.flashMsg = this.lionFn('fl_pan_zoom_reset');
+ }
+
+ protected equalizeMasters() {
+ this.wss.sendEvent('equalizeMasters', {});
+ this.flashMsg = this.lionFn('fl_eq_masters');
+ this.log.debug('equalizing masters');
+ }
+
+ /**
+ * If any nodes with fixed positions had been dragged out of place
+ * then put back where they belong
+ * If there are some devices selected reset only these
+ */
+ protected resetNodeLocation() {
+ const numNodes = this.force.resetNodeLocations();
+ this.flashMsg = this.lionFn('fl_reset_node_locations') +
+ '(' + String(numNodes) + ')';
+ this.log.debug('resetting ', numNodes, 'node(s) location');
+ }
+
+ /**
+ * Toggle floating nodes between pinned and frozen
+ * If there are floating nodes selected toggle only these
+ */
+ protected unpinOrFreezeNodes() {
+ const pinned: boolean = !Boolean(this.prefsState.pinned);
+ const numNodes = this.force.unpinOrFreezeNodes(pinned);
+ this.flashMsg = this.lionFn(pinned ?
+ 'fl_pinned_floating_nodes' : 'fl_unpinned_floating_nodes') +
+ '(' + String(numNodes) + ')';
+ this.updatePrefsState(PREF_PINNED, pinned ? 1 : 0);
+ this.log.debug('Toggling pinning for floating ', numNodes, 'nodes', pinned);
+ }
+
+ /**
+ * Check to see if this is needed anymore
+ * @param what - a key stroke
+ */
+ protected notValid(what) {
+ this.log.warn('topo.js getActionEntry(): Not a valid ' + what);
+ }
+
+ /**
+ * Check to see if this is needed anymore
+ * @param key - a key stroke
+ */
+ getActionEntry(key) {
+ let entry;
+
+ if (!key) {
+ this.notValid('key');
+ return null;
+ }
+
+ entry = this.actionMap()[key];
+
+ if (!entry) {
+ this.notValid('actionMap (' + key + ') entry');
+ return null;
+ }
+ return this.fs.isA(entry) || [entry, ''];
+ }
+
+ /**
+ * An event handler that updates the details panel as items are
+ * selected in the forcesvg layer
+ *
+ * @param nodesOrLink the item(s) to display details of
+ */
+ nodeSelected(nodesOrLink: UiElement[]) {
+ this.details.ngOnChanges({'selectedNodes':
+ new SimpleChange(undefined, nodesOrLink, true)});
+ }
+
+ /**
+ * Cancel traffic monitoring
+ */
+ cancelTraffic() {
+ this.flashMsg = this.lionFn('fl_monitoring_canceled');
+ this.trs.cancelTraffic();
+ }
+
+ changeMap(map: MapObject) {
+ this.mapSelShown = false; // Hide the MapSelector component
+ this.mapIdState = map;
+ this.ps.setPrefs(TOPO_MAPID_PREFS, this.mapIdState);
+ this.log.debug('Map has been changed to ', map);
+ }
+
+ mapExtentsZoom(zoomMapExtents: TopoZoomPrefs) {
+ // this.zoomDirective.updateZoomState(zoomPrefs.tx, zoomPrefs.ty, zoomPrefs.sc);
+ this.zoomDirective.changeZoomLevel(zoomMapExtents);
+ this.log.debug('Map zoom prefs updated', zoomMapExtents);
+ }
+
+ backgroundClicked(event: MouseEvent) {
+ const elemTagName = event.target['tagName'] + ' ' + event.target['id'];
+ if (BACKGROUND_ELEMENTS.includes(elemTagName)) {
+ this.force.updateSelected(
+ <SelectedEvent>{
+ uiElement: undefined,
+ deselecting: true
+ }
+ );
+ }
+ this.ts.cancelHighlights();
+ this.force.cancelAllLinkHighlightsNow();
+ }
+
+ /**
+ * Read the LION bundle for Toolbar and set up the lionFn
+ */
+ doLion() {
+ this.lionFn = this.lion.bundle('core.view.Topo');
+ }
+
+ /**
+ * A dummy implementation of the lionFn until the response is received and the LION
+ * bundle is received from the WebSocket
+ */
+ dummyLion(key: string): string {
+ return '%' + key + '%';
+ }
+}
diff --git a/web/gui2-topo-lib/lib/traffic.service.spec.ts b/web/gui2-topo-lib/lib/traffic.service.spec.ts
new file mode 100644
index 0000000..49ff94a
--- /dev/null
+++ b/web/gui2-topo-lib/lib/traffic.service.spec.ts
@@ -0,0 +1,72 @@
+/*
+ * Copyright 2018-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.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { TestBed } from '@angular/core/testing';
+
+import { TrafficService } from './traffic.service';
+import {FnService, LogService} from '../../gui2-fw-lib/public_api';
+import {ActivatedRoute, Params} from '@angular/router';
+import {of} from 'rxjs';
+
+class MockActivatedRoute extends ActivatedRoute {
+ constructor(params: Params) {
+ super();
+ this.queryParams = of(params);
+ }
+}
+
+describe('TrafficService', () => {
+ let logServiceSpy: jasmine.SpyObj<LogService>;
+ let ar: ActivatedRoute;
+ let fs: FnService;
+ let mockWindow: Window;
+
+ beforeEach(() => {
+ const logSpy = jasmine.createSpyObj('LogService', ['debug', 'warn', 'info']);
+ ar = new MockActivatedRoute({'debug': 'TestService'});
+ mockWindow = <any>{
+ innerWidth: 400,
+ innerHeight: 200,
+ navigator: {
+ userAgent: 'defaultUA'
+ },
+ location: <any>{
+ hostname: 'foo',
+ host: 'foo',
+ port: '80',
+ protocol: 'http',
+ search: { debug: 'true' },
+ href: 'ws://foo:123/onos/ui/websock/path',
+ absUrl: 'ws://foo:123/onos/ui/websock/path'
+ }
+ };
+ fs = new FnService(ar, logSpy, mockWindow);
+
+ TestBed.configureTestingModule({
+ providers: [TrafficService,
+ { provide: FnService, useValue: fs},
+ { provide: LogService, useValue: logSpy },
+ { provide: ActivatedRoute, useValue: ar },
+ { provide: 'Window', useFactory: (() => mockWindow ) }
+ ]
+ });
+ logServiceSpy = TestBed.get(LogService);
+ });
+
+ it('should be created', () => {
+ const service: TrafficService = TestBed.get(TrafficService);
+ expect(service).toBeTruthy();
+ });
+});
diff --git a/web/gui2-topo-lib/lib/traffic.service.ts b/web/gui2-topo-lib/lib/traffic.service.ts
new file mode 100644
index 0000000..cd23209
--- /dev/null
+++ b/web/gui2-topo-lib/lib/traffic.service.ts
@@ -0,0 +1,112 @@
+/*
+ * Copyright 2018-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.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { Injectable } from '@angular/core';
+import {LogService, WebSocketService} from '../../gui2-fw-lib/public_api';
+import {ForceSvgComponent} from './layer/forcesvg/forcesvg.component';
+
+export namespace TrafficType {
+ /**
+ * Toggle state for how the traffic should be displayed
+ */
+ export enum Enum { // Do not add an alias - they need to be number indexed
+ FLOWSTATSBYTES, // 0 flowStatsBytes
+ PORTSTATSBITSEC, // 1 portStatsBitSec
+ PORTSTATSPKTSEC // 2 portStatsPktSec
+ }
+
+ /**
+ * Add the method 'next()' to the TrafficType enum above
+ */
+ export function next(current: Enum) {
+ if (current === Enum.FLOWSTATSBYTES) {
+ return Enum.PORTSTATSBITSEC;
+ } else if (current === Enum.PORTSTATSBITSEC) {
+ return Enum.PORTSTATSPKTSEC;
+ } else if (current === Enum.PORTSTATSPKTSEC) {
+ return Enum.FLOWSTATSBYTES;
+ } else { // e.g. undefined
+ return Enum.PORTSTATSBITSEC;
+ }
+ }
+
+ export function literal(type: Enum) {
+ if (type === Enum.FLOWSTATSBYTES) {
+ return 'flowStatsBytes';
+ } else if (type === Enum.PORTSTATSBITSEC) {
+ return 'portStatsBitSec';
+ } else if (type === Enum.PORTSTATSPKTSEC) {
+ return 'portStatsPktSec';
+ }
+ }
+}
+
+/**
+ * ONOS GUI -- Traffic Service Module.
+ */
+@Injectable()
+export class TrafficService {
+ private handlers: string[] = [];
+ private openListener: any;
+ private trafficType: TrafficType.Enum;
+
+ constructor(
+ protected log: LogService,
+ protected wss: WebSocketService
+ ) {
+ this.log.debug('TrafficService constructed');
+ }
+
+ init(force: ForceSvgComponent) {
+ this.wss.bindHandlers(new Map<string, (data) => void>([
+ ['topo2Highlights', (data) => {
+ force.handleHighlights(data.devices, data.hosts, data.links, 5000);
+ }
+ ]
+ ]));
+
+ this.handlers.push('topo2Highlights');
+
+ // in case we fail over to a new server,
+ // listen for wsock-open events
+ this.openListener = this.wss.addOpenListener(() => this.wsOpen);
+ }
+
+ destroy() {
+ this.wss.unbindHandlers(this.handlers);
+ this.handlers.pop();
+ }
+
+ wsOpen(host: string, url: string) {
+ this.log.debug('topo2RequestAllTraffic: WSopen - cluster node:', host, 'URL:', url);
+ // tell the server we are ready to receive topo events
+ this.wss.sendEvent('topo2RequestAllTraffic', {
+ trafficType: TrafficType.literal(this.trafficType)
+ });
+ }
+
+ requestTraffic(trafficType: TrafficType.Enum) {
+ // tell the server we are ready to receive topology events
+ this.wss.sendEvent('topo2RequestAllTraffic', {
+ trafficType: TrafficType.literal(trafficType)
+ });
+ this.log.debug('Topo2Traffic: Show', trafficType);
+ }
+
+ cancelTraffic() {
+ this.wss.sendEvent('topo2CancelTraffic', {});
+ this.log.debug('Traffic monitoring canceled');
+ }
+}