GUI -- Base Cluster View implemented. Bug fixed of table bodies not being wide enough.

Change-Id: Iebf43c87c91404eb443ae1a098b56575ca9959fe

@@ -90,7 +90,8 @@
                             org.onlab.osgi.*,
                             org.onlab.osgi.*,
                             org.onlab.packet.*,
                             org.onlab.packet.*,
                             org.onlab.rest.*,
                             org.onlab.rest.*,
-                            org.onosproject.*
+                            org.onosproject.*,
+                            org.joda.time.*
                         </Import-Package>
                         </Import-Package>
                         <Web-ContextPath>${web.context}</Web-ContextPath>
                         <Web-ContextPath>${web.context}</Web-ContextPath>
                     </instructions>
                     </instructions>

+/*
+ * 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.joda.time.DateTime;
+import org.joda.time.format.DateTimeFormat;
+import org.onosproject.cluster.ClusterService;
+import org.onosproject.cluster.ControllerNode;
+import org.onosproject.cluster.NodeId;
+
+import java.util.ArrayList;
+import java.util.Arrays;
+import java.util.List;
+
+
+/**
+ * Message handler for cluster view related messages.
+ */
+public class ClusterViewMessageHandler extends AbstractTabularViewMessageHandler {
+
+    /**
+     * Creates a new message handler for the cluster messages.
+     */
+    protected ClusterViewMessageHandler() {
+        super(ImmutableSet.of("clusterDataRequest"));
+    }
+
+    @Override
+    public void process(ObjectNode message) {
+        ObjectNode payload = payload(message);
+        String sortCol = string(payload, "sortCol", "id");
+        String sortDir = string(payload, "sortDir", "asc");
+
+        ClusterService service = get(ClusterService.class);
+        TableRow[] rows = generateTableRows(service);
+        RowComparator rc =
+                new RowComparator(sortCol, RowComparator.direction(sortDir));
+        Arrays.sort(rows, rc);
+        ArrayNode clusterNodes = generateArrayNode(rows);
+        ObjectNode rootNode = mapper.createObjectNode();
+        rootNode.set("clusters", clusterNodes);
+
+        connection().sendMessage("clusterDataResponse", 0, rootNode);
+    }
+
+    private TableRow[] generateTableRows(ClusterService service) {
+        List<TableRow> list = new ArrayList<>();
+        for (ControllerNode node : service.getNodes()) {
+            list.add(new ControllerNodeTableRow(service, node));
+        }
+        return list.toArray(new TableRow[list.size()]);
+    }
+
+    /**
+     * TableRow implementation for {@link ControllerNode controller nodes}.
+     */
+    private static class ControllerNodeTableRow extends AbstractTableRow {
+
+        private static final String ID = "id";
+        private static final String IP = "ip";
+        private static final String TCP_PORT = "tcp";
+        private static final String STATE = "state";
+        private static final String UPDATED = "updated";
+
+        private static final String[] COL_IDS = {
+                ID, IP, TCP_PORT, STATE, UPDATED
+        };
+
+        public ControllerNodeTableRow(ClusterService service, ControllerNode n) {
+            NodeId id = n.id();
+            DateTime lastUpdated = service.getLastUpdated(id);
+            org.joda.time.format.DateTimeFormatter format = DateTimeFormat.longTime();
+
+            add(ID, id.toString());
+            add(IP, n.ip().toString());
+            add(TCP_PORT, Integer.toString(n.tcpPort()));
+            add(STATE, service.getState(id).toString());
+            add(UPDATED, format.print(lastUpdated));
+        }
+
+        @Override
+        protected String[] columnIds() {
+            return COL_IDS;
+        }
+    }
+
+}

