AMBARI-2358: Security wizard: Relabel the three actions in Step 3 and don't link them before they are "in progress".(jaimin)

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

ambari-web/app/messages.js

@@ -602,9 +602,9 @@ Em.I18n.translations = {
   'admin.security.disable.body.success.header': 'Kerberos-based security has been disabled on your cluster.',
   'admin.security.disable.body.failure.header': 'Failed to disable Kerberos-based security on your cluster. Your cluster will keep running in secure mode.',
   'admin.addSecurity.apply.stage1': '1. Checking KDC',
-  'admin.addSecurity.apply.stage2': '1. Stopping Services',
-  'admin.addSecurity.apply.stage3': '2. Saving Configurations',
-  'admin.addSecurity.apply.stage4': '3. Starting Services',
+  'admin.addSecurity.apply.stage2': '1. Stop Services',
+  'admin.addSecurity.apply.stage3': '2. Save Configurations',
+  'admin.addSecurity.apply.stage4': '3. Start Services',
   'admin.addSecurity.apply.stage5': '5. Smoke Test',
   'admin.removeSecurity.header': 'Disable Security',
   'admin.security.status.error' : 'Error in retrieving cluster security status from Ambari server',

ambari-web/app/styles/application.less

@@ -4300,4 +4300,13 @@ i.icon-asterisks {
       right:0;
     }
   }
+}
+
+#security-stages {
+  a.remove-link {
+    text-decoration:none;
+    pointer-events: none;
+    color:black;
+    cursor: default;
+  }
 }

ambari-web/app/templates/main/service/reconfigure.hbs

@@ -19,37 +19,33 @@
 <table id="security-stages" class="table no-borders">
   <tbody>
     {{#each stage in controller.stages}}
-      {{#view App.StageStatusView}}
+    <tr>
       <td>
-        {{#if stage.isPolling}}
-          <a href="javascript:void(0)" {{action "showHostPopup" stage.label target="view"}}>
-        {{/if}}
-        <p {{bindAttr class="stage.hasStarted::faintText"}}>{{stage.label}}</p>
-        {{#if stage.isPolling}}
-          </a>
-        {{/if}}
+      {{#view App.StageLabelView stageBinding="stage"}}
+          <p {{bindAttr class="view.isStarted::faintText"}}>{{stage.label}}</p>
+      {{/view}}
       </td>
       <td>
-        {{#if stage.isCompleted}}
-          {{#if stage.isSuccess}}
-            {{view App.StageSuccessView}}
-          {{else}}
-            {{#if stage.isError}}
-              {{view App.StageFailureView}}
+          {{#if stage.isCompleted}}
+            {{#if stage.isSuccess}}
+              {{view App.StageSuccessView}}
+            {{else}}
+              {{#if stage.isError}}
+                {{view App.StageFailureView}}
+              {{/if}}
             {{/if}}
-          {{/if}}
-        {{else}}
-          {{#if stage.isStarted}}
-            {{#if stage.isPolling}}
-              <div class="progress-bar pull-left">
-                {{view App.StageInProgressView stageBinding=stage}}
-              </div>
-              <div class="progress-percentage pull-left">{{stage.progress}}%</div>
+          {{else}}
+            {{#if stage.isStarted}}
+              {{#if stage.isPolling}}
+                <div class="progress-bar pull-left">
+                  {{view App.StageInProgressView stageBinding=stage}}
+                </div>
+                <div class="progress-percentage pull-left">{{stage.progress}}%</div>
+              {{/if}}
             {{/if}}
           {{/if}}
-        {{/if}}
       </td>
-      {{/view}}
+    </tr>
     {{/each}}
   </tbody>
 </table>

ambari-web/app/utils/polling.js

@@ -45,6 +45,10 @@ App.Poll = Em.Object.extend({
     return (this.get('isError') || this.get('isSuccess'));
   }.property('isError', 'isSuccess'),
 
+  showLink: function () {
+    return (this.get('isPolling') === true && this.get('isStarted') === true);
+  }.property('isPolling','isStarted'),
+
   start: function () {
     if (this.get('requestId') === undefined) {
       this.setRequestId();

ambari-web/app/views/main/service/reconfigure.js

@@ -23,15 +23,42 @@ App.MainServiceReconfigureView = Em.View.extend({
 
 });
 
-App.StageStatusView = Em.View.extend({
-  tagName: 'tr',
-  hasStarted: null,
-  classNameBindings: ['faintText'],
-  showHostPopup:function(event){
-    var serviceName = event.contexts[0];
+App.StageLabelView = Em.View.extend({
+  tagName: 'a',
+  classNameBindings: ['removeLink'],
+  attributeBindings: ['href'],
+  href: '#',
+  removeLink: null,
+  didInsertElement: function() {
+   this.onLink();
+  },
+  onLink: function() {
+   if (this.get('showLink') === true) {
+     this.set('removeLink',null);
+   } else {
+     this.set('removeLink','remove-link');
+   }
+  }.observes('showLink'),
+  stage: null,
+  click: function () {
+    if (this.get('stage') && this.get('showLink')) {
+      this.showHostPopup(this.get('stage.label'));
+    }
+  },
+
+  showHostPopup: function (label) {
+    var serviceName = label;
     var controller = this.get("controller");
     App.HostPopup.initPopup(serviceName, controller);
-  }
+  },
+
+  isStarted: function () {
+    return  (this.get('stage') && this.get('stage.isStarted'));
+  }.property('stage.isStarted'),
+
+  showLink: function () {
+    return (this.get('stage') && this.get('stage.showLink'));
+  }.property('stage.showLink')
 });
 
 App.StageSuccessView = Em.View.extend({