GUI -- Preliminary work for converting tabular views to use the shared web-socke…

…t rather than via REST. WIP.

Change-Id: I68de98e8df0a2bbcebe15ad9015ce6b4df43d81c

@@ -29,6 +29,7 @@ import static com.google.common.base.Preconditions.checkNotNull;
  * interface client.
  * interface client.
  * <p>
  * <p>
  * The message is a JSON object with the following structure:
  * The message is a JSON object with the following structure:
+ * </p>
  * <pre>
  * <pre>
  * {
  * {
  *     "type": "<em>event-type</em>",
  *     "type": "<em>event-type</em>",
@@ -45,7 +46,9 @@ public abstract class UiMessageHandler {
     private UiConnection connection;
     private UiConnection connection;
     private ServiceDirectory directory;
     private ServiceDirectory directory;
 
 
-    /** Mapper for creating ObjectNodes and ArrayNodes etc. */
+    /**
+     * Mapper for creating ObjectNodes and ArrayNodes etc.
+     */
     protected final ObjectMapper mapper = new ObjectMapper();
     protected final ObjectMapper mapper = new ObjectMapper();
 
 
     /**
     /**
@@ -129,8 +132,8 @@ public abstract class UiMessageHandler {
      * Wraps a message payload into an event structure for the given event
      * Wraps a message payload into an event structure for the given event
      * type and sequence ID. Generally the
      * type and sequence ID. Generally the
      *
      *
-     * @param type event type
-     * @param sid sequence ID
+     * @param type    event type
+     * @param sid     sequence ID
      * @param payload event payload
      * @param payload event payload
      * @return the object node representation
      * @return the object node representation
      */
      */
@@ -144,4 +147,48 @@ public abstract class UiMessageHandler {
         return event;
         return event;
     }
     }
 
 
+    /**
+     * Retrieves the payload from the specified event.
+     *
+     * @param event message event
+     * @return extracted payload object
+     */
+    protected ObjectNode payload(ObjectNode event) {
+        return (ObjectNode) event.path("payload");
+    }
+
+    /**
+     * Returns the specified node property as a number.
+     *
+     * @param node message event
+     * @param name property name
+     * @return property as number
+     */
+    protected long number(ObjectNode node, String name) {
+        return node.path(name).asLong();
+    }
+
+    /**
+     * Returns the specified node property as a string.
+     *
+     * @param node message event
+     * @param name property name
+     * @return property as a string
+     */
+    protected String string(ObjectNode node, String name) {
+        return node.path(name).asText();
+    }
+
+    /**
+     * Returns the specified node property as a string with a default fallback.
+     *
+     * @param node         message event
+     * @param name         property name
+     * @param defaultValue fallback value if property is absent
+     * @return property as a string
+     */
+    protected String string(ObjectNode node, String name, String defaultValue) {
+        return node.path(name).asText(defaultValue);
+    }
+
 }
 }

+/*
+ * Copyright 2015 Open Networking Laboratory
+ *
+ * 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.
+ */
+package org.onosproject.ui.impl;
+
+import com.fasterxml.jackson.databind.node.ArrayNode;
+import org.onosproject.ui.UiMessageHandler;
+
+import java.util.Set;
+
+/**
+ * Base message handler for tabular views.
+ */
+public abstract class AbstractTabularViewMessageHandler extends UiMessageHandler {
+
+    /**
+     * Creates a new tabular view message handler.
+     *
+     * @param messageTypes set of message types
+     */
+    protected AbstractTabularViewMessageHandler(Set<String> messageTypes) {
+        super(messageTypes);
+    }
+
+    /**
+     * Produces JSON from the specified array of rows.
+     *
+     * @param rows table rows
+     * @return JSON array
+     */
+    protected ArrayNode generateArrayNode(TableRow[] rows) {
+        ArrayNode array = mapper.createArrayNode();
+        for (TableRow r : rows) {
+            array.add(r.toJsonNode());
+        }
+        return array;
+    }
+
+    // TODO: possibly convert this into just a toolbox class
+    // TODO: extract and generalize other table constructs
+}

