[ONOS-6375] Implement table view for querying mapping information
Change-Id: I786fe19dc31889b777f55587faecc48e63db6666
diff --git a/apps/mappingmanagement/web/src/main/resources/app/view/mapping/mapping.css b/apps/mappingmanagement/web/src/main/resources/app/view/mapping/mapping.css
index 7b5018b..16f65cd 100644
--- a/apps/mappingmanagement/web/src/main/resources/app/view/mapping/mapping.css
+++ b/apps/mappingmanagement/web/src/main/resources/app/view/mapping/mapping.css
@@ -18,25 +18,20 @@
ONOS GUI -- Mapping Management -- CSS file
*/
-#ov-mapping {
- padding: 20px;
- position: relative;
-}
-.light #ov-mapping {
- color: navy;
-}
-.dark #ov-mapping {
- color: #88f;
+#ov-mapping h2 {
+ display: inline-block;
}
-#ov-mapping .button-panel {
- margin: 10px;
- width: 200px;
+#ov-mapping div.ctrl-btns {
}
-.light #ov-mapping .button-panel {
- background-color: #ccf;
+#ov-mapping td {
+ text-align: center;
}
-.dark #ov-mapping .button-panel {
- background-color: #444;
+#ov-mapping td.right {
+ text-align: right;
+}
+#ov-mapping td.mappingValue {
+ text-align: left;
+ padding-left: 36px;
}
diff --git a/apps/mappingmanagement/web/src/main/resources/app/view/mapping/mapping.html b/apps/mappingmanagement/web/src/main/resources/app/view/mapping/mapping.html
index 1b82ca5..0971144 100644
--- a/apps/mappingmanagement/web/src/main/resources/app/view/mapping/mapping.html
+++ b/apps/mappingmanagement/web/src/main/resources/app/view/mapping/mapping.html
@@ -1,3 +1,77 @@
<!-- partial HTML -->
<div id="ov-mapping">
+ <div class="tabular-header">
+ <h2>
+ Mappings for Device {{devId || "(No device selected)"}}
+ ({{tableData.length}} total)
+ </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="toggleRefresh()"></div>
+
+ <div class="separator"></div>
+
+ <span ng-if="brief">
+ <div class="active"
+ icon icon-id="plus" icon-size="42"
+ tooltip tt-msg="detailTip"
+ ng-click="briefToggle()"> </div>
+ </span>
+
+ <span ng-if="!brief">
+ <div class="active"
+ icon icon-id="minus" icon-size="42"
+ tooltip tt-msg="briefTip"
+ ng-click="briefToggle()"> </div>
+ </span>
+
+ <div class="separator"></div>
+
+ <div class="active"
+ icon icon-id="deviceTable" icon-size="42"
+ tooltip tt-msg="deviceTip"
+ ng-click="nav('device')"></div>
+ </div>
+ </div>
+
+ <div class="summary-list" onos-table-resize>
+ <div class="table-header" onos-sortable-header>
+ <table>
+ <tr>
+ <td colId="id" col-width="180px" sortable>Mapping ID </td>
+ <td colId="type" sortable>Type </td>
+ <td colId="state" sortable>State </td>
+ <td colId="mappingKey" sortable>Mapping Key </td>
+ <td colId="mappingAction" sortable>Mapping Action </td>
+ </tr>
+ </table>
+ </div>
+
+ <div class="table-body">
+ <table onos-flash-changes id-prop="id">
+ <tr ng-if="!tableData.length" class="no-data">
+ <td colspan="5">
+ {{annots.no_rows_msg}}
+ </td>
+ </tr>
+
+ <tr ng-repeat-start="mapping in tableData | filter:queryFilter track by $index"
+ ng-click="selectCallback($event, mapping)"
+ ng-class="{selected: mapping.id === selId}"
+ ng-repeat-complete row-id="{{mapping.id}}">
+ <td>{{mapping.id}}</td>
+ <td>{{mapping.type}}</td>
+ <td>{{mapping.state}}</td>
+ <td>{{mapping.mappingKey}}</td>
+ <td>{{mapping.mappingAction}}</td>
+ </tr>
+ <tr row-id="{{mapping.id}}" ng-repeat-end ng-hide="brief">
+ <td class="mappingValue" colspan="5">{{mapping.mappingValue}}</td>
+ </tr>
+ </table>
+ </div>
+ </div>
</div>
diff --git a/apps/mappingmanagement/web/src/main/resources/app/view/mapping/mapping.js b/apps/mappingmanagement/web/src/main/resources/app/view/mapping/mapping.js
index 00262f9..f047ebc 100644
--- a/apps/mappingmanagement/web/src/main/resources/app/view/mapping/mapping.js
+++ b/apps/mappingmanagement/web/src/main/resources/app/view/mapping/mapping.js
@@ -21,17 +21,30 @@
'use strict';
// injected references
- var $log, $scope, $location;
+ var $log, $scope, $location, tbs;
angular.module('ovMapping', [])
.controller('OvMappingCtrl',
- ['$log', '$scope', '$location',
+ ['$log', '$scope', '$location', 'TableBuilderService',
- function (_$log_, _$scope_, _$location_) {
+ function (_$log_, _$scope_, _$location_, _tbs_) {
var params;
+
$log = _$log_;
$scope = _$scope_;
$location = _$location_;
+ tbs = _tbs_;
+
+ params = $location.search();
+ if (params.hasOwnProperty('devId')) {
+ $scope.devId = params['devId'];
+ }
+
+ tbs.buildTable({
+ scope: $scope,
+ tag: 'mapping',
+ query: params
+ });
$log.log('OvMappingCtrl has been created');
}]);