GUI2 Extract Topology view in to its own library
Change-Id: I45597d0902c99b5b3d606966866cc518011c54a0
diff --git a/web/gui2/BUILD b/web/gui2/BUILD
index 16f4280..c1d78c5 100644
--- a/web/gui2/BUILD
+++ b/web/gui2/BUILD
@@ -120,6 +120,7 @@
"//web/gui2-fw-lib:onos-gui2-fw-npm-install",
"//web/gui2-fw-lib:onos-gui2-fw-ng-build",
"//web/gui2-fw-lib:gui2_fw_lib_ext_css",
+ "//web/gui2-topo-lib:gui2-topo-lib-build",
"//apps/faultmanagement/fm-gui2-lib:fm-gui2-lib-build",
":_root_level_files",
":_web_app_all",
@@ -140,6 +141,9 @@
" tar xf $$ROOT/$${FWLIB_FILES[0]} &&" +
" mv package/ node_modules/gui2-fw-lib/ &&" +
# Add in modules from external packages
+ " GUI2_TOPO_LIB_FILES=($(locations //web/gui2-topo-lib:gui2-topo-lib-build)) &&" + # An array of filenames - sorted by time created
+ " tar xf $$ROOT/$${GUI2_TOPO_LIB_FILES[0]} &&" +
+ " mv package/ node_modules/gui2-topo-lib/ &&" +
" FM_GUI2_LIB_FILES=($(locations //apps/faultmanagement/fm-gui2-lib:fm-gui2-lib-build)) &&" + # An array of filenames - sorted by time created
" tar xf $$ROOT/$${FM_GUI2_LIB_FILES[0]} &&" +
" mv package/ node_modules/fm-gui2-lib/ &&" +
diff --git a/web/gui2/README.md b/web/gui2/README.md
index 3996c95..b57cb55 100644
--- a/web/gui2/README.md
+++ b/web/gui2/README.md
@@ -88,7 +88,23 @@
ng test gui2-fw-lib
```
-This packages the Framework up in to __onos/web/gui2-fw-lib/dist/gui2-fw-lib/gui2-fw-lib-0.14.0.tgz__
+This packages the Framework up in to __onos/web/gui2-fw-lib/dist/gui2-fw-lib/gui2-fw-lib-2.0.0.tgz__
+
+## GUI2 Topo library
+The GUI2 __Topology__ is in __~/onos/web/gui2-topo-lib__ and the GUI __application__
+includes this Topology application through the __onos-routing-module__. The
+Topology app has its own README file.
+
+If you make any changes here or are using it for the first time it will need to be built
+```text
+pushd ~/onos/web/gui2-topo-lib && \
+ng build gui2-topo-lib && \
+cd dist/gui2-topo-lib && \
+npm pack && \
+popd && \
+npm install gui2-topo-lib
+```
+This packages the Framework up in to __onos/web/gui2-topo-lib/dist/gui2-topo-lib/gui2-topo-lib-2.0.0.tgz__
## GUI2 Application
The application contains the ONOS index.html and all of the tabular views and the topology view.
@@ -233,4 +249,4 @@
{
path: '',
redirectTo: 'device', // Default to devices view - change to topo in future
-```
\ No newline at end of file
+```
diff --git a/web/gui2/package-lock.json b/web/gui2/package-lock.json
index 846cc0f..6596486 100644
--- a/web/gui2/package-lock.json
+++ b/web/gui2/package-lock.json
@@ -5565,6 +5565,13 @@
"tslib": "1.9.3"
}
},
+ "gui2-topo-lib": {
+ "version": "file:../gui2-topo-lib/dist/gui2-topo-lib/gui2-topo-lib-2.0.0.tgz",
+ "integrity": "sha512-KILpP/vs5kSDK8TM6rw34ZOI4WZaRL92rRiRJswCEw8Omh86owi/FeGhwgTCg2Rk7RYum5325eELR0d1NDaKGQ==",
+ "requires": {
+ "tslib": "1.9.3"
+ }
+ },
"handle-thing": {
"version": "1.2.5",
"resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-1.2.5.tgz",
diff --git a/web/gui2/package.json b/web/gui2/package.json
index 3a7f747..58f8014 100644
--- a/web/gui2/package.json
+++ b/web/gui2/package.json
@@ -26,6 +26,7 @@
"d3": "^5.2.0",
"fm-gui2-lib": "file:../../apps/faultmanagement/fm-gui2-lib/dist/fm-gui2-lib/fm-gui2-lib-2.0.0.tgz",
"gui2-fw-lib": "file:../gui2-fw-lib/dist/gui2-fw-lib/gui2-fw-lib-2.0.0.tgz",
+ "gui2-topo-lib": "file:../gui2-topo-lib/dist/gui2-topo-lib/gui2-topo-lib-2.0.0.tgz",
"rxjs": "^6.0.0",
"topojson-client": "^3.0.0",
"zone.js": "^0.8.26"
diff --git a/web/gui2/src/main/webapp/app/onos-routing.module.ts b/web/gui2/src/main/webapp/app/onos-routing.module.ts
index 77bce5a..9cc5cc4 100644
--- a/web/gui2/src/main/webapp/app/onos-routing.module.ts
+++ b/web/gui2/src/main/webapp/app/onos-routing.module.ts
@@ -15,6 +15,7 @@
*/
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
+import { Gui2TopoLibModule } from 'gui2-topo-lib';
import { FmGui2LibModule } from 'fm-gui2-lib';
/**
@@ -78,11 +79,11 @@
path: 'meter',
loadChildren: 'app/view/meter/meter.module#MeterModule'
},
+ /* Comment out below section for running locally with 'ng serve' when developing */
{
path: 'topo2',
- loadChildren: 'app/view/topology/topology.module#TopologyModule'
+ loadChildren: 'gui2-topo-lib#Gui2TopoLibModule'
},
-/* Comment out below section for running locally with 'ng serve' when developing */
{
path: 'alarmTable',
loadChildren: 'fm-gui2-lib#FmGui2LibModule'
diff --git a/web/gui2/src/main/webapp/app/view/topology/README.md b/web/gui2/src/main/webapp/app/view/topology/README.md
deleted file mode 100644
index 35acd31..0000000
--- a/web/gui2/src/main/webapp/app/view/topology/README.md
+++ /dev/null
@@ -1,9 +0,0 @@
-# Topology
-
-This is the GUI2 version of the combined Topo and Topo2 views of the older version.
-
-It uses Angular 7 components extensively. TopologyComponent is the starting point
-for everything in it.
-
-This should all be moved to its own separate library once all debugging is done
-(it is slightly more difficult to debug the code when in a separate library)
\ No newline at end of file
diff --git a/web/gui2/src/main/webapp/app/view/topology/layer/backgroundsvg/backgroundsvg.component.css b/web/gui2/src/main/webapp/app/view/topology/layer/backgroundsvg/backgroundsvg.component.css
deleted file mode 100644
index 642c1c4..0000000
--- a/web/gui2/src/main/webapp/app/view/topology/layer/backgroundsvg/backgroundsvg.component.css
+++ /dev/null
@@ -1,20 +0,0 @@
-/*
- * 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/src/main/webapp/app/view/topology/layer/backgroundsvg/backgroundsvg.component.html b/web/gui2/src/main/webapp/app/view/topology/layer/backgroundsvg/backgroundsvg.component.html
deleted file mode 100644
index 9f8faf8..0000000
--- a/web/gui2/src/main/webapp/app/view/topology/layer/backgroundsvg/backgroundsvg.component.html
+++ /dev/null
@@ -1,29 +0,0 @@
-<!--
-~ 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/src/main/webapp/app/view/topology/layer/backgroundsvg/backgroundsvg.component.spec.ts b/web/gui2/src/main/webapp/app/view/topology/layer/backgroundsvg/backgroundsvg.component.spec.ts
deleted file mode 100644
index 7fb0b3f..0000000
--- a/web/gui2/src/main/webapp/app/view/topology/layer/backgroundsvg/backgroundsvg.component.spec.ts
+++ /dev/null
@@ -1,89 +0,0 @@
-/*
- * 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 { BackgroundSvgComponent } from './backgroundsvg.component';
-import {MapSvgComponent} from '../mapsvg/mapsvg.component';
-import {from} from 'rxjs';
-import {HttpClient} from '@angular/common/http';
-import {LocMeta, LogService, ZoomUtils} from 'gui2-fw-lib';
-import {MapObject} from '../maputils';
-import {ForceSvgComponent} from '../forcesvg/forcesvg.component';
-import {
- DeviceNodeSvgComponent,
- HostNodeSvgComponent, LinkSvgComponent, SubRegionNodeSvgComponent
-} from '../forcesvg/visuals';
-import {DraggableDirective} from '../forcesvg/draggable/draggable.directive';
-
-class MockHttpClient {
- get() {
- return from(['{"id":"app","icon":"nav_apps","cat":"PLATFORM","label":"Applications"}']);
- }
-
- subscribe() {}
-}
-
-describe('BackgroundSvgComponent', () => {
- let logServiceSpy: jasmine.SpyObj<LogService>;
- let component: BackgroundSvgComponent;
- let fixture: ComponentFixture<BackgroundSvgComponent>;
- const testmap: MapObject = <MapObject>{
- scale: 1.0,
- id: 'test',
- description: 'test map'
- };
-
- beforeEach(async(() => {
- const logSpy = jasmine.createSpyObj('LogService', ['info', 'debug', 'warn', 'error']);
-
- TestBed.configureTestingModule({
- declarations: [
- BackgroundSvgComponent,
- MapSvgComponent,
- ForceSvgComponent,
- DeviceNodeSvgComponent,
- HostNodeSvgComponent,
- SubRegionNodeSvgComponent,
- LinkSvgComponent,
- DraggableDirective
- ],
- providers: [
- { provide: LogService, useValue: logSpy },
- { provide: HttpClient, useClass: MockHttpClient },
- ]
- })
- .compileComponents();
-
- logServiceSpy = TestBed.get(LogService);
- }));
-
- beforeEach(() => {
- fixture = TestBed.createComponent(BackgroundSvgComponent);
- component = fixture.componentInstance;
- component.map = testmap;
- fixture.detectChanges();
- });
-
- it('should create', () => {
- expect(component).toBeTruthy();
- });
-
- 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/src/main/webapp/app/view/topology/layer/backgroundsvg/backgroundsvg.component.ts b/web/gui2/src/main/webapp/app/view/topology/layer/backgroundsvg/backgroundsvg.component.ts
deleted file mode 100644
index daa4fcb..0000000
--- a/web/gui2/src/main/webapp/app/view/topology/layer/backgroundsvg/backgroundsvg.component.ts
+++ /dev/null
@@ -1,107 +0,0 @@
-/*
- * 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';
-
-/**
- * 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/src/main/webapp/app/view/topology/layer/forcesvg/draggable/draggable.directive.spec.ts b/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/draggable/draggable.directive.spec.ts
deleted file mode 100644
index 94c61db..0000000
--- a/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/draggable/draggable.directive.spec.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-/*
- * 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';
-
-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/src/main/webapp/app/view/topology/layer/forcesvg/draggable/draggable.directive.ts b/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/draggable/draggable.directive.ts
deleted file mode 100644
index 474d7a8..0000000
--- a/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/draggable/draggable.directive.ts
+++ /dev/null
@@ -1,86 +0,0 @@
-/*
- * 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';
-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/src/main/webapp/app/view/topology/layer/forcesvg/forcesvg.component.css b/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/forcesvg.component.css
deleted file mode 100644
index addd41c..0000000
--- a/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/forcesvg.component.css
+++ /dev/null
@@ -1,20 +0,0 @@
-/*
- * 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/src/main/webapp/app/view/topology/layer/forcesvg/forcesvg.component.html b/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/forcesvg.component.html
deleted file mode 100644
index 58606e9..0000000
--- a/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/forcesvg.component.html
+++ /dev/null
@@ -1,104 +0,0 @@
-<!--
-~ 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]="host" [draggableInGraph]="graph">
- <svg:desc>Subregion nodes</svg:desc>
- </svg:g>
-</svg:g>
diff --git a/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/forcesvg.component.spec.ts b/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/forcesvg.component.spec.ts
deleted file mode 100644
index a834e73..0000000
--- a/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/forcesvg.component.spec.ts
+++ /dev/null
@@ -1,92 +0,0 @@
-/*
- * 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, LogService} from 'gui2-fw-lib';
-import {
- DeviceNodeSvgComponent,
- HostNodeSvgComponent, LinkSvgComponent,
- SubRegionNodeSvgComponent
-} from './visuals';
-import {DraggableDirective} from './draggable/draggable.directive';
-import {ActivatedRoute, Params} from '@angular/router';
-import {of} from 'rxjs';
-import {MapSvgComponent} from '../mapsvg/mapsvg.component';
-
-class MockActivatedRoute extends ActivatedRoute {
- constructor(params: Params) {
- super();
- this.queryParams = of(params);
- }
-}
-
-describe('ForceSvgComponent', () => {
- let fs: FnService;
- let ar: MockActivatedRoute;
- let windowMock: Window;
- let logServiceSpy: jasmine.SpyObj<LogService>;
- let component: ForceSvgComponent;
- let fixture: ComponentFixture<ForceSvgComponent>;
-
- 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({
- declarations: [
- ForceSvgComponent,
- DeviceNodeSvgComponent,
- HostNodeSvgComponent,
- SubRegionNodeSvgComponent,
- LinkSvgComponent,
- DraggableDirective,
- MapSvgComponent
- ],
- providers: [
- { provide: FnService, useValue: fs },
- { provide: LogService, useValue: logSpy },
- { provide: 'Window', useValue: windowMock },
- ]
- })
- .compileComponents();
- logServiceSpy = TestBed.get(LogService);
- }));
-
- beforeEach(() => {
- fixture = TestBed.createComponent(ForceSvgComponent);
- component = fixture.debugElement.componentInstance;
- fixture.detectChanges();
- });
-
- it('should create', () => {
- expect(component).toBeTruthy();
- });
-});
diff --git a/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/forcesvg.component.ts b/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/forcesvg.component.ts
deleted file mode 100644
index 7185625..0000000
--- a/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/forcesvg.component.ts
+++ /dev/null
@@ -1,519 +0,0 @@
-/*
- * 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,
- OnInit,
- Output,
- QueryList,
- SimpleChange,
- SimpleChanges,
- ViewChildren
-} from '@angular/core';
-import {
- LocMeta,
- LogService,
- MetaUi,
- WebSocketService,
- ZoomUtils
-} from 'gui2-fw-lib';
-import {
- Device,
- ForceDirectedGraph,
- Host,
- HostLabelToggle,
- LabelToggle,
- LayerType,
- Link,
- LinkHighlight,
- Location,
- ModelEventMemo,
- ModelEventType,
- Region,
- RegionLink,
- SubRegion,
- UiElement
-} from './models';
-import {
- DeviceNodeSvgComponent,
- HostNodeSvgComponent,
- LinkSvgComponent
-} from './visuals';
-import {LocationType} from '../backgroundsvg/backgroundsvg.component';
-
-interface UpdateMeta {
- id: string;
- class: string;
- memento: MetaUi;
-}
-
-/**
- * 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, OnChanges {
- @Input() deviceLabelToggle: LabelToggle = LabelToggle.NONE;
- @Input() hostLabelToggle: HostLabelToggle = HostLabelToggle.NONE;
- @Input() showHosts: 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>();
- private graph: ForceDirectedGraph;
- private _options: { width, height } = { width: 800, height: 600 };
-
- // 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
- */
- private static extractNodeName(endPtStr: string): string {
- const slash: number = endPtStr.indexOf('/');
- if (slash === -1) {
- return endPtStr;
- } else {
- const afterSlash = endPtStr.substr(slash + 1);
- if (afterSlash === 'None') {
- return endPtStr;
- } else {
- return endPtStr.substr(0, slash);
- }
- }
- }
-
- /**
- * 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): number {
- let changed: number = 0;
- for (const key of Object.keys(updatedNode)) {
- const o = updatedNode[key];
- if (key === 'id') {
- continue;
- } else if (o && typeof o === 'object' && o.constructor === Object) {
- changed += ForceSvgComponent.updateObject(existingNode[key], updatedNode[key]);
- } else if (existingNode[key] !== updatedNode[key]) {
- changed++;
- existingNode[key] = updatedNode[key];
- }
- }
- return changed;
- }
-
- @HostListener('window:resize', ['$event'])
- onResize(event) {
- this.graph.initSimulation(this.options);
- this.log.debug('Simulation reinit 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(this.options, 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", simulation);
- 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);
- }
-
- // If a node has a fixed location then assign it to fx and fy so
- // that it doesn't get affected by forces
- this.graph.nodes
- .forEach((n) => {
- const loc: Location = <Location>n['location'];
- if (loc && loc.locType === LocationType.GEO) {
- const position: MetaUi =
- ZoomUtils.convertGeoToCanvas(
- <LocMeta>{lng: loc.longOrX, lat: loc.latOrY});
- n.fx = position.x;
- n.fy = position.y;
- this.log.debug('Found node', n.id, 'with', loc.locType);
- }
- });
-
- // Associate the endpoints of each link with a real node
- this.graph.links = [];
- for (const linkIdx of Object.keys(this.regionData.links)) {
- const epA = ForceSvgComponent.extractNodeName(
- this.regionData.links[linkIdx].epA);
- this.regionData.links[linkIdx].source =
- this.graph.nodes.find((node) =>
- node.id === epA);
- const epB = ForceSvgComponent.extractNodeName(
- this.regionData.links[linkIdx].epB);
- 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;
-
- this.graph.initSimulation(this.options);
- this.graph.initNodes();
- this.graph.initLinks();
- this.log.debug('ForceSvgComponent input changed',
- this.graph.nodes.length, 'nodes,', this.graph.links.length, 'links');
- }
-
- this.ref.markForCheck();
- }
-
- /**
- * 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);
- }
-
- get options() {
- return this._options = {
- width: window.innerWidth,
- height: window.innerHeight
- };
- }
-
- /**
- * Iterate through all hosts and devices to deselect the previously selected
- * node. The emit an event to the parent that lets it know the selection has
- * changed.
- * @param selectedNode the newly selected node
- */
- updateSelected(selectedNode: UiElement): void {
- this.log.debug('Node or link selected', selectedNode ? selectedNode.id : 'none');
- this.devices
- .filter((d) =>
- selectedNode === undefined || d.device.id !== selectedNode.id)
- .forEach((d) => d.deselect());
- this.hosts
- .filter((h) =>
- selectedNode === undefined || h.host.id !== selectedNode.id)
- .forEach((h) => h.deselect());
-
- this.links
- .filter((l) =>
- selectedNode === undefined || l.link.id !== selectedNode.id)
- .forEach((l) => l.deselect());
- // Push the changes back up to parent (Topology Component)
- this.selectedNodeEvent.emit(selectedNode);
- }
-
- /**
- * 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) {
- const loc = (<Device>data).location;
- if (loc && loc.locType === LocationType.GEO) {
- const position =
- ZoomUtils.convertGeoToCanvas(<LocMeta>{ lng: loc.longOrX, lat: loc.latOrY});
- (<Device>data).fx = position.x;
- (<Device>data).fy = position.y;
- this.log.debug('Using long', loc.longOrX, 'lat', loc.latOrY, '(', position.x, position.y, ')');
- } else if (loc && loc.locType === LocationType.GRID) {
- (<Device>data).fx = loc.longOrX;
- (<Device>data).fy = loc.latOrY;
- this.log.debug('Using grid', loc.longOrX, loc.latOrY);
- } else {
- (<Device>data).fx = null;
- (<Device>data).fy = null;
- // (<Device>data).x = 500;
- // (<Device>data).y = 500;
- }
- 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 > 0) {
- this.log.debug('Device ', oldDevice.id, memo, ' - ', changes, 'changes');
- }
- } else {
- this.log.warn('Device ', memo, ' - not yet implemented', data);
- }
- break;
- case ModelEventType.HOST_ADDED_OR_UPDATED:
- if (memo === ModelEventMemo.ADDED) {
- this.regionData.hosts[this.visibleLayerIdx()].push(<Host>data);
- this.graph.nodes.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 > 0) {
- this.log.debug('Host ', oldHost.id, memo, ' - ', changes, 'changes');
- }
- } 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.warn('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 listLen = this.regionData.links.push(<RegionLink>data);
- const epA = ForceSvgComponent.extractNodeName(
- this.regionData.links[listLen - 1].epA);
- this.regionData.links[listLen - 1].source =
- this.graph.nodes.find((node) =>
- node.id === epA);
- const epB = ForceSvgComponent.extractNodeName(
- this.regionData.links[listLen - 1].epB);
- 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 added or updated - unexpected memo', memo);
- }
- break;
- default:
- this.log.error('Unexpected model event', type, 'for', subject);
- }
- this.ref.markForCheck();
- this.graph.initSimulation(this.options);
- this.graph.initNodes();
- this.graph.initLinks();
- }
-
- 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) === subject ||
- ForceSvgComponent.extractNodeName(l.epB) === 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
- * @param devices - an array of device highlights
- * @param hosts - an array of host highlights
- * @param links - an array of link highlights
- */
- handleHighlights(devices: Device[], hosts: Host[], links: LinkHighlight[]): void {
-
- if (devices.length > 0) {
- this.log.debug(devices.length, 'Devices highlighted');
- devices.forEach((dh) => {
- const deviceComponent: DeviceNodeSvgComponent = this.devices.find((d) => d.device.id === dh.id );
- if (deviceComponent) {
- deviceComponent.ngOnChanges(
- {'deviceHighlight': new SimpleChange(<Device>{}, dh, true)}
- );
- this.log.debug('Highlighting device', deviceComponent.device.id);
- } else {
- this.log.warn('Device component not found', dh.id);
- }
- });
- }
- if (hosts.length > 0) {
- this.log.debug(hosts.length, 'Hosts highlighted');
- hosts.forEach((hh) => {
- const hostComponent: HostNodeSvgComponent = this.hosts.find((h) => h.host.id === hh.id );
- if (hostComponent) {
- hostComponent.ngOnChanges(
- {'hostHighlight': new SimpleChange(<Host>{}, hh, true)}
- );
- this.log.debug('Highlighting host', hostComponent.host.id);
- }
- });
- }
- if (links.length > 0) {
- this.log.debug(links.length, 'Links highlighted');
- links.forEach((lh) => {
- const linkComponent: LinkSvgComponent = this.links.find((l) => l.link.id === lh.id );
- if (linkComponent) { // A link might not be present is hosts viewing is switched off
- linkComponent.ngOnChanges(
- {'linkHighlight': new SimpleChange(<LinkHighlight>{}, lh, true)}
- );
- // this.log.debug('Highlighting link', linkComponent.link.id, lh.css, lh.label);
- }
- });
- }
- }
-
- /**
- * 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('updateMeta', <UpdateMeta>{
- id: id,
- class: klass,
- memento: newLocation
- });
- this.log.debug(klass, id, 'has been moved to', newLocation);
- }
-
- resetNodeLocations() {
- this.devices.forEach((d) => {
- d.resetNodeLocation();
- });
- }
-}
-
diff --git a/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/models/force-directed-graph.spec.ts b/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/models/force-directed-graph.spec.ts
deleted file mode 100644
index bdcd5c5..0000000
--- a/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/models/force-directed-graph.spec.ts
+++ /dev/null
@@ -1,109 +0,0 @@
-/*
- * 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';
-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.initSimulation(options);
- fdg.initNodes();
- logServiceSpy = TestBed.get(LogService);
- });
-
- afterEach(() => {
- fdg.stopSimulation();
- fdg.nodes = [];
- fdg.links = [];
- fdg.initSimulation(options);
- });
-
- 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.initSimulation(options);
- // expect(fdg.initLinks).toHaveBeenCalled();
- // });
-
- it ('throws error on no options', () => {
- expect(fdg.initSimulation).toThrowError('missing options when initializing simulation');
- });
-
-
-
-});
diff --git a/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/models/force-directed-graph.ts b/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/models/force-directed-graph.ts
deleted file mode 100644
index 24dd029..0000000
--- a/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/models/force-directed-graph.ts
+++ /dev/null
@@ -1,150 +0,0 @@
-/*
- * 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';
-
-const FORCES = {
- LINKS: 1 / 50,
- COLLISION: 1,
- GRAVITY: 0.4,
- FRICTION: 0.7
-};
-
-const CHARGES = {
- device: -80,
- host: -200,
- region: -80,
- _def_: -120
-};
-
-const LINK_DISTANCE = {
- // note: key is link.type
- direct: 100,
- optical: 120,
- UiEdgeLink: 100,
- _def_: 50,
-};
-
-const LINK_STRENGTH = {
- // note: key is link.type
- // range: {0.0 ... 1.0}
- _def_: 0.1
-};
-
-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
- */
-export class ForceDirectedGraph {
- public ticker: EventEmitter<d3.Simulation<Node, Link>> = new EventEmitter();
- public simulation: d3.Simulation<any, any>;
-
- public nodes: Node[] = [];
- public links: Link[] = [];
-
- constructor(options: Options, public log: LogService) {
- this.initSimulation(options);
- }
-
- initNodes() {
- if (!this.simulation) {
- throw new Error('simulation was not initialized yet');
- }
-
- this.simulation.nodes(this.nodes);
- }
-
- initLinks() {
- if (!this.simulation) {
- throw new Error('simulation was not initialized yet');
- }
-
- // Initializing the links force simulation
- this.simulation.force('links',
- d3.forceLink(this.links)
- .strength(this.strength.bind(this))
- .distance(this.distance.bind(this))
- );
- }
-
- charges(node) {
- const nodeType = node.nodeType;
- return CHARGES[nodeType] || CHARGES._def_;
- }
-
- distance(node) {
- const nodeType = node.nodeType;
- return LINK_DISTANCE[nodeType] || LINK_DISTANCE._def_;
- }
-
- strength(node) {
- const nodeType = node.nodeType;
- return LINK_STRENGTH[nodeType] || LINK_STRENGTH._def_;
- }
-
- initSimulation(options: Options) {
- if (!options || !options.width || !options.height) {
- throw new Error('missing options when initializing simulation');
- }
-
- /** Creating the simulation */
- if (!this.simulation) {
- 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));
-
- // Connecting the d3 ticker to an angular event emitter
- this.simulation.on('tick', function () {
- ticker.emit(this);
- });
-
- this.initNodes();
- // this.initLinks();
- }
-
- /** Updating the central force of the simulation */
- this.simulation.force('centers', d3.forceCenter(options.width / 2, options.height / 2));
-
- /** Restarting the simulation internal timer */
- this.simulation.restart();
- }
-
- stopSimulation() {
- this.simulation.stop();
- this.log.debug('Simulation stopped');
- }
-
- restartSimulation() {
- this.simulation.restart();
- this.log.debug('Simulation restarted');
- }
-}
diff --git a/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/models/index.ts b/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/models/index.ts
deleted file mode 100644
index 36fd2e7..0000000
--- a/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/models/index.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-/*
- * 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/src/main/webapp/app/view/topology/layer/forcesvg/models/link.ts b/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/models/link.ts
deleted file mode 100644
index 28f0b7c..0000000
--- a/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/models/link.ts
+++ /dev/null
@@ -1,91 +0,0 @@
-/*
- * 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;
-
- // 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;
- }
-
- 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 {
- rollup: RegionRollup[]; // Links in sub regions represented by this one 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;
-}
diff --git a/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/models/node.ts b/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/models/node.ts
deleted file mode 100644
index d3219b4..0000000
--- a/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/models/node.ts
+++ /dev/null
@@ -1,218 +0,0 @@
-/*
- * 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 {MetaUi} from 'gui2-fw-lib';
-
-export interface UiElement {
- index?: number;
- id: string;
-}
-
-/**
- * Toggle state for how device labels should be displayed
- */
-export enum LabelToggle {
- NONE,
- ID,
- NAME
-}
-
-/**
- * Add the method 'next()' to the LabelToggle enum above
- */
-export namespace LabelToggle {
- export function next(current: LabelToggle) {
- if (current === LabelToggle.NONE) {
- return LabelToggle.ID;
- } else if (current === LabelToggle.ID) {
- return LabelToggle.NAME;
- } else if (current === LabelToggle.NAME) {
- return LabelToggle.NONE;
- }
- }
-}
-
-/**
- * Toggle state for how host labels should be displayed
- */
-export enum HostLabelToggle {
- NONE,
- NAME,
- IP,
- MAC
-}
-
-/**
- * Add the method 'next()' to the HostLabelToggle enum above
- */
-export namespace HostLabelToggle {
- export function next(current: HostLabelToggle) {
- if (current === HostLabelToggle.NONE) {
- return HostLabelToggle.NAME;
- } else if (current === HostLabelToggle.NAME) {
- return HostLabelToggle.IP;
- } else if (current === HostLabelToggle.IP) {
- return HostLabelToggle.MAC;
- } else if (current === HostLabelToggle.MAC) {
- return HostLabelToggle.NONE;
- }
- }
-}
-
-/**
- * Toggle state for how the grid should be displayed
- */
-export enum GridDisplayToggle {
- GRIDNONE,
- GRID1000,
- GRIDGEO,
- GRIDBOTH
-}
-
-/**
- * Add the method 'next()' to the GridDisplayToggle enum above
- */
-export namespace GridDisplayToggle {
- export function next(current: GridDisplayToggle) {
- if (current === GridDisplayToggle.GRIDNONE) {
- return GridDisplayToggle.GRID1000;
- } else if (current === GridDisplayToggle.GRID1000) {
- return GridDisplayToggle.GRIDGEO;
- } else if (current === GridDisplayToggle.GRIDGEO) {
- return GridDisplayToggle.GRIDBOTH;
- } else if (current === GridDisplayToggle.GRIDBOTH) {
- return GridDisplayToggle.GRIDNONE;
- }
- }
-}
-
-/**
- * model of the topo2CurrentRegion device props from Device below
- */
-export interface DeviceProps {
- latitude: number;
- longitude: number;
- name: string;
- locType: LocationType;
- uiType: string;
- channelId: string;
- managementAddress: string;
- protocol: 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 abstract 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;
- id: string;
-
- protected constructor(id) {
- this.id = id;
- this.x = 0;
- this.y = 0;
- }
-}
-
-/**
- * model of the topo2CurrentRegion device from Region below
- */
-export class Device extends Node {
- id: string;
- layer: LayerType;
- location: Location;
- metaUi: MetaUi;
- master: string;
- online: boolean;
- props: DeviceProps;
- type: string;
-
- constructor(id: string) {
- super(id);
- }
-}
-
-/**
- * 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);
- }
-}
-
-
-/**
- * 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
-}
-
-/**
- * Enumerated values for topology update event memo field
- */
-export enum ModelEventMemo {
- ADDED = 'added',
- REMOVED = 'removed',
- UPDATED = 'updated'
-}
-
diff --git a/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/models/regions.ts b/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/models/regions.ts
deleted file mode 100644
index 3c1894b..0000000
--- a/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/models/regions.ts
+++ /dev/null
@@ -1,80 +0,0 @@
-/*
- * 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/src/main/webapp/app/view/topology/layer/forcesvg/visuals/devicenodesvg/devicenodesvg.component.css b/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/visuals/devicenodesvg/devicenodesvg.component.css
deleted file mode 100644
index 204b85c..0000000
--- a/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/visuals/devicenodesvg/devicenodesvg.component.css
+++ /dev/null
@@ -1,51 +0,0 @@
-/*
- * 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;
-}
\ No newline at end of file
diff --git a/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/visuals/devicenodesvg/devicenodesvg.component.html b/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/visuals/devicenodesvg/devicenodesvg.component.html
deleted file mode 100644
index 399955c..0000000
--- a/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/visuals/devicenodesvg/devicenodesvg.component.html
+++ /dev/null
@@ -1,91 +0,0 @@
-<!--
-~ 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)">
- <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" style="fill: url(#diagonal_blue)">
- </svg:rect>
- <!-- 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>
\ No newline at end of file
diff --git a/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/visuals/devicenodesvg/devicenodesvg.component.spec.ts b/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/visuals/devicenodesvg/devicenodesvg.component.spec.ts
deleted file mode 100644
index b490605..0000000
--- a/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/visuals/devicenodesvg/devicenodesvg.component.spec.ts
+++ /dev/null
@@ -1,75 +0,0 @@
-/*
- * 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 {IconService, LogService} from 'gui2-fw-lib';
-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';
-
-class MockActivatedRoute extends ActivatedRoute {
- constructor(params: Params) {
- super();
- this.queryParams = of(params);
- }
-}
-
-class MockIconService {
- loadIconDef() { }
-}
-
-describe('DeviceNodeSvgComponent', () => {
- let logServiceSpy: jasmine.SpyObj<LogService>;
- let component: DeviceNodeSvgComponent;
- let fixture: ComponentFixture<DeviceNodeSvgComponent>;
- 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;
-
- TestBed.configureTestingModule({
- imports: [ BrowserAnimationsModule ],
- declarations: [ DeviceNodeSvgComponent ],
- providers: [
- { provide: LogService, useValue: logSpy },
- { provide: ActivatedRoute, useValue: ar },
- { provide: ChangeDetectorRef, useClass: ChangeDetectorRef },
- { provide: IconService, useClass: MockIconService }
- ]
- })
- .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/src/main/webapp/app/view/topology/layer/forcesvg/visuals/devicenodesvg/devicenodesvg.component.ts b/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/visuals/devicenodesvg/devicenodesvg.component.ts
deleted file mode 100644
index 87b7e0a..0000000
--- a/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/visuals/devicenodesvg/devicenodesvg.component.ts
+++ /dev/null
@@ -1,155 +0,0 @@
-/*
- * 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, Output,
- SimpleChanges,
-} from '@angular/core';
-import {Device, LabelToggle, UiElement} from '../../models';
-import {IconService, LocMeta, LogService, MetaUi, ZoomUtils} from 'gui2-fw-lib';
-import {NodeVisual} from '../nodevisual';
-import {animate, state, style, transition, trigger} from '@angular/animations';
-import {LocationType} from '../../../backgroundsvg/backgroundsvg.component';
-
-/**
- * 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 OnChanges {
- @Input() device: Device;
- @Input() scale: number = 1.0;
- @Input() labelToggle: LabelToggle = LabelToggle.NONE;
- @Output() selectedEvent = new EventEmitter<UiElement>();
- textWidth: number = 36;
- constructor(
- protected log: LogService,
- private is: IconService,
- private ref: ChangeDetectorRef
- ) {
- super();
- }
-
- /**
- * 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;
- }
- }
- this.ref.markForCheck();
- }
-
- /**
- * 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;
- }
- }
-
- resetNodeLocation(): void {
- this.log.debug('Resetting device', this.device.id, this.device.type);
- let origLoc: MetaUi;
-
- if (!this.device.location || this.device.location.locType === LocationType.NONE) {
- // No location - nothing to do
- return;
- } else if (this.device.location.locType === LocationType.GEO) {
- origLoc = ZoomUtils.convertGeoToCanvas(<LocMeta>{
- lng: this.device.location.longOrX,
- lat: this.device.location.latOrY
- });
- } else if (this.device.location.locType === LocationType.GRID) {
- origLoc = ZoomUtils.convertXYtoGeo(
- this.device.location.longOrX, this.device.location.latOrY);
- }
- this.device.metaUi = origLoc;
- this.device['fx'] = origLoc.x;
- this.device['fy'] = origLoc.y;
- }
-}
diff --git a/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/visuals/hostnodesvg/hostnodesvg.component.css b/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/visuals/hostnodesvg/hostnodesvg.component.css
deleted file mode 100644
index 92a114f..0000000
--- a/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/visuals/hostnodesvg/hostnodesvg.component.css
+++ /dev/null
@@ -1,43 +0,0 @@
-/*
- * 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/src/main/webapp/app/view/topology/layer/forcesvg/visuals/hostnodesvg/hostnodesvg.component.html b/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/visuals/hostnodesvg/hostnodesvg.component.html
deleted file mode 100644
index ccce65a..0000000
--- a/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/visuals/hostnodesvg/hostnodesvg.component.html
+++ /dev/null
@@ -1,70 +0,0 @@
-<!--
-~ 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)">
- <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>
\ No newline at end of file
diff --git a/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/visuals/hostnodesvg/hostnodesvg.component.spec.ts b/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/visuals/hostnodesvg/hostnodesvg.component.spec.ts
deleted file mode 100644
index e3efb3f..0000000
--- a/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/visuals/hostnodesvg/hostnodesvg.component.spec.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-/*
- * 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';
-import {Host} from '../../models';
-import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
-import {ChangeDetectorRef} from '@angular/core';
-
-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 ],
- 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/src/main/webapp/app/view/topology/layer/forcesvg/visuals/hostnodesvg/hostnodesvg.component.ts b/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/visuals/hostnodesvg/hostnodesvg.component.ts
deleted file mode 100644
index fc55271..0000000
--- a/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/visuals/hostnodesvg/hostnodesvg.component.ts
+++ /dev/null
@@ -1,70 +0,0 @@
-/*
- * 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 {Host, HostLabelToggle, Node} from '../../models';
-import {LogService} from 'gui2-fw-lib';
-import {NodeVisual} 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 = HostLabelToggle.IP;
- @Output() selectedEvent = new EventEmitter<Node>();
-
- constructor(
- protected log: LogService
- ) {
- super();
- }
-
- ngOnChanges(changes: SimpleChanges) {
- if (!this.host.x) {
- this.host.x = 0;
- this.host.y = 0;
- }
- }
-
- hostName(): string {
- if (this.host === undefined) {
- return undefined;
- } else if (this.labelToggle === HostLabelToggle.IP) {
- return this.host.ips.join(',');
- } else if (this.labelToggle === HostLabelToggle.MAC) {
- return this.host.id;
- } else {
- return this.host.id; // Todo - replace with a friendly name
- }
-
- }
-}
diff --git a/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/visuals/index.ts b/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/visuals/index.ts
deleted file mode 100644
index 60ab90b..0000000
--- a/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/visuals/index.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-/*
- * 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 './linksvg/linksvg.component';
-export * from './devicenodesvg/devicenodesvg.component';
-export * from './hostnodesvg/hostnodesvg.component';
-export * from './subregionnodesvg/subregionnodesvg.component';
diff --git a/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/visuals/linksvg/linksvg.component.css b/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/visuals/linksvg/linksvg.component.css
deleted file mode 100644
index 58548c4..0000000
--- a/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/visuals/linksvg/linksvg.component.css
+++ /dev/null
@@ -1,149 +0,0 @@
-/*
- * 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 5;
- 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/src/main/webapp/app/view/topology/layer/forcesvg/visuals/linksvg/linksvg.component.html b/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/visuals/linksvg/linksvg.component.html
deleted file mode 100644
index c856763..0000000
--- a/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/visuals/linksvg/linksvg.component.html
+++ /dev/null
@@ -1,100 +0,0 @@
-<!--
-~ 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':'', highlighted]"
- [ngStyle]="{'stroke-width': (enhanced ? 4 : 2) * scale + 'px'}"
- (click)="toggleSelected(link)"
- (mouseover)="enhance()"
- [attr.filter]="highlighted?'url(#glow)':'none'">
-</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"
- >{{ 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/src/main/webapp/app/view/topology/layer/forcesvg/visuals/linksvg/linksvg.component.spec.ts b/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/visuals/linksvg/linksvg.component.spec.ts
deleted file mode 100644
index 7626ff5..0000000
--- a/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/visuals/linksvg/linksvg.component.spec.ts
+++ /dev/null
@@ -1,76 +0,0 @@
-/*
- * 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';
-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/src/main/webapp/app/view/topology/layer/forcesvg/visuals/linksvg/linksvg.component.ts b/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/visuals/linksvg/linksvg.component.ts
deleted file mode 100644
index eab533f..0000000
--- a/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/visuals/linksvg/linksvg.component.ts
+++ /dev/null
@@ -1,129 +0,0 @@
-/*
- * 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';
-import {NodeVisual} from '../nodevisual';
-import {animate, state, style, transition, trigger} from '@angular/animations';
-
-interface Point {
- x: number;
- y: number;
-}
-
-@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() highlighted: string = '';
- @Input() highlightsEnabled: boolean = true;
- @Input() label: string;
- @Input() scale = 1.0;
- isHighlighted: boolean = false;
- @Output() selectedEvent = new EventEmitter<UiElement>();
- @Output() enhancedEvent = new EventEmitter<Link>();
- enhanced: boolean = false;
- labelPosSrc: Point = {x: 0, y: 0};
- labelPosTgt: Point = {x: 0, y: 0};
-
- constructor(
- protected log: LogService,
- private ref: ChangeDetectorRef
- ) {
- super();
- }
-
- ngOnChanges(changes: SimpleChanges) {
- if (changes['linkHighlight']) {
- const hl: LinkHighlight = changes['linkHighlight'].currentValue;
- this.highlighted = hl.css;
- this.label = hl.label;
- this.isHighlighted = true;
- setTimeout(() => {
- this.isHighlighted = false;
- this.highlighted = '';
- this.ref.markForCheck();
- }, 4990);
-
- }
-
- this.ref.markForCheck();
- }
-
- 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/src/main/webapp/app/view/topology/layer/forcesvg/visuals/nodevisual.ts b/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/visuals/nodevisual.ts
deleted file mode 100644
index a41df62..0000000
--- a/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/visuals/nodevisual.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-/*
- * 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';
-
-/**
- * A base class for the Host and Device components
- */
-export abstract class NodeVisual {
- selected: boolean;
- selectedEvent = new EventEmitter<UiElement>();
-
- toggleSelected(uiElement: UiElement) {
- this.selected = !this.selected;
- if (this.selected) {
- this.selectedEvent.emit(uiElement);
- } else {
- this.selectedEvent.emit();
- }
- }
-
- deselect() {
- this.selected = false;
- }
-}
diff --git a/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/visuals/subregionnodesvg/subregionnodesvg.component.css b/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/visuals/subregionnodesvg/subregionnodesvg.component.css
deleted file mode 100644
index 87c23bd..0000000
--- a/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/visuals/subregionnodesvg/subregionnodesvg.component.css
+++ /dev/null
@@ -1,20 +0,0 @@
-/*
- * 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/src/main/webapp/app/view/topology/layer/forcesvg/visuals/subregionnodesvg/subregionnodesvg.component.html b/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/visuals/subregionnodesvg/subregionnodesvg.component.html
deleted file mode 100644
index 5760634..0000000
--- a/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/visuals/subregionnodesvg/subregionnodesvg.component.html
+++ /dev/null
@@ -1,23 +0,0 @@
-<!--
-~ 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/src/main/webapp/app/view/topology/layer/forcesvg/visuals/subregionnodesvg/subregionnodesvg.component.spec.ts b/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/visuals/subregionnodesvg/subregionnodesvg.component.spec.ts
deleted file mode 100644
index d6f6446..0000000
--- a/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/visuals/subregionnodesvg/subregionnodesvg.component.spec.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-/*
- * 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/src/main/webapp/app/view/topology/layer/forcesvg/visuals/subregionnodesvg/subregionnodesvg.component.ts b/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/visuals/subregionnodesvg/subregionnodesvg.component.ts
deleted file mode 100644
index 5dd4736..0000000
--- a/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/visuals/subregionnodesvg/subregionnodesvg.component.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-/*
- * 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/src/main/webapp/app/view/topology/layer/gridsvg/gridsvg.component.css b/web/gui2/src/main/webapp/app/view/topology/layer/gridsvg/gridsvg.component.css
deleted file mode 100644
index 056a0a0..0000000
--- a/web/gui2/src/main/webapp/app/view/topology/layer/gridsvg/gridsvg.component.css
+++ /dev/null
@@ -1,25 +0,0 @@
-/*
- * 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/src/main/webapp/app/view/topology/layer/gridsvg/gridsvg.component.html b/web/gui2/src/main/webapp/app/view/topology/layer/gridsvg/gridsvg.component.html
deleted file mode 100644
index c183ac1..0000000
--- a/web/gui2/src/main/webapp/app/view/topology/layer/gridsvg/gridsvg.component.html
+++ /dev/null
@@ -1,48 +0,0 @@
-<!--
-~ 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/src/main/webapp/app/view/topology/layer/gridsvg/gridsvg.component.spec.ts b/web/gui2/src/main/webapp/app/view/topology/layer/gridsvg/gridsvg.component.spec.ts
deleted file mode 100644
index 48a031a..0000000
--- a/web/gui2/src/main/webapp/app/view/topology/layer/gridsvg/gridsvg.component.spec.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-/*
- * 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/src/main/webapp/app/view/topology/layer/gridsvg/gridsvg.component.ts b/web/gui2/src/main/webapp/app/view/topology/layer/gridsvg/gridsvg.component.ts
deleted file mode 100644
index e0934be..0000000
--- a/web/gui2/src/main/webapp/app/view/topology/layer/gridsvg/gridsvg.component.ts
+++ /dev/null
@@ -1,116 +0,0 @@
-/*
- * 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/src/main/webapp/app/view/topology/layer/mapsvg/mapsvg.component.css b/web/gui2/src/main/webapp/app/view/topology/layer/mapsvg/mapsvg.component.css
deleted file mode 100644
index d35aa7b..0000000
--- a/web/gui2/src/main/webapp/app/view/topology/layer/mapsvg/mapsvg.component.css
+++ /dev/null
@@ -1,26 +0,0 @@
-/*
- * 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/src/main/webapp/app/view/topology/layer/mapsvg/mapsvg.component.html b/web/gui2/src/main/webapp/app/view/topology/layer/mapsvg/mapsvg.component.html
deleted file mode 100644
index cc2a794..0000000
--- a/web/gui2/src/main/webapp/app/view/topology/layer/mapsvg/mapsvg.component.html
+++ /dev/null
@@ -1,22 +0,0 @@
-<!--
-~ 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 class="topo-map"
- *ngFor="let f of geodata?.features"
- xmlns:svg="http://www.w3.org/2000/svg"
- [attr.d]="pathGenerator(f)">
- <svg:title>{{ f.id }} {{f.properties?.name}}</svg:title>
-</svg:path>
diff --git a/web/gui2/src/main/webapp/app/view/topology/layer/mapsvg/mapsvg.component.spec.ts b/web/gui2/src/main/webapp/app/view/topology/layer/mapsvg/mapsvg.component.spec.ts
deleted file mode 100644
index ab73820..0000000
--- a/web/gui2/src/main/webapp/app/view/topology/layer/mapsvg/mapsvg.component.spec.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-/*
- * 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';
-
-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/src/main/webapp/app/view/topology/layer/mapsvg/mapsvg.component.ts b/web/gui2/src/main/webapp/app/view/topology/layer/mapsvg/mapsvg.component.ts
deleted file mode 100644
index 679bfd4..0000000
--- a/web/gui2/src/main/webapp/app/view/topology/layer/mapsvg/mapsvg.component.ts
+++ /dev/null
@@ -1,174 +0,0 @@
-/*
- * 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';
-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
- */
-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(
- 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';
- }
-
- static scale () {
- return d3.geoTransform({
- point: function(x, y) {
- this.stream.point(x, -y); // 1-1 mapping but invert y-axis
- }
- });
- }
-
- /**
- * 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/src/main/webapp/app/view/topology/layer/maputils.ts b/web/gui2/src/main/webapp/app/view/topology/layer/maputils.ts
deleted file mode 100644
index 45c3140..0000000
--- a/web/gui2/src/main/webapp/app/view/topology/layer/maputils.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-/*
- * 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/src/main/webapp/app/view/topology/layer/nodeviceconnectedsvg/nodeviceconnectedsvg.component.css b/web/gui2/src/main/webapp/app/view/topology/layer/nodeviceconnectedsvg/nodeviceconnectedsvg.component.css
deleted file mode 100644
index 7897595..0000000
--- a/web/gui2/src/main/webapp/app/view/topology/layer/nodeviceconnectedsvg/nodeviceconnectedsvg.component.css
+++ /dev/null
@@ -1,34 +0,0 @@
-/*
- * 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/src/main/webapp/app/view/topology/layer/nodeviceconnectedsvg/nodeviceconnectedsvg.component.html b/web/gui2/src/main/webapp/app/view/topology/layer/nodeviceconnectedsvg/nodeviceconnectedsvg.component.html
deleted file mode 100644
index 17fba06..0000000
--- a/web/gui2/src/main/webapp/app/view/topology/layer/nodeviceconnectedsvg/nodeviceconnectedsvg.component.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<!--
-~ 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" transform="translate(500,500)" style="visibility: visible;">
- <svg:g id="reposition" #reposition [attr.transform]="centre(reposition.getBBox())">
- <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>
-</svg:g>
\ No newline at end of file
diff --git a/web/gui2/src/main/webapp/app/view/topology/layer/nodeviceconnectedsvg/nodeviceconnectedsvg.component.spec.ts b/web/gui2/src/main/webapp/app/view/topology/layer/nodeviceconnectedsvg/nodeviceconnectedsvg.component.spec.ts
deleted file mode 100644
index 891a3fb..0000000
--- a/web/gui2/src/main/webapp/app/view/topology/layer/nodeviceconnectedsvg/nodeviceconnectedsvg.component.spec.ts
+++ /dev/null
@@ -1,99 +0,0 @@
-/*
- * 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';
-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>{
- };
- fs = new FnService(ar, logSpy, windowMock);
-
- 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: '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/src/main/webapp/app/view/topology/layer/nodeviceconnectedsvg/nodeviceconnectedsvg.component.ts b/web/gui2/src/main/webapp/app/view/topology/layer/nodeviceconnectedsvg/nodeviceconnectedsvg.component.ts
deleted file mode 100644
index a245fad..0000000
--- a/web/gui2/src/main/webapp/app/view/topology/layer/nodeviceconnectedsvg/nodeviceconnectedsvg.component.ts
+++ /dev/null
@@ -1,90 +0,0 @@
-/*
- * 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, OnInit } from '@angular/core';
-import { ViewControllerImpl } from '../viewcontroller';
-import {
- FnService,
- LogService,
- PrefsService,
- IconService,
- SvgUtilService, LionService
-} from 'gui2-fw-lib';
-
-/**
- * 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 OnInit {
- lionFn; // Function
-
- constructor(
- protected fs: FnService,
- protected log: LogService,
- protected ps: PrefsService,
- protected sus: SvgUtilService,
- private lion: LionService
- ) {
- 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');
- }
-
- /*
- * The whole SVG canvas is based on a 1000 by 1000 box
- */
- centre(repositionBox: SVGRect) {
- const scale: number = Number.parseFloat((1000 / repositionBox.width).toFixed(3));
- repositionBox.x -= Number.parseFloat((repositionBox.width * scale / 2).toFixed(0));
- repositionBox.y -= Number.parseFloat((repositionBox.height * scale / 2).toFixed(0));
- return this.sus.translate([repositionBox.x, repositionBox.y]) + '' + this.sus.scale(scale, scale);
- }
-
- /**
- * 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/src/main/webapp/app/view/topology/layer/viewcontroller.ts b/web/gui2/src/main/webapp/app/view/topology/layer/viewcontroller.ts
deleted file mode 100644
index 1b40195..0000000
--- a/web/gui2/src/main/webapp/app/view/topology/layer/viewcontroller.ts
+++ /dev/null
@@ -1,82 +0,0 @@
-/*
- * 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';
-
-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/src/main/webapp/app/view/topology/layer/zoomable.directive.spec.ts b/web/gui2/src/main/webapp/app/view/topology/layer/zoomable.directive.spec.ts
deleted file mode 100644
index 23d75c5..0000000
--- a/web/gui2/src/main/webapp/app/view/topology/layer/zoomable.directive.spec.ts
+++ /dev/null
@@ -1,72 +0,0 @@
-/*
- * 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 { ZoomableDirective } from './zoomable.directive';
-import {inject, TestBed} from '@angular/core/testing';
-import {LogService, ConsoleLoggerService, FnService} from 'gui2-fw-lib';
-import {ElementRef} from '@angular/core';
-import {ActivatedRoute, Params} from '@angular/router';
-import {of} from 'rxjs';
-
-class MockActivatedRoute extends ActivatedRoute {
- constructor(params: Params) {
- super();
- this.queryParams = of(params);
- }
-}
-
-describe('ZoomableDirective', () => {
- let fs: FnService;
- let ar: MockActivatedRoute;
- let log: LogService;
- let mockWindow: Window;
-
- beforeEach(() => {
- log = new ConsoleLoggerService();
- ar = new MockActivatedRoute({ 'debug': 'txrx' });
-
- mockWindow = <any>{
- navigator: {
- userAgent: 'HeadlessChrome',
- vendor: 'Google Inc.'
- },
- 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, log, mockWindow);
-
- TestBed.configureTestingModule({
- providers: [ZoomableDirective,
- { provide: FnService, useValue: fs },
- { provide: LogService, useValue: log },
- { provide: 'Window', useValue: mockWindow },
- { provide: ElementRef, useValue: mockWindow }
- ]
- });
- });
-
- it('should create an instance', inject([ZoomableDirective], (directive: ZoomableDirective) => {
-
- expect(directive).toBeTruthy();
- }));
-});
diff --git a/web/gui2/src/main/webapp/app/view/topology/layer/zoomable.directive.ts b/web/gui2/src/main/webapp/app/view/topology/layer/zoomable.directive.ts
deleted file mode 100644
index 2020a42..0000000
--- a/web/gui2/src/main/webapp/app/view/topology/layer/zoomable.directive.ts
+++ /dev/null
@@ -1,121 +0,0 @@
-/*
- * 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,
- Input,
- OnChanges,
- OnInit,
- SimpleChanges
-} from '@angular/core';
-import {LogService, PrefsService, TopoZoomPrefs} from 'gui2-fw-lib';
-import * as d3 from 'd3';
-
-const TOPO_ZOOM_PREFS = 'topo_zoom';
-
-const ZOOM_PREFS_DEFAULT: TopoZoomPrefs = <TopoZoomPrefs>{
- tx: 0, ty: 0, sc: 1.0
-};
-
-/**
- * A directive that takes care of Zooming and Panning the Topology view
- *
- * It wraps the D3 Pan and Zoom functionality
- * See https://github.com/d3/d3-zoom/blob/master/README.md
- */
-@Directive({
- selector: '[onosZoomableOf]'
-})
-export class ZoomableDirective implements OnChanges, OnInit {
- @Input() zoomableOf: ElementRef;
-
- zoom: any; // The d3 zoom behaviour
- zoomCached: TopoZoomPrefs = <TopoZoomPrefs>{tx: 0, ty: 0, sc: 1.0};
-
- constructor(
- private _element: ElementRef,
- private log: LogService,
- private ps: PrefsService
- ) {
- const container = d3.select(this._element.nativeElement);
-
- const zoomed = () => {
- const transform = d3.event.transform;
- container.attr('transform', 'translate(' + transform.x + ',' + transform.y + ') scale(' + transform.k + ')');
- this.updateZoomState(<TopoZoomPrefs>{tx: transform.x, ty: transform.y, sc: transform.k});
- };
-
- this.zoom = d3.zoom().on('zoom', zoomed);
- }
-
- ngOnInit() {
- this.zoomCached = this.ps.getPrefs(TOPO_ZOOM_PREFS, ZOOM_PREFS_DEFAULT);
- const svg = d3.select(this.zoomableOf);
-
- svg.call(this.zoom);
-
- svg.transition().call(this.zoom.transform,
- d3.zoomIdentity.translate(this.zoomCached.tx, this.zoomCached.ty).scale(this.zoomCached.sc));
- this.log.debug('Loaded topo_zoom_prefs',
- this.zoomCached.tx, this.zoomCached.ty, this.zoomCached.sc);
-
- }
-
- /**
- * Updates the cache of zoom preferences locally and onwards to the PrefsService
- */
- updateZoomState(zoomPrefs: TopoZoomPrefs): void {
- this.zoomCached = zoomPrefs;
- this.ps.setPrefs(TOPO_ZOOM_PREFS, zoomPrefs);
- }
-
- /**
- * If the input object is changed then re-establish the zoom
- */
- ngOnChanges(changes: SimpleChanges): void {
- if (changes['zoomableOf']) {
- const svg = d3.select(changes['zoomableOf'].currentValue);
- svg.call(this.zoom);
- this.log.debug('Applying zoomable behaviour on', this.zoomableOf, this._element.nativeElement);
- }
- }
-
- /**
- * Reset the zoom when the R key is pressed when in Topology view
- *
- * Animated to run over 750ms
- */
- resetZoom(): void {
- const svg = d3.select(this.zoomableOf);
- svg.transition().duration(750).call(this.zoom.transform, d3.zoomIdentity);
- this.updateZoomState(ZOOM_PREFS_DEFAULT);
- this.log.debug('Pan to 0,0 and zoom to 1.0');
- }
-
- /**
- * Change the zoom level when a map is chosen in Topology view
- *
- * Animated to run over 750ms
- */
- changeZoomLevel(zoomState: TopoZoomPrefs): void {
- const svg = d3.select(this.zoomableOf);
- svg.transition().duration(750).call(this.zoom.transform,
- d3.zoomIdentity.translate(zoomState.tx, zoomState.ty).scale(zoomState.sc));
- this.updateZoomState(zoomState);
- this.log.debug('Pan to', zoomState.tx, zoomState.ty, 'and zoom to', zoomState.sc);
- }
-
-}
diff --git a/web/gui2/src/main/webapp/app/view/topology/panel/details/details.component.css b/web/gui2/src/main/webapp/app/view/topology/panel/details/details.component.css
deleted file mode 100644
index 05402c8..0000000
--- a/web/gui2/src/main/webapp/app/view/topology/panel/details/details.component.css
+++ /dev/null
@@ -1,44 +0,0 @@
-/*
- * 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/src/main/webapp/app/view/topology/panel/details/details.component.html b/web/gui2/src/main/webapp/app/view/topology/panel/details/details.component.html
deleted file mode 100644
index ca23ca1..0000000
--- a/web/gui2/src/main/webapp/app/view/topology/panel/details/details.component.html
+++ /dev/null
@@ -1,66 +0,0 @@
-<!--
-~ 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 && selectedNode !== undefined">
- <!-- 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, showDetails.navPath, showDetails.id)"
- [iconSize]="25"
- [iconId]="buttonAttribs(btn).gid"
- [toolTip]="lionFn(buttonAttribs(btn).tt)"
- classes="button icon selected">
- </onos-icon>
- </div>
- </div>
- </div>
-</div>
\ No newline at end of file
diff --git a/web/gui2/src/main/webapp/app/view/topology/panel/details/details.component.spec.ts b/web/gui2/src/main/webapp/app/view/topology/panel/details/details.component.spec.ts
deleted file mode 100644
index 620d931..0000000
--- a/web/gui2/src/main/webapp/app/view/topology/panel/details/details.component.spec.ts
+++ /dev/null
@@ -1,103 +0,0 @@
-/*
- * 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';
-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/src/main/webapp/app/view/topology/panel/details/details.component.ts b/web/gui2/src/main/webapp/app/view/topology/panel/details/details.component.ts
deleted file mode 100644
index ea1462c..0000000
--- a/web/gui2/src/main/webapp/app/view/topology/panel/details/details.component.ts
+++ /dev/null
@@ -1,274 +0,0 @@
-/*
- * 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,
- LoadingService,
- LogService,
- WebSocketService
-} from 'gui2-fw-lib';
-import {Host, Link, LinkType, 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',
-};
-
-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
- */
-@Component({
- selector: 'onos-details',
- templateUrl: './details.component.html',
- styleUrls: [
- './details.component.css', './details.theme.css',
- '../../topology.common.css',
- '../../../../fw/widget/panel.css', '../../../../fw/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() selectedNode: UiElement = undefined; // Populated when user selects node or link
- @Input() on: boolean = false; // Override the parent class attribute
-
- // deferred localization strings
- lionFn; // Function
- showDetails: ShowDetails; // Will be populated on callback. Cleared if nothing is selected
-
- constructor(
- protected fs: FnService,
- protected log: LogService,
- protected ls: LoadingService,
- protected router: Router,
- protected wss: WebSocketService,
- private lion: LionService
- ) {
- super(fs, ls, log, wss, 'topo');
-
- if (this.lion.ubercache.length === 0) {
- this.lionFn = this.dummyLion;
- this.lion.loadCbs.set('flow', () => 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
- * Note the difference in call to the WSS with requestDetails between a node
- * and a link - the handling is done in TopologyViewMessageHandler#RequestDetails.process()
- *
- * The WSS will call back asynchronously (see fn in ngOnInit())
- *
- * @param changes Simple Changes set of updates
- */
- ngOnChanges(changes: SimpleChanges): void {
- if (changes['selectedNode']) {
- this.selectedNode = changes['selectedNode'].currentValue;
- let type: any;
-
- if (this.selectedNode === undefined) {
- // Selection has been cleared
- this.showDetails = <ShowDetails>{};
- return;
- }
-
- if (this.selectedNode.hasOwnProperty('nodeType')) { // For Device, Host, SubRegion
- type = (<Host>this.selectedNode).nodeType;
- this.wss.sendEvent('requestDetails', {
- id: this.selectedNode.id,
- class: type,
- });
- } else if (this.selectedNode.hasOwnProperty('type')) { // Must be link
- const link: Link = <Link>this.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', this.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;
- 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"
- *
- * @param path The path to navigate to
- * @param navPath The parameter name to use
- * @param selId the parameter value to use
- */
- navto(path: string, navPath: string, selId: string): void {
- this.log.debug('navigate to', path, 'for', navPath, '=', selId);
- // Special case until it's fixed
- if (selId) {
- if (navPath === 'device') {
- navPath = 'devId';
- }
- const queryPar: Params = {};
- queryPar[navPath] = selId;
- this.router.navigate([path], { queryParams: queryPar });
- }
- }
-
- /**
- * Read the LION bundle for Details panel and set up the lionFn
- */
- doLion() {
- this.lionFn = this.lion.bundle('core.view.Flow');
-
- }
-
-}
diff --git a/web/gui2/src/main/webapp/app/view/topology/panel/details/details.theme.css b/web/gui2/src/main/webapp/app/view/topology/panel/details/details.theme.css
deleted file mode 100644
index 7ad72dd..0000000
--- a/web/gui2/src/main/webapp/app/view/topology/panel/details/details.theme.css
+++ /dev/null
@@ -1,28 +0,0 @@
-/*
- * 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/src/main/webapp/app/view/topology/panel/instance/instance.component.css b/web/gui2/src/main/webapp/app/view/topology/panel/instance/instance.component.css
deleted file mode 100644
index f335726..0000000
--- a/web/gui2/src/main/webapp/app/view/topology/panel/instance/instance.component.css
+++ /dev/null
@@ -1,33 +0,0 @@
-/*
- * 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/src/main/webapp/app/view/topology/panel/instance/instance.component.html b/web/gui2/src/main/webapp/app/view/topology/panel/instance/instance.component.html
deleted file mode 100644
index f5a2859..0000000
--- a/web/gui2/src/main/webapp/app/view/topology/panel/instance/instance.component.html
+++ /dev/null
@@ -1,40 +0,0 @@
-<!--
-~ 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?'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>
\ No newline at end of file
diff --git a/web/gui2/src/main/webapp/app/view/topology/panel/instance/instance.component.spec.ts b/web/gui2/src/main/webapp/app/view/topology/panel/instance/instance.component.spec.ts
deleted file mode 100644
index a03f23e..0000000
--- a/web/gui2/src/main/webapp/app/view/topology/panel/instance/instance.component.spec.ts
+++ /dev/null
@@ -1,84 +0,0 @@
-/*
- * 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';
-
-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/src/main/webapp/app/view/topology/panel/instance/instance.component.ts b/web/gui2/src/main/webapp/app/view/topology/panel/instance/instance.component.ts
deleted file mode 100644
index ac47cce..0000000
--- a/web/gui2/src/main/webapp/app/view/topology/panel/instance/instance.component.ts
+++ /dev/null
@@ -1,133 +0,0 @@
-/*
- * 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
-} from '@angular/core';
-import { animate, state, style, transition, trigger } from '@angular/animations';
-import {
- LogService,
- LoadingService,
- FnService,
- PanelBaseImpl,
- IconService,
- SvgUtilService, LionService
-} from 'gui2-fw-lib';
-
-/**
- * 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',
- '../../../../fw/widget/panel.css', '../../../../fw/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 {
- @Input() divTopPx: number = 100;
- @Input() on: boolean = false; // Override the parent class attribute
- @Output() mastershipEvent = new EventEmitter<string>();
- public onosInstances: Array<Instance>;
- protected mastership: string;
- lionFn; // Function
-
- constructor(
- protected fs: FnService,
- protected log: LogService,
- protected ls: LoadingService,
- protected is: IconService,
- protected sus: SvgUtilService,
- private lion: LionService
- ) {
- super(fs, ls, log);
- this.onosInstances = <Array<Instance>>[];
-
- 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');
- }
-
- /**
- * 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 = '';
- } 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/src/main/webapp/app/view/topology/panel/instance/instance.theme.css b/web/gui2/src/main/webapp/app/view/topology/panel/instance/instance.theme.css
deleted file mode 100644
index 3be7bdd..0000000
--- a/web/gui2/src/main/webapp/app/view/topology/panel/instance/instance.theme.css
+++ /dev/null
@@ -1,152 +0,0 @@
-/*
- * 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/src/main/webapp/app/view/topology/panel/mapselector/mapselector.component.css b/web/gui2/src/main/webapp/app/view/topology/panel/mapselector/mapselector.component.css
deleted file mode 100644
index 59c0d78..0000000
--- a/web/gui2/src/main/webapp/app/view/topology/panel/mapselector/mapselector.component.css
+++ /dev/null
@@ -1,35 +0,0 @@
-/*
- * 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/src/main/webapp/app/view/topology/panel/mapselector/mapselector.component.html b/web/gui2/src/main/webapp/app/view/topology/panel/mapselector/mapselector.component.html
deleted file mode 100644
index b3a4224..0000000
--- a/web/gui2/src/main/webapp/app/view/topology/panel/mapselector/mapselector.component.html
+++ /dev/null
@@ -1,33 +0,0 @@
-<!--
-~ 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/src/main/webapp/app/view/topology/panel/mapselector/mapselector.component.spec.ts b/web/gui2/src/main/webapp/app/view/topology/panel/mapselector/mapselector.component.spec.ts
deleted file mode 100644
index 4d95361..0000000
--- a/web/gui2/src/main/webapp/app/view/topology/panel/mapselector/mapselector.component.spec.ts
+++ /dev/null
@@ -1,98 +0,0 @@
-/*
- * 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';
-
-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/src/main/webapp/app/view/topology/panel/mapselector/mapselector.component.ts b/web/gui2/src/main/webapp/app/view/topology/panel/mapselector/mapselector.component.ts
deleted file mode 100644
index c97e0ca..0000000
--- a/web/gui2/src/main/webapp/app/view/topology/panel/mapselector/mapselector.component.ts
+++ /dev/null
@@ -1,87 +0,0 @@
-
-import {
- Component, EventEmitter, OnChanges,
- OnDestroy,
- OnInit, Output, SimpleChanges,
-} from '@angular/core';
-import {
- DetailsPanelBaseImpl,
- FnService,
- LionService, LoadingService,
- LogService,
- WebSocketService
-} from 'gui2-fw-lib';
-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 ls: LoadingService,
- protected wss: WebSocketService,
- private lion: LionService
- ) {
- super(fs, ls, 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 Details panel and set up the lionFn
- */
- doLion() {
- this.lionFn = this.lion.bundle('core.view.Topo');
- }
-
- choice(mapid: Object): void {
- this.chosenMap.emit(<MapObject>this.mapSelectorResponse.maps[mapid['mapid']]);
- }
-}
diff --git a/web/gui2/src/main/webapp/app/view/topology/panel/mapselector/mapselector.theme.css b/web/gui2/src/main/webapp/app/view/topology/panel/mapselector/mapselector.theme.css
deleted file mode 100644
index 0ef1538..0000000
--- a/web/gui2/src/main/webapp/app/view/topology/panel/mapselector/mapselector.theme.css
+++ /dev/null
@@ -1,33 +0,0 @@
-/*
- * 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/src/main/webapp/app/view/topology/panel/summary/summary.component.css b/web/gui2/src/main/webapp/app/view/topology/panel/summary/summary.component.css
deleted file mode 100644
index b4bd37b..0000000
--- a/web/gui2/src/main/webapp/app/view/topology/panel/summary/summary.component.css
+++ /dev/null
@@ -1,36 +0,0 @@
-/*
- * 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/src/main/webapp/app/view/topology/panel/summary/summary.component.html b/web/gui2/src/main/webapp/app/view/topology/panel/summary/summary.component.html
deleted file mode 100644
index d781418..0000000
--- a/web/gui2/src/main/webapp/app/view/topology/panel/summary/summary.component.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<!--
-~ 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/src/main/webapp/app/view/topology/panel/summary/summary.component.spec.ts b/web/gui2/src/main/webapp/app/view/topology/panel/summary/summary.component.spec.ts
deleted file mode 100644
index 5f69c19..0000000
--- a/web/gui2/src/main/webapp/app/view/topology/panel/summary/summary.component.spec.ts
+++ /dev/null
@@ -1,84 +0,0 @@
-/*
- * 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';
-
-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/src/main/webapp/app/view/topology/panel/summary/summary.component.ts b/web/gui2/src/main/webapp/app/view/topology/panel/summary/summary.component.ts
deleted file mode 100644
index 3a42a0b..0000000
--- a/web/gui2/src/main/webapp/app/view/topology/panel/summary/summary.component.ts
+++ /dev/null
@@ -1,125 +0,0 @@
-/*
- * 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,
- LoadingService,
- FnService,
- WebSocketService,
- GlyphService
-} from 'gui2-fw-lib';
-
-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',
- '../../../../fw/widget/panel.css', '../../../../fw/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 ls: LoadingService,
- protected wss: WebSocketService,
- protected gs: GlyphService
- ) {
- super(fs, ls, 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/src/main/webapp/app/view/topology/panel/toolbar/button.css b/web/gui2/src/main/webapp/app/view/topology/panel/toolbar/button.css
deleted file mode 100644
index 1effdbc..0000000
--- a/web/gui2/src/main/webapp/app/view/topology/panel/toolbar/button.css
+++ /dev/null
@@ -1,41 +0,0 @@
-/*
- * 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/src/main/webapp/app/view/topology/panel/toolbar/toolbar.component.css b/web/gui2/src/main/webapp/app/view/topology/panel/toolbar/toolbar.component.css
deleted file mode 100644
index 449d436..0000000
--- a/web/gui2/src/main/webapp/app/view/topology/panel/toolbar/toolbar.component.css
+++ /dev/null
@@ -1,68 +0,0 @@
-/*
- * 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/src/main/webapp/app/view/topology/panel/toolbar/toolbar.component.html b/web/gui2/src/main/webapp/app/view/topology/panel/toolbar/toolbar.component.html
deleted file mode 100644
index 623c425..0000000
--- a/web/gui2/src/main/webapp/app/view/topology/panel/toolbar/toolbar.component.html
+++ /dev/null
@@ -1,77 +0,0 @@
-<!--
-~ 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>
\ No newline at end of file
diff --git a/web/gui2/src/main/webapp/app/view/topology/panel/toolbar/toolbar.component.spec.ts b/web/gui2/src/main/webapp/app/view/topology/panel/toolbar/toolbar.component.spec.ts
deleted file mode 100644
index 91c1de4..0000000
--- a/web/gui2/src/main/webapp/app/view/topology/panel/toolbar/toolbar.component.spec.ts
+++ /dev/null
@@ -1,101 +0,0 @@
-/*
- * 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';
-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/src/main/webapp/app/view/topology/panel/toolbar/toolbar.component.ts b/web/gui2/src/main/webapp/app/view/topology/panel/toolbar/toolbar.component.ts
deleted file mode 100644
index 0615530..0000000
--- a/web/gui2/src/main/webapp/app/view/topology/panel/toolbar/toolbar.component.ts
+++ /dev/null
@@ -1,142 +0,0 @@
-/*
- * 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,
- LoadingService,
- FnService,
- PanelBaseImpl, LionService
-} from 'gui2-fw-lib';
-
-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';
-
-
-/*
- 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',
- '../../../../fw/widget/panel.css', '../../../../fw/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;
-
- @Output() buttonEvent = new EventEmitter<string>();
-
- constructor(
- protected fs: FnService,
- protected log: LogService,
- protected ls: LoadingService,
- private lion: LionService
- ) {
- super(fs, ls, 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;
- default:
- }
- // Send a message up to let TopologyComponent know of the event
- this.buttonEvent.emit(name);
- }
-}
diff --git a/web/gui2/src/main/webapp/app/view/topology/panel/toolbar/toolbar.theme.css b/web/gui2/src/main/webapp/app/view/topology/panel/toolbar/toolbar.theme.css
deleted file mode 100644
index 7933ee6..0000000
--- a/web/gui2/src/main/webapp/app/view/topology/panel/toolbar/toolbar.theme.css
+++ /dev/null
@@ -1,53 +0,0 @@
-/*
- * 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/src/main/webapp/app/view/topology/panel/topopanel.base.ts b/web/gui2/src/main/webapp/app/view/topology/panel/topopanel.base.ts
deleted file mode 100644
index 48aa2ed..0000000
--- a/web/gui2/src/main/webapp/app/view/topology/panel/topopanel.base.ts
+++ /dev/null
@@ -1,109 +0,0 @@
-/*
- * 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,
- LoadingService,
- LogService,
- PanelBaseImpl
-} from 'gui2-fw-lib';
-
-/**
- * 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 ls: LoadingService,
- protected log: LogService,
- protected id: string
- ) {
- super(fs, ls, 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/src/main/webapp/app/view/topology/topology-routing.module.ts b/web/gui2/src/main/webapp/app/view/topology/topology-routing.module.ts
deleted file mode 100644
index 66e17b6..0000000
--- a/web/gui2/src/main/webapp/app/view/topology/topology-routing.module.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-/*
- * 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/src/main/webapp/app/view/topology/topology.common.css b/web/gui2/src/main/webapp/app/view/topology/topology.common.css
deleted file mode 100644
index 1ad9fbe..0000000
--- a/web/gui2/src/main/webapp/app/view/topology/topology.common.css
+++ /dev/null
@@ -1,86 +0,0 @@
-/*
- * 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/src/main/webapp/app/view/topology/topology.module.ts b/web/gui2/src/main/webapp/app/view/topology/topology.module.ts
deleted file mode 100644
index 02e39c8..0000000
--- a/web/gui2/src/main/webapp/app/view/topology/topology.module.ts
+++ /dev/null
@@ -1,80 +0,0 @@
-/*
- * 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';
-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 { ZoomableDirective } from './layer/zoomable.directive';
-import {
- SubRegionNodeSvgComponent,
- DeviceNodeSvgComponent,
- HostNodeSvgComponent, LinkSvgComponent,
-} from './layer/forcesvg/visuals';
-import { MapSelectorComponent } from './panel/mapselector/mapselector.component';
-import {FormsModule, ReactiveFormsModule} from '@angular/forms';
-import { GridsvgComponent } from './layer/gridsvg/gridsvg.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: [
- TopologyComponent,
- NoDeviceConnectedSvgComponent,
- InstanceComponent,
- SummaryComponent,
- ToolbarComponent,
- DetailsComponent,
- BackgroundSvgComponent,
- ForceSvgComponent,
- MapSvgComponent,
- ZoomableDirective,
- DraggableDirective,
- LinkSvgComponent,
- DeviceNodeSvgComponent,
- HostNodeSvgComponent,
- SubRegionNodeSvgComponent,
- MapSelectorComponent,
- GridsvgComponent
- ],
- providers: [
- TopologyService
- ]
-})
-export class TopologyModule { }
diff --git a/web/gui2/src/main/webapp/app/view/topology/topology.service.spec.ts b/web/gui2/src/main/webapp/app/view/topology/topology.service.spec.ts
deleted file mode 100644
index 29d456f..0000000
--- a/web/gui2/src/main/webapp/app/view/topology/topology.service.spec.ts
+++ /dev/null
@@ -1,77 +0,0 @@
-/*
- * 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';
-
-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/src/main/webapp/app/view/topology/topology.service.ts b/web/gui2/src/main/webapp/app/view/topology/topology.service.ts
deleted file mode 100644
index 2c5d777..0000000
--- a/web/gui2/src/main/webapp/app/view/topology/topology.service.ts
+++ /dev/null
@@ -1,116 +0,0 @@
-/*
- * 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';
-import { 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';
-
-/**
- * ONOS GUI -- Topology Service Module.
- */
-@Injectable()
-export class TopologyService {
-
- private handlers: string[] = [];
- private openListener: any;
-
- constructor(
- protected log: LogService,
- protected wss: WebSocketService
- ) {
- 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.onosInstances = data.members;
- }
- ],
- ['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);
- this.log.debug('Region Data updated from WSS as topo2UiModelEvent', force.regionData);
- }
- ],
- // 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('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', {});
- }
-}
diff --git a/web/gui2/src/main/webapp/app/view/topology/topology.theme.css b/web/gui2/src/main/webapp/app/view/topology/topology.theme.css
deleted file mode 100644
index caa6199..0000000
--- a/web/gui2/src/main/webapp/app/view/topology/topology.theme.css
+++ /dev/null
@@ -1,46 +0,0 @@
-/*
- * 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/src/main/webapp/app/view/topology/topology/topology.component.css b/web/gui2/src/main/webapp/app/view/topology/topology/topology.component.css
deleted file mode 100644
index f1cde38..0000000
--- a/web/gui2/src/main/webapp/app/view/topology/topology/topology.component.css
+++ /dev/null
@@ -1,26 +0,0 @@
-/*
- * 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/src/main/webapp/app/view/topology/topology/topology.component.html b/web/gui2/src/main/webapp/app/view/topology/topology/topology.component.html
deleted file mode 100644
index b7526f1..0000000
--- a/web/gui2/src/main/webapp/app/view/topology/topology/topology.component.html
+++ /dev/null
@@ -1,92 +0,0 @@
-<!--
-~ 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.onosInstMastership = $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) the No Devices Connected banner is shown if the force component
- (from line 4) does not contain any devices
- line 2) Create an SVG Grouping and apply the onosZoomableOf directive to it,
- passing in the whole SVG canvas (#svgZoom)
- line 3) Add in the Background Svg Component (if showBackground is true - toggled
- by toolbar and by keyboard shortcut 'B'
- line 4) Add in the layer of the Force Svg Component. If any item is selected on it, pass
- to the details view and deselect all others. This is node and line graph
- whose contents are supplied through the Topology Service, and whose positions
- are driven by the d3.force engine
- -->
- <svg:svg #svgZoom xmlns:svg="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" id="topo2"
- preserveAspectRatio="xMaxYMax meet">
- <svg:desc>The main SVG canvas of the Topology View</svg:desc>
- <svg:g *ngIf="force.regionData?.devices[0].length +
- force.regionData?.devices[1].length +
- force.regionData?.devices[2].length=== 0"
- onos-nodeviceconnected />
- <svg:g id="topo-zoomlayer" onosZoomableOf [zoomableOf]="svgZoom">
- <svg:desc>A logical layer that allows the main SVG canvas to be zoomed and panned</svg:desc>
- <svg:g #gridFull *ngIf="prefsState.grid == 1 || prefsState.grid == 3" onos-gridsvg>
- </svg:g>
- <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>
- <svg:g *ngIf="prefsState.bg"
- onos-backgroundsvg [map]="mapIdState" (zoomlevel)="mapExtentsZoom($event)">
- <svg:desc>The Background SVG component - contains maps</svg:desc>
- </svg:g>
- <svg:g #force onos-forcesvg
- [deviceLabelToggle]="prefsState.dlbls"
- [hostLabelToggle]="prefsState.hlbls"
- [showHosts]="prefsState.hosts"
- [highlightPorts]="prefsState.porthl"
- [scale]="1 / (1.5 * 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>
\ No newline at end of file
diff --git a/web/gui2/src/main/webapp/app/view/topology/topology/topology.component.spec.ts b/web/gui2/src/main/webapp/app/view/topology/topology/topology.component.spec.ts
deleted file mode 100644
index ed65f5a..0000000
--- a/web/gui2/src/main/webapp/app/view/topology/topology/topology.component.spec.ts
+++ /dev/null
@@ -1,229 +0,0 @@
-/*
- * 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 { TopologyService } from '../topology.service';
-
-import {
- FlashComponent,
- QuickhelpComponent,
- FnService,
- LogService,
- IconService, IconComponent, PrefsService, KeysService, LionService
-} from 'gui2-fw-lib';
-import {ZoomableDirective} from '../layer/zoomable.directive';
-import {RouterTestingModule} from '@angular/router/testing';
-import {TrafficService} from '../traffic.service';
-import {ForceSvgComponent} from '../layer/forcesvg/forcesvg.component';
-import {
- DeviceNodeSvgComponent, HostNodeSvgComponent,
- LinkSvgComponent, SubRegionNodeSvgComponent
-} from '../layer/forcesvg/visuals';
-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';
-
-
-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() {}
-}
-
-class MockIconService {
- loadIconDef() { }
-}
-
-class MockKeysService {
- quickHelpShown: boolean = true;
-
- keyBindings(x) {
- return {};
- }
-
- gestureNotes() {
- return {};
- }
-}
-
-class MockTrafficService {}
-
-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
- */
-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(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,
- FormsModule,
- ReactiveFormsModule
- ],
- declarations: [
- TopologyComponent,
- InstanceComponent,
- SummaryComponent,
- ToolbarComponent,
- DetailsComponent,
- FlashComponent,
- ZoomableDirective,
- IconComponent,
- QuickhelpComponent,
- ForceSvgComponent,
- LinkSvgComponent,
- DeviceNodeSvgComponent,
- HostNodeSvgComponent,
- DraggableDirective,
- ZoomableDirective,
- SubRegionNodeSvgComponent,
- MapSelectorComponent,
- BackgroundSvgComponent,
- MapSvgComponent,
- GridsvgComponent
- ],
- 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: 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/src/main/webapp/app/view/topology/topology/topology.component.ts b/web/gui2/src/main/webapp/app/view/topology/topology/topology.component.ts
deleted file mode 100644
index 441bbc6..0000000
--- a/web/gui2/src/main/webapp/app/view/topology/topology/topology.component.ts
+++ /dev/null
@@ -1,649 +0,0 @@
-/*
- * 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,
- OnDestroy,
- OnInit, SimpleChange,
- ViewChild
-} from '@angular/core';
-import * as d3 from 'd3';
-import {
- FnService, IconService,
- KeysService,
- KeysToken, LionService,
- LogService,
- PrefsService,
- SvgUtilService,
- WebSocketService,
- TopoZoomPrefs
-} from 'gui2-fw-lib';
-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 {TopologyService} from '../topology.service';
-import {
- GridDisplayToggle,
- HostLabelToggle,
- LabelToggle,
- UiElement
-} from '../layer/forcesvg/models';
-import {
- INSTANCE_TOGGLE, SUMMARY_TOGGLE, DETAILS_TOGGLE,
- HOSTS_TOGGLE, OFFLINE_TOGGLE, PORTS_TOGGLE,
- BKGRND_TOGGLE, CYCLELABELS_BTN, CYCLEHOSTLABEL_BTN,
- CYCLEGRIDDISPLAY_BTN, RESETZOOM_BTN, EQMASTER_BTN,
- CANCEL_TRAFFIC, ALL_TRAFFIC, QUICKHELP_BTN, BKGRND_SELECT
-} from '../panel/toolbar/toolbar.component';
-import {TrafficService} from '../traffic.service';
-import {ZoomableDirective} from '../layer/zoomable.directive';
-import {MapObject} from '../layer/maputils';
-
-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';
-
-/**
- * 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;
-}
-
-/**
- * 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 {
- // These are references to the components inserted in the template
- @ViewChild(InstanceComponent) instance: InstanceComponent;
- @ViewChild(DetailsComponent) details: DetailsComponent;
- @ViewChild(BackgroundSvgComponent) background: BackgroundSvgComponent;
- @ViewChild(ForceSvgComponent) force: ForceSvgComponent;
- @ViewChild(ZoomableDirective) 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
- };
-
- 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,
- ) {
- if (this.lion.ubercache.length === 0) {
- this.lionFn = this.dummyLion;
- this.lion.loadCbs.set('topo-toolbar', () => this.doLion());
- } else {
- this.doLion();
- }
-
- this.is.loadIconDef('bird');
- this.is.loadIconDef('active');
- this.is.loadIconDef('uiAttached');
- this.is.loadIconDef('m_switch');
- this.is.loadIconDef('m_roadm');
- this.is.loadIconDef('m_router');
- this.is.loadIconDef('m_uiAttached');
- this.is.loadIconDef('m_endstation');
- this.is.loadIconDef('m_ports');
- this.is.loadIconDef('m_summary');
- this.is.loadIconDef('m_details');
- this.is.loadIconDef('m_map');
- this.is.loadIconDef('m_selectMap');
- this.is.loadIconDef('m_cycleLabels');
- this.is.loadIconDef('m_cycleGridDisplay');
- this.is.loadIconDef('m_resetZoom');
- this.is.loadIconDef('m_eqMaster');
- this.is.loadIconDef('m_unknown');
- this.is.loadIconDef('m_allTraffic');
- this.is.loadIconDef('deviceTable');
- this.is.loadIconDef('flowTable');
- this.is.loadIconDef('portTable');
- this.is.loadIconDef('groupTable');
- this.is.loadIconDef('meterTable');
- this.is.loadIconDef('triangleUp');
- this.log.debug('Topology component constructed');
- }
-
- /**
- * Static functions must come before member variables
- * @param 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';
- }
- }
-
- /**
- * 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);
-
- 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.log.debug('Topology component initialized');
- }
-
- /**
- * 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.log.debug('Topology component destroyed');
- }
-
- /**
- * 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.monitorAllTraffic();
- break;
- case QUICKHELP_BTN:
- this.ks.quickHelpShown = true;
- 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
- */
- actionMap() {
- return {
- A: [() => {this.monitorAllTraffic(); }, 'Monitor all traffic'],
- B: [(token) => {this.toggleBackground(token); }, 'Toggle background'],
- D: [(token) => {this.toggleDetails(token); }, 'Toggle details panel'],
- E: [() => {this.equalizeMasters(); }, 'Equalize mastership roles'],
- H: [() => {this.toggleHosts(); }, 'Toggle host visibility'],
- I: [(token) => {this.toggleInstancePanel(token); }, 'Toggle ONOS Instance Panel'],
- G: [() => {this.mapSelShown = !this.mapSelShown; }, 'Show map selection dialog'],
- L: [() => {this.cycleDeviceLabels(); }, 'Cycle device labels'],
- M: [() => {this.toggleOfflineDevices(); }, 'Toggle offline visibility'],
- O: [() => {this.toggleSummary(); }, 'Toggle the Summary Panel'],
- P: [(token) => {this.togglePorts(token); }, 'Toggle Port Highlighting'],
- Q: [() => {this.cycleGridDisplay(); }, 'Cycle grid display'],
- R: [() => {this.resetZoom(); }, 'Reset pan / zoom'],
- U: [() => {this.unpinNode(); }, 'Unpin node (mouse over)'],
- X: [() => {this.resetNodeLocation(); }, 'Reset Node Location'],
- dot: [() => {this.toggleToolbar(); }, 'Toggle Toolbar'],
- 0: [() => {this.cancelTraffic(); }, 'Cancel traffic monitoring'],
- 'shift-L': [() => {this.cycleHostLabels(); }, 'Cycle host labels'],
-
- // -- instance color palette debug
- 9: () => {
- this.sus.cat7().testCard(d3.select('svg#topo2'));
- },
-
- esc: [() => {this.handleEscape(); }, 'Cancel commands'],
-
- // 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();
- const add = this.fs.isO(additional);
-
- 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 = 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 = 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 = 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);
- }
-
- /**
- * 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
- */
- 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(this.force.showHosts ? '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 resetZoom() {
- this.zoomDirective.resetZoom();
- this.flashMsg = this.lionFn('fl_pan_zoom_reset');
- }
-
- protected equalizeMasters() {
- this.wss.sendEvent('equalizeMasters', null);
- this.flashMsg = this.lionFn('fl_eq_masters');
- this.log.debug('equalizing masters');
- }
-
- protected resetNodeLocation() {
- // TODO: Implement reset locations
- this.force.resetNodeLocations();
- this.flashMsg = this.lionFn('fl_reset_node_locations');
- this.log.debug('resetting node location');
- }
-
- protected unpinNode() {
- // TODO: Implement this
- this.log.debug('unpinning node');
- }
-
- /**
- * Check to see if this is needed anymore
- * @param what
- */
- protected notValid(what) {
- this.log.warn('topo.js getActionEntry(): Not a valid ' + what);
- }
-
- /**
- * Check to see if this is needed anymore
- * @param what
- */
- 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 nodeOrLink the item to display details of
- */
- nodeSelected(nodeOrLink: UiElement) {
- this.details.ngOnChanges({'selectedNode':
- new SimpleChange(undefined, nodeOrLink, true)});
- }
-
- /**
- * Enable traffic monitoring
- */
- monitorAllTraffic() {
- // TODO: Implement support for toggling between bits, packets and octets
- this.flashMsg = this.lionFn('tr_fl_pstats_bits');
- this.trs.init(this.force);
- }
-
- /**
- * Cancel traffic monitoring
- */
- cancelTraffic() {
- this.flashMsg = this.lionFn('fl_monitoring_canceled');
- this.trs.destroy();
- }
-
- 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);
- }
-
- /**
- * 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/src/main/webapp/app/view/topology/traffic.service.spec.ts b/web/gui2/src/main/webapp/app/view/topology/traffic.service.spec.ts
deleted file mode 100644
index 8b2a736..0000000
--- a/web/gui2/src/main/webapp/app/view/topology/traffic.service.spec.ts
+++ /dev/null
@@ -1,73 +0,0 @@
-/*
- * 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';
-import {ActivatedRoute, Params} from '@angular/router';
-import {of} from 'rxjs';
-import {TopologyService} from './topology.service';
-
-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: [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', () => {
- const service: TrafficService = TestBed.get(TrafficService);
- expect(service).toBeTruthy();
- });
-});
diff --git a/web/gui2/src/main/webapp/app/view/topology/traffic.service.ts b/web/gui2/src/main/webapp/app/view/topology/traffic.service.ts
deleted file mode 100644
index b6d2b85..0000000
--- a/web/gui2/src/main/webapp/app/view/topology/traffic.service.ts
+++ /dev/null
@@ -1,90 +0,0 @@
-/*
- * 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';
-import {ForceSvgComponent} from './layer/forcesvg/forcesvg.component';
-
-export enum TrafficType {
- IDLE,
- FLOWSTATSBYTES = 'flowStatsBytes',
- PORTSTATSBITSEC = 'portStatsBitSec',
- PORTSTATSPKTSEC = 'portStatsPktSec',
-}
-
-const ALL_TRAFFIC_TYPES = [
- TrafficType.FLOWSTATSBYTES,
- TrafficType.PORTSTATSBITSEC,
- TrafficType.PORTSTATSPKTSEC
-];
-
-const ALL_TRAFFIC_MSGS = [
- 'Flow Stats (bytes)',
- 'Port Stats (bits / second)',
- 'Port Stats (packets / second)',
-];
-
-/**
- * ONOS GUI -- Traffic Service Module.
- */
-@Injectable({
- providedIn: 'root'
-})
-export class TrafficService {
- private handlers: string[] = [];
- private openListener: any;
-
- 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);
- }
- ]
- ]));
-
- 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('topo2RequestAllTraffic', {
- trafficType: TrafficType.FLOWSTATSBYTES
- });
- this.log.debug('Topo2Traffic: Show All Traffic');
- }
-
- destroy() {
- this.wss.sendEvent('topo2CancelTraffic', {});
- this.wss.unbindHandlers(this.handlers);
- this.log.debug('Traffic monitoring canceled');
- }
-
- 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.FLOWSTATSBYTES
- });
- }
-}