GUI2 Display of mastership for devices
Change-Id: I13ed95d1a58d055aa913c69402541b87855c28c8
diff --git a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/panel/instance/instance.component.html b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/panel/instance/instance.component.html
index f5a2859..9f2ee1a 100644
--- a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/panel/instance/instance.component.html
+++ b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/panel/instance/instance.component.html
@@ -15,7 +15,7 @@
-->
<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']"
+ [ngClass]="['onosInst', inst.value.online?'online':'', inst.value.ready? 'ready': '', mastership===inst.value.id?'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 -->
@@ -37,4 +37,4 @@
<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
+</div>
diff --git a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/panel/instance/instance.component.ts b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/panel/instance/instance.component.ts
index 70cbb1f..1ae8de4 100644
--- a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/panel/instance/instance.component.ts
+++ b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/panel/instance/instance.component.ts
@@ -17,7 +17,7 @@
Component,
Input,
Output,
- EventEmitter
+ EventEmitter, OnChanges, SimpleChanges
} from '@angular/core';
import { animate, state, style, transition, trigger } from '@angular/animations';
import {
@@ -71,11 +71,11 @@
])
]
})
-export class InstanceComponent extends PanelBaseImpl {
+export class InstanceComponent extends PanelBaseImpl implements OnChanges {
+ @Input() onosInstances: Instance[] = [];
@Input() divTopPx: number = 100;
@Input() on: boolean = false; // Override the parent class attribute
@Output() mastershipEvent = new EventEmitter<string>();
- public onosInstances: Array<Instance>;
public mastership: string;
lionFn; // Function
@@ -87,7 +87,6 @@
private lion: LionService
) {
super(fs, log);
- this.onosInstances = <Array<Instance>>[];
if (this.lion.ubercache.length === 0) {
this.lionFn = this.dummyLion;
@@ -98,6 +97,12 @@
this.log.debug('InstanceComponent constructed');
}
+ ngOnChanges(changes: SimpleChanges): void {
+ if (changes['onosInstances']) {
+ this.onosInstances = <Instance[]>changes['onosInstances'].currentValue;
+ }
+ }
+
/**
* Get a colour for the banner of the nth panel
* @param idx The index of the panel (0-6)
@@ -113,7 +118,7 @@
*/
chooseMastership(instId: string): void {
if (this.mastership === instId) {
- this.mastership = '';
+ this.mastership = undefined;
} else {
this.mastership = instId;
}