Changes For SNAP-3256:

 - Fixes for UI component alignemnets
 - Sink table border is removed
 - Cleanup and reformating
 - Adding Unit in Processing Time chart header

core/src/main/resources/org/apache/spark/ui/static/snappydata/snappy-commons.js

@@ -29,16 +29,14 @@ function isEmpty(str) {
  */
 function isNotApplicable(value) {
 
-  if(!isNaN(value)){
+  if (!isNaN(value)) {
     // if number, convert to string
     value = value.toString();
-  }else{
+  } else {
     // Remove extra spaces
     value = value.replace(/\s+/g, ' ');
   }
 
-
-
   switch (value) {
   case "-1":
   case "-1.0":
@@ -56,13 +54,59 @@ function isNotApplicable(value) {
  *
  */
 function applyNotApplicableCheck(value){
-  if(isNotApplicable(value)){
+  if (isNotApplicable(value)) {
     return "NA";
-  }else{
+  } else {
     return value;
   }
 }
 
+/*
+ * Utility function to convert given value in Bytes to KB or MB or GB or TB
+ *
+ */
+function convertSizeToHumanReadable(value) {
+  // UNITS VALUES IN BYTES
+  var ONE_KB = 1024;
+  var ONE_MB = 1024 * 1024;
+  var ONE_GB = 1024 * 1024 * 1024;
+  var ONE_TB = 1024 * 1024 * 1024 * 1024;
+  var ONE_PB = 1024 * 1024 * 1024 * 1024 * 1024;
+
+  var convertedValue = new Array();
+  var newValue = value;
+  var newUnit = "B";
+
+  if (value >= ONE_PB) {
+      // Convert to PBs
+      newValue = (value / ONE_PB);
+      newUnit = "PB";
+  } else if (value >= ONE_TB) {
+    // Convert to TBs
+    newValue = (value / ONE_TB);
+    newUnit = "TB";
+  } else if(value >= ONE_GB) {
+    // Convert to GBs
+    newValue = (value / ONE_GB);
+    newUnit = "GB";
+  } else if(value >= ONE_MB) {
+    // Convert to MBs
+    newValue = (value / ONE_MB);
+    newUnit = "MB";
+  } else if(value >= ONE_KB) {
+    // Convert to KBs
+    newValue = (value / ONE_KB);
+    newUnit = "KB";
+  }
+
+  // converted value
+  convertedValue.push(newValue.toFixed(2));
+  // B or KB or MB or GB or TB or PB
+  convertedValue.push(newUnit);
+
+  return convertedValue;
+}
+
 /*
 * Utility function to convert milliseconds value in human readable
 * form Eg "2 days 14 hrs 2 mins"
@@ -107,75 +151,29 @@ function formatDurationVerbose(ms) {
   }
 
   if(ms >= minute ) {
-    finalString = minString + " " + finalString;
+    finalString = minString + " " + secString;
   }
 
   if(ms >= hour ) {
-    finalString = hrString + " " + finalString;
+    finalString = hrString + " " + minString;
   }
 
   if(ms >= day ) {
     finalString = dayString + " " + hrString + " " + minString;
   }
 
   if(ms >= week ) {
-    finalString = wkString + " " + finalString;
+    finalString = wkString + " " + dayString + " " + hrString;
   }
 
   if(ms >= year ) {
-    finalString = yrString  + " " + wkString + " " + hrString;
+    finalString = yrString  + " " + wkString + " " + dayString;
   }
 
   return finalString;
 
 }
 
-/*
- * Utility function to convert given value in Bytes to KB or MB or GB or TB
- *
- */
-function convertSizeToHumanReadable(value){
-  // UNITS VALUES IN BYTES
-  var ONE_KB = 1024;
-  var ONE_MB = 1024 * 1024;
-  var ONE_GB = 1024 * 1024 * 1024;
-  var ONE_TB = 1024 * 1024 * 1024 * 1024;
-  var ONE_PB = 1024 * 1024 * 1024 * 1024 * 1024;
-
-  var convertedValue = new Array();
-  var newValue = value;
-  var newUnit = "B";
-
-  if (value >= ONE_PB) {
-      // Convert to PBs
-      newValue = (value / ONE_PB);
-      newUnit = "PB";
-  } else if (value >= ONE_TB) {
-    // Convert to TBs
-    newValue = (value / ONE_TB);
-    newUnit = "TB";
-  } else if(value >= ONE_GB){
-    // Convert to GBs
-    newValue = (value / ONE_GB);
-    newUnit = "GB";
-  } else if(value >= ONE_MB){
-    // Convert to MBs
-    newValue = (value / ONE_MB);
-    newUnit = "MB";
-  } else if(value >= ONE_KB){
-    // Convert to KBs
-    newValue = (value / ONE_KB);
-    newUnit = "KB";
-  }
-
-  // converted value
-  convertedValue.push(newValue.toFixed(2));
-  // B or KB or MB or GB or TB or PB
-  convertedValue.push(newUnit);
-
-  return convertedValue;
-}
-
 /*
  * Utility function to format given long date value to human readable string representation.
  *

core/src/main/resources/org/apache/spark/ui/static/snappydata/snappy-streaming.css

@@ -30,7 +30,6 @@
 .left-navigation-panel {
   float: left;
   width: 15%;
-  min-width: 250px;
   height: 100%;
   border: solid #B1B1B1 1px;
   background-color: #F1F1F1;
@@ -40,7 +39,6 @@
   width: 84%;
   height: 100%;
   float: right;
-  padding-left: 10px;
   border: solid #B1B1B1 1px;
   background-color: #F1F1F1;
 }

core/src/main/resources/org/apache/spark/ui/static/snappydata/snappy-streaming.js

@@ -44,12 +44,16 @@ function displayQueryStatistics(queryId) {
   $("#totalInputRows").html(queryStats.totalInputRows.toLocaleString(navigator.language));
 
   var qIRPSTrend = queryStats.inputRowsPerSecondTrend;
-  $("#currInputRowsPerSec").html(
-      qIRPSTrend[qIRPSTrend.length - 1].toLocaleString(navigator.language));
+  if (qIRPSTrend.length > 0) {
+    $("#currInputRowsPerSec").html(
+        qIRPSTrend[qIRPSTrend.length - 1].toLocaleString(navigator.language));
+  }
 
   var qPRPSTrend = queryStats.processedRowsPerSecondTrend;
-  $("#currProcessedRowsPerSec").html(
-      qPRPSTrend[qPRPSTrend.length - 1].toLocaleString(navigator.language));
+  if (qPRPSTrend.length > 0) {
+    $("#currProcessedRowsPerSec").html(
+        qPRPSTrend[qPRPSTrend.length - 1].toLocaleString(navigator.language));
+  }
 
   var qTPT = queryStats.totalProcessingTime;
   $("#totalProcessingTime").html(
@@ -228,7 +232,7 @@ function updateCharts(queryStats) {
   };
 
   processingTimeChartOptions = {
-    title: 'Processing Time',
+    title: 'Processing Time (ms)',
     // curveType: 'function',
     legend: { position: 'bottom' },
     colors:['#ff0000', '#2139EC'],

sql/core/src/main/scala/org/apache/spark/ui/SnappyStructuredStreamingPage.scala

@@ -308,7 +308,7 @@ private[ui] class SnappyStructuredStreamingPage(parent: SnappyStreamingTab)
         <div style="width: 84%;display: inline-block;border: 1px #8e8e8e solid;"></div>
       </div>
       <div id="sinkDetailsContainer" class="container-fluid details-section"
-           style="/*height: 100px;*/ border: 1px solid grey; padding: 10px; margin: 10px;">
+           style="margin: 10px;">
         { createSinkTable }
       </div>
     </div>