AMBARI-4683. Tez vertex status should be shown in DAG. (srimanth)

ambari-web/app/styles/application.less

@@ -5674,6 +5674,29 @@ i.icon-asterisks {
           font-size: 80%;
         }
       }
+      .vertex-icon-text {
+        stroke-width: 0;
+        opacity: 0.9;
+      }
+      .vertex-icon-text.running,
+      .vertex-icon-text.initializing,
+      .vertex-icon-text.succeeded,
+      .vertex-icon-text.inited {
+        fill: green;
+        stroke: green;
+      }
+      .vertex-icon-text.new {
+        fill: #fde0dd;
+        stroke: cornflowerblue;
+        stroke-width: 1;
+      }
+      .vertex-icon-text.failed,
+      .vertex-icon-text.killed,
+      .vertex-icon-text.error,
+      .vertex-icon-text.terminating {
+        fill: red;
+        stroke: red;
+      }
     }
     .node text {
       pointer-events: none;

ambari-web/app/templates/main/jobs/hive_job_details.hbs

@@ -110,6 +110,11 @@
                 </div>
                 <div id="tez-vertex-details-section-body">
                   <table class="table">
+                    <tr>
+                      <td>{{t common.status}}</td>
+                      <td>{{view.selectedVertexIODisplay.status}}</td>
+                      <td></td>
+                    </tr>
                     <tr>
                       <td>{{t common.time.start}}</td>
                       <td>{{view.selectedVertexIODisplay.started}}</td>

ambari-web/app/templates/main/jobs/hive_job_details_tez_dag.hbs

@@ -34,6 +34,11 @@
         <rect x="0" y="0" width="44" height="16">
         </rect>
       </clipPath>
+      <font-face xmlns="http://www.w3.org/2000/svg" font-family="FontAwesome" unicode-range="U+0-7F">
+        <font-face-src>
+          <font-face-uri xlink:href="font/fontawesome-webfont.svg" xmlns:xlink="http://www.w3.org/1999/xlink"/>
+        </font-face-src>
+      </font-face>
     </defs>
   </svg>
 </div>

ambari-web/app/utils/string_utils.js

@@ -59,6 +59,20 @@ module.exports = {
     }
     return name.replace(/_\w/g,replacer);
   },
