AMBARI-6326 Clicking on a single component link goes to Hosts page rather than directly to Host Details page. (atkach)

ambari-web/app/templates/main/host/details.hbs

@@ -16,41 +16,45 @@
 * limitations under the License.
 }}
 
-<div id="host-details">
-  <div class="status-info">
-    <span rel="HealthTooltip" {{bindAttr class="view.content.healthClass view.content.healthIconClass"}} {{bindAttr data-original-title="view.content.healthToolTip" }}></span><span class='host-title'>{{unbound view.content.publicHostName}}</span>
-    {{#if view.content.criticalAlertsCount}}
-      <span class="label label-important alerts-count" {{action "showAlertsPopup" content target="App.router.mainHostController"}}>{{view.content.criticalAlertsCount}}</span>
-    {{else}}
-      <span class="label label-success alerts-count" {{action "showAlertsPopup" content target="App.router.mainHostController"}}>{{t hosts.host.alert.noAlerts}}</span>
-    {{/if}}
-    {{#unless view.isActive}}
-      <span class="host-maintenance-notice pull-right"><span class="icon-medkit"></span> {{t hosts.host.passive.mode}}</span>
-    {{/unless}}
-  </div>  
-  <div><a href="javascript:void(null)" data-toggle="modal" {{action back}}><i class="icon-arrow-left"></i>&nbsp;{{t common.back}}</a></div>
-  <div class="content">
-    {{view App.MainHostMenuView}}
-    {{#if App.isAdmin}}
-      {{#if App.supports.deleteHost}}
-				<div class="service-button">
-				    <div class="btn-group display-inline-block">
-				      <a href="javascript:void(null)" {{bindAttr class=":btn :dropdown-toggle"}} data-toggle="dropdown">
-                {{t hosts.host.details.hostActions}}
-				        <span class="caret"></span>
-				      </a>
-				      <ul class="dropdown-menu pull-right">
-				        <!-- dropdown menu links -->
-				        {{#each option in view.maintenance}}
-				        <li {{bindAttr class="controller.isStopDisabled:disabled option.liClass"}}>
-				          <a {{action "doAction" option target="controller" href=true}}><i {{bindAttr class="option.cssClass option.liClass"}}></i> {{option.label}}</a>
-				        </li>
-				        {{/each}}
-				      </ul>
-				    </div>
-				</div>
-			{{/if}}
-	  {{/if}}
-    {{outlet}}
-  </div>
-</div>
+{{#if view.isLoaded}}
+    <div id="host-details">
+        <div class="status-info">
+            <span rel="HealthTooltip" {{bindAttr class="view.content.healthClass view.content.healthIconClass"}} {{bindAttr data-original-title="view.content.healthToolTip" }}></span><span class='host-title'>{{unbound view.content.publicHostName}}</span>
+          {{#if view.content.criticalAlertsCount}}
+              <span class="label label-important alerts-count" {{action "showAlertsPopup" content target="App.router.mainHostController"}}>{{view.content.criticalAlertsCount}}</span>
+          {{else}}
+              <span class="label label-success alerts-count" {{action "showAlertsPopup" content target="App.router.mainHostController"}}>{{t hosts.host.alert.noAlerts}}</span>
+          {{/if}}
+          {{#unless view.isActive}}
+              <span class="host-maintenance-notice pull-right"><span class="icon-medkit"></span> {{t hosts.host.passive.mode}}</span>
+          {{/unless}}
+        </div>
+        <div><a href="javascript:void(null)" data-toggle="modal" {{action back}}><i class="icon-arrow-left"></i>&nbsp;{{t common.back}}</a></div>
+        <div class="content">
+          {{view App.MainHostMenuView}}
+          {{#if App.isAdmin}}
+            {{#if App.supports.deleteHost}}
+                <div class="service-button">
+                    <div class="btn-group display-inline-block">
+                        <a href="javascript:void(null)" {{bindAttr class=":btn :dropdown-toggle"}} data-toggle="dropdown">
+                          {{t hosts.host.details.hostActions}}
+                            <span class="caret"></span>
+                        </a>
+                        <ul class="dropdown-menu pull-right">
+                            <!-- dropdown menu links -->
+                          {{#each option in view.maintenance}}
+                              <li {{bindAttr class="controller.isStopDisabled:disabled option.liClass"}}>
+                                  <a {{action "doAction" option target="controller" href=true}}><i {{bindAttr class="option.cssClass option.liClass"}}></i> {{option.label}}</a>
+                              </li>
+                          {{/each}}
+                        </ul>
+                    </div>
+                </div>
+            {{/if}}
+          {{/if}}
+          {{outlet}}
+        </div>
+    </div>
+{{else}}
+    <div class="spinner"></div>
+{{/if}}

ambari-web/app/views/main/host/details.js

@@ -22,6 +22,11 @@ var date = require('utils/date');
 App.MainHostDetailsView = Em.View.extend({
   templateName: require('templates/main/host/details'),
 
+  /**
+   * flag identify whether current host exist and loaded to model
+   */
+  isLoaded: false,
+
   content: function(){
     return App.router.get('mainHostDetailsController.content');
   }.property('App.router.mainHostDetailsController.content'),
@@ -40,12 +45,16 @@ App.MainHostDetailsView = Em.View.extend({
       {action: 'deleteHost', liClass:'', cssClass: 'icon-remove', 'label': this.t('hosts.host.details.deleteHost')}];
   }.property('controller.content','isActive', 'controller.content.isNotHeartBeating'),
   didInsertElement: function() {
-    //if host is not existed then route to list of hosts
-    if (!this.get('content.isLoaded')) {
-      App.router.transitionTo('main.hosts.index');
-      return;
-    }
-    App.router.get('updateController').updateHost(Em.K);
+    var self = this;
+
+    this.set('isLoaded', false);
+    App.router.get('updateController').updateHost(function () {
+      self.set('isLoaded', true);
+      if (!self.get('content.isLoaded')) {
+        //if host is not existed then route to list of hosts
+        App.router.transitionTo('main.hosts.index');
+      }
+    });
     App.tooltip($("[rel='HealthTooltip']"));
   }
 });