AMBARI-4228. Mirroring: Dataset page redesign. (Mikhail Bayuk via akovalenko)

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

@@ -21,7 +21,12 @@ var App = require('app');
 App.MainJobsController = Em.Controller.extend({
   name: 'mainJobsController',
   jobs: function () {
-    return App.DataSetJob.find().filterProperty('dataset', this.get('content'));
+    var jobs = App.DataSetJob.find().filterProperty('dataset', this.get('content')).sort(
+      function(a, b) {
+        return a.get('id') < b.get('id');
+      }
+    );
+    return jobs;
   }.property('content'),
 
   actionDesc: function () {

ambari-web/app/messages.js

@@ -1682,9 +1682,10 @@ Em.I18n.translations = {
   'mirroring.dataset.selectTargetClusters':'Select Target Cluster...',
   'mirroring.dataset.name':'Name',
   'mirroring.dataset.save': 'Save & Run',
-  'mirroring.dataset.sourceDir':'Source Cluster Directory',
-  'mirroring.dataset.target':'Target Cluster',
+  'mirroring.dataset.sourceDir':'Location',
+  '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',
@@ -1709,8 +1710,8 @@ Em.I18n.translations = {
   'mirroring.table.lastFail':'Last Fail',
   'mirroring.table.lastDuration':'Last Duration',
   'mirroring.table.avgData':'Avg Data',
-  'mirroring.table.noJobs':'No jobs to display',
-  'mirroring.table.jobId':'Job ID',
+  'mirroring.table.noJobs':'No instances to display',
+  'mirroring.table.jobId':'Instance ID',
   'mirroring.table.start':'Start',
   'mirroring.table.end':'End',
   'mirroring.table.duration':'Duration',

ambari-web/app/models/dataset_job.js

@@ -28,8 +28,11 @@ App.DataSetJob = DS.Model.extend({
   duration: DS.attr('number'),
   startDateFormatted: function () {
     return date.dateFormatShort(this.get('startDate'));
-  }.property('startDate')
+  }.property('startDate'),
   //data : DS.attr('string')
+  healthClass: function () {
+    return this.get('status') === 'FAILED' ? 'health-status-DEAD-RED' : 'health-status-LIVE';
+  }.property('status')
 });
 
 
@@ -42,4 +45,4 @@ App.DataSetJob.FIXTURES = [/*
  racks: [1, 2, 3, 4, 5, 6],
  max_hosts_per_rack: 10
  }*/
-];
+];

ambari-web/app/styles/application.less

@@ -3663,6 +3663,16 @@ ul.filter {
   margin-bottom: 20px;
 }
 
+.switcher {
+  background-color: #e5e5e5;
+  -webkit-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
+  -moz-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
+  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
+  margin-bottom: 20px;
+  border-radius: 4px;
+  border-color: #D8D8D8;
+}
+
 .schedule-toggle {
   min-width: 190px;
 }
@@ -3892,9 +3902,9 @@ ul.filter {
   }
 }
 .jobs-middleportion{
-  width: 80%;
+  width: 82%;
   height: 100%;
-  float:left;
+  float: right;
 }
 
 /*End Mirroring*/

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

@@ -17,43 +17,43 @@
 }}
 <div class="row-fluid">
     <div class="top-portion">
