| <!-- partial HTML --> |
| <div id="ov-roadm-port" class="less-gap" ng-init="queryShowItems()"> |
| |
| <div class="tabular-header"> |
| <h2>Ports for Optical Device {{devId}} ({{tableData.length}} total)</h2> |
| <div class="ctrl-btns"> |
| <div class="refresh" ng-class="{active: autoRefresh}" |
| icon icon-id="refresh" icon-size="42" |
| tooltip tt-msg="autoRefreshTip" |
| ng-click="toggleRefresh()"></div> |
| <div class="separator"></div> |
| |
| <div class="active" |
| icon icon-id="deviceTable" icon-size="42" |
| tooltip tt-msg="deviceTip" |
| ng-click="nav('roadmDevice')"></div> |
| |
| <div class="active" |
| icon icon-id="flowTable" icon-size="42" |
| tooltip tt-msg="flowTip" |
| ng-click="nav('roadmFlow')" ng-show="showFlowIcon"></div> |
| |
| <div class="current-view" |
| icon icon-id="portTable" icon-size="42" |
| tooltip tt-msg="portTip"></div> |
| </div> |
| </div> |
| |
| <div class="summary-list" onos-table-resize> |
| <div class="table-header" onos-sortable-header> |
| <table> |
| <tr> |
| <td colId="id" sortable>Port Number </td> |
| <td colId="name" sortable>Name </td> |
| <td colId="type" sortable>Type </td> |
| <td colId="enabled" sortable>Enabled </td> |
| <td colId="minFreq" sortable>Min Freq <span class="units">(THz)</span> </td> |
| <td colId="maxFreq" sortable>Max Freq <span class="units">(THz)</span> </td> |
| <td colId="grid" sortable>Grid <span class="units">(GHz)</span> </td> |
| <td colId="powerRange" sortable>Power Range </td> |
| <td colId="currentPower">Current Power <span class="units">(0.01dBm)</span> </td> |
| <td colId="serviceState" ng-show="showServiceState">Protection Status </td> |
| <td colId="targetPower" col-width="200px" ng-show="showTargetPower">Target Power <span class="units">(0.01dBm)</span> </td> |
| </tr> |
| </table> |
| </div> |
| |
| <div class="table-body"> |
| <table> |
| <tr ng-if="!tableData.length" class="no-data"> |
| <td colspan="11"> |
| {{annots.no_rows_msg}} |
| </td> |
| </tr> |
| |
| <tr ng-repeat="item in tableData track by $index" |
| ng-class="{selected: item.id === selId}"> |
| <td>{{item.id}}</td> |
| <td>{{item.name}}</td> |
| <td>{{item.type}}</td> |
| <td>{{item.enabled}}</td> |
| <td>{{item.minFreq}}</td> |
| <td>{{item.maxFreq}}</td> |
| <td>{{item.grid}}</td> |
| <td>{{item.powerRange}}</td> |
| <td>{{item.currentPower}}</td> |
| <td ng-show="showServiceState">{{item.serviceState}}</td> |
| <td ng-show="showTargetPower" class="editable" roadm-power="item" roadm-set-power="setPortPower(port, targetVal, cb)"></td> |
| </tr> |
| </table> |
| <div class="mode-select" ng-show="showServiceState"> |
| <hr/> |
| <label class="mode-title">Protection Switch:</label> |
| <select ng-model="opsModeType" ng-options="mode.name for mode in opsModeTypes"></select> |
| <button ng-click="changeOpsMode()" title="Click to apply selected protection mode">Apply</button> |
| <label class="mode-fail" ng-if="changeModeFail">{{changeModeFailMsg}}</label> |
| </div> |
| </div> |
| </div> |
| </div> |