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
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 872c476..6ade7c7 100644
--- a/web/gui/src/main/webapp/app/fw/svg/icon.css
+++ b/web/gui/src/main/webapp/app/fw/svg/icon.css
@@ -57,10 +57,10 @@
fill: none;
}
-.light svg.embeddedIcon .icon.appActive .glyph {
+.light svg.embeddedIcon .icon.active .glyph {
fill: green;
}
-.dark svg.embeddedIcon .icon.appActive .glyph {
+.dark svg.embeddedIcon .icon.active .glyph {
fill: #308C10;
}
@@ -78,15 +78,15 @@
fill: #ccc;
}
-.light svg.embeddedIcon .icon.deviceOnline .glyph {
+.light svg.embeddedIcon .icon.active .glyph {
fill: green;
}
-.light svg.embeddedIcon .icon.deviceOffline .glyph {
+.light svg.embeddedIcon .icon.inactive .glyph {
fill: darkred;
}
-.dark svg.embeddedIcon .icon.deviceOnline .glyph {
+.dark svg.embeddedIcon .icon.active .glyph {
fill: #308C10;
}
-.dark svg.embeddedIcon .icon.deviceOffline .glyph {
+.dark svg.embeddedIcon .icon.inactive .glyph {
fill: #AD2D2D;
}
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 d5e2a38..e7e40f0 100644
--- a/web/gui/src/main/webapp/app/fw/svg/icon.js
+++ b/web/gui/src/main/webapp/app/fw/svg/icon.js
@@ -29,28 +29,27 @@
// Maps icon ID to the glyph ID it uses.
// NOTE: icon ID maps to a CSS class for styling that icon
var glyphMapping = {
- appActive: 'checkMark',
- appInactive: 'unknown',
- appPlus: 'plus',
- appMinus: 'minus',
- appPlay: 'play',
- appStop: 'stop',
+ active: 'checkMark',
+ inactive: 'xMark',
- deviceOnline: 'checkMark',
- deviceOffline: 'xMark',
+ plus: 'plus',
+ minus: 'minus',
+ play: 'play',
+ stop: 'stop',
+
+ upArrow: 'triangleUp',
+ downArrow: 'triangleDown',
+
+ appInactive: 'unknown',
+
devIcon_SWITCH: 'switch',
devIcon_ROADM: 'roadm',
hostIcon_endstation: 'endstation',
hostIcon_router: 'router',
- hostIcon_bgpSpeaker: 'bgpSpeaker',
-
- tableColSortAsc: 'triangleUp',
- tableColSortDesc: 'triangleDown'
+ hostIcon_bgpSpeaker: 'bgpSpeaker'
};
-
-
function ensureIconLibDefs() {
var body = d3.select('body'),
svg = body.select('svg#IconLibDefs'),
@@ -187,13 +186,13 @@
function createSortIcon() {
function sortAsc(div) {
div.style('display', 'inline-block');
- loadEmbeddedIcon(div, 'tableColSortAsc', 10);
+ loadEmbeddedIcon(div, 'upArrow', 10);
div.classed('tableColSort', true);
}
function sortDesc(div) {
div.style('display', 'inline-block');
- loadEmbeddedIcon(div, 'tableColSortDesc', 10);
+ loadEmbeddedIcon(div, 'downArrow', 10);
div.classed('tableColSort', true);
}
diff --git a/web/gui/src/main/webapp/app/fw/widget/table.js b/web/gui/src/main/webapp/app/fw/widget/table.js
index 81edaa0..2a358c7 100644
--- a/web/gui/src/main/webapp/app/fw/widget/table.js
+++ b/web/gui/src/main/webapp/app/fw/widget/table.js
@@ -125,12 +125,12 @@
currCol.colId = thElem.attr('colId');
if (currCol.colId === prevCol.colId) {
- (currCol.icon === 'tableColSortDesc') ?
- currCol.icon = 'tableColSortAsc' :
- currCol.icon = 'tableColSortDesc';
+ (currCol.icon === 'downArrow') ?
+ currCol.icon = 'upArrow' :
+ currCol.icon = 'downArrow';
prevCol.icon = currCol.icon;
} else {
- currCol.icon = 'tableColSortAsc';
+ currCol.icon = 'upArrow';
prevCol.icon = 'tableColSortNone';
}
@@ -138,7 +138,7 @@
api.sortNone(div);
div = thElem.append('div');
- if (currCol.icon === 'tableColSortAsc') {
+ if (currCol.icon === 'upArrow') {
api.sortAsc(div);
} else {
api.sortDesc(div);
@@ -156,7 +156,7 @@
function sortRequestParams() {
return {
sortCol: currCol.colId,
- sortDir: (currCol.icon === 'tableColSortAsc' ? 'asc' : 'desc')
+ sortDir: (currCol.icon === 'upArrow' ? 'asc' : 'desc')
};
}
diff --git a/web/gui/src/main/webapp/app/view/app/app.html b/web/gui/src/main/webapp/app/view/app/app.html
index e86c34c..45f9cbc 100644
--- a/web/gui/src/main/webapp/app/view/app/app.html
+++ b/web/gui/src/main/webapp/app/view/app/app.html
@@ -3,10 +3,10 @@
<div>
<h2>Applications ({{ctrl.tableData.length}} total)</h2>
<div class="ctrl-btns">
- <div icon icon-size="36" icon-id="appPlus"></div>
- <div icon icon-size="36" icon-id="appMinus" class="disabled"></div>
- <div icon icon-size="36" icon-id="appPlay" class="disabled"></div>
- <div icon icon-size="36" icon-id="appStop" class="disabled"></div>
+ <div icon icon-size="36" icon-id="plus"></div>
+ <div icon icon-size="36" icon-id="minus" class="disabled"></div>
+ <div icon icon-size="36" icon-id="play" class="disabled"></div>
+ <div icon icon-size="36" icon-id="stop" class="disabled"></div>
</div>
</div>
<table class="summary-list"
diff --git a/web/gui/src/main/webapp/app/view/cluster/cluster.html b/web/gui/src/main/webapp/app/view/cluster/cluster.html
index b6c015b..c758ed7 100644
--- a/web/gui/src/main/webapp/app/view/cluster/cluster.html
+++ b/web/gui/src/main/webapp/app/view/cluster/cluster.html
@@ -23,10 +23,10 @@
sort-callback="sortCallback(requestParams)">
<thead>
<tr>
+ <th colId="_iconid_state" class="table-icon" sortable></th>
<th colId="id" sortable>ID </th>
<th colId="ip" sortable>IP Address </th>
<th colId="tcp" sortable>TCP Port </th>
- <th colId="state" sortable>State </th>
<th colId="updated" sortable>Last Updated </th>
</tr>
</thead>
@@ -40,10 +40,12 @@
<tr ng-repeat="node in ctrl.tableData"
ng-repeat-done>
+ <td class="table-icon">
+ <div icon icon-id="{{node._iconid_state}}"></div>
+ </td>
<td>{{node.id}}</td>
<td>{{node.ip}}</td>
<td>{{node.tcp}}</td>
- <td>{{node.state}}</td>
<td>{{node.updated}}</td>
</tr>
</tbody>
diff --git a/web/gui/src/main/webapp/app/view/device/device.css b/web/gui/src/main/webapp/app/view/device/device.css
index 09b729b..25a6245 100644
--- a/web/gui/src/main/webapp/app/view/device/device.css
+++ b/web/gui/src/main/webapp/app/view/device/device.css
@@ -42,10 +42,10 @@
top: 0;
cursor: pointer;
}
-.light .close-btn svg.embeddedIcon .icon.appPlus .glyph {
+.light .close-btn svg.embeddedIcon .icon.plus .glyph {
fill: #aaa;
}
-.dark .close-btn svg.embeddedIcon .icon.appPlus .glyph {
+.dark .close-btn svg.embeddedIcon .icon.plus .glyph {
fill: #ccc;
}
diff --git a/web/gui/src/main/webapp/app/view/device/device.html b/web/gui/src/main/webapp/app/view/device/device.html
index 9cfa091..849e666 100644
--- a/web/gui/src/main/webapp/app/view/device/device.html
+++ b/web/gui/src/main/webapp/app/view/device/device.html
@@ -21,7 +21,7 @@
<tbody>
<tr ng-hide="ctrl.tableData.length">
- <td class="nodata" colspan="10">
+ <td class="nodata" colspan="9">
No Devices found
</td>
</tr>
diff --git a/web/gui/src/main/webapp/app/view/device/device.js b/web/gui/src/main/webapp/app/view/device/device.js
index 29567bc..c5b9828 100644
--- a/web/gui/src/main/webapp/app/view/device/device.js
+++ b/web/gui/src/main/webapp/app/view/device/device.js
@@ -56,7 +56,7 @@
];
function addCloseBtn(div) {
- is.loadEmbeddedIcon(div, 'appPlus', 30);
+ is.loadEmbeddedIcon(div, 'plus', 30);
div.select('g').attr('transform', 'translate(25, 0) rotate(45)');
div.on('click', function () {
diff --git a/web/gui/src/main/webapp/app/view/link/link.html b/web/gui/src/main/webapp/app/view/link/link.html
index e8646b7..b82b4fb4 100644
--- a/web/gui/src/main/webapp/app/view/link/link.html
+++ b/web/gui/src/main/webapp/app/view/link/link.html
@@ -23,10 +23,10 @@
sort-callback="sortCallback(requestParams)">
<thead>
<tr>
+ <th colId="_iconid_state" class="table-icon" sortable></th>
<th colId="one" sortable>Port 1 </th>
<th colId="two" sortable>Port 2 </th>
<th colId="type" sortable>Type </th>
- <th colId="state" sortable>State </th>
<th colId="direction" sortable>Direction </th>
<th colId="durable" sortable>Durable </th>
</tr>
@@ -41,10 +41,12 @@
<tr ng-repeat="link in ctrl.tableData"
ng-repeat-done>
+ <td class="table-icon">
+ <div icon icon-id="{{link._iconid_state}}"></div>
+ </td>
<td>{{link.one}}</td>
<td>{{link.two}}</td>
<td>{{link.type}}</td>
- <td>{{link.state}}</td>
<td>{{link.direction}}</td>
<td>{{link.durable}}</td>
</tr>