incubator-ambari-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From yus...@apache.org
Subject svn commit: r1491658 [2/3] - in /incubator/ambari/trunk/ambari-web: app/ app/controllers/global/ app/mappers/ app/models/service/ app/styles/ app/templates/main/ app/templates/main/charts/ app/templates/main/dashboard/ app/views/common/chart/ app/views...
Date Tue, 11 Jun 2013 00:21:34 GMT
Added: incubator/ambari/trunk/ambari-web/app/views/main/dashboard/widgets/hbase_average_load.js
URL: http://svn.apache.org/viewvc/incubator/ambari/trunk/ambari-web/app/views/main/dashboard/widgets/hbase_average_load.js?rev=1491658&view=auto
==============================================================================
--- incubator/ambari/trunk/ambari-web/app/views/main/dashboard/widgets/hbase_average_load.js (added)
+++ incubator/ambari/trunk/ambari-web/app/views/main/dashboard/widgets/hbase_average_load.js Tue Jun 11 00:21:32 2013
@@ -0,0 +1,200 @@
+/**
+ * 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');
+
+App.HBaseAverageLoadView = App.DashboardWidgetView.extend({
+
+  title: Em.I18n.t('dashboard.widgets.HBaseAverageLoad'),
+  id: '21',
+
+  isPieChart: false,
+  isText: true,
+  isProgressBar: false,
+  model_type: 'hbase',
+  hiddenInfo: function () {
+    var avgLoad = this.get('model.averageLoad');
+    if (avgLoad == null) {
+      avgLoad = this.t('services.service.summary.notAvailable');
+    }
+    var result = [];
+    result.pushObject(this.t('dashboard.services.hbase.averageLoadPerServer').format(avgLoad));
+    return result;
+  }.property("model.averageLoad"),
+
+  classNameBindings: ['isRed', 'isOrange', 'isGreen', 'isNA'],
+  isGreen: function () {
+    var thresh1 = this.get('thresh1');
+    var thresh2 = this.get('thresh2');
+    return this.get('data') <= thresh1? true: false;
+  }.property('data','thresh1','thresh2'),
+  isOrange: function () {
+    var thresh1 = this.get('thresh1');
+    var thresh2 = this.get('thresh2');
+    return (this.get('data') <= thresh2 && this.get('data') > thresh1 )? true: false;
+  }.property('data','thresh1','thresh2'),
+  isRed: function () {
+    var thresh1 = this.get('thresh1');
+    var thresh2 = this.get('thresh2');
+    return this.get('data') > thresh2? true: false;
+  }.property('data','thresh1','thresh2'),
+  isNA: function (){
+    return this.get('data') === null;
+  }.property('data'),
+
+  thresh1: 0.5,
+  thresh2: 2,
+  maxValue: 'infinity',
+
+  data: function () {
+    return this.get('model.averageLoad');
+  }.property("model.averageLoad"),
+
+  content: function (){
+    if(this.get('data') || this.get('data') == 0){
+      return this.get('data') + "";
+    }else{
+      return this.t('services.service.summary.notAvailable');
+    }
+  }.property('model.averageLoad'),
+
+  editWidget: function (event) {
+    var parent = this;
+    var configObj = Ember.Object.create({
+      thresh1: parent.get('thresh1') + '',
+      thresh2: parent.get('thresh2') + '',
+      hintInfo: 'Edit the thresholds to change the color of current widget. ' +
+
+        ' So enter two numbers larger than 0. ',
+      isThresh1Error: false,
+      isThresh2Error: false,
+      errorMessage1: "",
+      errorMessage2: "",
+      maxValue: 'infinity',
+      observeNewThresholdValue: function () {
+        var thresh1 = this.get('thresh1');
+        var thresh2 = this.get('thresh2');
+        if (thresh1.trim() != "") {
+          if (isNaN(thresh1) || thresh1 < 0) {
+            this.set('isThresh1Error', true);
+            this.set('errorMessage1', 'Invalid! Enter a number larger than 0');
+          } else if ( this.get('isThresh2Error') === false && parseFloat(thresh2)<= parseFloat(thresh1)){
+            this.set('isThresh1Error', true);
+            this.set('errorMessage1', 'Threshold 1 should be smaller than threshold 2 !');
+          } else {
+            this.set('isThresh1Error', false);
+            this.set('errorMessage1', '');
+          }
+        } else {
+          this.set('isThresh1Error', true);
+          this.set('errorMessage1', 'This is required');
+        }
+
+        if (thresh2.trim() != "") {
+          if (isNaN(thresh2) || thresh2 < 0) {
+            this.set('isThresh2Error', true);
+            this.set('errorMessage2', 'Invalid! Enter a number larger than 0');
+          } else {
+            this.set('isThresh2Error', false);
+            this.set('errorMessage2', '');
+          }
+        } else {
+          this.set('isThresh2Error', true);
+          this.set('errorMessage2', 'This is required');
+        }
+
+      }.observes('thresh1', 'thresh2')
+
+    });
+
+    var browserVerion = this.getInternetExplorerVersion();
+    App.ModalPopup.show( {
+      header: 'Customize Widget',
+      classNames: [ 'sixty-percent-width-modal-edit-widget'],
+      bodyClass: Ember.View.extend({
+        templateName: require('templates/main/dashboard/edit_widget_popup'),
+        configPropertyObj: configObj
+      }),
+      primary: Em.I18n.t('common.apply'),
+      onPrimary: function () {
+        configObj.observeNewThresholdValue();
+        if (!configObj.isThresh1Error && !configObj.isThresh2Error) {
+          parent.set('thresh1', parseFloat(configObj.get('thresh1')) );
+          parent.set('thresh2', parseFloat(configObj.get('thresh2')) );
+          if (!App.testMode) {
+            //save to persist
+            var big_parent = parent.get('parentView');
+            big_parent.getUserPref(big_parent.get('persistKey'));
+            var oldValue = big_parent.get('currentPrefObject');
+            oldValue.threshold[parseInt(parent.id)] = [configObj.get('thresh1'), configObj.get('thresh2')];
+            big_parent.postUserPref(big_parent.get('persistKey'),oldValue);
+          }
+
+          this.hide();
+        }
+      },
+      secondary : Em.I18n.t('common.cancel'),
+      onSecondary: function() {
+        this.hide();
+      },
+
+      didInsertElement: function () {
+        var colors = ['#95A800', '#FF8E00', '#B80000']; //color green, orange ,red
+        var handlers = [33, 66]; //fixed value
+
+        if (browserVerion == -1 || browserVerion > 9) {
+          configObj.set('isIE9', false);
+          configObj.set('isGreenOrangeRed', true);
+          $("#slider-range").slider({
+            range:true,
+            disabled:true, //handlers cannot move
+            min: 0,
+            max: 100,
+            values: handlers,
+            create: function (event, ui) {
+              updateColors(handlers);
+            }
+          });
+
+          function updateColors(handlers) {
+            var colorstops = colors[0] + ", "; // start with the first color
+            for (var i = 0; i < handlers.length; i++) {
+              colorstops += colors[i] + " " + handlers[i] + "%,";
+              colorstops += colors[i+1] + " " + handlers[i] + "%,";
+            }
+            // end with the last color
+            colorstops += colors[colors.length - 1];
+            var css1 = '-webkit-linear-gradient(left,' + colorstops + ')'; // chrome & safari
+            $('#slider-range').css('background-image', css1);
+            var css2 = '-ms-linear-gradient(left,' + colorstops + ')'; // IE 10+
+            $('#slider-range').css('background-image', css2);
+            //$('#slider-range').css('filter', 'progid:DXImageTransform.Microsoft.gradient( startColorStr= ' + colors[0] + ', endColorStr= ' + colors[2] +',  GradientType=1 )' ); // IE 10-
+            var css3 = '-moz-linear-gradient(left,' + colorstops + ')'; // Firefox
+            $('#slider-range').css('background-image', css3);
+
+            $('#slider-range .ui-widget-header').css({'background-color': '#FF8E00', 'background-image': 'none'}); // change the  original ranger color
+          }
+        } else {
+          configObj.set('isIE9', true);
+          configObj.set('isGreenOrangeRed', true);
+        }
+      }
+    });
+  }
+
+})

Added: incubator/ambari/trunk/ambari-web/app/views/main/dashboard/widgets/hbase_links.js
URL: http://svn.apache.org/viewvc/incubator/ambari/trunk/ambari-web/app/views/main/dashboard/widgets/hbase_links.js?rev=1491658&view=auto
==============================================================================
--- incubator/ambari/trunk/ambari-web/app/views/main/dashboard/widgets/hbase_links.js (added)
+++ incubator/ambari/trunk/ambari-web/app/views/main/dashboard/widgets/hbase_links.js Tue Jun 11 00:21:32 2013
@@ -0,0 +1,151 @@
+/**
+ * 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');
+
+App.HBaseLinksView = App.DashboardWidgetView.extend({
+
+  title: Em.I18n.t('dashboard.widgets.HBaseLinks'),
+  id: '19',
+
+  isPieChart: false,
+  isText: false,
+  isProgressBar: false,
+  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
+   */
+  masters: function () {
+    return this.get('model.hostComponents').filterProperty('isMaster', true);
+  }.property('model.hostComponents.@each'),
+  /**
+   * Passive master components
+   */
+  passiveMasters: function () {
+    if (App.supports.multipleHBaseMasters) {
+      return this.get('masters').filterProperty('haStatus', 'passive');
+    }
+    return [];
+  }.property('masters'),
+  /**
+   * Formatted output for passive master components
+   */
+  passiveMasterOutput: function () {
+    return Em.I18n.t('service.hbase.passiveMasters').format(this.get('passiveMasters').length);
+  }.property('passiveMasters'),
+  /**
+   * One(!) active master component
+   */
+  activeMaster: function () {
+    if(App.supports.multipleHBaseMasters) {
+      return this.get('masters').findProperty('haStatus', 'active');
+    } else {
+      return this.get('masters')[0];
+    }
+  }.property('masters'),
+
+  activeMasterTitle: function(){
+    if (App.supports.multipleHBaseMasters) {
+      return this.t('service.hbase.activeMaster');
+    } else {
+      return this.get('activeMaster.host.publicHostName');
+    }
+  }.property('activeMaster'),
+
+  regionServerComponent: function () {
+    return App.HostComponent.find().findProperty('componentName', 'HBASE_REGIONSERVER');
+  }.property(),
+
+  hbaseMasterWebUrl: function () {
+    if (this.get('activeMaster.host') && this.get('activeMaster.host').get('publicHostName')) {
+      return "http://" + this.get('activeMaster.host').get('publicHostName') + ":60010";
+    }
+  }.property('activeMaster')
+
+})
+
+App.HBaseLinksView.reopenClass({
+  isLinks: true
+})

