AMBARI-10509. Delete selected widgets from Widget Browser from the widget layout.(XIWANG)

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

@@ -402,24 +402,26 @@ App.MainServiceInfoSummaryController = Em.Controller.extend({
     var addedWidgetsNames = this.get('widgets').mapProperty('widgetName');
     if (data.items[0] && data.items.length) {
       this.set("allSharedWidgets",
-        data.items.map(function (widget) {
+        data.items.filter(function (widget) {
+          return widget.Widgets.widget_type != "HEATMAP";
+        }).map(function (widget) {
           var widgetType = widget.Widgets.widget_type;
           var widgetName = widget.Widgets.widget_name;
-          if (widgetType != "HEATMAP") {
-            return Em.Object.create({
-              iconPath: "/img/widget-" + widgetType.toLowerCase() + ".png",
-              widgetName: widgetName,
-              displayName: widget.Widgets.display_name,
-              description: widget.Widgets.description,
-              widgetType: widgetType,
-              serviceName: widget.Widgets.metrics.mapProperty('service_name').uniq().join('-'),
-              added: addedWidgetsNames.contains(widgetName)
-            });
-          }
+          return Em.Object.create({
+            id: widget.Widgets.id,
+            widgetName: widgetName,
+            displayName: widget.Widgets.display_name,
+            description: widget.Widgets.description,
+            widgetType: widgetType,
+            iconPath: "/img/widget-" + widgetType.toLowerCase() + ".png",
+            serviceName: widget.Widgets.metrics.mapProperty('service_name').uniq().join('-'),
+            added: addedWidgetsNames.contains(widgetName),
+            isShared: true
+          });
         })
       );
-      this.set('isAllSharedWidgetsLoaded', true);
     }
+    this.set('isAllSharedWidgetsLoaded', true);
   },
 
   allSharedWidgets: [],
@@ -449,24 +451,26 @@ App.MainServiceInfoSummaryController = Em.Controller.extend({
     var addedWidgetsNames = this.get('widgets').mapProperty('widgetName');
     if (data.items[0] && data.items.length) {
       this.set("mineWidgets",
-        data.items.map(function (widget) {
+        data.items.filter(function (widget) {
+          return widget.Widgets.widget_type != "HEATMAP";
+        }).map(function (widget) {
           var widgetType = widget.Widgets.widget_type;
           var widgetName = widget.Widgets.widget_name;
-          if (widgetType != "HEATMAP") {
-            return Em.Object.create({
-              iconPath: "/img/widget-" + widgetType.toLowerCase() + ".png",
-              widgetName: widgetName,
-              displayName: widget.Widgets.display_name,
-              description: widget.Widgets.description,
-              widgetType: widgetType,
-              serviceName: widget.Widgets.metrics.mapProperty('service_name').uniq().join('-'),
-              added: addedWidgetsNames.contains(widgetName)
-            });
-          }
+          return Em.Object.create({
+            id: widget.Widgets.id,
+            widgetName: widgetName,
+            displayName: widget.Widgets.display_name,
+            description: widget.Widgets.description,
+            widgetType: widgetType,
+            iconPath: "/img/widget-" + widgetType.toLowerCase() + ".png",
+            serviceName: widget.Widgets.metrics.mapProperty('service_name').uniq().join('-'),
+            added: addedWidgetsNames.contains(widgetName),
+            isShared: false
+          });
         })
       );
-      this.set('isMineWidgetsLoaded', true);
     }
+    this.set('isMineWidgetsLoaded', true);
   },
 
   /**
@@ -516,6 +520,55 @@ App.MainServiceInfoSummaryController = Em.Controller.extend({
 
   },
 
+  /**
+   * delete widgets, on click handler for "Delete"
+   */
+  deleteWidget: function (event) {
+    var widget = event.context;
+    var self = this;
+    var bodyMessage = Em.Object.create({
+      confirmMsg: Em.I18n.t('dashboard.widgets.browser.action.delete.bodyMsg').format(widget.displayName),
+      confirmButton: Em.I18n.t('dashboard.widgets.browser.action.delete.btnMsg')
+    });
+    return App.showConfirmationFeedBackPopup(function (query) {
+      return App.ajax.send({
+        name: 'widget.action.delete',
+        sender: self,
+        data: {
+          id: widget.id
+        },
+        success: 'updateWidgetBrowser'
+      });
+
+    }, bodyMessage);
+  },
+
+  /**
+   * update widget browser content after deleted some widget
+   */
+  updateWidgetBrowser: function () {
+    this.loadAllSharedWidgets();
+    this.loadMineWidgets();
+  },
+
+  /**
+   * unshare widgets, on click handler for "Unshare"
+   */
+  unshareWidget: function (event) {
+    var widget = event.context;
+    var widgetName = widget.widgetName;
+
+  },
+
+  /**
+   * Share widgets, on click handler for "Share"
+   */
+  shareWidget: function (event) {
+    var widget = event.context;
+    var widgetName = widget.widgetName;
+
+  },
+
   /**
    * save layout
    * return {$.ajax}

ambari-web/app/messages.js

@@ -2270,6 +2270,8 @@ Em.I18n.translations = {
   'dashboard.widgets.browser.action.delete': 'Delete',
   'dashboard.widgets.browser.action.unshare': 'Unshare',
   'dashboard.widgets.browser.action.share': 'Share',
+  'dashboard.widgets.browser.action.delete.bodyMsg': 'You are about to permanently delete widget: {0}. You can add it back through creating new widget.',
+  'dashboard.widgets.browser.action.delete.btnMsg': 'Confirm Delete',
 
   'dashboard.widgets.NameNodeHeap': 'NameNode Heap',
   'dashboard.widgets.NameNodeCpu': 'NameNode CPU WIO',

ambari-web/app/styles/enhanced_service_dashboard.less

@@ -359,7 +359,7 @@
     }
   }
   #services-filter-bar {
-    padding: 10px;
+    padding: 0px 10px 10px 10px;
     a {
       font-size: 14px;
       padding: 3px;
@@ -432,6 +432,7 @@
         }
         .dropdown-menu {
           min-width: 110px;
+          left: 0px;
         }
       }
     }

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

@@ -72,14 +72,20 @@
                     </button>
                     <ul class="dropdown-menu">
                       <li>
-                        <a href="#" {{action deleteWidget widget target="controller"}}>
+                        <a href="#" {{action "deleteWidget" widget target="controller"}}>
                           {{t dashboard.widgets.browser.action.delete}}
                         </a>
                       </li>
                       <li>
-                        <a href="#" {{action unshareWidget widget target="controller"}}>
-                          {{t dashboard.widgets.browser.action.unshare}}
-                        </a>
+                        {{#if widget.isShared}}
+                          <a href="#" {{action "unshareWidget" widget target="controller"}}>
+                            {{t dashboard.widgets.browser.action.unshare}}
+                          </a>
+                        {{else}}
+                          <a href="#" {{action "shareWidget" widget target="controller"}}>
+                            {{t dashboard.widgets.browser.action.share}}
+                          </a>
+                        {{/if}}
                       </li>
                     </ul>
                     <button type="button" class="btn btn-default" {{action "addWidget" widget target="controller"}} >

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

@@ -2442,6 +2442,16 @@ var urls = {
     }
   },
 
+  'widget.action.delete': {
+    real: '/clusters/{clusterName}/widgets/{id}',
+    mock: '',
+    format: function (data) {
+      return {
+        type: 'DELETE'
+      }
+    }
+  },
+
   'widgets.serviceComponent.metrics.get': {
     real: '/clusters/{clusterName}/services/{serviceName}/components/{componentName}?fields={widgetIds}',
     mock: '/data/metrics/{serviceName}/Append_num_ops_&_Delete_num_ops.json'