YARN-5151. [UI2] Support kill application from new YARN UI. Contributed by Gergely Novák.

hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/adapters/yarn-app.js

@@ -16,9 +16,9 @@
  * limitations under the License.
  */
 
-import AbstractAdapter from './abstract';
+import RESTAbstractAdapter from './restabstract';
 
-export default AbstractAdapter.extend({
+export default RESTAbstractAdapter.extend({
   address: "rmWebAddress",
   restNameSpace: "cluster",
   serverName: "RM",
@@ -38,4 +38,13 @@ export default AbstractAdapter.extend({
   pathForType(/*modelName*/) {
     return 'apps'; // move to some common place, return path by modelname.
   },
+
+  sendKillApplication(id) {
+    var url = this._buildURL();
+    url += '/apps/' + id + '/state';
+    var data = {
+      "state": "KILLED"
+    };
+    return this.ajax(url, "PUT", { data: data });
+  }
 });

hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/yarn-app.js

@@ -81,6 +81,33 @@ export default Ember.Controller.extend({
       });
     },
 
+    showKillApplicationConfirm() {
+      this.set('actionResponse', null);
+      Ember.$("#killApplicationConfirmDialog").modal('show');
+    },
+
+    killApplication() {
+      var self = this;
+      Ember.$("#killApplicationConfirmDialog").modal('hide');
+      const adapter = this.store.adapterFor('yarn-app');
+      self.set('isLoading', true);
+      adapter.sendKillApplication(this.model.app.id).then(function () {
+        self.set('actionResponse', {
+          msg: 'Application killed successfully. Auto refreshing in 5 seconds.',
+          type: 'success'
+        });
+        Ember.run.later(self, function () {
+          this.set('actionResponse', null);
+          this.send("refresh");
+        }, 5000);
+      }, function (err) {
+        let message = err.diagnostics || 'Error: Kill application failed!';
+        self.set('actionResponse', { msg: message, type: 'error' });
+      }).finally(function () {
+        self.set('isLoading', false);
+      });
+    },
+
     resetActionResponse() {
       this.set('actionResponse', null);
     }
@@ -125,5 +152,13 @@ export default Ember.Controller.extend({
       amHostAddress = 'http://' + amHostAddress;
     }
     return amHostAddress;
+  }),
+
+  isKillable: Ember.computed("model.app.state", function () {
+    if (this.get("model.app.applicationType") === 'yarn-service') {
+      return false;
+    }
+    const killableStates = ['NEW', 'NEW_SAVING', 'SUBMITTED', 'ACCEPTED', 'RUNNING'];
+    return killableStates.indexOf(this.get("model.app.state")) > -1;
   })
 });

hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-app.hbs

@@ -18,6 +18,15 @@
 
 {{breadcrumb-bar breadcrumbs=breadcrumbs}}
 
+{{#if actionResponse}}
+  <div class="col-md-12">
+    <div class="alert alert-dismissible {{if (eq actionResponse.type 'error') 'alert-danger' 'alert-success'}}" role="alert">
+      <button class="close" data-dismiss="alert" aria-label="Close" {{action "resetActionResponse"}}><span aria-hidden="true">&times;</span></button>
+      <strong>{{actionResponse.msg}}</strong>
+    </div>
+  </div>
+{{/if}}
+
 <div class="panel-group">
   <div class="panel panel-default">
     <div class="yarn-app-header">
@@ -64,18 +73,26 @@
 
         <div class="flex-right">
           <div class="links">
-            {{#if isRunningService}}
+              {{#if (or isRunningService isKillable)}}
               <div class="btn-group">
                 <button type="button" class="btn btn-unstyled dropdown-toggle" title="Settings" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                   <i class="glyphicon glyphicon-cog" />
                 </button>
                 <ul class="dropdown-menu dropdown-menu-right">
-                  <li>
-                    <a href="#"  {{action "showStopServiceConfirm"}} target="_blank"><i class="glyphicon glyphicon-stop" /> &nbsp;Stop Service</a>
-                  </li>
-                  <li>
-                    <a href="#" target="_blank" {{action "showDeleteServiceConfirm"}}><i class="glyphicon glyphicon-trash" /> &nbsp;Delete Service </a>
-                  </li>
+                  {{#if isRunningService}}
+                    <li>
+                      <a href="#"  {{action "showStopServiceConfirm"}} target="_blank"><i class="glyphicon glyphicon-stop" /> &nbsp;Stop Service</a>
+                    </li>
+                    <li>
+                      <a href="#" target="_blank" {{action "showDeleteServiceConfirm"}}><i class="glyphicon glyphicon-trash" /> &nbsp;Delete Service </a>
+                    </li>
+                  {{else if isKillable}}
+                    <li>
+                      <a href="#"  {{action "showKillApplicationConfirm"}} target="_blank">
+                        <i class="glyphicon glyphicon-stop" />&nbsp;Kill Application
+                      </a>
+                    </li>
+                  {{/if}}
                 </ul>
               </div>
             {{/if}}
@@ -147,3 +164,9 @@
   message=(concat 'Are you sure you want to delete service "' model.serviceName '" for user "' model.app.user '" ?')
   action="deleteService"
 }}
+
+{{confirm-dialog
+  dialogId="killApplicationConfirmDialog"
+  message=(concat 'Are you sure you want to kill application "' model.app.id '"?')
+  action="killApplication"
+}}