mirrors/onos
1
0
Fork 0
mirror of https://github.com/opennetworkinglab/onos.git synced 2025-12-17 23:32:08 +01:00
Code Issues Projects Releases Wiki Activity

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

Browse Source 
Change-Id: Ic996be88a49aa5eceb912f7767ec0302ab1924c6
This commit is contained in:
Andrea Campanella 2019-07-25 15:05:59 +02:00
parent 53c2c681a9
commit 7cbeb97b8d
5 changed files with 37 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/roadm/BUILD
View File

@ -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",
)

2
apps/roadm/app/src/main/java/org/onosproject/roadm/RoadmUiComponent.java
View File

@ -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());

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

@ -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>

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

@ -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() {

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

@ -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>