-/*
- * Copyright 2015 Open Networking Laboratory
- *
- * 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.
- */
-package org.onosproject.ui.impl;
-
-import com.fasterxml.jackson.databind.ObjectMapper;
-import com.fasterxml.jackson.databind.node.ArrayNode;
-import com.fasterxml.jackson.databind.node.ObjectNode;
-import org.onlab.rest.BaseResource;
-import org.onosproject.net.Device;
-import org.onosproject.net.device.DeviceService;
-
-import javax.ws.rs.DefaultValue;
-import javax.ws.rs.GET;
-import javax.ws.rs.Path;
-import javax.ws.rs.Produces;
-import javax.ws.rs.QueryParam;
-import javax.ws.rs.core.Response;
-import java.util.ArrayList;
-import java.util.Arrays;
-import java.util.List;
-
-/**
- * UI REST resource for interacting with the inventory of infrastructure devices.
- */
-@Path("device")
-public class DeviceGuiResource extends BaseResource {
-
-    private static final String DEVICES = "devices";
-
-    private static final ObjectMapper MAPPER = new ObjectMapper();
-
-
-    // return the list of devices in appropriate sorted order
-    @GET
-    @Produces("application/json")
-    public Response getDevices(
-            @DefaultValue("id") @QueryParam("sortCol") String colId,
-            @DefaultValue("asc") @QueryParam("sortDir") String dir
-    ) {
-        DeviceService service = get(DeviceService.class);
-        TableRow[] rows = generateTableRows(service);
-        RowComparator rc = new RowComparator(colId, RowComparator.direction(dir));
-        Arrays.sort(rows, rc);
-        ArrayNode devices = generateArrayNode(rows);
-        ObjectNode rootNode = MAPPER.createObjectNode();
-        rootNode.set(DEVICES, devices);
-
-        return Response.ok(rootNode.toString()).build();
-    }
-
-    private ArrayNode generateArrayNode(TableRow[] rows) {
-        ArrayNode devices = MAPPER.createArrayNode();
-        for (TableRow r : rows) {
-            devices.add(r.toJsonNode());
-        }
-        return devices;
-    }
-
-    private TableRow[] generateTableRows(DeviceService service) {
-        List<TableRow> list = new ArrayList<>();
-        for (Device dev : service.getDevices()) {
-            list.add(new DeviceTableRow(service, dev));
-        }
-        return list.toArray(new TableRow[list.size()]);
-    }
-}

@@ -13,61 +13,106 @@
  * See the License for the specific language governing permissions and
  * See the License for the specific language governing permissions and
  * limitations under the License.
  * limitations under the License.
  */
  */
-
 package org.onosproject.ui.impl;
 package org.onosproject.ui.impl;
 
 
+import com.fasterxml.jackson.databind.node.ArrayNode;
+import com.fasterxml.jackson.databind.node.ObjectNode;
+import com.google.common.collect.ImmutableSet;
 import org.onosproject.net.Device;
 import org.onosproject.net.Device;
 import org.onosproject.net.device.DeviceService;
 import org.onosproject.net.device.DeviceService;
 
 
+import java.util.ArrayList;
+import java.util.Arrays;
+import java.util.List;
+
 /**
 /**
- * TableRow implementation for {@link Device devices}.
+ * Message handler for device view related messages.
  */
  */
