Addded alarm highlight on Topo View and link to Alarm View

Change-Id: I0de7a24e12fd7e299fc7e31747cb27cd4831828b
diff --git a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/visuals/devicenodesvg/devicenodesvg.component.css b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/visuals/devicenodesvg/devicenodesvg.component.css
index 204b85c..e7ce209 100644
--- a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/visuals/devicenodesvg/devicenodesvg.component.css
+++ b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/visuals/devicenodesvg/devicenodesvg.component.css
@@ -48,4 +48,10 @@
 g.node.hovered .node-container {
     stroke-width: 2.0;
     stroke: #454545;
-}
\ No newline at end of file
+}
+
+path.bracket {
+    stroke: white;
+    stroke-width: 1;
+    fill: none
+}
diff --git a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/visuals/devicenodesvg/devicenodesvg.component.html b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/visuals/devicenodesvg/devicenodesvg.component.html
index 49f9416..c4f5621 100644
--- a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/visuals/devicenodesvg/devicenodesvg.component.html
+++ b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/visuals/devicenodesvg/devicenodesvg.component.html
@@ -69,10 +69,14 @@
     -->
     <svg:rect x="-16" y="-16" width="32" height="32" [ngStyle]="{'fill': panelColor}">
     </svg:rect>
+    <!-- Create an L shaped bracket on bottom left of icon if it has either grid or geo location-->
     <svg:path *ngIf="device.location && device.location.locType != 'none'"
-              d="M-15 12 v3 h3" style="stroke: white; stroke-width: 1; fill: none"></svg:path>
+              d="M-15 12 v3 h3" class="bracket">
+    </svg:path>
+    <!-- Create an L shaped bracket on top right of icon if it has been pinned or has fixed location-->
     <svg:path *ngIf="device.fx != null"
-              d="M15 -12 v-3 h-3" style="stroke: white; stroke-width: 1; fill: none"></svg:path>
+              d="M15 -12 v-3 h-3" class="bracket">
+    </svg:path>
     <!-- Template explanation: Creates an SVG Text element and in
         line 1) make it left aligned and slightly down and to the right of the last rect
         line 2) set its text length to be the calculated value - see that function
@@ -92,4 +96,5 @@
     </svg:text>
     <svg:use [attr.xlink:href]="'#' + deviceIcon()" width="36" height="36" x="-18" y="-18">
     </svg:use>
+    <svg:g *ngIf="badge" onos-badgesvg [badge]="badge"></svg:g>
 </svg:g>
diff --git a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/visuals/devicenodesvg/devicenodesvg.component.spec.ts b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/visuals/devicenodesvg/devicenodesvg.component.spec.ts
index 994967d..067cce6 100644
--- a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/visuals/devicenodesvg/devicenodesvg.component.spec.ts
+++ b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/visuals/devicenodesvg/devicenodesvg.component.spec.ts
@@ -23,6 +23,7 @@
 import {Device} from '../../models';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {TopologyService} from '../../../../topology.service';
+import {BadgeSvgComponent} from '../badgesvg/badgesvg.component';
 
 class MockActivatedRoute extends ActivatedRoute {
     constructor(params: Params) {
@@ -100,7 +101,7 @@
 
         TestBed.configureTestingModule({
             imports: [ BrowserAnimationsModule ],
-            declarations: [ DeviceNodeSvgComponent ],
+            declarations: [ DeviceNodeSvgComponent, BadgeSvgComponent ],
             providers: [
                 { provide: LogService, useValue: logSpy },
                 { provide: ActivatedRoute, useValue: ar },
diff --git a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/visuals/devicenodesvg/devicenodesvg.component.ts b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/visuals/devicenodesvg/devicenodesvg.component.ts
index 9c246d9..4f06137 100644
--- a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/visuals/devicenodesvg/devicenodesvg.component.ts
+++ b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/visuals/devicenodesvg/devicenodesvg.component.ts
@@ -22,11 +22,14 @@
     OnChanges, OnInit, Output,
     SimpleChanges,
 } from '@angular/core';
-import {Device, LabelToggle, UiElement} from '../../models';
-import {IconService, LocMeta, LogService, MetaUi, SvgUtilService, ZoomUtils} from 'gui2-fw-lib';
+import {
+    Badge,
+    Device,
+    LabelToggle,
+} from '../../models';
+import {IconService, LogService, SvgUtilService} from 'gui2-fw-lib';
 import {NodeVisual, SelectedEvent} from '../nodevisual';
 import {animate, state, style, transition, trigger} from '@angular/animations';
-import {LocationType} from '../../../backgroundsvg/backgroundsvg.component';
 import {TopologyService} from '../../../../topology.service';
 
 /**
@@ -71,6 +74,7 @@
     @Input() labelToggle: LabelToggle.Enum = LabelToggle.Enum.NONE;
     @Input() colorMuted: boolean = false;
     @Input() colorTheme: string = 'light';
+    @Input() badge: Badge;
     @Output() selectedEvent = new EventEmitter<SelectedEvent>();
     textWidth: number = 36;
     panelColor: string = '#9ebedf';
@@ -110,7 +114,10 @@
             this.colorMuted = changes['colorMuted'].currentValue;
             this.panelColor = this.panelColour();
         }
-        this.ref.markForCheck();
+
+        if (changes['badge']) {
+            this.badge = changes['badge'].currentValue;
+        }
     }
 
     /**