| <!-- |
| ~ Copyright 2017-present Open Networking Foundation |
| ~ |
| ~ Licensed under the Apache License, Version 2.0 (the "License"); |
| ~ you may not use this file except in compliance with the License. |
| ~ You may obtain a copy of the License at |
| ~ |
| ~ http://www.apache.org/licenses/LICENSE-2.0 |
| ~ |
| ~ Unless required by applicable law or agreed to in writing, software |
| ~ distributed under the License is distributed on an "AS IS" BASIS, |
| ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| ~ See the License for the specific language governing permissions and |
| ~ limitations under the License. |
| --> |
| |
| <div id="ov-pipeconf"> |
| <div class="tabular-header"> |
| <h2> |
| Pipeconf for Device {{devId || "(No device selected)"}} |
| </h2> |
| |
| <div class="ctrl-btns"> |
| <div class="refresh" ng-class="{active: autoRefresh}" |
| icon icon-size="42" icon-id="refresh" |
| tooltip tt-msg="autoRefreshTip" |
| ng-click="autoRefresh = !autoRefresh"></div> |
| |
| <div class="separator"></div> |
| |
| <div class="active" |
| icon icon-id="deviceTable" icon-size="42" |
| tooltip tt-msg="deviceTip" |
| ng-click="nav('device')"></div> |
| |
| <div class="active" |
| icon icon-id="flowTable" icon-size="42" |
| tooltip tt-msg="flowTip" |
| ng-click="nav('flow')"></div> |
| |
| <div class="active" |
| icon icon-id="portTable" icon-size="42" |
| tooltip tt-msg="portTip" |
| ng-click="nav('port')"></div> |
| |
| <div class="active" |
| icon icon-id="groupTable" icon-size="42" |
| tooltip tt-msg="groupTip" |
| ng-click="nav('group')"></div> |
| |
| <div class="active" |
| icon icon-id="meterTable" icon-size="42" |
| tooltip tt-msg="meterTip" |
| ng-click="nav('meter')"></div> |
| |
| <div class="current-view" |
| icon icon-id="pipeconfTable" icon-size="42" |
| tooltip tt-msg="pipeconfTip"></div> |
| </div> |
| </div> |
| <div id="pipeconf-info" auto-height> |
| <div id="pipeconf-basic"> |
| <h2>Basic information</h2> |
| <table class="pipeconf-table"> |
| <tr> |
| <th class="text-center" style="width: 160px">Name</th> |
| <th>Info</th> |
| </tr> |
| <tr ng-show="collapsePipeconf"> |
| <td colspan="2" class="text-center">....</td> |
| </tr> |
| <tr ng-show="pipeconf === null"> |
| <td colspan="2" class="no-data"> |
| No PiPipeconf for this device |
| </td> |
| </tr> |
| <tr ng-show-start="!collapsePipeconf && pipeconf !== null"> |
| <td class="text-center">ID</td> |
| <td>{{pipeconf.id}}</td> |
| </tr> |
| <tr> |
| <td class="text-center">Behaviors</td> |
| <td>{{pipeconf.behaviors.join(", ")}}</td> |
| </tr> |
| <tr ng-show-end> |
| <td class="text-center">Extensions</td> |
| <td>{{pipeconf.extensions.join(", ")}}</td> |
| </tr> |
| </table> |
| </div> |
| <!-- ng-show-start for checking pipeconf !== null --> |
| <h2 ng-show-start="pipeconf !== null">Pipeline Model</h2> |
| <div id="pipeconf-tables" ng-show-end> |
| <h3>Tables</h3> |
| <div ng-show="!collapseTables" class="collapse-btn" |
| icon icon-id="plus" icon-size="30" |
| ng-click="collapseTables = !collapseTables"></div> |
| <div ng-show="collapseTables" class="collapse-btn" |
| icon icon-id="minus" icon-size="30" |
| ng-click="collapseTables = !collapseTables"></div> |
| <table class="pipeconf-table"> |
| <tr> |
| <th class="text-center" style="width: 160px">Name</th> |
| <th class="text-center" style="width: 100px">Max size</th> |
| <th class="text-center" style="width: 100px">Has Counters</th> |
| <th class="text-center" style="width: 100px">Support Aging</th> |
| <th>Match fields</th> |
| <th>Actions</th> |
| </tr> |
| <tr ng-show="collapseTables"> |
| <td colspan="6" class="clickable text-center" |
| ng-click="collapseTables = !collapseTables">....</td> |
| </tr> |
| <tr ng-show="!collapseTables && pipelineModel.tables.length === 0"> |
| <td colspan="6" class="no-data">No Data</td> |
| </tr> |
| <tr ng-show="!collapseTables" |
| ng-repeat="table in pipelineModel.tables" |
| ng-click="tableSelectCb($event, table)" |
| ng-class="{selected: table.name === selectedId.name && selectedId.type === 'table'}" |
| class="clickable"> |
| <td class="text-center">{{table.name}}</td> |
| <td class="text-center">{{table.maxSize}}</td> |
| <td class="text-center">{{table.hasCounters}}</td> |
| <td class="text-center">{{table.supportAging}}</td> |
| <td ng-show="table.matchFields.length != 0"> |
| <p ng-repeat="mf in matMatchFields(table.matchFields)">{{mf}}</p> |
| </td> |
| <td ng-show="table.matchFields.length == 0">No match fields</td> |
| <td ng-show="table.actions.length != 0"> |
| <p ng-repeat="act in table.actions">{{act}}</p> |
| </td> |
| <td ng-show="table.actions.length == 0">No table actions</td> |
| </tr> |
| </table> |
| </div> |
| |
| <div id="pipeconf-actions"> |
| <h3>Actions</h3> |
| <div ng-show="!collapseActions" |
| class="collapse-btn" icon icon-id="plus" icon-size="30" |
| ng-click="collapseActions = !collapseActions"></div> |
| <div ng-show="collapseActions" |
| class="collapse-btn" icon icon-id="minus" icon-size="30" |
| ng-click="collapseActions = !collapseActions"></div> |
| <table class="pipeconf-table"> |
| <tr> |
| <th style="width: 160px">Name</th> |
| <th>Action parameters</th> |
| </tr> |
| <tr ng-show="collapseActions"> |
| <td colspan="2" class="clickable text-center" |
| ng-click="collapseActions = !collapseActions">....</td> |
| </tr> |
| <tr ng-show="!collapseActions && pipelineModel.actions.length === 0"> |
| <td colspan="2" class="no-data">No Data</td> |
| </tr> |
| <tr ng-show="!collapseActions" |
| ng-repeat="action in pipelineModel.actions" |
| ng-click="actionSelectCb($event, action)" |
| ng-class="{selected: action.name === selectedId.name && selectedId.type === 'action'}" |
| class="clickable"> |
| <td style="width: 160px">{{action.name}}</td> |
| <td ng-show="action.params.length != 0">{{ mapToNames(action.params).join(', ') }}</td> |
| <td ng-show="action.params.length == 0">No action params</td> |
| </tr> |
| </table> |
| </div> |
| |
| <!-- ng-show-end for checking pipeconf !== null --> |
| </div> |
| <pipeconf-view-detail-panel></pipeconf-view-detail-panel> |
| </div> |