AMBARI-4485. Mirroring: tables layout cleanup. (akovalenko)

ambari-web/app/assets/data/mirroring/dataset3_instances.json

@@ -1 +1,22 @@
-{"status": "SUCCEEDED", "message": "default/STATUS\n", "requestId": "default/a7463898-4d2a-4857-866d-15fdf65da84f\n", "instances": []}
+{"status": "SUCCEEDED", "message": "default/STATUS\n", "requestId": "default/a7463898-4d2a-4857-866d-15fdf65da84f\n", "instances": [
+  {
+    "instance": "2014-10-24T00:00Z",
+    "status": "FAILED",
+    "logFile": "http://c6407.ambari.apache.org:11000/oozie?job=0000004-140108205147729-oozie-oozi-W",
+    "cluster": "mcluster-bcp",
+    "sourceCluster": "mcluster",
+    "startTime": "2014-01-09T06:23:33Z",
+    "endTime": "2014-01-09T06:24:29Z",
+    "details": ""
+  },
+  {
+    "instance": "2014-10-24T01:00Z",
+    "status": "SUSPENDED",
+    "logFile": "http://c6407.ambari.apache.org:11000/oozie?job=0000005-140108205147729-oozie-oozi-W",
+    "cluster": "mcluster-bcp",
+    "sourceCluster": "mcluster",
+    "startTime": "2014-01-09T06:25:35Z",
+    "endTime": "2014-01-09T06:26:02Z",
+    "details": ""
+  }
+]}

ambari-web/app/controllers/main/mirroring/jobs_controller.js

