Move stroke and fill attribute of rect elements to css

nemccarthy · Apr 24, 2015 · b09d0c5 · b09d0c5
1 parent d3c63c8
commit b09d0c5
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 22 deletions.
diff --git a/core/src/main/resources/org/apache/spark/ui/static/timeline-view.css b/core/src/main/resources/org/apache/spark/ui/static/timeline-view.css
@@ -27,6 +27,10 @@ div#application-timeline, div#job-timeline {
   width: 100%;
 }
 
+.vis.timeline .item.stage {
+  cursor: pointer;
+}
+
 .vis.timeline .item.stage.succeeded {
   background-color: #D5DDF6;
 }
@@ -37,8 +41,9 @@ div#application-timeline, div#job-timeline {
    z-index: auto;
 }
 
-.vis.timeline .item.stage {
-  cursor: pointer;
+.legend-area rect.completed-stage-legend {
+  fill: #D5DDF6;
+  stroke: #97B0F8;
 }
 
 .vis.timeline .item.stage.failed {
@@ -51,6 +56,11 @@ div#application-timeline, div#job-timeline {
    z-index: auto;
 }
 
+.legend-area rect.failed-stage-legend {
+  fill: #FF5475;
+  stroke: #97B0F8;
+}
+
 .vis.timeline .item.stage.running {
    background-color: #FDFFCA;
 }
@@ -61,6 +71,11 @@ div#application-timeline, div#job-timeline {
    z-index: auto;
 }
 
+.legend-area rect.active-stage-legend {
+  fill: #FDFFCA;
+  stroke: #97B0F8;
+}
+
 .vis.timeline .item.job {
   cursor: pointer;
 }
@@ -75,6 +90,11 @@ div#application-timeline, div#job-timeline {
    z-index: auto;
 }
 
+.legend-area rect.succeeded-job-legend {
+  fill: #D5DDF6;
+  stroke: #97B0F8;
+}
+
 .vis.timeline .item.job.failed {
    background-color: #FF5475;
 }
@@ -85,6 +105,11 @@ div#application-timeline, div#job-timeline {
    z-index: auto;
 }
 
+.legend-area rect.failed-job-legend {
+  fill: #FF5475;
+  stroke: #97B0F8;
+}
+
 .vis.timeline .item.job.running {
    background-color: #FDFFCA;
 }
@@ -95,14 +120,29 @@ div#application-timeline, div#job-timeline {
    z-index: auto;
 }
 
+.legend-area rect.running-job-legend {
+  fill: #FDFFCA;
+  stroke: #97B0F8;
+}
+
 .vis.timeline .item.executor.added {
   background-color: #D5DDF6;
 }
 
+.legend-area rect.executor-added-legend {
+  fill: #D5DDF6;
+  stroke: #97B0F8;
+}
+
 .vis.timeline .item.executor.removed {
   background-color: #EBCA59;
 }
 
