AMBARI-1644. Service summary page flickers. (yusaku)

git-svn-id: https://svn.apache.org/repos/asf/incubator/ambari/trunk@1460090 13f79535-47bb-0310-9956-ffa450edef68

ambari-web/app/mappers/service_mapper.js

@@ -48,6 +48,7 @@ App.servicesMapper = App.QuickDataMapper.create({
     id: 'ServiceInfo.service_name',
     service_name: 'ServiceInfo.service_name',
     work_status: 'ServiceInfo.state',
+    $rand: Math.random(),
     $alerts: [ 1, 2, 3 ],
     host_components: 'host_components'
   },
@@ -143,21 +144,30 @@ App.servicesMapper = App.QuickDataMapper.create({
         item.host_components.sort();
 
         if (item && item.ServiceInfo && item.ServiceInfo.service_name == "HDFS") {
-          // Change the JSON so that it is easy to map
           finalJson = this.hdfsMapper(item);
+          finalJson.rand = Math.random();
           result.push(finalJson);
           App.store.load(App.HDFSService, finalJson);
-        } else if (item && item.ServiceInfo && item.ServiceInfo.service_name == "MAPREDUCE") {
-          finalJson = this.mapreduceMapper(item);
-          result.push(finalJson);
-          App.store.load(App.MapReduceService, finalJson);
-        } else if (item && item.ServiceInfo && item.ServiceInfo.service_name == "HBASE") {
-          finalJson = this.hbaseMapper(item);
-          result.push(finalJson);
-          App.store.load(App.HBaseService, finalJson);
-        } else {
-          result.push(this.parseIt(item, this.config));
         }
+        else
+          if (item && item.ServiceInfo && item.ServiceInfo.service_name == "MAPREDUCE") {
+            finalJson = this.mapreduceMapper(item);
+            finalJson.rand = Math.random();
+            result.push(finalJson);
+            App.store.load(App.MapReduceService, finalJson);
+          }
+          else
+            if (item && item.ServiceInfo && item.ServiceInfo.service_name == "HBASE") {
+              finalJson = this.hbaseMapper(item);
+              finalJson.rand = Math.random();
+              result.push(finalJson);
+              App.store.load(App.HBaseService, finalJson);
+            }
+            else {
+              finalJson = this.parseIt(item, this.config);
+              finalJson.rand = Math.random();
+              result.push(finalJson);
+            }
       }, this);
 
 

ambari-web/app/models/service.js

@@ -24,6 +24,7 @@ App.Service = DS.Model.extend({
   serviceName: DS.attr('string'),
 
   workStatus: DS.attr('string'),
+  rand: DS.attr('string'),
   alerts: DS.hasMany('App.Alert'),
   quickLinks: DS.hasMany('App.QuickLinks'),
   hostComponents: DS.hasMany('App.HostComponent'),

ambari-web/app/templates/main/service/info/summary.hbs

@@ -41,35 +41,35 @@
     <table id="summary-info" class="table no-borders table-condensed">
       <tbody>
       {{#unless view.serviceStatus.oozie}}
-      {{#unless view.serviceStatus.hive}}
-      {{#unless view.serviceStatus.zookeeper}}
-      {{#unless view.serviceStatus.hdfs}}
-      {{#unless view.serviceStatus.mapreduce}}
-      {{#unless view.serviceStatus.hbase}}
-      {{#unless view.serviceStatus.ganglia}}
-      {{#each component in controller.content.hostComponents}}
-        <tr>
-          {{#if component.isMaster}}
-            <td class="summary-label">{{component.displayName}}</td>
-            <td><a {{action selectHost component.host}} href="javascript:void(null)">{{component.host.publicHostName}}</a></td>
-          {{else}}
-            <td class="summary-label">{{component.displayName}}s</td>
-            <td><a {{action filterHosts component}} href="javascript:void(null)">{{component.displayName}}s</a></td>
-          {{/if}}
-        </tr>
-      {{/each}}
-      {{#if view.serviceStatus.nagios}}
-        <tr>
-          <td class="summary-label">{{t services.service.info.summary.nagiosWebUI}}</td>
-          <td><a target=_blank href="http://{{unbound view.nagiosServer}}/nagios">{{view.nagiosServer}}/nagios</a></td>
-        </tr>
-      {{/if}}
-      {{/unless}}
-      {{/unless}}
-      {{/unless}}
-      {{/unless}}
-      {{/unless}}
-      {{/unless}}
+        {{#unless view.serviceStatus.hive}}
+          {{#unless view.serviceStatus.zookeeper}}
+            {{#unless view.serviceStatus.hdfs}}
+              {{#unless view.serviceStatus.mapreduce}}
+                {{#unless view.serviceStatus.hbase}}
+                  {{#unless view.serviceStatus.ganglia}}
+                    {{#each component in view.components}}
+                      <tr>
+                        {{#if component.isMaster}}
+                          <td class="summary-label">{{component.displayName}}</td>
+                          <td><a {{action selectHost component.host}} href="javascript:void(null)">{{component.host.publicHostName}}</a></td>
+                        {{else}}
+                          <td class="summary-label">{{component.displayName}}s</td>
+                          <td><a {{action filterHosts component}} href="javascript:void(null)">{{component.displayName}}s</a></td>
+                        {{/if}}
+                      </tr>
+                    {{/each}}
+                    {{#if view.serviceStatus.nagios}}
+                      <tr>
+                        <td class="summary-label">{{t services.service.info.summary.nagiosWebUI}}</td>
+                        <td><a target=_blank href="http://{{unbound view.nagiosServer}}/nagios">{{view.nagiosServer}}/nagios</a></td>
+                      </tr>
+                    {{/if}}
+                  {{/unless}}
+                {{/unless}}
+              {{/unless}}
+            {{/unless}}
+          {{/unless}}
+        {{/unless}}
       {{/unless}}
       {{#if view.serviceStatus.hdfs}}
         {{view App.MainDashboardServiceHdfsView showOnlyRows=true serviceBinding="view.service"}}

ambari-web/app/templates/main/service/info/summary/ganglia.hbs

@@ -15,11 +15,12 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 }}
-{{#each component in controller.content.hostComponents}}
+
+{{#each component in view.components}}
   {{#if component.isMaster}}
     <tr>
-        <td class="summary-label">{{component.displayName}}</td>
-        <td><a {{action selectHost component.host}} href="javascript:void(null)">{{component.host.publicHostName}}</a></td>
+      <td class="summary-label">{{component.displayName}}</td>
+      <td><a {{action selectHost component.host}} href="javascript:void(null)">{{component.host.publicHostName}}</a></td>
     </tr>
   {{/if}}
 {{/each}}

ambari-web/app/templates/main/service/info/summary/hive.hbs

@@ -16,22 +16,22 @@
 * limitations under the License.
 }}
 
-{{#each component in controller.content.hostComponents}}
+{{#each component in view.components}}
   {{#if component.isMaster}}
-      <tr>
-          <td>
-            {{view view.componentNameView compBinding="component"}}
-          </td>
-          <td>
-              <a href="#" {{action selectHost component.host}}>{{component.host.publicHostName}}</a>
-          </td>
-      </tr>
+    <tr>
+      <td>
+        {{view view.componentNameView compBinding="component"}}
+      </td>
+      <td>
+        <a href="#" {{action selectHost component.hostRaw}}>{{component.host.publicHostName}}</a>
+      </td>
+    </tr>
   {{/if}}
 {{/each}}
 
 <tr>
-    <td class="summary-label">{{t services.hive.clients}}</td>
-    <td>
-        <a {{action filterHosts view.clientObj}} href="javascript:void(null)">{{view.clients.length}} {{t services.hive.client}}{{#if view.hasManyClients}}s{{/if}}</a>
-    </td>
+  <td class="summary-label">{{t services.hive.clients}}</td>
+  <td>
+    <a {{action filterHosts view.clientObj}} href="javascript:void(null)">{{view.clients.length}} {{t services.hive.client}}{{#if view.hasManyClients}}s{{/if}}</a>
+  </td>
 </tr>

ambari-web/app/templates/main/service/info/summary/oozie.hbs

@@ -16,11 +16,11 @@
 * limitations under the License.
 }}
 
-{{#each component in controller.content.hostComponents}}
+{{#each component in view.components}}
   {{#if component.isMaster}}
     <tr>
-        <td class="summary-label">{{t common.servers}}</td>
-        <td><a {{action selectHost component.host}} href="javascript:void(null)">{{component.host.publicHostName}}</a></td>
+      <td class="summary-label">{{t common.servers}}</td>
+      <td><a {{action selectHost component.hostRaw}} href="javascript:void(null)">{{component.host.publicHostName}}</a></td>
     </tr>
   {{/if}}
 {{/each}}

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

@@ -164,31 +164,57 @@ App.MainServiceInfoSummaryView = Em.View.extend({
       "user":"hive"
     }
   },
-  gangliaServer:function(){
+  /**
+   * Get public host name (should be Master) for service
+   * @param {String} serviceName - GANGLIA, NAGIOS etc
+   * @return {*}
+   */
+  getServer: function(serviceName) {
     var service=this.get('controller.content');
-    if(service.get("id") == "GANGLIA"){
+    if(service.get("id") == serviceName) {
       return service.get("hostComponents").findProperty('isMaster', true).get("host").get("publicHostName");
-    }else{
-      return "";
     }
+    else {
+      return '';
+    }
+  },
+  gangliaServer:function() {
+    return this.getServer("GANGLIA");
   }.property('controller.content'),
   nagiosServer:function(){
-    var service=this.get('controller.content');
-    if(service.get("id") == "NAGIOS"){
-      return service.get("hostComponents").findProperty('isMaster', true).get("host").get("publicHostName");
-    }else{
-      return "";
-    }
+    return this.getServer("NAGIOS");
   }.property('controller.content'),
   oozieServer:function(){
-    var service=this.get('controller.content');
-    if(service.get("id") == "OOZIE"){
-      return service.get("hostComponents").findProperty('isMaster', true).get("host").get("publicHostName");
-    }else{
-      return "";
-    }
+    return this.getServer("OOZIE");
   }.property('controller.content'),
 
+  /**
+   * Array of the hostComponents for service
+   */
+  components: [],
+
+  /**
+   * Copy hostComponents from controller to view to avoid flickering Summary block while data is updating in the controller
+   * rand - just marker in the Service model for determining that Service was updated (value changes in the service_mapper)
+   */
+  hostComponentsUpd: function() {
+      var components = [];
+      this.get('controller.content.hostComponents').forEach(function(component) {
+        var obj = {};
+        for(var prop in component){
+          if( component.hasOwnProperty(prop)
+            && prop.indexOf('__ember') < 0
+            && prop.indexOf('_super') < 0
+            && Ember.typeOf(component.get(prop)) !== 'function'
+            ) {
+            obj[prop] = component.get(prop);
+          }
+        }
+        obj.displayName = component.get('displayName'); // this is computed property and wasn't copied in the top block of code
+        components.push(obj);
+      });
+      this.set('components', components);
+  }.observes('controller.content.rand', 'controller.content.hostComponents.@each.isMaster', 'controller.content.hostComponents.@each.host'),
   /**
    * Wrapper for displayName. used to render correct display name for mysql_server
    */