Added: incubator/ambari/trunk/ambari-web/app/views/main/dashboard/widgets/hbase_master_heap.js
URL: http://svn.apache.org/viewvc/incubator/ambari/trunk/ambari-web/app/views/main/dashboard/widgets/hbase_master_heap.js?rev=1491658&view=auto
==============================================================================
--- incubator/ambari/trunk/ambari-web/app/views/main/dashboard/widgets/hbase_master_heap.js (added)
+++ incubator/ambari/trunk/ambari-web/app/views/main/dashboard/widgets/hbase_master_heap.js Tue Jun 11 00:21:32 2013
@@ -0,0 +1,134 @@
+/**
+ * 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');
+
+App.HBaseMasterHeapPieChartView = App.DashboardWidgetView.extend({
+
+  title: Em.I18n.t('dashboard.widgets.HBaseMasterHeap'),
+
+  id: '20',
+
+  isPieChart: true,
+  isText: false,
+  isProgressBar: false,
+  model_type: 'hbase',
+
+  hiddenInfo: function () {
+    var heapUsed = this.get('model').get('heapMemoryUsed') || 0;
+    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');
+    return result;
+  }.property('model.heapMemoryUsed', 'model.heapMemoryMax'),
+
+  thresh1: null,
+  thresh2: null,
+  maxValue: 100,
+
+  isPieExist: function () {
+    var total = this.get('model.heapMemoryMax') * 1000000;
+    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
+    id: 'widget-hbase-heap', // html id
+    stroke: '#D6DDDF', //light grey
+    thresh1: null, //bind from parent
+    thresh2: null,
+    innerR: 25,
+
+    existCenterText: true,
+    centerTextColor: function () {
+      return this.get('contentColor');
+    }.property('contentColor'),
+
+    palette: new Rickshaw.Color.Palette({
+      scheme: [ '#FFFFFF', '#D6DDDF'].reverse()
+    }),
+
+    data: function () {
+      var heapUsed = this.get('model').get('heapMemoryUsed');
+      var heapMax = this.get('model').get('heapMemoryMax');
+      var percent = heapMax > 0 ? (100 * heapUsed / heapMax).toFixed() : 0;
+      return [percent, 100-percent];
+    }.property('model.heapMemoryUsed', 'model.heapMemoryMax'),
+
+    contentColor: function () {
+      var used = parseFloat(this.get('data')[0]);
+      var thresh1 = parseFloat(this.get('thresh1'));
+      var thresh2 = parseFloat(this.get('thresh2'));
+      var color_green = '#95A800';
+      var color_red = '#B80000';
+      var color_orange = '#FF8E00';
+      if (used <= thresh1) {
+        this.set('palette', new Rickshaw.Color.Palette({
+          scheme: [ '#FFFFFF', color_green  ].reverse()
+        }))
+        return color_green;
+      } else if (used <= thresh2) {
+        this.set('palette', new Rickshaw.Color.Palette({
+          scheme: [ '#FFFFFF', color_orange  ].reverse()
+        }))
+        return color_orange;
+      } else {
+        this.set('palette', new Rickshaw.Color.Palette({
+          scheme: [ '#FFFFFF', color_red  ].reverse()
+        }))
+        return color_red;
+      }
+    }.property('data', 'this.thresh1', 'this.thresh2'),
+
+    // refresh text and color when data in model changed
+    refreshSvg: function () {
+      // remove old svg
+      var old_svg =  $("#" + this.id);
+      if(old_svg){
+        old_svg.remove();
+      }
+      // draw new svg
+      this.appendSvg();
+    }.observes('model.heapMemoryUsed', 'model.heapMemoryMax', 'this.thresh1', 'this.thresh2')
+
+  })
+
+})
+
+

Added: incubator/ambari/trunk/ambari-web/app/views/main/dashboard/widgets/hbase_regions_in_transition.js
URL: http://svn.apache.org/viewvc/incubator/ambari/trunk/ambari-web/app/views/main/dashboard/widgets/hbase_regions_in_transition.js?rev=1491658&view=auto
==============================================================================
--- incubator/ambari/trunk/ambari-web/app/views/main/dashboard/widgets/hbase_regions_in_transition.js (added)
+++ incubator/ambari/trunk/ambari-web/app/views/main/dashboard/widgets/hbase_regions_in_transition.js Tue Jun 11 00:21:32 2013
@@ -0,0 +1,192 @@
+/**
+ * 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');
+
+App.HBaseRegionsInTransitionView = App.DashboardWidgetView.extend({
+
+  title: Em.I18n.t('dashboard.widgets.HBaseRegionsInTransition'),
+  id: '22',
+
+  isPieChart: false,
+  isText: true,
+  isProgressBar: false,
+  model_type: 'hbase',
+  hiddenInfo: function () {
+    var result = [];
+    result.pushObject(this.get("model.regionsInTransition") + " regions");
+    result.pushObject("in transition");
+    return result;
+  }.property("model.regionsInTransition"),
+
+  classNameBindings: ['isRed', 'isOrange', 'isGreen', 'isNA'],
+  isGreen: function () {
+    var thresh1 = this.get('thresh1');
+    var thresh2 = this.get('thresh2');
+    return this.get('data') <= thresh1? true: false;
+  }.property('data','thresh1','thresh2'),
+  isOrange: function () {
+    var thresh1 = this.get('thresh1');
+    var thresh2 = this.get('thresh2');
+    return (this.get('data') <= thresh2 && this.get('data') > thresh1 )? true: false;
+  }.property('data','thresh1','thresh2'),
+  isRed: function () {
+    var thresh1 = this.get('thresh1');
+    var thresh2 = this.get('thresh2');
+    return this.get('data') > thresh2? true: false;
+  }.property('data','thresh1','thresh2'),
+  isNA: function () {
+    return this.get('data') === null;
+  }.property('data'),
+
+  thresh1: 0.5,
+  thresh2: 2,
+  maxValue: 'infinity',
+
+  data: function () {
+    return this.get('model.regionsInTransition');
+  }.property("model.regionsInTransition"),
+
+  content: function (){
+    return this.get('data') + "";
+  }.property('model.regionsInTransition'),
+
+  editWidget: function (event) {
+    var parent = this;
+    var configObj = Ember.Object.create({
+      thresh1: parent.get('thresh1') + '',
+      thresh2: parent.get('thresh2') + '',
+      hintInfo: 'Edit the thresholds to change the color of current widget. ' +
+
+        ' So enter two numbers larger than 0. ',
+      isThresh1Error: false,
+      isThresh2Error: false,
+      errorMessage1: "",
+      errorMessage2: "",
+      maxValue: 'infinity',
+      observeNewThresholdValue: function () {
+        var thresh1 = this.get('thresh1');
+        var thresh2 = this.get('thresh2');
+        if (thresh1.trim() != "") {
+          if (isNaN(thresh1) || thresh1 < 0) {
+            this.set('isThresh1Error', true);
+            this.set('errorMessage1', 'Invalid! Enter a number larger than 0');
+          } else if ( this.get('isThresh2Error') === false && parseFloat(thresh2)<= parseFloat(thresh1)){
+            this.set('isThresh1Error', true);
+            this.set('errorMessage1', 'Threshold 1 should be smaller than threshold 2 !');
+          } else {
+            this.set('isThresh1Error', false);
+            this.set('errorMessage1', '');
+          }
+        } else {
+          this.set('isThresh1Error', true);
+          this.set('errorMessage1', 'This is required');
+        }
+
+        if (thresh2.trim() != "") {
+          if (isNaN(thresh2) || thresh2 < 0) {
+            this.set('isThresh2Error', true);
+            this.set('errorMessage2', 'Invalid! Enter a number larger than 0');
+          } else {
+            this.set('isThresh2Error', false);
+            this.set('errorMessage2', '');
+          }
+        } else {
+          this.set('isThresh2Error', true);
+          this.set('errorMessage2', 'This is required');
+        }
+      }.observes('thresh1', 'thresh2')
+
+    });
+
+    var browserVerion = this.getInternetExplorerVersion();
+    App.ModalPopup.show({
+      header: 'Customize Widget',
+      classNames: [ 'sixty-percent-width-modal-edit-widget'],
+      bodyClass: Ember.View.extend({
+        templateName: require('templates/main/dashboard/edit_widget_popup'),
+        configPropertyObj: configObj
+      }),
+      primary: Em.I18n.t('common.apply'),
+      onPrimary: function () {
+        configObj.observeNewThresholdValue();
+        if (!configObj.isThresh1Error && !configObj.isThresh2Error) {
+          parent.set('thresh1', parseFloat(configObj.get('thresh1')) );
+          parent.set('thresh2', parseFloat(configObj.get('thresh2')) );
+          if (!App.testMode) {
+            //save to persist
+            var big_parent = parent.get('parentView');
+            big_parent.getUserPref(big_parent.get('persistKey'));
+            var oldValue = big_parent.get('currentPrefObject');
+            oldValue.threshold[parseInt(parent.id)] = [configObj.get('thresh1'), configObj.get('thresh2')];
+            big_parent.postUserPref(big_parent.get('persistKey'),oldValue);
+          }
+
+          this.hide();
+        }
+      },
+      secondary : Em.I18n.t('common.cancel'),
+      onSecondary: function () {
+        this.hide();
+      },
+
+      didInsertElement: function () {
+        var colors = ['#95A800', '#FF8E00', '#B80000']; //color green, orange ,red
+        var handlers = [33, 66]; //fixed value
+
+        if (browserVerion == -1 || browserVerion > 9) {
+          configObj.set('isIE9', false);
+          configObj.set('isGreenOrangeRed', true);
+          $("#slider-range").slider({
+            range:true,
+            disabled:true, //handlers cannot move
+            min: 0,
+            max: 100,
+            values: handlers,
+            create: function (event, ui) {
+              updateColors(handlers);
+            }
+          });
+
+          function updateColors (handlers) {
+            var colorstops = colors[0] + ", "; // start with the first color
+            for (var i = 0; i < handlers.length; i++) {
+              colorstops += colors[i] + " " + handlers[i] + "%,";
+              colorstops += colors[i+1] + " " + handlers[i] + "%,";
+            }
+            // end with the last color
+            colorstops += colors[colors.length - 1];
+            var css1 = '-webkit-linear-gradient(left,' + colorstops + ')'; // chrome & safari
+            $('#slider-range').css('background-image', css1);
+            var css2 = '-ms-linear-gradient(left,' + colorstops + ')'; // IE 10+
+            $('#slider-range').css('background-image', css2);
+            //$('#slider-range').css('filter', 'progid:DXImageTransform.Microsoft.gradient( startColorStr= ' + colors[0] + ', endColorStr= ' + colors[2] +',  GradientType=1 )' ); // IE 10-
+            var css3 = '-moz-linear-gradient(left,' + colorstops + ')'; // Firefox
+            $('#slider-range').css('background-image', css3);
+
+            $('#slider-range .ui-widget-header').css({'background-color': '#FF8E00', 'background-image': 'none'}); // change the  original ranger color
+          }
+        } else {
+          configObj.set('isIE9', true);
+          configObj.set('isGreenOrangeRed', true);
+        }
+      }
+    });
+  }
+
+})

Added: incubator/ambari/trunk/ambari-web/app/views/main/dashboard/widgets/hdfs_capacity.js
URL: http://svn.apache.org/viewvc/incubator/ambari/trunk/ambari-web/app/views/main/dashboard/widgets/hdfs_capacity.js?rev=1491658&view=auto
==============================================================================
--- incubator/ambari/trunk/ambari-web/app/views/main/dashboard/widgets/hdfs_capacity.js (added)
+++ incubator/ambari/trunk/ambari-web/app/views/main/dashboard/widgets/hdfs_capacity.js Tue Jun 11 00:21:32 2013
@@ -0,0 +1,144 @@
+/**
+ * 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');
+
+App.NameNodeCapacityPieChartView = App.DashboardWidgetView.extend({
+
+  title: Em.I18n.t('dashboard.widgets.NameNodeCapacity'),
+  id: '2',
+
+  isPieChart: true,
+  isText: false,
+  isProgressBar: false,
+  model_type: 'hdfs',
+
+  hiddenInfo: function () {
+    var text = this.t("dashboard.services.hdfs.capacityUsed");
+    var total = this.get('model.capacityTotal') + 0;
+    var remaining = this.get('model.capacityRemaining') + 0;
+    var used = total - remaining;
+    var percent = total > 0 ? ((used * 100) / total).toFixed(1) : 0;
+    if (percent == "NaN" || percent < 0) {
+      percent = Em.I18n.t('services.service.summary.notAvailable') + " ";
+    }
+    if (used < 0) {
+      used = 0;
+    }
+    if (total < 0) {
+      total = 0;
+    }
+    var result = [];
+    result.pushObject(used.bytesToSize(1, 'parseFloat') + ' of ' + total.bytesToSize(1, 'parseFloat'));
+    result.pushObject(percent + '% used');
+    return result;
+  }.property('model.capacityUsed', 'model.capacityTotal'),
+
+  thresh1: 40,// can be customized
+  thresh2: 70,
+  maxValue: 100,
+
+  isPieExist: function () {
+    var total = this.get('model.capacityTotal') + 0;
+    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
+    id: 'widget-nn-capacity', // html id
+    stroke: '#D6DDDF', //light grey
+    thresh1: null,  // can be customized later
+    thresh2: null,
+    innerR: 25,
+
+    existCenterText: true,
+    centerTextColor: function () {
+      return this.get('contentColor');
+    }.property('contentColor'),
+
+    palette: new Rickshaw.Color.Palette({
+      scheme: [ '#FFFFFF', '#D6DDDF'].reverse()
+    }),
+
+    data: function () {
+      var total = this.get('model.capacityTotal') + 0;
+      var remaining = this.get('model.capacityRemaining') + 0;
+      var used = total - remaining;
+      var percent = total > 0 ? ((used * 100) / total).toFixed() : 0;
+      if (percent == "NaN" || percent < 0) {
+        percent = Em.I18n.t('services.service.summary.notAvailable') + " ";
+      }
+      return [ percent, 100 - percent];
+    }.property('model.capacityUsed', 'model.capacityTotal'),
+
+    contentColor: function () {
+      var used = parseFloat(this.get('data')[0]);
+      var thresh1 = parseFloat(this.get('thresh1'));
+      var thresh2 = parseFloat(this.get('thresh2'));
+      var color_green = '#95A800';
+      var color_red = '#B80000';
+      var color_orange = '#FF8E00';
+      if (used <= thresh1) {
+        this.set('palette', new Rickshaw.Color.Palette({
+          scheme: [ '#FFFFFF', color_green  ].reverse()
+        }))
+        return color_green;
+      } else if (used <= thresh2) {
+        this.set('palette', new Rickshaw.Color.Palette({
+          scheme: [ '#FFFFFF', color_orange  ].reverse()
+        }))
+        return color_orange;
+      } else {
+        this.set('palette', new Rickshaw.Color.Palette({
+          scheme: [ '#FFFFFF', color_red  ].reverse()
+        }))
+        return color_red;
+      }
+    }.property('data', 'this.thresh1', 'this.thresh2'),
+
+    // refresh text and color when data in model changed
+    refreshSvg: function () {
+      // remove old svg
+      var old_svg =  $("#" + this.id);
+      old_svg.remove();
+
+      // draw new svg
+      this.appendSvg();
+    }.observes('model.capacityUsed', 'model.capacityTotal', 'this.thresh1', 'this.thresh2')
+  })
+
+})

Added: incubator/ambari/trunk/ambari-web/app/views/main/dashboard/widgets/hdfs_links.js
URL: http://svn.apache.org/viewvc/incubator/ambari/trunk/ambari-web/app/views/main/dashboard/widgets/hdfs_links.js?rev=1491658&view=auto
==============================================================================
--- incubator/ambari/trunk/ambari-web/app/views/main/dashboard/widgets/hdfs_links.js (added)
+++ incubator/ambari/trunk/ambari-web/app/views/main/dashboard/widgets/hdfs_links.js Tue Jun 11 00:21:32 2013
@@ -0,0 +1,101 @@
+/**
+ * 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');
+
+App.HDFSLinksView = App.DashboardWidgetView.extend({
+
+  title: Em.I18n.t('dashboard.widgets.HDFSLinks'),
+  id: '17',
+
+  isPieChart: false,
+  isText: false,
+  isProgressBar: false,
+  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(),
+
+  nodeWebUrl: function () {
+    return "http://" + this.get('model').get('nameNode').get('publicHostName') + ":50070";
+  }.property('model.nameNode')
+
+})
+
+App.HDFSLinksView. reopenClass({
+  isLinks: true
+})

Added: incubator/ambari/trunk/ambari-web/app/views/main/dashboard/widgets/jobtracker_cpu.js
URL: http://svn.apache.org/viewvc/incubator/ambari/trunk/ambari-web/app/views/main/dashboard/widgets/jobtracker_cpu.js?rev=1491658&view=auto
==============================================================================
--- incubator/ambari/trunk/ambari-web/app/views/main/dashboard/widgets/jobtracker_cpu.js (added)
+++ incubator/ambari/trunk/ambari-web/app/views/main/dashboard/widgets/jobtracker_cpu.js Tue Jun 11 00:21:32 2013
@@ -0,0 +1,105 @@
+/**
+ * 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');
+
+App.JobTrackerCpuPieChartView = App.DashboardWidgetView.extend({
+
+  title: Em.I18n.t('dashboard.widgets.JobTrackerCpu'),
+  id: '7',
+
+  isPieChart: true,
+  isText: false,
+  isProgressBar: false,
+  model_type: 'mapreduce',
+  hiddenInfo: function () {
+    var value = this.get('model.jobTrackerCpu');
+    value = value >= 100 ? 100: value;
+    var result = [];
+    result.pushObject((value + 0).toFixed(2) + '%');
+    result.pushObject(' CPU wait I/O');
+    return result;
+  }.property('model.jobTrackerCpu'),
+
+  thresh1: 40,// can be customized
+  thresh2: 70,
+  maxValue: 100,
+
+  content: App.ChartPieView.extend({
+
+    model: null,  //data bind here
+    id: 'widget-jt-cpu', // html id
+    stroke: '#D6DDDF', //light grey
+    thresh1: 50,  // can be customized later
+    thresh2: 80,
+    innerR: 25,
+
+    existCenterText: true,
+    centerTextColor: function () {
+      return this.get('contentColor');
+    }.property('contentColor'),
+
+    palette: new Rickshaw.Color.Palette({
+      scheme: [ '#FFFFFF', '#D6DDDF'].reverse()
+    }),
+
+    data: function () {
+      var value = this.get('model.jobTrackerCpu');
+      //console.log('JT Cpu ' + value);
+      value = value >= 100 ? 100: value;
+      var percent = (value + 0).toFixed();
+      return [ percent, 100 - percent];
+    }.property('model.jobTrackerCpu'),
+
+    contentColor: function () {
+      var used = parseFloat(this.get('data')[0]);
+      var thresh1 = parseFloat(this.get('thresh1'));
+      var thresh2 = parseFloat(this.get('thresh2'));
+      var color_green = '#95A800';
+      var color_red = '#B80000';
+      var color_orange = '#FF8E00';
+      if (used <= thresh1) {
+        this.set('palette', new Rickshaw.Color.Palette({
+          scheme: [ '#FFFFFF', color_green  ].reverse()
+        }))
+        return color_green;
+      } else if (used <= thresh2) {
+        this.set('palette', new Rickshaw.Color.Palette({
+          scheme: [ '#FFFFFF', color_orange  ].reverse()
+        }))
+        return color_orange;
+      } else {
+        this.set('palette', new Rickshaw.Color.Palette({
+          scheme: [ '#FFFFFF', color_red  ].reverse()
+        }))
+        return color_red;
+      }
+    }.property('data', 'thresh1', 'thresh2'),
+
+    // refresh text and color when data in model changed
+    refreshSvg: function () {
+      // remove old svg
+      var old_svg =  $("#" + this.id);
+      old_svg.remove();
+
+      // draw new svg
+      this.appendSvg();
+    }.observes('model.jobTrackerCpu', 'thresh1', 'thresh2')
+  })
+
+})

Added: incubator/ambari/trunk/ambari-web/app/views/main/dashboard/widgets/jobtracker_heap.js
URL: http://svn.apache.org/viewvc/incubator/ambari/trunk/ambari-web/app/views/main/dashboard/widgets/jobtracker_heap.js?rev=1491658&view=auto
==============================================================================
--- incubator/ambari/trunk/ambari-web/app/views/main/dashboard/widgets/jobtracker_heap.js (added)
+++ incubator/ambari/trunk/ambari-web/app/views/main/dashboard/widgets/jobtracker_heap.js Tue Jun 11 00:21:32 2013
@@ -0,0 +1,127 @@
+/**
+ * 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');
+
+App.JobTrackerHeapPieChartView = App.DashboardWidgetView.extend({
+  title: Em.I18n.t('dashboard.widgets.JobTrackerHeap'),
+  id: '6',
+
+  isPieChart: true,
+  isText: false,
+  isProgressBar: false,
+  model_type: 'mapreduce',
+
+  hiddenInfo: function () {
+    var heapUsed = this.get('model').get('jobTrackerHeapUsed') || 0;
+    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');
+    return result;
+  }.property('model.jobTrackerHeapUsed', 'model.jobTrackerHeapMax'),
+
+  thresh1: 40,// can be customized
+  thresh2: 70,
+  maxValue: 100,
+
+  isPieExist: function () {
+    var total = this.get('model.jobTrackerHeapMax') * 1000000;
+    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
+    id: 'widget-jt-heap', // id in html
+    stroke: '#D6DDDF', //light grey
+    thresh1: null,
+    thresh2: null,
+    innerR: 25,
+
+    existCenterText: true,
+    centerTextColor: function (){
+      return this.get('contentColor');
+    }.property('contentColor'),
+
+    palette: new Rickshaw.Color.Palette({
+      scheme: [ '#FFFFFF', '#D6DDDF'].reverse()
+    }),
+
+    data: function () {
+      var used = this.get('model.jobTrackerHeapUsed') * 1000000;
+      var total = this.get('model.jobTrackerHeapMax') * 1000000;
+      var percent = total > 0 ? ((used)*100 / total).toFixed() : 0;
+      return [ percent, 100 - percent];
+    }.property('model.jobTrackerHeapUsed', 'model.jobTrackerHeapMax'),
+
+    contentColor: function (){
+      var used = parseFloat(this.get('data')[0]);
+      var thresh1 = parseFloat(this.get('thresh1'));
+      var thresh2 = parseFloat(this.get('thresh2'));
+      var color_green = '#95A800';
+      var color_red = '#B80000';
+      var color_orange = '#FF8E00';
+      if (used <= thresh1) {
+        this.set('palette', new Rickshaw.Color.Palette({
+          scheme: [ '#FFFFFF', color_green  ].reverse()
+        }))
+        return color_green;
+      } else if (used <= thresh2) {
+        this.set('palette', new Rickshaw.Color.Palette({
+          scheme: [ '#FFFFFF', color_orange  ].reverse()
+        }))
+        return color_orange;
+      } else {
+        this.set('palette', new Rickshaw.Color.Palette({
+          scheme: [ '#FFFFFF', color_red  ].reverse()
+        }))
+        return color_red;
+      }
+    }.property('data', 'this.thresh1', 'this.thresh2'),
+
+    refreshSvg: function () {
+      // remove old svg
+      var old_svg =  $("#" + this.id);
+      old_svg.remove();
+
+      // draw new svg
+      this.appendSvg();
+    }.observes('model.jobTrackerHeapUsed', 'model.jobTrackerHeapMax', 'this.thresh1', 'this.thresh2')
+  })
+
+})
\ No newline at end of file

Added: incubator/ambari/trunk/ambari-web/app/views/main/dashboard/widgets/jobtracker_rpc.js
URL: http://svn.apache.org/viewvc/incubator/ambari/trunk/ambari-web/app/views/main/dashboard/widgets/jobtracker_rpc.js?rev=1491658&view=auto
==============================================================================
--- incubator/ambari/trunk/ambari-web/app/views/main/dashboard/widgets/jobtracker_rpc.js (added)
+++ incubator/ambari/trunk/ambari-web/app/views/main/dashboard/widgets/jobtracker_rpc.js Tue Jun 11 00:21:32 2013
@@ -0,0 +1,203 @@
+/**
+ * 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');
+
+App.JobTrackerRpcView = App.DashboardWidgetView.extend({
+
+  title: Em.I18n.t('dashboard.widgets.JobTrackerRpc'),
+  id:'9',
+
+  isPieChart: false,
+  isText: true,
+  isProgressBar: false,
+  model_type: 'mapreduce',
+  hiddenInfo: function (){
+    var result = [];
+    result.pushObject(this.get('content') + ' average RPC');
+    result.pushObject('queue wait time');
+    return result;
+  }.property('model.jobTrackerRpc'),
+
+  classNameBindings: ['isRed', 'isOrange', 'isGreen', 'isNA'],
+  isGreen: function () {
+    var thresh1 = this.get('thresh1');
+    var thresh2 = this.get('thresh2');
+    return this.get('data') <= thresh1? true: false;
+  }.property('data','thresh1','thresh2'),
+  isOrange: function () {
+    var thresh1 = this.get('thresh1');
+    var thresh2 = this.get('thresh2');
+    return (this.get('data') <= thresh2 && this.get('data') > thresh1 )? true: false;
+  }.property('data','thresh1','thresh2'),
+  isRed: function () {
+    var thresh1 = this.get('thresh1');
+    var thresh2 = this.get('thresh2');
+    return this.get('data') > thresh2? true: false;
+  }.property('data','thresh1','thresh2'),
+  isNA: function () {
+     return this.get('data') === null;
+  }.property('data'),
+
+  thresh1: 0.5,
+  thresh2: 2,
+  maxValue: 'infinity',
+
+  data: function (){
+    if (this.get('model.jobTrackerRpc')) {
+      return (this.get('model.jobTrackerRpc')).toFixed(2);
+    } else {
+      if (this.get('model.jobTrackerRpc') == 0) {
+        return 0;
+      } else {
+        return null;
+      }
+    }
+  }.property('model.jobTrackerRpc'),
+
+  content: function () {
+    if (this.get('data') || this.get('data') == 0) {
+      return this.get('data') + " ms";
+    } else {
+      return this.t('services.service.summary.notAvailable');
+    }
+  }.property('model.jobTrackerRpc'),
+
+  editWidget: function (event) {
+    var parent = this;
+    var configObj = Ember.Object.create({
+      thresh1: parent.get('thresh1') + '',
+      thresh2: parent.get('thresh2') + '',
+      hintInfo: 'Edit the thresholds to change the color of current widget. ' +
+        ' The unit is milli-second. '+
+        ' So enter two numbers larger than 0. ',
+      isThresh1Error: false,
+      isThresh2Error: false,
+      errorMessage1: "",
+      errorMessage2: "",
+      maxValue: 'infinity',
+      observeNewThresholdValue: function () {
+        var thresh1 = this.get('thresh1');
+        var thresh2 = this.get('thresh2');
+        if (thresh1.trim() != "") {
+          if (isNaN(thresh1) || thresh1 < 0) {
+            this.set('isThresh1Error', true);
+            this.set('errorMessage1', 'Invalid! Enter a number larger than 0');
+          } else if (this.get('isThresh2Error') === false && parseFloat(thresh2)<= parseFloat(thresh1)) {
+            this.set('isThresh1Error', true);
+            this.set('errorMessage1', 'Threshold 1 should be smaller than threshold 2 !');
+          } else {
+            this.set('isThresh1Error', false);
+            this.set('errorMessage1', '');
+          }
+        } else {
+          this.set('isThresh1Error', true);
+          this.set('errorMessage1', 'This is required');
+        }
+
+        if (thresh2.trim() != "") {
+          if (isNaN(thresh2) || thresh2 < 0) {
+            this.set('isThresh2Error', true);
+            this.set('errorMessage2', 'Invalid! Enter a number larger than 0');
+          } else {
+            this.set('isThresh2Error', false);
+            this.set('errorMessage2', '');
+          }
+        } else{
+          this.set('isThresh2Error', true);
+          this.set('errorMessage2', 'This is required');
+        }
+      }.observes('thresh1', 'thresh2')
+    });
+
+    var browserVerion = this.getInternetExplorerVersion();
+    App.ModalPopup.show({
+      header: 'Customize Widget',
+      classNames: [ 'sixty-percent-width-modal-edit-widget'],
+      bodyClass: Ember.View.extend({
+        templateName: require('templates/main/dashboard/edit_widget_popup'),
+        configPropertyObj: configObj
+      }),
+      primary: Em.I18n.t('common.apply'),
+      onPrimary: function () {
+        configObj.observeNewThresholdValue();
+        if (!configObj.isThresh1Error && !configObj.isThresh2Error) {
+          parent.set('thresh1', parseFloat(configObj.get('thresh1')) );
+          parent.set('thresh2', parseFloat(configObj.get('thresh2')) );
+          if (!App.testMode) {
+            // save to persist
+            var big_parent = parent.get('parentView');
+            big_parent.getUserPref(big_parent.get('persistKey'));
+            var oldValue = big_parent.get('currentPrefObject');
+            oldValue.threshold[parseInt(parent.id)] = [configObj.get('thresh1'), configObj.get('thresh2')];
+            big_parent.postUserPref(big_parent.get('persistKey'),oldValue);
+          }
+
+          this.hide();
+        }
+      },
+      secondary : Em.I18n.t('common.cancel'),
+      onSecondary: function () {
+        this.hide();
+      },
+
+      didInsertElement: function () {
+        var colors = ['#95A800', '#FF8E00', '#B80000']; //color green, orange ,red
+        var handlers = [33, 66]; //fixed value
+
+        if (browserVerion == -1 || browserVerion > 9) {
+          configObj.set('isIE9', false);
+          configObj.set('isGreenOrangeRed', true);
+          $("#slider-range").slider({
+            range:true,
+            disabled:true,
+            min: 0,
+            max: 100,
+            values: handlers,
+            create: function (event, ui) {
+              updateColors(handlers);
+            }
+          });
+
+          function updateColors (handlers) {
+            var colorstops = colors[0] + ", "; // start with the first color
+            for (var i = 0; i < handlers.length; i++) {
+              colorstops += colors[i] + " " + handlers[i] + "%,";
+              colorstops += colors[i+1] + " " + handlers[i] + "%,";
+            }
+            // end with the last color
+            colorstops += colors[colors.length - 1];
+            var css1 = '-webkit-linear-gradient(left,' + colorstops + ')'; // chrome & safari
+            $('#slider-range').css('background-image', css1);
+            var css2 = '-ms-linear-gradient(left,' + colorstops + ')'; // IE 10+
+            $('#slider-range').css('background-image', css2);
+            //$('#slider-range').css('filter', 'progid:DXImageTransform.Microsoft.gradient( startColorStr= ' + colors[0] + ', endColorStr= ' + colors[2] +',  GradientType=1 )' ); // IE 10-
+            var css3 = '-moz-linear-gradient(left,' + colorstops + ')'; // Firefox
+            $('#slider-range').css('background-image', css3);
+
+            $('#slider-range .ui-widget-header').css({'background-color': '#FF8E00', 'background-image': 'none'}); // change the  original ranger color
+          }
+        } else {
+          configObj.set('isIE9', true);
+          configObj.set('isGreenOrangeRed', true);
+        }
+      }
+    });
+  }
+
+})

Added: incubator/ambari/trunk/ambari-web/app/views/main/dashboard/widgets/jobtracker_uptime.js
URL: http://svn.apache.org/viewvc/incubator/ambari/trunk/ambari-web/app/views/main/dashboard/widgets/jobtracker_uptime.js?rev=1491658&view=auto
==============================================================================
--- incubator/ambari/trunk/ambari-web/app/views/main/dashboard/widgets/jobtracker_uptime.js (added)
+++ incubator/ambari/trunk/ambari-web/app/views/main/dashboard/widgets/jobtracker_uptime.js Tue Jun 11 00:21:32 2013
@@ -0,0 +1,132 @@
+/**
+ * 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.JobTrackerUptimeView = App.DashboardWidgetView.extend({
+
+  title: Em.I18n.t('dashboard.widgets.JobTrackerUptime'),
+  id: '16',
+
+  isPieChart: false,
+  isText: true,
+  isProgressBar: false,
+  model_type: 'mapreduce',
+  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.jobTrackerStartTime');
+    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', ['JobTracker','Not running']);
+    return null;
+  }.property('model.jobTrackerStartTime'),
+
+  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.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();
+    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;
+  }
+
+})

Added: incubator/ambari/trunk/ambari-web/app/views/main/dashboard/widgets/mapreduce_links.js
URL: http://svn.apache.org/viewvc/incubator/ambari/trunk/ambari-web/app/views/main/dashboard/widgets/mapreduce_links.js?rev=1491658&view=auto
==============================================================================
--- incubator/ambari/trunk/ambari-web/app/views/main/dashboard/widgets/mapreduce_links.js (added)
+++ incubator/ambari/trunk/ambari-web/app/views/main/dashboard/widgets/mapreduce_links.js Tue Jun 11 00:21:32 2013
@@ -0,0 +1,94 @@
+/**
+ * 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');
+
+App.MapReduceLinksView = App.DashboardWidgetView.extend({
+
+  title: Em.I18n.t('dashboard.widgets.MapReduceLinks'),
+  id: '18',
+
+  isPieChart: false,
+  isText: false,
+  isProgressBar: false,
+  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(),
+
+  jobTrackerWebUrl: function () {
+    return "http://" + this.get('model').get('jobTracker').get('publicHostName') + ":50030";
+  }.property('model.nameNode')
+
+})
+
+App.MapReduceLinksView. reopenClass({
+  isLinks: true
+})

Added: incubator/ambari/trunk/ambari-web/app/views/main/dashboard/widgets/mapreduce_slots.js
URL: http://svn.apache.org/viewvc/incubator/ambari/trunk/ambari-web/app/views/main/dashboard/widgets/mapreduce_slots.js?rev=1491658&view=auto
==============================================================================
--- incubator/ambari/trunk/ambari-web/app/views/main/dashboard/widgets/mapreduce_slots.js (added)
+++ incubator/ambari/trunk/ambari-web/app/views/main/dashboard/widgets/mapreduce_slots.js Tue Jun 11 00:21:32 2013
@@ -0,0 +1,77 @@
+/**
+ * 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');
+
+App.MapReduceSlotsView = App.DashboardWidgetView.extend({
+
+  title: Em.I18n.t('dashboard.widgets.MapReduceSlots'),
+  id:'10',
+
+  isPieChart: false,
+  isText: false,
+  isProgressBar: true,
+  model_type: 'mapreduce',
+  hiddenInfo: function (){
+    var result = [];
+    result.pushObject('Occupied Slots/ Reserved Slots/ Total Slots');
+    return result;
+  }.property(),
+
+  map_occupied: function () {
+    if (this.get('model.mapSlotsOccupied')) {
+      return "width: " + ((this.get('model.mapSlotsOccupied'))*100/(this.get('model.mapSlots'))).toString() + "%";
+    } else {
+      return "width: 0%";
+    }
+  }.property('model.mapSlotsOccupied','model.mapSlots'),
+  map_reserved: function () {
+    if (this.get('model.mapSlotsReserved')) {
+      return "width: " + ((this.get('model.mapSlotsReserved'))*100/(this.get('model.mapSlots'))).toString() + "%";
+    } else {
+      return "width: 0%";
+    }
+  }.property('model.mapSlotsReserved','model.mapSlots'),
+  map_display_text: function () {
+    return this.get('model.mapSlotsOccupied') + "/" + this.get('model.mapSlotsReserved') + "/" + this.get('model.mapSlots');
+  }.property('model.mapSlotsReserved','model.mapSlotsOccupied','model.mapSlots'),
+
+
+  reduce_occupied: function () {
+    if (this.get('model.reduceSlotsOccupied')) {
+      return "width: " + ((this.get('model.reduceSlotsOccupied'))*100/(this.get('model.reduceSlots'))).toString() + "%";
+    } else {
+      return "width: 0%";
+    }
+  }.property('model.reduceSlotsOccupied','model.reduceSlots'),
+  reduce_reserved: function () {
+    if (this.get('model.reduceSlotsReserved')) {
+      return "width: " + ((this.get('model.reduceSlotsReserved'))*100/(this.get('model.reduceSlots'))).toString() + "%";
+    } else {
+      return "width: 0%";
+    }
+  }.property('model.reduceSlotsReserved','model.reduceSlots'),
+  reduce_display_text: function () {
+    return this.get('model.reduceSlotsOccupied') + "/" + this.get('model.reduceSlotsReserved') + "/" + this.get('model.reduceSlots');
+  }.property('model.reduceSlotsReserved','model.reduceSlotsOccupied','model.reduceSlots')
+
+})
+
+App.MapReduceSlotsView.reopenClass({
+  isProgressBar: true
+})
\ No newline at end of file

Added: incubator/ambari/trunk/ambari-web/app/views/main/dashboard/widgets/metrics_cpu.js
URL: http://svn.apache.org/viewvc/incubator/ambari/trunk/ambari-web/app/views/main/dashboard/widgets/metrics_cpu.js?rev=1491658&view=auto
==============================================================================
--- incubator/ambari/trunk/ambari-web/app/views/main/dashboard/widgets/metrics_cpu.js (added)
+++ incubator/ambari/trunk/ambari-web/app/views/main/dashboard/widgets/metrics_cpu.js Tue Jun 11 00:21:32 2013
@@ -0,0 +1,34 @@
+/**
+ * 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');
+
+App.ChartClusterMetricsCPUWidgetView = App.DashboardWidgetView.extend({
+
+  title: Em.I18n.t('dashboard.clusterMetrics.cpu'),
+  id: '13',
+
+  isClusterMetrics: true,
+  isPieChart: false,
+  isText: false,
+  isProgressBar: false,
+
+  content: App.ChartClusterMetricsCPU.extend({
+    noTitleUnderGraph: true
+  })
+})

Added: incubator/ambari/trunk/ambari-web/app/views/main/dashboard/widgets/metrics_load.js
URL: http://svn.apache.org/viewvc/incubator/ambari/trunk/ambari-web/app/views/main/dashboard/widgets/metrics_load.js?rev=1491658&view=auto
==============================================================================
--- incubator/ambari/trunk/ambari-web/app/views/main/dashboard/widgets/metrics_load.js (added)
+++ incubator/ambari/trunk/ambari-web/app/views/main/dashboard/widgets/metrics_load.js Tue Jun 11 00:21:32 2013
@@ -0,0 +1,34 @@
+/**
+ * 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');
+
+App.ChartClusterMetricsLoadWidgetView = App.DashboardWidgetView.extend({
+
+  title: Em.I18n.t('dashboard.clusterMetrics.load'),
+  id: '14',
+
+  isClusterMetrics: true,
+  isPieChart: false,
+  isText: false,
+  isProgressBar: false,
+
+  content: App.ChartClusterMetricsLoad.extend({
+    noTitleUnderGraph: true
+  })
+})

Added: incubator/ambari/trunk/ambari-web/app/views/main/dashboard/widgets/metrics_memory.js
URL: http://svn.apache.org/viewvc/incubator/ambari/trunk/ambari-web/app/views/main/dashboard/widgets/metrics_memory.js?rev=1491658&view=auto
==============================================================================
--- incubator/ambari/trunk/ambari-web/app/views/main/dashboard/widgets/metrics_memory.js (added)
+++ incubator/ambari/trunk/ambari-web/app/views/main/dashboard/widgets/metrics_memory.js Tue Jun 11 00:21:32 2013
@@ -0,0 +1,34 @@
+/**
+ * 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');
+
+App.ChartClusterMetricsMemoryWidgetView = App.DashboardWidgetView.extend({
+
+  title: Em.I18n.t('dashboard.clusterMetrics.memory'),
+  id: '11',
+
+  isClusterMetrics: true,
+  isPieChart: false,
+  isText: false,
+  isProgressBar: false,
+
+  content: App.ChartClusterMetricsMemory.extend({
+    noTitleUnderGraph: true
+  })
+})

Added: incubator/ambari/trunk/ambari-web/app/views/main/dashboard/widgets/metrics_network.js
URL: http://svn.apache.org/viewvc/incubator/ambari/trunk/ambari-web/app/views/main/dashboard/widgets/metrics_network.js?rev=1491658&view=auto
==============================================================================
--- incubator/ambari/trunk/ambari-web/app/views/main/dashboard/widgets/metrics_network.js (added)
+++ incubator/ambari/trunk/ambari-web/app/views/main/dashboard/widgets/metrics_network.js Tue Jun 11 00:21:32 2013
@@ -0,0 +1,34 @@
+/**
+ * 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');
+
+App.ChartClusterMetricsNetworkWidgetView = App.DashboardWidgetView.extend({
+
+  title: Em.I18n.t('dashboard.clusterMetrics.network'),
+  id: '12',
+
+  isClusterMetrics: true,
+  isPieChart: false,
+  isText:false,
+  isProgressBar:false,
+
+  content: App.ChartClusterMetricsNetwork.extend({
+    noTitleUnderGraph: true
+  })
+})

Added: incubator/ambari/trunk/ambari-web/app/views/main/dashboard/widgets/namenode_cpu.js
URL: http://svn.apache.org/viewvc/incubator/ambari/trunk/ambari-web/app/views/main/dashboard/widgets/namenode_cpu.js?rev=1491658&view=auto
==============================================================================
--- incubator/ambari/trunk/ambari-web/app/views/main/dashboard/widgets/namenode_cpu.js (added)
+++ incubator/ambari/trunk/ambari-web/app/views/main/dashboard/widgets/namenode_cpu.js Tue Jun 11 00:21:32 2013
@@ -0,0 +1,104 @@
+/**
+ * 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');
+
+App.NameNodeCpuPieChartView = App.DashboardWidgetView.extend({
+
+  title: Em.I18n.t('dashboard.widgets.NameNodeCpu'),
+  id: '3',
+
+  isPieChart: true,
+  isText: false,
+  isProgressBar: false,
+  model_type: 'hdfs',
+  hiddenInfo: function () {
+    var value = this.get('model.nameNodeCpu');
+    value = value >= 100 ? 100: value;
+    var result = [];
+    result.pushObject((value + 0).toFixed(2) + '%');
+    result.pushObject(' CPU wait I/O');
+    return result;
+  }.property('model.nameNodeCpu'),
+
+  thresh1: 40,// can be customized
+  thresh2: 70,
+  maxValue: 100,
+
+  content: App.ChartPieView.extend({
+
+    model: null,  //data bind here
+    id: 'widget-nn-cpu', // html id
+    stroke: '#D6DDDF', //light grey
+    thresh1: null,  // can be customized later
+    thresh2: null,
+    innerR: 25,
+
+    existCenterText: true,
+    centerTextColor: function () {
+      return this.get('contentColor');
+    }.property('contentColor'),
+
+    palette: new Rickshaw.Color.Palette ({
+      scheme: [ '#FFFFFF', '#D6DDDF'].reverse()
+    }),
+
+    data: function () {
+      var value = this.get('model.nameNodeCpu');
+      value = value >= 100 ? 100: value;
+      var percent = (value + 0).toFixed();
+      return [ percent, 100 - percent];
+    }.property('model.nameNodeCpu'),
+
+    contentColor: function () {
+      var used = parseFloat(this.get('data')[0]);
+      var thresh1 = parseFloat(this.get('thresh1'));
+      var thresh2 = parseFloat(this.get('thresh2'));
+      var color_green = '#95A800';
+      var color_red = '#B80000';
+      var color_orange = '#FF8E00';
+      if (used <= thresh1) {
+        this.set('palette', new Rickshaw.Color.Palette({
+          scheme: [ '#FFFFFF', color_green  ].reverse()
+        }))
+        return color_green;
+      } else if (used <= thresh2) {
+        this.set('palette', new Rickshaw.Color.Palette({
+          scheme: [ '#FFFFFF', color_orange  ].reverse()
+        }))
+        return color_orange;
+      } else {
+        this.set('palette', new Rickshaw.Color.Palette({
+          scheme: [ '#FFFFFF', color_red  ].reverse()
+        }))
+        return color_red;
+      }
+    }.property('data', 'thresh1', 'thresh2'),
+
+    // refresh text and color when data in model changed
+    refreshSvg: function () {
+      // remove old svg
+      var old_svg =  $("#" + this.id);
+      old_svg.remove();
+
+      // draw new svg
+      this.appendSvg();
+    }.observes('model.nameNodeCpu', 'thresh1', 'thresh2')
+  })
+
+})

Added: incubator/ambari/trunk/ambari-web/app/views/main/dashboard/widgets/namenode_heap.js
URL: http://svn.apache.org/viewvc/incubator/ambari/trunk/ambari-web/app/views/main/dashboard/widgets/namenode_heap.js?rev=1491658&view=auto
==============================================================================
--- incubator/ambari/trunk/ambari-web/app/views/main/dashboard/widgets/namenode_heap.js (added)
+++ incubator/ambari/trunk/ambari-web/app/views/main/dashboard/widgets/namenode_heap.js Tue Jun 11 00:21:32 2013
@@ -0,0 +1,132 @@
+/**
+ * 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');
+
+App.NameNodeHeapPieChartView = App.DashboardWidgetView.extend({
+
+  title: Em.I18n.t('dashboard.widgets.NameNodeHeap'),
+  id: '1',
+
+  isPieChart: true,
+  isText: false,
+  isProgressBar: false,
+  model_type: 'hdfs',
+
+  hiddenInfo: function () {
+  var memUsed = this.get('model').get('jvmMemoryHeapUsed') * 1000000;
+  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');
+  return result;
+  }.property('model.jvmMemoryHeapUsed', 'model.jvmMemoryHeapCommitted'),
+
+  thresh1: null,
+  thresh2: null,
+  maxValue: 100,
+
+  isPieExist: function () {
+    var total = this.get('model.jvmMemoryHeapCommitted') * 1000000;
+    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
+    id: 'widget-nn-heap', // html id
+    stroke: '#D6DDDF', //light grey
+    thresh1: null, //bind from parent
+    thresh2: null,
+    innerR: 25,
+
+    existCenterText: true,
+    centerTextColor: function () {
+      return this.get('contentColor');
+    }.property('contentColor'),
+
+    palette: new Rickshaw.Color.Palette({
+      scheme: [ '#FFFFFF', '#D6DDDF'].reverse()
+    }),
+
+    data: function () {
+      var used = this.get('model.jvmMemoryHeapUsed') * 1000000;
+      var total = this.get('model.jvmMemoryHeapCommitted') * 1000000;
+      var percent = total > 0 ? ((used)*100 / total).toFixed() : 0;
+      return [ percent, 100 - percent];
+    }.property('model.jvmMemoryHeapUsed', 'model.jvmMemoryHeapCommitted'),
+
+    contentColor: function () {
+      var used = parseFloat(this.get('data')[0]);
+      var thresh1 = parseFloat(this.get('thresh1'));
+      var thresh2 = parseFloat(this.get('thresh2'));
+      var color_green = '#95A800';
+      var color_red = '#B80000';
+      var color_orange = '#FF8E00';
+      if (used <= thresh1) {
+        this.set('palette', new Rickshaw.Color.Palette({
+          scheme: [ '#FFFFFF', color_green  ].reverse()
+        }))
+        return color_green;
+      } else if (used <= thresh2) {
+        this.set('palette', new Rickshaw.Color.Palette({
+          scheme: [ '#FFFFFF', color_orange  ].reverse()
+        }))
+        return color_orange;
+      } else {
+        this.set('palette', new Rickshaw.Color.Palette({
+          scheme: [ '#FFFFFF', color_red  ].reverse()
+        }))
+        return color_red;
+      }
+    }.property('data', 'this.thresh1', 'this.thresh2'),
+
+    // refresh text and color when data in model changed
+    refreshSvg: function () {
+      // remove old svg
+      var old_svg =  $("#" + this.id);
+      if(old_svg){
+        old_svg.remove();
+      }
+      // draw new svg
+      this.appendSvg();
+    }.observes('model.jvmMemoryHeapUsed', 'model.jvmMemoryHeapCommitted', 'this.thresh1', 'this.thresh2')
+  })
+
+})
+
+



Mime
View raw message