You are viewing a plain text version of this content. The canonical link for it is here.
Posted to common-commits@hadoop.apache.org by ji...@apache.org on 2017/07/21 18:39:39 UTC

[37/52] [abbrv] hadoop git commit: YARN-6398. Support to add native-service specific details in new YARN UI. Contributed by Akhil PB.

YARN-6398. Support to add native-service specific details in new YARN UI. Contributed by Akhil PB.


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

Branch: refs/heads/yarn-native-services
Commit: 636cbbad1d87d8e3d99e930841a8eb1e402b8909
Parents: 048f274
Author: Sunil G <su...@apache.org>
Authored: Sat May 6 23:48:19 2017 +0530
Committer: Jian He <ji...@apache.org>
Committed: Fri Jul 21 11:38:13 2017 -0700

----------------------------------------------------------------------
 .../app/adapters/yarn-component-instance.js     |  32 ++++++
 .../app/adapters/yarn-service-component.js      |  32 ++++++
 .../webapp/app/adapters/yarn-service-info.js    |  32 ++++++
 .../main/webapp/app/adapters/yarn-servicedef.js |  13 +++
 .../webapp/app/components/confirm-dialog.js     |  31 ++++++
 .../main/webapp/app/components/metrics-table.js |  24 ++++
 .../app/controllers/yarn-app/components.js      |  63 +++++++++++
 .../webapp/app/controllers/yarn-app/configs.js  |  24 ++++
 .../webapp/app/controllers/yarn-app/info.js     |  60 ++++++++++
 .../app/controllers/yarn-component-instance.js  |  59 ++++++++++
 .../controllers/yarn-component-instance/info.js |  25 +++++
 .../app/controllers/yarn-component-instances.js |  59 ++++++++++
 .../yarn-component-instances/configs.js         |  25 +++++
 .../yarn-component-instances/info.js            |  62 +++++++++++
 .../webapp/app/helpers/check-availability.js    |  28 +++++
 .../app/models/yarn-component-instance.js       |  51 +++++++++
 .../webapp/app/models/yarn-service-component.js |  46 ++++++++
 .../main/webapp/app/models/yarn-service-info.js |  57 ++++++++++
 .../src/main/webapp/app/router.js               |   9 ++
 .../webapp/app/routes/yarn-app/components.js    |  49 ++++++++
 .../main/webapp/app/routes/yarn-app/configs.js  |  52 +++++++++
 .../src/main/webapp/app/routes/yarn-app/info.js |  12 +-
 .../app/routes/yarn-component-instance.js       |  29 +++++
 .../app/routes/yarn-component-instance/info.js  |  45 ++++++++
 .../app/routes/yarn-component-instances.js      |  29 +++++
 .../routes/yarn-component-instances/configs.js  |  44 ++++++++
 .../app/routes/yarn-component-instances/info.js |  53 +++++++++
 .../app/serializers/yarn-component-instance.js  |  72 ++++++++++++
 .../app/serializers/yarn-service-component.js   |  77 +++++++++++++
 .../webapp/app/serializers/yarn-service-info.js |  87 +++++++++++++++
 .../src/main/webapp/app/styles/app.css          |  14 ++-
 .../app/templates/components/confirm-dialog.hbs |  37 +++++++
 .../app/templates/components/metrics-table.hbs  |  82 ++++++++++++++
 .../src/main/webapp/app/templates/yarn-app.hbs  |   8 ++
 .../app/templates/yarn-app/components.hbs       |  23 ++++
 .../webapp/app/templates/yarn-app/configs.hbs   |  57 ++++++++++
 .../main/webapp/app/templates/yarn-app/info.hbs | 111 ++++++++++++++-----
 .../app/templates/yarn-component-instance.hbs   |  43 +++++++
 .../templates/yarn-component-instance/info.hbs  |  81 ++++++++++++++
 .../app/templates/yarn-component-instances.hbs  |  46 ++++++++
 .../yarn-component-instances/configs.hbs        |  53 +++++++++
 .../templates/yarn-component-instances/info.hbs |  28 +++++
 .../yarn-component-instances/loading.hbs        |  23 ++++
 .../src/main/webapp/config/default-config.js    |   2 +-
 .../components/confirm-dialog-test.js           |  43 +++++++
 .../components/metrics-table-test.js            |  43 +++++++
 .../adapters/yarn-component-instance-test.js    |  30 +++++
 .../adapters/yarn-service-component-test.js     |  30 +++++
 .../unit/adapters/yarn-service-info-test.js     |  30 +++++
 .../controllers/yarn-app/components-test.js     |  30 +++++
 .../unit/controllers/yarn-app/configs-test.js   |  30 +++++
 .../controllers/yarn-component-instance-test.js |  30 +++++
 .../yarn-component-instance/info-test.js        |  30 +++++
 .../yarn-component-instances-test.js            |  30 +++++
 .../yarn-component-instances/configs-test.js    |  30 +++++
 .../yarn-component-instances/info-test.js       |  30 +++++
 .../unit/helpers/check-availability-test.js     |  28 +++++
 .../unit/models/yarn-component-instance-test.js |  30 +++++
 .../unit/models/yarn-service-component-test.js  |  30 +++++
 .../tests/unit/models/yarn-service-info-test.js |  30 +++++
 .../unit/routes/yarn-app/components-test.js     |  29 +++++
 .../tests/unit/routes/yarn-app/configs-test.js  |  29 +++++
 .../unit/routes/yarn-component-instance-test.js |  29 +++++
 .../routes/yarn-component-instance/info-test.js |  29 +++++
 .../routes/yarn-component-instances-test.js     |  29 +++++
 .../yarn-component-instances/configs-test.js    |  29 +++++
 .../yarn-component-instances/info-test.js       |  29 +++++
 .../serializers/yarn-component-instance-test.js |  33 ++++++
 .../serializers/yarn-service-component-test.js  |  33 ++++++
 .../unit/serializers/yarn-service-info-test.js  |  33 ++++++
 70 files changed, 2666 insertions(+), 29 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/hadoop/blob/636cbbad/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/adapters/yarn-component-instance.js
