Add ROADM application

Change-Id: I50fa93cf3a69122f6434b46e831b254771159294
diff --git a/apps/roadm/src/main/resources/app/view/roadmDevice/roadmDevice.css b/apps/roadm/src/main/resources/app/view/roadmDevice/roadmDevice.css
new file mode 100644
index 0000000..80f975f
--- /dev/null
+++ b/apps/roadm/src/main/resources/app/view/roadmDevice/roadmDevice.css
@@ -0,0 +1,39 @@
+/* css for ROADM device table view */
+
+.less-gap {
+    margin-top: -20px;
+}
+
+#ov-roadm-device h2 {
+    display: inline-block;
+}
+
+/* Panel Styling */
+#ov-roadm-device-item-details-panel.floatpanel {
+    position: absolute;
+    top: 115px;
+}
+
+.light #ov-roadm-device-item-details-panel.floatpanel {
+    background-color: rgb(229, 234, 237);
+}
+.dark #ov-roadm-device-item-details-panel.floatpanel {
+    background-color: #3A4042;
+}
+
+#ov-roadm-device-item-details-panel h3 {
+    margin: 0;
+    font-size: large;
+}
+
+#ov-roadm-device-item-details-panel h4 {
+    margin: 0;
+}
+
+#ov-roadm-device-item-details-panel td {
+    padding: 5px;
+}
+#ov-roadm-device-item-details-panel td.label {
+    font-style: italic;
+    opacity: 0.8;
+}
diff --git a/apps/roadm/src/main/resources/app/view/roadmDevice/roadmDevice.html b/apps/roadm/src/main/resources/app/view/roadmDevice/roadmDevice.html
new file mode 100644
index 0000000..a9a70e8
--- /dev/null
+++ b/apps/roadm/src/main/resources/app/view/roadmDevice/roadmDevice.html
@@ -0,0 +1,70 @@
+<!-- partial HTML -->
+<div id="ov-roadm-device" class="less-gap">
+
+    <div class="tabular-header">
+        <h2>Optical Devices ({{tableData.length}} total)</h2>
+        <div class="ctrl-btns">
+            <div class="refresh" ng-class="{active: autoRefresh}"
+                 icon icon-id="refresh" icon-size="42"
+                 tooltip tt-msg="autoRefreshTip"
+                 ng-click="toggleRefresh()"></div>
+            <div class="separator"></div>
+
+            <div ng-class="{'current-view': !!selId}"
+                 icon icon-id="deviceTable" icon-size="42"></div>
+
+            <div ng-class="{active: !!selId}"
+                 icon icon-id="flowTable" icon-size="42"
+                 tooltip tt-msg="flowTip"
+                 ng-click="nav('roadmFlow')"></div>
+
+
+            <div ng-class="{active: !!selId}"
+                 icon icon-id="portTable" icon-size="42"
+                 tooltip tt-msg="portTip"
+                 ng-click="nav('roadmPort')"></div>
+        </div>
+    </div>
+
+    <div class="summary-list" onos-table-resize>
+
+        <div class="table-header" onos-sortable-header>
+            <table>
+                <tr>
+                    <td colId="name"sortable>Friendly Name</td>
+                    <td colId="id" sortable>Device ID </td>
+                    <td colId="master" sortable col-width="120px">Master </td>
+                    <td colId="ports" sortable col-width="70px">Ports </td>
+                    <td colId="vendor" sortable>Vendor </td>
+                    <td colId="hwVersion" sortable>H/W Version </td>
+                    <td colId="swVersion" sortable>S/W Version </td>
+                    <td colId="protocol" sortable col-width="100px">Protocol </td>
+                </tr>
+            </table>
+        </div>
+
+        <div class="table-body">
+            <table>
+                <tr ng-if="!tableData.length" class="no-data">
+                    <td colspan="3">
+                        {{annots.no_rows_msg}}
+                    </td>
+                </tr>
+
+                <tr ng-repeat="item in tableData track by $index"
+                    ng-class="{selected: item.id === selId}"
+                    ng-click="selectCallback($event, item)">
+                    <td>{{item.name}}</td>
+                    <td>{{item.id}}</td>
+                    <td>{{item.master}}</td>
+                    <td>{{item.ports}}</td>
+                    <td>{{item.vendor}}</td>
+                    <td>{{item.hwVersion}}</td>
+                    <td>{{item.swVersion}}</td>
+                    <td>{{item.protocol}}</td>
+                </tr>
+            </table>
+        </div>
+
+    </div>
+</div>
diff --git a/apps/roadm/src/main/resources/app/view/roadmDevice/roadmDevice.js b/apps/roadm/src/main/resources/app/view/roadmDevice/roadmDevice.js
new file mode 100644
index 0000000..2537ed8
--- /dev/null
+++ b/apps/roadm/src/main/resources/app/view/roadmDevice/roadmDevice.js
@@ -0,0 +1,49 @@
+// js for roadm device table view
+(function () {
+    'use strict';
+
+    // injected refs
+    var $log, $scope, $loc, wss, ns;
+
+    // constants
+    var detailsReq = 'roadmDeviceDetailsRequest';
+
+    angular.module('ovRoadmDevice', [])
+        .controller('OvRoadmDeviceCtrl',
+        ['$log', '$scope', '$location', 'TableBuilderService', 'WebSocketService',
+            'NavService',
+
+            function (_$log_, _$scope_, _$loc_, tbs, _wss_, _ns_) {
+                $log = _$log_;
+                $scope = _$scope_;
+                $loc = _$loc_;
+                wss = _wss_;
+                ns = _ns_;
+
+                // query for if a certain device needs to be highlighted
+                var params = $loc.search();
+                if (params.hasOwnProperty('devId')) {
+                    $scope.selId = params['devId'];
+                }
+
+                // TableBuilderService creating a table for us
+                tbs.buildTable({
+                    scope: $scope,
+                    tag: 'roadmDevice'
+                });
+
+                $scope.nav = function (path) {
+                    if ($scope.selId) {
+                        ns.navTo(path, { devId: $scope.selId });
+                    }
+                };
+
+                // cleanup
+                $scope.$on('$destroy', function () {
+                    //wss.unbindHandlers(handlers);
+                    $log.log('OvRoadmDeviceCtrl has been destroyed');
+                });
+
+                $log.log('OvRoadmDeviceCtrl has been created');
+            }]);
+}());