GUI -- Fixed host view row height CSS by adding an icon for host type.
Change-Id: Id090b494f3cd3aa754bc3b3db952d69f613a1fc2
diff --git a/web/gui/src/main/java/org/onosproject/ui/impl/HostViewMessageHandler.java b/web/gui/src/main/java/org/onosproject/ui/impl/HostViewMessageHandler.java
index a9b2b4a..689a266 100644
--- a/web/gui/src/main/java/org/onosproject/ui/impl/HostViewMessageHandler.java
+++ b/web/gui/src/main/java/org/onosproject/ui/impl/HostViewMessageHandler.java
@@ -18,6 +18,7 @@
import com.fasterxml.jackson.databind.node.ArrayNode;
import com.fasterxml.jackson.databind.node.ObjectNode;
import com.google.common.collect.ImmutableSet;
+import org.onosproject.net.AnnotationKeys;
import org.onosproject.net.Host;
import org.onosproject.net.HostLocation;
import org.onosproject.net.host.HostService;
@@ -26,6 +27,8 @@
import java.util.Arrays;
import java.util.List;
+import static com.google.common.base.Strings.isNullOrEmpty;
+
/**
* Message handler for host view related messages.
*/
@@ -69,19 +72,23 @@
*/
private static class HostTableRow extends AbstractTableRow {
+ private static final String TYPE_IID = "_iconid_type";
private static final String ID = "id";
private static final String MAC = "mac";
private static final String VLAN = "vlan";
private static final String IPS = "ips";
private static final String LOCATION = "location";
+ private static final String HOST_ICON_PREFIX = "hostIcon_";
+
private static final String[] COL_IDS = {
- ID, MAC, VLAN, IPS, LOCATION
+ TYPE_IID, ID, MAC, VLAN, IPS, LOCATION
};
public HostTableRow(Host h) {
HostLocation location = h.location();
+ add(TYPE_IID, getTypeIconId(h));
add(ID, h.id().toString());
add(MAC, h.mac().toString());
add(VLAN, h.vlan().toString());
@@ -90,6 +97,12 @@
location.port().toString()));
}
+ private String getTypeIconId(Host host) {
+ String hostType = host.annotations().value(AnnotationKeys.TYPE);
+ return HOST_ICON_PREFIX +
+ (isNullOrEmpty(hostType) ? "endstation" : hostType);
+ }
+
@Override
protected String[] columnIds() {
return COL_IDS;
diff --git a/web/gui/src/main/webapp/app/fw/svg/icon.css b/web/gui/src/main/webapp/app/fw/svg/icon.css
index ca9837b..3e8c433 100644
--- a/web/gui/src/main/webapp/app/fw/svg/icon.css
+++ b/web/gui/src/main/webapp/app/fw/svg/icon.css
@@ -65,16 +65,16 @@
}
-.light svg.embeddedIcon .icon.devIcon_SWITCH {
+.light table svg.embeddedIcon {
fill: #ccc;
}
-.dark svg.embeddedIcon .icon.devIcon_SWITCH {
+.dark table svg.embeddedIcon {
fill: #222;
}
-.light svg.embeddedIcon .icon.devIcon_SWITCH .glyph {
+.light table svg.embeddedIcon .glyph {
fill: #333;
}
-.dark svg.embeddedIcon .icon.devIcon_SWITCH .glyph {
+.dark table svg.embeddedIcon .glyph {
fill: #ccc;
}
diff --git a/web/gui/src/main/webapp/app/fw/svg/icon.js b/web/gui/src/main/webapp/app/fw/svg/icon.js
index b63cf64..d5e2a38 100644
--- a/web/gui/src/main/webapp/app/fw/svg/icon.js
+++ b/web/gui/src/main/webapp/app/fw/svg/icon.js
@@ -39,6 +39,11 @@
deviceOnline: 'checkMark',
deviceOffline: 'xMark',
devIcon_SWITCH: 'switch',
+ devIcon_ROADM: 'roadm',
+
+ hostIcon_endstation: 'endstation',
+ hostIcon_router: 'router',
+ hostIcon_bgpSpeaker: 'bgpSpeaker',
tableColSortAsc: 'triangleUp',
tableColSortDesc: 'triangleDown'
diff --git a/web/gui/src/main/webapp/app/view/host/host.css b/web/gui/src/main/webapp/app/view/host/host.css
index 94815f5..87174f9 100644
--- a/web/gui/src/main/webapp/app/view/host/host.css
+++ b/web/gui/src/main/webapp/app/view/host/host.css
@@ -19,5 +19,4 @@
*/
#ov-host td {
- height: 20px;
}
\ No newline at end of file
diff --git a/web/gui/src/main/webapp/app/view/host/host.html b/web/gui/src/main/webapp/app/view/host/host.html
index 3e88f6d..c7ac52a 100644
--- a/web/gui/src/main/webapp/app/view/host/host.html
+++ b/web/gui/src/main/webapp/app/view/host/host.html
@@ -7,6 +7,7 @@
sort-callback="sortCallback(requestParams)">
<thead>
<tr>
+ <th colId="type" class="table-icon" sortable></th>
<th colId="id" sortable>Host ID </th>
<th colId="mac" sortable>MAC Address </th>
<th colId="vlan" sortable>VLAN ID </th>
@@ -18,6 +19,9 @@
<tbody>
<tr ng-repeat="host in ctrl.hostData"
ng-repeat-done>
+ <td class="table-icon">
+ <div icon icon-id="{{host._iconid_type}}"></div>
+ </td>
<td>{{host.id}}</td>
<td>{{host.mac}}</td>
<td>{{host.vlan}}</td>