----------------------------------------------------------------------
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/adapters/yarn-component-instance.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/adapters/yarn-component-instance.js
new file mode 100644
index 0000000..062a006
--- /dev/null
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/adapters/yarn-component-instance.js
@@ -0,0 +1,32 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import AbstractAdapter from './abstract';
+
+export default AbstractAdapter.extend({
+  address: "timelineWebAddress",
+  restNameSpace: "timelineService",
+  serverName: "ATS",
+
+  urlForQuery(query/*, modelName*/) {
+    var url = this.buildURL();
+    url += '/' + query.appId + '/entities/COMPONENT_INSTANCE?fields=ALL';
+    delete query.appId;
+    return url;
+  }
+});

http://git-wip-us.apache.org/repos/asf/hadoop/blob/636cbbad/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/adapters/yarn-service-component.js
----------------------------------------------------------------------
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/adapters/yarn-service-component.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/adapters/yarn-service-component.js
new file mode 100644
index 0000000..c356192
--- /dev/null
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/adapters/yarn-service-component.js
@@ -0,0 +1,32 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import AbstractAdapter from './abstract';
+
+export default AbstractAdapter.extend({
+  address: "timelineWebAddress",
+  restNameSpace: "timelineService",
+  serverName: "ATS",
+
+  urlForQuery(query/*, modelName*/) {
+    var url = this.buildURL();
+    url += '/' + query.appId + '/entities/COMPONENT?fields=ALL';
+    delete query.appId;
+    return url;
+  }
+});

http://git-wip-us.apache.org/repos/asf/hadoop/blob/636cbbad/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/adapters/yarn-service-info.js
----------------------------------------------------------------------
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/adapters/yarn-service-info.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/adapters/yarn-service-info.js
new file mode 100644
index 0000000..dec3e50
--- /dev/null
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/adapters/yarn-service-info.js
@@ -0,0 +1,32 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import AbstractAdapter from './abstract';
+
+export default AbstractAdapter.extend({
+  address: "timelineWebAddress",
+  restNameSpace: "timelineService",
+  serverName: "ATS",
+
+  urlForQueryRecord(query/*, modelName*/) {
+    var url = this.buildURL();
+    url += '/' + query.appId + '/entities/SERVICE_ATTEMPT?fields=ALL';
+    delete query.appId;
+    return url;
+  }
+});

http://git-wip-us.apache.org/repos/asf/hadoop/blob/636cbbad/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/adapters/yarn-servicedef.js
----------------------------------------------------------------------
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/adapters/yarn-servicedef.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/adapters/yarn-servicedef.js
index c362f5e..dc5dbfd 100644
--- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/adapters/yarn-servicedef.js
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/adapters/yarn-servicedef.js
@@ -27,5 +27,18 @@ export default RESTAbstractAdapter.extend({
   deployService(request) {
     var url = this.buildURL();
     return this.ajax(url, "POST", {data: request});
+  },
+
+  stopService(serviceName) {
+    var url = this.buildURL();
+    url += "/" + serviceName;
+    var data = {"state": "STOPPED", "name": serviceName};
+    return this.ajax(url, "PUT", {data: data});
+  },
+
+  deleteService(serviceName) {
+    var url = this.buildURL();
+    url += "/" + serviceName;
+    return this.ajax(url, "DELETE", {data: {}});
   }
 });

http://git-wip-us.apache.org/repos/asf/hadoop/blob/636cbbad/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/confirm-dialog.js
----------------------------------------------------------------------
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/confirm-dialog.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/confirm-dialog.js
new file mode 100644
index 0000000..a6f518b
--- /dev/null
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/confirm-dialog.js
@@ -0,0 +1,31 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+  dialogId: "confirmModalDialog",
+  title: "Confirm",
+  message: "Are you sure?",
+
+  actions: {
+    yesConfirmed() {
+      this.sendAction();
+    }
+  }
+});

http://git-wip-us.apache.org/repos/asf/hadoop/blob/636cbbad/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/metrics-table.js
----------------------------------------------------------------------
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/metrics-table.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/metrics-table.js
new file mode 100644
index 0000000..62b2fc5
--- /dev/null
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/metrics-table.js
@@ -0,0 +1,24 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+  metrics: null,
+  type: ''
+});

http://git-wip-us.apache.org/repos/asf/hadoop/blob/636cbbad/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/yarn-app/components.js
----------------------------------------------------------------------
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/yarn-app/components.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/yarn-app/components.js
new file mode 100644
index 0000000..947cb98
--- /dev/null
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/yarn-app/components.js
@@ -0,0 +1,63 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import Ember from 'ember';
+import ColumnDef from 'em-table/utils/column-definition';
+
+export default Ember.Controller.extend({
+  queryParams: ["service"],
+  service: undefined,
+
+  tableColumns: Ember.computed('model.appId', 'model.serviceName', function() {
+    var cols = [];
+    var service = this.get('model.serviceName');
+    var appId = this.get('model.appId');
+
+    cols.push({
+      id: 'name',
+      headerTitle: 'Component Group',
+      contentPath: 'name',
+      cellComponentName: 'em-table-linked-cell',
+      getCellContent: function(row) {
+        return {
+          displayText: row.get('name'),
+          href: `#/yarn-component-instances/${row.get('name')}/info?service=${service}&&appid=${appId}`
+        };
+      }
+    }, {
+      id: 'vcores',
+      headerTitle: 'VCores',
+      contentPath: 'vcores'
+    }, {
+      id: 'memory',
+      headerTitle: 'Memory (MB)',
+      contentPath: 'memory'
+    }, {
+      id: 'instances',
+      headerTitle: '# Components',
+      contentPath: 'instances',
+      observePath: true
+    }, {
+      id: 'createdDate',
+      headerTitle: 'Created Time',
+      contentPath: 'createdDate'
+    });
+
+    return ColumnDef.make(cols);
+  })
+});

http://git-wip-us.apache.org/repos/asf/hadoop/blob/636cbbad/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/yarn-app/configs.js
----------------------------------------------------------------------
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/yarn-app/configs.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/yarn-app/configs.js
new file mode 100644
index 0000000..a6cba9e
--- /dev/null
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/yarn-app/configs.js
@@ -0,0 +1,24 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import Ember from 'ember';
+
+export default Ember.Controller.extend({
+  queryParams: ["service"],
+  service: undefined
+});

