Make two graphs close

Author: zsxwing

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

@@ -44,3 +44,11 @@
 .bar rect:hover {
   fill: orange;
 }
+
+.timeline {
+  width: 500px;
+}
+
+.distribution {
+  width: 300px;
+}

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

@@ -50,22 +50,16 @@ function hideGraphTooltip() {
  * @param unitY the unit of Y axis
  */
 function drawTimeline(id, data, minX, maxX, minY, maxY, unitY) {
-    var margin = {top: 20, right: 30, bottom: 30, left: 50};
+    d3.select(d3.select(id).node().parentNode).style("padding", "8px 0 8px 8px").style("border-right", "0px solid white");
+    var margin = {top: 20, right: 27, bottom: 30, left: 50};
     var width = 500 - margin.left - margin.right;
     var height = 150 - margin.top - margin.bottom;
 
     var x = d3.time.scale().domain([minX, maxX]).range([0, width]);
     var y = d3.scale.linear().domain([minY, maxY]).range([height, 0]);
 
     var timeFormat = d3.time.format("%H:%M:%S")
-    var xAxis = d3.svg.axis().scale(x).orient("bottom").ticks(10)
-                    .tickFormat(function(d) {
-                        if (d.getTime() == minX || d.getTime() == maxX) {
-                            return timeFormat(d);
-                        } else {
-                            return "x";
-                        }
-                    });
+    var xAxis = d3.svg.axis().scale(x).orient("bottom").tickFormat(timeFormat);
     var yAxis = d3.svg.axis().scale(y).orient("left").ticks(5);
 
     var line = d3.svg.line()
@@ -136,7 +130,8 @@ function drawTimeline(id, data, minX, maxX, minY, maxY, unitY) {
  * @param unitY the unit of Y axis
  */
 function drawDistribution(id, values, minY, maxY, unitY) {
-    var margin = {top: 20, right: 30, bottom: 30, left: 50};
+    d3.select(d3.select(id).node().parentNode).style("padding", "8px 8px 8px 0").style("border-left", "0px solid white");
+    var margin = {top: 20, right: 30, bottom: 30, left: 10};
     var width = 300 - margin.left - margin.right;
     var height = 150 - margin.top - margin.bottom;
 
@@ -152,7 +147,7 @@ function drawDistribution(id, values, minY, maxY, unitY) {
         .range([0, width]);
 
     var xAxis = d3.svg.axis().scale(x).orient("bottom").ticks(5);
-    var yAxis = d3.svg.axis().scale(y).orient("left").ticks(5);
+    var yAxis = d3.svg.axis().scale(y).orient("left").ticks(0).tickFormat(function(d) { return ""; });
 
     var svg = d3.select(id).append("svg")
         .attr("width", width + margin.left + margin.right)

streaming/src/main/scala/org/apache/spark/streaming/ui/StreamingPage.scala

@@ -260,8 +260,8 @@ private[ui] class StreamingPage(parent: StreamingTab)
             </div>
             <div>Avg: {eventRateForAllReceivers.avg.map(_.formatted("%.2f")).getOrElse(emptyCell)} events/sec</div>
           </td>
-          <td>{timelineDataForEventRateOfAllReceivers}</td>
-          <td>{distributionDataForEventRateOfAllReceivers}</td>
+          <td class="timeline">{timelineDataForEventRateOfAllReceivers}</td>
+          <td class="distribution">{distributionDataForEventRateOfAllReceivers}</td>
         </tr>
         <tr id="inputs-table" style="display: none;" >
           <td colspan="3">
@@ -273,24 +273,24 @@ private[ui] class StreamingPage(parent: StreamingTab)
             <div><strong>Scheduling Delay</strong></div>
             <div>Avg: {formatDurationOption(schedulingDelay.avg)}</div>
           </td>
-          <td>{timelineDataForSchedulingDelay}</td>
-          <td>{distributionDataForSchedulingDelay}</td>
+          <td class="timeline">{timelineDataForSchedulingDelay}</td>
+          <td class="distribution">{distributionDataForSchedulingDelay}</td>
         </tr>
         <tr>
           <td style="vertical-align: middle;">
             <div><strong>Processing Time</strong></div>
             <div>Avg: {formatDurationOption(processingTime.avg)}</div>
           </td>
-          <td>{timelineDataForProcessingTime}</td>
-          <td>{distributionDataForProcessingTime}</td>
+          <td class="timeline">{timelineDataForProcessingTime}</td>
+          <td class="distribution">{distributionDataForProcessingTime}</td>
         </tr>
         <tr>
           <td style="vertical-align: middle;">
             <div><strong>Total Delay</strong></div>
             <div>Avg: {formatDurationOption(totalDelay.avg)}</div>
           </td>
-          <td>{timelineDataForTotalDelay}</td>
-          <td>{distributionDataForTotalDelay}</td>
+          <td class="timeline">{timelineDataForTotalDelay}</td>
+          <td class="distribution">{distributionDataForTotalDelay}</td>
         </tr>
       </tbody>
     </table>
@@ -313,9 +313,9 @@ private[ui] class StreamingPage(parent: StreamingTab)
       <thead>
         <tr>
           <th></th>
-          <th>Status</th>
-          <th>Location</th>
-          <th>Last Error Time</th>
+          <th style="width: 166.7px; padding: 8px 0 8px 0"><div style="margin: 0 8px 0 8px">Status</div></th>
+          <th style="width: 166.7px; padding: 8px 0 8px 0"><div style="margin: 0 8px 0 8px">Location</div></th>
+          <th style="width: 166.7px; padding: 8px 0 8px 0"><div style="margin: 0 8px 0 8px">Last Error Time</div></th>
           <th>Last Error Message</th>
         </tr>
       </thead>
@@ -380,10 +380,10 @@ private[ui] class StreamingPage(parent: StreamingTab)
       <td>{receiverLastError}</td>
     </tr>
       <tr>
-        <td colspan="3">
+        <td colspan="3" class="timeline">
           {timelineForEventRate}
         </td>
-        <td>{distributionForEventsRate}</td>
+        <td class="distribution">{distributionForEventsRate}</td>
       </tr>
     // scalastyle:on
   }