GUI -- VeilService Implemented and some changes to device view.
Change-Id: Iad496e2ca698213dce4da4d1894eee6e6fe5a874
diff --git a/web/gui/src/main/webapp/app/fw/layer/veil.css b/web/gui/src/main/webapp/app/fw/layer/veil.css
index 6411dbc..afef94a 100644
--- a/web/gui/src/main/webapp/app/fw/layer/veil.css
+++ b/web/gui/src/main/webapp/app/fw/layer/veil.css
@@ -24,26 +24,27 @@
position: absolute;
top: 0;
left: 0;
- padding: 60px;
}
.light #veil {
background-color: rgba(0,0,0,0.75);
}
.dark #veil {
- background-color: rgba(255,255,255,0.5);
+ background-color: rgba(64,64,64,0.75);
}
-#veil p {
+#veil .msg {
+ position: absolute;
+ padding: 60px;
+}
+
+#veil .msg p {
display: block;
- margin: 8px 20px;
font-size: 14pt;
font-style: italic;
-}
-
-.light #veil p {
color: #ddd;
}
-.dark #veil p {
- color: #404040;
+
+#veil svg .glyph {
+ fill: #222;
}
diff --git a/web/gui/src/main/webapp/app/fw/layer/veil.js b/web/gui/src/main/webapp/app/fw/layer/veil.js
index 7e1b43d..80c223d 100644
--- a/web/gui/src/main/webapp/app/fw/layer/veil.js
+++ b/web/gui/src/main/webapp/app/fw/layer/veil.js
@@ -26,15 +26,13 @@
// injected references
var $log, fs;
- var veil, svg;
+ var veil, pdiv, svg;
function show(msg) {
- veil.selectAll('p').remove();
-
- //veil.data(msg).enter().append('p').text(function (d) { return d; });
+ pdiv.selectAll('p').remove();
msg.forEach(function (line) {
- veil.insert('p').text(line);
+ pdiv.append('p').text(line);
});
veil.style('display', 'block');
@@ -53,15 +51,24 @@
$log = _$log_;
fs = _fs_;
+ var wSize = fs.windowSize(),
+ ww = wSize.width,
+ wh = wSize.height,
+ shrinkConst = wh-(wh * 0.7),
+ birdDim = wh-shrinkConst,
+ birdCenter = (ww / 2) - (birdDim / 2);
+
veil = d3.select('#veil');
+ pdiv = veil.append('div').classed('msg', true);
svg = veil.append('svg').attr({
- width: 500,
- height: 500,
- viewBox: '0 0 500 500'
- });
+ width: (ww + 'px'),
+ height: (wh + 'px'),
+ viewBox: '0 0 ' + ww + ' ' + wh
+ }).style('opacity', 0.2);
- gs.addGlyph(svg, 'bird', 400);
+ gs.addGlyph(svg, 'bird', (birdDim + 'px'),
+ false, [birdCenter, shrinkConst/2]);
return {
show: show,
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 7aaf8db..1ef4556 100644
--- a/web/gui/src/main/webapp/app/view/device/device.html
+++ b/web/gui/src/main/webapp/app/view/device/device.html
@@ -3,21 +3,17 @@
<h2>Devices</h2>
<table class="summary-list"
onos-fixed-header
- ng-style="setTableHW()">
+ ng-style="setTableHW()"
+ sort-callback="ctrl.sortCallback()">
<thead>
<tr>
<th colId="available"></th>
- <th colId="id">URI
- <div class="inline-icon"
- icon icon-id="tableColSortAsc"
- icon-size="10">
- </div>
- </th>
- <th colId="mfr">Vendor</th>
- <th colId="hw">Hardware Version</th>
- <th colId="sw">Software Version</th>
- <th colId="serial">Serial Number</th>
- <th colId="protocol">Protocol</th>
+ <th colId="id" sortable>URI</th>
+ <th colId="mfr" sortable>Vendor</th>
+ <th colId="hw" sortable>Hardware Version</th>
+ <th colId="sw" sortable>Software Version</th>
+ <th colId="serial" sortable>Serial Number</th>
+ <th colId="protocol" sortable>Protocol</th>
</tr>
</thead>
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 b97e9e7..b607936 100644
--- a/web/gui/src/main/webapp/app/view/device/device.js
+++ b/web/gui/src/main/webapp/app/view/device/device.js
@@ -38,7 +38,7 @@
self.deviceData = data.devices;
});
- d3.selectAll('th').on('click', function(d) {
+ d3.selectAll('th').on('click', function () {
var thElem = d3.select(this);
currCol.colId = thElem.attr('colId');