AMBARI-10558 Create widget wizard: Integrate the wizard with backend API. (atkach)

ambari-web/app/controllers/main/service/widgets/create/step3_controller.js

@@ -88,5 +88,54 @@ App.WidgetWizardStep3Controller = Em.Controller.extend({
   //TODO: Following computed propert needs to be implemented. Next button should be enabled when there is no validation error and all required fields are filled
   isSubmitDisabled: function () {
     return !this.get('widgetName');
-  }.property('widgetName')
+  }.property('widgetName'),
+
+  /**
+   * collect all needed data to create new widget
+   * @returns {{WidgetInfo: {cluster_name: *, widget_name: *, display_name: *, widget_type: *, description: *, scope: string, metrics: *, values: *, properties: *}}}
+   */
+  collectWidgetData: function () {
+    return {
+      WidgetInfo: {
+        widget_name: this.get('widgetName'),
+        display_name: this.get('widgetName'),
+        widget_type: this.get('content.widgetType'),
+        description: this.get('widgetDescription'),
+        scope: this.get('widgetScope.name').toUpperCase(),
+        "metrics": this.get('widgetMetrics').map(function (metric) {
+          return {
+            "name": metric.name,
+            "service_name": metric.serviceName,
+            "component_name": metric.componentName
+          }
+        }),
+        values: this.get('widgetValues'),
+        properties: this.get('widgetProperties')
+      }
+    };
+  },
+
+  /**
+   * post widget definition to server
+   * @returns {$.ajax}
+   */
+  postWidgetDefinition: function () {
+    return App.ajax.send({
+      name: 'widgets.wizard.add',
+      sender: this,
+      data: {
+        data: this.collectWidgetData()
+      },
+      success: 'postWidgetDefinitionSuccessCallback'
+    });
+  },
+
+  postWidgetDefinitionSuccessCallback: function() {
+
+  },
+
+  complete: function () {
+    this.postWidgetDefinition();
+    App.router.send('complete');
+  }
 });

ambari-web/app/controllers/main/service/widgets/create/wizard_controller.js

