AMBARI-10567. Integrate displaying of Graph widget on service summary page with the API. (Andrii via Jaimin)

ambari-server/src/main/resources/common-services/HBASE/0.96.0.2.0/widgets.json

@@ -86,7 +86,7 @@
             }
           ],
           "properties": {
-            "display_unit": "%"
+            "display_unit": ""
           }
         },
         {
@@ -128,7 +128,7 @@
             }
           ],
           "properties": {
-            "display_unit": "%"
+            "display_unit": ""
           }
         },
         {
@@ -165,14 +165,14 @@
           "is_visible": true,
           "metrics": [
             {
-              "name": "ipc.IPC.numOpenConnections",
-              "metric_path": "metrics/hbase/ipc/IPC/numOpenConnections",
+              "name": "ipc.IPC.numActiveHandler",
+              "metric_path": "metrics/hbase/ipc/IPC/numActiveHandler",
               "service_name": "HBASE",
               "component_name": "HBASE_REGIONSERVER"
             },
             {
               "name": "ipc.IPC.numCallsInGeneralQueue",
-              "metric_path": "metrics/hbase/ipc/IPC/numOpenConnections",
+              "metric_path": "metrics/hbase/ipc/IPC/numCallsInGeneralQueue",
               "service_name": "HBASE",
               "component_name": "HBASE_REGIONSERVER"
             }

ambari-server/src/main/resources/common-services/HBASE/1.1.0.2.3/widgets.json

@@ -92,7 +92,7 @@
             }
           ],
           "properties": {
-            "display_unit": "%"
+            "display_unit": ""
           }
         },
         {
@@ -134,7 +134,7 @@
             }
           ],
           "properties": {
-            "display_unit": "%"
+            "display_unit": ""
           }
         },
         {
@@ -171,14 +171,14 @@
           "is_visible": true,
           "metrics": [
             {
-              "name": "ipc.IPC.numOpenConnections",
-              "metric_path": "metrics/hbase/ipc/IPC/numOpenConnections",
+              "name": "ipc.IPC.numActiveHandler",
+              "metric_path": "metrics/hbase/ipc/IPC/numActiveHandler",
               "service_name": "HBASE",
               "component_name": "HBASE_REGIONSERVER"
             },
             {
               "name": "ipc.IPC.numCallsInGeneralQueue",
-              "metric_path": "metrics/hbase/ipc/IPC/numOpenConnections",
+              "metric_path": "metrics/hbase/ipc/IPC/numCallsInGeneralQueue",
               "service_name": "HBASE",
               "component_name": "HBASE_REGIONSERVER"
             }

ambari-server/src/main/resources/stacks/HDP/2.3/services/HBASE/widgets.json

@@ -92,7 +92,7 @@
             }
           ],
           "properties": {
-            "display_unit": "%"
+            "display_unit": ""
           }
         },
         {
@@ -134,7 +134,7 @@
             }
           ],
           "properties": {
-            "display_unit": "%"
+            "display_unit": ""
           }
         },
         {
@@ -171,14 +171,14 @@
           "is_visible": true,
           "metrics": [
             {
-              "name": "ipc.IPC.numOpenConnections",
-              "metric_path": "metrics/hbase/ipc/IPC/numOpenConnections",
+              "name": "ipc.IPC.numActiveHandler",
+              "metric_path": "metrics/hbase/ipc/IPC/numActiveHandler",
               "service_name": "HBASE",
               "component_name": "HBASE_REGIONSERVER"
             },
             {
               "name": "ipc.IPC.numCallsInGeneralQueue",
-              "metric_path": "metrics/hbase/ipc/IPC/numOpenConnections",
+              "metric_path": "metrics/hbase/ipc/IPC/numCallsInGeneralQueue",
               "service_name": "HBASE",
               "component_name": "HBASE_REGIONSERVER"
             }

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

@@ -24,7 +24,7 @@
               "widget_type": "GRAPH",
               "time_created": 1428990958952,
               "display_name": "RegionServer Reads and Writes",
-              "values": "[{\"name\":\"Read Requests\",\"value\":\"${regionserver.Server.Get_num_ops+regionserver.Server.ScanNext_num_ops}\"},{\"name\":\"Write Requests\",\"value\":\"${regionserver.Server.Append_num_ops+regionserver.Server.Delete_num_ops+regionserver.Server.Increment_num_ops+regionserver.Server.Mutate_num_ops}\"}]",
+              "values": "[{\"name\":\"Write Requests\",\"value\":\"${regionserver.Server.Append_num_ops}\"}]",
               "cluster_name": "c1"
             }
           },

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

