AMBARI-7456. Slider View: New HBase app with metrics enabled should show graphs (srimanth)

contrib/views/slider/src/main/resources/ui/app/helpers/ajax.js

@@ -189,8 +189,12 @@ var urls = {
   },
 
   'metrics': {
-    real: 'apps/{id}/metrics/{metric}',
-    mock: '/data/metrics/metric.json'
+    real: 'apps/{id}?fields=metrics/{metric}',
+    mock: '/data/metrics/metric.json',
+    headers: {
+      "Accept": "text/plain; charset=utf-8",
+      "Content-Type": "text/plain; charset=utf-8"
+    }
   },
 
   'metrics2': {

contrib/views/slider/src/main/resources/ui/app/helpers/helper.js

@@ -24,6 +24,20 @@ String.prototype.format = function () {
   });
 };
 
+/**
+ * Return formatted string with inserted spaces before upper case and replaced '_' to spaces
+ * Also capitalize first letter
+ *
+ * Examples:
+ * 'apple' => 'Apple'
+ * 'apple_banana' => 'Apple banana'
+ * 'apple_bananaUranium' => 'Apple banana Uranium'
+ */
+String.prototype.humanize = function () {
+  var content = this;
+  return content && (content[0].toUpperCase() + content.slice(1)).replace(/([A-Z])/g, ' $1').replace(/_/g, ' ');
+}
+
 /**
  * Helper function for bound property helper registration
  * @memberof App
@@ -38,7 +52,6 @@ App.registerBoundHelper = function(name, view) {
   });
 };
 
-
 /**
  * Return formatted string with inserted <code>wbr</code>-tag after each dot
  *
@@ -98,7 +111,7 @@ App.registerBoundHelper('humanize', Em.View.extend({
    */
   result: function() {
     var content = this.get('content');
-    return content && (content[0].toUpperCase() + content.slice(1)).replace(/([A-Z])/g, ' $1').replace(/_/g, ' ');
+    return content && content.humanize();
   }.property('content')
 }));
 

contrib/views/slider/src/main/resources/ui/app/views/common/chart_view.js

@@ -166,9 +166,13 @@ App.ChartView = Ember.View.extend({
     this.set('chartClass', this.get('chartId'));
     this.set('titleId', idTemplate.replace('{element}', 'title'));
     this.set('titleClass', this.get('titleId'));
-    this.loadData();
+    this.set('interval', 6000);
+    this.run('loadData', true);
   },
 
+  willDestroyElement: function() {
+    this.stop(); // Stop periodic load
+  },
 
   loadData: function() {
     App.ajax.send({

contrib/views/slider/src/main/resources/ui/app/views/slider_app/metrics/app_metric_view.js

@@ -24,7 +24,7 @@
  * @extends Ember.Object
  * @extends Ember.View
  */
-App.AppMetricView = App.ChartView.extend({
+App.AppMetricView = App.ChartView.extend(App.RunPeriodically, {
 
   app: null,
 
@@ -35,10 +35,10 @@ App.AppMetricView = App.ChartView.extend({
   }.property('app.id', 'metricName'),
 
   title: function() {
-    return this.get('metricName');
+    return this.get('metricName').humanize();
   }.property('metricName'),
 
-  yAxisFormatter: App.ChartView.BytesFormatter,
+  yAxisFormatter: App.ChartView.DefaultFormatter,
 
   renderer: 'line',