-        <ul class="breadcrumb">
-            <li><a href="#/main/mirroring">{{t mirroring.dataset.AllDataSets}}</a> <span class="divider">/</span></li>
-            <li class="active">{{view.dataset.name}}</li>
-        </ul>
+      <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="mirroring-top-nav button-section pull-right">
-            {{#if isScheduled}}
-                <span class="label label-success">{{content.status}}</span>
+        <div class="switcher pull-right">
+          {{#if isScheduled}}
+            <span class="heatmap-host">
                 <a href="javascript:void(null)" data-toggle="modal"
-                   class="btn btn-danger" {{action "suspend" target="controller"}}>
-                    <i class="icon-pause"></i>
+                   class="btn btn-danger enabled" {{action "suspend" target="controller"}}>
+                  <i class="icon-pause"></i>
                   {{actionDesc}}
                 </a>
-            {{else}}
-                <span class="label label-important">{{content.status}}</span>
+                <span>{{content.status}}&nbsp;</span>
+              </span>
+          {{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>
+                  <i class="icon-play"></i>
                   {{actionDesc}}
                 </a>
-            {{/if}}
-          </div>
+              </span>
+          {{/if}}
+        </div>
       {{/if}}
-
+      <br />
     </div>
     <div class="jobs-sidebar">
-        <h5>{{t common.details}} <span class="pull-right"><a
-                href="#" {{action gotoEditDataset view.dataset}}>{{t common.edit}}</a></span></h5>
+        <h5>{{t common.details}}
+        </h5>
         <hr/>
-        <p>{{t mirroring.dataset.source}}: <span class="pull-right">{{view.dataset.sourceClusterName}}</span></p>
+        <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>
 
-        <p>{{t mirroring.dataset.target}}: <span class="pull-right">{{view.dataset.targetClusterName}}</span></p>
-        <h5>{{t common.stats}}</h5>
-        <hr/>
-        <p>{{t mirroring.dataset.avgData}}: <span class="pull-right">{{view.dataset.avgData}}</span></p>
-
-        <p>{{t mirroring.dataset.dateCreated}}: <span class="pull-right">{{view.dataset.createdDate}}</span></p>
     </div>
     <div class="jobs-middleportion">
         <div id="mirroring">
@@ -65,12 +65,6 @@
                     {{view view.parentView.idSort}}
                     {{view view.parentView.startSort}}
                     {{view view.parentView.endSort}}
-                    {{view view.parentView.durationSort}}
-                    {{view view.parentView.dataSort}}
-                      <th>
-                        {{t common.status}}
-                      </th>
-
                   {{/view}}
                 </tr>
                 <tr>
@@ -78,8 +72,6 @@
                     <th>{{view view.idFilterView}}</th>
                     <th>{{view view.startFilterView}}</th>
                     <th>{{view view.endFilterView}}</th>
-                    <th>{{view view.durationFilterView}}</th>
-                    <th>{{view view.dataFilterView}}</th>
                 </tr>
                 </thead>
                 <tbody>
@@ -88,41 +80,12 @@
                       {{#view view.JobView contentBinding="job"}}
 
                       <td class="first">
+                        <span {{ bindAttr class="job.healthClass"}}></span>
                       </td>
 
                       <td>{{unbound job.id}}</td>
                       <td>{{view.startFormatted}}</td>
                       <td>{{view.endFormatted}}</td>
-
-                      <td>
-                        {{view.durationFormatted}}
-                      </td>
-
-                      <td>{{job.data}}</td>
-                      <td>
-
-                        {{#if view.canActionBeTaken}}
-                            <div class="btn-group">
-                                <a {{bindAttr class="view.statusClass"}} data-toggle="dropdown" href="#">
-                                  {{view.content.status}}
-                                    <span class="caret"></span>
-                                </a>
-                                <ul class="dropdown-menu">
-                                  {{#each view.listOfOptions}}
-                                      <li>
-                                          <a href="#" {{action "changeStatus" this target="view" on="click"}}>{{title}}</a>
-                                      </li>
-                                  {{/each}}
-                                </ul>
-                            </div>
-                        {{else}}
-                          {{#if view.isKilled}}
-                              <span class="label label-important">{{view.content.status}}</span>
-                          {{else}}
-                              <span class="label label-info">{{view.content.status}}</span>
-                          {{/if}}
-                        {{/if}}
-                      </td>
                       {{/view}}
                     {{/each}}
                   {{else}}
@@ -149,4 +112,4 @@
             </div>
         </div>
     </div>
-</div>
+</div>