AMBARI-4698. Job page should show Hive query along with stage description (alexantonenko)

ambari-web/app/mappers/jobs/hive_job_mapper.js

@@ -38,6 +38,15 @@ App.hiveJobMapper = App.QuickDataMapper.create({
   model : App.HiveJob,
   map : function(json) {
     var model = this.get('model');
+    var sortById = function (a, b) {
+      if (a.id > b.id) {
+        return 1;
+      } else if (a.id < b.id) {
+        return -1;
+      } else {
+        return 0;
+      };
+    };
     if (!model) {
       return;
     }
@@ -51,8 +60,14 @@ App.hiveJobMapper = App.QuickDataMapper.create({
       hiveJob.stages = [];
       var stagePlans = json.otherinfo.query.queryPlan["STAGE PLANS"];
       for ( var stage in stagePlans) {
-        hiveJob.stages.push(stage);
         var stageValue = stagePlans[stage];
+        var stageItem = {};
+        stageItem.id = stage;
+        stageItem.description = '. ';
+        for (var item in stageValue) {
+          stageItem.description += item;
+        };
+        hiveJob.stages.push(stageItem);
         if (stageValue.Tez != null && hiveJob.tezDag == null) {
           var dagName = stageValue.Tez.DagName;
           // Vertices
@@ -145,7 +160,7 @@ App.hiveJobMapper = App.QuickDataMapper.create({
       var hiveJobRecord = App.HiveJob.find(hiveJob.id);
       if (hiveJobRecord != null) {
         hiveJobRecord.set('queryText', hiveJob.queryText);
-        hiveJobRecord.set('stages', hiveJob.stages);
+        hiveJobRecord.set('stages', hiveJob.stages.sort(sortById));
         hiveJobRecord.set('startTime', hiveJob.startTime);
         hiveJobRecord.set('endTime', hiveJob.endTime);
         hiveJobRecord.set('tezDag', App.TezDag.find(hiveJob.tezDag));

ambari-web/app/messages.js

@@ -1862,6 +1862,10 @@ Em.I18n.translations = {
   'jobs.customDateFilter.error.date.order':'End Date must be after Start Date',
   'jobs.customDateFilter.startTime':'Start Time',
   'jobs.customDateFilter.endTime':'End Time',
+  'jobs.hive.more':'show more',
+  'jobs.hive.less':'show less',
+  'jobs.hive.query':'Hive Query:',
+  'jobs.hive.stages':'Stages:',
   'jobs.hive.tez.tasks':'Tez Tasks',
   'jobs.hive.tez.hdfs':'HDFS',
   'jobs.hive.tez.localFiles':'Local Files',

ambari-web/app/models/jobs/hive_job.js

@@ -20,7 +20,7 @@ var App = require('app');
 App.HiveJob = App.AbstractJob.extend({
   jobType : App.JobType.HIVE,
   queryText : DS.attr('string'),
-  stages : DS.hasMany('string'),
+  stages : DS.attr('array'),
   tezDag : DS.belongsTo('App.TezDag')
 });
 

ambari-web/app/styles/application.less

@@ -1453,6 +1453,12 @@ width:100%;
 }
 /*****end styles for host component popup*****/
 
+.sort-wrapper {
+  .column-name {
+    cursor: pointer;
+    padding-right: 15px;
+  }
+}
 
 
 /*****start styles for install tasks logs*****/
@@ -2714,11 +2720,6 @@ table.graphs {
     margin-bottom: 10px;
     font-size: 13px\9;
 
-    .column-name {
-      cursor: pointer;
-      padding-right: 15px;
-    }
-
     .label-row {
       font-size: 0.9em;
       th {
@@ -5523,6 +5524,15 @@ i.icon-asterisks {
 }
 
 #hive-job-details {
+  #toggle-query {
+    margin-left: 20px;
+  }
+  .query-section {
+    margin-top: 1em;
+  }
+  .query-title {
+    font-weight: bold;
+  }
   .sections {
     margin-top: 10px;
   }

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

@@ -17,13 +17,26 @@
 }}
 
 <div id="hive-job-details">
-  <!-- Top Bar -->
-  <div class="top-bar">
-    <a {{action "routeToJobs" target="controller"}} href="#">{{t menu.item.jobs}}</a> > {{view.content.name}}
-    <div class="pull-right">Job Type: <span class="label label-info">{{view.content.jobType}}</span></div>
-  </div>
 
   {{#if controller.loaded}}
+    <!-- Top Bar -->
+    <div class="top-bar">
+      <a {{action "routeToJobs" target="controller"}} href="#">{{t menu.item.jobs}}</a> > {{view.content.name}}
+      <a {{action "toggleShowQuery" target="view"}} href="#" id="toggle-query">{{view.toggleShowQueryText}}</a>
+      <div class="pull-right">Job Type: <span class="label label-info">{{view.content.jobType}}</span></div>
+      <div {{bindAttr class="view.showQuery::hidden"}}>
+        <div class="query-section"><span class="query-title">{{t jobs.hive.query}}</span> {{view.content.queryText}}</div>
+        <div class="query-section">
+          <span class="query-title">{{t jobs.hive.stages}}</span>
+          <ol>
+            {{#each stage in view.content.stages}}
+              <li>{{stage.id}}{{stage.description}}.</li>
+            {{/each}}
+          </ol>
+        </div>
+      </div>
+    </div>
+
     <!-- Sections -->
     <div class="row-fluid">
       <div class="span12 sections">

ambari-web/app/views/common/sort_view.js

@@ -29,6 +29,8 @@ var App = require('app');
 var wrapperView = Em.View.extend({
   tagName: 'tr',
 
+  classNames: ['sort-wrapper'],
+
   /**
    * Load sort statuses from local storage
    * Works only after finish filtering in the parent View

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

@@ -25,6 +25,15 @@ App.MainHiveJobDetailsView = Em.View.extend({
 
   selectedVertex : null,
   content : null,
+
+  showQuery : false,
+  toggleShowQuery : function () {
+    this.toggleProperty('showQuery');
+  },
+  toggleShowQueryText : function () {
+    return this.get('showQuery') ? Em.I18n.t('jobs.hive.less') : Em.I18n.t('jobs.hive.more');
+  }.property('showQuery'),
+
   summaryMetricType: 'input',
   summaryMetricTypesDisplay : [ Em.I18n.t('jobs.hive.tez.metric.input'), Em.I18n.t('jobs.hive.tez.metric.output'), Em.I18n.t('jobs.hive.tez.metric.recordsRead'),
                                 Em.I18n.t('jobs.hive.tez.metric.recordsWrite'), Em.I18n.t('jobs.hive.tez.metric.tezTasks') ],