Display host names given in netcfg
Change-Id: I184633ca73652e81471503837145d129ab51b9ee
diff --git a/web/gui/src/main/java/org/onosproject/ui/impl/topo/Traffic2Monitor.java b/web/gui/src/main/java/org/onosproject/ui/impl/topo/Traffic2Monitor.java
index d0d40bd..76b9dc5 100644
--- a/web/gui/src/main/java/org/onosproject/ui/impl/topo/Traffic2Monitor.java
+++ b/web/gui/src/main/java/org/onosproject/ui/impl/topo/Traffic2Monitor.java
@@ -96,6 +96,8 @@
@Override
protected void clearSelection() {
+ selectedNodes = null;
+ selectedIntents = null;
}
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
diff --git a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/forcesvg.component.spec.ts b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/forcesvg.component.spec.ts
index d10df1c9..0d30267 100644
--- a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/forcesvg.component.spec.ts
+++ b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/forcesvg.component.spec.ts
@@ -30,7 +30,7 @@
import {SubRegionNodeSvgComponent} from './visuals/subregionnodesvg/subregionnodesvg.component';
import {HostNodeSvgComponent} from './visuals/hostnodesvg/hostnodesvg.component';
import {LinkSvgComponent} from './visuals/linksvg/linksvg.component';
-import {Device, Host, Link, LinkType, Region} from './models';
+import {Device, Host, Link, LinkHighlight, LinkType, Region} from './models';
import {ChangeDetectorRef, SimpleChange} from '@angular/core';
import {TopologyService} from '../../topology.service';
@@ -101,6 +101,12 @@
const odtnSampleData = require('./tests/test-OdtnConfig-topo2CurrentRegion.json');
const odtnRegionData: Region = <Region><unknown>(odtnSampleData.payload);
+ const topo2BaseData = require('./tests/topo2Highlights-base-data.json');
+ const topo2BaseRegionData: Region = <Region><unknown>(topo2BaseData.payload);
+
+ const highlightSampleData = require('./tests/topo2Highlights-sample.json');
+ const linkHightlights: LinkHighlight[] = <LinkHighlight[]><unknown>(highlightSampleData.payload.links);
+
const emptyRegion: Region = <Region>{devices: [ [], [], [] ], hosts: [ [], [], [] ], links: []};
beforeEach(() => {
@@ -293,4 +299,22 @@
expect(component.graph.links.length).toBe(6);
});
+
+ it('should handle highlights and match them to existing links', () => {
+ component.regionData = topo2BaseRegionData;
+ component.ngOnChanges(
+ {'regionData' : new SimpleChange(<Region>{}, topo2BaseRegionData, true)});
+
+ expect(component.graph.links.length).toBe(9);
+
+ expect(linkHightlights.length).toBe(6);
+
+ // should be able to find all of the highlighted links in the original data set
+ linkHightlights.forEach((lh: LinkHighlight) => {
+ const foundLink = component.graph.links.find((l: Link) => l.id === Link.linkIdFromShowHighlights(lh.id));
+ expect(foundLink).toBeDefined();
+ });
+
+
+ });
});
diff --git a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/tests/topo2Highlights-base-data.json b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/tests/topo2Highlights-base-data.json
new file mode 100644
index 0000000..ae1b9f2
--- /dev/null
+++ b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/tests/topo2Highlights-base-data.json
@@ -0,0 +1,380 @@
+{
+ "event": "topo2CurrentRegion",
+ "payload": {
+ "id": "(root)",
+ "subregions": [],
+ "links": [
+ {
+ "id": "device:leaf1/1~device:spine1/1",
+ "epA": "device:leaf1/1",
+ "epB": "device:spine1/1",
+ "type": "UiDeviceLink",
+ "portA": "1",
+ "portB": "1",
+ "rollup": [
+ {
+ "id": "device:leaf1/1~device:spine1/1",
+ "epA": "device:leaf1/1",
+ "epB": "device:spine1/1",
+ "type": "UiDeviceLink",
+ "portA": "1",
+ "portB": "1"
+ }
+ ]
+ },
+ {
+ "id": "device:leaf2/2~device:spine2/2",
+ "epA": "device:leaf2/2",
+ "epB": "device:spine2/2",
+ "type": "UiDeviceLink",
+ "portA": "2",
+ "portB": "2",
+ "rollup": [
+ {
+ "id": "device:leaf2/2~device:spine2/2",
+ "epA": "device:leaf2/2",
+ "epB": "device:spine2/2",
+ "type": "UiDeviceLink",
+ "portA": "2",
+ "portB": "2"
+ }
+ ]
+ },
+ {
+ "id": "00:00:00:00:00:1A/None~device:leaf1/3",
+ "epA": "00:00:00:00:00:1A/None",
+ "epB": "device:leaf1",
+ "type": "UiEdgeLink",
+ "portB": "3",
+ "rollup": [
+ {
+ "id": "00:00:00:00:00:1A/None~device:leaf1/3",
+ "epA": "00:00:00:00:00:1A/None",
+ "epB": "device:leaf1",
+ "type": "UiEdgeLink",
+ "portB": "3"
+ }
+ ]
+ },
+ {
+ "id": "00:00:00:00:00:30/None~device:leaf2/3",
+ "epA": "00:00:00:00:00:30/None",
+ "epB": "device:leaf2",
+ "type": "UiEdgeLink",
+ "portB": "3",
+ "rollup": [
+ {
+ "id": "00:00:00:00:00:30/None~device:leaf2/3",
+ "epA": "00:00:00:00:00:30/None",
+ "epB": "device:leaf2",
+ "type": "UiEdgeLink",
+ "portB": "3"
+ }
+ ]
+ },
+ {
+ "id": "device:leaf1/2~device:spine2/1",
+ "epA": "device:leaf1/2",
+ "epB": "device:spine2/1",
+ "type": "UiDeviceLink",
+ "portA": "2",
+ "portB": "1",
+ "rollup": [
+ {
+ "id": "device:leaf1/2~device:spine2/1",
+ "epA": "device:leaf1/2",
+ "epB": "device:spine2/1",
+ "type": "UiDeviceLink",
+ "portA": "2",
+ "portB": "1"
+ }
+ ]
+ },
+ {
+ "id": "device:leaf2/1~device:spine1/2",
+ "epA": "device:leaf2/1",
+ "epB": "device:spine1/2",
+ "type": "UiDeviceLink",
+ "portA": "1",
+ "portB": "2",
+ "rollup": [
+ {
+ "id": "device:leaf2/1~device:spine1/2",
+ "epA": "device:leaf2/1",
+ "epB": "device:spine1/2",
+ "type": "UiDeviceLink",
+ "portA": "1",
+ "portB": "2"
+ }
+ ]
+ },
+ {
+ "id": "00:00:00:00:00:20/None~device:leaf1/6",
+ "epA": "00:00:00:00:00:20/None",
+ "epB": "device:leaf1",
+ "type": "UiEdgeLink",
+ "portB": "6",
+ "rollup": [
+ {
+ "id": "00:00:00:00:00:20/None~device:leaf1/6",
+ "epA": "00:00:00:00:00:20/None",
+ "epB": "device:leaf1",
+ "type": "UiEdgeLink",
+ "portB": "6"
+ }
+ ]
+ },
+ {
+ "id": "00:00:00:00:00:1C/None~device:leaf1/5",
+ "epA": "00:00:00:00:00:1C/None",
+ "epB": "device:leaf1",
+ "type": "UiEdgeLink",
+ "portB": "5",
+ "rollup": [
+ {
+ "id": "00:00:00:00:00:1C/None~device:leaf1/5",
+ "epA": "00:00:00:00:00:1C/None",
+ "epB": "device:leaf1",
+ "type": "UiEdgeLink",
+ "portB": "5"
+ }
+ ]
+ },
+ {
+ "id": "00:00:00:00:00:1B/None~device:leaf1/4",
+ "epA": "00:00:00:00:00:1B/None",
+ "epB": "device:leaf1",
+ "type": "UiEdgeLink",
+ "portB": "4",
+ "rollup": [
+ {
+ "id": "00:00:00:00:00:1B/None~device:leaf1/4",
+ "epA": "00:00:00:00:00:1B/None",
+ "epB": "device:leaf1",
+ "type": "UiEdgeLink",
+ "portB": "4"
+ }
+ ]
+ }
+ ],
+ "devices": [
+ [],
+ [],
+ [
+ {
+ "id": "device:spine1",
+ "nodeType": "device",
+ "type": "switch",
+ "online": true,
+ "master": "172.24.0.3",
+ "layer": "def",
+ "props": {
+ "managementAddress": "grpc://mininet:50003?device_id=1",
+ "protocol": "P4Runtime, gNMI, gNOI",
+ "gridX": "400.0",
+ "gridY": "400.0",
+ "driver": "stratum-bmv2",
+ "name": "device:spine1",
+ "p4DeviceId": "1",
+ "locType": "grid"
+ },
+ "location": {
+ "locType": "grid",
+ "latOrY": 400.0,
+ "longOrX": 400.0
+ }
+ },
+ {
+ "id": "device:spine2",
+ "nodeType": "device",
+ "type": "switch",
+ "online": true,
+ "master": "172.24.0.3",
+ "layer": "def",
+ "props": {
+ "managementAddress": "grpc://mininet:50004?device_id=1",
+ "protocol": "P4Runtime, gNMI, gNOI",
+ "gridX": "600.0",
+ "gridY": "400.0",
+ "driver": "stratum-bmv2",
+ "name": "device:spine2",
+ "p4DeviceId": "1",
+ "locType": "grid"
+ },
+ "location": {
+ "locType": "grid",
+ "latOrY": 400.0,
+ "longOrX": 600.0
+ }
+ },
+ {
+ "id": "device:leaf2",
+ "nodeType": "device",
+ "type": "switch",
+ "online": true,
+ "master": "172.24.0.3",
+ "layer": "def",
+ "props": {
+ "managementAddress": "grpc://mininet:50002?device_id=1",
+ "protocol": "P4Runtime, gNMI, gNOI",
+ "gridX": "800.0",
+ "gridY": "600.0",
+ "driver": "stratum-bmv2",
+ "name": "device:leaf2",
+ "p4DeviceId": "1",
+ "locType": "grid"
+ },
+ "location": {
+ "locType": "grid",
+ "latOrY": 600.0,
+ "longOrX": 800.0
+ }
+ },
+ {
+ "id": "device:leaf1",
+ "nodeType": "device",
+ "type": "switch",
+ "online": true,
+ "master": "172.24.0.3",
+ "layer": "def",
+ "props": {
+ "managementAddress": "grpc://mininet:50001?device_id=1",
+ "protocol": "P4Runtime, gNMI, gNOI",
+ "gridX": "200.0",
+ "gridY": "600.0",
+ "driver": "stratum-bmv2",
+ "name": "device:leaf1",
+ "p4DeviceId": "1",
+ "locType": "grid"
+ },
+ "location": {
+ "locType": "grid",
+ "latOrY": 600.0,
+ "longOrX": 200.0
+ }
+ }
+ ]
+ ],
+ "hosts": [
+ [],
+ [],
+ [
+ {
+ "id": "00:00:00:00:00:30/None",
+ "nodeType": "host",
+ "layer": "def",
+ "ips": [
+ "2001:2:3::1"
+ ],
+ "props": {
+ "gridX": "750.0",
+ "gridY": "700.0",
+ "latitude": null,
+ "name": "h3",
+ "locType": "grid",
+ "longitude": null
+ },
+ "location": {
+ "locType": "grid",
+ "latOrY": 700.0,
+ "longOrX": 750.0
+ },
+ "configured": false
+ },
+ {
+ "id": "00:00:00:00:00:1A/None",
+ "nodeType": "host",
+ "layer": "def",
+ "ips": [
+ "2001:1:1::a"
+ ],
+ "props": {
+ "gridX": "100.0",
+ "gridY": "700.0",
+ "latitude": null,
+ "name": "h1a",
+ "locType": "grid",
+ "longitude": null
+ },
+ "location": {
+ "locType": "grid",
+ "latOrY": 700.0,
+ "longOrX": 100.0
+ },
+ "configured": false
+ },
+ {
+ "id": "00:00:00:00:00:1B/None",
+ "nodeType": "host",
+ "layer": "def",
+ "ips": [
+ "2001:1:1::b"
+ ],
+ "props": {
+ "gridX": "100.0",
+ "gridY": "800.0",
+ "latitude": null,
+ "name": "h1b",
+ "locType": "grid",
+ "longitude": null
+ },
+ "location": {
+ "locType": "grid",
+ "latOrY": 800.0,
+ "longOrX": 100.0
+ },
+ "configured": false
+ },
+ {
+ "id": "00:00:00:00:00:1C/None",
+ "nodeType": "host",
+ "layer": "def",
+ "ips": [
+ "2001:1:1::c"
+ ],
+ "props": {
+ "gridX": "250.0",
+ "gridY": "800.0",
+ "latitude": null,
+ "name": "h1c",
+ "locType": "grid",
+ "longitude": null
+ },
+ "location": {
+ "locType": "grid",
+ "latOrY": 800.0,
+ "longOrX": 250.0
+ },
+ "configured": false
+ },
+ {
+ "id": "00:00:00:00:00:20/None",
+ "nodeType": "host",
+ "layer": "def",
+ "ips": [
+ "2001:1:2::1"
+ ],
+ "props": {
+ "gridX": "400.0",
+ "gridY": "700.0",
+ "latitude": null,
+ "name": "h2",
+ "locType": "grid",
+ "longitude": null
+ },
+ "location": {
+ "locType": "grid",
+ "latOrY": 700.0,
+ "longOrX": 400.0
+ },
+ "configured": false
+ }
+ ]
+ ],
+ "layerOrder": [
+ "opt",
+ "pkt",
+ "def"
+ ]
+ }
+}
diff --git a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/tests/topo2Highlights-sample.json b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/tests/topo2Highlights-sample.json
new file mode 100644
index 0000000..50995c8
--- /dev/null
+++ b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/tests/topo2Highlights-sample.json
@@ -0,0 +1,39 @@
+{
+ "event": "topo2Highlights",
+ "payload": {
+ "devices": [],
+ "hosts": [],
+ "links": [
+ {
+ "id": "device:leaf2/2~device:spine2/2",
+ "label": "964.91 Kbps",
+ "css": "secondary port-traffic-green"
+ },
+ {
+ "id": "device:leaf1/1~device:spine1/1",
+ "label": "3.92 Mbps",
+ "css": "secondary port-traffic-yellow"
+ },
+ {
+ "id": "00:00:00:00:00:30/None~device:leaf2/3",
+ "label": "4.46 Mbps",
+ "css": "secondary port-traffic-yellow"
+ },
+ {
+ "id": "device:leaf2/1~device:spine1/2",
+ "label": "3.53 Mbps",
+ "css": "secondary port-traffic-yellow"
+ },
+ {
+ "id": "device:leaf1/2~device:spine2/1",
+ "label": "1.06 Mbps",
+ "css": "secondary port-traffic-yellow"
+ },
+ {
+ "id": "00:00:00:00:00:20/None~device:leaf1/6",
+ "label": "4.98 Mbps",
+ "css": "secondary port-traffic-yellow"
+ }
+ ]
+ }
+}
diff --git a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/visuals/hostnodesvg/hostnodesvg.component.spec.ts b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/visuals/hostnodesvg/hostnodesvg.component.spec.ts
index e3efb3f..930533e 100644
--- a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/visuals/hostnodesvg/hostnodesvg.component.spec.ts
+++ b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/visuals/hostnodesvg/hostnodesvg.component.spec.ts
@@ -13,13 +13,13 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
-import { HostNodeSvgComponent } from './hostnodesvg.component';
+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 {Host, HostLabelToggle} from '../../models';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {ChangeDetectorRef} from '@angular/core';
@@ -37,6 +37,9 @@
let ar: MockActivatedRoute;
let testHost: Host;
+ const topo2BaseData = require('../../tests/topo2Highlights-base-data.json');
+ const topo2BaseHostsData: Host[] = <Host[]><unknown>(topo2BaseData.payload.hosts[2]);
+
beforeEach(async(() => {
const logSpy = jasmine.createSpyObj('LogService', ['info', 'debug', 'warn', 'error']);
ar = new MockActivatedRoute({ 'debug': 'txrx' });
@@ -66,4 +69,24 @@
it('should create', () => {
expect(component).toBeTruthy();
});
+
+ it('should be able to read host data properly', () => {
+ expect(topo2BaseHostsData.length).toBe(5);
+
+ expect(topo2BaseHostsData[0].id).toBe('00:00:00:00:00:30/None');
+
+ component.host = topo2BaseHostsData[0];
+ component.labelToggle = HostLabelToggle.Enum.NONE;
+ expect(component.hostName()).toBe('00:00:00:00:00:30/None');
+
+ component.labelToggle = HostLabelToggle.Enum.NAME;
+ expect(component.hostName()).toBe('h3');
+
+ component.labelToggle = HostLabelToggle.Enum.IP;
+ expect(component.hostName()).toBe('2001:2:3::1');
+
+ component.labelToggle = HostLabelToggle.Enum.MAC;
+ expect(component.hostName()).toBe('00:00:00:00:00:30/None');
+
+ });
});
diff --git a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/visuals/hostnodesvg/hostnodesvg.component.ts b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/visuals/hostnodesvg/hostnodesvg.component.ts
index 806f9b2..41f2965 100644
--- a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/visuals/hostnodesvg/hostnodesvg.component.ts
+++ b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/visuals/hostnodesvg/hostnodesvg.component.ts
@@ -62,9 +62,10 @@
return this.host.ips.join(',');
} else if (this.labelToggle === HostLabelToggle.Enum.MAC) {
return this.host.id;
+ } else if (this.labelToggle === HostLabelToggle.Enum.NAME) {
+ return this.host.props.name;
} else {
- return this.host.id; // Todo - replace with a friendly name
+ return this.host.id;
}
-
}
}
diff --git a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/visuals/linksvg/linksvg.component.html b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/visuals/linksvg/linksvg.component.html
index a94914d..52fd564 100644
--- a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/visuals/linksvg/linksvg.component.html
+++ b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/visuals/linksvg/linksvg.component.html
@@ -40,8 +40,8 @@
[ngClass]="['link', selected?'selected':'', enhanced?'enhanced':'', highlighted]"
[ngStyle]="{'stroke-width': (enhanced ? 4 : 2) * scale + 'px'}"
(click)="toggleSelected(link, $event)"
- (mouseover)="enhance()"
- [attr.filter]="highlighted?'url(#glow)':'none'">
+ (mouseover)="enhance()">
+<!-- [attr.filter]="highlighted?'url(#glow)':'none'">-->
</svg:line>
<svg:g xmlns:svg="http://www.w3.org/2000/svg"
[ngClass]="['linkLabel']"