@@ -61,6 +61,7 @@ public class UiExtensionManager implements UiExtensionService {
                                     new UiView("host", "Hosts"),
                                     new UiView("host", "Hosts"),
                                     new UiView("app", "Applications"),
                                     new UiView("app", "Applications"),
                                     new UiView("intent", "Intents"),
                                     new UiView("intent", "Intents"),
+                                    new UiView("cluster", "Cluster Nodes"),
                                     new UiView("sample", "Sample"));
                                     new UiView("sample", "Sample"));
         UiMessageHandlerFactory messageHandlerFactory =
         UiMessageHandlerFactory messageHandlerFactory =
                 () -> ImmutableList.of(
                 () -> ImmutableList.of(
@@ -68,7 +69,8 @@ public class UiExtensionManager implements UiExtensionService {
                         new DeviceViewMessageHandler(),
                         new DeviceViewMessageHandler(),
                         new HostViewMessageHandler(),
                         new HostViewMessageHandler(),
                         new ApplicationViewMessageHandler(),
                         new ApplicationViewMessageHandler(),
-                        new IntentViewMessageHandler()
+                        new IntentViewMessageHandler(),
+                        new ClusterViewMessageHandler()
                 );
                 );
         return new UiExtension(coreViews, messageHandlerFactory, "core",
         return new UiExtension(coreViews, messageHandlerFactory, "core",
                                UiExtensionManager.class.getClassLoader());
                                UiExtensionManager.class.getClassLoader());

@@ -4,3 +4,4 @@
 <link rel="stylesheet" href="app/view/host/host.css">
 <link rel="stylesheet" href="app/view/host/host.css">
 <link rel="stylesheet" href="app/view/app/app.css">
 <link rel="stylesheet" href="app/view/app/app.css">
 <link rel="stylesheet" href="app/view/intent/intent.css">
 <link rel="stylesheet" href="app/view/intent/intent.css">
+<link rel="stylesheet" href="app/view/cluster/cluster.css">

@@ -15,4 +15,5 @@
 <script src="app/view/host/host.js"></script>
 <script src="app/view/host/host.js"></script>
 <script src="app/view/app/app.js"></script>
 <script src="app/view/app/app.js"></script>
 <script src="app/view/intent/intent.js"></script>
 <script src="app/view/intent/intent.js"></script>
+<script src="app/view/cluster/cluster.js"></script>
 <script src="app/view/sample/sample.js"></script>
 <script src="app/view/sample/sample.js"></script>

@@ -83,7 +83,8 @@
 
 
         tHeaders.each(function (d, i) {
         tHeaders.each(function (d, i) {
             var thElement = d3.select(this),
             var thElement = d3.select(this),
-                tdElement = t.select('td:nth-of-type(' + (i + 1) + ')'),
+                tr = t.select('tr:nth-of-type(2)'),
+                tdElement = tr.select('td:nth-of-type(' + (i + 1) + ')'),
                 custWidth = thElement.attr(colWidth);
                 custWidth = thElement.attr(colWidth);
 
 
             if (custWidth) {
             if (custWidth) {
@@ -105,9 +106,10 @@
             tableHeight = fs.windowSize(mast.mastHeight() + totalHeight).height;
             tableHeight = fs.windowSize(mast.mastHeight() + totalHeight).height;
 
 
         thead.style('display', 'block');
         thead.style('display', 'block');
-        tbody.style({'display': 'block',
-            'height': (tableHeight + 'px'),
-            'overflow': 'auto'
+        tbody.style({
+            display: 'block',
+            height: tableHeight + 'px',
+            overflow: 'auto'
         });
         });
     }
     }
 
 

+/*
+ * 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 -- Cluster View -- CSS file
+ */
+
+#ov-cluster td {
+}
\ No newline at end of file

+<!--
+  ~ 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.
+  -->
+
+<!-- Cluster partial HTML -->
+<div id="ov-cluster">
+    <h2>Cluster Nodes ({{ctrl.tableData.length}} total)</h2>
+    <table class="summary-list"
+           onos-fixed-header
+           onos-sortable-header
+           sort-callback="sortCallback(requestParams)">
+        <thead>
+        <tr>
+            <th colId="id" sortable>ID </th>
+            <th colId="ip" sortable>IP Address </th>
+            <th colId="tcp" sortable>TCP Port </th>
+            <th colId="state" sortable>State </th>
+            <th colId="updated" sortable>Last Updated </th>
+        </tr>
+        </thead>
+
+        <tbody>
+        <tr ng-hide="ctrl.tableData.length">
+            <td class="nodata" colspan="5">
+                No Cluster Nodes found
+            </td>
+        </tr>
+
+        <tr ng-repeat="node in ctrl.tableData"
+            ng-repeat-done>
+            <td>{{node.id}}</td>
+            <td>{{node.ip}}</td>
+            <td>{{node.tcp}}</td>
+            <td>{{node.state}}</td>
+            <td>{{node.updated}}</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 -- Cluster View Module
+ */
+
+(function () {
+    'use strict';
+
+    angular.module('ovCluster', [])
+        .controller('OvClusterCtrl',
+        ['$log', '$scope', 'TableBuilderService',
+
+            function ($log, $scope, tbs) {
+                tbs.buildTable({
+                    self: this,
+                    scope: $scope,
+                    tag: 'cluster'
+                });
+
+                $log.log('OvClusterCtrl has been created');
+            }]);
+}());

@@ -18,24 +18,24 @@
  ONOS GUI -- Intent View -- CSS file
  ONOS GUI -- Intent View -- CSS file
  */
  */
 
 
-.light #ov-intent tr:nth-child(6n + 1),
 .light #ov-intent tr:nth-child(6n + 2),
 .light #ov-intent tr:nth-child(6n + 2),
-.light #ov-intent tr:nth-child(6n + 3) {
+.light #ov-intent tr:nth-child(6n + 3),
+.light #ov-intent tr:nth-child(6n + 4) {
     background-color: #eee;
     background-color: #eee;
 }
 }
-.light #ov-intent tr:nth-child(6n + 4),
 .light #ov-intent tr:nth-child(6n + 5),
 .light #ov-intent tr:nth-child(6n + 5),
-.light #ov-intent tr:nth-child(6n) {
+.light #ov-intent tr:nth-child(6n + 6),
+.light #ov-intent tr:nth-child(6n + 1) {
     background-color: #ddd;
     background-color: #ddd;
 }
 }
