AMBARI-2373. Multiple UI improvements for Dashboard widgets. (Xi Wang via yusaku)

git-svn-id: https://svn.apache.org/repos/asf/incubator/ambari/trunk@1493192 13f79535-47bb-0310-9956-ffa450edef68

ambari-web/app/messages.js

@@ -999,8 +999,8 @@ Em.I18n.translations = {
   'dashboard.widgets.JobTrackerHeap': 'JobTracker Heap',
   'dashboard.widgets.JobTrackerCpu': 'JobTracker CPU WIO',
   'dashboard.widgets.JobTrackerCapacity': 'JobTracker Capacity',
-  'dashboard.widgets.DataNodeUp': 'DataNode Live',
-  'dashboard.widgets.TaskTrackerUp': 'TaskTracker Live',
+  'dashboard.widgets.DataNodeUp': 'DataNodes Live',
+  'dashboard.widgets.TaskTrackerUp': 'TaskTrackers Live',
   'dashboard.widgets.NameNodeRpc': 'NameNode RPC',
   'dashboard.widgets.JobTrackerRpc': 'JobTracker RPC',
   'dashboard.widgets.MapReduceSlots': 'MapReduce Slots',
@@ -1013,9 +1013,9 @@ Em.I18n.translations = {
   'dashboard.widgets.MapReduceLinks': 'MapReduce Links',
   'dashboard.widgets.HBaseLinks': 'HBase Links',
   'dashboard.widgets.HBaseAverageLoad': 'HBase Ave Load',
-  'dashboard.widgets.HBaseMasterHeap': 'HBase MasterHeap',
-  'dashboard.widgets.HBaseRegionsInTransition': 'Region InTransition',
-
+  'dashboard.widgets.HBaseMasterHeap': 'HBase Master Heap',
+  'dashboard.widgets.HBaseRegionsInTransition': 'Region In Transition',
+  'dashboard.widgets.HBaseMasterUptime': 'HBase Master Uptime',
 
   'dashboard.services':'Services',
   'dashboard.services.hosts':'Hosts',

ambari-web/app/styles/application.less

@@ -1963,6 +1963,7 @@ table.graphs {
       margin-right: 3px;
       margin-top: 5px;
       margin-bottom: 7px;
+      height: 163px;
     }
     .thumbnails  li {
       height:150px;
@@ -2044,6 +2045,7 @@ table.graphs {
     }
     .cluster-metrics .thumbnail:hover{
       background-color: #909090;
+      cursor: move;
       .corner-icon{
         display:block;
         text-decoration: none;
@@ -2080,23 +2082,28 @@ table.graphs {
       }
       .link-button{
         padding-top: 7px;
-        padding-left: 20px;
+        padding-left: 70px;
       }
       .widget-content{
-        text-align: left;
+        text-align: center;
         font-weight: none;
-        font-size: 10px;
+        font-size: 11px;
         color: #555555;
-        padding-top: 35px;
-        padding-left: 10px;
+        padding-top: 40px;
+        table{
+          vertical-position: center;
+          text-align: center;
+          margin-left:auto;
+          margin-right:auto;
+        }
         td{
           padding-top: 2px;
-          padding-left:5px ;
         }
       }
     }
     .links .thumbnail:hover{
       background-color: #909090;
+      cursor: move;
       .corner-icon{
         display:block;
         text-decoration: none;
@@ -2122,6 +2129,7 @@ table.graphs {
     }
     .has-hidden-info .thumbnail:hover {
       background-color: #909090;
+      cursor: move;
       text-shadow: #000 0px 0px 15px;
       .corner-icon{
         display:block;
@@ -4248,8 +4256,10 @@ i.icon-asterisks {
     }
     .links .thumbnail .widget-content{
         font-weight: bold;
-        font-size: 11px;
-        padding-left: 18px;
+        font-size: 12px;
+    }
+    .links .thumbnail .link-button{
+      padding-left: 100px;
     }
     #map-reduce-slots-text{
       font-size: 12px;

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

@@ -43,15 +43,9 @@
                   {{view widgetClass }}
                 </div>
               {{else}}
-                {{#if widgetClass.isLinks}}
-                  <div class="span4p8">
-                    {{view widgetClass }}
-                  </div>
-                {{else}}
-                  <div class="span2p4">
-                    {{view widgetClass }}
-                  </div>
-                {{/if}}
+                <div class="span2p4">
+                  {{view widgetClass }}
+                </div>
               {{/if}}
             {{/each}}
           {{/if}}

ambari-web/app/templates/main/dashboard/widgets/cluster_metrics.hbs

@@ -0,0 +1,30 @@
+{{!
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+}}
+
+<div class="cluster-metrics">
+  <li class="thumbnail row">
+    <a class="corner-icon" href="#" {{action deleteWidget target="view"}}>
+        <i class="icon-remove-sign icon-large"></i>
+    </a>
+    <div class="caption span10">{{view.title}}</div>
+
+    <div class="widget-content" >
+      {{view view.content}}
+    </div>
+  </li>
+</div>

ambari-web/app/templates/main/dashboard/widgets/hbase_links.hbs

@@ -0,0 +1,75 @@
+{{!
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+}}
+
+<div class="links">
+  <li class="thumbnail row">
+    <a class="corner-icon" href="#" {{action deleteWidget target="view"}}><i class="icon-remove-sign icon-large"></i></a>
+    <div class="caption span10"> {{view.title}}</div>
+
+    <div class="widget-content" >
+      <table>
+        <!--hbase master server-->
+        <tr>
+          <td>
+            {{#if view.activeMaster}}
+              <a href="#" {{action showDetails view.activeMaster.host}}>{{t dashboard.services.hbase.masterServer}}</a>
+              {{#if view.passiveMasters.length}}
+                  {{view.passiveMasterOutput}}
+              {{/if}}
+            {{else}}
+              {{t dashboard.services.hbase.noMasterServer}}
+            {{/if}}
+          </td>
+        </tr>
+        <!--region servers-->
+        <tr>
+            <td><a href="#" {{action filterHosts view.regionServerComponent}}>{{view.model.regionServers.length}} {{t dashboard.services.hbase.regionServers}}</a></td>
+        </tr>
+        <!--hbase master Web UI-->
+        <tr>
+          <td>
+            {{#if view.activeMaster}}
+              <a {{bindAttr href="view.hbaseMasterWebUrl"}} target="_blank">{{t dashboard.services.hbase.masterWebUI}}</a>
+            {{else}}
+              {{t services.service.summary.notAvailable}}
+            {{/if}}
+          </td>
+        </tr>
+      </table>
+    </div>
+
+    <div class="link-button">
+      {{#if view.model.quickLinks.length}}
+        {{#view App.QuickViewLinks contentBinding="view.model"}}
+          <div class="btn-group">
+            <a class="btn btn-mini dropdown-toggle" data-toggle="dropdown" href="#">
+              {{t common.more}}
+              <span class="caret"></span>
+            </a>
+            <ul class="dropdown-menu">
+              {{#each view.quickLinks}}
+                <li><a {{bindAttr href="url"}} target="_blank">{{label}}</a></li>
+              {{/each}}
+            </ul>
+          </div>
+        {{/view}}
+      {{/if}}
+    </div>
+
+  </li>
+</div>

ambari-web/app/templates/main/dashboard/widgets/hdfs_links.hbs

@@ -0,0 +1,63 @@
+{{!
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+}}
+
+<div class="links">
+  <li class="thumbnail row">
+    <a class="corner-icon" href="#" {{action deleteWidget target="view"}}>
+      <i class="icon-remove-sign icon-large"></i>
+    </a>
+    <div class="caption span10"> {{view.title}}</div>
+
+    <div class="widget-content" >
+      <table>
+        <!--NameNode-->
+        <tr>
+          <td><a href="#" {{action showDetails view.model.nameNode}}>{{t dashboard.services.hdfs.nanmenode}}</a></td>
+        </tr>
+        <!--SecondaryNameNode-->
+        <tr>
+          <td><a href="#" {{action showDetails view.model.snameNode}}>{{t dashboard.services.hdfs.snanmenode}}</a></td>
+        </tr>
+        <!--Data Nodes-->
+        <tr>
+          <td>
+              <a href="#" {{action filterHosts view.dataNodeComponent}}>{{view.model.dataNodes.length}} {{t dashboard.services.hdfs.datanodes}}</a>
+          </td>
+        </tr>
+      </table>
+    </div>
+
+    <div class="link-button">
+      {{#if view.model.quickLinks.length}}
+        {{#view App.QuickViewLinks contentBinding="view.model"}}
+          <div class="btn-group">
+            <a class="btn btn-mini dropdown-toggle" data-toggle="dropdown" href="#">
+              {{t common.more}}
+              <span class="caret"></span>
+            </a>
+            <ul class="dropdown-menu">
+              {{#each view.quickLinks}}
+                  <li><a {{bindAttr href="url"}} target="_blank">{{label}}</a></li>
+              {{/each}}
+            </ul>
+          </div>
+        {{/view}}
+      {{/if}}
+    </div>
+  </li>
+</div>

ambari-web/app/templates/main/dashboard/widgets/mapreduce_links.hbs

@@ -0,0 +1,61 @@
+{{!
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+}}
+
+<div class="links">
+  <li class="thumbnail row">
+    <a class="corner-icon" href="#" {{action deleteWidget target="view"}}>
+      <i class="icon-remove-sign icon-large"></i>
+    </a>
+    <div class="caption span10"> {{view.title}}</div>
+
+    <div class="widget-content" >
+      <table>
+        <!--jobTracker-->
+        <tr>
+          <td><a href="#" {{action showDetails view.model.jobTracker}}>{{t services.service.summary.jobTracker}}</a></td>
+        </tr>
+        <!--taskTrackers-->
+        <tr>
+          <td><a href="#" {{action filterHosts view.taskTrackerComponent}}>{{view.model.taskTrackers.length}} {{t dashboard.services.mapreduce.taskTrackers}}</a></td>
+        </tr>
+        <!--jobTracker Web UI-->
+        <tr>
+          <td><a {{bindAttr href="view.jobTrackerWebUrl"}} target="_blank">{{t services.service.summary.jobTrackerWebUI}}</a></td>
+        </tr>
+      </table>
+    </div>
+
+    <div class="link-button">
+      {{#if view.model.quickLinks.length}}
+        {{#view App.QuickViewLinks contentBinding="view.model"}}
+          <div class="btn-group">
+            <a class="btn btn-mini dropdown-toggle" data-toggle="dropdown" href="#">
+              {{t common.more}}
+              <span class="caret"></span>
+            </a>
+          <ul class="dropdown-menu">
+            {{#each view.quickLinks}}
+              <li><a {{bindAttr href="url"}} target="_blank">{{label}}</a></li>
+              {{/each}}
+            </ul>
+          </div>
+        {{/view}}
+      {{/if}}
+    </div>
+  </li>
+</div>

ambari-web/app/templates/main/dashboard/widgets/mapreduce_slots.hbs

@@ -0,0 +1,54 @@
+{{!
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+}}
+
+<div class="has-hidden-info">
+  <li class="thumbnail row" >
+    <a class="corner-icon" href="#" {{action deleteWidget target="view"}}><i class="icon-remove-sign icon-large"></i></a>
+    <div class="caption span10"> {{view.title}}</div>
+
+    <div class="hidden-info">
+      <table align="center">
+        {{#each line in view.hiddenInfo}}
+          <tr><td>{{line}}</td></tr>{{/each}}
+      </table>
+    </div>
+
+    {{#if view.isViewExist}}
+      <div class="widget-content row-fluid" id="map-reduce-slots-text" >
+        <ul class="span12">
+          <div class="span3"> {{t dashboard.widgets.mapSlots}}</div>
+          <div class="progress span5" id="map-reduce-slots-bar1">
+            <div class="bar bar-success" {{bindAttr style="view.map_occupied"}}></div>
+            <div class="bar bar-warning" {{bindAttr style="view.map_reserved"}}></div>
+            </div>
+          <div class="span3" id="map-reduce-slots-num1"> {{view.map_display_text}}</div>
+        </ul>
+        <ul class="span12">
+          <div class="span3"> {{t dashboard.widgets.reduceSlots}}</div>
+          <div class="progress span5" id="map-reduce-slots-bar2">
+            <div class="bar bar-success" {{bindAttr style="view.reduce_occupied"}}></div>
+            <div class="bar bar-warning" {{bindAttr style="view.reduce_reserved"}}></div>
+            </div>
+          <div class="span3" id="map-reduce-slots-num2"> {{view.reduce_display_text}}</div>
+        </ul>
+      </div>
+    {{else}}
+      <div class="widget-content-isNA" >{{t services.service.summary.notAvailable}}</div>
+    {{/if}}
+  </li>
+</div>

ambari-web/app/templates/main/dashboard/widgets/pie_chart.hbs

@@ -0,0 +1,45 @@
+{{!
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+}}
+
+<div class="has-hidden-info">
+  <li class="thumbnail row">
+    <a class="corner-icon" href="#" {{action deleteWidget target="view"}}>
+      <i class="icon-remove-sign icon-large"></i>
+    </a>
+    <div class="caption span10">{{view.title}}</div>
+    <a class="corner-icon span1" href="#" {{action editWidget target="view"}}>
+      <i class="icon-edit"></i>
+    </a>
+
+    <div class="hidden-info">
+      <table align="center">
+        {{#each line in view.hiddenInfo}}
+            <tr><td>{{line}}</td></tr>
+        {{/each}}
+      </table>
+    </div>
+
+    {{#if view.isPieExist}}
+      <div class="widget-content" >
+        {{view view.content modelBinding="view.model" thresh1Binding="view.thresh1" thresh2Binding="view.thresh2"}}
+      </div>
+    {{else}}
+      <div class="widget-content-isNA" >{{t services.service.summary.notAvailable}}</div>
+    {{/if}}
+  </li>
+</div>

ambari-web/app/templates/main/dashboard/widgets/simple_text.hbs

@@ -0,0 +1,39 @@
+{{!
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+}}
+
+<div class="has-hidden-info">
+  <li class="thumbnail row" >
+    <a class="corner-icon" href="#" {{action deleteWidget target="view"}}>
+      <i class="icon-remove-sign icon-large"></i>
+    </a>
+    <div class="caption span10"> {{view.title}}</div>
+    <a class="corner-icon span1" href="#" {{action editWidget target="view"}}>
+      <i class="icon-edit"></i>
+    </a>
+
+    <div class="hidden-info">
+      <table align="center">
+        {{#each line in view.hiddenInfo}}
+          <tr><td>{{line}}</td></tr>
+        {{/each}}
+      </table>
+    </div>
+
+    <div class="widget-content">{{view.content}}</div>
+  </li>
+</div>

ambari-web/app/templates/main/dashboard/widgets/uptime.hbs

@@ -0,0 +1,38 @@
+{{!
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+}}
+
+<div class="has-hidden-info">
+  <li class="thumbnail row" >
+    <a class="corner-icon" href="#" {{action deleteWidget target="view"}}>
+      <i class="icon-remove-sign icon-large"></i>
+    </a>
+    <div class="caption span11"> {{view.title}} </div>
+    <div class="hidden-info-three-line">
+      <table align="center">
+        {{#each line in view.hiddenInfo}}
+          <tr>
+            <td>
+              {{line}}
+            </td>
+          </tr>
+        {{/each}}
+      </table>
+    </div>
+    <div class="widget-content">{{view.content}}</div>
+  </li>
+</div>

ambari-web/app/views.js

@@ -108,6 +108,7 @@ require('views/main/dashboard/widgets/hbase_links');
 require('views/main/dashboard/widgets/hbase_master_heap');
 require('views/main/dashboard/widgets/hbase_average_load');
 require('views/main/dashboard/widgets/hbase_regions_in_transition');
+require('views/main/dashboard/widgets/hbase_master_uptime');
 
 require('views/main/service');
 require('views/main/service/menu');

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

@@ -218,6 +218,7 @@ App.MainDashboardView = Em.View.extend({
       case '20': return App.HBaseMasterHeapPieChartView;
       case '21': return App.HBaseAverageLoadView;
       case '22': return App.HBaseRegionsInTransitionView;
+      case '23': return App.HBaseMasterUptimeView;
     }
 
   },
@@ -228,11 +229,11 @@ App.MainDashboardView = Em.View.extend({
       '11', '12', '13', '14', //cluster-metrics
       '1', '2', '3', '4', '5', '15', '17', //hdfs
       '6', '7', '8', '9', '10', '18', '16',//map reduce
-      '20', '21', '19', '22' //hbase
+      '20', '21', '19', '23' //hbase
     ], // all in order
-    hidden:[],
+    hidden:[['22','Region In Transition']],
     threshold:{1: [40,70], 2: [40,70], 3: [40,70], 4: [40,70], 5: [0.5, 2], 6: [40,70], 7: [40,70], 8: [40,70], 9: [0.5, 2],
-      10:[], 11:[], 12:[], 13:[], 14:[], 15:[], 16:[], 17:[], 18:[], 19:[], 20:[40,70], 21:[10,19.2], 22: [3, 10]} // id:[thresh1, thresh2]
+      10: [], 11: [], 12: [], 13: [], 14: [], 15: [], 16: [], 17: [], 18: [], 19: [], 20: [40,70], 21: [10,19.2], 22: [3, 10], 23: []} // id:[thresh1, thresh2]
   }),
   persistKey: function(){
     var loginName = App.router.get('loginName');
@@ -253,7 +254,7 @@ App.MainDashboardView = Em.View.extend({
         success: function (response) {
           if (response) {
             var value = jQuery.parseJSON(response);
-            console.log('Persist value with key ' + key + '. JSON Value is: ' + response);
+            console.log('Got persist value from server with key ' + key + '. Value is: ' + response);
             self.set('currentPrefObject', value);
             return value;
            }
@@ -285,16 +286,19 @@ App.MainDashboardView = Em.View.extend({
       url: url,
       data: JSON.stringify(keyValuePair),
       beforeSend: function () {
-        console.log('BeforeSend: persistKeyValues', keyValuePair);
+        console.log('BeforeSend to persist: persistKeyValues', keyValuePair);
       }
     });
   },
 
   resetAllWidgets: function(){
-    if(!App.testMode){
-      this.postUserPref(this.get('persistKey'), this.get('initPrefObject'));
-    }
-    this.translateToReal(this.get('initPrefObject'));
+    var self = this;
+    App.showConfirmationPopup(function() {
+      if(!App.testMode){
+        self.postUserPref(self.get('persistKey'), self.get('initPrefObject'));
+      }
+      self.translateToReal(self.get('initPrefObject'));
+    });
   },
 
   updateServices: function(){

ambari-web/app/views/main/dashboard/widget.js

@@ -21,6 +21,7 @@ var App = require('app');
 App.DashboardWidgetView = Em.View.extend({
 
   title: null,
+  templateName: null, // each has specific template
 
   model : function () {
     if (this.get('model_type') == 'hdfs') {
@@ -35,14 +36,14 @@ App.DashboardWidgetView = Em.View.extend({
   id: null, // id 1-10 used to identify
   viewID: function(){ // used by re-sort
     return 'widget-' + this.id;
-  }.property('id'),  //html id bind to view-class: widget-(1-10)
+  }.property('id'),  //html id bind to view-class: widget-(1)
   attributeBindings: ['viewID'],
 
   isPieChart: false,
   isText: false,
   isProgressBar: false,
   isLinks: false,
-  content: null, // widget content pieChart/ text/ progress bar. etc
+  content: null, // widget content pieChart/ text/ progress bar/links/ metrics. etc
   hiddenInfo: null, // more info details
 
   thresh1: null, //num not string
@@ -54,83 +55,14 @@ App.DashboardWidgetView = Em.View.extend({
     });
   },
 
-  template: Ember.Handlebars.compile([
-
-    '{{#if view.isPieChart}}',
-    '<div class="has-hidden-info">',
-    '<li class="thumbnail row">',
-    '<a class="corner-icon" href="#" {{action deleteWidget target="view"}}>','<i class="icon-remove-sign icon-large"></i>','</a>',
-    '<div class="caption span10">', '{{view.title}}','</div>',
-    '<a class="corner-icon span1" href="#" {{action editWidget target="view"}}>','<i class="icon-edit"></i>','</a>',
-    '<div class="hidden-info">', '<table align="center">{{#each line in view.hiddenInfo}}', '<tr><td>{{line}}</td></tr>','{{/each}}</table>','</div>',
-
-    '<div class="widget-content" >','{{view view.content modelBinding="view.model" thresh1Binding="view.thresh1" thresh2Binding="view.thresh2"}}','</div>',
-    '</li>',
-    '</div>',
-    '{{/if}}',
-
-    '{{#if view.isText }}',
-    '<div class="has-hidden-info">',
-    '<li class="thumbnail row" >',
-    '<a class="corner-icon" href="#" {{action deleteWidget target="view"}}>','<i class="icon-remove-sign icon-large"></i>','</a>',
-    '<div class="caption span10">', '{{view.title}}','</div>',
-    '<a class="corner-icon span1" href="#" {{action editWidget target="view"}}>','<i class="icon-edit"></i>','</a>',
-    '<div class="hidden-info">', '<table align="center">{{#each line in view.hiddenInfo}}', '<tr><td>{{line}}</td></tr>','{{/each}}</table>','</div>',
-
-    '<div class="widget-content">{{view.content}}</div>',
-    '</li>',
-    '</div>',
-    '{{/if}}',
-
-    '{{#if view.isProgressBar}}',
-    '<div class="has-hidden-info">',
-    '<li class="thumbnail row" >',
-    '<a class="corner-icon" href="#" {{action deleteWidget target="view"}}>','<i class="icon-remove-sign icon-large"></i>','</a>',
-    '<div class="caption span10">', '{{view.title}}','</div>',
-    '<a class="span1">', '</a>',
-    '<div class="hidden-info">', '<table align="center">{{#each line in view.hiddenInfo}}', '<tr><td>{{line}}</td></tr>','{{/each}}</table>','</div>',
-
-    '<div class="widget-content row-fluid" id="map-reduce-slots-text" >',
-
-      '<ul class="span12">',
-        '<div class="span3"> {{t dashboard.widgets.mapSlots}}</div>',
-        '<div class="progress span5" id="map-reduce-slots-bar1">',
-          '<div class="bar bar-success" {{bindAttr style="view.map_occupied"}}></div>',
-        '<div class="bar bar-warning" {{bindAttr style="view.map_reserved"}}></div>',
-        ' </div>',
-        '<div class="span3" id="map-reduce-slots-num1"> {{view.map_display_text}}</div>',
-      '</ul>',
-      '<ul class="span12">',
-        '<div class="span3"> {{t dashboard.widgets.reduceSlots}}</div>',
-        '<div class="progress span5" id="map-reduce-slots-bar2">',
-          '<div class="bar bar-success" {{bindAttr style="view.reduce_occupied"}}></div>',
-          '<div class="bar bar-warning" {{bindAttr style="view.reduce_reserved"}}></div>',
-        '</div>',
-        '<div class="span3" id="map-reduce-slots-num2"> {{view.reduce_display_text}}</div>',
-      '</ul>',
-
-    '</div>',
-    '</li>',
-    '</div>',
-    '{{/if}}',
-
-    '{{#if view.isClusterMetrics}}',
-    '<div class="cluster-metrics">',
-    '<li class="thumbnail row">',
-    '<a class="corner-icon" href="#" {{action deleteWidget target="view"}}>','<i class="icon-remove-sign icon-large"></i>','</a>',
-    '<div class="caption span10">', '{{view.title}}','</div>',
-    '<div class="widget-content" >','{{view view.content}}','</div>',
-    //'<p class="hidden-info">', '{{view.hiddenInfo}}', '</p>',
-    '</li>',
-    '</div>',
-    '{{/if}}'
-
-  ].join('\n')),
-
   deleteWidget: function (event) {
     var parent = this.get('parentView');
-
-    if (!App.testMode) {
+    if(App.testMode) {
+      //update view on dashboard
+      var obj_class = parent.widgetsMapper(this.id);
+      parent.get('visibleWidgets').removeObject(obj_class);
+      parent.get('hiddenWidgets').pushObject(Em.Object.create({displayName: this.title, id: this.id, checked: false}));
+    }else{
       //reconstruct new persist value then post in persist
       parent.getUserPref(parent.get('persistKey'));
       var oldValue = parent.get('currentPrefObject');
@@ -147,11 +79,9 @@ App.DashboardWidgetView = Em.View.extend({
       }
       newValue.hidden.push([deletedId, this.title]);
       parent.postUserPref(parent.get('persistKey'), newValue);
+      parent.translateToReal(newValue);
     }
-    //update view on dashboard
-    var obj_class = parent.widgetsMapper(this.id);
-    parent.get('visibleWidgets').removeObject(obj_class);
-    parent.get('hiddenWidgets').pushObject(Em.Object.create({displayName: this.title, id: this.id, checked: false}));
+
   },
 
   editWidget: function (event) {

ambari-web/app/views/main/dashboard/widgets/datanode_live.js

@@ -20,6 +20,7 @@ var App = require('app');
 
 App.DataNodeUpView = App.DashboardWidgetView.extend({
 
+  templateName: require('templates/main/dashboard/widgets/simple_text'),
   title: Em.I18n.t('dashboard.widgets.DataNodeUp'),
   id: '4',
 

ambari-web/app/views/main/dashboard/widgets/hbase_average_load.js

@@ -20,6 +20,7 @@ var App = require('app');
 
 App.HBaseAverageLoadView = App.DashboardWidgetView.extend({
 
+  templateName: require('templates/main/dashboard/widgets/simple_text'),
   title: Em.I18n.t('dashboard.widgets.HBaseAverageLoad'),
   id: '21',
 

ambari-web/app/views/main/dashboard/widgets/hbase_links.js

@@ -20,6 +20,7 @@ var App = require('app');
 
 App.HBaseLinksView = App.DashboardWidgetView.extend({
 
+  templateName: require('templates/main/dashboard/widgets/hbase_links'),
   title: Em.I18n.t('dashboard.widgets.HBaseLinks'),
   id: '19',
 
@@ -29,71 +30,6 @@ App.HBaseLinksView = App.DashboardWidgetView.extend({
   isLinks: true,
   model_type: 'hbase',
 
-  template: Ember.Handlebars.compile([
-    '<div class="links">',
-    '<li class="thumbnail row">',
-      '<a class="corner-icon" href="#" {{action deleteWidget target="view"}}>','<i class="icon-remove-sign icon-large"></i>','</a>',
-    '<div class="caption span8">', '{{view.title}}','</div>',
-    '<div class="span3 link-button">',
-    '{{#if view.model.quickLinks.length}}',
-      '{{#view App.QuickViewLinks contentBinding="view.model"}}',
-        '<div class="btn-group">',
-          '<a class="btn btn-mini dropdown-toggle" data-toggle="dropdown" href="#">',
-            '{{t common.more}}',
-            '<span class="caret"></span>',
-          '</a>',
-          '<ul class="dropdown-menu">',
-            '{{#each view.quickLinks}}',
-              '<li><a {{bindAttr href="url"}} target="_blank">{{label}}</a></li>',
-            '{{/each}}',
-          '</ul>',
-        '</div>',
-      '{{/view}}',
-    '{{/if}}',
-
-    '</div>',
-    '<div class="widget-content" >',
-    '<table>',
-    //hbase master server
-    '<tr>',
-    '<td>{{t dashboard.services.hbase.masterServer}}</td>',
-    '<td>',
-    '{{#if view.activeMaster}}',
-      '<a href="#" {{action showDetails view.activeMaster.host}}>{{view.activeMasterTitle}}</a>',
-      '{{#if view.passiveMasters.length}}',
-        '{{view.passiveMasterOutput}}',
-      '{{/if}}',
-    '{{else}}',
-      '{{t dashboard.services.hbase.noMasterServer}}',
-    '{{/if}}',
-    '</td>',
-    '</tr>',
-    //region servers
-    '<tr>',
-    '<td>{{t dashboard.services.hbase.regionServers}}</td>',
-    '<td><a href="#" {{action filterHosts view.regionServerComponent}}>{{view.model.regionServers.length}} {{t dashboard.services.hbase.regionServers}}</a></td>',
-    '</tr>',
-
-    // hbase master Web UI
-    '<tr>',
-    '<td>{{t dashboard.services.hbase.masterWebUI}}</td>',
-    '<td>' +
-    '{{#if view.activeMaster}}',
-      '<a {{bindAttr href="view.hbaseMasterWebUrl"}} target="_blank">{{view.activeMaster.host.publicHostName}}:60010</a>',
-    '{{else}}',
-      '{{t services.service.summary.notAvailable}}',
-    '{{/if}}',
-    '</td>',
-    '</tr>',
-    '</table>',
-
-    '</div>',
-    '</li>',
-    '</div>'
-
-
-  ].join('\n')),
-
   /**
    * All master components
    */

ambari-web/app/views/main/dashboard/widgets/hbase_master_heap.js

@@ -20,8 +20,8 @@ var App = require('app');
 
 App.HBaseMasterHeapPieChartView = App.DashboardWidgetView.extend({
 
+  templateName: require('templates/main/dashboard/widgets/pie_chart'),
   title: Em.I18n.t('dashboard.widgets.HBaseMasterHeap'),
-
   id: '20',
 
   isPieChart: true,
@@ -34,8 +34,8 @@ App.HBaseMasterHeapPieChartView = App.DashboardWidgetView.extend({
     var heapMax = this.get('model').get('heapMemoryMax') || 0;
     var percent = heapMax > 0 ? 100 * heapUsed / heapMax : 0;
     var result = [];
-    result.pushObject(heapUsed.bytesToSize(1, "parseFloat") + ' of ' + heapMax.bytesToSize(1, "parseFloat"));
     result.pushObject(percent.toFixed(1) + '% used');
+    result.pushObject(heapUsed.bytesToSize(1, "parseFloat") + ' of ' + heapMax.bytesToSize(1, "parseFloat"));
     return result;
   }.property('model.heapMemoryUsed', 'model.heapMemoryMax'),
 
@@ -48,24 +48,6 @@ App.HBaseMasterHeapPieChartView = App.DashboardWidgetView.extend({
     return total > 0 ;
   }.property('model.heapMemoryMax'),
 
-  template: Ember.Handlebars.compile([
-
-    '<div class="has-hidden-info">',
-    '<li class="thumbnail row">',
-      '<a class="corner-icon" href="#" {{action deleteWidget target="view"}}>','<i class="icon-remove-sign icon-large"></i>','</a>',
-    '<div class="caption span10">', '{{view.title}}','</div>',
-    '<a class="corner-icon span1" href="#" {{action editWidget target="view"}}>','<i class="icon-edit"></i>','</a>',
-    '<div class="hidden-info">', '<table align="center">{{#each line in view.hiddenInfo}}', '<tr><td>{{line}}</td></tr>','{{/each}}</table>','</div>',
-
-    '{{#if view.isPieExist}}' +
-      '<div class="widget-content" >','{{view view.content modelBinding="view.model" thresh1Binding="view.thresh1" thresh2Binding="view.thresh2"}}','</div>',
-    '{{else}}',
-    '<div class="widget-content-isNA" >','{{t services.service.summary.notAvailable}}','</div>',
-    '{{/if}}',
-    '</li>',
-    '</div>'
-  ].join('\n')),
-
   content: App.ChartPieView.extend({
 
     model: null,  //data bind here

ambari-web/app/views/main/dashboard/widgets/hbase_master_uptime.js

@@ -0,0 +1,122 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+var App = require('app');
+var date = require('utils/date');
+
+App.HBaseMasterUptimeView = App.DashboardWidgetView.extend({
+
+  templateName: require('templates/main/dashboard/widgets/uptime'),
+  title: Em.I18n.t('dashboard.widgets.HBaseMasterUptime'),
+  id: '23',
+
+  isPieChart: false,
+  isText: true,
+  isProgressBar: false,
+  model_type: 'hbase',
+  hiddenInfo: [],
+
+  classNameBindings: ['isRed', 'isOrange', 'isGreen', 'isNA'],
+  isGreen: function () {
+    return this.get('data') != null;
+  }.property('data'),
+  isOrange: function () {
+    return false;
+  }.property('data'),
+  isRed: function () {
+    return false;
+  }.property('data'),
+  isNA: function () {
+    return this.get('data') == null;
+  }.property('data'),
+
+  thresh1: 5,
+  thresh2: 10,
+  maxValue: 'infinity',
+
+  data: function () {
+    var uptime = this.get('model.masterStartTime');
+    if (uptime && uptime > 0) {
+      var uptimeString = this.timeConverter(uptime);
+      var diff = (new Date()).getTime() - uptime;
+      if (diff < 0) {
+        diff = 0;
+      }
+      var formatted = date.timingFormat(diff); //17.67 days
+      var timeUnit = null;
+      switch (formatted.split(" ")[1]) {
+        case 'secs':
+          timeUnit = 's';
+          break;
+        case 'hours':
+          timeUnit = 'hr';
+          break;
+        case 'days':
+          timeUnit = 'd';
+          break;
+        case 'mins':
+          timeUnit = 'min';
+          break;
+        default:
+          timeUnit = formatted.split(" ")[1];
+      }
+      this.set('timeUnit', timeUnit);
+      this.set('hiddenInfo', []);
+      this.get('hiddenInfo').pushObject(formatted);
+      this.get('hiddenInfo').pushObject(uptimeString[0]);
+      this.get('hiddenInfo').pushObject(uptimeString[1]);
+      return parseFloat(formatted.split(" ")[0]);
+    }
+    this.set('hiddenInfo', []);
+    this.set('hiddenInfo', ['Hbase Master','Not Running']);
+    return null;
+  }.property('model.masterStartTime'),
+
+  timeUnit: null,
+
+  content: function () {
+    var data = this.get('data');
+    if (data) {
+      return data.toFixed(1) + ' '+ this.get('timeUnit');
+    } else {
+      return this.t('services.service.summary.notAvailable');
+    }
+  }.property('model.masterStartTime'),
+
+  timeConverter: function (timestamp){
+    var origin = new Date(timestamp);
+    origin = origin.toString();
+    var result = [];
+    var start = origin.indexOf('GMT');
+    if (start == -1) { // ie
+      var arr = origin.split(" ");
+      result.pushObject(arr[0] + " " + arr[1] + " " + arr[2] + " " + arr[3]);
+      var second = '';
+      for (var i = 4; i < arr.length; i++) {
+        second = second + " " + arr[i];
+      }
+      result.pushObject(second);
+    } else { // other browsers
+      var end = origin.indexOf(" ", start);
+      result.pushObject(origin.slice(0, start-10));
+      result.pushObject(origin.slice(start-9));
+    }
+    return result;
+  }
+
+})

ambari-web/app/views/main/dashboard/widgets/hbase_regions_in_transition.js

@@ -20,6 +20,7 @@ var App = require('app');
 
 App.HBaseRegionsInTransitionView = App.DashboardWidgetView.extend({
 
+  templateName: require('templates/main/dashboard/widgets/simple_text'),
   title: Em.I18n.t('dashboard.widgets.HBaseRegionsInTransition'),
   id: '22',
 

ambari-web/app/views/main/dashboard/widgets/hdfs_capacity.js

@@ -20,6 +20,7 @@ var App = require('app');
 
 App.NameNodeCapacityPieChartView = App.DashboardWidgetView.extend({
 
+  templateName: require('templates/main/dashboard/widgets/pie_chart'),
   title: Em.I18n.t('dashboard.widgets.NameNodeCapacity'),
   id: '2',
 
@@ -44,8 +45,8 @@ App.NameNodeCapacityPieChartView = App.DashboardWidgetView.extend({
       total = 0;
     }
     var result = [];
-    result.pushObject(used.bytesToSize(1, 'parseFloat') + ' of ' + total.bytesToSize(1, 'parseFloat'));
     result.pushObject(percent + '% used');
+    result.pushObject(used.bytesToSize(1, 'parseFloat') + ' of ' + total.bytesToSize(1, 'parseFloat'));
     return result;
   }.property('model.capacityUsed', 'model.capacityTotal'),
 
@@ -58,24 +59,6 @@ App.NameNodeCapacityPieChartView = App.DashboardWidgetView.extend({
     return total > 0 ;
   }.property('model.capacityTotal'),
 
-  template: Ember.Handlebars.compile([
-
-    '<div class="has-hidden-info">',
-    '<li class="thumbnail row">',
-      '<a class="corner-icon" href="#" {{action deleteWidget target="view"}}>','<i class="icon-remove-sign icon-large"></i>','</a>',
-    '<div class="caption span10">', '{{view.title}}','</div>',
-    '<a class="corner-icon span1" href="#" {{action editWidget target="view"}}>','<i class="icon-edit"></i>','</a>',
-    '<div class="hidden-info">', '<table align="center">{{#each line in view.hiddenInfo}}', '<tr><td>{{line}}</td></tr>','{{/each}}</table>','</div>',
-
-    '{{#if view.isPieExist}}',
-      '<div class="widget-content" >','{{view view.content modelBinding="view.model" thresh1Binding="view.thresh1" thresh2Binding="view.thresh2"}}','</div>',
-    '{{else}}',
-      '<div class="widget-content-isNA" >','{{t services.service.summary.notAvailable}}','</div>',
-    '{{/if}}',
-    '</li>',
-    '</div>'
-  ].join('\n')),
-
   content: App.ChartPieView.extend({
 
     model: null,  //data bind here

ambari-web/app/views/main/dashboard/widgets/hdfs_links.js

@@ -20,6 +20,7 @@ var App = require('app');
 
 App.HDFSLinksView = App.DashboardWidgetView.extend({
 
+  templateName: require('templates/main/dashboard/widgets/hdfs_links'),
   title: Em.I18n.t('dashboard.widgets.HDFSLinks'),
   id: '17',
 
@@ -29,63 +30,6 @@ App.HDFSLinksView = App.DashboardWidgetView.extend({
   isLinks: true,
   model_type: 'hdfs',
 
-  template: Ember.Handlebars.compile([
-    '<div class="links">',
-    '<li class="thumbnail row">',
-    '<a class="corner-icon" href="#" {{action deleteWidget target="view"}}>','<i class="icon-remove-sign icon-large"></i>','</a>',
-    '<div class="caption span8">', '{{view.title}}','</div>',
-    '<div class="span3 link-button">',
-     '{{#if view.model.quickLinks.length}}',
-        '{{#view App.QuickViewLinks contentBinding="view.model"}}',
-        '<div class="btn-group">',
-          '<a class="btn btn-mini dropdown-toggle" data-toggle="dropdown" href="#">',
-            '{{t common.more}}',
-            '<span class="caret"></span>',
-          '</a>',
-          '<ul class="dropdown-menu">',
-            '{{#each view.quickLinks}}',
-            '<li><a {{bindAttr href="url"}} target="_blank">{{label}}</a></li>',
-            '{{/each}}',
-          '</ul>',
-        '</div>',
-        '{{/view}}',
-     '{{/if}}',
-
-    '</div>',
-    '<div class="widget-content" >',
-    '<table>',
-    //NameNode
-    '<tr>',
-    '<td>{{t dashboard.services.hdfs.nanmenode}}</td>',
-    '<td><a href="#" {{action showDetails view.model.nameNode}}>{{view.model.nameNode.publicHostName}}</a></td>',
-    '</tr>',
-    //SecondaryNameNode
-    '<tr>',
-    '<td>{{t dashboard.services.hdfs.snanmenode}}</td>',
-    '<td><a href="#" {{action showDetails view.model.snameNode}}>{{view.model.snameNode.publicHostName}}</a></td>',
-    '</tr>',
-    //Data Nodes
-    '<tr>',
-    '<td>{{t dashboard.services.hdfs.datanodes}}</td>',
-    '<td>',
-    '<a href="#" {{action filterHosts view.dataNodeComponent}}>{{view.model.dataNodes.length}} {{t dashboard.services.hdfs.datanodes}}</a>',
-    '</td>',
-    '</tr>',
-    // NameNode Web UI
-    //    '<tr>',
-    //    '<td>{{t dashboard.services.hdfs.nameNodeWebUI}}</td>',
-    //    '<td><a {{bindAttr href="view.nodeWebUrl"}} target="_blank">{{view.model.nameNode.publicHostName}}:50070</a>',
-    //    '</td>',
-    //    '</tr>',
-    '</table>',
-
-    '</div>',
-    '</li>',
-    '</div>'
-
-
-  ].join('\n')),
-
   dataNodeComponent: function () {
     return App.HostComponent.find().findProperty('componentName', 'DATANODE');
   }.property(),

ambari-web/app/views/main/dashboard/widgets/jobtracker_cpu.js

@@ -20,6 +20,7 @@ var App = require('app');
 
 App.JobTrackerCpuPieChartView = App.DashboardWidgetView.extend({
 
+  templateName: require('templates/main/dashboard/widgets/pie_chart'),
   title: Em.I18n.t('dashboard.widgets.JobTrackerCpu'),
   id: '7',
 
@@ -29,10 +30,16 @@ App.JobTrackerCpuPieChartView = App.DashboardWidgetView.extend({
   model_type: 'mapreduce',
   hiddenInfo: function () {
     var value = this.get('model.jobTrackerCpu');
-    value = value >= 100 ? 100: value;
+    var obj1;
+    if( value == null) {
+      obj1 = Em.I18n.t('services.service.summary.notAvailable');
+    }else{
+      value = value >= 100 ? 100: value;
+      obj1 = (value + 0).toFixed(2) + '%';
+    }
     var result = [];
-    result.pushObject((value + 0).toFixed(2) + '%');
-    result.pushObject(' CPU wait I/O');
+    result.pushObject(obj1);
+    result.pushObject('CPU wait I/O');
     return result;
   }.property('model.jobTrackerCpu'),
 
@@ -40,6 +47,11 @@ App.JobTrackerCpuPieChartView = App.DashboardWidgetView.extend({
   thresh2: 70,
   maxValue: 100,
 
+  isPieExist: function () {
+    var total = this.get('model.jobTrackerCpu');
+    return total !== null ;
+  }.property('model.jobTrackerCpu'),
+
   content: App.ChartPieView.extend({
 
     model: null,  //data bind here
@@ -60,9 +72,8 @@ App.JobTrackerCpuPieChartView = App.DashboardWidgetView.extend({
 
     data: function () {
       var value = this.get('model.jobTrackerCpu');
-      //console.log('JT Cpu ' + value);
       value = value >= 100 ? 100: value;
-      var percent = (value + 0).toFixed();
+      var percent = (value + 0).toFixed(1);
       return [ percent, 100 - percent];
     }.property('model.jobTrackerCpu'),
 

ambari-web/app/views/main/dashboard/widgets/jobtracker_heap.js

@@ -19,6 +19,8 @@
 var App = require('app');
 
 App.JobTrackerHeapPieChartView = App.DashboardWidgetView.extend({
+
+  templateName: require('templates/main/dashboard/widgets/pie_chart'),
   title: Em.I18n.t('dashboard.widgets.JobTrackerHeap'),
   id: '6',
 
@@ -32,8 +34,8 @@ App.JobTrackerHeapPieChartView = App.DashboardWidgetView.extend({
     var heapMax = this.get('model').get('jobTrackerHeapMax') || 0;
     var percent = heapMax > 0 ? 100 * heapUsed / heapMax : 0;
     var result = [];
-    result.pushObject(heapUsed.bytesToSize(1, "parseFloat") + ' of ' + heapMax.bytesToSize(1, "parseFloat"));
     result.pushObject(percent.toFixed(1) + '% used');
+    result.pushObject(heapUsed.bytesToSize(1, "parseFloat") + ' of ' + heapMax.bytesToSize(1, "parseFloat"));
     return result;
   }.property('model.jobTrackerHeapUsed', 'model.jobTrackerHeapMax'),
 
@@ -46,24 +48,6 @@ App.JobTrackerHeapPieChartView = App.DashboardWidgetView.extend({
     return total > 0 ;
   }.property('model.jobTrackerHeapMax'),
 
-  template: Ember.Handlebars.compile([
-
-    '<div class="has-hidden-info">',
-    '<li class="thumbnail row">',
-    '<a class="corner-icon" href="#" {{action deleteWidget target="view"}}>','<i class="icon-remove-sign icon-large"></i>','</a>',
-    '<div class="caption span10">', '{{view.title}}','</div>',
-    '<a class="corner-icon span1" href="#" {{action editWidget target="view"}}>','<i class="icon-edit"></i>','</a>',
-    '<div class="hidden-info">', '<table align="center">{{#each line in view.hiddenInfo}}', '<tr><td>{{line}}</td></tr>','{{/each}}</table>','</div>',
-
-    '{{#if view.isPieExist}}',
-      '<div class="widget-content" >','{{view view.content modelBinding="view.model" thresh1Binding="view.thresh1" thresh2Binding="view.thresh2"}}','</div>',
-    '{{else}}',
-      '<div class="widget-content-isNA" >','{{t services.service.summary.notAvailable}}','</div>',
-    '{{/if}}',
-    '</li>',
-    '</div>'
-  ].join('\n')),
-
   content: App.ChartPieView.extend({
 
     model: null,  //data bind here

ambari-web/app/views/main/dashboard/widgets/jobtracker_rpc.js

@@ -20,6 +20,7 @@ var App = require('app');
 
 App.JobTrackerRpcView = App.DashboardWidgetView.extend({
 
+  templateName: require('templates/main/dashboard/widgets/simple_text'),
   title: Em.I18n.t('dashboard.widgets.JobTrackerRpc'),
   id:'9',
 

ambari-web/app/views/main/dashboard/widgets/jobtracker_uptime.js

@@ -21,6 +21,7 @@ var date = require('utils/date');
 
 App.JobTrackerUptimeView = App.DashboardWidgetView.extend({
 
+  templateName: require('templates/main/dashboard/widgets/uptime'),
   title: Em.I18n.t('dashboard.widgets.JobTrackerUptime'),
   id: '16',
 
@@ -81,7 +82,7 @@ App.JobTrackerUptimeView = App.DashboardWidgetView.extend({
       this.get('hiddenInfo').pushObject(uptimeString[1]);
       return parseFloat(formatted.split(" ")[0]);
     }
-    this.set('hiddenInfo', ['JobTracker','Not running']);
+    this.set('hiddenInfo', ['JobTracker','Not Running']);
     return null;
   }.property('model.jobTrackerStartTime'),
 
@@ -96,18 +97,6 @@ App.JobTrackerUptimeView = App.DashboardWidgetView.extend({
     }
   }.property('model.jobTrackerStartTime'),
 
-  template: Ember.Handlebars.compile([
-
-    '<div class="has-hidden-info">',
-    '<li class="thumbnail row" >',
-    '<a class="corner-icon" href="#" {{action deleteWidget target="view"}}>','<i class="icon-remove-sign icon-large"></i>','</a>',
-    '<div class="caption span10">', '{{view.title}}','</div>',
-    '<div class="hidden-info-three-line">', '<table  align="center">{{#each line in view.hiddenInfo}}', '<tr><td>{{line}}</td></tr>','{{/each}}</table>','</div>',
-    '<div class="widget-content">{{view.content}}</div>',
-    '</li>',
-    '</div>'
-  ].join('\n')),
-
   timeConverter: function (timestamp) {
     var origin = new Date(timestamp);
     origin = origin.toString();

ambari-web/app/views/main/dashboard/widgets/mapreduce_links.js

@@ -20,6 +20,7 @@ var App = require('app');
 
 App.MapReduceLinksView = App.DashboardWidgetView.extend({
 
+  templateName: require('templates/main/dashboard/widgets/mapreduce_links'),
   title: Em.I18n.t('dashboard.widgets.MapReduceLinks'),
   id: '18',
 
@@ -29,56 +30,6 @@ App.MapReduceLinksView = App.DashboardWidgetView.extend({
   isLinks: true,
   model_type: 'mapreduce',
 
-  template: Ember.Handlebars.compile([
-    '<div class="links">',
-    '<li class="thumbnail row">',
-      '<a class="corner-icon" href="#" {{action deleteWidget target="view"}}>','<i class="icon-remove-sign icon-large"></i>','</a>',
-    '<div class="caption span8">', '{{view.title}}','</div>',
-    '<div class="span3 link-button">',
-    '{{#if view.model.quickLinks.length}}',
-      '{{#view App.QuickViewLinks contentBinding="view.model"}}',
-        '<div class="btn-group">',
-        '<a class="btn btn-mini dropdown-toggle" data-toggle="dropdown" href="#">',
-          '{{t common.more}}',
-          '<span class="caret"></span>',
-        '</a>',
-        '<ul class="dropdown-menu">',
-          '{{#each view.quickLinks}}',
-          '<li><a {{bindAttr href="url"}} target="_blank">{{label}}</a></li>',
-          '{{/each}}',
-        '</ul>',
-        '</div>',
-      '{{/view}}',
-    '{{/if}}',
-
-    '</div>',
-    '<div class="widget-content" >',
-    '<table>',
-    //jobTracker
-    '<tr>',
-    '<td>{{t services.service.summary.jobTracker}}</td>',
-    '<td><a href="#" {{action showDetails view.model.jobTracker}}>{{view.model.jobTracker.publicHostName}}</a></td>',
-    '</tr>',
-    //taskTrackers
-    '<tr>',
-    '<td>{{t dashboard.services.mapreduce.taskTrackers}}</td>',
-    '<td><a href="#" {{action filterHosts view.taskTrackerComponent}}>{{view.model.taskTrackers.length}} {{t dashboard.services.mapreduce.taskTrackers}}</a></td>',
-    '</tr>',
-
-    // jobTracker Web UI
-    '<tr>',
-    '<td>{{t services.service.summary.jobTrackerWebUI}}</td>',
-    '<td><a {{bindAttr href="view.jobTrackerWebUrl"}} target="_blank">{{view.model.jobTracker.publicHostName}}:50030</a>','</td>',
-    '</tr>',
-    '</table>',
-
-    '</div>',
-    '</li>',
-    '</div>'
-
-
-  ].join('\n')),
-
   taskTrackerComponent: function () {
     return App.HostComponent.find().findProperty('componentName', 'TASKTRACKER');
   }.property(),

ambari-web/app/views/main/dashboard/widgets/mapreduce_slots.js

@@ -20,6 +20,7 @@ var App = require('app');
 
 App.MapReduceSlotsView = App.DashboardWidgetView.extend({
 
+  templateName: require('templates/main/dashboard/widgets/mapreduce_slots'),
   title: Em.I18n.t('dashboard.widgets.MapReduceSlots'),
   id:'10',
 
@@ -29,9 +30,16 @@ App.MapReduceSlotsView = App.DashboardWidgetView.extend({
   model_type: 'mapreduce',
   hiddenInfo: function (){
     var result = [];
-    result.pushObject('Occupied Slots/ Reserved Slots/ Total Slots');
+    if(this.get('isViewExist')){
+      result.pushObject('Occupied Slots/ Reserved Slots/ Total Slots');
+    }else{
+      result.pushObject('MapReduce Not Started');
+    }
     return result;
-  }.property(),
+  }.property('isViewExist'),
+  isViewExist: function () {
+    return this.get('model.mapSlotsOccupied') != null && this.get('model.mapSlotsReserved') != null && this.get('model.reduceSlotsOccupied') != null && this.get('model.reduceSlotsReserved') != null;
+  }.property('model.mapSlotsReserved', 'model.mapSlotsOccupied', 'model.reduceSlotsReserved', 'model.reduceSlotsOccupied'),
 
   map_occupied: function () {
     if (this.get('model.mapSlotsOccupied')) {

ambari-web/app/views/main/dashboard/widgets/metrics_cpu.js

@@ -20,6 +20,7 @@ var App = require('app');
 
 App.ChartClusterMetricsCPUWidgetView = App.DashboardWidgetView.extend({
 
+  templateName: require('templates/main/dashboard/widgets/cluster_metrics'),
   title: Em.I18n.t('dashboard.clusterMetrics.cpu'),
   id: '13',
 

ambari-web/app/views/main/dashboard/widgets/metrics_load.js

@@ -20,6 +20,7 @@ var App = require('app');
 
 App.ChartClusterMetricsLoadWidgetView = App.DashboardWidgetView.extend({
 
+  templateName: require('templates/main/dashboard/widgets/cluster_metrics'),
   title: Em.I18n.t('dashboard.clusterMetrics.load'),
   id: '14',
 

ambari-web/app/views/main/dashboard/widgets/metrics_memory.js

@@ -20,6 +20,7 @@ var App = require('app');
 
 App.ChartClusterMetricsMemoryWidgetView = App.DashboardWidgetView.extend({
 
+  templateName: require('templates/main/dashboard/widgets/cluster_metrics'),
   title: Em.I18n.t('dashboard.clusterMetrics.memory'),
   id: '11',
 

ambari-web/app/views/main/dashboard/widgets/metrics_network.js

@@ -20,6 +20,7 @@ var App = require('app');
 
 App.ChartClusterMetricsNetworkWidgetView = App.DashboardWidgetView.extend({
 
+  templateName: require('templates/main/dashboard/widgets/cluster_metrics'),
   title: Em.I18n.t('dashboard.clusterMetrics.network'),
   id: '12',
 

ambari-web/app/views/main/dashboard/widgets/namenode_cpu.js

@@ -20,6 +20,7 @@ var App = require('app');
 
 App.NameNodeCpuPieChartView = App.DashboardWidgetView.extend({
 
+  templateName: require('templates/main/dashboard/widgets/pie_chart'),
   title: Em.I18n.t('dashboard.widgets.NameNodeCpu'),
   id: '3',
 
@@ -29,10 +30,16 @@ App.NameNodeCpuPieChartView = App.DashboardWidgetView.extend({
   model_type: 'hdfs',
   hiddenInfo: function () {
     var value = this.get('model.nameNodeCpu');
-    value = value >= 100 ? 100: value;
+    var obj1;
+    if( value == null) {
+      obj1 = Em.I18n.t('services.service.summary.notAvailable');
+    }else{
+      value = value >= 100 ? 100: value;
+      obj1 = (value + 0).toFixed(2) + '%';
+    }
     var result = [];
-    result.pushObject((value + 0).toFixed(2) + '%');
-    result.pushObject(' CPU wait I/O');
+    result.pushObject(obj1);
+    result.pushObject('CPU wait I/O');
     return result;
   }.property('model.nameNodeCpu'),
 
@@ -40,6 +47,11 @@ App.NameNodeCpuPieChartView = App.DashboardWidgetView.extend({
   thresh2: 70,
   maxValue: 100,
 
+  isPieExist: function () {
+    var total = this.get('model.nameNodeCpu');
+    return total !== null ;
+  }.property('model.nameNodeCpu'),
+
   content: App.ChartPieView.extend({
 
     model: null,  //data bind here
@@ -61,7 +73,7 @@ App.NameNodeCpuPieChartView = App.DashboardWidgetView.extend({
     data: function () {
       var value = this.get('model.nameNodeCpu');
       value = value >= 100 ? 100: value;
-      var percent = (value + 0).toFixed();
+      var percent = (value + 0).toFixed(1);
       return [ percent, 100 - percent];
     }.property('model.nameNodeCpu'),
 

ambari-web/app/views/main/dashboard/widgets/namenode_heap.js

@@ -20,6 +20,7 @@ var App = require('app');
 
 App.NameNodeHeapPieChartView = App.DashboardWidgetView.extend({
 
+  templateName: require('templates/main/dashboard/widgets/pie_chart'),
   title: Em.I18n.t('dashboard.widgets.NameNodeHeap'),
   id: '1',
 
@@ -33,8 +34,8 @@ App.NameNodeHeapPieChartView = App.DashboardWidgetView.extend({
   var memCommitted = this.get('model').get('jvmMemoryHeapCommitted') * 1000000;
   var percent = memCommitted > 0 ? ((100 * memUsed) / memCommitted) : 0;
   var result = [];
-  result.pushObject(memUsed.bytesToSize(1, 'parseFloat') + ' of ' + memCommitted.bytesToSize(1, 'parseFloat'));
   result.pushObject(percent.toFixed(1) + '% used');
+  result.pushObject(memUsed.bytesToSize(1, 'parseFloat') + ' of ' + memCommitted.bytesToSize(1, 'parseFloat'));
   return result;
   }.property('model.jvmMemoryHeapUsed', 'model.jvmMemoryHeapCommitted'),
 
@@ -47,24 +48,6 @@ App.NameNodeHeapPieChartView = App.DashboardWidgetView.extend({
     return total > 0 ;
   }.property('model.jvmMemoryHeapCommitted'),
 
-  template: Ember.Handlebars.compile([
-
-    '<div class="has-hidden-info">',
-    '<li class="thumbnail row">',
-    '<a class="corner-icon" href="#" {{action deleteWidget target="view"}}>','<i class="icon-remove-sign icon-large"></i>','</a>',
-    '<div class="caption span10">', '{{view.title}}','</div>',
-    '<a class="corner-icon span1" href="#" {{action editWidget target="view"}}>','<i class="icon-edit"></i>','</a>',
-    '<div class="hidden-info">', '<table align="center">{{#each line in view.hiddenInfo}}', '<tr><td>{{line}}</td></tr>','{{/each}}</table>','</div>',
-
-    '{{#if view.isPieExist}}',
-      '<div class="widget-content" >','{{view view.content modelBinding="view.model" thresh1Binding="view.thresh1" thresh2Binding="view.thresh2"}}','</div>',
-    '{{else}}',
-      '<div class="widget-content-isNA" >','{{t services.service.summary.notAvailable}}','</div>',
-    '{{/if}}',
-    '</li>',
-    '</div>'
-  ].join('\n')),
-
   content: App.ChartPieView.extend({
 
     model: null,  //data bind here

ambari-web/app/views/main/dashboard/widgets/namenode_rpc.js

@@ -20,6 +20,7 @@ var App = require('app');
 
 App.NameNodeRpcView = App.DashboardWidgetView.extend({
 
+  templateName: require('templates/main/dashboard/widgets/simple_text'),
   title: Em.I18n.t('dashboard.widgets.NameNodeRpc'),
   id: '5',
 

ambari-web/app/views/main/dashboard/widgets/namenode_uptime.js

@@ -21,6 +21,7 @@ var date = require('utils/date');
 
 App.NameNodeUptimeView = App.DashboardWidgetView.extend({
 
+  templateName: require('templates/main/dashboard/widgets/uptime'),
   title: Em.I18n.t('dashboard.widgets.NameNodeUptime'),
   id: '15',
 
@@ -82,7 +83,7 @@ App.NameNodeUptimeView = App.DashboardWidgetView.extend({
       return parseFloat(formatted.split(" ")[0]);
     }
     this.set('hiddenInfo', []);
-    this.set('hiddenInfo', ['NameNode','Not running']);
+    this.set('hiddenInfo', ['NameNode','Not Running']);
     return null;
   }.property('model.nameNodeStartTime'),
 
@@ -97,19 +98,6 @@ App.NameNodeUptimeView = App.DashboardWidgetView.extend({
     }
   }.property('model.nameNodeStartTime'),
 
-
-  template: Ember.Handlebars.compile([
-
-    '<div class="has-hidden-info">',
-    '<li class="thumbnail row" >',
-    '<a class="corner-icon" href="#" {{action deleteWidget target="view"}}>','<i class="icon-remove-sign icon-large"></i>','</a>',
-    '<div class="caption span10">', '{{view.title}}','</div>',
-    '<div class="hidden-info-three-line">', '<table align="center">{{#each line in view.hiddenInfo}}', '<tr><td>{{line}}</td></tr>','{{/each}}</table>','</div>',
-    '<div class="widget-content">{{view.content}}</div>',
-    '</li>',
-    '</div>'
-  ].join('\n')),
-
   timeConverter: function (timestamp){
     var origin = new Date(timestamp);
     origin = origin.toString();

ambari-web/app/views/main/dashboard/widgets/tasktracker_live.js

@@ -20,6 +20,7 @@ var App = require('app');
 
 App.TaskTrackerUpView = App.DashboardWidgetView.extend({
 
+  templateName: require('templates/main/dashboard/widgets/simple_text'),
   title: Em.I18n.t('dashboard.widgets.TaskTrackerUp'),
   id: '8',