| <!-- partial HTML --> |
| <div id="ov-roadm-flow" class="less-gap" ng-init="queryShowItems()"> |
| |
| <div class="tabular-header"> |
| <h2>Connections for Optical Device {{devId}} ({{tableData.length}} total)</h2> |
| <div class="ctrl-btns"> |
| <div class="active" |
| icon icon-id="plus" icon-size="42" |
| tooltip tt-msg="addFlowTip" |
| ng-click="displayFlowForm()"></div> |
| |
| <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="current-view" |
| icon icon-id="flowTable" icon-size="42" |
| tooltip tt-msg="flowTip"></div> |
| |
| <div class="active" |
| icon icon-id="portTable" icon-size="42" |
| tooltip tt-msg="portTip" |
| ng-click="nav('roadmPort')"></div> |
| </div> |
| </div> |
| |
| <div class="summary-list" onos-table-resize> |
| |
| <div class="table-header" onos-sortable-header> |
| <table> |
| <tr> |
| <td col-width="30px"></td> |
| <td colId="flowId" sortable col-width="180px">Flow ID </td> |
| <td colId="appId" sortable>App ID </td> |
| <td colId="priority" sortable>Priority </td> |
| <td colId="timeout" sortable>Timeout </td> |
| <td colId="permanent" sortable>Permanent </td> |
| <td colId="state" sortable>State </td> |
| <td colId="inPort" sortable>In Port </td> |
| <td colId="outPort" sortable>Out Port </td> |
| <td colId="multiplier" ng-show="showChannel" sortable>Channel </td> |
| <td colId="spacing" ng-show="showChannel">Spacing <span class="units">(GHz)</span> </td> |
| <td colId="currentPower" col-width="180px">Current Power <span class="units">(0.01dBm)</span></td> |
| <td colId="attenuation" col-width="200px" ng-show="showAttenuation">Attenuation <span class="units">(0.01dB)</span></td> |
| </tr> |
| </table> |
| </div> |
| |
| <div class="table-body"> |
| <table> |
| <tr ng-if="!tableData.length" class="no-data"> |
| <td colspan="13"> |
| {{annots.no_rows_msg}} |
| </td> |
| </tr> |
| |
| <tr ng-repeat="flow in tableData track by $index" |
| ng-class="{selected: flow.id === selId}"> |
| <td class="delete-icon" ng-click="deleteFlow($event, flow)">×</td> |
| <td>{{flow.flowId}}</td> |
| <td>{{flow.appId}}</td> |
| <td>{{flow.priority}}</td> |
| <td>{{flow.timeout}}</td> |
| <td>{{flow.permanent}}</td> |
| <td>{{flow.state}}</td> |
| <td>{{flow.inPort}}</td> |
| <td>{{flow.outPort}}</td> |
| <td ng-show="showChannel">{{flow.multiplier}}{{flow.channdlFrequency}}</td> |
| <td ng-show="showChannel">{{flow.spacing}}</td> |
| <td>{{flow.currentPower}}</td> |
| <td class="editable" roadm-att="flow" roadm-set-att="setAttenuation(flow, targetVal, cb)" ng-show="showAttenuation"></td> |
| </tr> |
| </table> |
| </div> |
| |
| </div> |
| |
| <div class="flow-form" ng-controller="FlowFormController as form" ng-show="showFlowForm"> |
| <div class="delete-icon" ng-click="hideFlowForm()">×</div> |
| <form> |
| <label>Priority</label><input type="number" ng-model="form.flow.priority" /> |
| <span class="form-error" ng-show="form.priorityError" >{{form.priorityMessage}}</span><br /> |
| |
| <label>Is Permanent</label><input type="checkbox" ng-model="form.flow.permanent" /><br /> |
| |
| <label>Timeout</label><input type="number" ng-model="form.flow.timeout" ng-disabled="form.flow.permanent"/> |
| <span class="form-error" ng-show="form.timeoutError" >{{form.timeoutMessage}}</span><br /> |
| |
| <label>In Port</label><input type="number" ng-model="form.flow.inPort" /> |
| <span class="form-error" ng-show="form.inPortError">{{form.inPortMessage}}</span><br /> |
| |
| <label>Out Port</label><input type="number" ng-model="form.flow.outPort" /> |
| <span class="form-error" ng-show="form.outPortError">{{form.outPortMessage}}</span> |
| <span class="form-error" ng-show="form.connectionError">{{form.connectionMessage}}</span><br /> |
| |
| <label>Include Channel</label><input type="checkbox" ng-model="showChannel" /><br /> |
| |
| <label>Channel Spacing</label><select ng-model="form.flow.spacing" ng-disabled="!showChannel" ng-options="x.freq for x in form.spacings"></select> |
| <span class="form-error" ng-show="form.spacingError">{{form.spacingMessage}}</span><br /> |
| |
| <label>Spacing Multiplier</label><input type="number" ng-model="form.flow.multiplier" ng-disabled="!showChannel"/> |
| <span class="form-error" ng-show="form.multiplierError">{{form.multiplierMessage}}</span> |
| <span class="form-error" ng-show="form.channelError">{{form.channelMessage}}</span><br /> |
| |
| <label>Include Attenuation</label><input type="checkbox" ng-model="showAttenuation" /><br /> |
| |
| <label>Attenuation</label><input type="number" ng-model="form.flow.attenuation" ng-disabled="!showAttenuation"/> |
| <span class="form-error" ng-show="form.attenuationError">{{form.attenuationMessage}}</span><br /> |
| </form> |
| <button type="submit" class="submit" ng-click="form.createFlow(form.flow)">Create Connection</button> |
| </div> |
| |
| </div> |