+
+  /**
+   * Forces given string into upper camel-case representation. The first
+   * character of each word will be capitalized with the rest in lower case.
+   */
+  getCamelCase : function(name) {
+    if (name != null) {
+      return name.toLowerCase().replace(/(\b\w)/g, function(f) {
+        return f.toUpperCase();
+      })
+    }
+    return name;
+  },
+
   /**
    * Compare two versions by following rules:
    * first higher than second then return 1

ambari-web/app/views/main/jobs/hive_job_details_tez_dag_view.js

@@ -195,6 +195,7 @@ App.MainHiveJobDetailsTezDagView = Em.View.extend({
           node.metrics['recordsRead'] = vertex.get('recordReadCount');
           node.metrics['recordsWrite'] = vertex.get('recordWriteCount');
           node.metrics['tezTasks'] = vertex.get('tasksCount');
+          node.state = vertex.get('state');
           // Min metrics
           dagVisualModel.minMetrics.input = Math.min(dagVisualModel.minMetrics.input, node.metrics.input);
           dagVisualModel.minMetrics.output = Math.min(dagVisualModel.minMetrics.output, node.metrics.output);
@@ -213,7 +214,8 @@ App.MainHiveJobDetailsTezDagView = Em.View.extend({
     Ember.run.once(this, 'summaryMetricTypeUpdated');
   }.observes('content.tezDag.vertices.@each.fileReadBytes', 'content.tezDag.vertices.@each.fileWriteBytes', 
       'content.tezDag.vertices.@each.hdfsReadBytes', 'content.tezDag.vertices.@each.hdfsWriteBytes', 
-      'content.tezDag.vertices.@each.recordReadCount', 'content.tezDag.vertices.@each.recordWriteCount'),
+      'content.tezDag.vertices.@each.recordReadCount', 'content.tezDag.vertices.@each.recordWriteCount',
+      'content.tezDag.vertices.@each.state'),
 
   /**
    * Determines layout and creates Tez graph. In the process it populates the
@@ -258,6 +260,7 @@ App.MainHiveJobDetailsTezDagView = Em.View.extend({
         node = {
           id : vertex.get('id'),
           name : vertex.get('name'),
+          state: vertex.get('state'),
           isMap : vertex.get('isMap'),
           operations : vertex.get('operations'),
           depth : vertexObj.depth,
@@ -420,9 +423,10 @@ App.MainHiveJobDetailsTezDagView = Em.View.extend({
     metricNodes.append("rect").attr("width", 60).attr("height", 18).attr("rx", "3");
     metricNodes.append("title").attr("class", "metric-title");
     metricNodes.append("text").attr("class", "metric-text").attr("x", "2").attr("dy", "1em");
-    node.append("text").attr("x", "1em").attr("dy", "1.5em").text(function(d) {
+    node.append("text").attr("x", "1.9em").attr("dy", "1.5em").text(function(d) {
       return d.name;
     });
+    node.append('text').attr("x", "0.8em").attr("dy", "1.5em").attr("font-family", "FontAwesome").attr('class', 'vertex-icon-text');
     node.attr("transform", function(d) {
       return "translate(" + d.x + "," + d.y + ")";
     });
@@ -435,10 +439,12 @@ App.MainHiveJobDetailsTezDagView = Em.View.extend({
   refreshGraphUI: function () {
     var svgLayer = this.get('svgVerticesLayer');
     if (svgLayer!=null) {
+      var self = this;
       var metricNodes = svgLayer.selectAll(".metric");
       var metricNodeTexts = svgLayer.selectAll(".metric-text");
       var metricNodeTitles = svgLayer.selectAll(".metric-title");
       var nodeBackgrounds =svgLayer.selectAll(".background");
+      var vertexIconTexts = svgLayer.selectAll(".vertex-icon-text");
       metricNodes.attr("class", function(node) {
         var classes = "metric ";
         var percent = node.metricPercent;
@@ -479,7 +485,41 @@ App.MainHiveJobDetailsTezDagView = Em.View.extend({
         }
         return classes;
       });
+      vertexIconTexts.text(function(n) {
+        return self.getVertexIcon(n)
+      }).attr('class', function(n) {
+        var classes = 'vertex-icon-text ';
+        if (n.state != null) {
+          classes += n.state.toLowerCase();
+        }
+        return classes;
+      });
+    }
+  },
+
+  getVertexIcon : function(node){
+    var icon = "";
+    switch (node.state) {
+    case App.TezDagVertexState.NEW:
+      icon = '\uF10C'; //icon-circle-blank
+    case App.TezDagVertexState.RUNNING:
+    case App.TezDagVertexState.FAILED:
+      icon = '\uF111'; //icon-circle
+      break;
+    case App.TezDagVertexState.SUCCEEDED:
+      icon = '\uF00C'; //icon-ok
+      break;
+    case App.TezDagVertexState.KILLED:
+    case App.TezDagVertexState.ERROR:
+      icon = '\uF057'; //icon-remove-sign
+      break;
+    case App.TezDagVertexState.INITED:
+    case App.TezDagVertexState.INITIALIZING:
+    case App.TezDagVertexState.TERMINATING:
+      icon = '\uF141'; //icon-ellipsis-horizontal
+      break;
     }
+    return icon;
   },
 
   /**

ambari-web/app/views/main/jobs/hive_job_details_view.js

@@ -19,6 +19,7 @@ var App = require('app');
 var date = require('utils/date');
 var numberUtils = require('utils/number_utils');
 var dateUtils = require('utils/date');
+var stringUtils = require('utils/string_utils');
 
 App.MainHiveJobDetailsView = Em.View.extend({
   templateName : require('templates/main/jobs/hive_job_details'),
@@ -136,11 +137,16 @@ App.MainHiveJobDetailsView = Em.View.extend({
    *    'write': '123 records'
    *  },
    *  'started': 'Feb 12, 2014 10:30am',
-   *  'ended': 'Feb 12, 2014 10:35am'
+   *  'ended': 'Feb 12, 2014 10:35am',
+   *  'status': 'Running'
    * }
    */
   selectedVertexIODisplay : function() {
     var v = this.get('selectedVertex');
+    var status = v.get('state');
+    if (status) {
+      status = stringUtils.getCamelCase(status);
+    }
     return {
       file : {
         read : {
@@ -164,12 +170,13 @@ App.MainHiveJobDetailsView = Em.View.extend({
       },
       records : {
         read : Em.I18n.t('jobs.hive.tez.records.count').format(v.get('recordReadCount')),
-        write : Em.I18n.t('jobs.hive.tez.records.count').format(v.get('recordWriteCount')),
+        write : Em.I18n.t('jobs.hive.tez.records.count').format(v.get('recordWriteCount'))
       },
       started: v.get('startTime') ? dateUtils.dateFormat(v.get('startTime')) : '',
-      ended: v.get('endTime') ? dateUtils.dateFormat(v.get('endTime')) : ''
+      ended: v.get('endTime') ? dateUtils.dateFormat(v.get('endTime')) : '',
+      status: status
     };
   }.property('selectedVertex.fileReadOps', 'selectedVertex.fileWriteOps', 'selectedVertex.hdfsReadOps', 'selectedVertex.hdfdWriteOps',
       'selectedVertex.fileReadBytes', 'selectedVertex.fileWriteBytes', 'selectedVertex.hdfsReadBytes', 'selectedVertex.hdfdWriteBytes',
-      'selectedVertex.recordReadCount', 'selectedVertes.recordWriteCount')
+      'selectedVertex.recordReadCount', 'selectedVertex.recordWriteCount', 'selectedVertex.status')
 });

