AMBARI-10554. Add selected widgets from Widget Browser to the widget layout.(XIWANG)

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

@@ -449,7 +449,7 @@ App.MainServiceInfoSummaryController = Em.Controller.extend({
             description: widget.Widgets.description,
             widgetType: widgetType,
             iconPath: "/img/widget-" + widgetType.toLowerCase() + ".png",
-            serviceName: widget.Widgets.metrics.mapProperty('service_name').uniq().join('-'),
+            serviceName: JSON.parse(widget.Widgets.metrics).mapProperty('service_name').uniq().join('-'),
             added: addedWidgetsNames.contains(widgetName),
             isShared: true
           });
@@ -498,7 +498,7 @@ App.MainServiceInfoSummaryController = Em.Controller.extend({
             description: widget.Widgets.description,
             widgetType: widgetType,
             iconPath: "/img/widget-" + widgetType.toLowerCase() + ".png",
-            serviceName: widget.Widgets.metrics.mapProperty('service_name').uniq().join('-'),
+            serviceName: JSON.parse(widget.Widgets.metrics).mapProperty('service_name').uniq().join('-'),
             added: addedWidgetsNames.contains(widgetName),
             isShared: false
           });
@@ -512,22 +512,81 @@ App.MainServiceInfoSummaryController = Em.Controller.extend({
    * add widgets, on click handler for "Add"
    */
   addWidget: function (event) {
-    var widget = event.context;
-    var widgetName = widget.widgetName;
-    widget.set('added', !widget.added);
-    // add current widget to current layout
+    var widgetToAdd = event.context;
+    var activeLayout = this.get('activeWidgetLayout');
+    var widgetIds = activeLayout.get('widgets').map(function(widget) {
+      return {
+        "id": widget.get("id")
+      }
+    });
+    widgetIds.pushObject({
+      "id": widgetToAdd.id
+    })
+    var data = {
+      "WidgetLayoutInfo": {
+        "display_name": activeLayout.get("displayName"),
+        "id": activeLayout.get("id"),
+        "layout_name": activeLayout.get("layoutName"),
+        "scope": activeLayout.get("scope"),
+        "section_name": activeLayout.get("sectionName"),
+        "widgets": widgetIds
+      }
+    };
 
+    widgetToAdd.set('added', !widgetToAdd.added);
+    return App.ajax.send({
+      name: 'widget.layout.edit',
+      sender: this,
+      data: {
+        layoutId: activeLayout.get("id"),
+        data: data
+      },
+      success: 'updateActiveLayout'
+    });
   },
 
   /**
-   * delete widgets, on click handler for "Added"
+   * hide widgets, on click handler for "Added"
    */
   hideWidget: function (event) {
-    var widget = event.context;
-    var widgetName = widget.widgetName;
-    widget.set('added', !widget.added);
-    // hide current widget from current layout
+    var widgetToHide = event.context;
+    var activeLayout = this.get('activeWidgetLayout');
+    var widgetIds = activeLayout.get('widgets').map(function(widget) {
+      return {
+        "id": widget.get("id")
+      }
+    });
+    var data = {
+      "WidgetLayoutInfo": {
+        "display_name": activeLayout.get("displayName"),
+        "id": activeLayout.get("id"),
+        "layout_name": activeLayout.get("layoutName"),
+        "scope": activeLayout.get("scope"),
+        "section_name": activeLayout.get("sectionName"),
+        "widgets": widgetIds.filter(function(widget) {
+          return widget.id != widgetToHide.id;
+        })
+      }
+    };
 
+    widgetToHide.set('added', !widgetToHide.added);
+    return App.ajax.send({
+      name: 'widget.layout.edit',
+      sender: this,
+      data: {
+        layoutId: activeLayout.get("id"),
+        data: data
+      },
+      success: 'updateActiveLayout'
+    });
+
+  },
+
+  /**
+   * update current active widget layout
+   */
+  updateActiveLayout: function () {
+    this.loadActiveWidgetLayout();
   },
 
   /**
@@ -567,6 +626,7 @@ App.MainServiceInfoSummaryController = Em.Controller.extend({
   unshareWidget: function (event) {
     var widget = event.context;
     var widgetName = widget.widgetName;
+    //todo unshare current widget
 
   },
 
@@ -576,6 +636,7 @@ App.MainServiceInfoSummaryController = Em.Controller.extend({
   shareWidget: function (event) {
     var widget = event.context;
     var widgetName = widget.widgetName;
+    // todo share current widget
 
   },
 

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

@@ -93,23 +93,25 @@ App.WidgetMixin = Ember.Mixin.create({
   getRequestData: function (metrics) {
     var requestsData = {};
 
-    metrics.forEach(function (metric, index) {
-      var key;
-      if (metric.host_component_criteria) {
-        key = metric.service_name + '_' + metric.component_name + '_' + metric.host_component_criteria;
-      } else {
-        key = metric.service_name + '_' + metric.component_name;
-      }
-      var requestMetric = $.extend({}, metric);
+    if (metrics) {
+      metrics.forEach(function (metric, index) {
+        var key;
+        if (metric.host_component_criteria) {
+          key = metric.service_name + '_' + metric.component_name + '_' + metric.host_component_criteria;
+        } else {
+          key = metric.service_name + '_' + metric.component_name;
+        }
+        var requestMetric = $.extend({}, metric);
 
-      if (requestsData[key]) {
-        requestsData[key]["metric_paths"].push(requestMetric["metric_path"]);
-      } else {
-        requestMetric["metric_paths"] = [requestMetric["metric_path"]];
-        delete requestMetric["metric_path"];
-        requestsData[key] = requestMetric;
-      }
-    }, this);
+        if (requestsData[key]) {
+          requestsData[key]["metric_paths"].push(requestMetric["metric_path"]);
+        } else {
+          requestMetric["metric_paths"] = [requestMetric["metric_path"]];
+          delete requestMetric["metric_path"];
+          requestsData[key] = requestMetric;
+        }
+      }, this);
+    }
     return requestsData;
   },
 

ambari-web/app/styles/enhanced_service_dashboard.less

@@ -362,13 +362,16 @@
     padding: 0px 10px 10px 10px;
     a {
       font-size: 14px;
-      padding: 3px;
+      padding: 5px 3px;
+      line-height: 30px;
     }
     a:hover {
       cursor: pointer;
     }
     a.active {
-      color: #333;
+      color: #555555;
+      border: 1px #ddd solid;
+      border-bottom-style: none;
     }
     a.active:hover {
       text-decoration: none;

ambari-web/app/templates/common/modal_popups/widget_browser_popup.hbs

@@ -37,8 +37,6 @@
         </ul>
       </div>
 
-
-
       <!--Filters bar: service name filter, status filter here-->
       <div id="services-filter-bar">
         {{#each service in view.services}}

ambari-web/app/utils/ajax/ajax.js

@@ -2426,6 +2426,17 @@ var urls = {
     mock: '/data/widget_layouts/{serviceName}/default_dashboard.json'
   },
 
+  'widget.layout.edit': {
+    real: '/clusters/{clusterName}/widget_layouts/{layoutId}',
+    mock: '',
+    format: function (data) {
+      return {
+        type: 'PUT',
+        data: JSON.stringify(data.data)
+      }
+    }
+  },
+
   'widgets.layout.userDefined.get': {
     real: '/users/{loginName}/widget_layouts?section_name={sectionName}',
     mock: '/data/widget_layouts/HBASE/empty_user_layout.json'