-public class DeviceTableRow extends AbstractTableRow {
-
-    private static final String ID = "id";
-    private static final String AVAILABLE = "available";
-    private static final String AVAILABLE_IID = "_iconid_available";
-    private static final String TYPE_IID = "_iconid_type";
-    private static final String DEV_ICON_PREFIX = "devIcon_";
-    private static final String ROLE = "role";
-    private static final String MFR = "mfr";
-    private static final String HW = "hw";
-    private static final String SW = "sw";
-    private static final String SERIAL = "serial";
-    private static final String PROTOCOL = "protocol";
-    private static final String CHASSISID = "chassisid";
-
-    private static final String[] COL_IDS = {
-            ID, AVAILABLE, AVAILABLE_IID, TYPE_IID, ROLE,
-            MFR, HW, SW, SERIAL, PROTOCOL, CHASSISID
-    };
-
-    private static final String ICON_ID_ONLINE = "deviceOnline";
-    private static final String ICON_ID_OFFLINE = "deviceOffline";
-
-    public DeviceTableRow(DeviceService service, Device d) {
-        boolean available = service.isAvailable(d.id());
-        String iconId = available ? ICON_ID_ONLINE : ICON_ID_OFFLINE;
-
-        add(ID, d.id().toString());
-        add(AVAILABLE, Boolean.toString(available));
-        add(AVAILABLE_IID, iconId);
-        add(TYPE_IID, getTypeIconId(d));
-        add(ROLE, service.getRole(d.id()).toString());
-        add(MFR, d.manufacturer());
-        add(HW, d.hwVersion());
-        add(SW, d.swVersion());
-        add(SERIAL, d.serialNumber());
-        add(PROTOCOL, d.annotations().value(PROTOCOL));
-        add(CHASSISID, d.chassisId().toString());
-    }
+public class DeviceViewMessageHandler extends AbstractTabularViewMessageHandler {
 
 
-    private String getTypeIconId(Device d) {
-        return DEV_ICON_PREFIX + d.type().toString();
+    /**
+     * Creates a new message handler for the device messages.
+     */
+    protected DeviceViewMessageHandler() {
+        super(ImmutableSet.of("deviceDataRequest"));
     }
     }
 
 
     @Override
     @Override
-    protected String[] columnIds() {
-        return COL_IDS;
+    public void process(ObjectNode message) {
+        ObjectNode payload = payload(message);
+        String sortCol = string(payload, "sortCol", "id");
+        String sortDir = string(payload, "sortDir", "asc");
+
+        DeviceService service = get(DeviceService.class);
+        TableRow[] rows = generateTableRows(service);
+        RowComparator rc = new RowComparator(sortCol, RowComparator.direction(sortDir));
+        Arrays.sort(rows, rc);
+        ArrayNode devices = generateArrayNode(rows);
+        ObjectNode rootNode = mapper.createObjectNode();
+        rootNode.set("devices", devices);
+
+        connection().sendMessage("deviceDataResponse", 0, rootNode);
     }
     }
+
+    private TableRow[] generateTableRows(DeviceService service) {
+        List<TableRow> list = new ArrayList<>();
+        for (Device dev : service.getDevices()) {
+            list.add(new DeviceTableRow(service, dev));
+        }
+        return list.toArray(new TableRow[list.size()]);
+    }
+
+    /**
+     * TableRow implementation for {@link Device devices}.
+     */
+    private static class DeviceTableRow extends AbstractTableRow {
+
+        private static final String ID = "id";
+        private static final String AVAILABLE = "available";
+        private static final String AVAILABLE_IID = "_iconid_available";
+        private static final String TYPE_IID = "_iconid_type";
+        private static final String DEV_ICON_PREFIX = "devIcon_";
+        private static final String ROLE = "role";
+        private static final String MFR = "mfr";
+        private static final String HW = "hw";
+        private static final String SW = "sw";
+        private static final String SERIAL = "serial";
+        private static final String PROTOCOL = "protocol";
+        private static final String CHASSISID = "chassisid";
+
+        private static final String[] COL_IDS = {
+                ID, AVAILABLE, AVAILABLE_IID, TYPE_IID, ROLE,
+                MFR, HW, SW, SERIAL, PROTOCOL, CHASSISID
+        };
+
+        private static final String ICON_ID_ONLINE = "deviceOnline";
+        private static final String ICON_ID_OFFLINE = "deviceOffline";
+
+        public DeviceTableRow(DeviceService service, Device d) {
+            boolean available = service.isAvailable(d.id());
+            String iconId = available ? ICON_ID_ONLINE : ICON_ID_OFFLINE;
+
+            add(ID, d.id().toString());
+            add(AVAILABLE, Boolean.toString(available));
+            add(AVAILABLE_IID, iconId);
+            add(TYPE_IID, getTypeIconId(d));
+            add(ROLE, service.getRole(d.id()).toString());
+            add(MFR, d.manufacturer());
+            add(HW, d.hwVersion());
+            add(SW, d.swVersion());
+            add(SERIAL, d.serialNumber());
+            add(PROTOCOL, d.annotations().value(PROTOCOL));
+            add(CHASSISID, d.chassisId().toString());
+        }
+
+        private String getTypeIconId(Device d) {
+            return DEV_ICON_PREFIX + d.type().toString();
+        }
+
+        @Override
+        protected String[] columnIds() {
+            return COL_IDS;
+        }
+    }
+
 }
 }

