AMBARI-5177. Hive job's 'show more' action should expand and collapse smoothly (alexantonenko)

ambari-web/app/styles/application.less

@@ -5687,6 +5687,10 @@ i.icon-asterisks {
   #toggle-query {
     margin-left: 20px;
   }
+  .query-info{
+    display: none;
+    margin-top: 10px;
+  }
   #job-more-details-table {
     td {
       vertical-align: top;

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

@@ -24,7 +24,7 @@
       <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="alert alert-info query-info">
         <table id="job-more-details-table">
           <tr>
             <td>

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

@@ -30,6 +30,8 @@ App.MainHiveJobDetailsView = Em.View.extend({
   zoomScaleFrom : 1,
   zoomScaleTo: 2,
   zoomScale : 1,
+  showQuery : false,
+
   zoomStep : function() {
     var zoomStep = 0.01;
     var zoomFrom = this.get('zoomScaleFrom');
@@ -41,10 +43,16 @@ App.MainHiveJobDetailsView = Em.View.extend({
   }.property('zoomScaleFrom', 'zoomScaleTo'),
   isGraphMaximized: false,
 
-  showQuery : false,
   toggleShowQuery : function () {
     this.toggleProperty('showQuery');
+    var queryBlock =  $('.query-info');
+    if (this.get('showQuery')) {
+      queryBlock.slideDown();
+    } else {
+      queryBlock.slideUp();
+    };
   },
+
   toggleShowQueryText : function () {
     return this.get('showQuery') ? Em.I18n.t('jobs.hive.less') : Em.I18n.t('jobs.hive.more');
   }.property('showQuery'),