AMBARI-4656. Jobs: On main Jobs table, if there is no jobs to show, show msg "No jobs to display" (alexantonenko)

ambari-web/app/messages.js

@@ -1847,6 +1847,7 @@ Em.I18n.translations = {
   'menu.item.jobs':'Jobs',
   'menu.item.admin':'Admin',
 
+  'jobs.nothingToShow': 'No jobs to display',
   'jobs.table.custom.date.am':'AM',
   'jobs.table.custom.date.pm':'PM',
   'jobs.table.custom.date.header':'Select Custom Dates',

ambari-web/app/styles/apps.less

@@ -387,14 +387,29 @@
     th, td {
       border-left-width: 0;
     }
-
+    .no-data{
+      text-align: center;
+    }
     td:first-child,
     th:first-child {
       border-left-width: 1px;
+      width: 35%;
+    }
+    td:first-child + td,
+    th:first-child + th,
+    td:first-child + td + td,
+    th:first-child + th + th,
+    td:first-child + td + td + td,
+    th:first-child + th + th + th{
+      width: 16%;
+    }
+    td:first-child + td + td + td + td,
+    th:first-child + th + th + th + th{
+      width: 17%;
     }
   }
   .table {
-
+    table-layout: fixed;
     th {
       border-top: none;
     }

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

@@ -48,9 +48,9 @@
         </tr>
         </thead>
         <tbody>
-        {{#if  view.emptyData}}
+        {{#if  view.noDataToShow}}
             <tr>
-                <td class="no-data" {{bindAttr colspan="controller.columnsName.content.length"}}>{{t apps.filters.nothingToShow}}</td>
+                <td class="no-data" {{bindAttr colspan="controller.columnsName.content.length"}}>{{t jobs.nothingToShow}}</td>
             </tr>
         {{else}}
           {{#each job in view.pageContent}}

ambari-web/app/views/main/jobs_view.js

@@ -31,6 +31,22 @@ App.MainJobsView = App.TableView.extend({
     this.set('filteredContent', this.get('controller.content'));
   },
 
+  /**
+   * If no jobs table rows to show.
+   */
+  noDataToShow:true,
+
+  /*
+   If no jobs to display set noDataToShow to true, else set emptyData to false.
+   */
+  noDataToShowObserver:function(){
+    if(this.get("controller.content.length") > 0){
+      this.set("noDataToShow",false);
+    }else{
+      this.set("noDataToShow",true);
+    }
+  }.observes("controller.content.length"),
+
   sortView: sort.wrapperView,
   idSort: sort.fieldView.extend({
     column: 0,
@@ -81,7 +97,7 @@ App.MainJobsView = App.TableView.extend({
    */
   filteredJobs: function () {
     return Em.I18n.t('jobs.filtered.jobs').format(this.get('content').get('length'), this.get('controller.totalOfJobs'));
-  }.property('content.length', 'filteredContent.length'),
+  }.property('content.length', 'filteredContent.length', 'controller.totalOfJobs'),
 
   /**
    * Filter-field for Jobs ID.