+/*
+ * Copyright 2015 Open Networking Laboratory
+ *
+ * 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.
+ */
+package org.onosproject.ui.impl;
+
+import com.fasterxml.jackson.databind.node.ArrayNode;
+import com.fasterxml.jackson.databind.node.ObjectNode;
+import com.google.common.collect.ImmutableSet;
+import org.onosproject.net.Device;
+import org.onosproject.net.device.DeviceService;
+
+import java.util.ArrayList;
+import java.util.Arrays;
+import java.util.List;
+
+/**
+ * Message handler for host view related messages.
+ */
+public class HostViewMessageHandler extends AbstractTabularViewMessageHandler {
+
+    /**
+     * Creates a new message handler for the host messages.
+     */
+    protected HostViewMessageHandler() {
+        super(ImmutableSet.of("hostDataRequest"));
+    }
+
+    @Override
+    public void process(ObjectNode message) {
+        ObjectNode payload = payload(message);
+        String sortCol = string(payload, "sortCol", "id");
+        String sortDir = string(payload, "sortDir", "asc");
+
+        DeviceService service = get(DeviceService.class);
+        TableRow[] rows = generateTableRows(service);
+        RowComparator rc = new RowComparator(sortCol, RowComparator.direction(sortDir));
+        Arrays.sort(rows, rc);
+        ArrayNode devices = generateArrayNode(rows);
+        ObjectNode rootNode = mapper.createObjectNode();
+        rootNode.set("devices", devices);
+
+        connection().sendMessage("hostDataResponse", 0, rootNode);
+    }
+
+    private TableRow[] generateTableRows(DeviceService service) {
+        List<TableRow> list = new ArrayList<>();
+        for (Device dev : service.getDevices()) {
+            list.add(new HostTableRow(service, dev));
+        }
+        return list.toArray(new TableRow[list.size()]);
+    }
+
+    /**
+     * TableRow implementation for {@link Device devices}.
+     */
+    private static class HostTableRow extends AbstractTableRow {
+
+        private static final String ID = "id";
+        private static final String AVAILABLE = "available";
+        private static final String AVAILABLE_IID = "_iconid_available";
+        private static final String TYPE_IID = "_iconid_type";
+        private static final String DEV_ICON_PREFIX = "devIcon_";
+        private static final String ROLE = "role";
+        private static final String MFR = "mfr";
+        private static final String HW = "hw";
+        private static final String SW = "sw";
+        private static final String SERIAL = "serial";
+        private static final String PROTOCOL = "protocol";
+        private static final String CHASSISID = "chassisid";
+
+        private static final String[] COL_IDS = {
+                ID, AVAILABLE, AVAILABLE_IID, TYPE_IID, ROLE,
+                MFR, HW, SW, SERIAL, PROTOCOL, CHASSISID
+        };
+
+        private static final String ICON_ID_ONLINE = "deviceOnline";
+        private static final String ICON_ID_OFFLINE = "deviceOffline";
+
+        public HostTableRow(DeviceService service, Device d) {
+            boolean available = service.isAvailable(d.id());
+            String iconId = available ? ICON_ID_ONLINE : ICON_ID_OFFLINE;
+
+            add(ID, d.id().toString());
+            add(AVAILABLE, Boolean.toString(available));
+            add(AVAILABLE_IID, iconId);
+            add(TYPE_IID, getTypeIconId(d));
+            add(ROLE, service.getRole(d.id()).toString());
+            add(MFR, d.manufacturer());
+            add(HW, d.hwVersion());
+            add(SW, d.swVersion());
+            add(SERIAL, d.serialNumber());
+            add(PROTOCOL, d.annotations().value(PROTOCOL));
+            add(CHASSISID, d.chassisId().toString());
+        }
+
+        private String getTypeIconId(Device d) {
+            return DEV_ICON_PREFIX + d.type().toString();
+        }
+
+        @Override
+        protected String[] columnIds() {
+            return COL_IDS;
+        }
+    }
+
+}

