Jimmy Yan | da878fc | 2016-09-02 16:32:01 -0700 | [diff] [blame] | 1 | <!-- partial HTML --> |
MaoLu | 937cf42 | 2017-03-03 23:31:46 -0800 | [diff] [blame] | 2 | <div id="ov-roadm-flow" class="less-gap" ng-init="queryShowItems()"> |
Jimmy Yan | da878fc | 2016-09-02 16:32:01 -0700 | [diff] [blame] | 3 | |
| 4 | <div class="tabular-header"> |
| 5 | <h2>Connections for Optical Device {{devId}} ({{tableData.length}} total)</h2> |
| 6 | <div class="ctrl-btns"> |
| 7 | <div class="active" |
| 8 | icon icon-id="plus" icon-size="42" |
| 9 | tooltip tt-msg="addFlowTip" |
| 10 | ng-click="displayFlowForm()"></div> |
| 11 | |
| 12 | <div class="refresh" ng-class="{active: autoRefresh}" |
| 13 | icon icon-id="refresh" icon-size="42" |
| 14 | tooltip tt-msg="autoRefreshTip" |
| 15 | ng-click="toggleRefresh()"></div> |
| 16 | <div class="separator"></div> |
| 17 | |
| 18 | <div class="active" |
| 19 | icon icon-id="deviceTable" icon-size="42" |
| 20 | tooltip tt-msg="deviceTip" |
| 21 | ng-click="nav('roadmDevice')"></div> |
| 22 | |
| 23 | <div class="current-view" |
| 24 | icon icon-id="flowTable" icon-size="42" |
| 25 | tooltip tt-msg="flowTip"></div> |
| 26 | |
| 27 | <div class="active" |
| 28 | icon icon-id="portTable" icon-size="42" |
| 29 | tooltip tt-msg="portTip" |
| 30 | ng-click="nav('roadmPort')"></div> |
| 31 | </div> |
| 32 | </div> |
| 33 | |
| 34 | <div class="summary-list" onos-table-resize> |
| 35 | |
| 36 | <div class="table-header" onos-sortable-header> |
| 37 | <table> |
| 38 | <tr> |
| 39 | <td col-width="30px"></td> |
| 40 | <td colId="flowId" sortable col-width="180px">Flow ID </td> |
| 41 | <td colId="appId" sortable>App ID </td> |
| 42 | <td colId="priority" sortable>Priority </td> |
| 43 | <td colId="timeout" sortable>Timeout </td> |
| 44 | <td colId="permanent" sortable>Permanent </td> |
| 45 | <td colId="state" sortable>State </td> |
| 46 | <td colId="inPort" sortable>In Port </td> |
| 47 | <td colId="outPort" sortable>Out Port </td> |
MaoLu | 937cf42 | 2017-03-03 23:31:46 -0800 | [diff] [blame] | 48 | <td colId="multiplier" ng-show="showChannel" sortable>Channel </td> |
| 49 | <td colId="spacing" ng-show="showChannel">Spacing <span class="units">(GHz)</span> </td> |
Jimmy Yan | da878fc | 2016-09-02 16:32:01 -0700 | [diff] [blame] | 50 | <td colId="currentPower" col-width="180px">Current Power <span class="units">(0.01dBm)</span></td> |
MaoLu | 937cf42 | 2017-03-03 23:31:46 -0800 | [diff] [blame] | 51 | <td colId="attenuation" col-width="200px" ng-show="showAttenuation">Attenuation <span class="units">(0.01dB)</span></td> |
Jimmy Yan | da878fc | 2016-09-02 16:32:01 -0700 | [diff] [blame] | 52 | </tr> |
| 53 | </table> |
| 54 | </div> |
| 55 | |
| 56 | <div class="table-body"> |
| 57 | <table> |
| 58 | <tr ng-if="!tableData.length" class="no-data"> |
| 59 | <td colspan="13"> |
| 60 | {{annots.no_rows_msg}} |
| 61 | </td> |
| 62 | </tr> |
| 63 | |
| 64 | <tr ng-repeat="flow in tableData track by $index" |
| 65 | ng-class="{selected: flow.id === selId}"> |
| 66 | <td class="delete-icon" ng-click="deleteFlow($event, flow)">×</td> |
| 67 | <td>{{flow.flowId}}</td> |
| 68 | <td>{{flow.appId}}</td> |
| 69 | <td>{{flow.priority}}</td> |
| 70 | <td>{{flow.timeout}}</td> |
| 71 | <td>{{flow.permanent}}</td> |
| 72 | <td>{{flow.state}}</td> |
| 73 | <td>{{flow.inPort}}</td> |
| 74 | <td>{{flow.outPort}}</td> |
MaoLu | 937cf42 | 2017-03-03 23:31:46 -0800 | [diff] [blame] | 75 | <td ng-show="showChannel">{{flow.multiplier}}{{flow.channdlFrequency}}</td> |
| 76 | <td ng-show="showChannel">{{flow.spacing}}</td> |
Jimmy Yan | da878fc | 2016-09-02 16:32:01 -0700 | [diff] [blame] | 77 | <td>{{flow.currentPower}}</td> |
MaoLu | 937cf42 | 2017-03-03 23:31:46 -0800 | [diff] [blame] | 78 | <td class="editable" roadm-att="flow" roadm-set-att="setAttenuation(flow, targetVal, cb)" ng-show="showAttenuation"></td> |
Jimmy Yan | da878fc | 2016-09-02 16:32:01 -0700 | [diff] [blame] | 79 | </tr> |
| 80 | </table> |
| 81 | </div> |
| 82 | |
| 83 | </div> |
| 84 | |
| 85 | <div class="flow-form" ng-controller="FlowFormController as form" ng-show="showFlowForm"> |
| 86 | <div class="delete-icon" ng-click="hideFlowForm()">×</div> |
| 87 | <form> |
| 88 | <label>Priority</label><input type="number" ng-model="form.flow.priority" /> |
| 89 | <span class="form-error" ng-show="form.priorityError" >{{form.priorityMessage}}</span><br /> |
| 90 | |
| 91 | <label>Is Permanent</label><input type="checkbox" ng-model="form.flow.permanent" /><br /> |
| 92 | |
| 93 | <label>Timeout</label><input type="number" ng-model="form.flow.timeout" ng-disabled="form.flow.permanent"/> |
| 94 | <span class="form-error" ng-show="form.timeoutError" >{{form.timeoutMessage}}</span><br /> |
| 95 | |
| 96 | <label>In Port</label><input type="number" ng-model="form.flow.inPort" /> |
| 97 | <span class="form-error" ng-show="form.inPortError">{{form.inPortMessage}}</span><br /> |
| 98 | |
| 99 | <label>Out Port</label><input type="number" ng-model="form.flow.outPort" /> |
| 100 | <span class="form-error" ng-show="form.outPortError">{{form.outPortMessage}}</span> |
| 101 | <span class="form-error" ng-show="form.connectionError">{{form.connectionMessage}}</span><br /> |
| 102 | |
MaoLu | 937cf42 | 2017-03-03 23:31:46 -0800 | [diff] [blame] | 103 | <label>Include Channel</label><input type="checkbox" ng-model="showChannel" /><br /> |
| 104 | |
| 105 | <label>Channel Spacing</label><select ng-model="form.flow.spacing" ng-disabled="!showChannel" ng-options="x.freq for x in form.spacings"></select> |
Jimmy Yan | da878fc | 2016-09-02 16:32:01 -0700 | [diff] [blame] | 106 | <span class="form-error" ng-show="form.spacingError">{{form.spacingMessage}}</span><br /> |
| 107 | |
MaoLu | 937cf42 | 2017-03-03 23:31:46 -0800 | [diff] [blame] | 108 | <label>Spacing Multiplier</label><input type="number" ng-model="form.flow.multiplier" ng-disabled="!showChannel"/> |
Jimmy Yan | da878fc | 2016-09-02 16:32:01 -0700 | [diff] [blame] | 109 | <span class="form-error" ng-show="form.multiplierError">{{form.multiplierMessage}}</span> |
| 110 | <span class="form-error" ng-show="form.channelError">{{form.channelMessage}}</span><br /> |
| 111 | |
MaoLu | 937cf42 | 2017-03-03 23:31:46 -0800 | [diff] [blame] | 112 | <label>Include Attenuation</label><input type="checkbox" ng-model="showAttenuation" /><br /> |
Jimmy Yan | da878fc | 2016-09-02 16:32:01 -0700 | [diff] [blame] | 113 | |
MaoLu | 937cf42 | 2017-03-03 23:31:46 -0800 | [diff] [blame] | 114 | <label>Attenuation</label><input type="number" ng-model="form.flow.attenuation" ng-disabled="!showAttenuation"/> |
Jimmy Yan | da878fc | 2016-09-02 16:32:01 -0700 | [diff] [blame] | 115 | <span class="form-error" ng-show="form.attenuationError">{{form.attenuationMessage}}</span><br /> |
| 116 | </form> |
| 117 | <button type="submit" class="submit" ng-click="form.createFlow(form.flow)">Create Connection</button> |
| 118 | </div> |
| 119 | |
| 120 | </div> |