@@ -408,9 +408,9 @@ App.MainServiceInfoSummaryController = Em.Controller.extend({
    * @param {object|null} data
    */
   loadActiveWidgetLayoutSuccessCallback: function (data) {
-    console.log("*******: " + data.items[0] );
     if (data.items[0]) {
-      App.widgetLayoutMapper.map(data.items[0]);
+      App.widgetMapper.map(data.items[0].WidgetLayoutInfo);
+      App.widgetLayoutMapper.map(data);
       this.set('activeWidgetLayout', App.WidgetLayout.find().findProperty('layoutName', this.get('defaultLayoutName')));
       this.set('isWidgetsLoaded', true);
     }

ambari-web/app/mappers/widget_layout_mapper.js

@@ -18,52 +18,19 @@
 
 
 App.widgetLayoutMapper = App.QuickDataMapper.create({
-  widgetLayoutModel: App.WidgetLayout,
-  widgetModel:  App.Widget,
-  widgetLayoutConfig: {
-    id: 'id',
-    layout_name: 'layout_name',
-    section_name: 'section_name',
-    scope: 'scope',
-    user: 'user_name',
-    display_name: 'display_name',
-    widgets_key: 'widgets',
+  model: App.WidgetLayout,
+
+  config: {
+    id: 'WidgetLayoutInfo.id',
+    layout_name: 'WidgetLayoutInfo.layout_name',
+    section_name: 'WidgetLayoutInfo.section_name',
+    scope: 'WidgetLayoutInfo.scope',
+    user: 'WidgetLayoutInfo.user_name',
+    display_name: 'WidgetLayoutInfo.display_name',
+    widgets_key: 'WidgetLayoutInfo.widgets',
     widgets_type: 'array',
     widgets: {
-      item: 'id'
+      item: 'WidgetInfo.id'
     }
-  },
-  widgetConfig: {
-    id: 'id',
-    widget_name: 'widget_name',
-    default_order: 'default_order',
-    widget_type: 'widget_type',
-    display_name: 'display_name',
-    time_created: 'time_created',
-    author: 'author',
-    properties: 'properties',
-    metrics: 'metrics',
-    values: 'values',
-    description: 'description',
-    scope: 'scope'
-  },
-
-
-  map: function(json) {
-    var modelWidget = this.widgetModel;
-    var modelWidgetLayout = this.widgetLayoutModel;
-
-    var resultWidget = [];
-    json.WidgetLayoutInfo.widgets.forEach(function(item, index) {
-      item = item.WidgetInfo;
-      item.metrics = JSON.parse(item.metrics);
-      item.values = JSON.parse(item.values);
-      resultWidget.push(this.parseIt(item, this.widgetConfig));
-      json.WidgetLayoutInfo.widgets[index] = item;
-    },this);
-
-    var resultWidgetLayout = this.parseIt(json.WidgetLayoutInfo, this.widgetLayoutConfig);
-    App.store.loadMany(modelWidget, resultWidget);
-    App.store.load(modelWidgetLayout, resultWidgetLayout);
   }
 });

ambari-web/app/mappers/widget_mapper.js

@@ -21,6 +21,7 @@ App.widgetMapper = App.QuickDataMapper.create({
   model: App.Widget,
   config: {
     id: 'id',
+    layout_id: 'layout_id',
     widget_name: 'widget_name',
     default_order: 'default_order',
     widget_type: 'widget_type',
@@ -35,19 +36,20 @@ App.widgetMapper = App.QuickDataMapper.create({
     description: 'description',
     scope: 'scope'
   },
-  map: function (json, serviceName) {
-    //TODO add service name to user layout API response
+  map: function (json) {
     if (!this.get('model')) return;
 
-    if (json) {
+    if (json.widgets) {
       var result = [];
 
-      var sectionName = json.section_name;
-      json.widgetLayoutInfo.forEach(function (item, index) {
-        item.service_name = serviceName;
-        item.section_name = sectionName;
-        item.default_order = (index + 1);
-        result.push(this.parseIt(item, this.config));
+      json.widgets.forEach(function (item, index) {
+        item.WidgetInfo.section_name = json.section_name;
+        item.WidgetInfo.layout_id = json.id;
+        item.WidgetInfo.metrics = JSON.parse(item.WidgetInfo.metrics);
+        item.WidgetInfo.properties = JSON.parse(item.WidgetInfo.properties);
+        item.WidgetInfo.values = JSON.parse(item.WidgetInfo.values);
+        item.WidgetInfo.default_order = (index + 1);
+        result.push(this.parseIt(item.WidgetInfo, this.config));
       }, this);
 
       App.store.loadMany(this.get('model'), result);

ambari-web/app/models/widget.js

@@ -31,6 +31,7 @@ App.Widget = DS.Model.extend({
    *  - TEMPLATE
    */
   widgetType: DS.attr('string'),
+  layout: DS.belongsTo('App.WidgetLayout'),
   displayName: DS.attr('string'),
   description: DS.attr('string'),
   serviceName: DS.attr('string'),

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

@@ -31,7 +31,7 @@ App.GraphWidgetView = Em.View.extend(App.WidgetMixin, {
    * value in ms
    * @type {number}
    */
-  timeRange: 3600,
+  timeRange: 3600000,
 
   /**
    * value in ms
@@ -166,17 +166,17 @@ App.GraphWidgetView = Em.View.extend(App.WidgetMixin, {
 
   /**
    * add time properties
-   * @param {Array} widgetIds
+   * @param {Array} metricPaths
    * @returns {Array} result
    */
-  addTimeProperties: function (widgetIds) {
-    var startDate = App.dateTime();
-    var endDate = startDate + this.get('timeRange');
+  addTimeProperties: function (metricPaths) {
+    var toSeconds = Math.round(App.dateTime() / 1000);
+    var fromSeconds = toSeconds - (this.get('timeRange')/1000);
     var step = this.get('timeStep');
     var result = [];
 
-    widgetIds.forEach(function (ambariId) {
-      result.push(ambariId + '[' + startDate + ',' + endDate + ',' + step + ']');
+    metricPaths.forEach(function (metricPath) {
+      result.push(metricPath + '[' + fromSeconds + ',' + toSeconds + ',' + step + ']');
     }, this);
 
     return result;
@@ -198,7 +198,7 @@ App.GraphWidgetView = Em.View.extend(App.WidgetMixin, {
      * @type {string}
      */
     id: function () {
-      return this.get('parentView.content.id') + '_graph';
+      return 'widget_'+ this.get('parentView.content.id') + '_graph';
     }.property('parentView.content.id'),
 
     /**

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

@@ -552,7 +552,7 @@ App.MainServiceInfoSummaryView = Em.View.extend(App.UserPref, {
 
     if (App.get('supports.customizedWidgets')) {
         this.get('controller').loadActiveWidgetLayout();
-      if (App.supports.customizedWidgetLayout) {
+      if (App.get('supports.customizedWidgetLayout')) {
         this.get('controller').loadWidgetLayouts();
       }
     }

ambari-web/test/controllers/main/service/info/summary_test.js

@@ -247,16 +247,20 @@ describe('App.MainServiceInfoSummaryController', function () {
   describe("#loadActiveWidgetLayoutSuccessCallback()", function () {
     beforeEach(function () {
       sinon.stub( App.widgetLayoutMapper, 'map');
+      sinon.stub( App.widgetMapper, 'map');
     });
     afterEach(function () {
       App.widgetLayoutMapper.map.restore();
+      App.widgetMapper.map.restore();
     });
     it("isWidgetLayoutsLoaded should be set to true", function () {
       var controller = App.MainServiceInfoSummaryController.create({
         isServiceWithEnhancedWidgets: true,
         content: Em.Object.create({serviceName: 'HDFS'})
       });
-      controller.loadActiveWidgetLayoutSuccessCallback({items:[true]});
+      controller.loadActiveWidgetLayoutSuccessCallback({items:[{
+        WidgetLayoutInfo: {}
+      }]});
       expect(controller.get('isWidgetsLoaded')).to.be.true;
     });