Fixing elements resize, names, icons and values in optical UI
Change-Id: Ic996be88a49aa5eceb912f7767ec0302ab1924c6
diff --git a/apps/roadm/BUILD b/apps/roadm/BUILD
index 17cb0d9..eb189f7 100644
--- a/apps/roadm/BUILD
+++ b/apps/roadm/BUILD
@@ -6,6 +6,6 @@
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",
)
diff --git a/apps/roadm/app/src/main/java/org/onosproject/roadm/RoadmUiComponent.java b/apps/roadm/app/src/main/java/org/onosproject/roadm/RoadmUiComponent.java
index b92f240..30c40ba 100644
--- a/apps/roadm/app/src/main/java/org/onosproject/roadm/RoadmUiComponent.java
+++ b/apps/roadm/app/src/main/java/org/onosproject/roadm/RoadmUiComponent.java
@@ -38,7 +38,7 @@
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());
diff --git a/apps/roadm/web/roadm-gui/projects/roadm-gui-lib/src/lib/port/port.component.html b/apps/roadm/web/roadm-gui/projects/roadm-gui-lib/src/lib/port/port.component.html
index 78c3c6b..812bfed 100644
--- a/apps/roadm/web/roadm-gui/projects/roadm-gui-lib/src/lib/port/port.component.html
+++ b/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
- <onos-icon classes="active-sort" [iconSize]="10" [iconId]="sortIcon('id')"></onos-icon>
- </td>
- <td colId="reversePort" (click)="onSort('reversePort')">Reverse Port
- <onos-icon classes="active-sort" [iconSize]="10" [iconId]="sortIcon('reversePort')"></onos-icon>
- </td>
- <td colId="name" (click)="onSort('name')">Name
- <onos-icon classes="active-sort" [iconSize]="10" [iconId]="sortIcon('name')"></onos-icon>
- </td>
- <td colId="type" (click)="onSort('type')">Type
- <onos-icon classes="active-sort" [iconSize]="10" [iconId]="sortIcon('type')"></onos-icon>
- </td>
- <td colId="enabled" (click)="onSort('enabled')">Enabled
- <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>
+ <td colId="id">Port ID</td>
+ <td colId="reversePort">Reverse Port</td>
+ <td colId="name">Name</td>
+ <td colId="type">Type</td>
+ <td colId="enabled">Enabled</td>
+ <td colId="minFreq">Min Freq (GHz)</td>
+ <td colId="maxFreq">Max Freq (GHz)</td>
+ <td colId="grid">Grid (GHz)</td>
+ <td colId="powerRange">Power Range (dBm)</td>
+ <td colId="currentPower">Current Power (dBm)</td>
+ <td colId="targetPower">Target Power (dBm)</td>
+ <td colId="hasTargetPower">Has Target Power</td>
+ <td colId="serviceState">Service State</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.maxFreq}}</td>
- <td [ngClass]="(isDelta() ? 'delta' : '')">{{port.grid}}</td>
+ <td [ngClass]="(isDelta() ? 'delta' : '')">{{port.type=='OCH'?port.minFreq:""}}</td>
+ <td [ngClass]="(isDelta() ? 'delta' : '')">{{port.type=='OCH'?port.maxFreq:""}}</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>
diff --git a/apps/roadm/web/roadm-gui/projects/roadm-gui-lib/src/lib/port/port.component.ts b/apps/roadm/web/roadm-gui/projects/roadm-gui-lib/src/lib/port/port.component.ts
index 34a2bdf..d1a2a21 100644
--- a/apps/roadm/web/roadm-gui/projects/roadm-gui-lib/src/lib/port/port.component.ts
+++ b/apps/roadm/web/roadm-gui/projects/roadm-gui-lib/src/lib/port/port.component.ts
@@ -19,6 +19,7 @@
LogService,
PrefsService,
WebSocketService,
+ IconService,
SortDir, TableBaseImpl, TableResponse
} from 'gui2-fw-lib';
import { ActivatedRoute } from '@angular/router';
@@ -88,7 +89,8 @@
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 @@
secondCol: 'type',
secondDir: SortDir.asc,
};
+
+ this.is.loadIconDef('switch');
}
ngOnInit() {
diff --git a/apps/roadm/web/roadm-gui/projects/roadm-gui-lib/src/lib/roadm/roadm.component.html b/apps/roadm/web/roadm-gui/projects/roadm-gui-lib/src/lib/roadm/roadm.component.html
index 3068d77..b242701 100644
--- a/apps/roadm/web/roadm-gui/projects/roadm-gui-lib/src/lib/roadm/roadm.component.html
+++ b/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
- <onos-icon classes="active-sort" [iconSize]="10" [iconId]="sortIcon('name')"></onos-icon>
- </td>
- <td colId="id" (click)="onSort('id')">Device ID
- <onos-icon classes="active-sort" [iconSize]="10" [iconId]="sortIcon('id')"></onos-icon>
- </td>
- <td colId="master" [ngClass]="{width: '130px'}" (click)="onSort('master')">Master
- <onos-icon classes="active-sort" [iconSize]="10" [iconId]="sortIcon('master')"></onos-icon>
- </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>
+ <td colId="name">Friendly Name</td>
+ <td colId="id">Device ID</td>
+ <td colId="master" [ngClass]="{width: '130px'}">Master</td>
+ <td colId="ports" [ngClass]="{width: '70px'}">Ports</td>
+ <td colId="vendor">Vendor</td>
+ <td colId="hwVersion">H/W Version</td>
+ <td colId="swVersion">S/W Version</td>
+ <td colId="protocol" [ngClass]="{width: '100px'}">Protocol</td>
+ <td colId="type">Type</td>
</tr>
</table>
</div>