-.dark #ov-intent tr:nth-child(6n + 1),
 .dark #ov-intent tr:nth-child(6n + 2),
 .dark #ov-intent tr:nth-child(6n + 2),
-.dark #ov-intent tr:nth-child(6n + 3) {
+.dark #ov-intent tr:nth-child(6n + 3),
+.dark #ov-intent tr:nth-child(6n + 4) {
     background-color: #444;
     background-color: #444;
 }
 }
-.dark #ov-intent tr:nth-child(6n + 4),
 .dark #ov-intent tr:nth-child(6n + 5),
 .dark #ov-intent tr:nth-child(6n + 5),
-.dark #ov-intent tr:nth-child(6n) {
+.dark #ov-intent tr:nth-child(6n + 6),
+.dark #ov-intent tr:nth-child(6n + 1) {
     background-color: #333;
     background-color: #333;
 }
 }
 
 

@@ -113,6 +113,7 @@
     <script src="app/view/host/host.js"></script>
     <script src="app/view/host/host.js"></script>
     <script src="app/view/app/app.js"></script>
     <script src="app/view/app/app.js"></script>
     <script src="app/view/intent/intent.js"></script>
     <script src="app/view/intent/intent.js"></script>
+    <script src="app/view/cluster/cluster.js"></script>
     <script src="app/view/sample/sample.js"></script>
     <script src="app/view/sample/sample.js"></script>
     <!-- {INJECTED-JAVASCRIPT-END} -->
     <!-- {INJECTED-JAVASCRIPT-END} -->
 
 
@@ -124,6 +125,7 @@
     <link rel="stylesheet" href="app/view/host/host.css">
     <link rel="stylesheet" href="app/view/host/host.css">
     <link rel="stylesheet" href="app/view/app/app.css">
     <link rel="stylesheet" href="app/view/app/app.css">
     <link rel="stylesheet" href="app/view/intent/intent.css">
     <link rel="stylesheet" href="app/view/intent/intent.css">
+    <link rel="stylesheet" href="app/view/cluster/cluster.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} -->
 
 

@@ -41,6 +41,7 @@
         'host',
         'host',
         'app',
         'app',
         'intent',
         'intent',
+        'cluster',
         'sample',
         'sample',
         // {INJECTED-VIEW-IDS-END}
         // {INJECTED-VIEW-IDS-END}