[ONOS-7267] Fix pipeconf UI
Change-Id: I120fb7174d4033bd818fcc94e27a5e09d4f7c17d
diff --git a/core/common/src/main/java/org/onosproject/codec/impl/PiMatchFieldModelCodec.java b/core/common/src/main/java/org/onosproject/codec/impl/PiMatchFieldModelCodec.java
index 6d6dad4..018c4a0 100644
--- a/core/common/src/main/java/org/onosproject/codec/impl/PiMatchFieldModelCodec.java
+++ b/core/common/src/main/java/org/onosproject/codec/impl/PiMatchFieldModelCodec.java
@@ -27,10 +27,13 @@
public class PiMatchFieldModelCodec extends JsonCodec<PiMatchFieldModel> {
private static final String MATCH_TYPE = "matchType";
private static final String FIELD = "field";
+ private static final String BIT_WIDTH = "bitWidth";
+
@Override
public ObjectNode encode(PiMatchFieldModel matchFieldModel, CodecContext context) {
ObjectNode result = context.mapper().createObjectNode();
result.put(MATCH_TYPE, matchFieldModel.matchType().toString());
+ result.put(BIT_WIDTH, matchFieldModel.bitWidth());
result.put(FIELD, matchFieldModel.id().toString());
return result;
}
diff --git a/web/gui/src/main/webapp/app/view/pipeconf/pipeconf.html b/web/gui/src/main/webapp/app/view/pipeconf/pipeconf.html
index 4d4e8f6..b475d2b 100644
--- a/web/gui/src/main/webapp/app/view/pipeconf/pipeconf.html
+++ b/web/gui/src/main/webapp/app/view/pipeconf/pipeconf.html
@@ -90,72 +90,6 @@
</div>
<!-- ng-show-start for checking pipeconf !== null -->
<h2 ng-show-start="pipeconf !== null">Pipeline Model</h2>
- <div id="pipeconf-headers">
- <h3>Headers</h3>
- <div ng-show="!collapseHeaders"
- class="collapse-btn" icon icon-id="plus" icon-size="30"
- ng-click="collapseHeaders = !collapseHeaders"></div>
- <div ng-show="collapseHeaders"
- class="collapse-btn" icon icon-id="minus" icon-size="30"
- ng-click="collapseHeaders = !collapseHeaders"></div>
- <table class="pipeconf-table">
- <tr>
- <th style="width: 160px">Name</th>
- <th class="text-center" style="width: 100px">Is metadata</th>
- <th class="text-center" style="width: 100px">Index</th>
- <th>Header type</th>
- </tr>
- <tr ng-show="collapseHeaders">
- <td colspan="4" class="clickable text-center"
- ng-click="collapseHeaders = !collapseHeaders">....</td>
- </tr>
- <tr ng-show="!collapseHeaders && pipelineModel.headers.length === 0">
- <td colspan="4" class="no-data">No Data</td>
- </tr>
- <tr ng-show="!collapseHeaders"
- ng-repeat="header in pipelineModel.headers"
- ng-click="headerSelectCb($event, header)"
- ng-class="{selected: header.name === selectedId.name && selectedId.type === 'header'}"
- class="clickable">
- <td>{{header.name}}</td>
- <td class="text-center">{{header.isMetadata}}</td>
- <td class="text-center">{{header.index}}</td>
- <td>{{header.type.name}}</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>
-
<div id="pipeconf-tables" ng-show-end>
<h3>Tables</h3>
<div ng-show="!collapseTables" class="collapse-btn"
@@ -190,14 +124,49 @@
<td class="text-center">{{table.hasCounters}}</td>
<td class="text-center">{{table.supportAging}}</td>
<td ng-show="table.matchFields.length != 0">
- {{matMatchFields(table.matchFields).join(', ')}}
+ <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">{{table.actions.join(", ")}}</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>
diff --git a/web/gui/src/main/webapp/app/view/pipeconf/pipeconf.js b/web/gui/src/main/webapp/app/view/pipeconf/pipeconf.js
index f5156bb..502b438 100644
--- a/web/gui/src/main/webapp/app/view/pipeconf/pipeconf.js
+++ b/web/gui/src/main/webapp/app/view/pipeconf/pipeconf.js
@@ -190,8 +190,8 @@
var matchFields = table.matchFields.map(function(mp) {
return {
- name: mp.header.name + '.' + mp.field.name,
- bitWidth: mp.field.bitWidth,
+ name: mp.field,
+ bitWidth: mp.bitWidth,
matchType: mp.matchType,
}
});
@@ -377,7 +377,7 @@
$scope.matMatchFields = function(matchFields) {
return matchFields.map(function(mf) {
- return mf.header.name + '.' + mf.field.name;
+ return mf.field;
});
};