Repository: ambari
Updated Branches:
  refs/heads/trunk 80e247731 -> e733b72dd


AMBARI-11287. Create Widget -> Add metric popup: Select component dropdown 
should show spinner if data is not loaded. (jaimin)


Project: http://git-wip-us.apache.org/repos/asf/ambari/repo
Commit: http://git-wip-us.apache.org/repos/asf/ambari/commit/e733b72d
Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/e733b72d
Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/e733b72d

Branch: refs/heads/trunk
Commit: e733b72ddad169987f88c465161738949e24ac26
Parents: 80e2477
Author: Jaimin Jetly <jai...@hortonworks.com>
Authored: Wed May 20 16:18:12 2015 -0700
Committer: Jaimin Jetly <jai...@hortonworks.com>
Committed: Wed May 20 16:18:19 2015 -0700

----------------------------------------------------------------------
 .../service/widgets/create/wizard_controller.js |  3 +
 .../main/service/widgets/edit_controller.js     |  3 +-
 .../service/widgets/create/step2_add_metric.hbs | 86 +++++++++++---------
 3 files changed, 51 insertions(+), 41 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/ambari/blob/e733b72d/ambari-web/app/controllers/main/service/widgets/create/wizard_controller.js
----------------------------------------------------------------------
diff --git 
a/ambari-web/app/controllers/main/service/widgets/create/wizard_controller.js 
b/ambari-web/app/controllers/main/service/widgets/create/wizard_controller.js
index 7dd6cc3..532ee7a 100644
--- 
a/ambari-web/app/controllers/main/service/widgets/create/wizard_controller.js
+++ 
b/ambari-web/app/controllers/main/service/widgets/create/wizard_controller.js
@@ -35,6 +35,7 @@ App.WidgetWizardController = App.WizardController.extend({
     controllerName: 'widgetWizardController',
     widgetService: null,
     widgetType: "",
+    isMetricsLoaded: false,
 
     /**
      * @type {Object}
@@ -183,10 +184,12 @@ App.WidgetWizardController = App.WizardController.extend({
   loadAllMetrics: function () {
     var allMetrics = this.getDBProperty('allMetrics');
     var self = this;
+    this.set("content.isMetricsLoaded", false);
     var dfd = $.Deferred();
 
     if (allMetrics.length === 0) {
       this.loadAllMetricsFromServer(function () {
+        self.set("content.isMetricsLoaded", true);
         dfd.resolve(self.get('content.allMetrics'));
       });
     } else {

http://git-wip-us.apache.org/repos/asf/ambari/blob/e733b72d/ambari-web/app/controllers/main/service/widgets/edit_controller.js
----------------------------------------------------------------------
diff --git a/ambari-web/app/controllers/main/service/widgets/edit_controller.js 
b/ambari-web/app/controllers/main/service/widgets/edit_controller.js
index 1744974..4a3beda 100644
--- a/ambari-web/app/controllers/main/service/widgets/edit_controller.js
+++ b/ambari-web/app/controllers/main/service/widgets/edit_controller.js
@@ -79,7 +79,8 @@ App.WidgetEditController = App.WidgetWizardController.extend({
     widgetDescription: null,
     widgetScope: null,
     widgetAuthor: null,
-    widgetId: null
+    widgetId: null,
+    isMetricsLoaded: false
   }),
 
   loadMap: {

http://git-wip-us.apache.org/repos/asf/ambari/blob/e733b72d/ambari-web/app/templates/main/service/widgets/create/step2_add_metric.hbs
----------------------------------------------------------------------
diff --git 
a/ambari-web/app/templates/main/service/widgets/create/step2_add_metric.hbs 
b/ambari-web/app/templates/main/service/widgets/create/step2_add_metric.hbs
index c88e6f8..8b5daef 100644
--- a/ambari-web/app/templates/main/service/widgets/create/step2_add_metric.hbs
+++ b/ambari-web/app/templates/main/service/widgets/create/step2_add_metric.hbs
@@ -17,49 +17,55 @@
 }}
 
 <div class="btn-group dropdown span2">
-  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">{{t 
dashboard.widgets.wizard.step2.newMetric}}&nbsp;<span class="caret"></span></a>
+  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">{{t 
dashboard.widgets.wizard.step2.newMetric}}
+    &nbsp;<span class="caret"></span></a>
   <ul class="dropdown-menu service-level-dropdown">
+    {{#if controller.content.isMetricsLoaded}}
       <!--service level-->
-    {{#each service in view.componentMap}}
-      <li class="dropdown-submenu keep-open">
-        <a class="" tabindex="-1" 
href="javascript:void(null);">{{service.displayName}}</a>
-        <ul class="dropdown-menu">
-          {{#each component in service.components}}
-            <!--component level-->
-            <li class="dropdown-submenu keep-open">
-            <a href="javascript:void(null);">{{component.displayName}}</a>
-            <ul class="dropdown-menu select-options-dropdown">
-              <!--metrics level-->
-              <li class="keep-open metric-select" {{action selectComponents 
component target="view"}}>
-                <select class="metrics-select chosen-select" >
-                    <option value="" disabled selected>{{t 
dashboard.widgets.wizard.step2.selectMetric}}</option>
-                  {{#each metric in component.metrics}}
-                    <option>{{unbound metric}}</option>
-                  {{/each}}
-                </select>
+      {{#each service in view.componentMap}}
+        <li class="dropdown-submenu keep-open">
+          <a class="" tabindex="-1" 
href="javascript:void(null);">{{service.displayName}}</a>
+          <ul class="dropdown-menu">
+            {{#each component in service.components}}
+              <!--component level-->
+              <li class="dropdown-submenu keep-open">
+                <a href="javascript:void(null);">{{component.displayName}}</a>
+                <ul class="dropdown-menu select-options-dropdown">
+                  <!--metrics level-->
+                  <li class="keep-open metric-select" {{action 
selectComponents component target="view"}}>
+                    <select class="metrics-select chosen-select">
+                      <option value="" disabled selected>{{t 
dashboard.widgets.wizard.step2.selectMetric}}</option>
+                      {{#each metric in component.metrics}}
+                        <option>{{unbound metric}}</option>
+                      {{/each}}
+                    </select>
+                  </li>
+                  <!--select aggregare function -->
+                  <li {{bindAttr class=":keep-open :aggregator-select 
component.showAggregateSelect::hidden"}}
+                    {{action selectComponents component target="view"}}
+                    {{translateAttr 
data-original-title="dashboard.widgets.wizard.step2.aggregateTooltip"}}>
+                    <select class="aggregate-function-select chosen-select">
+                      <option value="" disabled
+                              selected>{{t 
dashboard.widgets.wizard.step2.aggregateFunction.scanOps}}</option>
+                      {{#each function in view.parentView.AGGREGATE_FUNCTIONS}}
+                        <option>{{unbound function}}</option>
+                      {{/each}}
+                    </select>
+                  </li>
+                  <li class="actions-buttons">
+                    <button class="btn" href="#" {{action cancel 
target="view"}}>{{t common.cancel}}</button>
+                    <button {{bindAttr class=":btn :btn-primary 
component.isAddEnabled::disabled"}} href="#"
+                      {{action addMetric component target="view"}}>{{t 
common.add}}</button>
+                  </li>
+                </ul>
               </li>
-              <!--select aggregare function -->
-              <li {{bindAttr class=":keep-open :aggregator-select 
component.showAggregateSelect::hidden"}}
-                {{action selectComponents component target="view"}}
-                {{translateAttr 
data-original-title="dashboard.widgets.wizard.step2.aggregateTooltip"}}>
-                  <select class="aggregate-function-select chosen-select" >
-                      <option value="" disabled selected>{{t 
dashboard.widgets.wizard.step2.aggregateFunction.scanOps}}</option>
-                    {{#each function in view.parentView.AGGREGATE_FUNCTIONS}}
-                      <option>{{unbound function}}</option>
-                    {{/each}}
-                  </select>
-              </li>
-              <li class="actions-buttons">
-                <button class="btn" href="#" {{action cancel 
target="view"}}>{{t common.cancel}}</button>
-                <button {{bindAttr class=":btn :btn-primary 
component.isAddEnabled::disabled"}} href="#"
-                  {{action addMetric component target="view"}}>{{t 
common.add}}</button>
-              </li>
-            </ul>
-            </li>
-          {{/each}}
-        </ul>
-      </li>
-    {{/each}}
+            {{/each}}
+          </ul>
+        </li>
+      {{/each}}
+    {{else}}
+      <div class="spinner"></div>
+    {{/if}}
   </ul>
 </div>
 

Reply via email to