GUI2 Added in support for custom glyphs
Change-Id: If082b6e5727c278022ed3a72035878098e031611
diff --git a/web/gui/src/main/java/org/onosproject/ui/impl/TopologyViewMessageHandlerBase.java b/web/gui/src/main/java/org/onosproject/ui/impl/TopologyViewMessageHandlerBase.java
index 994f014..3ba641f 100644
--- a/web/gui/src/main/java/org/onosproject/ui/impl/TopologyViewMessageHandlerBase.java
+++ b/web/gui/src/main/java/org/onosproject/ui/impl/TopologyViewMessageHandlerBase.java
@@ -438,7 +438,12 @@
// Create models of the data to return, that overlays can adjust / augment
private String lookupGlyph(Device device) {
- return DEVICE_GLYPHS.get(device.type());
+ String uiType = device.annotations().value("uiType");
+ if (uiType != null && !uiType.equalsIgnoreCase("undefined")) {
+ return uiType;
+ } else {
+ return DEVICE_GLYPHS.get(device.type());
+ }
}
diff --git a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/nav/nav.service.ts b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/nav/nav.service.ts
index 98de228..f5d5156 100644
--- a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/nav/nav.service.ts
+++ b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/nav/nav.service.ts
@@ -73,6 +73,13 @@
} else if (uiView.cat === 'NETWORK') {
if ( uiView.id !== 'topo') {
this.uiNetworkViews.push(uiView);
+ } else {
+ this.uiNetworkViews.push(<UiView>{
+ id: 'topo2',
+ icon: 'nav_topo',
+ cat: 'NETWORK',
+ label: uiView.label
+ });
}
} else if (uiView.cat === 'HIDDEN') {
this.uiHiddenViews.push(uiView);
diff --git a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/remote/websocket.service.ts b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/remote/websocket.service.ts
index 2a254b4..93020f0 100644
--- a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/remote/websocket.service.ts
+++ b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/remote/websocket.service.ts
@@ -41,10 +41,16 @@
m_uiAttached: boolean;
}
+interface Glyph {
+ id: string;
+ viewbox: string;
+ path: string;
+}
+
interface Bootstrap {
user: string;
clusterNodes: ClusterNode[];
- glyphs: any[]; // TODO: narrow this down to a known type
+ glyphs: Glyph[];
}
interface ErrorData {
@@ -76,7 +82,7 @@
private url; // web socket URL
private clusterNodes: ClusterNode[] = []; // ONOS instances data for failover
private clusterIndex = -1; // the instance to which we are connected
- private glyphs = [];
+ private glyphs: Glyph[] = [];
private connectRetries: number = 0; // limit our attempts at reconnecting
// A map of registered Callbacks for websocket open()
@@ -103,7 +109,7 @@
});
this.glyphs = data.glyphs;
const glyphsMap = new Map<string, string>([]);
- this.glyphs.forEach((d, i) => {
+ this.glyphs.forEach((d) => {
glyphsMap.set('_' + d.id, d.viewbox);
glyphsMap.set(d.id, d.path);
this.gs.registerGlyphs(glyphsMap);
diff --git a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/svg/glyphdata.service.ts b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/svg/glyphdata.service.ts
index 3703243..a3cbb43 100644
--- a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/svg/glyphdata.service.ts
+++ b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/svg/glyphdata.service.ts
@@ -17,10 +17,13 @@
import { LogService } from '../log.service';
-// --- ONOS logo glyph ------------------------------------
-
+/**
+ * ONOS logo glyph
+ *
+ * TODO: Some major refactoring needs to go on here to make this more understandable
+ */
export const logos = new Map<string, string>([
- [ '_bird', '352 224 113 112'],
+ [ '_bird', '352 224 113 112'], // viewbox of bird - next is the bird path
[ 'bird', 'M427.7,300.4 c-6.9,0.6-13.1,5-19.2,7.1c-18.1,6.2-33.9,' +
'9.1-56.5,4.7c24.6,17.2,36.6,13,63.7,0.1c-0.5,0.6-0.7,1.3-1.3,' +
'1.9c1.4-0.4,2.4-1.7,3.4-2.2c-0.4,0.7-0.9,1.5-1.4,1.9c2.2-0.6,' +
diff --git a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/svg/icon.service.ts b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/svg/icon.service.ts
index 766cc56..f2497f7 100644
--- a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/svg/icon.service.ts
+++ b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/svg/icon.service.ts
@@ -246,7 +246,11 @@
* @param iconCls The icon class as a string
*/
loadIconDef(iconCls: string): void {
- this.gs.loadDefs(this.ensureIconLibDefs(), [glyphMapping.get(iconCls)], true);
+ let glyphName: string = glyphMapping.get(iconCls);
+ if (!glyphName) {
+ glyphName = iconCls;
+ }
+ this.gs.loadDefs(this.ensureIconLibDefs(), [glyphName], true);
this.log.debug('icon definition', iconCls, 'added to defs');
}
diff --git a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/svg/icon/icon.component.ts b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/svg/icon/icon.component.ts
index ad8d382..db28914 100644
--- a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/svg/icon/icon.component.ts
+++ b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/svg/icon/icon.component.ts
@@ -73,6 +73,11 @@
* @returns The iconTag corresponding to the iconId of this instance
*/
iconTag(): string {
- return '#' + glyphMapping.get(this.iconId);
+ const iconIdStr: string = glyphMapping.get(this.iconId);
+ if (iconIdStr) {
+ return '#' + iconIdStr;
+ } else {
+ return '#' + this.iconId;
+ }
}
}
diff --git a/web/gui2/package-lock.json b/web/gui2/package-lock.json
index 2645a24..c7f2b1c 100644
--- a/web/gui2/package-lock.json
+++ b/web/gui2/package-lock.json
@@ -5560,7 +5560,7 @@
},
"gui2-fw-lib": {
"version": "file:../gui2-fw-lib/dist/gui2-fw-lib/gui2-fw-lib-2.0.0.tgz",
- "integrity": "sha512-vHBnAneVQg76r7k3oY0oW2iLatWXLVmr2ei4I00qM73V7Z8hqkeIyRtOtW2PCbpjtiuPT6q8ObXvkDr23bjZVA==",
+ "integrity": "sha512-+ueL0HHFkVkLJYVDNVFu2sZ19uSYT/dSOTyN0faPh6Xwdlsfz58JLSdL5L8wXMjI2QYPg8Ff5hjBhjtO7cJ7kA==",
"requires": {
"tslib": "1.9.3"
}
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
index a5b4f3a..de70eb4 100644
--- 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
@@ -86,6 +86,7 @@
longitude: number;
name: string;
locType: LocationType;
+ uiType: string;
}
/**
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
index 884d9ce..747b1bb 100644
--- 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
@@ -84,6 +84,6 @@
[@deviceLabelToggleTxt]="labelToggle">
{{ labelToggle == 0 ? '': labelToggle == 1 ? device.id:device.props.name }}
</svg:text>
- <svg:use [attr.xlink:href]="'#m_' + device.type" width="36" height="36" x="-18" y="-18">
+ <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
index 32ed2ef..b490605 100644
--- 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
@@ -16,7 +16,7 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { DeviceNodeSvgComponent } from './devicenodesvg.component';
-import {LogService} from 'gui2-fw-lib';
+import {IconService, LogService} from 'gui2-fw-lib';
import {ActivatedRoute, Params} from '@angular/router';
import {of} from 'rxjs';
import {ChangeDetectorRef} from '@angular/core';
@@ -30,6 +30,10 @@
}
}
+class MockIconService {
+ loadIconDef() { }
+}
+
describe('DeviceNodeSvgComponent', () => {
let logServiceSpy: jasmine.SpyObj<LogService>;
let component: DeviceNodeSvgComponent;
@@ -50,7 +54,8 @@
providers: [
{ provide: LogService, useValue: logSpy },
{ provide: ActivatedRoute, useValue: ar },
- { provide: ChangeDetectorRef, useClass: ChangeDetectorRef }
+ { provide: ChangeDetectorRef, useClass: ChangeDetectorRef },
+ { provide: IconService, useClass: MockIconService }
]
})
.compileComponents();
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
index 9a8afc5..1cfe7cf 100644
--- 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
@@ -23,7 +23,7 @@
SimpleChanges,
} from '@angular/core';
import {Device, LabelToggle, UiElement} from '../../models';
-import {LogService} from 'gui2-fw-lib';
+import {IconService, LogService} from 'gui2-fw-lib';
import {NodeVisual} from '../nodevisual';
import {animate, state, style, transition, trigger} from '@angular/animations';
@@ -71,6 +71,7 @@
textWidth: number = 36;
constructor(
protected log: LogService,
+ private is: IconService,
private ref: ChangeDetectorRef
) {
super();
@@ -119,4 +120,13 @@
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;
+ }
+ }
}