홍길동 / onos

Go to a project
Toggle navigation Toggle navigation pinning
Bri Prebilic Cole
Committed by Gerrit Code Review
ab582b86 1 parent 5819b0ad

GUI -- "State" is now an icon on Link and Cluster node views. - Icon mapping has… 

… generic names to be reused between views - Fixed broken table unit tests - Other minor cleanup

Change-Id: I7136cba15ad4fd185095617d790940d55b9f968f
Inline Side-by-side
Showing 19 changed files with 111 additions and 92 deletions
...@@ -81,7 +81,7 @@ public class ApplicationViewMessageHandler extends AbstractTabularViewMessageHan ...@@ -81,7 +81,7 @@ public class ApplicationViewMessageHandler extends AbstractTabularViewMessageHan
81 STATE, STATE_IID, ID, VERSION, ORIGIN, DESC 81 STATE, STATE_IID, ID, VERSION, ORIGIN, DESC
82 }; 82 };
83 83
84 - private static final String ICON_ID_ACTIVE = "appActive"; 84 + private static final String ICON_ID_ACTIVE = "active";
85 private static final String ICON_ID_INACTIVE = "appInactive"; 85 private static final String ICON_ID_INACTIVE = "appInactive";
86 86
87 87
......
...@@ -76,22 +76,27 @@ public class ClusterViewMessageHandler extends AbstractTabularViewMessageHandler ...@@ -76,22 +76,27 @@ public class ClusterViewMessageHandler extends AbstractTabularViewMessageHandler
76 private static final String ID = "id"; 76 private static final String ID = "id";
77 private static final String IP = "ip"; 77 private static final String IP = "ip";
78 private static final String TCP_PORT = "tcp"; 78 private static final String TCP_PORT = "tcp";
79 - private static final String STATE = "state"; 79 + private static final String STATE_IID = "_iconid_state";
80 private static final String UPDATED = "updated"; 80 private static final String UPDATED = "updated";
81 81
82 private static final String[] COL_IDS = { 82 private static final String[] COL_IDS = {
83 - ID, IP, TCP_PORT, STATE, UPDATED 83 + ID, IP, TCP_PORT, STATE_IID, UPDATED
84 }; 84 };
85 85
86 + private static final String ICON_ID_ONLINE = "active";
87 + private static final String ICON_ID_OFFLINE = "inactive";
88 +
86 public ControllerNodeTableRow(ClusterService service, ControllerNode n) { 89 public ControllerNodeTableRow(ClusterService service, ControllerNode n) {
87 NodeId id = n.id(); 90 NodeId id = n.id();
88 DateTime lastUpdated = service.getLastUpdated(id); 91 DateTime lastUpdated = service.getLastUpdated(id);
89 org.joda.time.format.DateTimeFormatter format = DateTimeFormat.longTime(); 92 org.joda.time.format.DateTimeFormatter format = DateTimeFormat.longTime();
93 + String iconId = (service.getState(id) == ControllerNode.State.ACTIVE) ?
94 + ICON_ID_ONLINE : ICON_ID_OFFLINE;
90 95
91 add(ID, id.toString()); 96 add(ID, id.toString());
92 add(IP, n.ip().toString()); 97 add(IP, n.ip().toString());
93 add(TCP_PORT, Integer.toString(n.tcpPort())); 98 add(TCP_PORT, Integer.toString(n.tcpPort()));
94 - add(STATE, service.getState(id).toString()); 99 + add(STATE_IID, iconId);
95 add(UPDATED, format.print(lastUpdated)); 100 add(UPDATED, format.print(lastUpdated));
96 } 101 }
97 102
......
...@@ -177,8 +177,8 @@ public class DeviceViewMessageHandler extends AbstractTabularViewMessageHandler ...@@ -177,8 +177,8 @@ public class DeviceViewMessageHandler extends AbstractTabularViewMessageHandler
177 PROTOCOL, CHASSIS_ID, SERIAL 177 PROTOCOL, CHASSIS_ID, SERIAL
178 }; 178 };
179 179
180 - private static final String ICON_ID_ONLINE = "deviceOnline"; 180 + private static final String ICON_ID_ONLINE = "active";
181 - private static final String ICON_ID_OFFLINE = "deviceOffline"; 181 + private static final String ICON_ID_OFFLINE = "inactive";
182 182
183 public DeviceTableRow(DeviceService service, 183 public DeviceTableRow(DeviceService service,
184 MastershipService ms, 184 MastershipService ms,
......
...@@ -21,6 +21,7 @@ import com.fasterxml.jackson.databind.node.ObjectNode; ...@@ -21,6 +21,7 @@ import com.fasterxml.jackson.databind.node.ObjectNode;
21 import com.google.common.collect.ImmutableSet; 21 import com.google.common.collect.ImmutableSet;
22 import com.google.common.collect.Maps; 22 import com.google.common.collect.Maps;
23 import org.onosproject.net.ConnectPoint; 23 import org.onosproject.net.ConnectPoint;
24 +import org.onosproject.net.Link;
24 import org.onosproject.net.LinkKey; 25 import org.onosproject.net.LinkKey;
25 import org.onosproject.net.link.LinkService; 26 import org.onosproject.net.link.LinkService;
26 import org.onosproject.ui.impl.TopologyViewMessageHandlerBase.BiLink; 27 import org.onosproject.ui.impl.TopologyViewMessageHandlerBase.BiLink;
...@@ -82,7 +83,7 @@ public class LinkViewMessageHandler extends AbstractTabularViewMessageHandler { ...@@ -82,7 +83,7 @@ public class LinkViewMessageHandler extends AbstractTabularViewMessageHandler {
82 private static final String ONE = "one"; 83 private static final String ONE = "one";
83 private static final String TWO = "two"; 84 private static final String TWO = "two";
84 private static final String TYPE = "type"; 85 private static final String TYPE = "type";
85 - private static final String STATE = "state"; 86 + private static final String STATE = "_iconid_state";
86 private static final String DIRECTION = "direction"; 87 private static final String DIRECTION = "direction";
87 private static final String DURABLE = "durable"; 88 private static final String DURABLE = "durable";
88 89
...@@ -90,28 +91,32 @@ public class LinkViewMessageHandler extends AbstractTabularViewMessageHandler { ...@@ -90,28 +91,32 @@ public class LinkViewMessageHandler extends AbstractTabularViewMessageHandler {
90 ONE, TWO, TYPE, STATE, DIRECTION, DURABLE 91 ONE, TWO, TYPE, STATE, DIRECTION, DURABLE
91 }; 92 };
92 93
94 + private static final String ICON_ID_ONLINE = "active";
95 + private static final String ICON_ID_OFFLINE = "inactive";
96 +
93 public LinkTableRow(BiLink link) { 97 public LinkTableRow(BiLink link) {
94 ConnectPoint src = link.one.src(); 98 ConnectPoint src = link.one.src();
95 ConnectPoint dst = link.one.dst(); 99 ConnectPoint dst = link.one.dst();
100 + linkState(link);
96 101
97 add(ONE, src.elementId().toString() + "/" + src.port().toString()); 102 add(ONE, src.elementId().toString() + "/" + src.port().toString());
98 add(TWO, dst.elementId().toString() + "/" + dst.port().toString()); 103 add(TWO, dst.elementId().toString() + "/" + dst.port().toString());
99 add(TYPE, linkType(link).toLowerCase()); 104 add(TYPE, linkType(link).toLowerCase());
100 - add(STATE, linkState(link).toLowerCase()); 105 + add(STATE, linkState(link));
101 - add(DIRECTION, link.two != null ? "A <-> B" : "A -> B"); 106 + add(DIRECTION, link.two != null ? "A <--> B" : "A --> B");
102 add(DURABLE, Boolean.toString(link.one.isDurable())); 107 add(DURABLE, Boolean.toString(link.one.isDurable()));
103 } 108 }
104 109
105 private String linkState(BiLink link) { 110 private String linkState(BiLink link) {
106 - return link.two == null || link.one.state() == link.two.state() ? 111 + return (link.one.state() == Link.State.ACTIVE ||
107 - link.one.state().toString() : 112 + link.two.state() == Link.State.ACTIVE) ?
108 - link.one.state().toString() + "/" + link.two.state().toString(); 113 + ICON_ID_ONLINE : ICON_ID_OFFLINE;
109 } 114 }
110 115
111 private String linkType(BiLink link) { 116 private String linkType(BiLink link) {
112 return link.two == null || link.one.type() == link.two.type() ? 117 return link.two == null || link.one.type() == link.two.type() ?
113 link.one.type().toString() : 118 link.one.type().toString() :
114 - link.one.type().toString() + "/" + link.two.type().toString(); 119 + link.one.type().toString() + " / " + link.two.type().toString();
115 } 120 }
116 121
117 @Override 122 @Override
......
...@@ -31,7 +31,7 @@ ...@@ -31,7 +31,7 @@
31 "devices": [{ 31 "devices": [{
32 "id": "of:0000000000000001", 32 "id": "of:0000000000000001",
33 "available": true, 33 "available": true,
34 - "_iconid_available": "deviceOnline", 34 + "_iconid_available": "active",
35 "role": "MASTER", 35 "role": "MASTER",
36 "mfr": "Nicira, Inc.", 36 "mfr": "Nicira, Inc.",
37 "hw": "Open vSwitch", 37 "hw": "Open vSwitch",
...@@ -44,7 +44,7 @@ ...@@ -44,7 +44,7 @@
44 { 44 {
45 "id": "of:0000000000000004", 45 "id": "of:0000000000000004",
46 "available": false, 46 "available": false,
47 - "_iconid_available": "deviceOffline", 47 + "_iconid_available": "inactive",
48 "role": "MASTER", 48 "role": "MASTER",
49 "mfr": "Nicira, Inc.", 49 "mfr": "Nicira, Inc.",
50 "hw": "Open vSwitch", 50 "hw": "Open vSwitch",
...@@ -57,7 +57,7 @@ ...@@ -57,7 +57,7 @@
57 { 57 {
58 "id": "of:0000000000000092", 58 "id": "of:0000000000000092",
59 "available": false, 59 "available": false,
60 - "_iconid_available": "deviceOffline", 60 + "_iconid_available": "inactive",
61 "role": "MASTER", 61 "role": "MASTER",
62 "mfr": "Nicira, Inc.", 62 "mfr": "Nicira, Inc.",
63 "hw": "Open vSwitch", 63 "hw": "Open vSwitch",
...@@ -70,7 +70,7 @@ ...@@ -70,7 +70,7 @@
70 { 70 {
71 "id": "of:0000000000000092", 71 "id": "of:0000000000000092",
72 "available": false, 72 "available": false,
73 - "_iconid_available": "deviceOffline", 73 + "_iconid_available": "inactive",
74 "role": "MASTER", 74 "role": "MASTER",
75 "mfr": "Nicira, Inc.", 75 "mfr": "Nicira, Inc.",
76 "hw": "Open vSwitch", 76 "hw": "Open vSwitch",
...@@ -83,7 +83,7 @@ ...@@ -83,7 +83,7 @@
83 { 83 {
84 "id": "of:0000000000000092", 84 "id": "of:0000000000000092",
85 "available": false, 85 "available": false,
86 - "_iconid_available": "deviceOffline", 86 + "_iconid_available": "inactive",
87 "role": "MASTER", 87 "role": "MASTER",
88 "mfr": "Nicira, Inc.", 88 "mfr": "Nicira, Inc.",
89 "hw": "Open vSwitch", 89 "hw": "Open vSwitch",
...@@ -96,7 +96,7 @@ ...@@ -96,7 +96,7 @@
96 { 96 {
97 "id": "of:0000000000000092", 97 "id": "of:0000000000000092",
98 "available": false, 98 "available": false,
99 - "_iconid_available": "deviceOffline", 99 + "_iconid_available": "inactive",
100 "role": "MASTER", 100 "role": "MASTER",
101 "mfr": "Nicira, Inc.", 101 "mfr": "Nicira, Inc.",
102 "hw": "Open vSwitch", 102 "hw": "Open vSwitch",
...@@ -109,7 +109,7 @@ ...@@ -109,7 +109,7 @@
109 { 109 {
110 "id": "of:0000000000000092", 110 "id": "of:0000000000000092",
111 "available": false, 111 "available": false,
112 - "_iconid_available": "deviceOffline", 112 + "_iconid_available": "inactive",
113 "role": "MASTER", 113 "role": "MASTER",
114 "mfr": "Nicira, Inc.", 114 "mfr": "Nicira, Inc.",
115 "hw": "Open vSwitch", 115 "hw": "Open vSwitch",
...@@ -122,7 +122,7 @@ ...@@ -122,7 +122,7 @@
122 { 122 {
123 "id": "of:0000000000000092", 123 "id": "of:0000000000000092",
124 "available": false, 124 "available": false,
125 - "_iconid_available": "deviceOffline", 125 + "_iconid_available": "inactive",
126 "role": "MASTER", 126 "role": "MASTER",
127 "mfr": "Nicira, Inc.", 127 "mfr": "Nicira, Inc.",
128 "hw": "Open vSwitch", 128 "hw": "Open vSwitch",
...@@ -135,7 +135,7 @@ ...@@ -135,7 +135,7 @@
135 { 135 {
136 "id": "of:0000000000000092", 136 "id": "of:0000000000000092",
137 "available": false, 137 "available": false,
138 - "_iconid_available": "deviceOffline", 138 + "_iconid_available": "inactive",
139 "role": "MASTER", 139 "role": "MASTER",
140 "mfr": "Nicira, Inc.", 140 "mfr": "Nicira, Inc.",
141 "hw": "Open vSwitch", 141 "hw": "Open vSwitch",
...@@ -148,7 +148,7 @@ ...@@ -148,7 +148,7 @@
148 { 148 {
149 "id": "of:0000000000000092", 149 "id": "of:0000000000000092",
150 "available": false, 150 "available": false,
151 - "_iconid_available": "deviceOffline", 151 + "_iconid_available": "inactive",
152 "role": "MASTER", 152 "role": "MASTER",
153 "mfr": "Nicira, Inc.", 153 "mfr": "Nicira, Inc.",
154 "hw": "Open vSwitch", 154 "hw": "Open vSwitch",
...@@ -161,7 +161,7 @@ ...@@ -161,7 +161,7 @@
161 { 161 {
162 "id": "of:0000000000000092", 162 "id": "of:0000000000000092",
163 "available": false, 163 "available": false,
164 - "_iconid_available": "deviceOffline", 164 + "_iconid_available": "inactive",
165 "role": "MASTER", 165 "role": "MASTER",
166 "mfr": "Nicira, Inc.", 166 "mfr": "Nicira, Inc.",
167 "hw": "Open vSwitch", 167 "hw": "Open vSwitch",
...@@ -174,7 +174,7 @@ ...@@ -174,7 +174,7 @@
174 { 174 {
175 "id": "of:0000000000000092", 175 "id": "of:0000000000000092",
176 "available": false, 176 "available": false,
177 - "_iconid_available": "deviceOffline", 177 + "_iconid_available": "inactive",
178 "role": "MASTER", 178 "role": "MASTER",
179 "mfr": "Nicira, Inc.", 179 "mfr": "Nicira, Inc.",
180 "hw": "Open vSwitch", 180 "hw": "Open vSwitch",
...@@ -187,7 +187,7 @@ ...@@ -187,7 +187,7 @@
187 { 187 {
188 "id": "of:0000000000000092", 188 "id": "of:0000000000000092",
189 "available": false, 189 "available": false,
190 - "_iconid_available": "deviceOffline", 190 + "_iconid_available": "inactive",
191 "role": "MASTER", 191 "role": "MASTER",
192 "mfr": "Nicira, Inc.", 192 "mfr": "Nicira, Inc.",
193 "hw": "Open vSwitch", 193 "hw": "Open vSwitch",
......
...@@ -81,9 +81,9 @@ ...@@ -81,9 +81,9 @@
81 var div = d3.select('#showIcons'); 81 var div = d3.select('#showIcons');
82 82
83 // show device online and offline icons 83 // show device online and offline icons
84 - icns.loadEmbeddedIcon(div, 'deviceOnline', 50); 84 + icns.loadEmbeddedIcon(div, 'active', 50);
85 div.append('span').style('padding-left', '15px'); 85 div.append('span').style('padding-left', '15px');
86 - icns.loadEmbeddedIcon(div, 'deviceOffline', 50); 86 + icns.loadEmbeddedIcon(div, 'inactive', 50);
87 87
88 var defs = d3.select('defs'); 88 var defs = d3.select('defs');
89 89
......
...@@ -41,11 +41,11 @@ ...@@ -41,11 +41,11 @@
41 fill-rule: evenodd; 41 fill-rule: evenodd;
42 } 42 }
43 43
44 - svg .icon.deviceOnline { 44 + svg .icon.active {
45 fill: green; 45 fill: green;
46 } 46 }
47 47
48 - svg .icon.deviceOffline { 48 + svg .icon.inactive {
49 fill: darkred; 49 fill: darkred;
50 } 50 }
51 51
...@@ -72,12 +72,12 @@ ...@@ -72,12 +72,12 @@
72 <tr> <th></th> <th>Two</th> <th>Three</th> </tr> 72 <tr> <th></th> <th>Two</th> <th>Three</th> </tr>
73 <tr> 73 <tr>
74 <td> 74 <td>
75 - <div icon icon-id="deviceOnline"> 75 + <div icon icon-id="active">
76 76
77 <!-- icon directive needs to inject the following structure --> 77 <!-- icon directive needs to inject the following structure -->
78 <!-- ------------------------------------------------ --> 78 <!-- ------------------------------------------------ -->
79 <svg width="20" height="20" viewBox="0 0 50 50"> 79 <svg width="20" height="20" viewBox="0 0 50 50">
80 - <g class="icon deviceOnline"> 80 + <g class="icon active">
81 <rect width="50" height="50" rx="10"></rect> 81 <rect width="50" height="50" rx="10"></rect>
82 <use class="glyph" xlink:href="#checkmark" width="50" height="50"></use> 82 <use class="glyph" xlink:href="#checkmark" width="50" height="50"></use>
83 </g> 83 </g>
...@@ -91,12 +91,12 @@ ...@@ -91,12 +91,12 @@
91 </tr> 91 </tr>
92 <tr> 92 <tr>
93 <td> 93 <td>
94 - <div icon icon-id="deviceOffline"> 94 + <div icon icon-id="inactive">
95 95
96 <!-- icon directive needs to inject the following structure --> 96 <!-- icon directive needs to inject the following structure -->
97 <!-- ------------------------------------------------ --> 97 <!-- ------------------------------------------------ -->
98 <svg width="20" height="20" viewBox="0 0 50 50"> 98 <svg width="20" height="20" viewBox="0 0 50 50">
99 - <g class="icon deviceOffline"> 99 + <g class="icon inactive">
100 <rect width="50" height="50" rx="10"></rect> 100 <rect width="50" height="50" rx="10"></rect>
101 <use class="glyph" xlink:href="#xmark" width="50" height="50"></use> 101 <use class="glyph" xlink:href="#xmark" width="50" height="50"></use>
102 </g> 102 </g>
......
...@@ -41,11 +41,11 @@ ...@@ -41,11 +41,11 @@
41 fill-rule: evenodd; 41 fill-rule: evenodd;
42 } 42 }
43 43
44 - svg .icon.deviceOnline { 44 + svg .icon.active {
45 fill: green; 45 fill: green;
46 } 46 }
47 47
48 - svg .icon.deviceOffline { 48 + svg .icon.inactive {
49 fill: darkred; 49 fill: darkred;
50 } 50 }
51 51
...@@ -72,12 +72,12 @@ ...@@ -72,12 +72,12 @@
72 <tr> <th></th> <th>Two</th> <th>Three</th> </tr> 72 <tr> <th></th> <th>Two</th> <th>Three</th> </tr>
73 <tr> 73 <tr>
74 <td> 74 <td>
75 - <div icon icon-id="deviceOnline"> 75 + <div icon icon-id="active">
76 76
77 <!-- icon directive needs to inject the following structure --> 77 <!-- icon directive needs to inject the following structure -->
78 <!-- ------------------------------------------------ --> 78 <!-- ------------------------------------------------ -->
79 <svg width="20" height="20" viewBox="0 0 50 50"> 79 <svg width="20" height="20" viewBox="0 0 50 50">
80 - <g class="icon deviceOnline"> 80 + <g class="icon active">
81 <rect width="50" height="50" rx="4"></rect> 81 <rect width="50" height="50" rx="4"></rect>
82 <use class="glyph" xlink:href="#ui" width="50" height="50"></use> 82 <use class="glyph" xlink:href="#ui" width="50" height="50"></use>
83 </g> 83 </g>
...@@ -91,12 +91,12 @@ ...@@ -91,12 +91,12 @@
91 </tr> 91 </tr>
92 <tr> 92 <tr>
93 <td> 93 <td>
94 - <div icon icon-id="deviceOffline"> 94 + <div icon icon-id="inactive">
95 95
96 <!-- icon directive needs to inject the following structure --> 96 <!-- icon directive needs to inject the following structure -->
97 <!-- ------------------------------------------------ --> 97 <!-- ------------------------------------------------ -->
98 <svg width="20" height="20" viewBox="0 0 50 50"> 98 <svg width="20" height="20" viewBox="0 0 50 50">
99 - <g class="icon deviceOffline"> 99 + <g class="icon inactive">
100 <rect width="50" height="50" rx="4"></rect> 100 <rect width="50" height="50" rx="4"></rect>
101 <use class="glyph" xlink:href="#ui" width="50" height="50"></use> 101 <use class="glyph" xlink:href="#ui" width="50" height="50"></use>
102 </g> 102 </g>
......
...@@ -57,10 +57,10 @@ svg.embeddedIcon .icon.appInactive .glyph { ...@@ -57,10 +57,10 @@ svg.embeddedIcon .icon.appInactive .glyph {
57 fill: none; 57 fill: none;
58 } 58 }
59 59
60 -.light svg.embeddedIcon .icon.appActive .glyph { 60 +.light svg.embeddedIcon .icon.active .glyph {
61 fill: green; 61 fill: green;
62 } 62 }
63 -.dark svg.embeddedIcon .icon.appActive .glyph { 63 +.dark svg.embeddedIcon .icon.active .glyph {
64 fill: #308C10; 64 fill: #308C10;
65 } 65 }
66 66
...@@ -78,15 +78,15 @@ svg.embeddedIcon .icon.appInactive .glyph { ...@@ -78,15 +78,15 @@ svg.embeddedIcon .icon.appInactive .glyph {
78 fill: #ccc; 78 fill: #ccc;
79 } 79 }
80 80
81 -.light svg.embeddedIcon .icon.deviceOnline .glyph { 81 +.light svg.embeddedIcon .icon.active .glyph {
82 fill: green; 82 fill: green;
83 } 83 }
84 -.light svg.embeddedIcon .icon.deviceOffline .glyph { 84 +.light svg.embeddedIcon .icon.inactive .glyph {
85 fill: darkred; 85 fill: darkred;
86 } 86 }
87 -.dark svg.embeddedIcon .icon.deviceOnline .glyph { 87 +.dark svg.embeddedIcon .icon.active .glyph {
88 fill: #308C10; 88 fill: #308C10;
89 } 89 }
90 -.dark svg.embeddedIcon .icon.deviceOffline .glyph { 90 +.dark svg.embeddedIcon .icon.inactive .glyph {
91 fill: #AD2D2D; 91 fill: #AD2D2D;
92 } 92 }
......
...@@ -29,28 +29,27 @@ ...@@ -29,28 +29,27 @@
29 // Maps icon ID to the glyph ID it uses. 29 // Maps icon ID to the glyph ID it uses.
30 // NOTE: icon ID maps to a CSS class for styling that icon 30 // NOTE: icon ID maps to a CSS class for styling that icon
31 var glyphMapping = { 31 var glyphMapping = {
32 - appActive: 'checkMark', 32 + active: 'checkMark',
33 + inactive: 'xMark',
34 +
35 + plus: 'plus',
36 + minus: 'minus',
37 + play: 'play',
38 + stop: 'stop',
39 +
40 + upArrow: 'triangleUp',
41 + downArrow: 'triangleDown',
42 +
33 appInactive: 'unknown', 43 appInactive: 'unknown',
34 - appPlus: 'plus',
35 - appMinus: 'minus',
36 - appPlay: 'play',
37 - appStop: 'stop',
38 44
39 - deviceOnline: 'checkMark',
40 - deviceOffline: 'xMark',
41 devIcon_SWITCH: 'switch', 45 devIcon_SWITCH: 'switch',
42 devIcon_ROADM: 'roadm', 46 devIcon_ROADM: 'roadm',
43 47
44 hostIcon_endstation: 'endstation', 48 hostIcon_endstation: 'endstation',
45 hostIcon_router: 'router', 49 hostIcon_router: 'router',
46 - hostIcon_bgpSpeaker: 'bgpSpeaker', 50 + hostIcon_bgpSpeaker: 'bgpSpeaker'
47 -
48 - tableColSortAsc: 'triangleUp',
49 - tableColSortDesc: 'triangleDown'
50 }; 51 };
51 52
52 -
53 -
54 function ensureIconLibDefs() { 53 function ensureIconLibDefs() {
55 var body = d3.select('body'), 54 var body = d3.select('body'),
56 svg = body.select('svg#IconLibDefs'), 55 svg = body.select('svg#IconLibDefs'),
...@@ -187,13 +186,13 @@ ...@@ -187,13 +186,13 @@
187 function createSortIcon() { 186 function createSortIcon() {
188 function sortAsc(div) { 187 function sortAsc(div) {
189 div.style('display', 'inline-block'); 188 div.style('display', 'inline-block');
190 - loadEmbeddedIcon(div, 'tableColSortAsc', 10); 189 + loadEmbeddedIcon(div, 'upArrow', 10);
191 div.classed('tableColSort', true); 190 div.classed('tableColSort', true);
192 } 191 }
193 192
194 function sortDesc(div) { 193 function sortDesc(div) {
195 div.style('display', 'inline-block'); 194 div.style('display', 'inline-block');
196 - loadEmbeddedIcon(div, 'tableColSortDesc', 10); 195 + loadEmbeddedIcon(div, 'downArrow', 10);
197 div.classed('tableColSort', true); 196 div.classed('tableColSort', true);
198 } 197 }
199 198
......
...@@ -125,12 +125,12 @@ ...@@ -125,12 +125,12 @@
125 currCol.colId = thElem.attr('colId'); 125 currCol.colId = thElem.attr('colId');
126 126
127 if (currCol.colId === prevCol.colId) { 127 if (currCol.colId === prevCol.colId) {
128 - (currCol.icon === 'tableColSortDesc') ? 128 + (currCol.icon === 'downArrow') ?
129 - currCol.icon = 'tableColSortAsc' : 129 + currCol.icon = 'upArrow' :
130 - currCol.icon = 'tableColSortDesc'; 130 + currCol.icon = 'downArrow';
131 prevCol.icon = currCol.icon; 131 prevCol.icon = currCol.icon;
132 } else { 132 } else {
133 - currCol.icon = 'tableColSortAsc'; 133 + currCol.icon = 'upArrow';
134 prevCol.icon = 'tableColSortNone'; 134 prevCol.icon = 'tableColSortNone';
135 } 135 }
136 136
...@@ -138,7 +138,7 @@ ...@@ -138,7 +138,7 @@
138 api.sortNone(div); 138 api.sortNone(div);
139 div = thElem.append('div'); 139 div = thElem.append('div');
140 140
141 - if (currCol.icon === 'tableColSortAsc') { 141 + if (currCol.icon === 'upArrow') {
142 api.sortAsc(div); 142 api.sortAsc(div);
143 } else { 143 } else {
144 api.sortDesc(div); 144 api.sortDesc(div);
...@@ -156,7 +156,7 @@ ...@@ -156,7 +156,7 @@
156 function sortRequestParams() { 156 function sortRequestParams() {
157 return { 157 return {
158 sortCol: currCol.colId, 158 sortCol: currCol.colId,
159 - sortDir: (currCol.icon === 'tableColSortAsc' ? 'asc' : 'desc') 159 + sortDir: (currCol.icon === 'upArrow' ? 'asc' : 'desc')
160 }; 160 };
161 } 161 }
162 162
......
...@@ -3,10 +3,10 @@ ...@@ -3,10 +3,10 @@
3 <div> 3 <div>
4 <h2>Applications ({{ctrl.tableData.length}} total)</h2> 4 <h2>Applications ({{ctrl.tableData.length}} total)</h2>
5 <div class="ctrl-btns"> 5 <div class="ctrl-btns">
6 - <div icon icon-size="36" icon-id="appPlus"></div> 6 + <div icon icon-size="36" icon-id="plus"></div>
7 - <div icon icon-size="36" icon-id="appMinus" class="disabled"></div> 7 + <div icon icon-size="36" icon-id="minus" class="disabled"></div>
8 - <div icon icon-size="36" icon-id="appPlay" class="disabled"></div> 8 + <div icon icon-size="36" icon-id="play" class="disabled"></div>
9 - <div icon icon-size="36" icon-id="appStop" class="disabled"></div> 9 + <div icon icon-size="36" icon-id="stop" class="disabled"></div>
10 </div> 10 </div>
11 </div> 11 </div>
12 <table class="summary-list" 12 <table class="summary-list"
......
...@@ -23,10 +23,10 @@ ...@@ -23,10 +23,10 @@
23 sort-callback="sortCallback(requestParams)"> 23 sort-callback="sortCallback(requestParams)">
24 <thead> 24 <thead>
25 <tr> 25 <tr>
26 + <th colId="_iconid_state" class="table-icon" sortable></th>
26 <th colId="id" sortable>ID </th> 27 <th colId="id" sortable>ID </th>
27 <th colId="ip" sortable>IP Address </th> 28 <th colId="ip" sortable>IP Address </th>
28 <th colId="tcp" sortable>TCP Port </th> 29 <th colId="tcp" sortable>TCP Port </th>
29 - <th colId="state" sortable>State </th>
30 <th colId="updated" sortable>Last Updated </th> 30 <th colId="updated" sortable>Last Updated </th>
31 </tr> 31 </tr>
32 </thead> 32 </thead>
...@@ -40,10 +40,12 @@ ...@@ -40,10 +40,12 @@
40 40
41 <tr ng-repeat="node in ctrl.tableData" 41 <tr ng-repeat="node in ctrl.tableData"
42 ng-repeat-done> 42 ng-repeat-done>
43 + <td class="table-icon">
44 + <div icon icon-id="{{node._iconid_state}}"></div>
45 + </td>
43 <td>{{node.id}}</td> 46 <td>{{node.id}}</td>
44 <td>{{node.ip}}</td> 47 <td>{{node.ip}}</td>
45 <td>{{node.tcp}}</td> 48 <td>{{node.tcp}}</td>
46 - <td>{{node.state}}</td>
47 <td>{{node.updated}}</td> 49 <td>{{node.updated}}</td>
48 </tr> 50 </tr>
49 </tbody> 51 </tbody>
......
...@@ -42,10 +42,10 @@ ...@@ -42,10 +42,10 @@
42 top: 0; 42 top: 0;
43 cursor: pointer; 43 cursor: pointer;
44 } 44 }
45 -.light .close-btn svg.embeddedIcon .icon.appPlus .glyph { 45 +.light .close-btn svg.embeddedIcon .icon.plus .glyph {
46 fill: #aaa; 46 fill: #aaa;
47 } 47 }
48 -.dark .close-btn svg.embeddedIcon .icon.appPlus .glyph { 48 +.dark .close-btn svg.embeddedIcon .icon.plus .glyph {
49 fill: #ccc; 49 fill: #ccc;
50 } 50 }
51 51
......
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
21 21
22 <tbody> 22 <tbody>
23 <tr ng-hide="ctrl.tableData.length"> 23 <tr ng-hide="ctrl.tableData.length">
24 - <td class="nodata" colspan="10"> 24 + <td class="nodata" colspan="9">
25 No Devices found 25 No Devices found
26 </td> 26 </td>
27 </tr> 27 </tr>
......
...@@ -56,7 +56,7 @@ ...@@ -56,7 +56,7 @@
56 ]; 56 ];
57 57
58 function addCloseBtn(div) { 58 function addCloseBtn(div) {
59 - is.loadEmbeddedIcon(div, 'appPlus', 30); 59 + is.loadEmbeddedIcon(div, 'plus', 30);
60 div.select('g').attr('transform', 'translate(25, 0) rotate(45)'); 60 div.select('g').attr('transform', 'translate(25, 0) rotate(45)');
61 61
62 div.on('click', function () { 62 div.on('click', function () {
......
...@@ -23,10 +23,10 @@ ...@@ -23,10 +23,10 @@
23 sort-callback="sortCallback(requestParams)"> 23 sort-callback="sortCallback(requestParams)">
24 <thead> 24 <thead>
25 <tr> 25 <tr>
26 + <th colId="_iconid_state" class="table-icon" sortable></th>
26 <th colId="one" sortable>Port 1 </th> 27 <th colId="one" sortable>Port 1 </th>
27 <th colId="two" sortable>Port 2 </th> 28 <th colId="two" sortable>Port 2 </th>
28 <th colId="type" sortable>Type </th> 29 <th colId="type" sortable>Type </th>
29 - <th colId="state" sortable>State </th>
30 <th colId="direction" sortable>Direction </th> 30 <th colId="direction" sortable>Direction </th>
31 <th colId="durable" sortable>Durable </th> 31 <th colId="durable" sortable>Durable </th>
32 </tr> 32 </tr>
...@@ -41,10 +41,12 @@ ...@@ -41,10 +41,12 @@
41 41
42 <tr ng-repeat="link in ctrl.tableData" 42 <tr ng-repeat="link in ctrl.tableData"
43 ng-repeat-done> 43 ng-repeat-done>
44 + <td class="table-icon">
45 + <div icon icon-id="{{link._iconid_state}}"></div>
46 + </td>
44 <td>{{link.one}}</td> 47 <td>{{link.one}}</td>
45 <td>{{link.two}}</td> 48 <td>{{link.two}}</td>
46 <td>{{link.type}}</td> 49 <td>{{link.type}}</td>
47 - <td>{{link.state}}</td>
48 <td>{{link.direction}}</td> 50 <td>{{link.direction}}</td>
49 <td>{{link.durable}}</td> 51 <td>{{link.durable}}</td>
50 </tr> 52 </tr>
......
...@@ -75,26 +75,26 @@ describe('factory: fw/svg/icon.js', function() { ...@@ -75,26 +75,26 @@ describe('factory: fw/svg/icon.js', function() {
75 75
76 it('should load an icon into a div', function () { 76 it('should load an icon into a div', function () {
77 expect(d3Elem.html()).toEqual(''); 77 expect(d3Elem.html()).toEqual('');
78 - is.loadIconByClass(d3Elem, 'deviceOnline'); 78 + is.loadIconByClass(d3Elem, 'active');
79 - verifyIconStructure('deviceOnline', '#checkMark'); 79 + verifyIconStructure('active', '#checkMark');
80 }); 80 });
81 81
82 it('should allow us to specify the icon size', function () { 82 it('should allow us to specify the icon size', function () {
83 expect(d3Elem.html()).toEqual(''); 83 expect(d3Elem.html()).toEqual('');
84 - is.loadIconByClass(d3Elem, 'deviceOffline', 32); 84 + is.loadIconByClass(d3Elem, 'inactive', 32);
85 - verifyIconStructure('deviceOffline', '#xMark', '32'); 85 + verifyIconStructure('inactive', '#xMark', '32');
86 }); 86 });
87 87
88 it('should verify triangleUp icon', function () { 88 it('should verify triangleUp icon', function () {
89 expect(d3Elem.html()).toEqual(''); 89 expect(d3Elem.html()).toEqual('');
90 - is.loadIconByClass(d3Elem, 'tableColSortAsc', 10); 90 + is.loadIconByClass(d3Elem, 'upArrow', 10);
91 - verifyIconStructure('tableColSortAsc', '#triangleUp', '10'); 91 + verifyIconStructure('upArrow', '#triangleUp', '10');
92 }); 92 });
93 93
94 it('should verify triangleDown icon', function () { 94 it('should verify triangleDown icon', function () {
95 expect(d3Elem.html()).toEqual(''); 95 expect(d3Elem.html()).toEqual('');
96 - is.loadIconByClass(d3Elem, 'tableColSortDesc', 10); 96 + is.loadIconByClass(d3Elem, 'downArrow', 10);
97 - verifyIconStructure('tableColSortDesc', '#triangleDown', '10'); 97 + verifyIconStructure('downArrow', '#triangleDown', '10');
98 }); 98 });
99 99
100 it('should verify no icon is displayed', function () { 100 it('should verify no icon is displayed', function () {
......
...@@ -39,6 +39,11 @@ describe('factory: fw/widget/table.js', function () { ...@@ -39,6 +39,11 @@ describe('factory: fw/widget/table.js', function () {
39 '</thead>' + 39 '</thead>' +
40 '<tbody>' + 40 '<tbody>' +
41 '<tr>' + 41 '<tr>' +
42 + '<td colspan="4">' +
43 + 'No Devices found' +
44 + '</td>' +
45 + '</tr>' +
46 + '<tr>' +
42 '<td class="table-icon">' + 47 '<td class="table-icon">' +
43 '<div icon icon-id="{{dev._iconid_available}}">' + 48 '<div icon icon-id="{{dev._iconid_available}}">' +
44 '</div>' + 49 '</div>' +
...@@ -147,7 +152,7 @@ describe('factory: fw/widget/table.js', function () { ...@@ -147,7 +152,7 @@ describe('factory: fw/widget/table.js', function () {
147 152
148 function verifyColWidth() { 153 function verifyColWidth() {
149 var winWidth = fs.windowSize().width, 154 var winWidth = fs.windowSize().width,
150 - colWidth, thElems, tdElem; 155 + colWidth, thElems, tr, tdElem;
151 156
152 colWidth = Math.floor(winWidth / numTestElems); 157 colWidth = Math.floor(winWidth / numTestElems);
153 158
...@@ -155,7 +160,8 @@ describe('factory: fw/widget/table.js', function () { ...@@ -155,7 +160,8 @@ describe('factory: fw/widget/table.js', function () {
155 160
156 angular.forEach(thElems, function (thElem, i) { 161 angular.forEach(thElems, function (thElem, i) {
157 thElem = angular.element(thElems[i]); 162 thElem = angular.element(thElems[i]);
158 - tdElem = angular.element(tbody.find('td').eq(i)); 163 + tr = angular.element(tbody.find('tr').eq(1));
164 + tdElem = angular.element(tr.find('td').eq(i));
159 var custWidth = thElem.attr('col-width'); 165 var custWidth = thElem.attr('col-width');
160 166
161 if (custWidth) { 167 if (custWidth) {
...@@ -193,7 +199,7 @@ describe('factory: fw/widget/table.js', function () { ...@@ -193,7 +199,7 @@ describe('factory: fw/widget/table.js', function () {
193 div = currentTh.find('div'); 199 div = currentTh.find('div');
194 expect(div.html()).toBe('<svg class="embeddedIcon" ' + 200 expect(div.html()).toBe('<svg class="embeddedIcon" ' +
195 'width="10" height="10" viewBox="0 0 50 50">' + 201 'width="10" height="10" viewBox="0 0 50 50">' +
196 - '<g class="icon tableColSortAsc">' + 202 + '<g class="icon upArrow">' +
197 '<rect width="50" height="50" rx="5"></rect>' + 203 '<rect width="50" height="50" rx="5"></rect>' +
198 '<use width="50" height="50" class="glyph" ' + 204 '<use width="50" height="50" class="glyph" ' +
199 'xmlns:xlink="http://www.w3.org/1999/xlink" ' + 205 'xmlns:xlink="http://www.w3.org/1999/xlink" ' +
...@@ -204,7 +210,7 @@ describe('factory: fw/widget/table.js', function () { ...@@ -204,7 +210,7 @@ describe('factory: fw/widget/table.js', function () {
204 div = currentTh.find('div'); 210 div = currentTh.find('div');
205 expect(div.html()).toBe('<svg class="embeddedIcon" ' + 211 expect(div.html()).toBe('<svg class="embeddedIcon" ' +
206 'width="10" height="10" viewBox="0 0 50 50">' + 212 'width="10" height="10" viewBox="0 0 50 50">' +
207 - '<g class="icon tableColSortDesc">' + 213 + '<g class="icon downArrow">' +
208 '<rect width="50" height="50" rx="5"></rect>' + 214 '<rect width="50" height="50" rx="5"></rect>' +
209 '<use width="50" height="50" class="glyph" ' + 215 '<use width="50" height="50" class="glyph" ' +
210 'xmlns:xlink="http://www.w3.org/1999/xlink" ' + 216 'xmlns:xlink="http://www.w3.org/1999/xlink" ' +
...@@ -222,7 +228,7 @@ describe('factory: fw/widget/table.js', function () { ...@@ -222,7 +228,7 @@ describe('factory: fw/widget/table.js', function () {
222 div = currentTh.children(); 228 div = currentTh.children();
223 expect(div.html()).toBe('<svg class="embeddedIcon" ' + 229 expect(div.html()).toBe('<svg class="embeddedIcon" ' +
224 'width="10" height="10" viewBox="0 0 50 50">' + 230 'width="10" height="10" viewBox="0 0 50 50">' +
225 - '<g class="icon tableColSortAsc">' + 231 + '<g class="icon upArrow">' +
226 '<rect width="50" height="50" rx="5"></rect>' + 232 '<rect width="50" height="50" rx="5"></rect>' +
227 '<use width="50" height="50" class="glyph" ' + 233 '<use width="50" height="50" class="glyph" ' +
228 'xmlns:xlink="http://www.w3.org/1999/xlink" ' + 234 'xmlns:xlink="http://www.w3.org/1999/xlink" ' +
......