@@ -212,7 +212,7 @@ App.WidgetWizardController = App.WizardController.extend({
       },
       callback: callback,
       success: 'loadAllMetricsFromServerCallback'
-    })
+    });
   },
 
   /**
@@ -224,12 +224,11 @@ App.WidgetWizardController = App.WizardController.extend({
     var metrics = {};
 
     if (json) {
-      var data = json.items[0].artifacts[0].artifact_data;
-
-      for (var serviceName in data) {
-        for (var componentName in data[serviceName]) {
-          for (var level in data[serviceName][componentName]) {
-            metrics = data[serviceName][componentName][level][0]['metrics']['default'];
+      json.items.forEach(function (service) {
+        var data = service.artifacts[0].artifact_data[service.StackServices.service_name];
+        for (var componentName in data) {
+          for (var level in data[componentName]) {
+            metrics = data[componentName][level][0]['metrics']['default'];
             for (var widgetId in metrics) {
               result.push({
                 widget_id: widgetId,
@@ -237,14 +236,14 @@ App.WidgetWizardController = App.WizardController.extend({
                 temporal: metrics[widgetId].temporal,
                 name: metrics[widgetId].name,
                 level: level.toUpperCase(),
-                type: data[serviceName][componentName][level][0]["type"].toUpperCase(),
+                type: data[componentName][level][0]["type"].toUpperCase(),
                 component_name: componentName,
-                service_name: serviceName
+                service_name: service.StackServices.service_name
               });
             }
           }
         }
-      }
+      }, this);
     }
     this.save('allMetrics', result);
   },

ambari-web/app/routes/add_widget.js

@@ -157,10 +157,7 @@ module.exports = App.WizardRoute.extend({
     },
     back: Em.Router.transitionTo('step2'),
     complete: function (router, context) {
-      var controller = router.get('widgetWizardStep3Controller');
-      if (!controller.get('isSubmitDisabled')) {
-        router.get('widgetWizardController.popup').onClose();
-      }
+      router.get('widgetWizardController.popup').onClose();
     }
   })
 });

ambari-web/app/templates/main/service/widgets/create/step2_add_metric.hbs

@@ -27,15 +27,15 @@
       {{#each service in view.componentMap}}
         <li class="accordion-group keep-open">
           <div class="accordion-heading">
-            <a class="accordion-toggle" data-toggle="collapse" href="#collapseOne">
-              <i class="icon-caret-down"></i><i class="icon-caret-right"></i>{{service.displayName}}
+            <a class="accordion-toggle collapsed" data-toggle="collapse" {{bindAttr href="service.href"}}>
+              <i class="icon-caret-down"></i><i class="icon-caret-right"></i>{{service.displayName}}&nbsp;({{service.count}})
             </a>
           </div>
-          <div id="collapseOne" class="accordion-body collapse in">
+          <div {{bindAttr id="service.serviceName"}} class="accordion-body collapse">
             <ul class="accordion-inner">
               {{#each component in service.components}}
                 <li>
-                  <a href="#" {{action selectComponents component target="view"}}> {{component.displayName}}</a>
+                  <a href="#" {{action selectComponents component target="view"}}> {{component.displayName}}&nbsp;({{component.count}})</a>
                 </li>
               {{/each}}
             </ul>
@@ -45,7 +45,7 @@
       <li><a class="link" href="#" {{action showMore target="view"}}>{{t hostPopup.serviceInfo.showMore}}</a></li>
       <li class="row-fluid">
         <button class="btn span4 offset1">{{t common.cancel}}</button>
-        <button class="btn btn-primary span4">{{t common.apply}}</button>
+        <button class="btn btn-primary span4 apply-button">{{t common.apply}}</button>
       </li>
     </ul>
   </div>

ambari-web/app/templates/main/service/widgets/create/step3.hbs

@@ -50,6 +50,6 @@
 
   <div class="btn-area">
     <button id="add-widget-step3-back" class="btn" {{action back}}>&larr; {{t common.back}}</button>
-    <button id="add-widget-step3-complete" class="btn btn-success pull-right" {{bindAttr disabled="isSubmitDisabled"}} {{action "complete"}}>{{t common.complete}}</button>
+    <button id="add-widget-step3-complete" class="btn btn-success pull-right" {{bindAttr disabled="isSubmitDisabled"}} {{action "complete" target="controller"}}>{{t common.complete}}</button>
   </div>
 </div>

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

@@ -2481,6 +2481,17 @@ var urls = {
   'widgets.wizard.metrics.get': {
     real: '{stackVersionURL}/services?artifacts/Artifacts/artifact_name=metrics_descriptor&StackServices/service_name.in({serviceNames})&fields=artifacts/*',
     mock: '/data/metrics/HBASE/definition.json'
+  },
+
+  'widgets.wizard.add': {
+    real: '/clusters/c1/widgets/',
+    mock: '',
+    'format': function (data) {
+      return {
+        type: 'POST',
+        data: JSON.stringify(data.data)
+      };
+    }
   }
 };
 /**

ambari-web/app/views/main/service/widgets/create/expression_view.js

@@ -250,6 +250,7 @@ App.WidgetWizardExpressionView = Em.View.extend({
           }, this);
 
           for (var serviceName in servicesMap) {
+            components = [];
             for (var componentId in servicesMap[serviceName].components) {
               components.push(Em.Object.create({
                 componentName: servicesMap[serviceName].components[componentId].component_name,
@@ -274,6 +275,8 @@ App.WidgetWizardExpressionView = Em.View.extend({
             }
             result.push(Em.Object.create({
               serviceName: serviceName,
+              //in order to support accordion lists
+              href: '#' + serviceName,
               displayName: App.StackService.find(serviceName).get('displayName'),
               count: servicesMap[serviceName].count,
               components: components