@@ -26,9 +26,10 @@ App.MainDatasetJobsController = Em.Controller.extend({
   }.property('App.router.mainMirroringController.isLoaded'),
 
   jobs: function () {
+    var datasetName = this.get('content.name');
     var mainMirroringController = App.router.get('mainMirroringController');
-    return (this.get('isLoaded')) ?
-        mainMirroringController.get('datasets').findProperty('name', this.get('content.id')).get('datasetJobs') : [];
+    return (this.get('isLoaded') && datasetName) ?
+        mainMirroringController.get('datasets').findProperty('name', datasetName).get('datasetJobs') : [];
   }.property('content', 'isLoaded'),
 
   actionDesc: function () {

ambari-web/app/controllers/main/mirroring_controller.js

@@ -116,13 +116,19 @@ App.MainMirroringController = Em.ArrayController.extend({
     }, this);
     this.get('datasetsData').findProperty('name', opts.dataset).set('instances', datasetJobs);
     this.set('datasetCount', this.get('datasetCount') - 1);
+    var sortedDatasets = [];
     if (this.get('datasetCount') < 1) {
       App.dataSetMapper.map(this.get('datasetsData'));
-      this.set('datasets', App.Dataset.find().toArray().sort(function(a,b){
-        return a.get('name') - b.get('name');
-      }));
+      sortedDatasets = App.Dataset.find().toArray().sort(function (a, b) {
+        if (a.get('name') < b.get('name'))  return -1;
+        if (a.get('name') > b.get('name'))  return 1;
+        return 0;
+      });
+      this.set('datasets', sortedDatasets);
       this.set('isLoaded', true);
     }
+    var selectedDataset = this.get('selectedDataset');
+    App.router.transitionTo('showDatasetJobs', selectedDataset || sortedDatasets[0]);
   },
 
   onLoadDatasetsInstancesError: function () {

ambari-web/app/messages.js

@@ -173,6 +173,7 @@ Em.I18n.translations = {
   'common.password': 'Password',
   'common.url': 'URL',
   'common.advanced': 'Advanced',
+  'common.download': 'Download',
 
   'passiveState.turnOn':'Turn On Passive Mode',
   'passiveState.turnOff':'Turn Off Passive Mode',
@@ -1738,11 +1739,10 @@ Em.I18n.translations = {
   'apps.isRunning.popup.title':'Is running',
   'apps.isRunning.popup.content':'Job is running now',
 
-  'mirroring.dataset.AllDataSets':'All Datasets',
+  'mirroring.dataset.dataSets':'Datasets',
   'mirroring.dataset.createDataset':'Create Dataset',
   'mirroring.dataset.manageClusters':'Manage Clusters',
   'mirroring.dataset.newDataset':'New Dataset',
-  'mirroring.dataset.editDataset':'Edit Dataset',
   'mirroring.dataset.selectTargetClusters':'Select Target Cluster...',
   'mirroring.dataset.name':'Name',
   'mirroring.dataset.type':'Type',
@@ -1750,16 +1750,15 @@ Em.I18n.translations = {
   'mirroring.dataset.sourceDir':'Source',
   'mirroring.dataset.target':'Target',
   'mirroring.dataset.source':'Source',
-  'mirroring.dataset.filespec':'Spec',
-  'mirroring.dataset.avgData':'Avg. Data',
-  'mirroring.dataset.dateCreated':'Date Created',
   'mirroring.dataset.targetDir':'Target Cluster Directory',
   'mirroring.dataset.schedule':'Schedule',
+  'mirroring.dataset.suspend':'Suspend',
+  'mirroring.dataset.suspendInstance':'Suspend Instance',
+  'mirroring.dataset.resumeInstance':'Resume Instance',
+  'mirroring.dataset.killInstance':'Kill Instance',
   'mirroring.dataset.schedule.to':'to',
   'mirroring.dataset.schedule.repeatEvery':'Repeat every ',
   'mirroring.dataset.addTargetCluster':'Add Target Cluster',
-  'mirroring.dataset.toggle.active':'Activate',
-  'mirroring.dataset.toggle.suspended':'Suspend',
   'mirroring.dataset.type.HDFS':'HDFS',
   'mirroring.dataset.type.Hive':'Hive Tables',
   'mirroring.dataset.repeat.minutes':'minutes',
@@ -1783,28 +1782,14 @@ Em.I18n.translations = {
   'mirroring.targetcluster.nameNodeRpcUrl':'NameNode RPC',
   'mirroring.targetcluster.oozieServerUrl':'Oozie Server',
   'mirroring.targetcluster.addCluster':'Add Cluster',
-  'mirroring.targetcluster.testConnection':'Test Connection',
   'mirroring.targetcluster.enterClusterName':'Name of the Target Cluster',
 
   'mirroring.table.noDatasets':'No datasets to display',
-  'mirroring.table.datasetSource':'Source',
-  'mirroring.table.datasetTarget':'Target',
-  'mirroring.table.lastSuccess':'Last Success',
-  'mirroring.table.lastFail':'Last Fail',
-  'mirroring.table.lastDuration':'Last Duration',
-  'mirroring.table.avgData':'Avg Data',
+  'mirroring.table.datasetStatus':'Status',
   'mirroring.table.noJobs':'No instances to display',
   'mirroring.table.jobId':'Instance ID',
   'mirroring.table.start':'Start',
   'mirroring.table.end':'End',
-  'mirroring.table.duration':'Duration',
-  'mirroring.table.data':'Data',
-  'mirroring.table.nextInstance':'Next Instance',
-
-  'mirroring.sidebar.header.history': 'History',
-  'mirroring.sidebar.header.clusters': 'Target Clusters',
-  'mirroring.sidebar.popup.clusters.header': 'Cluster management',
-  'mirroring.sidebar.popup.clusters.body': 'Here will be some content',
 
   'mirroring.required.error': 'This field is required',
   'mirroring.dateOrder.error': 'End Date must be after Start Date',

ambari-web/app/models/dataset.js

@@ -21,13 +21,39 @@ var App = require('app');
 
 App.Dataset = DS.Model.extend({
   name: DS.attr('string'),
-  status: DS.attr('string'),
   sourceClusterName: DS.attr('string'),
   targetClusterName: DS.attr('string'),
   sourceDir: DS.attr('string'),
   targetDir: DS.attr('string'),
   datasetJobs: DS.hasMany('App.DataSetJob'),
 
+  status: function () {
+    var jobs = this.get('datasetJobs').toArray();
+    if (jobs.someProperty('status', 'RUNNING')) {
+      return 'RUNNING';
+    } else if (jobs.someProperty('status', 'SUSPENDED')) {
+      return 'SUSPENDED';
+    } else {
+      return 'SCHEDULED';
+    }
+  }.property('datasetJobs', 'datasetJobs.@each.status'),
+
+  statusFormatted: function (){
+    return this.get('status').toLowerCase().capitalize();
+  }.property('status'),
+
+  isRunning: function () {
+    return this.get('status') === 'RUNNING';
+  }.property('status'),
+
+  isSuspended: function () {
+    return this.get('status') === 'SUSPENDED';
+  }.property('status'),
+
+  isScheduled: function () {
+    return this.get('status') === 'SCHEDULED';
+  }.property('status'),
+
   //Last succeeded date. Will be calculated later.
   lastSucceededDate: function () {
     return '';

ambari-web/app/routes/main.js

@@ -128,9 +128,22 @@ module.exports = Em.Route.extend({
   mirroring: Em.Route.extend({
     route: '/mirroring',
     index: Ember.Route.extend({
-      route: '/',
-      connectOutlets: function (router, context) {
-        router.get('mainController').connectOutlet('mainMirroring');
+      route: '/'
+    }),
+
+    connectOutlets: function (router) {
+      router.get('mainController').connectOutlet('mainMirroring');
+    },
+
+    gotoShowJobs: function (router, event) {
+      router.transitionTo('showDatasetJobs', event.context);
+    },
+
+    showDatasetJobs: Em.Route.extend({
+      route: '/:dataset_id',
+      connectOutlets: function (router, dataset) {
+        router.get('mainDatasetJobsController').set('content', dataset);
+        router.get('mainMirroringController').set('selectedDataset', dataset);
       }
     }),
 
@@ -154,17 +167,6 @@ module.exports = Em.Route.extend({
       }
     }),
 
-    gotoShowJobs: function (router, event) {
-      router.transitionTo('showDatasetJobs', event.context);
-    },
-
-    showDatasetJobs: Em.Route.extend({
-      route: '/dataset/:dataset_id',
-      connectOutlets: function (router, dataset) {
-        router.get('mainController').connectOutlet('mainJobs', dataset);
-      }
-    }),
-
     manageClusters: function (router) {
       router.transitionTo('manageClustersRoute');
     }

ambari-web/app/styles/application.less

@@ -3908,6 +3908,9 @@ ul.filter {
       background-image: @status-dead-red-marker;
       .status-dot-position;
     }
+    .dataset-selected {
+      background-color: #E6F1F6;
+    }
   }
 
   .box-footer .footer-pagination {
@@ -3952,6 +3955,46 @@ ul.filter {
       }
     }
   }
+  .jobs-container {
+    margin-top: 50px;
+    border: 1px solid #dddddd;
+    border-radius: 4px;
+    -moz-border-radius: 4px;
+    -webkit-border-radius: 4px;
+    padding: 10px
+  }
+  .dataset-details {
+    position: relative;
+    height: 100px;
+    .top-right {
+      position: absolute;
+      top: 0;
+      right: 10px;
+    }
+    .top-left {
+      position: absolute;
+      top: 0;
+      left: 10px;
+    }
+    .bottom-right {
+      position: absolute;
+      bottom: 5px;
+      right: 10px;
+    }
+    .bottom-left {
+      position: absolute;
+      bottom: 5px;
+      left: 10px;
+    }
+    .dataset-status {
+      padding: 8px;
+      font-size: 16px;
+      margin-right: 5px;
+    }
+    td {
+      padding: 0 15px 0 0;
+    }
+  }
 }
 
 #mirroring-manage-clusters {

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

@@ -15,96 +15,83 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 }}
-<div>
-  {{#if App.isAdmin}}
-    <div class="mirroring-top-nav pull-right btn-group">
-      <button class="btn">{{t common.actions}}</button>
-      <button class="btn dropdown-toggle" data-toggle="dropdown">
-        <span class="caret"></span>
-      </button>
-      <ul class="dropdown-menu pull-left">
-        <li>
-          <a  href="javascript:void(null);" {{action addNewDataset}}>
-            <i class="icon-plus"></i>&nbsp;{{t mirroring.dataset.createDataset}}
-          </a>
-        </li>
-        <li>
-          <a {{action manageClusters}} href="javascript:void(null);">
-            <i class="icon-cog"></i>&nbsp;{{t mirroring.dataset.manageClusters}}...
-          </a>
-        </li>
-      </ul>
-    </div>
-  {{/if}}
-</div>
 <div id="mirroring">
-  <table class="table table-bordered table-striped">
-    <thead>
-    <tr>
-      {{#view view.sortView contentBinding="view.filteredContent"}}
-        <th class="first"> </th>
-        {{view view.parentView.nameSort}}
-        {{view view.parentView.sourceSort}}
-        {{view view.parentView.targetSort}}
-        {{view view.parentView.clusterSort}}
-        {{view view.parentView.lastSuccessSort}}
-        {{view view.parentView.nextInstanceSort}}
-      {{/view}}
-    </tr>
-    <tr>
-      <th class="first"> </th>
-      <th>{{view view.nameFilterView}}</th>
-      <th>{{view view.datasetSourceFilterView}}</th>
-      <th>{{view view.datasetTargetFilterView}}</th>
-      <th>{{view view.clusterFilterView}}</th>
-      <th>{{view view.lastSuccessFilterView}}</th>
-      <th>{{view view.nextInstanceFilterView}}</th>
-    </tr>
-    </thead>
-    <tbody>
-    {{#if controller.isLoaded}}
-      {{#if view.pageContent}}
-        {{#each dataset in view.pageContent}}
-          {{#view view.DatasetView contentBinding="dataset"}}
+  <div class="row-fluid">
+    <div class="span4">
+      <div>
+        <div class="pull-left">
+          <h4>{{t mirroring.dataset.dataSets}}</h4>
+        </div>
+        {{#if App.isAdmin}}
+          <div class="mirroring-top-nav pull-right btn-group">
+            <button class="btn">{{t common.actions}}</button>
+            <button class="btn dropdown-toggle" data-toggle="dropdown">
+              <span class="caret"></span>
+            </button>
+            <ul class="dropdown-menu pull-left">
+              <li>
+                <a href="javascript:void(null);" {{action addNewDataset}}>
+                  <i class="icon-plus"></i>&nbsp;{{t mirroring.dataset.createDataset}}
+                </a>
+              </li>
+              <li>
+                <a {{action manageClusters}} href="javascript:void(null);">
+                  <i class="icon-cog"></i>&nbsp;{{t mirroring.dataset.manageClusters}}...
+                </a>
+              </li>
+            </ul>
+          </div>
+        {{/if}}
+      </div>
+      <table class="table table-bordered">
+        <thead>
+        <tr>
+          {{#view view.sortView contentBinding="view.filteredContent"}}
+          <th class="first"></th>
+          {{view view.parentView.nameSort}}
+          {{view view.parentView.statusSort}}
+          {{/view}}
+        </tr>
+        <tr>
+          <th class="first"></th>
+          <th>{{view view.nameFilterView}}</th>
+          <th>{{view view.statusFilterView}}</th>
+        </tr>
+        </thead>
+        <tbody>
+        {{#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="#" {{action "gotoShowJobs" dataset}}>{{unbound dataset.name}}</a>
             </td>
-            <td>{{dataset.sourceDir}}</td>
-            <td>{{dataset.targetDir}}</td>
-            <td>{{dataset.targetClusterName}}</td>
-            <td>{{view.lastSucceededDateFormatted}}</td>
-            <td>{{dataset.nextInstance}}</td>
-          {{/view}}
-        {{/each}}
-      {{else}}
-        <tr>
-          <td class="first"></td>
-          <td colspan="6">
-            {{t mirroring.table.noDatasets}}
-          </td>
-        </tr>
-      {{/if}}
-    {{else}}
-      <tr>
-        <td colspan="7">
-          <div class="spinner"></div>
-        </td>
-      </tr>
-      {{/if}}
-    </tbody>
-  </table>
-
-  <div class="page-bar">
-    <div class="items-on-page">
-      <label>{{t common.show}}: {{view view.rowsPerPageSelectView selectionBinding="view.displayLength"}}</label>
+            <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 colspan="3">
+              <div class="spinner"></div>
+            </td>
+          </tr>
+        {{/if}}
+        </tbody>
+      </table>
     </div>
-    <div class="info">{{view.paginationInfo}}</div>
-    <div class="paging_two_button">
-      {{view view.paginationLeft}}
-      {{view view.paginationRight}}
+    <div class="span8 jobs-container">
+      {{view App.MainDatasetJobsView controllerBinding="App.router.mainDatasetJobsController"}}
     </div>
   </div>
 </div>

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

@@ -15,109 +15,137 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 }}
-<div class="row-fluid">
-    <div class="top-portion">
-      <div class="pull-left">
-        <strong>{{view.dataset.name}}</strong>
-        <a class="pull-left" href="#/main/mirroring">&larr; {{t common.back}}</a>
-      </div>
-      {{#if App.isAdmin}}
-        <div class="switcher pull-right">
-          {{#if isScheduled}}
-            <span class="heatmap-host">
-                <a href="javascript:void(null)" data-toggle="modal"
-                   class="btn btn-danger enabled" {{action "suspend" target="controller"}}>
-                  <i class="icon-pause"></i>
-                  {{actionDesc}}
-                </a>
-                <span>{{content.status}}&nbsp;</span>
-              </span>
+<div class="dataset-details">
+  <div class="top-left">
+    <h4>{{view.dataset.name}}</h4>
+  </div>
+  <div class="bottom-left">
+    <table>
+      <tr>
+        <td>{{t mirroring.dataset.source}}:</td>
+        <td>{{view.dataset.sourceClusterName}}</td>
+        <td>{{view.dataset.sourceDir}}</td>
+      </tr>
+      <tr>
+        <td>{{t mirroring.dataset.target}}:</td>
+        <td>{{view.dataset.targetClusterName}}</td>
+        <td>{{view.dataset.targetDir}}</td>
+      </tr>
+    </table>
+  </div>
+  {{#if App.isAdmin}}
+    <div class="top-right">
+      <div class="btn-group pull-right">
+        <button class="btn">{{t common.actions}}</button>
+        <button class="btn dropdown-toggle" data-toggle="dropdown">
+          <span class="caret"></span>
+        </button>
+        <ul class="dropdown-menu pull-right">
+          {{#if view.dataset.isRunning}}
+            <li>
+              <a href="javascript:void(null);">
+                {{t mirroring.dataset.suspendInstance}}
+              </a>
+            </li>
+            <li>
+              <a href="javascript:void(null);">
+                {{t mirroring.dataset.killInstance}}
+              </a>
+            </li>
           {{else}}
-            <span>
-                <span>&nbsp;{{content.status}}</span>
-                <a href="javascript:void(null)" data-toggle="modal"
-                   class="btn btn-success" {{action "schedule" target="controller"}}>
-                  <i class="icon-play"></i>
-                  {{actionDesc}}
+            {{#if view.dataset.isSuspended}}
+              <li>
+                <a href="javascript:void(null);">
+                  {{t mirroring.dataset.schedule}}
+                </a>
+              </li>
+            {{else}}
+              <li>
+                <a href="javascript:void(null);">
+                  {{t mirroring.dataset.suspend}}
                 </a>
-              </span>
+              </li>
+            {{/if}}
+            <li>
+              <a href="javascript:void(null);">
+                {{t common.edit}}
+              </a>
+            </li>
+            <li>
+              <a href="javascript:void(null);">
+                {{t common.delete}}
+              </a>
+            </li>
           {{/if}}
-        </div>
-      {{/if}}
-      <br />
-    </div>
-    <div class="jobs-sidebar">
-        <h5>{{t common.details}}
-        </h5>
-        <hr/>
-        <p>{{t mirroring.dataset.target}}: <span class="pull-right">{{view.dataset.targetCluster.clusterName}}</span></p>
-        <p>{{t mirroring.dataset.sourceDir}}: <span class="pull-right">{{view.dataset.sourceDir}}</span></p>
-        <p>{{t mirroring.dataset.filespec}}: <span class="pull-right">{{view.dataset.filespec}}</span></p>
-
+        </ul>
+      </div>
+      <span {{bindAttr class=":label view.dataset.isRunning:label-info  view.dataset.isSuspended:label-warning  view.dataset.isScheduled:label-success :pull-right :dataset-status"}}>
+        {{view.dataset.statusFormatted}}</span>
     </div>
-    <div class="jobs-middleportion">
-        <div id="mirroring">
-            <table class="table table-bordered table-striped">
-                <thead>
-                <tr>
-                  {{#view view.sortView contentBinding="view.filteredContent"}}
-                      <th class="first"></th>
-                    {{view view.parentView.idSort}}
-                    {{view view.parentView.startSort}}
-                    {{view view.parentView.endSort}}
-                  {{/view}}
-                </tr>
-                <tr>
-                    <th class="first"></th>
-                    <th>{{view view.idFilterView}}</th>
-                    <th>{{view view.startFilterView}}</th>
-                    <th>{{view view.endFilterView}}</th>
-                </tr>
-                </thead>
-                <tbody>
-                {{#if controller.isLoaded}}
-                  {{#if view.pageContent}}
-                    {{#each job in view.pageContent}}
-                      {{#view view.JobView contentBinding="job"}}
-
-                      <td class="first">
-                        <span {{ bindAttr class="job.healthClass"}}></span>
-                      </td>
+  {{/if}}
+  <div class="bottom-right">{{t common.download}}: <a href="javascript:void(null);">{{view.dataset.name}}.xml</a></div>
+</div>
+<div>
+  <table class="table table-bordered table-striped">
+    <thead>
+    <tr>
+      {{#view view.sortView contentBinding="view.filteredContent"}}
+      <th class="first"></th>
+      {{view view.parentView.idSort}}
+      {{view view.parentView.startSort}}
+      {{view view.parentView.endSort}}
+      {{/view}}
+    </tr>
+    <tr>
+      <th class="first"></th>
+      <th>{{view view.idFilterView}}</th>
+      <th>{{view view.startFilterView}}</th>
+      <th>{{view view.endFilterView}}</th>
+    </tr>
+    </thead>
+    <tbody>
+    {{#if controller.isLoaded}}
+      {{#if view.pageContent}}
+        {{#each job in view.pageContent}}
+        {{#view view.JobView contentBinding="job"}}
 
-                      <td>{{unbound job.id}}</td>
-                      <td>{{unbound job.startFormatted}}</td>
-                      <td>{{unbound job.endFormatted}}</td>
-                      {{/view}}
-                    {{/each}}
-                  {{else}}
-                  <tr>
-                      <td class="first"></td>
-                      <td colspan="6">
-                        {{t mirroring.table.noJobs}}
-                      </td>
-                  </tr>
-                  {{/if}}
-                {{else}}
-                  <tr>
-                    <td colspan="7">
-                      <div class="spinner"></div>
-                    </td>
-                  </tr>
-                {{/if}}
-                </tbody>
-            </table>
+        <td class="first">
+          <span {{ bindAttr class="job.healthClass"}}></span>
+        </td>
 
-            <div class="page-bar">
-                <div class="items-on-page">
-                    <label>{{t common.show}}
-                        : {{view view.rowsPerPageSelectView selectionBinding="view.displayLength"}}</label>
-                </div>
-                <div class="info">{{view.paginationInfo}}</div>
-                <div class="paging_two_button">
-                  {{view view.paginationLeft}}
-                  {{view view.paginationRight}}
-                </div>
-            </div>
-        </div>
+        <td>{{unbound job.id}}</td>
+        <td>{{unbound job.startFormatted}}</td>
+        <td>{{unbound job.endFormatted}}</td>
+        {{/view}}
+        {{/each}}
+      {{else}}
+        <tr>
+          <td class="first"></td>
+          <td colspan="3">
+            {{t mirroring.table.noJobs}}
+          </td>
+        </tr>
+      {{/if}}
+    {{else}}
+      <tr>
+        <td colspan="4">
+          <div class="spinner"></div>
+        </td>
+      </tr>
+    {{/if}}
+    </tbody>
+  </table>
+  {{#if controller.isLoaded}}
+    <div class="page-bar">
+      <div class="items-on-page">
+        <label>{{t common.show}}
+          : {{view view.rowsPerPageSelectView selectionBinding="view.displayLength"}}</label>
+      </div>
+      <div class="info">{{view.paginationInfo}}</div>
+      <div class="paging_two_button">
+        {{view view.paginationLeft}}
+        {{view view.paginationRight}}
+      </div>
     </div>
+  {{/if}}
 </div>

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

@@ -39,45 +39,15 @@ App.MainDatasetsView = App.TableView.extend({
     return this.get('controller.targetClusters');
   }.property('controller.targetClusters'),
 
-  showClusterPopup: function (event) {
-    return App.ModalPopup.show({
-      header: Em.I18n.t('mirroring.sidebar.popup.clusters.header'),
-      bodyClass: Em.View.extend({
-        template: Em.Handlebars.compile("{{t mirroring.sidebar.popup.clusters.body}}")
-      })
-    });
-  },
-
   sortView: sort.wrapperView,
   nameSort: sort.fieldView.extend({
     name: 'name',
     displayName: Em.I18n.t('common.name')
   }),
 
-  sourceSort: sort.fieldView.extend({
-    name: 'sourceDir',
-    displayName: Em.I18n.t('mirroring.table.datasetSource')
-  }),
-
-  targetSort: sort.fieldView.extend({
-    name: 'targetDir',
-    displayName: Em.I18n.t('mirroring.table.datasetTarget')
-  }),
-
-  clusterSort: sort.fieldView.extend({
-    name: 'targetClusterName',
-    displayName: Em.I18n.t('common.cluster')
-  }),
-
-  lastSuccessSort: sort.fieldView.extend({
-    name: 'lastSucceededDate',
-    displayName: Em.I18n.t('mirroring.table.lastSuccess'),
-    type: 'number'
-  }),
-
-  nextInstanceSort: sort.fieldView.extend({
-    name: 'nextInstance',
-    displayName: Em.I18n.t('mirroring.table.nextInstance')
+  statusSort: sort.fieldView.extend({
+    name: 'status',
+    displayName: Em.I18n.t('mirroring.table.datasetStatus')
   }),
 
   /**
@@ -92,28 +62,10 @@ App.MainDatasetsView = App.TableView.extend({
     }
   }),
 
-  datasetSourceFilterView: filters.createTextView({
+  statusFilterView: filters.createSelectView({
     fieldType: 'input-medium',
     column: 2,
-    onChangeValue: function () {
-      this.get('parentView').updateFilter(this.get('column'), this.get('value'), 'string');
-    }
-  }),
-
-  datasetTargetFilterView: filters.createTextView({
-    fieldType: 'input-medium',
-    column: 3,
-    onChangeValue: function () {
-      this.get('parentView').updateFilter(this.get('column'), this.get('value'), 'string');
-    }
-  }),
-
-  clusterFilterView: filters.createSelectView({
-    fieldType: 'input-medium',
-    column: 4,
-    content: function () {
-      return ['Any'].concat(this.get('parentView.content').mapProperty('targetClusterName').uniq());
-    }.property('this.parentView.content'),
+    content: ['Any', 'Scheduled', 'Suspended', 'Running'],
     onClearValue: function () {
       if (this.get('value') === '') {
         this.set('value', 'Any');
@@ -128,27 +80,16 @@ App.MainDatasetsView = App.TableView.extend({
     }
   }),
 
-  lastSuccessFilterView: filters.createSelectView({
-    fieldType: 'input-medium',
-    column: 5,
-    content: ['Any', 'Past 1 Day', 'Past 2 Days', 'Past 7 Days', 'Past 14 Days', 'Past 30 Days'],
-    onChangeValue: function () {
-      this.get('parentView').updateFilter(this.get('column'), this.get('value'), 'date');
-    }
-  }),
-
-  nextInstanceFilterView: filters.createTextView({
-    fieldType: 'input-small',
-    column: 6,
-    onChangeValue: function () {
-      this.get('parentView').updateFilter(this.get('column'), this.get('value'), 'string');
-    }
-  }),
-
   DatasetView: Em.View.extend({
     content: null,
     tagName: 'tr',
 
+    classNameBindings: ['selectedClass'],
+
+    selectedClass: function () {
+      return this.get('controller.selectedDataset.id') === this.get('content.id') ? 'dataset-selected' : '';
+    }.property('controller.selectedDataset'),
+
     lastDurationFormatted: function () {
       var milliseconds = this.get('content.lastDuration');
       var h = Math.floor(milliseconds / 3600000);
@@ -176,11 +117,7 @@ App.MainDatasetsView = App.TableView.extend({
   colPropAssoc: function () {
     var associations = [];
     associations[1] = 'name';
-    associations[2] = 'sourceDir';
-    associations[3] = 'targetDir';
-    associations[4] = 'targetClusterName';
-    associations[5] = 'lastSucceededDate';
-    associations[6] = 'nextInstance';
+    associations[2] = 'status';
     return associations;
   }.property()
 

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

@@ -26,13 +26,6 @@ App.MainDatasetJobsView = App.TableView.extend({
     return this.get('controller.jobs');
   }.property('controller.jobs'),
 
-  didInsertElement: function () {
-    var mainMirroringController = App.router.get('mainMirroringController');
-    if (!mainMirroringController.get('isLoaded')) {
-      mainMirroringController.loadDatasets();
-    }
-  },
-
   dataset: function () {
     return this.get('controller.content');
   }.property('controller.content'),