홍길동 / onos

Go to a project
Toggle navigation Toggle navigation pinning
Bri Prebilic Cole
264c5ec5 1 parent 40a398b9

GUI -- Adjusted height of tables in tabular views, added new and removed columns… 

… in Device View. Removed rounded bottom corners of tabular views, created table.css instead of using common.css

Change-Id: I77ff4c3abe051e1e4e566eb805e4b4a695f011ba
Inline Side-by-side
Showing 6 changed files with 161 additions and 97 deletions
......@@ -20,12 +20,18 @@ import com.fasterxml.jackson.databind.node.ObjectNode;
import com.google.common.collect.ImmutableSet;
import org.onosproject.mastership.MastershipService;
import org.onosproject.net.Device;
import org.onosproject.net.DeviceId;
import org.onosproject.net.Port;
import org.onosproject.net.device.DeviceService;
import org.onosproject.net.link.LinkService;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;
//import org.onosproject.net.Link;
//import java.util.Set;
/**
* Message handler for device view related messages.
*/
......@@ -46,7 +52,10 @@ public class DeviceViewMessageHandler extends AbstractTabularViewMessageHandler
DeviceService service = get(DeviceService.class);
MastershipService mastershipService = get(MastershipService.class);
TableRow[] rows = generateTableRows(service, mastershipService);
LinkService linkService = get(LinkService.class);
TableRow[] rows = generateTableRows(service,
mastershipService,
linkService);
RowComparator rc =
new RowComparator(sortCol, RowComparator.direction(sortDir));
Arrays.sort(rows, rc);
......@@ -58,10 +67,14 @@ public class DeviceViewMessageHandler extends AbstractTabularViewMessageHandler
}
private TableRow[] generateTableRows(DeviceService service,
MastershipService mastershipService) {
MastershipService mastershipService,
LinkService linkService) {
List<TableRow> list = new ArrayList<>();
for (Device dev : service.getDevices()) {
list.add(new DeviceTableRow(service, mastershipService, dev));
list.add(new DeviceTableRow(service,
mastershipService,
linkService,
dev));
}
return list.toArray(new TableRow[list.size()]);
}
......@@ -76,40 +89,70 @@ public class DeviceViewMessageHandler extends AbstractTabularViewMessageHandler
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 NUM_PORTS = "num_ports";
private static final String NUM_EGRESS_LINKS = "num_elinks";
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 MASTERID = "masterid";
private static final String CHASSISID = "chassisid";
private static final String SERIAL = "serial";
private static final String[] COL_IDS = {
ID, AVAILABLE, AVAILABLE_IID, TYPE_IID, ROLE,
MFR, HW, SW, SERIAL, PROTOCOL, CHASSISID, MASTERID
AVAILABLE, AVAILABLE_IID, TYPE_IID, ID,
NUM_PORTS, NUM_EGRESS_LINKS, MASTERID, MFR, HW, SW,
PROTOCOL, CHASSISID, SERIAL
};
private static final String ICON_ID_ONLINE = "deviceOnline";
private static final String ICON_ID_OFFLINE = "deviceOffline";
// TODO: use in details pane
// private String getPorts(List<Port> ports) {
// String formattedString = "";
// int numPorts = 0;
//
// for (Port p : ports) {
// numPorts++;
// formattedString += p.number().toString() + ", ";
// }
// return formattedString + "Total: " + numPorts;
// }
// TODO: use in details pane
// private String getEgressLinks(Set<Link> links) {
// String formattedString = "";
//
// for (Link l : links) {
// formattedString += l.dst().port().toString() + ", ";
// }
// return formattedString;
// }
// TODO: include "extra" backend information in device details pane
public DeviceTableRow(DeviceService service,
MastershipService ms,
LinkService ls,
Device d) {
boolean available = service.isAvailable(d.id());
String iconId = available ? ICON_ID_ONLINE : ICON_ID_OFFLINE;
DeviceId id = d.id();
List<Port> ports = service.getPorts(id);
// Set<Link> links = ls.getDeviceEgressLinks(id);
add(ID, d.id().toString());
add(ID, 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(SERIAL, d.serialNumber());
add(PROTOCOL, d.annotations().value(PROTOCOL));
add(CHASSISID, d.chassisId().toString());
add(NUM_PORTS, Integer.toString(ports.size()));
// add(NUM_EGRESS_LINKS, Integer.toString(links.size()));
// add(CHASSISID, d.chassisId().toString());
add(MASTERID, ms.getMasterFor(d.id()).toString());
}
......
......@@ -18,75 +18,3 @@
ONOS GUI -- common -- CSS file
*/
/* ------ for summary-list tables ------ */
table.summary-list {
margin: 0 20px 16px 12px;
font-size: 10pt;
border-spacing: 0;
}
table.summary-list tbody {
border-radius: 0 0 8px 8px;
}
table.summary-list td.nodata {
text-align: center;
font-style: italic;
}
.light table.summary-list tr:nth-child(even) {
background-color: #ddd;
}
.light table.summary-list tr:nth-child(odd) {
background-color: #eee;
}
.dark table.summary-list tr:nth-child(even) {
background-color: #333;
}
.dark table.summary-list tr:nth-child(odd) {
background-color: #444;
}
.light table.summary-list tr.selected {
background-color: deepskyblue;
}
.dark table.summary-list tr.selected {
background-color: #304860;
}
table.summary-list td,th {
padding: 6px 6px 6px 6px;
text-align: left;
}
table.summary-list th {
letter-spacing: 0.02em;
cursor: pointer;
}
table.summary-list th:first-child {
border-radius: 8px 0 0 0;
}
table.summary-list th:last-child {
border-radius: 0 8px 0 0;
}
.light table.summary-list th {
background-color: #bbb;
}
.dark table.summary-list th {
background-color: #222;
color: #ccc;
}
/* rows are selectable */
table.summary-list td {
cursor: pointer;
}
.dark table.summary-list td {
color: #ccc;
}
/* ------------------------------------ */
......
/*
* 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.
*/
/* ------ for summary-list tables ------ */
table.summary-list {
margin: 0 20px 16px 12px;
font-size: 10pt;
border-spacing: 0;
}
table.summary-list td.nodata {
text-align: center;
font-style: italic;
}
.light table.summary-list tr:nth-child(even) {
background-color: #ddd;
}
.light table.summary-list tr:nth-child(odd) {
background-color: #eee;
}
.dark table.summary-list tr:nth-child(even) {
background-color: #333;
}
.dark table.summary-list tr:nth-child(odd) {
background-color: #444;
}
.light table.summary-list tr.selected {
background-color: deepskyblue;
}
.dark table.summary-list tr.selected {
background-color: #304860;
}
table.summary-list td,
table.summary-list th {
padding: 6px;
text-align: left;
}
table.summary-list th {
letter-spacing: 0.02em;
cursor: pointer;
}
table.summary-list th:first-child {
border-radius: 8px 0 0 0;
}
table.summary-list th:last-child {
border-radius: 0 8px 0 0;
}
.light table.summary-list th {
background-color: #bbb;
}
.dark table.summary-list th {
background-color: #222;
color: #ccc;
}
/* rows are selectable */
table.summary-list td {
cursor: pointer;
}
.dark table.summary-list td {
color: #ccc;
}
......@@ -21,11 +21,14 @@
'use strict';
// injected refs
var $log, $window, fs, is;
var $log, $window, fs, mast, is;
// constants
var tableIconTdSize = 33,
bottomMargin = 200,
mastPdg = 8,
h2Pdg = 40,
thPdg = 12,
tbodyPdg = 5,
colWidth = 'col-width',
tableIcon = 'table-icon';
......@@ -49,7 +52,8 @@
// - icon width,
// - and default width
// assumes assigned width is not given to icons
// returns the width of all columns that are not icons have an assigned width
// returns the width of all columns that are not icons
// or have an assigned width
function getDefaultWidth(headers) {
var winWidth = fs.windowSize().width,
iconCols = 0,
......@@ -92,12 +96,17 @@
});
}
// get the size of the window and then subtract the extra space at the top
// to get the height of the table
function setTableHeight(thead, tbody) {
var winHeight = fs.windowSize().height;
var titleHeight = h2Pdg + fs.noPxStyle(d3.select('h2'), 'height'),
thHeight = thPdg + fs.noPxStyle(d3.select('th'), 'height'),
totalHeight = titleHeight + thHeight + tbodyPdg + mastPdg,
tableHeight = fs.windowSize(mast.mastHeight() + totalHeight).height;
thead.style('display', 'block');
tbody.style({'display': 'block',
'height': ((winHeight - bottomMargin) + 'px'),
'height': (tableHeight + 'px'),
'overflow': 'auto'
});
}
......@@ -150,11 +159,13 @@
}
angular.module('onosWidget')
.directive('onosFixedHeader', ['$window', 'FnService',
function (_$window_, _fs_) {
.directive('onosFixedHeader', ['$window', 'FnService', 'MastService',
function (_$window_, _fs_, _mast_) {
return function (scope, element) {
$window = _$window_;
fs = _fs_;
mast = _mast_;
var w = angular.element($window),
table = d3.select(element[0]),
thead = table.select('thead'),
......
......@@ -10,13 +10,12 @@
<th colId="available" class="table-icon" sortable></th>
<th colId="type" class="table-icon" sortable></th>
<th colId="id" sortable>Device ID </th>
<th colId="masterid" sortable>Master Instance </th>
<th colId="num_ports" sortable>Ports </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>
<th colId="masterid" sortable>Master Instance </th>
</tr>
</thead>
......@@ -36,13 +35,12 @@
<div icon icon-id="{{dev._iconid_type}}"></div>
</td>
<td>{{dev.id}}</td>
<td>{{dev.masterid}}</td>
<td>{{dev.num_ports}}</td>
<td>{{dev.mfr}}</td>
<td>{{dev.hw}}</td>
<td>{{dev.sw}}</td>
<td>{{dev.chassisid}}</td>
<td>{{dev.serial}}</td>
<td>{{dev.protocol}}</td>
<td>{{dev.masterid}}</td>
</tr>
</tbody>
</table>
......
......@@ -90,6 +90,7 @@
<link rel="stylesheet" href="app/fw/widget/button.css">
<link rel="stylesheet" href="app/fw/widget/toolbar.css">
<link rel="stylesheet" href="app/fw/widget/tooltip.css">
<link rel="stylesheet" href="app/fw/widget/table.css">
<!-- This is where contributed javascript will get injected -->
<!-- {INJECTED-JAVASCRIPT-START} -->
......