http://git-wip-us.apache.org/repos/asf/hadoop/blob/636cbbad/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/yarn-app/info.js
----------------------------------------------------------------------
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/yarn-app/info.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/yarn-app/info.js
index f9652f9..3de6687 100644
--- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/yarn-app/info.js
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/yarn-app/info.js
@@ -21,6 +21,66 @@ import Ember from 'ember';
 export default Ember.Controller.extend({
   queryParams: ["service"],
   service: undefined,
+  isLoading: false,
+  actionResponse: null,
+
+  actions: {
+    showStopServiceConfirm() {
+      this.set('actionResponse', null);
+      Ember.$("#stopServiceConfirmDialog").modal('show');
+    },
+
+    stopService() {
+      var self = this;
+      Ember.$("#stopServiceConfirmDialog").modal('hide');
+      var adapter = this.store.adapterFor('yarn-servicedef');
+      self.set('isLoading', true);
+      adapter.stopService(this.get('service')).then(function() {
+        self.set('actionResponse', {msg: 'Service stopped successfully. Auto refreshing in 5 seconds.', type: 'success'});
+        Ember.run.later(self, function() {
+          this.set('actionResponse', null);
+          this.send("refresh");
+        }, 5000);
+      }, function(errr) {
+        let messg = errr.diagnostics || 'Error: Stop service failed!';
+        self.set('actionResponse', {msg: messg, type: 'error'});
+      }).finally(function() {
+        self.set('isLoading', false);
+      });
+    },
+
+    showDeleteServiceConfirm() {
+      this.set('actionResponse', null);
+      Ember.$("#deleteServiceConfirmDialog").modal('show');
+    },
+
+    deleteService() {
+      var self = this;
+      Ember.$("#deleteServiceConfirmDialog").modal('hide');
+      var adapter = this.store.adapterFor('yarn-servicedef');
+      self.set('isLoading', true);
+      adapter.deleteService(this.get('service')).then(function() {
+        self.set('actionResponse', {msg: 'Service deleted successfully. Redirecting to services in 5 seconds.', type: 'success'});
+        Ember.run.later(self, function() {
+          this.set('actionResponse', null);
+          this.transitionToRoute("yarn-services");
+        }, 5000);
+      }, function(errr) {
+        let messg = errr.diagnostics || 'Error: Delete service failed!';
+        self.set('actionResponse', {msg: messg, type: 'error'});
+      }).finally(function() {
+        self.set('isLoading', false);
+      });
+    },
+
+    resetActionResponse() {
+      this.set('actionResponse', null);
+    }
+  },
+
+  isRunningService: Ember.computed('model.serviceName', 'model.app.state', function() {
+    return this.get('service') !== undefined && this.get('model.app.state') === 'RUNNING';
+  }),
 
   amHostHttpAddressFormatted: Ember.computed('model.app.amHostHttpAddress', function() {
     var amHostAddress = this.get('model.app.amHostHttpAddress');

http://git-wip-us.apache.org/repos/asf/hadoop/blob/636cbbad/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/yarn-component-instance.js
----------------------------------------------------------------------
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/yarn-component-instance.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/yarn-component-instance.js
new file mode 100644
index 0000000..4b8dbf4
--- /dev/null
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/yarn-component-instance.js
@@ -0,0 +1,59 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import Ember from 'ember';
+
+export default Ember.Controller.extend({
+  componentName: '',
+  instanceName: '',
+  serviceName: '',
+  appId: '',
+
+  breadcrumbs: [{
+    text: "Home",
+    routeName: 'application'
+  }, {
+    text: "Services",
+    routeName: 'yarn-services',
+  }],
+
+  updateBreadcrumbs(appId, serviceName, componentName, instanceName) {
+    var crumbs =  [{
+      text: "Home",
+      routeName: 'application'
+    }, {
+      text: "Services",
+      routeName: 'yarn-services',
+    }];
+    if (appId && serviceName && componentName && instanceName) {
+      crumbs.push({
+        text: `${serviceName} [${appId}]`,
+        href: `#/yarn-app/${appId}/info?service=${serviceName}`
+      }, {
+        text: 'Components',
+        href: `#/yarn-app/${appId}/components?service=${serviceName}`
+      }, {
+        text: `${componentName}`,
+        href: `#/yarn-component-instances/${componentName}/info?service=${serviceName}&&appid=${appId}`
+      }, {
+        text: `${instanceName}`
+      });
+    }
+    this.set('breadcrumbs', crumbs);
+  }
+});

http://git-wip-us.apache.org/repos/asf/hadoop/blob/636cbbad/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/yarn-component-instance/info.js
----------------------------------------------------------------------
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/yarn-component-instance/info.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/yarn-component-instance/info.js
new file mode 100644
index 0000000..e3abcb7
--- /dev/null
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/yarn-component-instance/info.js
@@ -0,0 +1,25 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import Ember from 'ember';
+
+export default Ember.Controller.extend({
+  queryParams: ["appid", "service"],
+  appid: undefined,
+  service: undefined
+});

http://git-wip-us.apache.org/repos/asf/hadoop/blob/636cbbad/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/yarn-component-instances.js
----------------------------------------------------------------------
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/yarn-component-instances.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/yarn-component-instances.js
new file mode 100644
index 0000000..965631c
--- /dev/null
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/yarn-component-instances.js
@@ -0,0 +1,59 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import Ember from 'ember';
+
+export default Ember.Controller.extend({
+  componentName: '',
+  serviceName: '',
+  appId: '',
+
+  breadcrumbs: [{
+    text: "Home",
+    routeName: 'application'
+  }, {
+    text: "Services",
+    routeName: 'yarn-services',
+  }],
+
+  updateBreadcrumbs(appId, serviceName, componentName, tailCrumbs) {
+    var crumbs =  [{
+      text: "Home",
+      routeName: 'application'
+    }, {
+      text: "Services",
+      routeName: 'yarn-services',
+    }];
+    if (appId && serviceName && componentName) {
+      crumbs.push({
+        text: `${serviceName} [${appId}]`,
+        href: `#/yarn-app/${appId}/info?service=${serviceName}`
+      }, {
+        text: 'Components',
+        href: `#/yarn-app/${appId}/components?service=${serviceName}`
+      }, {
+        text: `${componentName}`,
+        href: `#/yarn-component-instances/${componentName}/info?service=${serviceName}&&appid=${appId}`
+      });
+    }
+    if (tailCrumbs) {
+      crumbs.pushObjects(tailCrumbs);
+    }
+    this.set('breadcrumbs', crumbs);
+  }
+});

http://git-wip-us.apache.org/repos/asf/hadoop/blob/636cbbad/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/yarn-component-instances/configs.js
----------------------------------------------------------------------
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/yarn-component-instances/configs.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/yarn-component-instances/configs.js
new file mode 100644
index 0000000..dac6498
--- /dev/null
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/yarn-component-instances/configs.js
@@ -0,0 +1,25 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import Ember from 'ember';
+
+export default Ember.Controller.extend({
+  queryParams: ["service", "appid"],
+  appid: undefined,
+  service: undefined
+});

http://git-wip-us.apache.org/repos/asf/hadoop/blob/636cbbad/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/yarn-component-instances/info.js
----------------------------------------------------------------------
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/yarn-component-instances/info.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/yarn-component-instances/info.js
new file mode 100644
index 0000000..a676b34
--- /dev/null
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/yarn-component-instances/info.js
@@ -0,0 +1,62 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import Ember from 'ember';
+import ColumnDef from 'em-table/utils/column-definition';
+
+export default Ember.Controller.extend({
+  queryParams: ["service", "appid"],
+  appid: undefined,
+  service: undefined,
+
+  tableColumns: Ember.computed('model.appId', 'model.serviceName', function() {
+    var cols = [];
+    var appId = this.get('model.appId');
+    var serviceName = this.get('model.serviceName');
+
+    cols.push({
+      id: 'instanceName',
+      headerTitle: 'Component Name',
+      contentPath: 'instanceName',
+      cellComponentName: 'em-table-linked-cell',
+      getCellContent: function(row) {
+        var component = row.get('component');
+        var instance = row.get('instanceName');
+        return {
+          text: instance,
+          href: `#/yarn-component-instance/${component}/instances/${instance}/info?appid=${appId}&&service=${serviceName}`
+        };
+      }
+    }, {
+      id: 'containerId',
+      headerTitle: 'Current Container Id',
+      contentPath: 'containerId',
+      minWidth: '350px'
+    }, {
+      id: 'state',
+      headerTitle: 'State',
+      contentPath: 'state'
+    }, {
+      id: 'startedDate',
+      headerTitle: 'Started Time',
+      contentPath: 'startedDate'
+    });
+
+    return ColumnDef.make(cols);
+  })
+});

http://git-wip-us.apache.org/repos/asf/hadoop/blob/636cbbad/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/helpers/check-availability.js
----------------------------------------------------------------------
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/helpers/check-availability.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/helpers/check-availability.js
new file mode 100644
index 0000000..4470d65
--- /dev/null
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/helpers/check-availability.js
@@ -0,0 +1,28 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import Ember from 'ember';
+
+export function checkAvailability(params/*, hash*/) {
+  if (params[0] !== undefined && params[0] !== null && params[0] !== '') {
+    return params[0];
+  }
+  return 'N/A';
+}
+
+export default Ember.Helper.helper(checkAvailability);

http://git-wip-us.apache.org/repos/asf/hadoop/blob/636cbbad/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/models/yarn-component-instance.js
----------------------------------------------------------------------
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/models/yarn-component-instance.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/models/yarn-component-instance.js
new file mode 100644
index 0000000..532fc55
--- /dev/null
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/models/yarn-component-instance.js
@@ -0,0 +1,51 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import DS from 'ember-data';
+import Ember from 'ember';
+import Converter from 'yarn-ui/utils/converter';
+
+export default DS.Model.extend({
+  containerId: DS.attr('string'),
+  component: DS.attr('string'),
+  instanceName: DS.attr('string'),
+  state: DS.attr('number'),
+  createdTimestamp: DS.attr('number'),
+  startedTimestamp: DS.attr('number'),
+  host: DS.attr('string'),
+  node: DS.attr('string'),
+  hostUrl: DS.attr('string'),
+  ipAddr: DS.attr('string'),
+  exitStatusCode: DS.attr('string'),
+
+  createdDate: Ember.computed('createdTimestamp', function() {
+    var timestamp = this.get('createdTimestamp');
+    if (timestamp > 0) {
+      return Converter.timeStampToDate(timestamp);
+    }
+    return 'N/A';
+  }),
+
+  startedDate: Ember.computed('startedTimestamp', function() {
+    var timestamp = this.get('startedTimestamp');
+    if (timestamp > 0) {
+      return Converter.timeStampToDate(timestamp);
+    }
+    return 'N/A';
+  })
+});

http://git-wip-us.apache.org/repos/asf/hadoop/blob/636cbbad/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/models/yarn-service-component.js
----------------------------------------------------------------------
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/models/yarn-service-component.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/models/yarn-service-component.js
new file mode 100644
index 0000000..9e06419
--- /dev/null
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/models/yarn-service-component.js
@@ -0,0 +1,46 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import DS from 'ember-data';
+import Ember from 'ember';
+import Converter from 'yarn-ui/utils/converter';
+
+export default DS.Model.extend({
+  name: DS.attr('string'),
+  vcores: DS.attr('string'),
+  memory: DS.attr('string'),
+  priority: DS.attr('string'),
+  instances: DS.attr('string'),
+  createdTimestamp: DS.attr('number'),
+
+  configs: DS.attr({defaultValue: function() {
+    return Ember.A();
+  }}),
+
+  metrics: DS.attr({defaultValue: function() {
+    return Ember.Object.create();
+  }}),
+
+  createdDate: Ember.computed('createdTimestamp', function() {
+    var timestamp = this.get('createdTimestamp');
+    if (timestamp > 0) {
+      return Converter.timeStampToDate(timestamp);
+    }
+    return 'N/A';
+  })
+});

http://git-wip-us.apache.org/repos/asf/hadoop/blob/636cbbad/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/models/yarn-service-info.js
----------------------------------------------------------------------
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/models/yarn-service-info.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/models/yarn-service-info.js
new file mode 100644
index 0000000..7b961e8
--- /dev/null
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/models/yarn-service-info.js
@@ -0,0 +1,57 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import DS from 'ember-data';
+import Ember from 'ember';
+import Converter from 'yarn-ui/utils/converter';
+
+export default DS.Model.extend({
+  name: DS.attr('string'),
+  appId: DS.attr('string'),
+  state: DS.attr('string'),
+  createdTimestamp: DS.attr('number'),
+  launchTimestamp: DS.attr('number'),
+
+  quicklinks: DS.attr({defaultValue: function() {
+    return Ember.A();
+  }}),
+
+  configs: DS.attr({defaultValue: function() {
+    return Ember.A();
+  }}),
+
+  metrics: DS.attr({defaultValue: function() {
+    return Ember.Object.create();
+  }}),
+
+  createdDate: Ember.computed('createdTimestamp', function() {
+    var timestamp = this.get('createdTimestamp');
+    if (timestamp > 0) {
+      return Converter.timeStampToDate(timestamp);
+    }
+    return 'N/A';
+  }),
+
+  launchDate: Ember.computed('launchTimestamp', function() {
+    var timestamp = this.get('launchTimestamp');
+    if (timestamp > 0) {
+      return Converter.timeStampToDate(timestamp);
+    }
+    return 'N/A';
+  })
+});

http://git-wip-us.apache.org/repos/asf/hadoop/blob/636cbbad/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/router.js
----------------------------------------------------------------------
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/router.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/router.js
index 9b3424b..c7b3d6a 100644
--- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/router.js
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/router.js
@@ -53,7 +53,16 @@ Router.map(function() {
   this.route('yarn-app', function() {
     this.route('info', {path: '/:app_id/info'});
     this.route('attempts', {path: '/:app_id/attempts'});
+    this.route('components', {path: '/:app_id/components'});
     this.route('charts', {path: '/:app_id/charts'});
+    this.route('configs', {path: '/:app_id/configs'});
+  });
+  this.route('yarn-component-instances', function() {
+    this.route('info', {path: '/:component_name/info'});
+    this.route('configs', {path: '/:component_name/configs'});
+  });
+  this.route('yarn-component-instance', function() {
+    this.route('info', {path: '/:component_name/instances/:instance_name/info'});
   });
   this.route('yarn-app-attempt', { path: '/yarn-app-attempt/:app_attempt_id'});
   this.route('error');

http://git-wip-us.apache.org/repos/asf/hadoop/blob/636cbbad/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/routes/yarn-app/components.js
----------------------------------------------------------------------
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/routes/yarn-app/components.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/routes/yarn-app/components.js
new file mode 100644
index 0000000..8f6f40f
--- /dev/null
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/routes/yarn-app/components.js
@@ -0,0 +1,49 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import Ember from 'ember';
+import AbstractRoute from '../abstract';
+
+export default AbstractRoute.extend({
+  model(param, transition) {
+    transition.send('updateBreadcrumbs', param.app_id, param.service, [{text: 'Components'}]);
+    return Ember.RSVP.hash({
+      appId: param.app_id,
+      serviceName: param.service,
+      components: this.store.query('yarn-service-component', {appId: param.app_id, type: 'COMPONENT'}).catch(function() {
+        return [];
+      }),
+      instances: this.store.query('yarn-component-instance', {appId: param.app_id}).catch(function() {
+        return [];
+      })
+    });
+  },
+
+  afterModel(model) {
+    let instances = model.instances;
+    model.components.forEach(function(component) {
+      var num = instances.filterBy('component', component.get('name')).length;
+      component.set('instances', num);
+    });
+  },
+
+  unloadAll() {
+    this.store.unloadAll('yarn-service-component');
+    this.store.unloadAll('yarn-component-instance');
+  }
+});

http://git-wip-us.apache.org/repos/asf/hadoop/blob/636cbbad/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/routes/yarn-app/configs.js
----------------------------------------------------------------------
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/routes/yarn-app/configs.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/routes/yarn-app/configs.js
new file mode 100644
index 0000000..7502481
--- /dev/null
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/routes/yarn-app/configs.js
@@ -0,0 +1,52 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import Ember from 'ember';
+import AbstractRoute from '../abstract';
+
+export default AbstractRoute.extend({
+  model(param, transition) {
+    transition.send('updateBreadcrumbs', param.app_id, param.service, [{text: "Configurations & Metrics"}]);
+    return Ember.RSVP.hash({
+      appId: param.app_id,
+      serviceName: param.service,
+
+      configs: this.store.queryRecord('yarn-service-info', {appId: param.app_id}).then(function(info) {
+        if (info && info.get('configs')) {
+          return info.get('configs');
+        }
+        return [];
+      }, function() {
+        return [];
+      }),
+
+      metrics: this.store.queryRecord('yarn-service-info', {appId: param.app_id}).then(function(info) {
+        if (info && info.get('metrics')) {
+          return info.get('metrics');
+        }
+        return null;
+      }, function() {
+        return null;
+      })
+    });
+  },
+
+  unloadAll() {
+    this.store.unloadAll('yarn-service-info');
+  }
+});

http://git-wip-us.apache.org/repos/asf/hadoop/blob/636cbbad/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/routes/yarn-app/info.js
----------------------------------------------------------------------
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/routes/yarn-app/info.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/routes/yarn-app/info.js
index 4a4b19e..7585476 100644
--- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/routes/yarn-app/info.js
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/routes/yarn-app/info.js
@@ -26,12 +26,22 @@ export default AbstractRoute.extend(AppAttemptMixin, {
     return Ember.RSVP.hash({
       appId: param.app_id,
       serviceName: param.service,
-      app: this.fetchAppInfoFromRMorATS(param.app_id, this.store)
+      app: this.fetchAppInfoFromRMorATS(param.app_id, this.store),
+
+      quicklinks: this.store.queryRecord('yarn-service-info', {appId: param.app_id}).then(function(info) {
+        if (info && info.get('quicklinks')) {
+          return info.get('quicklinks');
+        }
+        return [];
+      }, function() {
+        return [];
+      })
     });
   },
 
   unloadAll() {
     this.store.unloadAll('yarn-app');
     this.store.unloadAll('yarn-app-timeline');
+    this.store.unloadAll('yarn-service-info');
   }
 });

http://git-wip-us.apache.org/repos/asf/hadoop/blob/636cbbad/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/routes/yarn-component-instance.js
----------------------------------------------------------------------
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/routes/yarn-component-instance.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/routes/yarn-component-instance.js
new file mode 100644
index 0000000..681eed5
--- /dev/null
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/routes/yarn-component-instance.js
@@ -0,0 +1,29 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import AbstractRoute from './abstract';
+
+export default AbstractRoute.extend({
+  actions: {
+    updateBreadcrumbs(appId, serviceName, componentName, instanceName) {
+      var controller = this.controllerFor('yarn-component-instance');
+      controller.setProperties({appId: appId, serviceName: serviceName, componentName: componentName, instanceName: instanceName});
+      controller.updateBreadcrumbs(appId, serviceName, componentName, instanceName);
+    }
+  }
+});

http://git-wip-us.apache.org/repos/asf/hadoop/blob/636cbbad/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/routes/yarn-component-instance/info.js
----------------------------------------------------------------------
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/routes/yarn-component-instance/info.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/routes/yarn-component-instance/info.js
new file mode 100644
index 0000000..3753c75
--- /dev/null
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/routes/yarn-component-instance/info.js
@@ -0,0 +1,45 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import Ember from 'ember';
+import AbstractRoute from '../abstract';
+
+export default AbstractRoute.extend({
+  model(params, transition) {
+    var instanceName = params.instance_name;
+    transition.send('updateBreadcrumbs', params.appid, params.service, params.component_name, instanceName);
+    return Ember.RSVP.hash({
+      appId: params.appid,
+      serviceName: params.service,
+      componentName: params.component_name,
+      instanceName: instanceName,
+      container: this.store.query('yarn-component-instance', {appId: params.appid}).then(function(instances) {
+        if (instances && instances.findBy('instanceName', instanceName)) {
+          return instances.findBy('instanceName', instanceName);
+        }
+        return null;
+      }, function() {
+        return null;
+      }),
+    });
+  },
+
+  unloadAll() {
+    this.store.unloadAll('yarn-component-instance');
+  }
+});

http://git-wip-us.apache.org/repos/asf/hadoop/blob/636cbbad/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/routes/yarn-component-instances.js
----------------------------------------------------------------------
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/routes/yarn-component-instances.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/routes/yarn-component-instances.js
new file mode 100644
index 0000000..0190911
--- /dev/null
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/routes/yarn-component-instances.js
@@ -0,0 +1,29 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import AbstractRoute from './abstract';
+
+export default AbstractRoute.extend({
+  actions: {
+    updateBreadcrumbs(appId, serviceName, componentName, tailCrumbs) {
+      var controller = this.controllerFor('yarn-component-instances');
+      controller.setProperties({appId: appId, componentName: componentName, serviceName: serviceName});
+      controller.updateBreadcrumbs(appId, serviceName, componentName, tailCrumbs);
+    }
+  }
+});

http://git-wip-us.apache.org/repos/asf/hadoop/blob/636cbbad/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/routes/yarn-component-instances/configs.js
----------------------------------------------------------------------
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/routes/yarn-component-instances/configs.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/routes/yarn-component-instances/configs.js
new file mode 100644
index 0000000..a2540fe
--- /dev/null
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/routes/yarn-component-instances/configs.js
@@ -0,0 +1,44 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import Ember from 'ember';
+import AbstractRoute from '../abstract';
+
+export default AbstractRoute.extend({
+  model(params, transition) {
+    var componentName = params.component_name;
+    transition.send('updateBreadcrumbs', params.appid, params.service, componentName, [{text: 'Configurations'}]);
+    return Ember.RSVP.hash({
+      appId: params.appid,
+      serviceName: params.service,
+      componentName: componentName,
+      configs: this.store.query('yarn-service-component', {appId: params.appid}).then(function(components) {
+        if (components && components.findBy('name', componentName)) {
+          return components.findBy('name', componentName).get('configs');
+        }
+        return [];
+      }, function() {
+        return [];
+      })
+    });
+  },
+
+  unloadAll() {
+    this.store.unloadAll('yarn-service-component');
+  }
+});

http://git-wip-us.apache.org/repos/asf/hadoop/blob/636cbbad/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/routes/yarn-component-instances/info.js
----------------------------------------------------------------------
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/routes/yarn-component-instances/info.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/routes/yarn-component-instances/info.js
new file mode 100644
index 0000000..83fd420
--- /dev/null
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/routes/yarn-component-instances/info.js
@@ -0,0 +1,53 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import Ember from 'ember';
+import AbstractRoute from '../abstract';
+
+export default AbstractRoute.extend({
+  model(params, transition) {
+    var componentName = params.component_name;
+    transition.send('updateBreadcrumbs', params.appid, params.service, componentName);
+    return Ember.RSVP.hash({
+      appId: params.appid,
+      serviceName: params.service,
+      componentName: componentName,
+      instances: this.store.query('yarn-component-instance', {appId: params.appid}).then(function(instances) {
+        if (instances && instances.filterBy('component', componentName)) {
+          return instances.filterBy('component', componentName);
+        }
+        return [];
+      }, function() {
+        return [];
+      }),
+      metrics: this.store.query('yarn-service-component', {appId: params.appid}).then(function(components) {
+        if (components && components.findBy('name', componentName)) {
+          return components.findBy('name', componentName).get('metrics');
+        }
+        return null;
+      }, function() {
+        return null;
+      })
+    });
+  },
+
+  unloadAll() {
+    this.store.unloadAll('yarn-service-component');
+    this.store.unloadAll('yarn-component-instance');
+  }
+});

http://git-wip-us.apache.org/repos/asf/hadoop/blob/636cbbad/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/serializers/yarn-component-instance.js
----------------------------------------------------------------------
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/serializers/yarn-component-instance.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/serializers/yarn-component-instance.js
new file mode 100644
index 0000000..82eb273
--- /dev/null
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/serializers/yarn-component-instance.js
@@ -0,0 +1,72 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import DS from 'ember-data';
+
+export default DS.JSONAPISerializer.extend({
+  internalNormalizeSingleResponse(store, primaryModelClass, payload) {
+    var info = payload.info;
+
+    var fixedPayload = {
+      id: 'yarn_component_instance_' + payload.id,
+      type: primaryModelClass.modelName,
+      attributes: {
+        containerId: payload.id,
+        component: info.COMPONENT_NAME,
+        instanceName: info.COMPONENT_NAME + '_' + payload.instanceId,
+        state: info.STATE,
+        createdTimestamp: payload.createdtime,
+        startedTimestamp: info.LAUNCH_TIME,
+        host: info.HOSTNAME,
+        node: info.BARE_HOST,
+        hostUrl: 'N/A',
+        ipAddr: info.IP,
+        exitStatusCode: info.EXIT_STATUS_CODE
+      }
+    };
+
+    return fixedPayload;
+  },
+
+  normalizeArrayResponse(store, primaryModelClass, payload/*, id, requestType*/) {
+    var normalizedResponse = {data: []};
+    var instanceUid = {};
+
+    if (payload && Array.isArray(payload)) {
+      this.sortPayloadByCreatedTimeAscending(payload);
+
+      payload.forEach(function(container) {
+        let componentName = container.info.COMPONENT_NAME;
+        if (!instanceUid[componentName]) {
+          instanceUid[componentName] = 0;
+        }
+        container.instanceId = ++instanceUid[componentName];
+        var pl = this.internalNormalizeSingleResponse(store, primaryModelClass, container);
+        normalizedResponse.data.push(pl);
+      }.bind(this));
+    }
+
+    return normalizedResponse;
+  },
+
+  sortPayloadByCreatedTimeAscending(payload) {
+    payload.sort(function(inst1, inst2) {
+      return inst1.createdtime - inst2.createdtime;
+    });
+  }
+});

http://git-wip-us.apache.org/repos/asf/hadoop/blob/636cbbad/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/serializers/yarn-service-component.js
----------------------------------------------------------------------
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/serializers/yarn-service-component.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/serializers/yarn-service-component.js
new file mode 100644
index 0000000..b0261fc
--- /dev/null
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/serializers/yarn-service-component.js
@@ -0,0 +1,77 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import DS from 'ember-data';
+import Ember from 'ember';
+
+export default DS.JSONAPISerializer.extend({
+  internalNormalizeSingleResponse(store, primaryModelClass, payload) {
+    var info = payload.info;
+    var configs = payload.configs;
+    var metrics = payload.metrics;
+    var newConfigs = Ember.A();
+    var newMetrics = Ember.Object.create();
+
+    if (configs) {
+      for (let conf in configs) {
+        let confObj = Ember.Object.create({
+          name: conf,
+          value: configs[conf] || 'N/A'
+        });
+        newConfigs.push(confObj);
+      }
+    }
+
+    if (metrics) {
+      metrics.forEach(function(metric) {
+        let val = metric.values[Object.keys(metric.values)[0]];
+        newMetrics.set(metric.id, ((val !== undefined)? val : 'N/A'));
+      });
+    }
+
+    var fixedPayload = {
+      id: 'yarn_service_component_' + payload.id,
+      type: primaryModelClass.modelName,
+      attributes: {
+        name: payload.id,
+        vcores: info.RESOURCE_CPU,
+        memory: info.RESOURCE_MEMORY,
+        priority: 'N/A',
+        instances: 'N/A',
+        createdTimestamp: payload.createdtime,
+        configs: newConfigs,
+        metrics: newMetrics
+      }
+    };
+
+    return fixedPayload;
+  },
+
+  normalizeArrayResponse(store, primaryModelClass, payload/*, id, requestType*/) {
+    var normalizedResponse = {data: []};
+
+    if (payload && Array.isArray(payload)) {
+      payload.forEach(function(component) {
+        var pl = this.internalNormalizeSingleResponse(store, primaryModelClass, component);
+        normalizedResponse.data.push(pl);
+      }.bind(this));
+    }
+
+    return normalizedResponse;
+  }
+});

http://git-wip-us.apache.org/repos/asf/hadoop/blob/636cbbad/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/serializers/yarn-service-info.js
----------------------------------------------------------------------
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/serializers/yarn-service-info.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/serializers/yarn-service-info.js
new file mode 100644
index 0000000..d3ee93e
--- /dev/null
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/serializers/yarn-service-info.js
@@ -0,0 +1,87 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import DS from 'ember-data';
+import Ember from 'ember';
+
+export default DS.JSONAPISerializer.extend({
+  internalNormalizeSingleResponse(store, primaryModelClass, payload) {
+    var info = payload.info;
+    var configs = payload.configs;
+    var quicklinks = info.QUICK_LINKS;
+    var metrics = payload.metrics;
+    var newConfigs = Ember.A();
+    var newQuicklinks = Ember.A();
+    var newMetrics = Ember.Object.create();
+
+    if (configs) {
+      for (let conf in configs) {
+        let confObj = Ember.Object.create({
+          name: conf,
+          value: configs[conf] || 'N/A'
+        });
+        newConfigs.push(confObj);
+      }
+    }
+
+    if (quicklinks) {
+      for (let link in quicklinks) {
+        let linkObj = Ember.Object.create({
+          name: link,
+          value: quicklinks[link] || 'N/A'
+        });
+        newQuicklinks.push(linkObj);
+      }
+    }
+
+    if (metrics) {
+      metrics.forEach(function(metric) {
+        let val = metric.values[Object.keys(metric.values)[0]];
+        newMetrics.set(metric.id, ((val !== undefined)? val : 'N/A'));
+      });
+    }
+
+    var fixedPayload = {
+      id: 'yarn_service_info_' + payload.id,
+      type: primaryModelClass.modelName,
+      attributes: {
+        name: info.NAME,
+        appId: payload.id,
+        state: info.STATE,
+        createdTimestamp: payload.createdtime,
+        launchTimestamp: info.LAUNCH_TIME,
+        quicklinks: newQuicklinks,
+        configs: newConfigs,
+        metrics: newMetrics
+      }
+    };
+
+    return fixedPayload;
+  },
+
+  normalizeSingleResponse(store, primaryModelClass, payload/*, id, requestType*/) {
+    var normalizedResponse = {data: []};
+
+    if (payload && payload[0]) {
+      var pl = this.internalNormalizeSingleResponse(store, primaryModelClass, payload[0]);
+      normalizedResponse.data = pl;
+    }
+
+    return normalizedResponse;
+  }
+});

http://git-wip-us.apache.org/repos/asf/hadoop/blob/636cbbad/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/styles/app.css
----------------------------------------------------------------------
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/styles/app.css b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/styles/app.css
index d246f2d..d4465db 100644
--- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/styles/app.css
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/styles/app.css
@@ -487,7 +487,7 @@ table.table-custom-action > thead > tr > th:last-of-type, table.table-custom-act
 
 table.table-custom-bordered {
   border: 1px solid #ddd !important;
-  border-radius: 3px !important;
+  border-radius: 4px !important;
 }
 
 table.table-custom-bordered > thead > tr > th, table.table-custom-bordered > tbody > tr > td {
@@ -499,6 +499,18 @@ table.table-custom-striped > thead > tr, .table-custom-striped > tbody > tr:nth-
   background-color: #f9f9f9 !important;
 }
 
+table.table-custom-header > thead > tr > th {
+  background-color: #f5f5f5 !important;
+}
+
+table.table-radius-none {
+  border-radius: 0 !important;
+}
+
+table.table-border-none {
+  border: none !important;
+}
+
 .deploy-service label.required:after, .deploy-service-modal label.required:after {
   content: '*';
   color: #d9534f;

http://git-wip-us.apache.org/repos/asf/hadoop/blob/636cbbad/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/confirm-dialog.hbs
----------------------------------------------------------------------
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/confirm-dialog.hbs b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/confirm-dialog.hbs
new file mode 100644
index 0000000..b3bc49a
--- /dev/null
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/confirm-dialog.hbs
@@ -0,0 +1,37 @@
+{{!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+}}
+
+<div class="modal fade" tabindex="-1" role="dialog" id="{{dialogId}}">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content" style="width: 500px;">
+      <div class="modal-header">
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+        <h3 class="modal-title">{{title}}</h3>
+      </div>
+      <div class="modal-body">
+        {{message}}
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-default" data-dismiss="modal">No</button>
+        <button type="button" class="btn btn-primary" {{action "yesConfirmed"}}>Yes</button>
+      </div>
+    </div>
+  </div>
+</div>

http://git-wip-us.apache.org/repos/asf/hadoop/blob/636cbbad/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/metrics-table.hbs
----------------------------------------------------------------------
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/metrics-table.hbs b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/metrics-table.hbs
new file mode 100644
index 0000000..6e4e990
--- /dev/null
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/metrics-table.hbs
@@ -0,0 +1,82 @@
+{{!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+}}
+
+{{#if metrics}}
+  <div class="row">
+    <div class="panel panel-default">
+      <div class="panel-heading">
+        <div class="panel-title">{{type}} Metrics: Success Information</div>
+      </div>
+      <div class="">
+        <table class="table table-hover table-custom-bordered table-custom-stripped table-radius-none table-border-none">
+          <thead>
+            <tr>
+              <th>Desired Containers</th>
+              <th>Running Containers</th>
+              <th>Completed Containers</th>
+              <th>Pending Containers</th>
+              <th>Surplus Containers</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>{{metrics.ContainersDesired}}</td>
+              <td>{{metrics.ContainersRunning}}</td>
+              <td>{{metrics.ContainersCompleted}}</td>
+              <td>{{metrics.ContainersPending}}</td>
+              <td>{{metrics.SurplusContainers}}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+  <div class="row">
+    <div class="panel panel-default">
+      <div class="panel-heading">
+        <div class="panel-title">{{type}} Metrics: Failure Information</div>
+      </div>
+      <div class="">
+        <table class="table table-hover table-custom-bordered table-custom-stripped table-radius-none table-border-none">
+          <thead>
+            <tr>
+              <th>Failed Containers</th>
+              <th>Containers Failed Since Last Threshold</th>
+              <th>Preempted Containers</th>
+              <th>Pending Anti-Affinity Containers</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>{{metrics.ContainersFailed}}</td>
+              <td>{{metrics.FailedSinceLastThreshold}}</td>
+              <td>{{metrics.ContainersPreempted}}</td>
+              <td>{{metrics.PendingAAContainers}}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+{{else}}
+  <div class="row">
+    <div class="panel panel-default">
+      <h4 class="text-center">No {{type}} metrics available!</h4>
+    </div>
+  </div>
+{{/if}}

http://git-wip-us.apache.org/repos/asf/hadoop/blob/636cbbad/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-app.hbs
----------------------------------------------------------------------
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-app.hbs b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-app.hbs
index 2fb5ab3..570011c 100644
--- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-app.hbs
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-app.hbs
@@ -42,6 +42,14 @@
               {{#link-to 'yarn-app.charts' tagName="li" class=(if (eq target.currentPath 'yarn-app.charts') "active")}}
                 {{#link-to 'yarn-app.charts' appId (query-params service=serviceName)}}Resource Usage{{/link-to}}
               {{/link-to}}
+              {{#if serviceName}}
+                {{#link-to 'yarn-app.components' tagName="li" class=(if (eq target.currentPath 'yarn-app.components') "active")}}
+                  {{#link-to 'yarn-app.components' appId (query-params service=serviceName)}}Components{{/link-to}}
+                {{/link-to}}
+                {{#link-to 'yarn-app.configs' tagName="li" class=(if (eq target.currentPath 'yarn-app.configs') "active")}}
+                  {{#link-to 'yarn-app.configs' appId (query-params service=serviceName)}}Configurations &amp; Metrics{{/link-to}}
+                {{/link-to}}
+              {{/if}}
             </ul>
           </ul>
         </div>

http://git-wip-us.apache.org/repos/asf/hadoop/blob/636cbbad/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-app/components.hbs
----------------------------------------------------------------------
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-app/components.hbs b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-app/components.hbs
new file mode 100644
index 0000000..39e6257
--- /dev/null
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-app/components.hbs
@@ -0,0 +1,23 @@
+{{!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+}}
+
+<div class="row">
+  <div class="col-md-12">
+    {{em-table columns=tableColumns rows=model.components}}
+  </div>
+</div>

http://git-wip-us.apache.org/repos/asf/hadoop/blob/636cbbad/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-app/configs.hbs
----------------------------------------------------------------------
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-app/configs.hbs b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-app/configs.hbs
new file mode 100644
index 0000000..ae1e603
--- /dev/null
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-app/configs.hbs
@@ -0,0 +1,57 @@
+{{!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+}}
+
+<div class="col-md-12">
+  {{metrics-table metrics=model.metrics type="Service"}}
+</div>
+
+<div class="row">
+  {{#if model.configs}}
+    <div class="col-md-12">
+      <div class="panel panel-default">
+        <div class="panel-heading">
+          <div class="panel-title">Service Configurations</div>
+        </div>
+        <div class="">
+          <table class="table table-hover table-custom-bordered table-custom-stripped table-radius-none table-border-none">
+            <thead>
+              <tr>
+                <th>Name</th>
+                <th>Value</th>
+              </tr>
+            </thead>
+            <tbody>
+              {{#each model.configs as |config|}}
+                <tr>
+                  <td>{{config.name}}</td>
+                  <td>{{config.value}}</td>
+                </tr>
+              {{/each}}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  {{else}}
+    <div class="col-md-12">
+      <div class="panel panel-default">
+        <h4 class="text-center">No service configurations available!</h4>
+      </div>
+    </div>
+  {{/if}}
+</div>


---------------------------------------------------------------------
To unsubscribe, e-mail: common-commits-unsubscribe@hadoop.apache.org
For additional commands, e-mail: common-commits-help@hadoop.apache.org