Merge into master from pull request #173:

Update Web UI to match recent REST API changes (https://github.com/floodlight/floodlight/pull/173)

src/main/resources/web/js/models/hostmodel.js

@@ -17,10 +17,10 @@
 window.Host = Backbone.Model.extend({
 
     defaults: {
-    	vlan: -1,
-    	seen: 'never',
-    	ip: ' ',
-    	swport: ' ',
+        // vlan: -1,
+        lastSeen: 'never',
+        ip: ' ',
+        swport: ' ',
     },
 
     // initialize:function () {}
@@ -42,12 +42,13 @@ window.HostCollection = Backbone.Collection.extend({
                 // console.log(data);
                 // data is a list of device hashes
                 _.each(data, function(h) {
-		    if (h['attachmentPoint'].length > 0) {
-			h.swport = _.reduce(h['attachmentPoint'], function(memo, ap) {
-			    return memo + ap.dpid + "-" + ap.port + " "}, "")
-			console.log(h.swport);
-			self.add(h, {silent: true});
-		    }
+                    if (h['attachmentPoint'].length > 0) {
+                        h.id = h.mac[0];
+                        h.swport = _.reduce(h['attachmentPoint'], function(memo, ap) {
+                            return memo + ap.switchDPID + "-" + ap.port + " "}, "");
+                        //console.log(h.swport);
+                        self.add(h, {silent: true});
+                    }
                 });
                 self.trigger('add'); // batch redraws
             }
@@ -56,24 +57,15 @@ window.HostCollection = Backbone.Collection.extend({
     },
 
     fetch:function () {
-	this.initialize()
+        this.initialize();
     }
 
     /*
-    findByName:function (key) {
-        // TODO: Modify service to include firstName in search
-        var url = (key == '') ? '/host/' : "/host/search/" + key;
-        console.log('findByName: ' + key);
-        var self = this;
-        $.ajax({
-            url:url,
-            dataType:"json",
-            success:function (data) {
-                console.log("search success: " + data.length);
-                self.reset(data);
-            }
-        });
-    }
-    */
+	 * findByName:function (key) { // TODO: Modify service to include firstName
+	 * in search var url = (key == '') ? '/host/' : "/host/search/" + key;
+	 * console.log('findByName: ' + key); var self = this; $.ajax({ url:url,
+	 * dataType:"json", success:function (data) { console.log("search success: " +
+	 * data.length); self.reset(data); } }); }
+	 */
 
 });

src/main/resources/web/js/views/host.js

@@ -42,7 +42,7 @@ window.HostListView = Backbone.View.extend({
         $(this.el).html(this.template({nhosts:hl.length}));
         _.each(this.model.models, function (h) {
             $(this.el).find('table.host-table > tbody')
-            	.append(new HostListItemView({model:h}).render().el);
+                .append(new HostListItemView({model:h}).render().el);
         }, this);
         return this;
     }

src/main/resources/web/tpl/host-list-item.html

-		<td><a href="/host/<%= mac %>"><%= mac %></a></td><td><%= vlan %></td><td><%= ipv4 %></td><td><%= swport %></td><td><%= lastSeen %></td>
+		<td><a href="/host/<%= mac %>"><%= mac %></a></td><!-- <td><%= vlan %></td> --><td><%= ipv4 %></td><td><%= swport %></td><td><%= lastSeen %></td>

src/main/resources/web/tpl/host-list.html

@@ -4,7 +4,7 @@
 	<h1>Hosts (<%= nhosts %>)</h1>
 </div>
 <table class="table striped-table host-table">
-	<thead><tr><th>MAC Address</th><th>VLAN</th><th>IP Address</th><th>Switch Port</th><th>Last Seen</th></tr></thead>
+	<thead><tr><th>MAC Address</th><!-- <th>VLAN</th> --><th>IP Address</th><th>Switch Port</th><th>Last Seen</th></tr></thead>
 	<tbody>
 		<!-- hosts will be inserted here by HostListView.render -->
 	</tbody>

src/main/resources/web/tpl/host.html

@@ -5,8 +5,7 @@
 </div>
 <p>
 <!-- VLAN: <a href="/vlan/<%= vlan %>"><%= vlan %></a><br> -->
-VLAN: <%= vlan %><br>
-IP addresses: <%= ip %><br>
+IP addresses: <%= ipv4 %><br>
 Attachment points: <%= swport %><br>
-Last seen: <%= seen %>
+Last seen: <%= lastSeen %>
 </p>

src/main/resources/web/tpl/topology.html

@@ -3,7 +3,6 @@
 <div class="page-header">
 	<h1>Network Topology</h1>
 </div>
-<p>Beautiful topology graph goes here</p>
 <div id="topology-graph"></div>
 </div>
 </div>