ambari-web/test/utils/string_utils_test.js

@@ -109,19 +109,19 @@ describe('string_utils', function () {
     });
   });
 
-    describe('#getPath', function() {
-        var tests = [
-          {t: undefined, e: ''},
-          {t: {}, e: ''},
-          {t: [], e: ''},
-          {t: '', e: ''},
-          {t: function(){}, e: ''},
-          {t: '/path/to/filename', e: '/path/to'},
-          {t: '/path/to/', e: '/path/to'},
-          {t: '/filename', e: '/'},
-          {t: 'filename', e: ''},
-          {t: '/path/', e: '/path'},
-          {t: 'filename/', e: ''}
+  describe('#getPath', function() {
+      var tests = [
+        {t: undefined, e: ''},
+        {t: {}, e: ''},
+        {t: [], e: ''},
+        {t: '', e: ''},
+        {t: function(){}, e: ''},
+        {t: '/path/to/filename', e: '/path/to'},
+        {t: '/path/to/', e: '/path/to'},
+        {t: '/filename', e: '/'},
+        {t: 'filename', e: ''},
+        {t: '/path/', e: '/path'},
+        {t: 'filename/', e: ''}
       ];
       tests.forEach(function(test) {
           it('Check ' + typeof test.t, function () {
@@ -130,4 +130,26 @@ describe('string_utils', function () {
       });
   });
 
+  describe('#getCamelCase', function () {
+    var tests = [
+      {i:'a',e:'A'},
+      {i:'aB',e:'Ab'},
+      {i:'a b',e:'A B'},
+      {i:'a.b',e:'A.B'},
+      {i:'a,b',e:'A,B'},
+      {i:'a;b',e:'A;B'},
+      {i:'a. b',e:'A. B'},
+      {i:'a   b',e:'A   B'},
+      {i:'aaa. bbb',e:'Aaa. Bbb'},
+      {i:'aAA. bBB',e:'Aaa. Bbb'},
+      {i:'STARTING',e:'Starting'},
+      {i:'starting',e:'Starting'},
+      {i:'starting,ending',e:'Starting,Ending'}
+    ];
+    tests.forEach(function(test) {
+      it(test.i + ' to ' + test.e + ' ', function () {
+        expect(string_utils.getCamelCase(test.i)).to.equal(test.e);
+      });
+    });
+  });
 });