+.legend-area rect.executor-removed-legend {
+  fill: #EBCA59;
+  stroke: #97B0F8;
+}
+
 .vis.timeline .item.executor.selected {
   border-color: #FFC200;
   background-color: #FFF785;

diff --git a/core/src/main/scala/org/apache/spark/ui/jobs/AllJobsPage.scala b/core/src/main/scala/org/apache/spark/ui/jobs/AllJobsPage.scala
@@ -31,24 +31,24 @@ import org.apache.spark.JobExecutionStatus
 private[ui] class AllJobsPage(parent: JobsTab) extends WebUIPage("") {
   private val JOBS_LEGEND =
     <div class="legend-area"><svg width="150px" height="85px">
-      <rect x="5px" y="5px" width="20px" height="15px"
-            rx="2px" ry="2px" stroke="#97B0F8" fill="#D5DDF6"></rect>
+      <rect class="succeeded-job-legend"
+        x="5px" y="5px" width="20px" height="15px" rx="2px" ry="2px"></rect>
       <text x="35px" y="17px">Succeeded</text>
-      <rect x="5px" y="30px" width="20px" height="15px"
-            rx="2px" ry="2px" stroke="#97B0F8" fill="#FF5475"></rect>
+      <rect class="failed-job-legend"
+        x="5px" y="30px" width="20px" height="15px" rx="2px" ry="2px"></rect>
       <text x="35px" y="42px">Failed</text>
-      <rect x="5px" y="55px" width="20px" height="15px"
-            rx="2px" ry="2px" stroke="#97B0F8" fill="#FDFFCA"></rect>
+      <rect class="running-job-legend"
+        x="5px" y="55px" width="20px" height="15px" rx="2px" ry="2px"></rect>
       <text x="35px" y="67px">Running</text>
     </svg></div>.toString.filter(_ != '\n')
 
   private val EXECUTORS_LEGEND =
     <div class="legend-area"><svg width="150px" height="55px">
-      <rect x="5px" y="5px" width="20px" height="15px"
-            rx="2px" ry="2px" stroke="#97B0F8" fill="#D5DDF6"></rect>
+      <rect class="executor-added-legend"
+        x="5px" y="5px" width="20px" height="15px" rx="2px" ry="2px"></rect>
       <text x="35px" y="17px">Added</text>
-      <rect x="5px" y="30px" width="20px" height="15px"
-            rx="2px" ry="2px" stroke="#97B0F8" fill="#EBCA59"></rect>
+      <rect class="executor-removed-legend"
+        x="5px" y="30px" width="20px" height="15px" rx="2px" ry="2px"></rect>
       <text x="35px" y="42px">Removed</text>
     </svg></div>.toString.filter(_ != '\n')
 

diff --git a/core/src/main/scala/org/apache/spark/ui/jobs/JobPage.scala b/core/src/main/scala/org/apache/spark/ui/jobs/JobPage.scala
@@ -33,24 +33,24 @@ import org.apache.spark.ui.jobs.UIData.ExecutorUIData
 private[ui] class JobPage(parent: JobsTab) extends WebUIPage("job") {
   private val STAGES_LEGEND =
     <div class="legend-area"><svg width="150px" height="85px">
-      <rect x="5px" y="5px" width="20px" height="15px"
-            rx="2px" ry="2px" stroke="#97B0F8" fill="#D5DDF6"></rect>
+      <rect class="completed-stage-legend"
+        x="5px" y="5px" width="20px" height="15px" rx="2px" ry="2px"></rect>
       <text x="35px" y="17px">Completed</text>
-      <rect x="5px" y="30px" width="20px" height="15px"
-            rx="2px" ry="2px" stroke="#97B0F8" fill="#FF5475"></rect>
+      <rect class="failed-stage-legend"
+        x="5px" y="30px" width="20px" height="15px" rx="2px" ry="2px"></rect>
       <text x="35px" y="42px">Failed</text>
-      <rect x="5px" y="55px" width="20px" height="15px"
-            rx="2px" ry="2px" stroke="#97B0F8" fill="#FDFFCA"></rect>
+      <rect class="active-stage-legend"
+        x="5px" y="55px" width="20px" height="15px" rx="2px" ry="2px"></rect>
       <text x="35px" y="67px">Active</text>
     </svg></div>.toString.filter(_ != '\n')
 
   private val EXECUTORS_LEGEND =
     <div class="legend-area"><svg width="150px" height="55px">
-      <rect x="5px" y="5px" width="20px" height="15px"
-            rx="2px" ry="2px" stroke="#97B0F8" fill="#D5DDF6"></rect>
+      <rect class="executor-added-legend"
+        x="5px" y="5px" width="20px" height="15px" rx="2px" ry="2px"></rect>
       <text x="35px" y="17px">Executor Added</text>
-      <rect x="5px" y="30px" width="20px" height="15px"
-            rx="2px" ry="2px" stroke="#97B0F8" fill="#EBCA59"></rect>
+      <rect class="executor-removed-legend"
+        x="5px" y="30px" width="20px" height="15px" rx="2px" ry="2px"></rect>
       <text x="35px" y="42px">Executor Removed</text>
     </svg></div>.toString.filter(_ != '\n')