GUI -- VeilService Implemented and some changes to device view.

Change-Id: Iad496e2ca698213dce4da4d1894eee6e6fe5a874

@@ -24,26 +24,27 @@
     position: absolute;
     position: absolute;
     top: 0;
     top: 0;
     left: 0;
     left: 0;
-    padding: 60px;
 }
 }
 
 
 .light #veil {
 .light #veil {
     background-color: rgba(0,0,0,0.75);
     background-color: rgba(0,0,0,0.75);
 }
 }
 .dark #veil {
 .dark #veil {
-    background-color: rgba(255,255,255,0.5);
+    background-color: rgba(64,64,64,0.75);
+}
+
+#veil .msg {
+    position: absolute;
+    padding: 60px;
 }
 }
 
 
-#veil p {
+#veil .msg p {
     display: block;
     display: block;
-    margin: 8px 20px;
     font-size: 14pt;
     font-size: 14pt;
     font-style: italic;
     font-style: italic;
-}
-
-.light #veil p {
     color: #ddd;
     color: #ddd;
 }
 }
-.dark #veil p {
-    color: #404040;
+
+#veil svg .glyph {
+    fill: #222;
 }
 }

@@ -26,15 +26,13 @@
     // injected references
     // injected references
     var $log, fs;
     var $log, fs;
 
 
-    var veil, svg;
+    var veil, pdiv, svg;
 
 
     function show(msg) {
     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) {
         msg.forEach(function (line) {
-            veil.insert('p').text(line);
+            pdiv.append('p').text(line);
         });
         });
 
 
         veil.style('display', 'block');
         veil.style('display', 'block');
@@ -53,15 +51,24 @@
                 $log = _$log_;
                 $log = _$log_;
                 fs = _fs_;
                 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');
                 veil = d3.select('#veil');
+                pdiv = veil.append('div').classed('msg', true);
 
 
                 svg = veil.append('svg').attr({
                 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 {
                 return {
                     show: show,
                     show: show,

@@ -3,21 +3,17 @@
     <h2>Devices</h2>
     <h2>Devices</h2>
     <table class="summary-list"
     <table class="summary-list"
            onos-fixed-header
            onos-fixed-header
-           ng-style="setTableHW()">
+           ng-style="setTableHW()"
+           sort-callback="ctrl.sortCallback()">
         <thead>
         <thead>
             <tr>
             <tr>
                 <th colId="available"></th>
                 <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>
             </tr>
         </thead>
         </thead>
 
 

@@ -38,7 +38,7 @@
                 self.deviceData = data.devices;
                 self.deviceData = data.devices;
             });
             });
 
 
-            d3.selectAll('th').on('click', function(d) {
+            d3.selectAll('th').on('click', function () {
                 var thElem = d3.select(this);
                 var thElem = d3.select(this);
                 currCol.colId = thElem.attr('colId');
                 currCol.colId = thElem.attr('colId');