AMBARI-10486. Widget Browser: implement shared/mine tabs and service filter on each tab.(XIWANG)

ambari-web/app/assets/data/widget_layouts/all_mine_widgets.json

@@ -27,6 +27,7 @@
         "widget_name": "MINE_ACTIVE_HANDLER",
         "display_name": "Mine Active Handlers/Calls",
         "widget_type": "GAUGE",
+        "author": "xi",
         "metrics": [
           {
             "name": "ipc.IPC.numOpenConnections",
@@ -53,6 +54,7 @@
         "display_name": "Mine Open Connections",
         "description": "This widget shows number of current open connections",
         "widget_type": "GRAPH",
+        "author": "xi",
         "metrics": [
           {
             "service_name": "HDFS"
@@ -68,6 +70,7 @@
         "display_name": "Mine Files Local",
         "description": "This widget shows percentage of files local.",
         "widget_type": "NUMBER",
+        "author": "xi",
         "metrics": [
           {
             "name": "regionserver.Server.percentFilesLocal",
@@ -96,6 +99,7 @@
         "display_name": "Mine Updated Blocked Time",
         "description": "",
         "widget_type": "GRAPH",
+        "author": "xi",
         "metrics": [
           {
             "service_name": "YARN"
@@ -111,6 +115,7 @@
         "display_name": "MINE WIDGET 1",
         "description": "this is to show .....this is a long description..very long ..very long..very long..very long..very long..very long..very long..very long..very long..very long..very long..very long..very long..very long..very long",
         "widget_type": "GAUGE",
+        "author": "xi",
         "metrics": [
           {
             "service_name": "HBASE"
@@ -129,6 +134,7 @@
         "display_name": "MINE  WIDGET 2",
         "description": "this is to show .....",
         "widget_type": "NUMBER",
+        "author": "xi",
         "metrics": [
           {
             "service_name": "YARN"

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

@@ -314,6 +314,7 @@ App.MainServiceInfoSummaryController = Em.Controller.extend({
    * @type {boolean}
    */
   isAllSharedWidgetsLoaded: false,
+  isMineWidgetsLoaded: false,
 
   /**
    * @type {Em.A}
@@ -422,6 +423,51 @@ App.MainServiceInfoSummaryController = Em.Controller.extend({
   },
 
   allSharedWidgets: [],
+  mineWidgets: [],
+
+  /**
+   * load all mine widgets of current user to show on widget browser
+   * @returns {$.ajax}
+   */
+  loadMineWidgets: function () {
+    this.set('isMineWidgetsLoaded', false);
+    return App.ajax.send({
+      name: 'widgets.all.mine.get',
+      sender: this,
+      data: {
+        loginName: App.router.get('loginName')
+      },
+      success: 'loadMineWidgetsSuccessCallback'
+    });
+  },
+
+  /**
+   * success callback of <code>loadMineWidgets</code>
+   * @param {object|null} data
+   */
+  loadMineWidgetsSuccessCallback: function (data) {
+    var addedWidgetsNames = this.get('widgets').mapProperty('widgetName');
+    if (data.items[0] && data.items.length) {
+      this.set("mineWidgets",
+        data.items.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)
+            });
+          }
+        })
+      );
+      this.set('isMineWidgetsLoaded', true);
+    }
+  },
 
   /**
    * load widgets defined by stack
@@ -521,6 +567,8 @@ App.MainServiceInfoSummaryController = Em.Controller.extend({
         this.hide();
         self.set('isAllSharedWidgetsLoaded', false);
         self.set('allSharedWidgets', []);
+        self.set('isMineWidgetsLoaded', false);
+        self.set('mineWidgets', []);
       },
       autoHeight: false,
       isHideBodyScroll: false,
@@ -530,29 +578,43 @@ App.MainServiceInfoSummaryController = Em.Controller.extend({
         controller: self,
         willInsertElement: function () {
           this.get('controller').loadAllSharedWidgets();
+          this.get('controller').loadMineWidgets();
         },
 
+        isLoaded: function () {
+          return !!this.get('controller.isAllSharedWidgetsLoaded');
+        }.property('controller.isAllSharedWidgetsLoaded'),
+
+        isWidgetEmptyList: function () {
+          return !this.get('filteredContent.length');
+        }.property('filteredContent.length'),
+
         activeTab: 'shared',
-        activeService: this.get('controller.content.serviceName'),
+        activeService: '',
         activeStatus: '',
 
         content: function () {
-          return this.get('controller.allSharedWidgets');
-        }.property('controller.allSharedWidgets.length', 'controller.isAllSharedWidgetsLoaded'),
+          if (this.get('activeTab') == 'mine') {
+            return this.get('controller.mineWidgets');
+          } else if (this.get('activeTab') == 'shared') {
+            return this.get('controller.allSharedWidgets');
+          }
+        }.property('controller.allSharedWidgets.length', 'controller.isAllSharedWidgetsLoaded',
+          'controller.mineWidgets.length', 'controller.isMineWidgetsLoaded', 'activeTab'),
 
-        // content filtered by tab, service name and status.
-        // If tab changed, service/status set to default
+        /**
+         * displaying content filtered by service name and status.
+         */
         filteredContent: function () {
-
-        }.property('content', 'activeTab', 'activeService', 'activeStatus'),
-
-        isLoaded: function () {
-          return !!this.get('controller.isAllSharedWidgetsLoaded');
-        }.property('controller.isAllSharedWidgetsLoaded'),
-
-        isWidgetEmptyList: function () {
-          return !this.get('content.length');
-        }.property('content.length'),
+          var activeService = this.get('activeService')? this.get('activeService'): this.get('controller.content.serviceName');
+          var result = [];
+          this.get('content').forEach(function(widget) {
+            if (widget.get('serviceName').indexOf(activeService) >= 0){
+              result.pushObject(widget);
+            }
+          });
+          return result;
+        }.property('content', 'activeService', 'activeStatus'),
 
         /**
          * top tabs: Share / Mine
@@ -578,6 +640,14 @@ App.MainServiceInfoSummaryController = Em.Controller.extend({
             var label = Em.get(this, 'templateData.keywords.category.label');
             return label ? 'widget-browser-view-tab-' + label.toLowerCase().replace(/\s/g, '-') : "";
           }),
+          count: function () {
+            if (this.get('item') == 'mine') {
+              return this.get('parentView.controller.mineWidgets.length');
+            } else if (this.get('item') == 'shared') {
+              return this.get('parentView.controller.allSharedWidgets.length');
+            }
+          }.property('item', 'parentView.controller.mineWidgets.length',
+            'parentView.controller.allSharedWidgets.length'),
           goToWidgetTab: function (event) {
             var targetName = event.context;
             this.set('parentView.activeTab', targetName);
@@ -587,9 +657,23 @@ App.MainServiceInfoSummaryController = Em.Controller.extend({
         /**
          * service name filter
          */
-        serviceNames: function () {
+        services: function () {
+          var view = this;
+          return App.Service.find().map(function (service) {
+            return Em.Object.create({
+              value: service.get('serviceName'),
+              label: service.get('displayName'),
+              isActive: function () {
+                var activeService = view.get('activeService')? view.get('activeService'): view.get('controller.content.serviceName');
+                return this.get('value') == activeService;
+              }.property('value', 'view.activeService')
+            })
+          });
+        }.property('activeService'),
 
-        }.property(),
+        filterByService: function (event) {
+          this.set('activeService', event.context);
+        },
 
         createWidget: function () {
           this.get('parentView').onPrimary();

ambari-web/app/styles/enhanced_service_dashboard.less

@@ -332,6 +332,28 @@
 #widget-browser-popup {
   min-width: 750px;
   max-width: 900px;
+  #shared-mine-tabs {
+    a {
+      font-size: 15px;
+    }
+  }
+  #services-filter-bar {
+    padding: 10px;
+    a {
+      font-size: 14px;
+      padding: 3px;
+    }
+    a:hover {
+      cursor: pointer;
+    }
+    a.active {
+      color: #333;
+    }
+    a.active:hover {
+      text-decoration: none;
+      cursor: default;
+    }
+  }
   #widgets-info {
     .widgets-info-container {
       .span6.widget-info-section {
@@ -379,6 +401,7 @@
       .widget-section-actions {
         position: relative;
         top: -30px;
+        right: 5px;
         .btn {
           padding: 3px 8px;
           width: 60px;

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

@@ -27,11 +27,11 @@
       </div>
 
       <!--Top menu tabs-->
-      <div class="shared-mine-tabs" id="">
+      <div id="shared-mine-tabs">
         <ul class="nav nav-tabs">
           {{#each category in view.categories}}
             {{#view view.NavItemView itemBinding="category.name" }}
-                <a href="#" {{action "goToWidgetTab" category.name target="view"}} >{{category.label}}</a>
+                <a href="#" {{action "goToWidgetTab" category.name target="view"}} >{{category.label}} ({{view.count}})</a>
             {{/view}}
           {{/each}}
         </ul>
@@ -40,16 +40,19 @@
 
 
       <!--Filters bar: service name filter, status filter here-->
-      <div class="">
+      <div id="services-filter-bar">
+        {{#each service in view.services}}
+          <a {{bindAttr class="service.isActive:active"}} {{action "filterByService" service.value target="view"}}>{{service.label}}</a>
+        {{/each}}
       </div>
 
       <!--Widgets table two column-->
       <div id="widgets-info">
         {{#if view.isWidgetEmptyList}}
-            <div class="no-widgets-text">{{t dashboard.widgets.browser.noWidgets}}</div>
+           <div class="no-widgets-text">{{t dashboard.widgets.browser.noWidgets}}</div>
         {{else}}
           <div class="widgets-info-container row-fluid">
-            {{#each widget in view.content}}
+            {{#each widget in view.filteredContent}}
               <div class="span6 row-fluid widget-info-section">
                 <div class="icon span4">
                   <a class="widget-icon-image" target="_blank"><img {{bindAttr src="widget.iconPath"}}></a>
@@ -91,10 +94,9 @@
       </div>
     </div>
 
-      <div {{bindAttr class="view.filteringComplete:hidden :table-overlay"}}>
-          <div class="spinner"></div>
-      </div>
-
+    <div class="table-overlay">
+       <div class="spinner"></div>
+    </div>
   {{else}}
       <div class="spinner"></div>
   {{/if}}

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

@@ -2411,6 +2411,11 @@ var urls = {
     mock: '/data/widget_layouts/all_shared_widgets.json'
   },
 
+  'widgets.all.mine.get': {
+    real: '/clusters/{clusterName}/widgets?Widgets/author={loginName}&fields=*',
+    mock: '/data/widget_layouts/all_mine_widgets.json'
+  },
+
   'widgets.layout.stackDefined.get': {
     real: '{stackVersionURL}/services/{serviceName}/artifacts/widget_descriptor',
     mock: '/data/widget_layouts/HBASE/stack_layout.json'