Yi Tseng | a87b40c | 2017-09-10 00:59:03 -0700 | [diff] [blame] | 1 | <!-- |
| 2 | ~ Copyright 2017-present Open Networking Foundation |
| 3 | ~ |
| 4 | ~ Licensed under the Apache License, Version 2.0 (the "License"); |
| 5 | ~ you may not use this file except in compliance with the License. |
| 6 | ~ You may obtain a copy of the License at |
| 7 | ~ |
| 8 | ~ http://www.apache.org/licenses/LICENSE-2.0 |
| 9 | ~ |
| 10 | ~ Unless required by applicable law or agreed to in writing, software |
| 11 | ~ distributed under the License is distributed on an "AS IS" BASIS, |
| 12 | ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| 13 | ~ See the License for the specific language governing permissions and |
| 14 | ~ limitations under the License. |
| 15 | --> |
| 16 | |
| 17 | <div id="ov-pipeconf"> |
| 18 | <div class="tabular-header"> |
| 19 | <h2> |
| 20 | Pipeconf for Device {{devId || "(No device selected)"}} |
| 21 | </h2> |
| 22 | |
| 23 | <div class="ctrl-btns"> |
| 24 | <div class="refresh" ng-class="{active: autoRefresh}" |
| 25 | icon icon-size="42" icon-id="refresh" |
| 26 | tooltip tt-msg="autoRefreshTip" |
| 27 | ng-click="autoRefresh = !autoRefresh"></div> |
| 28 | |
| 29 | <div class="separator"></div> |
| 30 | |
| 31 | <div class="active" |
| 32 | icon icon-id="deviceTable" icon-size="42" |
| 33 | tooltip tt-msg="deviceTip" |
| 34 | ng-click="nav('device')"></div> |
| 35 | |
| 36 | <div class="active" |
| 37 | icon icon-id="flowTable" icon-size="42" |
| 38 | tooltip tt-msg="flowTip" |
| 39 | ng-click="nav('flow')"></div> |
| 40 | |
| 41 | <div class="active" |
| 42 | icon icon-id="portTable" icon-size="42" |
| 43 | tooltip tt-msg="portTip" |
| 44 | ng-click="nav('port')"></div> |
| 45 | |
| 46 | <div class="active" |
| 47 | icon icon-id="groupTable" icon-size="42" |
| 48 | tooltip tt-msg="groupTip" |
| 49 | ng-click="nav('group')"></div> |
| 50 | |
| 51 | <div class="active" |
| 52 | icon icon-id="meterTable" icon-size="42" |
| 53 | tooltip tt-msg="meterTip" |
| 54 | ng-click="nav('meter')"></div> |
| 55 | |
| 56 | <div class="current-view" |
| 57 | icon icon-id="pipeconfTable" icon-size="42" |
| 58 | tooltip tt-msg="pipeconfTip"></div> |
| 59 | </div> |
| 60 | </div> |
| 61 | <div id="pipeconf-info" auto-height> |
| 62 | <div id="pipeconf-basic"> |
| 63 | <h2>Basic information</h2> |
| 64 | <table class="pipeconf-table"> |
| 65 | <tr> |
| 66 | <th class="text-center" style="width: 160px">Name</th> |
| 67 | <th>Info</th> |
| 68 | </tr> |
| 69 | <tr ng-show="collapsePipeconf"> |
| 70 | <td colspan="2" class="text-center">....</td> |
| 71 | </tr> |
| 72 | <tr ng-show="pipeconf === null"> |
| 73 | <td colspan="2" class="no-data"> |
| 74 | No PiPipeconf for this device |
| 75 | </td> |
| 76 | </tr> |
| 77 | <tr ng-show-start="!collapsePipeconf && pipeconf !== null"> |
| 78 | <td class="text-center">ID</td> |
| 79 | <td>{{pipeconf.id}}</td> |
| 80 | </tr> |
| 81 | <tr> |
| 82 | <td class="text-center">Behaviors</td> |
| 83 | <td>{{pipeconf.behaviors.join(", ")}}</td> |
| 84 | </tr> |
| 85 | <tr ng-show-end> |
| 86 | <td class="text-center">Extensions</td> |
| 87 | <td>{{pipeconf.extensions.join(", ")}}</td> |
| 88 | </tr> |
| 89 | </table> |
| 90 | </div> |
| 91 | <!-- ng-show-start for checking pipeconf !== null --> |
| 92 | <h2 ng-show-start="pipeconf !== null">Pipeline Model</h2> |
Yi Tseng | a87b40c | 2017-09-10 00:59:03 -0700 | [diff] [blame] | 93 | <div id="pipeconf-tables" ng-show-end> |
| 94 | <h3>Tables</h3> |
| 95 | <div ng-show="!collapseTables" class="collapse-btn" |
| 96 | icon icon-id="plus" icon-size="30" |
| 97 | ng-click="collapseTables = !collapseTables"></div> |
| 98 | <div ng-show="collapseTables" class="collapse-btn" |
| 99 | icon icon-id="minus" icon-size="30" |
| 100 | ng-click="collapseTables = !collapseTables"></div> |
| 101 | <table class="pipeconf-table"> |
| 102 | <tr> |
| 103 | <th class="text-center" style="width: 160px">Name</th> |
| 104 | <th class="text-center" style="width: 100px">Max size</th> |
| 105 | <th class="text-center" style="width: 100px">Has Counters</th> |
| 106 | <th class="text-center" style="width: 100px">Support Aging</th> |
| 107 | <th>Match fields</th> |
| 108 | <th>Actions</th> |
| 109 | </tr> |
| 110 | <tr ng-show="collapseTables"> |
| 111 | <td colspan="6" class="clickable text-center" |
| 112 | ng-click="collapseTables = !collapseTables">....</td> |
| 113 | </tr> |
| 114 | <tr ng-show="!collapseTables && pipelineModel.tables.length === 0"> |
| 115 | <td colspan="6" class="no-data">No Data</td> |
| 116 | </tr> |
| 117 | <tr ng-show="!collapseTables" |
| 118 | ng-repeat="table in pipelineModel.tables" |
| 119 | ng-click="tableSelectCb($event, table)" |
| 120 | ng-class="{selected: table.name === selectedId.name && selectedId.type === 'table'}" |
| 121 | class="clickable"> |
| 122 | <td class="text-center">{{table.name}}</td> |
| 123 | <td class="text-center">{{table.maxSize}}</td> |
| 124 | <td class="text-center">{{table.hasCounters}}</td> |
| 125 | <td class="text-center">{{table.supportAging}}</td> |
| 126 | <td ng-show="table.matchFields.length != 0"> |
Yi Tseng | e2a1500 | 2017-11-29 16:42:52 -0800 | [diff] [blame] | 127 | <p ng-repeat="mf in matMatchFields(table.matchFields)">{{mf}}</p> |
Yi Tseng | a87b40c | 2017-09-10 00:59:03 -0700 | [diff] [blame] | 128 | </td> |
| 129 | <td ng-show="table.matchFields.length == 0">No match fields</td> |
Yi Tseng | e2a1500 | 2017-11-29 16:42:52 -0800 | [diff] [blame] | 130 | <td ng-show="table.actions.length != 0"> |
| 131 | <p ng-repeat="act in table.actions">{{act}}</p> |
| 132 | </td> |
Yi Tseng | a87b40c | 2017-09-10 00:59:03 -0700 | [diff] [blame] | 133 | <td ng-show="table.actions.length == 0">No table actions</td> |
| 134 | </tr> |
| 135 | </table> |
| 136 | </div> |
Yi Tseng | e2a1500 | 2017-11-29 16:42:52 -0800 | [diff] [blame] | 137 | |
| 138 | <div id="pipeconf-actions"> |
| 139 | <h3>Actions</h3> |
| 140 | <div ng-show="!collapseActions" |
| 141 | class="collapse-btn" icon icon-id="plus" icon-size="30" |
| 142 | ng-click="collapseActions = !collapseActions"></div> |
| 143 | <div ng-show="collapseActions" |
| 144 | class="collapse-btn" icon icon-id="minus" icon-size="30" |
| 145 | ng-click="collapseActions = !collapseActions"></div> |
| 146 | <table class="pipeconf-table"> |
| 147 | <tr> |
| 148 | <th style="width: 160px">Name</th> |
| 149 | <th>Action parameters</th> |
| 150 | </tr> |
| 151 | <tr ng-show="collapseActions"> |
| 152 | <td colspan="2" class="clickable text-center" |
| 153 | ng-click="collapseActions = !collapseActions">....</td> |
| 154 | </tr> |
| 155 | <tr ng-show="!collapseActions && pipelineModel.actions.length === 0"> |
| 156 | <td colspan="2" class="no-data">No Data</td> |
| 157 | </tr> |
| 158 | <tr ng-show="!collapseActions" |
| 159 | ng-repeat="action in pipelineModel.actions" |
| 160 | ng-click="actionSelectCb($event, action)" |
| 161 | ng-class="{selected: action.name === selectedId.name && selectedId.type === 'action'}" |
| 162 | class="clickable"> |
| 163 | <td style="width: 160px">{{action.name}}</td> |
| 164 | <td ng-show="action.params.length != 0">{{ mapToNames(action.params).join(', ') }}</td> |
| 165 | <td ng-show="action.params.length == 0">No action params</td> |
| 166 | </tr> |
| 167 | </table> |
| 168 | </div> |
| 169 | |
Yi Tseng | a87b40c | 2017-09-10 00:59:03 -0700 | [diff] [blame] | 170 | <!-- ng-show-end for checking pipeconf !== null --> |
| 171 | </div> |
| 172 | <pipeconf-view-detail-panel></pipeconf-view-detail-panel> |
| 173 | </div> |