홍길동 / onos

Go to a project
Toggle navigation Toggle navigation pinning
Thomas Vachuska
Committed by Gerrit Code Review
e586b799 1 parent 4a4d18f8

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

…t rather than via REST. WIP.

Change-Id: I68de98e8df0a2bbcebe15ad9015ce6b4df43d81c
Inline Side-by-side
Showing 16 changed files with 465 additions and 139 deletions
......@@ -29,6 +29,7 @@ import static com.google.common.base.Preconditions.checkNotNull;
* interface client.
* <p>
* The message is a JSON object with the following structure:
* </p>
* <pre>
* {
* "type": "<em>event-type</em>",
......@@ -45,7 +46,9 @@ public abstract class UiMessageHandler {
private UiConnection connection;
private ServiceDirectory directory;
/** Mapper for creating ObjectNodes and ArrayNodes etc. */
/**
* Mapper for creating ObjectNodes and ArrayNodes etc.
*/
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
* 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
* @return the object node representation
*/
......@@ -144,4 +147,48 @@ public abstract class UiMessageHandler {
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
* 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;
/**
* 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
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.
private void addListeners() {
listenersRemoved = false;
clusterService.addListener(clusterListener);
mastershipService.addListener(mastershipListener);
deviceService.addListener(deviceListener);
......
......@@ -58,10 +58,13 @@ public class UiExtensionManager implements UiExtensionService {
private static UiExtension createCoreExtension() {
List<UiView> coreViews = of(new UiView("topo", "Topology View"),
new UiView("device", "Devices"),
new UiView("host", "Hosts"),
new UiView("sample", "Sample"));
UiMessageHandlerFactory messageHandlerFactory =
() -> ImmutableList.of(
new TopologyViewMessageHandler()
new TopologyViewMessageHandler(),
new DeviceViewMessageHandler(),
new HostViewMessageHandler()
);
return new UiExtension(coreViews, messageHandlerFactory, "core",
UiExtensionManager.class.getClassLoader());
......
<link rel="stylesheet" href="app/view/sample/sample.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/host/host.css">
......
......@@ -12,4 +12,5 @@
<script src="app/view/topo/topoTraffic.js"></script>
<script src="app/view/topo/topoToolbar.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>
......
......@@ -139,7 +139,6 @@
<param-name>com.sun.jersey.config.property.classnames</param-name>
<param-value>
org.onosproject.ui.impl.TopologyResource,
org.onosproject.ui.impl.DeviceGuiResource
</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
......
......@@ -23,30 +23,39 @@
angular.module('ovDevice', [])
.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;
self.deviceData = [];
$scope.responseCallback = function(data) {
self.deviceData = data.devices;
$scope.$apply();
};
$scope.sortCallback = function (urlSuffix) {
// FIXME: fix hardcoded sort params
if (!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
$scope.$on('$destroy', function () {
wss.unbindHandlers(handlers);
});
$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/topoToolbar.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>
<!-- {INJECTED-JAVASCRIPT-END} -->
......@@ -108,6 +109,7 @@
<!-- {INJECTED-STYLESHEETS-START} -->
<link rel="stylesheet" href="app/view/topo/topo.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">
<!-- {INJECTED-STYLESHEETS-END} -->
......
......@@ -38,6 +38,7 @@
// {INJECTED-VIEW-IDS-START}
'topo',
'device',
'host',
'sample',
// {INJECTED-VIEW-IDS-END}
......