ONOS-6335: Flows View: columns should be re-ordered.
- WIP. Still need to understand "duration".
Change-Id: I9db0966584f16e19656f55642cae4e66faab427a
diff --git a/web/gui/src/main/webapp/app/view/flow/flow.html b/web/gui/src/main/webapp/app/view/flow/flow.html
index 180a53e..b18e424 100644
--- a/web/gui/src/main/webapp/app/view/flow/flow.html
+++ b/web/gui/src/main/webapp/app/view/flow/flow.html
@@ -60,12 +60,12 @@
<select ng-model="queryBy">
<option value="" disabled>Search By</option>
<option value="$">All Fields</option>
- <option value="id">Flow ID</option>
- <option value="appId">App ID</option>
- <option value="groupId">Group ID</option>
- <option value="tableId">Table ID</option>
+ <!--<option value="id">Flow ID</option>-->
<option value="priority">Priority</option>
- <option value="timeout">Timeout</option>
+ <option value="tableId">Table ID</option>
+ <option value="selector">Selector</option>
+ <option value="treatment">Treatment</option>
+ <option value="appId">App ID</option>
</select>
</div>
@@ -75,16 +75,16 @@
<div class="table-header" onos-sortable-header>
<table>
<tr>
- <td colId="id" col-width="180px" sortable>Flow ID </td>
- <td colId="appId" sortable>App ID </td>
- <td colId="groupId" sortable>Group ID </td>
- <td colId="tableId" sortable>Table 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 class="right" colId="packets" sortable>Packets </td>
- <td class="right" colId="bytes" sortable>Bytes </td>
+ <!--<td colId="id" col-width="180px" sortable>Flow ID </td>-->
+ <td colId="state" col-width="100px" sortable>State </td>
+ <!--<td class="right" colId="bytes" col-width="90px" sortable> Bytes </td>-->
+ <td class="right" colId="packets" col-width="90px" sortable> Packets </td>
+ <td class="right" colId="duration" col-width="90px" sortable> Duration </td>
+ <td colId="priority" col-width="80px" sortable> Priority </td>
+ <td colId="tableId" col-width="80px" sortable> Table ID </td>
+ <td colId="selector" sortable> Selector </td>
+ <td colId="treatment" sortable> Treatment </td>
+ <td colId="appId" sortable> App ID </td>
</tr>
</table>
</div>
@@ -101,26 +101,27 @@
ng-click="selectCallback($event, flow)"
ng-class="{selected: flow.id === selId}"
ng-repeat-complete row-id="{{flow.id}}">
- <td>{{flow.id}}</td>
- <td>{{flow.appId}}</td>
- <td>{{flow.groupId}}</td>
- <td>{{flow.tableId}}</td>
- <td>{{flow.priority}}</td>
- <td>{{flow.timeout}}</td>
- <td>{{flow.permanent}}</td>
+
+ <!--<td>{{flow.id}}</td>-->
<td>{{flow.state}}</td>
+ <!--<td class="right">{{flow.bytes}}</td>-->
<td class="right">{{flow.packets}}</td>
- <td class="right">{{flow.bytes}}</td>
+ <td class="right">{{flow.duration}}</td>
+ <td>{{flow.priority}}</td>
+ <td>{{flow.tableId}}</td>
+ <td>{{flow.selector_c}}</td>
+ <td>{{flow.treatment_c}}</td>
+ <td>{{flow.appId}}</td>
</tr>
<tr ng-click="selectCallback($event, flow)"
ng-class="{selected: flow.id === selId}"
row-id="{{flow.id}}" ng-hide="brief">
- <td class="selector" colspan="10" >{{flow.selector}} </td>
+ <td class="selector" colspan="8" >{{flow.selector}} </td>
</tr>
<tr ng-click="selectCallback($event, flow)"
ng-class="{selected: flow.id === selId}"
row-id="{{flow.id}}" ng-hide="brief" ng-repeat-end>
- <td class="treatment" colspan="10">{{flow.treatment}}</td>
+ <td class="treatment" colspan="8">{{flow.treatment}}</td>
</tr>
</table>
</div>
diff --git a/web/gui/src/main/webapp/app/view/flow/flow.js b/web/gui/src/main/webapp/app/view/flow/flow.js
index a48c63e..11c897d 100644
--- a/web/gui/src/main/webapp/app/view/flow/flow.js
+++ b/web/gui/src/main/webapp/app/view/flow/flow.js
@@ -53,12 +53,36 @@
detailsResp = 'flowDetailsResponse',
propOrder = [
- 'flowId', 'priority', 'groupId', 'appId', 'tableId',
- 'timeout', 'permanent'
+ 'flowId',
+ 'state',
+
+ 'bytes',
+ 'packets',
+ 'duration',
+
+ 'priority',
+ 'tableId',
+ 'appId',
+
+ 'groupId',
+ 'timeout',
+ 'permanent'
],
friendlyProps = [
- 'Flow ID', 'Flow Priority', 'Group ID', 'Application ID',
- 'Table ID', 'Timeout', 'Permanent'
+ 'Flow ID',
+ 'State',
+
+ 'Bytes',
+ 'Packets',
+ 'Duration',
+
+ 'Flow Priority',
+ 'Table ID',
+ 'App ID',
+
+ 'Group ID',
+ 'Timeout',
+ 'Permanent'
];
function closePanel() {
@@ -85,25 +109,26 @@
container = detailsPanel.append('div').classed('container', true);
top = container.append('div').classed('top', true);
- trmtDiv = container.append('div').classed('top', true);
selDiv = container.append('div').classed('top', true);
+ trmtDiv = container.append('div').classed('top', true);
closeBtn = top.append('div').classed('close-btn', true);
addCloseBtn(closeBtn);
iconDiv = top.append('div').classed('dev-icon', true);
top.append('h2');
topTable = top.append('div').classed('top-content', true)
.append('table');
+
top.append('hr');
- trmtDiv.append('h2').text('Treatment');
- topTrmtTable = trmtDiv.append('div').classed('top-content', true)
- .append('table');
- trmtDiv.append('hr');
+
selDiv.append('h2').text('Selector');
topSelTable = selDiv.append('div').classed('top-content', true)
.append('table');
+ selDiv.append('hr');
- //ToDo add more details
+ trmtDiv.append('h2').text('Treatment');
+ topTrmtTable = trmtDiv.append('div').classed('top-content', true)
+ .append('table');
}
function addProp(tbody, index, value) {