AMBARI-5322. Mirroring: unable to show more than 10 datasets. (akovalenko)

ambari-web/app/models/dataset.js

@@ -72,7 +72,21 @@ App.Dataset = DS.Model.extend({
     jobs = jobs.filterProperty('status', 'FAILED').concat(jobs.filterProperty('status', 'SUCCESSFUL'));
     jobs = jobs.sortProperty('endDate');
     return jobs.length && jobs[0].get('status') === 'FAILED' ? 'health-status-DEAD-RED' : 'health-status-LIVE';
-  }.property('datasetJobs', 'datasetJobs.@each.status')
+  }.property('datasetJobs', 'datasetJobs.@each.status'),
+
+  healthIconClass: function () {
+    switch (this.get('healthClass')) {
+      case 'health-status-LIVE':
+        return App.healthIconClassGreen;
+        break;
+      case 'health-status-DEAD-RED':
+        return App.healthIconClassRed;
+        break;
+      default:
+        return "";
+        break;
+    }
+  }.property('healthClass')
 });
 
 App.Dataset.FIXTURES = [];

ambari-web/app/styles/application.less

@@ -4320,6 +4320,26 @@ ul.filter {
       color: orange;
     }
   }
+  .dataset-thead {
+    margin-bottom: 0;
+    border-radius: 4px 4px 0 0;
+    tr:last-child {
+      th {
+        border-radius: 0;
+      }
+    }
+  }
+  .scrollable-table {
+    max-height: 370px;
+    overflow-y: auto;
+    border-bottom: 1px solid #dddddd;
+    border-left: 1px solid #dddddd;
+    border-right: 1px solid #dddddd;
+    border-radius: 0 0 4px 4px;
+    .table {
+      margin : 0;
+    }
+  }
 }
 
 .mirroring-manage-clusters {

ambari-web/app/templates/main/mirroring/datasets.hbs

@@ -46,60 +46,62 @@
           </div>
         {{/if}}
       </div>
-      <table class="table table-bordered">
+      <table class="table table-bordered dataset-thead">
         <thead>
-        <tr>
           {{#view view.sortView contentBinding="view.filteredContent" class="label-row"}}
-          <th class="first"></th>
-          {{view view.parentView.nameSort}}
-          {{view view.parentView.statusSort}}
+            <th class="first"></th>
+            {{view view.parentView.nameSort}}
+            {{view view.parentView.statusSort}}
           {{/view}}
-        </tr>
         <tr class="filter-row">
           <th class="first"></th>
           <th>{{view view.nameFilterView}}</th>
           <th>{{view view.statusFilterView}}</th>
         </tr>
         </thead>
-        <tbody>
-        {{#if controller.isDatasetLoadingError}}
-          <td class="first"></td>
-          <td colspan="2">
-            {{t mirroring.dataset.dataset.loading.error}}
-          </td>
-        {{else}}
-          {{#if controller.isLoaded}}
-            {{#if view.pageContent}}
-              {{#each dataset in view.pageContent}}
-              {{#view view.DatasetView contentBinding="dataset"}}
-              <td class="first">
-                <span {{bindAttr class="dataset.healthClass"}}></span>
-              </td>
-              <td class="name">
-                <a title="{{unbound dataset.name}}" href="javascript:void(null)">{{unbound dataset.name}}</a>
-              </td>
-              <td><span {{bindAttr class="dataset.isRunning:text-info dataset.isSuspended:text-warning"}}>{{dataset.statusFormatted}}</span></td>
-              {{/view}}
-              {{/each}}
+      </table>
+      <div class="scrollable-table">
+        <table class="table">
+          <tbody>
+          {{#if controller.isDatasetLoadingError}}
+            <td class="first"></td>
+            <td colspan="2">
+              {{t mirroring.dataset.dataset.loading.error}}
+            </td>
+          {{else}}
+            {{#if controller.isLoaded}}
+              {{#if view.pageContent}}
+                {{#each dataset in view.pageContent}}
+                {{#view view.DatasetView contentBinding="dataset"}}
+                <td class="first">
+                  <span {{bindAttr class="dataset.healthClass dataset.healthIconClass"}}></span>
+                </td>
+                <td class="name">
+                  <a title="{{unbound dataset.name}}" href="javascript:void(null)">{{unbound dataset.name}}</a>
+                </td>
+                <td><span {{bindAttr class="dataset.isRunning:text-info dataset.isSuspended:text-warning"}}>{{dataset.statusFormatted}}</span></td>
+                {{/view}}
+                {{/each}}
+              {{else}}
+                <tr>
+                  <td class="first"></td>
+                  <td colspan="2">
+                    {{t mirroring.table.noDatasets}}
+                  </td>
+                </tr>
+              {{/if}}
             {{else}}
               <tr>
                 <td class="first"></td>
                 <td colspan="2">
-                  {{t mirroring.table.noDatasets}}
+                  <div class="spinner"></div>
                 </td>
               </tr>
             {{/if}}
-          {{else}}
-            <tr>
-              <td class="first"></td>
-              <td colspan="2">
-                <div class="spinner"></div>
-              </td>
-            </tr>
           {{/if}}
-        {{/if}}
-        </tbody>
-      </table>
+          </tbody>
+        </table>
+      </div>
     </div>
     <div class="span8 jobs-container">
       {{view App.MainDatasetJobsView controllerBinding="App.router.mainDatasetJobsController"}}

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

@@ -85,15 +85,13 @@
 <div class="dataset-instances">
   <table class="table table-bordered table-striped">
     <thead>
-    <tr>
       {{#view view.sortView contentBinding="view.filteredContent" class="label-row"}}
-      <th class="first"></th>
-      {{view view.parentView.idSort}}
-      {{view view.parentView.startSort}}
-      {{view view.parentView.endSort}}
-      {{view view.parentView.statusSort}}
+        <th class="first"></th>
+        {{view view.parentView.idSort}}
+        {{view view.parentView.startSort}}
+        {{view view.parentView.endSort}}
+        {{view view.parentView.statusSort}}
       {{/view}}
-    </tr>
     <tr class="filter-row">
       <th class="first"></th>
       <th>{{view view.idFilterView}}</th>

ambari-web/app/views/main/mirroring/datasets_view.js

@@ -31,6 +31,10 @@ App.MainDatasetsView = App.TableView.extend({
     this.filter();
   },
 
+  endIndex: function () {
+    return this.get('filteredContent.length');
+  }.property('filteredContent.length'),
+
   sortView: sort.wrapperView,
   nameSort: sort.fieldView.extend({
     column: '1',