blob: 9f2ee1a366cb07e9960ed0eb51ff2255da479943 [file] [log] [blame]
Sean Condonf4f54a12018-10-10 23:25:46 +01001<!--
2~ Copyright 2018-present Open Networking Foundation
3~
4~ Licensed under the Apache License, Version 2.0 (the "License");
5~ you may not use this file except in compliance with the License.
6~ You may obtain a copy of the License at
7~
8~ http://www.apache.org/licenses/LICENSE-2.0
9~
10~ Unless required by applicable law or agreed to in writing, software
11~ distributed under the License is distributed on an "AS IS" BASIS,
12~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13~ See the License for the specific language governing permissions and
14~ limitations under the License.
15-->
Sean Condon91481822019-01-01 13:56:14 +000016<div id="topo-p-instance" class="floatpanel" [ngStyle]="{'left': '20px', 'top':divTopPx+'px', 'width': (onosInstances.length * 170)+'px', 'height': '85px'}" [@instancePanelState]="on">
Sean Condonaa4366d2018-11-02 14:29:01 +000017 <div *ngFor="let inst of onosInstances | keyvalue ; let i=index"
Sean Condon058804c2019-04-16 09:41:52 +010018 [ngClass]="['onosInst', inst.value.online?'online':'', inst.value.ready? 'ready': '', mastership===inst.value.id?'mastership':'', 'affinity']"
Sean Condonaa4366d2018-11-02 14:29:01 +000019 (click)="chooseMastership(inst.value.id)">
Sean Condon0c577f62018-11-18 22:40:05 +000020 <svg xmlns="http://www.w3.org/2000/svg" width="170" height="85" viewBox="0 0 170 85">
Sean Condonaa4366d2018-11-02 14:29:01 +000021 <!-- The following blue-glow effect is applied (through CSS) when mastership style is activated on a rectangle -->
22 <filter x="-50%" y="-50%" width="200%" height="200%" id="blue-glow">
23 <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.7 0 0 0 1 0 "></feColorMatrix>
24 <feGaussianBlur stdDeviation="3" result="coloredBlur"></feGaussianBlur>
25 <feMerge>
26 <feMergeNode in="coloredBlur"></feMergeNode>
27 <feMergeNode in="SourceGraphic"></feMergeNode>
28 </feMerge>
29 </filter>
30 <rect x="5" y="5" width="160" height="30" [ngStyle]="{ 'fill': panelColour(i)}"></rect>
31 <text class="instTitle" x="48" y="27">{{ inst.value.id }}</text>
Sean Condonf4f54a12018-10-10 23:25:46 +010032 <rect x="5" y="35" width="160" height="45"></rect>
Sean Condonaa4366d2018-11-02 14:29:01 +000033 <text class="instLabel ip" x="48" y="55">{{ inst.value.ip }}</text>
Sean Condonf4f54a12018-10-10 23:25:46 +010034 <use width="20" height="20" class="glyph badgeIcon bird" xlink:href="#bird" transform="translate(15,10)"></use>
Sean Condonaa4366d2018-11-02 14:29:01 +000035 <use *ngIf="inst.value.ready" width="16" height="16" class="glyph overlay badgeIcon readyBadge" xlink:href="#checkMark" transform="translate(18,40)"></use>
Sean Condon91481822019-01-01 13:56:14 +000036 <text class="instLabel ns" x="48" y="73">{{lionFn('devices')}} {{ inst.value.switches }}</text>
Sean Condonaa4366d2018-11-02 14:29:01 +000037 <use *ngIf="inst.value.uiAttached" width="24" height="24" class="glyph overlay badgeIcon uiBadge" xlink:href="#uiAttached" transform="translate(14,54)"></use>
Sean Condonf4f54a12018-10-10 23:25:46 +010038 </svg>
39 </div>
Sean Condon058804c2019-04-16 09:41:52 +010040</div>