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/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;