Fixing elements resize, names, icons and values in optical UI

Change-Id: Ic996be88a49aa5eceb912f7767ec0302ab1924c6

apps/roadm/BUILD

@@ -6,6 +6,6 @@ onos_app(
     category = "Graphical User Interface",
     description = "ONOS OSGi GUI2 Custom-View app roadm.",
     included_bundles = BUNDLES,
-    title = "roadm Application",
+    title = "Optical Application",
     url = "http://onosproject.org",
 )

apps/roadm/app/src/main/java/org/onosproject/roadm/RoadmUiComponent.java

@@ -38,7 +38,7 @@ import java.util.List;
 public class RoadmUiComponent {
 
     private static final String VIEW_ID = "roadm-gui";
-    private static final String VIEW_TEXT = "Roadm UI";
+    private static final String VIEW_TEXT = "Optical UI";
 
     private final Logger log = LoggerFactory.getLogger(getClass());
 

apps/roadm/web/roadm-gui/projects/roadm-gui-lib/src/lib/port/port.component.html

@@ -15,10 +15,10 @@
 -->
 <!-- Port partial HTML -->
 <div id="ov-roadm-port">
-    <onos-loading [theme]="'light'" [running]="loadingIconShown"></onos-loading>
+    <!--<onos-loading [theme]="'light'" [running]="loadingIconShown"></onos-loading>-->
     <div class="tabular-header">
         <h2>
-            Ports for Roadm Device {{devId}} ({{tableData.length}} Total)
+            Ports for Optical Device {{devId}} ({{tableData.length}} Total)
         </h2>
 
         <div class="ctrl-btns">
@@ -62,45 +62,19 @@
         <div class="table-header">
             <table>
                 <tr>
-                    <td colId="id" (click)="onSort('id')">Port ID
+                    <td colId="id">Port ID</td>
-                        <onos-icon classes="active-sort" [iconSize]="10" [iconId]="sortIcon('id')"></onos-icon>
+                    <td colId="reversePort">Reverse Port</td>
-                    </td>
+                    <td colId="name">Name</td>
-                    <td colId="reversePort" (click)="onSort('reversePort')">Reverse Port
+                    <td colId="type">Type</td>
-                        <onos-icon classes="active-sort" [iconSize]="10" [iconId]="sortIcon('reversePort')"></onos-icon>
+                    <td colId="enabled">Enabled</td>
-                    </td>
+                    <td colId="minFreq">Min Freq (GHz)</td>
-                    <td colId="name" (click)="onSort('name')">Name
+                    <td colId="maxFreq">Max Freq (GHz)</td>
-                        <onos-icon classes="active-sort" [iconSize]="10" [iconId]="sortIcon('name')"></onos-icon>
+                    <td colId="grid">Grid (GHz)</td>
-                    </td>
+                    <td colId="powerRange">Power Range (dBm)</td>
-                    <td colId="type" (click)="onSort('type')">Type
+                    <td colId="currentPower">Current Power (dBm)</td>
-                        <onos-icon classes="active-sort" [iconSize]="10" [iconId]="sortIcon('type')"></onos-icon>
+                    <td colId="targetPower">Target Power (dBm)</td>
-                    </td>
+                    <td colId="hasTargetPower">Has Target Power</td>
-                    <td colId="enabled" (click)="onSort('enabled')">Enabled
+                    <td colId="serviceState">Service State</td>
-                        <onos-icon classes="active-sort" [iconSize]="10" [iconId]="sortIcon('enabled')"></onos-icon>
-                    </td>
-                    <td colId="minFreq" (click)="onSort('minFreq')">Min Freq (GHz)
-                        <onos-icon classes="active-sort" [iconSize]="10" [iconId]="sortIcon('minFreq')"></onos-icon>
-                    </td>
-                    <td colId="maxFreq" (click)="onSort('maxFreq')">Max Freq (GHz)
-                        <onos-icon classes="active-sort" [iconSize]="10" [iconId]="sortIcon('maxFreq')"></onos-icon>
-                    </td>
-                    <td colId="grid" (click)="onSort('grid')">Grid (GHz)
-                        <onos-icon classes="active-sort" [iconSize]="10" [iconId]="sortIcon('grid')"></onos-icon>
-                    </td>
-                    <td colId="powerRange" (click)="onSort('powerRange')">Power Range (dBm)
-                        <onos-icon classes="active-sort" [iconSize]="10" [iconId]="sortIcon('powerRange')"></onos-icon>
-                    </td>
-                    <td colId="currentPower" (click)="onSort('currentPower')">Current Power (dBm)
-                        <onos-icon classes="active-sort" [iconSize]="10" [iconId]="sortIcon('currentPower')"></onos-icon>
-                    </td>
-                    <td colId="targetPower" (click)="onSort('targetPower')">Target Power (dBm)
-                        <onos-icon classes="active-sort" [iconSize]="10" [iconId]="sortIcon('targetPower')"></onos-icon>
-                    </td>
-                    <td colId="hasTargetPower" (click)="onSort('hasTargetPower')">Has Target Power
-                        <onos-icon classes="active-sort" [iconSize]="10" [iconId]="sortIcon('hasTargetPower')"></onos-icon>
-                    </td>
-                    <td colId="serviceState" (click)="onSort('serviceState')">Service State
-                        <onos-icon classes="active-sort" [iconSize]="10" [iconId]="sortIcon('serviceState')"></onos-icon>
-                    </td>
                 </tr>
             </table>
         </div>
@@ -117,14 +91,14 @@
                     <td [ngClass]="(isDelta() ? 'delta' : '')">{{port.name}}</td>
                     <td [ngClass]="(isDelta() ? 'delta' : '')">{{port.type}}</td>
                     <td [ngClass]="(isDelta() ? 'delta' : '')">{{port.enabled}}</td>
-                    <td [ngClass]="(isDelta() ? 'delta' : '')">{{port.minFreq}}</td>
+                    <td [ngClass]="(isDelta() ? 'delta' : '')">{{port.type=='OCH'?port.minFreq:""}}</td>
-                    <td [ngClass]="(isDelta() ? 'delta' : '')">{{port.maxFreq}}</td>
+                    <td [ngClass]="(isDelta() ? 'delta' : '')">{{port.type=='OCH'?port.maxFreq:""}}</td>
-                    <td [ngClass]="(isDelta() ? 'delta' : '')">{{port.grid}}</td>
+                    <td [ngClass]="(isDelta() ? 'delta' : '')">{{port.type=='OCH'?port.grid:""}}</td>
                     <td [ngClass]="(isDelta() ? 'delta' : '')">{{port.powerRange}}</td>
                     <td [ngClass]="(isDelta() ? 'delta' : '')">{{port.currentPower}}</td>
-                    <td [ngClass]="(isDelta() ? 'delta' : '')">{{port.targetPower}}
+                    <td [ngClass]="(isDelta() ? 'delta' : '')">
                         <form [formGroup]="powerForm" (ngSubmit)="submitPower(devId, port.id)" *ngIf="port.type=='OCH'">
-                            <input type="text" formControlName="newPower" required>
+                            <input type="number" step="any" style="width:50px" value="{{port.targetPower}}" formControlName="newPower" required>
                             <button type="submit">Submit</button>
                         </form>
                     </td>

apps/roadm/web/roadm-gui/projects/roadm-gui-lib/src/lib/port/port.component.ts

@@ -19,6 +19,7 @@ import {
     LogService,
     PrefsService,
     WebSocketService,
+    IconService,
     SortDir, TableBaseImpl, TableResponse
 } from 'gui2-fw-lib';
 import { ActivatedRoute } from '@angular/router';
@@ -88,7 +89,8 @@ export class RoadmPortComponent extends TableBaseImpl implements OnInit, OnDestr
                 protected log: LogService,
                 protected ar: ActivatedRoute,
                 protected wss: WebSocketService,
-                protected prefs: PrefsService
+                protected prefs: PrefsService,
+                protected is: IconService,
     ) {
         super(fs, log, wss, 'roadmPort');
         this.ar.queryParams.subscribe(params => {
@@ -109,6 +111,8 @@ export class RoadmPortComponent extends TableBaseImpl implements OnInit, OnDestr
             secondCol: 'type',
             secondDir: SortDir.asc,
         };
+
+        this.is.loadIconDef('switch');
     }
 
     ngOnInit() {

apps/roadm/web/roadm-gui/projects/roadm-gui-lib/src/lib/roadm/roadm.component.html

@@ -16,7 +16,7 @@
 <div id="ov-device">
     <onos-loading [theme]="'light'" [running]="loadingIconShown"></onos-loading>
     <div class="tabular-header">
-        <h2>Devices ({{ tableData.length }} total)</h2>
+        <h2>Optical Devices ({{ tableData.length }} total)</h2>
         <div class="ctrl-btns">
             <div class="refresh" (click)="toggleRefresh()">
                 <!-- See icon.theme.css for the defintions of the classes active and refresh-->
@@ -55,33 +55,15 @@
                 <tr>
                     <td colId="available" class="table-icon"></td>
                     <td colId="type" class="table-icon"></td>
-                    <td colId="name" (click)="onSort('name')">Friendly Name
+                    <td colId="name">Friendly Name</td>
-                        <onos-icon classes="active-sort" [iconSize]="10" [iconId]="sortIcon('name')"></onos-icon>
+                    <td colId="id">Device ID</td>
-                    </td>
+                    <td colId="master" [ngClass]="{width: '130px'}">Master</td>
-                    <td colId="id" (click)="onSort('id')">Device ID
+                    <td colId="ports" [ngClass]="{width: '70px'}">Ports</td>
-                        <onos-icon classes="active-sort" [iconSize]="10" [iconId]="sortIcon('id')"></onos-icon>
+                    <td colId="vendor">Vendor</td>
-                    </td>
+                    <td colId="hwVersion">H/W Version</td>
-                    <td colId="master" [ngClass]="{width: '130px'}" (click)="onSort('master')">Master
+                    <td colId="swVersion">S/W Version</td>
-                        <onos-icon classes="active-sort" [iconSize]="10" [iconId]="sortIcon('master')"></onos-icon>
+                    <td colId="protocol" [ngClass]="{width: '100px'}">Protocol</td>
-                    </td>
+                    <td colId="type">Type</td>
-                    <td colId="ports" [ngClass]="{width: '70px'}" (click)="onSort('ports')">Ports
-                        <onos-icon classes="active-sort" [iconSize]="10" [iconId]="sortIcon('ports')"></onos-icon>
-                    </td>
-                    <td colId="vendor" (click)="onSort('vendor')">Vendor
-                        <onos-icon classes="active-sort" [iconSize]="10" [iconId]="sortIcon('vendor')"></onos-icon>
-                    </td>
-                    <td colId="hwVersion" (click)="onSort('hwVersion')">H/W Version
-                        <onos-icon classes="active-sort" [iconSize]="10" [iconId]="sortIcon('hwVersion')"></onos-icon>
-                    </td>
-                    <td colId="swVersion" (click)="onSort('swVersion')">S/W Version
-                        <onos-icon classes="active-sort" [iconSize]="10" [iconId]="sortIcon('swVersion')"></onos-icon>
-                    </td>
-                    <td colId="protocol" [ngClass]="{width: '100px'}" (click)="onSort('protocol')">Protocol
-                        <onos-icon classes="active-sort" [iconSize]="10" [iconId]="sortIcon('protocol')"></onos-icon>
-                    </td>
-                    <td colId="type" (click)="onSort('type')">Type
-                        <onos-icon classes="active-sort" [iconSize]="10" [iconId]="sortIcon('type')"></onos-icon>
-                    </td>
                 </tr>
             </table>
         </div>