AMBARI-2219. Add a legend to Job Timeline. (billie via yusaku)

git-svn-id: https://svn.apache.org/repos/asf/incubator/ambari/trunk@1487207 13f79535-47bb-0310-9956-ffa450edef68

CHANGES.txt

@@ -309,6 +309,8 @@ Trunk (unreleased changes):
 
  IMPROVEMENTS
 
+ AMBARI-2199. Add a legend to Job Timeline. (billie via yusaku)
+
  AMBARI-2212. Change config loading mechanism to allow for different
  stack versions. (yusaku)
 

ambari-web/app/styles/apps.less

@@ -466,6 +466,58 @@
       visibility: hidden;
     }
   }
+  #dag_viewer_legend {
+    border: 1px solid #DDDDDD;
+    padding: 10px;
+    padding-left: 20px;
+    float: left;
+    ul {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+    }
+    li {
+      display: block;
+      width: 25%;
+      float: left;
+    }
+    span {
+      width: 15px;
+      height: 15px;
+      display: block;
+      float: left;
+      margin-right: 5px;
+    }
+    #job {
+      border: 1px solid #333;
+      background: #ccc;
+    }
+    #jobdone {
+      border: 1px solid #333;
+      background: rgba(0,128,0,0.8);
+    }
+    #allmap {
+      border: 2px solid #007000;
+    }
+    #map {
+      border: 2px solid #007000;
+      background: rgba(0,128,0,0.8);
+    }
+    #allshuffle {
+      border: 2px solid #97BDC9;
+    }
+    #shuffle {
+      border: 2px solid #97BDC9;
+      background: rgba(173,216,230,0.8);
+    }
+    #allreduce {
+      border: 2px solid #3D729E;
+    }
+    #reduce {
+      border: 2px solid #3D729E;
+      background: rgba(70,130,180,0.8);
+    }
+  }
 }
 
 

ambari-web/app/templates/main/apps/item/dag.hbs

@@ -17,6 +17,19 @@
 }}
     <div id="dag_viewer"></div>
 
+    <div id="dag_viewer_legend">
+      <ul>
+        <li><span id="job"></span>Unfinished Job</li>
+        <li><span id="allmap"></span>All Maps on Cluster</li>
+        <li><span id="allshuffle"></span>All Shuffles on Cluster</li>
+        <li><span id="allreduce"></span>All Reduces on Cluster</li>
+        <li><span id="jobdone"></span>Finished Job</li>
+        <li><span id="map"></span>Maps for this App</li>
+        <li><span id="shuffle"></span>Shuffles for this App</li>
+        <li><span id="reduce"></span>Reduces for this App</li>
+      </ul>
+    </div>
+
     <table class="table table-bordered table-striped" id="innerTable">
       <thead>
       <tr>

ambari-web/vendor/styles/cubism.css

@@ -43,7 +43,7 @@
 #dag_viewer rect {
   fill: #ccc;
   stroke: #333;
-  stroke-width: 1.5px;
+  stroke-width: 1px;
 }
 
 #dag_viewer rect.finished {