홍길동 / onos

Go to a project
Toggle navigation Toggle navigation pinning
chengfan
Committed by Gerrit Code Review
b466a7e7 1 parent 4fc8685e

[ONOS-2096] Let GUI support tunnel 

1. add a TunnelViewMesageHandler to handle message from the client.
2. add a tunnel view to show tunnel information on the GUI

Change-Id: I1d9a73c0e4e8ed1a55cdbef09426995989c4e76a
Inline Side-by-side
Showing 6 changed files with 228 additions and 2 deletions
package org.onosproject.ui.impl;
import com.fasterxml.jackson.databind.node.ObjectNode;
import com.google.common.collect.ImmutableSet;
import org.onosproject.incubator.net.tunnel.Tunnel;
import org.onosproject.incubator.net.tunnel.TunnelService;
import org.onosproject.ui.RequestHandler;
import org.onosproject.ui.UiMessageHandler;
import org.onosproject.ui.table.TableModel;
import org.onosproject.ui.table.TableRequestHandler;
import org.onosproject.ui.table.cell.EnumFormatter;
import java.util.Collection;
public class TunnelViewMessageHandler extends UiMessageHandler {
private static final String TUNNEL_DATA_REQ = "tunnelDataRequest";
private static final String TUNNEL_DATA_RESP = "tunnelDataResponse";
private static final String TUNNELS = "tunnels";
private static final String ID = "id";
private static final String NAME = "name";
private static final String ONE = "one";
private static final String TWO = "two";
private static final String TYPE = "type";
private static final String GROUP_ID = "group_id";
private static final String BANDWIDTH = "bandwidth";
private static final String PATH = "path";
private static final String[] COL_IDS = {
ID, NAME, ONE, TWO, TYPE, GROUP_ID,
BANDWIDTH, PATH
};
@Override
protected Collection<RequestHandler> createRequestHandlers() {
return ImmutableSet.of(new TunnelDataRequestHandler());
}
private final class TunnelDataRequestHandler extends TableRequestHandler {
public TunnelDataRequestHandler() {
super(TUNNEL_DATA_REQ, TUNNEL_DATA_RESP, TUNNELS);
}
@Override
protected String[] getColumnIds() {
return COL_IDS;
}
@Override
protected TableModel createTableModel() {
TableModel tm = super.createTableModel();
//TODO add more formater class so that we can get a more readable table
tm.setFormatter(TYPE, EnumFormatter.INSTANCE);
return tm;
}
@Override
protected void populateTable(TableModel tm, ObjectNode payload) {
TunnelService ts = get(TunnelService.class);
ts.queryAllTunnels().forEach(tunnel -> {
populateRow(tm.addRow(), tunnel);
});
}
}
private void populateRow(TableModel.Row row, Tunnel tunnel) {
row.cell(ID, tunnel.tunnelId().id())
.cell(NAME, tunnel.tunnelName().value())
.cell(ONE, tunnel.src())
.cell(TWO, tunnel.dst())
.cell(TYPE, tunnel.type())
.cell(GROUP_ID, tunnel.groupId().id())
.cell(BANDWIDTH, tunnel.annotations().value(BANDWIDTH))
.cell(PATH, tunnel.path());
}
}
......@@ -84,7 +84,9 @@ public class UiExtensionManager implements UiExtensionService, SpriteService {
new UiViewHidden("group"),
new UiView(NETWORK, "link", "Links", "nav_links"),
new UiView(NETWORK, "host", "Hosts", "nav_hosts"),
new UiView(NETWORK, "intent", "Intents", "nav_intents")
new UiView(NETWORK, "intent", "Intents", "nav_intents"),
//TODO add a new type of icon for tunnel
new UiView(NETWORK, "tunnel", "Tunnels", "nav_links")
);
UiMessageHandlerFactory messageHandlerFactory =
......@@ -99,7 +101,8 @@ public class UiExtensionManager implements UiExtensionService, SpriteService {
new IntentViewMessageHandler(),
new ApplicationViewMessageHandler(),
new SettingsViewMessageHandler(),
new ClusterViewMessageHandler()
new ClusterViewMessageHandler(),
new TunnelViewMessageHandler()
);
UiTopoOverlayFactory topoOverlayFactory =
......
/*
* 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 -- Link View -- CSS file
*/
#ov-tunnel h2 {
display: inline-block;
}
#ov-tunnel div.ctrl-btns {
width: 45px;
}
\ 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.
-->
<!-- Tunnel partial HTML -->
<div id="ov-tunnel">
<div class="tabular-header">
<h2>Tunnels ({{tableData.length}} total)</h2>
<div class="ctrl-btns">
<div class="refresh" ng-class="{active: autoRefresh}"
icon icon-size="36" icon-id="refresh"
tooltip tt-msg="autoRefreshTip"
ng-click="toggleRefresh()"></div>
</div>
</div>
<div class="summary-list" onos-table-resize>
<div ng-show="loading" class="loading-wheel"
icon icon-id="loading" icon-size="75"></div>
<div class="table-header" onos-sortable-header>
<table>
<tr>
<td colId="id" sortable>ID </td>
<td colId="name" sortable>Name</td>
<td colId="one" sortable>Port 1 </td>
<td colId="two" sortable>Port 2 </td>
<td colId="type" sortable>Type </td>
<td colId="group_id" sortable>Group Id</td>
<td colId="bandwidth" sortable>Bandwidth</td>
<td colId="path" sortable>Path</td>
</tr>
</table>
</div>
<div class="table-body">
<table onos-flash-changes id-prop="one">
<tr ng-if="!tableData.length" class="no-data">
<td colspan="6">
No tunnels found
</td>
</tr>
<tr ng-repeat="tunnel in tableData track by $index"
ng-repeat-complete row-id="{{tunnel.id}}">
<td>{{tunnel.id}}</td>
<td>{{tunnel.name}}</td>
<td>{{tunnel.one}}</td>
<td>{{tunnel.two}}</td>
<td>{{tunnel.type}}</td>
<td>{{tunnel.group_id}}</td>
<td>{{tunnel.path}}</td>
</tr>
</table>
</div>
</div>
</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('ovTunnel', [])
.controller('OvTunnelCtrl',
['$log', '$scope', '$sce', 'FnService', 'TableBuilderService',
function ($log, $scope, $sce, fs, tbs) {
tbs.buildTable({
scope: $scope,
tag: 'tunnel'
});
$scope.$watch('tableData', function () {
if (!fs.isEmptyObject($scope.tableData)) {
$scope.tableData.forEach(function (tunnel) {
//tunnel.direction = $sce.trustAsHtml(tunnel.direction);
});
}
});
$log.log('OvTunnelCtrl has been created');
}]);
}());
......@@ -121,6 +121,7 @@
<script src="app/view/app/app.js"></script>
<script src="app/view/settings/settings.js"></script>
<script src="app/view/cluster/cluster.js"></script>
<script src="app/view/tunnel/tunnel.js"></script>
<!-- This is where contributed javascript will get injected -->
<!-- {INJECTED-JAVASCRIPT-START} -->
......@@ -138,6 +139,7 @@
<link rel="stylesheet" href="app/view/app/app.css">
<link rel="stylesheet" href="app/view/settings/settings.css">
<link rel="stylesheet" href="app/view/cluster/cluster.css">
<link rel="stylesheet" href="app/view/tunnel/tunnel.css">
<!-- This is where contributed stylesheets will get injected -->
<!-- {INJECTED-STYLESHEETS-START} -->
......