@@ -566,6 +566,7 @@ public class TopologyViewMessageHandler extends TopologyViewMessageHandlerBase {
 
 
     // Adds all internal listeners.
     // Adds all internal listeners.
     private void addListeners() {
     private void addListeners() {
+        listenersRemoved = false;
         clusterService.addListener(clusterListener);
         clusterService.addListener(clusterListener);
         mastershipService.addListener(mastershipListener);
         mastershipService.addListener(mastershipListener);
         deviceService.addListener(deviceListener);
         deviceService.addListener(deviceListener);

@@ -58,10 +58,13 @@ public class UiExtensionManager implements UiExtensionService {
     private static UiExtension createCoreExtension() {
     private static UiExtension createCoreExtension() {
         List<UiView> coreViews = of(new UiView("topo", "Topology View"),
         List<UiView> coreViews = of(new UiView("topo", "Topology View"),
                                     new UiView("device", "Devices"),
                                     new UiView("device", "Devices"),
+                                    new UiView("host", "Hosts"),
                                     new UiView("sample", "Sample"));
                                     new UiView("sample", "Sample"));
         UiMessageHandlerFactory messageHandlerFactory =
         UiMessageHandlerFactory messageHandlerFactory =
                 () -> ImmutableList.of(
                 () -> ImmutableList.of(
-                        new TopologyViewMessageHandler()
+                        new TopologyViewMessageHandler(),
+                        new DeviceViewMessageHandler(),
+                        new HostViewMessageHandler()
                 );
                 );
         return new UiExtension(coreViews, messageHandlerFactory, "core",
         return new UiExtension(coreViews, messageHandlerFactory, "core",
                                UiExtensionManager.class.getClassLoader());
                                UiExtensionManager.class.getClassLoader());

 <link rel="stylesheet" href="app/view/sample/sample.css">
 <link rel="stylesheet" href="app/view/sample/sample.css">
 <link rel="stylesheet" href="app/view/topo/topo.css">
 <link rel="stylesheet" href="app/view/topo/topo.css">
 <link rel="stylesheet" href="app/view/device/device.css">
 <link rel="stylesheet" href="app/view/device/device.css">
+<link rel="stylesheet" href="app/view/host/host.css">

@@ -12,4 +12,5 @@
 <script src="app/view/topo/topoTraffic.js"></script>
 <script src="app/view/topo/topoTraffic.js"></script>
 <script src="app/view/topo/topoToolbar.js"></script>
 <script src="app/view/topo/topoToolbar.js"></script>
 <script src="app/view/device/device.js"></script>
 <script src="app/view/device/device.js"></script>
+<script src="app/view/host/host.js"></script>
 <script src="app/view/sample/sample.js"></script>
 <script src="app/view/sample/sample.js"></script>

@@ -139,7 +139,6 @@
             <param-name>com.sun.jersey.config.property.classnames</param-name>
             <param-name>com.sun.jersey.config.property.classnames</param-name>
             <param-value>
             <param-value>
                 org.onosproject.ui.impl.TopologyResource,
                 org.onosproject.ui.impl.TopologyResource,
-                org.onosproject.ui.impl.DeviceGuiResource
             </param-value>
             </param-value>
         </init-param>
         </init-param>
         <load-on-startup>1</load-on-startup>
         <load-on-startup>1</load-on-startup>

@@ -23,30 +23,39 @@
 
 
     angular.module('ovDevice', [])
     angular.module('ovDevice', [])
     .controller('OvDeviceCtrl',
     .controller('OvDeviceCtrl',
-        ['$log', '$scope', '$location', 'RestService', 'VeilService',
+        ['$log', '$scope', '$location', 'WebSocketService',
 
 
-        function ($log, $scope, $location, rs, vs) {
+        function ($log, $scope, $location, wss) {
             var self = this;
             var self = this;
             self.deviceData = [];
             self.deviceData = [];
 
 
+            $scope.responseCallback = function(data) {
+                self.deviceData = data.devices;
+                $scope.$apply();
+            };
+
             $scope.sortCallback = function (urlSuffix) {
             $scope.sortCallback = function (urlSuffix) {
+                // FIXME: fix hardcoded sort params
                 if (!urlSuffix) {
                 if (!urlSuffix) {
                     urlSuffix = '';
                     urlSuffix = '';
                 }
                 }
-                var url = 'device' + urlSuffix;
-                rs.get(url, function (data) {
-                    self.deviceData = data.devices;
-                }, function (errMsg) {
-                    vs.lostServer('OvDeviceCtrl', errMsg);
-                });
+                var payload = { sortCol: 'id', sortDir: 'asc' };
+                wss.sendEvent('deviceDataRequest', payload);
             };
             };
-            $scope.sortCallback();
+
+            var handlers = {
+                deviceDataResponse: $scope.responseCallback
+            };
+            wss.bindHandlers(handlers);
 
 
             // Cleanup on destroyed scope
             // Cleanup on destroyed scope
             $scope.$on('$destroy', function () {
             $scope.$on('$destroy', function () {
-
+                wss.unbindHandlers(handlers);
             });
             });
 
 
             $log.log('OvDeviceCtrl has been created');
             $log.log('OvDeviceCtrl has been created');
+
+            $scope.sortCallback();
+
         }]);
         }]);
 }());
 }());

+/*
+ * Copyright 2015 Open Networking Laboratory
+ *
+ * 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.
+ */
+
+/*
+ ONOS GUI -- Device View -- CSS file
+ */
+
+#ov-device th {
+    cursor: pointer;
+}
\ No newline at end of file

+<!-- Host partial HTML -->
+<div id="ov-host">
+    <h2>Hosts ({{ctrl.hostData.length}} total)</h2>
+    <table class="summary-list"
+           onos-fixed-header
+           onos-sortable-header
+           sort-callback="sortCallback(urlSuffix)">
+        <thead>
+            <tr>
+                <th colId="available"></th>
+                <th colId="type"></th>
+                <th colId="id" sortable>Host ID </th>
+                <th colId="mfr" sortable>Vendor </th>
+                <th colId="hw" sortable>H/W Version </th>
+                <th colId="sw" sortable>S/W Version </th>
+                <th colId="chassisid" sortable>Chassis ID </th>
+                <th colId="serial" sortable>Serial # </th>
+                <th colId="protocol" sortable>Protocol </th>
+            </tr>
+        </thead>
+
+        <tbody>
+        <tr ng-repeat="host in ctrl.hostData"
+            ng-repeat-done>
+            <td class="table-icon">
+                <div icon icon-id="{{host._iconid_available}}"></div>
+            </td>
+            <td class="table-icon">
+                <div icon icon-id="{{host._iconid_type}}"></div>
+            </td>
+            <td>{{host.id}}</td>
+            <td>{{host.mfr}}</td>
+            <td>{{host.hw}}</td>
+            <td>{{host.sw}}</td>
+            <td>{{host.chassisid}}</td>
+            <td>{{host.serial}}</td>
+            <td>{{host.protocol}}</td>
+        </tr>
+        </tbody>
+    </table>
+
+</div>

+/*
+ * Copyright 2015 Open Networking Laboratory
+ *
+ * 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.
+ */
+
+/*
+ ONOS GUI -- Host View Module
+ */
+
+(function () {
+    'use strict';
+
+    angular.module('ovHost', [])
+    .controller('OvHostCtrl',
+        ['$log', '$scope', '$location', 'WebSocketService',
+
+        function ($log, $scope, $location, wss) {
+            var self = this;
+            self.hostData = [];
+
+            $scope.responseCallback = function(data) {
+                self.hostData = data.devices;
+                $scope.$apply();
+            };
+
+            $scope.sortCallback = function (urlSuffix) {
+                // FIXME: fix hardcoded sort params
+                if (!urlSuffix) {
+                    urlSuffix = '';
+                }
+                var payload = { sortCol: 'id', sortDir: 'asc' };
+                wss.sendEvent('hostDataRequest', payload);
+            };
+
+            var handlers = {
+                hostDataResponse: $scope.responseCallback
+            };
+            wss.bindHandlers(handlers);
+
+            // Cleanup on destroyed scope
+            $scope.$on('$destroy', function () {
+                wss.unbindHandlers(handlers);
+            });
+
+            $log.log('OvHostCtrl has been created');
+
+            $scope.sortCallback();
+        }]);
+}());

@@ -100,6 +100,7 @@
     <script src="app/view/topo/topoTraffic.js"></script>
     <script src="app/view/topo/topoTraffic.js"></script>
     <script src="app/view/topo/topoToolbar.js"></script>
     <script src="app/view/topo/topoToolbar.js"></script>
     <script src="app/view/device/device.js"></script>
     <script src="app/view/device/device.js"></script>
+    <script src="app/view/host/host.js"></script>
     <script src="app/view/sample/sample.js"></script>
     <script src="app/view/sample/sample.js"></script>
     <!-- {INJECTED-JAVASCRIPT-END} -->
     <!-- {INJECTED-JAVASCRIPT-END} -->
 
 
@@ -108,6 +109,7 @@
     <!-- {INJECTED-STYLESHEETS-START} -->
     <!-- {INJECTED-STYLESHEETS-START} -->
     <link rel="stylesheet" href="app/view/topo/topo.css">
     <link rel="stylesheet" href="app/view/topo/topo.css">
     <link rel="stylesheet" href="app/view/device/device.css">
     <link rel="stylesheet" href="app/view/device/device.css">
+    <link rel="stylesheet" href="app/view/host/host.css">
     <link rel="stylesheet" href="app/view/sample/sample.css">
     <link rel="stylesheet" href="app/view/sample/sample.css">
     <!-- {INJECTED-STYLESHEETS-END} -->
     <!-- {INJECTED-STYLESHEETS-END} -->
 
 

@@ -38,6 +38,7 @@
         // {INJECTED-VIEW-IDS-START}
         // {INJECTED-VIEW-IDS-START}
         'topo',
         'topo',
         'device',
         'device',
+        'host',
         'sample',
         'sample',
         // {INJECTED-VIEW-IDS-END}
         // {INJECTED-VIEW-IDS-END}