Added in support for navigating to Topo View from Intent View
Change-Id: Ia62428dee29013cc7fa52727662b67f5673d725c
diff --git a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/forcesvg.component.ts b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/forcesvg.component.ts
index adc814e..eebe851 100644
--- a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/forcesvg.component.ts
+++ b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/forcesvg.component.ts
@@ -532,6 +532,7 @@
/**
* When traffic monitoring is turned on (A key) highlights will be sent back
* from the WebSocket through the Traffic Service
+ * Also handles Intent highlights in case one is selected
* @param devices - an array of device highlights
* @param hosts - an array of host highlights
* @param links - an array of link highlights
@@ -566,21 +567,30 @@
}
if (links.length > 0) {
this.log.debug(links.length, 'Links highlighted');
- links.forEach((lh) => {
- const linkComponent: LinkSvgComponent =
- this.links.find((l) => l.link.id === Link.linkIdFromShowHighlights(lh.id) );
- if (linkComponent) { // A link might not be present if hosts viewing is switched off
- if (fadeMs > 0) {
- lh.fadems = fadeMs;
- }
- linkComponent.ngOnChanges(
- {'linkHighlight': new SimpleChange(<LinkHighlight>{}, lh, true)}
- );
+ links.forEach((lh: LinkHighlight) => {
+ if (fadeMs > 0) {
+ lh.fadems = fadeMs;
}
+ // Don't user .filter() above as it will create a copy of the component which will be discarded
+ this.links.forEach((l) => {
+ if (l.link.id === Link.linkIdFromShowHighlights(lh.id)) {
+ l.linkHighlight = lh;
+ l.ngOnChanges(
+ <SimpleChanges>{'linkHighlight': new SimpleChange(<LinkHighlight>{}, lh, true)}
+ );
+ }
+ });
});
}
}
+ cancelAllLinkHighlightsNow() {
+ this.links.forEach((link: LinkSvgComponent) => {
+ link.linkHighlight = <LinkHighlight>{};
+ this.ngOnChanges(<SimpleChanges>{'linkHighlight': new SimpleChange(<LinkHighlight>{}, <LinkHighlight>{}, false)});
+ });
+ }
+
/**
* As nodes are dragged around the graph, their new location should be sent
* back to server
@@ -665,6 +675,5 @@
this.graph.reinitSimulation();
return numbernodes;
}
-
}
diff --git a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/visuals/linksvg/linksvg.component.css b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/visuals/linksvg/linksvg.component.css
index 58548c4..e5f12ae 100644
--- a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/visuals/linksvg/linksvg.component.css
+++ b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/visuals/linksvg/linksvg.component.css
@@ -86,7 +86,7 @@
}
.link.animated {
- stroke-dasharray: 8 5;
+ stroke-dasharray: 8;
animation: ants 5s infinite linear;
/* below line could be added via Javascript, based on path, if we cared
* enough about the direction of ant-flow
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..ec3afae 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
@@ -37,11 +37,12 @@
<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]"
+ [ngClass]="['link', selected?'selected':'', enhanced?'enhanced':'', highlightAsString()]"
[ngStyle]="{'stroke-width': (enhanced ? 4 : 2) * scale + 'px'}"
(click)="toggleSelected(link, $event)"
- (mouseover)="enhance()"
- [attr.filter]="highlighted?'url(#glow)':'none'">
+ (mouseover)="enhance()">
+<!-- [attr.filter]="highlighted?'url(#glow)':'none'">-->
+ <svg:desc>{{link.id}} {{linkHighlight?.css}} {{isHighlighted}}</svg:desc>
</svg:line>
<svg:g xmlns:svg="http://www.w3.org/2000/svg"
[ngClass]="['linkLabel']"
@@ -58,7 +59,7 @@
[@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>
+ >{{ linkHighlight?.label }}</svg:text>
</svg:g>
<!-- Template explanation: Creates an SVG Group if
line 1) 'enhanced' is active and port text exists
diff --git a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/visuals/linksvg/linksvg.component.ts b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/visuals/linksvg/linksvg.component.ts
index c669c1c..197ac3c 100644
--- a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/visuals/linksvg/linksvg.component.ts
+++ b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/visuals/linksvg/linksvg.component.ts
@@ -28,6 +28,10 @@
y: number;
}
+/*
+ * LinkSvgComponent gets its data from 2 sources - the force SVG regionData (which
+ * gives the Link below), and other state data here.
+ */
@Component({
selector: '[onos-linksvg]',
templateUrl: './linksvg.component.html',
@@ -47,9 +51,8 @@
})
export class LinkSvgComponent extends NodeVisual implements OnChanges {
@Input() link: Link;
- @Input() highlighted: string = '';
+ @Input() linkHighlight: LinkHighlight;
@Input() highlightsEnabled: boolean = true;
- @Input() label: string;
@Input() scale = 1.0;
isHighlighted: boolean = false;
@Output() selectedEvent = new EventEmitter<SelectedEvent>();
@@ -70,23 +73,28 @@
if (changes['linkHighlight']) {
const hl: LinkHighlight = changes['linkHighlight'].currentValue;
clearTimeout(this.lastTimer);
- this.highlighted = hl.css;
- this.label = hl.label;
this.isHighlighted = true;
- this.log.debug('Link hightlighted', this.link.id, this.highlighted);
+ this.log.debug('Link highlighted', this.link.id);
+
if (hl.fadems > 0) {
this.lastTimer = setTimeout(() => {
this.isHighlighted = false;
- this.highlighted = '';
+ this.linkHighlight = <LinkHighlight>{};
this.ref.markForCheck();
- }, hl.fadems); // Disappear slightly before next one comes in
+ }, this.linkHighlight.fadems); // Disappear slightly before next one comes in
}
-
}
this.ref.markForCheck();
}
+ highlightAsString(): string {
+ if (this.linkHighlight && this.linkHighlight.css) {
+ return this.linkHighlight.css;
+ }
+ return '';
+ }
+
enhance() {
if (!this.highlightsEnabled) {
return;