mirror of
https://github.com/opennetworkinglab/onos.git
synced 2025-10-18 19:01:06 +02:00
ONOS-1819 - GUI -- Group view added (WIP). Enum Cell Formatter created.
Change-Id: I6ade17a1dfd17cf2049bafe654d6411244d4ad07
This commit is contained in:
parent
5f1e457af5
commit
ff3dc673f3
@ -0,0 +1,37 @@
|
|||||||
|
/*
|
||||||
|
* 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.table.cell;
|
||||||
|
|
||||||
|
import org.onosproject.ui.table.CellFormatter;
|
||||||
|
|
||||||
|
import static org.apache.commons.lang.WordUtils.capitalizeFully;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Formats enum types to be readable strings.
|
||||||
|
*/
|
||||||
|
public class EnumFormatter extends AbstractCellFormatter {
|
||||||
|
|
||||||
|
@Override
|
||||||
|
protected String nonNullFormat(Object value) {
|
||||||
|
return capitalizeFully(value.toString().replace("_", " "));
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* An instance of this class.
|
||||||
|
*/
|
||||||
|
public static final CellFormatter INSTANCE = new EnumFormatter();
|
||||||
|
}
|
@ -0,0 +1,145 @@
|
|||||||
|
/*
|
||||||
|
* 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.ObjectNode;
|
||||||
|
import com.google.common.base.Strings;
|
||||||
|
import com.google.common.collect.ImmutableSet;
|
||||||
|
import org.onosproject.net.DeviceId;
|
||||||
|
import org.onosproject.net.group.Group;
|
||||||
|
import org.onosproject.net.group.GroupBucket;
|
||||||
|
import org.onosproject.net.group.GroupService;
|
||||||
|
import org.onosproject.ui.RequestHandler;
|
||||||
|
import org.onosproject.ui.UiMessageHandler;
|
||||||
|
import org.onosproject.ui.table.CellFormatter;
|
||||||
|
import org.onosproject.ui.table.TableModel;
|
||||||
|
import org.onosproject.ui.table.TableRequestHandler;
|
||||||
|
import org.onosproject.ui.table.cell.EnumFormatter;
|
||||||
|
import org.onosproject.ui.table.cell.IntComparator;
|
||||||
|
import org.onosproject.ui.table.cell.LongComparator;
|
||||||
|
|
||||||
|
import java.util.Collection;
|
||||||
|
import java.util.List;
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Message handler for group view related messages.
|
||||||
|
*/
|
||||||
|
public class GroupViewMessageHandler extends UiMessageHandler {
|
||||||
|
|
||||||
|
private static final String GROUP_DATA_REQ = "groupDataRequest";
|
||||||
|
private static final String GROUP_DATA_RESP = "groupDataResponse";
|
||||||
|
private static final String GROUPS = "groups";
|
||||||
|
|
||||||
|
private static final String ID = "id";
|
||||||
|
private static final String APP_ID = "app_id";
|
||||||
|
private static final String STATE = "state";
|
||||||
|
private static final String TYPE = "type";
|
||||||
|
private static final String PACKETS = "packets";
|
||||||
|
private static final String BYTES = "bytes";
|
||||||
|
private static final String BUCKETS = "buckets";
|
||||||
|
|
||||||
|
private static final String[] COL_IDS = {
|
||||||
|
ID, APP_ID, STATE, TYPE, PACKETS, BYTES, BUCKETS
|
||||||
|
};
|
||||||
|
|
||||||
|
@Override
|
||||||
|
protected Collection<RequestHandler> getHandlers() {
|
||||||
|
return ImmutableSet.of(new GroupDataRequest());
|
||||||
|
}
|
||||||
|
|
||||||
|
// handler for group table requests
|
||||||
|
private final class GroupDataRequest extends TableRequestHandler {
|
||||||
|
|
||||||
|
private GroupDataRequest() {
|
||||||
|
super(GROUP_DATA_REQ, GROUP_DATA_RESP, GROUPS);
|
||||||
|
}
|
||||||
|
|
||||||
|
@Override
|
||||||
|
protected String[] getColumnIds() {
|
||||||
|
return COL_IDS;
|
||||||
|
}
|
||||||
|
|
||||||
|
@Override
|
||||||
|
protected TableModel createTableModel() {
|
||||||
|
TableModel tm = super.createTableModel();
|
||||||
|
|
||||||
|
tm.setComparator(ID, IntComparator.INSTANCE);
|
||||||
|
tm.setComparator(PACKETS, LongComparator.INSTANCE);
|
||||||
|
tm.setComparator(BYTES, LongComparator.INSTANCE);
|
||||||
|
|
||||||
|
tm.setFormatter(TYPE, EnumFormatter.INSTANCE);
|
||||||
|
tm.setFormatter(BUCKETS, new BucketFormatter());
|
||||||
|
return tm;
|
||||||
|
}
|
||||||
|
|
||||||
|
@Override
|
||||||
|
protected void populateTable(TableModel tm, ObjectNode payload) {
|
||||||
|
String uri = string(payload, "devId");
|
||||||
|
if (!Strings.isNullOrEmpty(uri)) {
|
||||||
|
DeviceId deviceId = DeviceId.deviceId(uri);
|
||||||
|
GroupService gs = get(GroupService.class);
|
||||||
|
for (Group group : gs.getGroups(deviceId)) {
|
||||||
|
populateRow(tm.addRow(), group);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private void populateRow(TableModel.Row row, Group g) {
|
||||||
|
row.cell(ID, g.id().id())
|
||||||
|
.cell(APP_ID, g.appId().name())
|
||||||
|
.cell(STATE, g.state())
|
||||||
|
.cell(TYPE, g.type())
|
||||||
|
.cell(PACKETS, g.packets())
|
||||||
|
.cell(BYTES, g.bytes())
|
||||||
|
.cell(BUCKETS, g.buckets().buckets());
|
||||||
|
}
|
||||||
|
|
||||||
|
private final class BucketFormatter implements CellFormatter {
|
||||||
|
private static final String COMMA = ", ";
|
||||||
|
|
||||||
|
@Override
|
||||||
|
public String format(Object value) {
|
||||||
|
StringBuilder sb = new StringBuilder();
|
||||||
|
List<GroupBucket> buckets = (List<GroupBucket>) value;
|
||||||
|
|
||||||
|
if (buckets.isEmpty()) {
|
||||||
|
return "(No buckets for this group)";
|
||||||
|
}
|
||||||
|
|
||||||
|
for (GroupBucket b : buckets) {
|
||||||
|
sb.append("Bytes: ")
|
||||||
|
.append(Long.toString(b.bytes()))
|
||||||
|
.append(" Packets: ")
|
||||||
|
.append(Long.toString(b.packets()))
|
||||||
|
.append(" Actions: ")
|
||||||
|
.append(b.treatment().allInstructions())
|
||||||
|
.append(COMMA);
|
||||||
|
}
|
||||||
|
removeTrailingComma(sb);
|
||||||
|
|
||||||
|
return sb.toString();
|
||||||
|
}
|
||||||
|
|
||||||
|
private StringBuilder removeTrailingComma(StringBuilder sb) {
|
||||||
|
int pos = sb.lastIndexOf(COMMA);
|
||||||
|
sb.delete(pos, sb.length());
|
||||||
|
return sb;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
@ -69,6 +69,7 @@ public class UiExtensionManager implements UiExtensionService, SpriteService {
|
|||||||
new UiView(NETWORK, "device", "Devices", "nav_devs"),
|
new UiView(NETWORK, "device", "Devices", "nav_devs"),
|
||||||
new UiViewHidden("flow"),
|
new UiViewHidden("flow"),
|
||||||
new UiViewHidden("port"),
|
new UiViewHidden("port"),
|
||||||
|
new UiViewHidden("group"),
|
||||||
new UiView(NETWORK, "link", "Links", "nav_links"),
|
new UiView(NETWORK, "link", "Links", "nav_links"),
|
||||||
new UiView(NETWORK, "host", "Hosts", "nav_hosts"),
|
new UiView(NETWORK, "host", "Hosts", "nav_hosts"),
|
||||||
new UiView(NETWORK, "intent", "Intents", "nav_intents")
|
new UiView(NETWORK, "intent", "Intents", "nav_intents")
|
||||||
@ -82,6 +83,7 @@ public class UiExtensionManager implements UiExtensionService, SpriteService {
|
|||||||
new HostViewMessageHandler(),
|
new HostViewMessageHandler(),
|
||||||
new FlowViewMessageHandler(),
|
new FlowViewMessageHandler(),
|
||||||
new PortViewMessageHandler(),
|
new PortViewMessageHandler(),
|
||||||
|
new GroupViewMessageHandler(),
|
||||||
new IntentViewMessageHandler(),
|
new IntentViewMessageHandler(),
|
||||||
new ApplicationViewMessageHandler(),
|
new ApplicationViewMessageHandler(),
|
||||||
new ClusterViewMessageHandler()
|
new ClusterViewMessageHandler()
|
||||||
|
49
web/gui/src/main/webapp/app/view/group/group.css
Normal file
49
web/gui/src/main/webapp/app/view/group/group.css
Normal file
@ -0,0 +1,49 @@
|
|||||||
|
/*
|
||||||
|
* 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 -- Group View -- CSS file
|
||||||
|
*/
|
||||||
|
|
||||||
|
#ov-group h2 {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
#ov-group div.ctrl-btns {
|
||||||
|
width: 45px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.light #ov-group tr:nth-child(4n + 2),
|
||||||
|
.light #ov-group tr:nth-child(4n + 3) {
|
||||||
|
background-color: #eee;
|
||||||
|
}
|
||||||
|
.light #ov-group tr:nth-child(4n + 4),
|
||||||
|
.light #ov-group tr:nth-child(4n + 1) {
|
||||||
|
background-color: #ddd;
|
||||||
|
}
|
||||||
|
.dark #ov-group tr:nth-child(4n + 2),
|
||||||
|
.dark #ov-group tr:nth-child(4n + 3) {
|
||||||
|
background-color: #444;
|
||||||
|
}
|
||||||
|
.dark #ov-group tr:nth-child(4n + 4),
|
||||||
|
.dark #ov-group tr:nth-child(4n + 1) {
|
||||||
|
background-color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
#ov-group td.buckets {
|
||||||
|
padding-left: 36px;
|
||||||
|
opacity: 0.65;
|
||||||
|
}
|
72
web/gui/src/main/webapp/app/view/group/group.html
Normal file
72
web/gui/src/main/webapp/app/view/group/group.html
Normal file
@ -0,0 +1,72 @@
|
|||||||
|
<!--
|
||||||
|
~ 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.
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Group partial HTML -->
|
||||||
|
<div id="ov-group">
|
||||||
|
<div class="tabular-header">
|
||||||
|
<h2>
|
||||||
|
Groups for Device {{devId || "(No device selected)"}}
|
||||||
|
({{tableData.length}} total)
|
||||||
|
</h2>
|
||||||
|
<div class="ctrl-btns">
|
||||||
|
<div class="refresh active"
|
||||||
|
icon icon-size="36" icon-id="refresh"
|
||||||
|
ng-click="refresh()"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="summary-list" onos-fixed-header>
|
||||||
|
|
||||||
|
<div class="table-header"
|
||||||
|
onos-sortable-header sort-callback="sortCallback(requestParams)">
|
||||||
|
<table>
|
||||||
|
<tr>
|
||||||
|
<td colId="id" sortable>Group ID </td>
|
||||||
|
<td colId="app_id" sortable>App ID </td>
|
||||||
|
<td colId="state" sortable>State </td>
|
||||||
|
<td colId="type" sortable>Type </td>
|
||||||
|
<td colId="packets" sortable>Packets </td>
|
||||||
|
<td colId="bytes" sortable>Bytes </td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="table-body">
|
||||||
|
<table>
|
||||||
|
<tr ng-hide="tableData.length" class="no-data ignore-width">
|
||||||
|
<td colspan="6">
|
||||||
|
No Groups found
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<tr ng-repeat-start="group in tableData">
|
||||||
|
<td>{{group.id}}</td>
|
||||||
|
<td>{{group.app_id}}</td>
|
||||||
|
<td>{{group.state}}</td>
|
||||||
|
<td>{{group.type}}</td>
|
||||||
|
<td>{{group.packets}}</td>
|
||||||
|
<td>{{group.bytes}}</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="ignore-width"
|
||||||
|
ng-repeat-end ng-repeat-done>
|
||||||
|
<td class="buckets" colspan="6">{{group.buckets}}</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
60
web/gui/src/main/webapp/app/view/group/group.js
Normal file
60
web/gui/src/main/webapp/app/view/group/group.js
Normal file
@ -0,0 +1,60 @@
|
|||||||
|
/*
|
||||||
|
* 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 -- Group View Module
|
||||||
|
*/
|
||||||
|
|
||||||
|
(function () {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
// injected references
|
||||||
|
var $log, $scope, $location, fs, ts, tbs;
|
||||||
|
|
||||||
|
angular.module('ovGroup', [])
|
||||||
|
.controller('OvGroupCtrl',
|
||||||
|
['$log', '$scope', '$location',
|
||||||
|
'FnService', 'TableService', 'TableBuilderService',
|
||||||
|
|
||||||
|
function (_$log_, _$scope_, _$location_, _fs_, _ts_, _tbs_) {
|
||||||
|
var params;
|
||||||
|
$log = _$log_;
|
||||||
|
$scope = _$scope_;
|
||||||
|
$location = _$location_;
|
||||||
|
fs = _fs_;
|
||||||
|
ts = _ts_;
|
||||||
|
tbs = _tbs_;
|
||||||
|
|
||||||
|
params = $location.search();
|
||||||
|
if (params.hasOwnProperty('devId')) {
|
||||||
|
$scope.devId = params['devId'];
|
||||||
|
}
|
||||||
|
|
||||||
|
tbs.buildTable({
|
||||||
|
scope: $scope,
|
||||||
|
tag: 'group',
|
||||||
|
query: params
|
||||||
|
});
|
||||||
|
|
||||||
|
$scope.refresh = function () {
|
||||||
|
$log.debug('Refreshing groups page');
|
||||||
|
ts.resetSortIcons();
|
||||||
|
$scope.sortCallback();
|
||||||
|
};
|
||||||
|
|
||||||
|
$log.log('OvGroupCtrl has been created');
|
||||||
|
}]);
|
||||||
|
}());
|
@ -112,6 +112,7 @@
|
|||||||
<script src="app/view/device/device.js"></script>
|
<script src="app/view/device/device.js"></script>
|
||||||
<script src="app/view/flow/flow.js"></script>
|
<script src="app/view/flow/flow.js"></script>
|
||||||
<script src="app/view/port/port.js"></script>
|
<script src="app/view/port/port.js"></script>
|
||||||
|
<script src="app/view/group/group.js"></script>
|
||||||
<script src="app/view/link/link.js"></script>
|
<script src="app/view/link/link.js"></script>
|
||||||
<script src="app/view/host/host.js"></script>
|
<script src="app/view/host/host.js"></script>
|
||||||
<script src="app/view/intent/intent.js"></script>
|
<script src="app/view/intent/intent.js"></script>
|
||||||
@ -127,6 +128,7 @@
|
|||||||
<link rel="stylesheet" href="app/view/device/device.css">
|
<link rel="stylesheet" href="app/view/device/device.css">
|
||||||
<link rel="stylesheet" href="app/view/flow/flow.css">
|
<link rel="stylesheet" href="app/view/flow/flow.css">
|
||||||
<link rel="stylesheet" href="app/view/port/port.css">
|
<link rel="stylesheet" href="app/view/port/port.css">
|
||||||
|
<link rel="stylesheet" href="app/view/group/group.css">
|
||||||
<link rel="stylesheet" href="app/view/link/link.css">
|
<link rel="stylesheet" href="app/view/link/link.css">
|
||||||
<link rel="stylesheet" href="app/view/host/host.css">
|
<link rel="stylesheet" href="app/view/host/host.css">
|
||||||
<link rel="stylesheet" href="app/view/intent/intent.css">
|
<link rel="stylesheet" href="app/view/intent/intent.css">
|
||||||
|
@ -40,6 +40,7 @@
|
|||||||
'device',
|
'device',
|
||||||
'flow',
|
'flow',
|
||||||
'port',
|
'port',
|
||||||
|
'group',
|
||||||
'host',
|
'host',
|
||||||
'app',
|
'app',
|
||||||
'intent',
|
'intent',
|
||||||
|
Loading…
x
Reference in New Issue
Block a user