AMBARI-10268 Draw Gauge widget from the relevant retrieved widget data from the API. (atkach)

ambari-web/app/assets/data/metrics/HBASE/Append_num_ops_&_Delete_num_ops.json

@@ -6,6 +6,10 @@
     "service_name" : "HBASE"
   },
   "metrics" : {
+    "jvm": {
+      "HeapMemoryUsed": 61,
+      "HeapMemoryMax": 100
+    },
     "hbase" : {
       "ipc" : {
         "IPC" : {
@@ -13,8 +17,8 @@
         }
       },
       "regionserver" : {
+        "percentFilesLocal" : 99,
         "Server" : {
-          "percentFilesLocal" : 99,
           "Append_num_ops" : [
             [
               2.0,

ambari-web/app/assets/data/widget_layouts/HBASE/stack_layout.json

@@ -72,6 +72,38 @@
             "properties": {
               "display_unit": "%"
             }
+          },
+          {
+            "widget_name": "NAMENODE_HEAP",
+            "display_name": "NameNode Heap",
+            "widget_type": "GAUGE",
+            "description": "",
+            "metrics":[
+              {
+                "name": "java.lang:type=Memory.HeapMemoryUsage[used]",
+                "widget_id": "metrics/jvm/HeapMemoryUsed",
+                "category": "",
+                "service_name": "HBASE",
+                "component_name": "HBASE_REGIONSERVER"
+              },
+              {
+                "name": "java.lang:type=Memory.HeapMemoryUsage[max]",
+                "widget_id": "metrics/jvm/HeapMemoryMax",
+                "category": "",
+                "service_name": "HBASE",
+                "component_name": "HBASE_REGIONSERVER"
+              }
+            ],
+            "values": [
+              {
+                "name": "NameNode heap",
+                "value": "${java.lang:type=Memory.HeapMemoryUsage[used]/java.lang:type=Memory.HeapMemoryUsage[max]}"
+              }
+            ],
+            "properties": {
+              "warning_threshold": 0.9,
+              "error_threshold": 0.7
+            }
           }
         ]
       }

ambari-web/app/controllers/main/service/info/summary.js

@@ -346,8 +346,7 @@ App.MainServiceInfoSummaryController = Em.Controller.extend({
         stackVersionURL: App.get('stackVersionURL'),
         serviceName: this.get('content.serviceName')
       },
-      success: 'loadStackWidgetsLayoutSuccessCallback',
-      error: 'loadStackWidgetsLayoutErrorCallback'
+      success: 'loadStackWidgetsLayoutSuccessCallback'
     });
   },
 

ambari-web/app/mixins/common/widget_mixin.js

@@ -24,7 +24,7 @@ App.WidgetMixin = Ember.Mixin.create({
    * @type {RegExp}
    * @const
    */
-  EXPRESSION_REGEX: /\$\{([\w\.\+\-\*\/\(\)]*)\}/g,
+  EXPRESSION_REGEX: /\$\{([\w\.\+\-\*\/\(\)\:\=\[\]]*)\}/g,
 
   /**
    * @type {RegExp}
@@ -36,7 +36,7 @@ App.WidgetMixin = Ember.Mixin.create({
    * @type {RegExp}
    * @const
    */
-  VALUE_NAME_REGEX: /[\w\.]+/g,
+  VALUE_NAME_REGEX: /[\w\.\:\=\[\]]+/g,
 
   /**
    * common metrics container
@@ -101,6 +101,55 @@ App.WidgetMixin = Ember.Mixin.create({
     return expressions;
   },
 
+  /**
+   * calculate series datasets for graph widgets
+   */
+  calculateValues: function () {
+    var metrics = this.get('metrics');
+    var displayUnit = this.get('content.properties.display_unit');
+
+    this.get('content.values').forEach(function (value) {
+      var computeExpression = this.computeExpression(this.extractExpressions(value), metrics);
+      value.computedValue = value.value.replace(this.get('EXPRESSION_REGEX'), function (match) {
+        return (computeExpression[match]) ? computeExpression[match] + (displayUnit || "") : Em.I18n.t('common.na');
+      });
+    }, this);
+  },
+
+  /**
+   * compute expression
+   * @param expressions
+   * @param metrics
+   * @returns {object}
+   */
+  computeExpression: function (expressions, metrics) {
+    var result = {};
+
+    expressions.forEach(function (_expression) {
+      var validExpression = true;
+      var value = "";
+
+      //replace values with metrics data
+      var beforeCompute = _expression.replace(this.get('VALUE_NAME_REGEX'), function (match) {
+        if (metrics.someProperty('name', match)) {
+          return metrics.findProperty('name', match).data;
+        } else {
+          validExpression = false;
+          console.warn('Metrics not found to compute expression');
+        }
+      });
+
+      if (validExpression) {
+        //check for correct math expression
+        validExpression = this.get('MATH_EXPRESSION_REGEX').test(beforeCompute);
+        !validExpression && console.warn('Value is not correct mathematical expression');
+      }
+
+      result['${' + _expression + '}'] = (validExpression) ? Number(window.eval(beforeCompute)).toString() : value;
+    }, this);
+    return result;
+  },
+
   /**
    * get data formatted for request
    * @param {Array} metrics
@@ -143,11 +192,10 @@ App.WidgetMixin = Ember.Mixin.create({
 
   getServiceComponentMetricsSuccessCallback: function (data, opt, params) {
     var metrics = [];
-    var metricsData = data.metrics[params.serviceName.toLowerCase()];
 
     this.get('content.metrics').forEach(function (_metric) {
-      if (Em.get(metricsData, _metric.name)) {
-        _metric.data = Em.get(metricsData, _metric.name);
+      if (Em.get(data, _metric.widget_id.replace(/\//g, '.'))) {
+        _metric.data = Em.get(data, _metric.widget_id.replace(/\//g, '.'));
         this.get('metrics').pushObject(_metric);
       }
     }, this);

ambari-web/app/models/widget.js

@@ -59,6 +59,8 @@ App.Widget = DS.Model.extend({
         return App.GraphWidgetView;
       case 'NUMBER':
         return App.TemplateWidgetView;
+      case 'GAUGE':
+        return App.GaugeWidgetView;
       default:
         return Em.View;
     }

ambari-web/app/styles/widget_layout.less

@@ -18,21 +18,28 @@
 
 #widget_layout {
   .widget {
+    .title {
+      padding: 5px 0 0 5px;
+      height: 25px;
+      font-weight: bold;
+      text-align: left;
+    }
+    .content {
+      text-align: center;
+      color: #5ab400;
+      padding-top: 35px;
+      font-weight: bold;
+      font-size: 35px;
+    }
     .template-widget {
       height: 150px;
       width: 90%;
-      .title {
-        padding: 5px 0 0 5px;
-        height: 25px;
-        font-weight: bold;
-        text-align: left;
-      }
+    }
+    .gauge-widget {
+      height: 150px;
+      width: 90%;
       .content {
-        text-align: center;
-        color: #5ab400;
-        padding-top: 35px;
-        font-weight: bold;
-        font-size: 35px;
+        padding-top: 5px;
       }
     }
   }

ambari-web/app/templates/common/widget/gauge_widget.hbs

@@ -0,0 +1,22 @@
+{{!
+* 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="gauge-widget thumbnail">
+  <div class="caption title">{{view.title}}</div>
+  <div class="content"> {{view view.chartView}}</div>
+</div>

ambari-web/app/views.js

@@ -65,13 +65,14 @@ require('views/common/configs/widgets/time_interval_spinner_view');
 require('views/common/configs/widgets/toggle_config_widget_view');
 require('views/common/configs/widgets/overrides/slider_config_widget_override_view');
 require('views/common/configs/service_config_layout_tab_view');
-require('views/common/widget/template_widget_view');
 require('views/common/filter_combobox');
 require('views/common/filter_combo_cleanable');
 require('views/common/table_view');
 require('views/common/progress_bar_view');
 require('views/common/controls_view');
 require('views/common/widget/graph_widget_view');
+require('views/common/widget/template_widget_view');
+require('views/common/widget/gauge_widget_view');
 require('views/login');
 require('views/main');
 require('views/main/menu');

ambari-web/app/views/common/widget/gauge_widget_view.js

@@ -0,0 +1,120 @@
+/**
+ * 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.GaugeWidgetView = Em.View.extend(App.WidgetMixin, {
+  templateName: require('templates/common/widget/gauge_widget'),
+
+  /**
+   * @type {string}
+   */
+  title: '',
+
+  /**
+   * @type {string}
+   */
+  value: '',
+
+  /**
+   * common metrics container
+   * @type {Array}
+   */
+  metrics: [],
+
+  drawWidget: function () {
+    if (this.get('isLoaded')) {
+      this.calculateValues();
+      this.set('title', this.get('content.values')[0].name);
+      this.set('value', this.get('content.values')[0].computedValue);
+    }
+  }.observes('isLoaded'),
+
+  chartView: App.ChartPieView.extend({
+    stroke: '#D6DDDF', //light grey
+    innerR: 25,
+
+    FACTOR: 100,
+
+    MAX_VALUE: 100,
+
+    warningThreshold: function(){
+      return this.get('parentView.content.properties.warning_threshold');
+    }.property('parentView.content.properties.warning_threshold'),
+
+    errorThreshold: function(){
+      return this.get('parentView.content.properties.error_threshold');
+    }.property('parentView.content.properties.error_threshold'),
+
+    id: function() {
+      return this.get('parentView.content.widgetName');
+    }.property('parentView.content.widgetName'),
+
+    existCenterText: true,
+    centerTextColor: function () {
+      return this.get('contentColor');
+    }.property('contentColor'),
+
+    palette: new Rickshaw.Color.Palette({
+      scheme: [ '#FFFFFF', '#D6DDDF'].reverse()
+    }),
+
+    data: function () {
+      var data = parseFloat(this.get('parentView.value')) * this.get('FACTOR');
+      if (isNaN(data)) return [this.get('MAX_VALUE'), 0];
+      return [data, this.get('MAX_VALUE') - data];
+    }.property('parentView.value'),
+
+    contentColor: function () {
+      var used = parseFloat(this.get('parentView.value')) * this.get('FACTOR');
+      var thresh1 = parseFloat(this.get('warningThreshold')) * this.get('FACTOR');
+      var thresh2 = parseFloat(this.get('errorThreshold')) * this.get('FACTOR');
+      var color_green = App.healthStatusGreen;
+      var color_red = App.healthStatusRed;
+      var color_orange = App.healthStatusOrange;
+      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('parentView.value', 'warningThreshold', 'errorThreshold'),
+
+    // refresh text and color when data in model changed
+    refreshSvg: function () {
+      // remove old svg
+      var old_svg =  $("#" + this.get('id'));
+      if(old_svg){
+        old_svg.remove();
+      }
+
+      // draw new svg
+      this.appendSvg();
+    }.observes('parentView.value', 'warningThreshold', 'errorThreshold')
+  })
+});

ambari-web/app/views/common/widget/graph_widget_view.js

@@ -67,14 +67,14 @@ App.GraphWidgetView = App.ChartLinearTimeView.extend(App.WidgetMixin, {
 
   drawWidget: function () {
     if (this.get('isLoaded')) {
-      this._refreshGraph(this.calculateSeries())
+      this._refreshGraph(this.calculateValues())
     }
   }.observes('isLoaded'),
 
   /**
    * calculate series datasets for graph widgets
    */
-  calculateSeries: function () {
+  calculateValues: function () {
     var metrics = this.get('metrics');
     var seriesData = [];
 

ambari-web/app/views/common/widget/template_widget_view.js

@@ -43,54 +43,5 @@ App.TemplateWidgetView = Em.View.extend(App.WidgetMixin, {
       this.set('value', this.get('content.values')[0].computedValue);
       this.set('title', this.get('content.values')[0].name);
     }
-  }.observes('isLoaded'),
-
-  /**
-   * calculate series datasets for graph widgets
-   */
-  calculateValues: function () {
-    var metrics = this.get('metrics');
-    var displayUnit = this.get('content.properties.display_unit');
-
-    this.get('content.values').forEach(function (value) {
-      var computeExpression = this.computeExpression(this.extractExpressions(value), metrics);
-      value.computedValue = value.value.replace(this.get('EXPRESSION_REGEX'), function (match) {
-        return (computeExpression[match]) ? computeExpression[match] + displayUnit : Em.I18n.t('common.na');
-      });
-    }, this);
-  },
-
-  /**
-   * compute expression
-   * @param expressions
-   * @param metrics
-   * @returns {object}
-   */
-  computeExpression: function (expressions, metrics) {
-    var result = {};
-
-    expressions.forEach(function (_expression) {
-      var validExpression = true;
-      var value = "";
-
-      //replace values with metrics data
-      var beforeCompute = _expression.replace(this.get('VALUE_NAME_REGEX'), function (match) {
-        if (metrics.someProperty('name', match)) {
-          return metrics.findProperty('name', match).data;
-        } else {
-          validExpression = false;
-          console.warn('Metrics not found to compute expression');
-        }
-      });
-
-      if (validExpression) {
-        //check for correct math expression
-        validExpression = this.get('MATH_EXPRESSION_REGEX').test(beforeCompute);
-        !validExpression && console.warn('Value is not correct mathematical expression');
-      }
-
-      result['${' + _expression + '}'] = (validExpression) ? Number(window.eval(beforeCompute)).toString() : value;
-    }, this);
-    return result;
-  }
+  }.observes('isLoaded')
 });

ambari-web/test/mixins/common/widget_mixin_test.js

@@ -179,16 +179,15 @@ describe('App.WidgetMixin', function() {
     });
   });
 
-  describe("#getServiceComponentMetricsSuccessCallback()", function() {
+  describe("#getServiceComponentMetricsSuccessCallback()", function () {
     var mixinObject = mixinClass.create();
-
-    it("", function() {
+    it("", function () {
       var data = {
         metrics: {
-          "hbase" : {
-            "ipc" : {
-              "IPC" : {
-                "numOpenConnections" : 11.5
+          "hbase": {
+            "ipc": {
+              "IPC": {
+                "numOpenConnections": 11.5
               }
             }
           }
@@ -196,11 +195,11 @@ describe('App.WidgetMixin', function() {
       };
       mixinObject.set('content.metrics', [
         {
-          name: 'ipc.IPC.numOpenConnections'
+          widget_id: 'metrics/hbase/ipc/IPC/numOpenConnections'
         }
       ]);
-      mixinObject.getServiceComponentMetricsSuccessCallback(data, {}, {serviceName: 'hbase'});
-      expect(mixinObject.get('metrics').findProperty('name', 'ipc.IPC.numOpenConnections').data).to.equal(11.5);
+      mixinObject.getServiceComponentMetricsSuccessCallback(data);
+      expect(mixinObject.get('metrics').findProperty('widget_id', 'metrics/hbase/ipc/IPC/numOpenConnections').data).to.equal(11.5);
     });
   });
 
@@ -234,5 +233,66 @@ describe('App.WidgetMixin', function() {
     });
   });
 
+  describe("#calculateValues()", function() {
+    var mixinObject = mixinClass.create();
+
+    beforeEach(function () {
+      sinon.stub(mixinObject, 'extractExpressions');
+      this.mock = sinon.stub(mixinObject, 'computeExpression');
+    });
+    afterEach(function () {
+      mixinObject.extractExpressions.restore();
+      this.mock.restore();
+    });
+    it("value compute correctly", function() {
+      this.mock.returns({'${a}': 1});
+      mixinObject.set('content.values', [{
+        value: '${a}'
+      }]);
+      mixinObject.calculateValues();
+      expect(mixinObject.get('content.values')[0].computedValue).to.equal('1');
+    });
+    it("value not available", function() {
+      this.mock.returns({});
+      mixinObject.set('content.values', [{
+        value: '${a}'
+      }]);
+      mixinObject.calculateValues();
+      expect(mixinObject.get('content.values')[0].computedValue).to.equal(Em.I18n.t('common.na'));
+    });
+  });
+
+  describe("#computeExpression()", function() {
+    var mixinObject = mixinClass.create();
+
+    it("expression missing metrics", function() {
+      var expressions = ['e.m1'];
+      var metrics = [];
+      expect(mixinObject.computeExpression(expressions, metrics)).to.eql({
+        "${e.m1}": ""
+      });
+    });
+    it("Value is not correct mathematical expression", function() {
+      var expressions = ['e.m1'];
+      var metrics = [{
+        name: 'e.m1',
+        data: 'a+1'
+      }];
+      expect(mixinObject.computeExpression(expressions, metrics)).to.eql({
+        "${e.m1}": ""
+      });
+    });
+    it("correct expression", function() {
+      var expressions = ['e.m1+e.m1'];
+      var metrics = [{
+        name: 'e.m1',
+        data: 1
+      }];
+      expect(mixinObject.computeExpression(expressions, metrics)).to.eql({
+        "${e.m1+e.m1}": "2"
+      });
+    });
+  });
+
 });