AMBARI-736. Initial work on Cluster Management pages. (yusaku)

git-svn-id: https://svn.apache.org/repos/asf/incubator/ambari/branches/AMBARI-666@1384960 13f79535-47bb-0310-9956-ffa450edef68

AMBARI-666-CHANGES.txt

@@ -12,6 +12,8 @@ AMBARI-666 branch (unreleased changes)
 
   NEW FEATURES
 
+  AMBARI-736. Initial work on Cluster Management pages. (yusaku)
+
   AMBARI-733. Add Jersey Resource for BootStrapping and JAXB elements for API
   entities. (mahadev)
 

ambari-web/app/controllers.js

@@ -25,4 +25,8 @@ require('controllers/installer');
 require('controllers/installer/step1');
 require('controllers/installer/step2');
 require('controllers/installer/step3');
-require('controllers/installer/step7');
+require('controllers/installer/step7');
+require('controllers/main');
+require('controllers/main/service');
+require('controllers/main/service/item');
+require('controllers/main/alert');

ambari-web/app/controllers/main.js

@@ -0,0 +1,21 @@
+/**
+ * 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.
+ */
+
+App.MainController = Em.Controller.extend({
+  name: 'mainController'
+})

ambari-web/app/controllers/main/alert.js

@@ -0,0 +1,22 @@
+/**
+ * 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.
+ */
+
+App.MainAlertController = Em.ArrayController.extend({
+  name:'mainAlertController',
+  content: App.Alert.find()
+})

ambari-web/app/controllers/main/service.js

@@ -0,0 +1,22 @@
+/**
+ * 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.
+ */
+
+App.MainServiceController = Em.ArrayController.extend({
+  name:'mainServiceController',
+  content: App.Service.find()
+})

ambari-web/app/controllers/main/service/item.js

@@ -0,0 +1,22 @@
+/**
+ * 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.
+ */
+
+App.MainServiceItemController = Em.Controller.extend({
+  name: 'mainServiceItemController',
+  content: null
+})

ambari-web/app/models.js

@@ -20,4 +20,6 @@
 // load all models here
 
 require('models/cluster');
-require('models/serviceConfig')
+require('models/serviceConfig');
+require('models/service');
+require('models/alert');

ambari-web/app/models/alert.js

@@ -0,0 +1,47 @@
+/**
+ * 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.
+ */
+
+var App = require('app');
+
+App.Alert = DS.Model.extend({
+  title: DS.attr('string'),
+  service: DS.belongsTo('App.Service'),
+  date: DS.attr('date'),
+  status: DS.attr('string'),
+  message: DS.attr('string')
+});
+
+App.Alert.FIXTURES = [
+  {
+    id: 1,
+    title: 'Corrupt/Missing Block',
+    service_id: 1,
+    date: 'August 29, 2012 17:00',
+    status: 'all bad',
+    message: 'message'
+  },
+
+  {
+    id: 2,
+    title: 'Corrupt/Missing Block',
+    service_id: 2,
+    date: 'August 29, 2012 17:00',
+    status: 'all bad',
+    message: 'message'
+  }
+];

ambari-web/app/models/service.js

@@ -0,0 +1,130 @@
+/**
+ * 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.
+ */
+
+
+var App = require('app');
+
+/*App.User = Em.Object.extend({
+ username: null
+ });*/
+
+App.ServiceModel = Em.Object.extend({
+  name:null,
+  components:[]
+});
+
+// uncomment if column names are camelized in JSON (or fixture), rather than _ separated
+/*
+ DS.Model.reopen({
+ namingConvention: {
+ keyToJSONKey: function(key) {
+ return key;
+ },
+
+ foreignKey: function(key) {
+ return key;
+ }
+ }
+ });
+ */
+
+App.Component = DS.Model.extend({
+  componentName:DS.attr('string'),
+  service:DS.belongsTo('App.Service'),
+  host:DS.belongsTo('App.Host')
+});
+
+App.Component.FIXTURES = [
+  {
+    id:1,
+    component_name:'NameNode',
+    service_id:1,
+    host_id:1
+  },
+  {
+    id:2,
+    component_name:'SNameNode',
+    service_id:1,
+    host_id:2
+  },
+  {
+    id:3,
+    component_name:'DataNode',
+    service_id:1,
+    host_id:2
+  },
+  {
+    id:4,
+    component_name:'100Tracker',
+    service_id:2,
+    host_id:4
+  },
+  {
+    id:5,
+    component_name:'jobTaskTracker',
+    service_id:2,
+    host_id:4
+  }
+];
+// COMPONENTS:
+//- HbaseMaster, 100 Region Servers
+//Zookeeper - 3 Zookeeper Servers
+//Oozie - Oozie Master
+//Hive - Hive Metastore
+
+App.Service = DS.Model.extend({
+  serviceName:DS.attr('string'),
+  label:DS.attr('string'),
+  components:DS.hasMany('App.Component')
+});
+
+App.Service.FIXTURES = [
+  {
+    id:1,
+    service_name:'hdfs',
+    label:'HDFS',
+    components:[1, 2, 3]
+  },
+  {
+    id:2,
+    service_name:'mapreduce',
+    label:'MapReduce',
+    components:[4, 5]
+  },
+  {
+    id:3,
+    service_name:'hbase',
+    label:'HBase'
+  },
+  {
+    id:4,
+    service_name:'zookeeper',
+    label:'Zookeeper'
+  },
+  {
+    id:5,
+    service_name:'oozie',
+    label:'Oozie'
+  },
+  {
+    id:6,
+    service_name:'hive',
+    label:'Hive'
+  }
+];
+

ambari-web/app/routes/main.js

@@ -42,6 +42,67 @@ module.exports = Em.Route.extend({
 
   connectOutlets: function (router, context) {
     router.get('applicationController').connectOutlet('main');
+  },
+
+  charts:Em.Route.extend({
+    route:'/charts',
+    connectOutlets:function (router, context) {
+      router.get('mainController').connectOutlet('mainCharts');
+    }
+  }),
+
+  hosts:Em.Route.extend({
+    route:'/hosts',
+    connectOutlets:function (router, context) {
+      router.get('mainController').connectOutlet('mainHosts');
+    }
+  }),
+
+  admin:Em.Route.extend({
+    route:'/admin',
+    connectOutlets:function (router, context) {
+      router.get('mainController').connectOutlet('mainAdmin');
+    }
+  }),
+
+  dashboard:Em.Route.extend({
+    route:'/dashboard',
+    connectOutlets:function (router, context) {
+      router.get('mainController').connectOutlet('mainDashboard');
+    }
+  }),
+
+  service:Em.Route.extend({
+    route:'/services',
+    enter:function (router) {
+      Ember.run.next(function () {
+        var service = router.get('mainServiceItemController.content');
+        if (!service) {
+          service = App.Service.find(1); // getting the first service to display
+        }
+        router.transitionTo('advanced', service);
+      });
+    },
+
+    connectOutlets:function (router, context) {
+      router.get('mainController').connectOutlet('mainService');
+    },
+
+    advanced:Em.Route.extend({
+      route:'/:name',
+      connectOutlets:function (router, service) {
+        router.get('mainServiceController').connectOutlet('mainServiceItem', service);
+      }
+    }),
+
+    showService: Em.Router.transitionTo('advanced')
+  }),
+
+  navigate:function (router, event) {
+    var parent = event.view._parentView;
+    parent.deactivateChildViews();
+    event.view.set('active', "active");
+    router.transitionTo(event.context);
   }
 
   // TODO: create new routes here

ambari-web/app/styles/app.css

@@ -18,70 +18,198 @@
 
 
 .navbar {
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
 
 .navbar .brand {
-  color: #666666;
-  display: block;
-  font-size: 16px;
-  font-weight: normal;
-  line-height: 1;
-  margin-left: 0;
-  margin-right: 40px;
-  margin-top: 3px;
-  padding: 14px 10px;
+    color: #666666;
+    display: block;
+    font-size: 16px;
+    font-weight: normal;
+    line-height: 1;
+    margin-left: 0;
+    margin-right: 40px;
+    margin-top: 3px;
+    padding: 14px 10px;
 }
 
 .navbar-inner {
-  background: linear-gradient(#FAFAFA, #EAEAEA) repeat scroll 0 0 transparent;
-  background: -moz-linear-gradient(#FAFAFA, #EAEAEA) repeat scroll 0 0 transparent;
-  background: -webkit-linear-gradient(#FAFAFA, #EAEAEA) repeat scroll 0 0 transparent;
-  border-radius: 0;
-  border: 1px solid #bbb;
-  border-width: 0 0 1px 0;
+    background: linear-gradient(#FAFAFA, #EAEAEA) repeat scroll 0 0 transparent;
+    background: -moz-linear-gradient(#FAFAFA, #EAEAEA) repeat scroll 0 0 transparent;
+    background: -webkit-linear-gradient(#FAFAFA, #EAEAEA) repeat scroll 0 0 transparent;
+    border-radius: 0;
+    border: 1px solid #bbb;
+    border-width: 0 0 1px 0;
 }
 
 .navbar .nav {
-  float: none;
-  overflow: hidden;
+    float: none;
+    overflow: hidden;
 }
 
 .navbar .nav .active > a, .navbar .nav .active > a:hover {
-  background-color: #999999;
-  color: #FFFFFF;
-  text-decoration: none;
+    background-color: #999999;
+    color: #FFFFFF;
+    text-decoration: none;
 }
 
 .navbar .nav > li > a {
-  border-radius: 8px;
-  -webkit-border-radius: 8px;
-  -moz-border-radius: 8px;
-  font-size: 13px;
-  font-weight: bold;
-  line-height: 19px;
-  margin: 6px 10px 6px 0;
-  padding: 8px 14px;
-  text-decoration: none;
-  text-shadow: none;
+    border-radius: 8px;
+    -webkit-border-radius: 8px;
+    -moz-border-radius: 8px;
+    font-size: 13px;
+    font-weight: bold;
+    line-height: 19px;
+    margin: 6px 10px 6px 0;
+    padding: 8px 14px;
+    text-decoration: none;
+    text-shadow: none;
 }
 
 .navbar .nav > li > a:hover {
-  background-color: transparent;
-  color: #999999;
-  text-decoration: none;
+    background-color: transparent;
+    color: #999999;
+    text-decoration: none;
 }
 
 .navbar .brand {
-  margin-right: 40px;
+    margin-right: 40px;
 }
 
 .navbar #logo {
-  float: left;
-  padding-top: 7px;
-  height: 36px;
+    float: left;
+    padding-top: 7px;
+    height: 36px;
 }
 
 .navbar .nav > li.right {
-  float: right;
+    float: right;
 }
+
+/*Box styles*/
+.box {
+    border: 1px solid #5fa3c3;
+    margin-bottom: 20px;
+}
+.box-header,
+.box-footer {
+    padding: 10px;
+    background: #dedede;
+}
+.box-footer hr {
+    margin: 0px;
+}
+.box-header:after,
+.box-footer:after {
+    content: "";
+    display: table;
+    clear: both;
+}
+.box-header .btn-group {
+    float: right;
+}
+.box-header h4 {
+    float: left;
+}
+
+.alerts {
+    margin: 0px;
+}
+.alerts li {
+    border-bottom: 1px solid #b7b9bb;
+    list-style: none;
+    padding: 5px 10px 5px 43px;
+}
+.alerts li.status-ok {
+    background: url("../img/status-ok.jpg") no-repeat 14px 9px;
+}
+.alerts li.status-corrupt {
+    background: url("../img/status-corrupt.jpg") no-repeat 14px 9px;
+}
+.alerts li .date-time {
+    float: right;
+}
+.go-to {
+    float: right;
+    background: url("../img/arrow-right.png") no-repeat right center;
+    padding-right: 40px;
+    margin-top: 20px;
+}
+/*Services*/
+.service-summary {
+    background: #F6FAFD;
+}
+.service-block {
+    padding: 10px;
+}
+.service-configuration {
+    padding: 10px;
+}
+.service-summary .service-block.span8{
+    margin-left: 0;
+    border-right: 1px solid #5fa3c3;
+}
+.service-summary .service-block.span3{
+    padding-left: 0;
+}
+.service-summary .service-content{
+    padding: 5px 0 0 10px;
+}
+.service-summary h5{
+    color: #0088CC;
+    font-size: 14px;
+}
+.service-summary .service-links{
+    padding: 5px 0 10px 0;
+}
+.service-summary .service-content .service-links{
+    padding: 5px 0;
+}
+.service-configuration .dl-horizontal dt{
+    width: 90px;
+    line-height: 19px;
+}
+.service-configuration .dl-horizontal dd{
+    margin-left: 100px;
+    line-height: 19px;
+}
+.service-button {
+    text-align: right;
+    margin-bottom: 5px;
+}
+.add-service-button {
+    position: relative;
+}
+.add-service-button a{
+    position: absolute;
+    right: 0;
+    top: -55px;
+}
+/*End Services*/
+
+/*Hosts*/
+#hosts .box-header .btn-group {
+    float: left;
+}
+#hosts .box-header .btn.decommission{
+    margin-left: 5px;
+}
+#hosts .box-header .btn.add-host-button{
+    float: right;
+}
+#hosts .table{
+    margin-bottom: 0;
+}
+#hosts .table thead{
+    background: #EDF5FC;
+}
+#hosts .nav-pills li.disabled{
+    display: block;
+    margin: 2px 0;
+    padding: 8px 12px;
+    line-height: 14px;
+}
+#hosts .box-footer .footer-pagination{
+    float: right;
+}
+/*End Hosts*/

ambari-web/app/templates.js

@@ -22,6 +22,13 @@
 require('templates/application');
 require('templates/login');
 require('templates/main');
+require('templates/main/admin');
+require('templates/main/charts');
+require('templates/main/dashboard');
+require('templates/main/hosts');
+require('templates/main/menu');
+require('templates/main/service');
+require('templates/main/service/item');
 require('templates/installer');
 require('templates/installer/step1');
 require('templates/installer/step2');

ambari-web/app/templates/main.hbs

@@ -17,4 +17,6 @@
 -->
 
         <!--Monitoring and managing services -->
-<h2>Main Application</h2>
+<h2>Main Application</h2>
+{{view App.MainMenuView }}
+{{outlet}}

ambari-web/app/templates/main/admin.hbs

@@ -0,0 +1,20 @@
+<!--
+* 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.
+-->
+
+<h5>Admin</h5>
+<div>Here we are</div>

ambari-web/app/templates/main/charts.hbs

@@ -0,0 +1,20 @@
+<!--
+* 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.
+-->
+
+<h5>Charts</h5>
+<div>Here we are</div>

ambari-web/app/templates/main/dashboard.hbs

@@ -0,0 +1,123 @@
+<!--
+* 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="span6">
+		<div class="row">
+			<div class="span6">
+				<div class="box">
+					<div class="box-header">
+						<h4>Summary</h4>
+					</div>
+					<div id="myCarousel" class="carousel">
+						<div class="carousel-inner">
+							<div class="active item">
+								Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tempor facilisis nisl, a tempor mi dictum vitae. In sed elit erat. Fusce lorem diam, lacinia in placerat vitae, posuere fringilla sem. Quisque dignissim, ligula tincidunt rhoncus gravida, sem mauris pharetra justo, at consectetur orci ante eu elit. Maecenas sem enim, scelerisque eget consequat vel, ornare vitae velit. Nullam mattis neque eu ipsum tincidunt pellentesque. Morbi sed mi ac ligula rhoncus auctor ac a enim. Etiam commodo sagittis volutpat. Mauris posuere rhoncus consectetur. Pellentesque quis sodales dui. Donec porta ipsum at nunc lacinia dictum. Cras faucibus ullamcorper sapien, sed egestas tellus interdum a. Suspendisse scelerisque pulvinar orci, vitae auctor tellus fermentum sit amet.
+							</div>
+							<div class="item">
+								Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tempor facilisis nisl, a tempor mi dictum vitae. In sed elit erat. Fusce lorem diam, lacinia in placerat vitae, posuere fringilla sem. Quisque dignissim, ligula tincidunt rhoncus gravida, sem mauris pharetra justo, at consectetur orci ante eu elit. Maecenas sem enim, scelerisque eget consequat vel, ornare vitae velit. Nullam mattis neque eu ipsum tincidunt pellentesque. Morbi sed mi ac ligula rhoncus auctor ac a enim. Etiam commodo sagittis volutpat. Mauris posuere rhoncus consectetur. Pellentesque quis sodales dui. Donec porta ipsum at nunc lacinia dictum. Cras faucibus ullamcorper sapien, sed egestas tellus interdum a. Suspendisse scelerisque pulvinar orci, vitae auctor tellus fermentum sit amet.
+								Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tempor facilisis nisl, a tempor mi dictum vitae. In sed elit erat. Fusce lorem diam, lacinia in placerat vitae, posuere fringilla sem. Quisque dignissim, ligula tincidunt rhoncus gravida, sem mauris pharetra justo, at consectetur orci ante eu elit. Maecenas sem enim,
+							</div>
+							<div class="item">
+								Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tempor facilisis nisl, a tempor mi dictum vitae. In sed elit erat. Fusce lorem diam, lacinia in placerat vitae, posuere fringilla sem. Quisque dignissim, ligula tincidunt rhoncus gravida, sem mauris pharetra justo, at consectetur orci ante eu elit. Maecenas sem enim, scelerisque eget consequat vel, ornare vitae velit. Nullam mattis neque eu ipsum tincidunt pellentesque. Morbi sed mi ac ligula rhoncus auctor ac a enim. Etiam commodo sagittis volutpat. Mauris posuere rhoncus consectetur. Pellentesque quis sodales dui. Donec porta ipsum at nunc lacinia dictum. Cras faucibus ullamcorper sapien, sed egestas tellus interdum a. Suspendisse scelerisque pulvinar orci, vitae auctor tellus fermentum sit amet.
+								Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tempor facilisis nisl, a tempor mi dictum vitae. In sed elit erat. Fusce lorem diam, lacinia in placerat vitae, posuere fringilla sem. Quisque dignissim,
+							</div>
+						</div>
+						<a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
+						<a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
+					</div>
+					<div class="box-footer"></div>
+				</div>
+			</div>
+		</div>
+		<div class="row">
+			<div class="span6">
+				<div class="box">
+					<div class="box-header">
+						<h4>Services</h4>
+					</div>
+					<ul>
+						{{#each view.services}}
+							<li><a href="#">{{label}}</a></li>
+						{{/each}}
+					</ul>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="span6">
+		<div class="box">
+			<div class="box-header">
+				<h4>Alerts</h4>
+				<div class="btn-group">
+					<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">HDFS <span class="caret"></span></button>
+					<ul class="dropdown-menu">
+						<li><a href="#">HDFS</a></li>
+						<li><a href="#">MapReduce</a></li>
+						<li><a href="#">HBase</a></li>
+						<li><a href="#">Zookeeper</a></li>
+						<li><a href="#">Oozie</a></li>
+						<li><a href="#">Hive</a></li>
+					</ul>
+				</div>
+			</div>
+			<ul class="alerts">
+				<li class="status-ok">
+					<p class="title">Corrupt/Missing Blocks <a href="#">HDFS</a><span class="date-time">Sep 11, 2012 14:22</span></p>
+					<p class="message">OK: corrupt_blocks: <0>, missing_blocks: <0>, total_blocks: <282></p>
+				</li>
+				<li class="status-ok">
+					<p class="title">Corrupt/Missing Blocks <a href="#">HDFS</a><span class="date-time">Sep 11, 2012 14:22</span></p>
+					<p class="message">OK: corrupt_blocks: <0>, missing_blocks: <0>, total_blocks: <282></p>
+				</li>
+				<li class="status-ok">
+					<p class="title">Corrupt/Missing Blocks <a href="#">HDFS</a><span class="date-time">Sep 11, 2012 14:22</span></p>
+					<p class="message">OK: corrupt_blocks: <0>, missing_blocks: <0>, total_blocks: <282></p>
+				</li>
+				<li class="status-corrupt">
+					<p class="title">Corrupt/Missing Blocks <a href="#">HDFS</a><span class="date-time">Sep 11, 2012 14:22</span></p>
+					<p class="message">OK: corrupt_blocks: <0>, missing_blocks: <0>, total_blocks: <282></p>
+				</li>
+				<li class="status-ok">
+					<p class="title">Corrupt/Missing Blocks <a href="#">HDFS</a><span class="date-time">Sep 11, 2012 14:22</span></p>
+					<p class="message">OK: corrupt_blocks: <0>, missing_blocks: <0>, total_blocks: <282></p>
+				</li>
+				<li class="status-corrupt">
+					<p class="title">Corrupt/Missing Blocks <a href="#">HDFS</a><span class="date-time">Sep 11, 2012 14:22</span></p>
+					<p class="message">OK: corrupt_blocks: <0>, missing_blocks: <0>, total_blocks: <282></p>
+				</li>
+				<li class="status-corrupt">
+					<p class="title">Corrupt/Missing Blocks <a href="#">HDFS</a><span class="date-time">Sep 11, 2012 14:22</span></p>
+					<p class="message">OK: corrupt_blocks: <0>, missing_blocks: <0>, total_blocks: <282></p>
+				</li>
+				<li class="status-ok">
+					<p class="title">Corrupt/Missing Blocks <a href="#">HDFS</a><span class="date-time">Sep 11, 2012 14:22</span></p>
+					<p class="message">OK: corrupt_blocks: <0>, missing_blocks: <0>, total_blocks: <282></p>
+				</li>
+				<li class="status-corrupt">
+					<p class="title">Corrupt/Missing Blocks <a href="#">HDFS</a><span class="date-time">Sep 11, 2012 14:22</span></p>
+					<p class="message">OK: corrupt_blocks: <0>, missing_blocks: <0>, total_blocks: <282></p>
+				</li>
+			</ul>
+			<div class="box-footer">
+				<hr />
+				<a class="go-to" href="#">Go to Nagios</a>
+			</div>
+		</div>
+	</div>
+</div>

ambari-web/app/templates/main/hosts.hbs

@@ -0,0 +1,148 @@
+<!--
+* 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 id="hosts" class="box">
+    <div class="box-header">
+        <div class="button-section">
+            <div class="btn-group">
+                <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
+                    Rack
+                    <span class="caret"></span>
+                </button>
+                <ul class="dropdown-menu">
+                    <li><a href="#">Rack1</a></li>
+                    <li><a href="#">Rack2</a></li>
+                    <li><a href="#">Rack3</a></li>
+                </ul>
+            </div>
+            <div class="btn-group">
+                <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
+                    Stop
+                    <span class="caret"></span>
+                </button>
+                <ul class="dropdown-menu">
+                    <li><a href="#">1</a></li>
+                    <li><a href="#">2</a></li>
+                </ul>
+            </div>
+            <a class="btn btn-primary decommission" href="#">
+                Decommission
+            </a>
+            <a class="btn btn-primary" href="#">
+                Delete
+            </a>
+            <a class="btn btn-inverse add-host-button" href="#">
+                <i class="icon-plus icon-white"></i>
+                Add New Host
+            </a>
+        </div>
+    </div>
+    <table class="table table-bordered table-striped">
+        <!--<colgroup>-->
+            <!--<col class="span1">-->
+            <!--<col class="span7">-->
+        <!--</colgroup>-->
+        <thead>
+            <tr>
+                <th>
+                    <label class="checkbox">
+                        <input type="checkbox">
+                    </label>
+                </th>
+                <th>Name</th>
+                <th>Rack</th>
+                <th>Services</th>
+                <th>Components</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr>
+                <td>
+                    <label class="checkbox">
+                        <input type="checkbox">
+                    </label>
+                </td>
+                <td>ip-12-12-12-1232.co2.ama.internal</td>
+                <td>Rack1</td>
+                <td>HDFS MapReduce</td>
+                <td>NameNode</td>
+            </tr>
+            <tr>
+                <td>
+                    <label class="checkbox">
+                        <input type="checkbox">
+                    </label>
+                </td>
+                <td>ip-12-12-12-1232.co2.ama.internal</td>
+                <td>Rack1</td>
+                <td>HDFS MapReduce</td>
+                <td>NameNode</td>
+            </tr>
+            <tr>
+                <td>
+                    <label class="checkbox">
+                        <input type="checkbox">
+                    </label>
+                </td>
+                <td>ip-12-12-12-1232.co2.ama.internal</td>
+                <td>Rack1</td>
+                <td>HDFS MapReduce</td>
+                <td>NameNode</td>
+            </tr>
+            <tr>
+                <td>
+                    <label class="checkbox">
+                        <input type="checkbox">
+                    </label>
+                </td>
+                <td>ip-12-12-12-1232.co2.ama.internal</td>
+                <td>Rack1</td>
+                <td>HDFS MapReduce</td>
+                <td>NameNode</td>
+            </tr>
+            <tr>
+                <td>
+                    <label class="checkbox">
+                        <input type="checkbox">
+                    </label>
+                </td>
+                <td>ip-12-12-12-1232.co2.ama.internal</td>
+                <td>Rack1</td>
+                <td>HDFS MapReduce</td>
+                <td>NameNode</td>
+            </tr>
+        </tbody>
+    </table>
+    <div class="box-footer">
+        <hr />
+        <div class="footer-pagination">
+            <ul class="nav nav-pills">
+                <li class="disabled">Show Hosts</li>
+                <li class="dropdown">
+                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">25<b class="caret"></b></a>
+                    <ul class="dropdown-menu">
+                        <li><a href="#">50</a></li>
+                        <li><a href="#">100</a></li>
+                        <li><a href="#">All</a></li>
+                    </ul>
+                </li>
+                <li class="disabled">1-25 of 400</li>
+            </ul>
+        </div>
+    </div>
+</div>

ambari-web/app/templates/main/menu.hbs

@@ -0,0 +1,22 @@
+<!--
+* 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.
+-->
+<ul class="nav nav-tabs">
+	{{#each view.items}}
+	<li {{bindAttr class="active"}} ><a {{action navigate routing }} href="#">{{unbound label}}</a></li>
+	{{/each}}
+</ul>

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

@@ -0,0 +1,20 @@
+<!--
+* 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.
+-->
+
+{{view App.MainServiceMenuView}}
+{{outlet}}

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

@@ -0,0 +1,98 @@
+<!--
+* 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="add-service-button">
+    <a class="btn btn-inverse" href="#">
+        <i class="icon-plus icon-white"></i>
+        Add Service
+    </a>
+</div>
+<div class="service-button">
+    <a class="btn" href="#">
+        <i class="icon-play-circle"></i>
+        Run HDFS Rebalancer
+    </a>
+</div>
+
+<div class="row box service-summary">
+    <div class="span8 service-block">
+        <h4>Service Summary</h4>
+
+        <div class="service-content">
+            {{#each controller.content.components}}
+            <div class="service-links">{{componentName}}: <a href="#">{{host.hostName}}</a></div>
+            {{/each}}
+            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
+            industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
+            scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into
+            electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of
+            Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like
+            Aldus PageMaker including versions of Lorem Ipsum.
+        </div>
+    </div>
+    <div class="span3 service-block">
+        <div class="row">
+            <div class="span3">
+                <h4>Hosts</h4>
+
+                <div class="service-links">
+                    <a href="#">mycompanysite.com</a>
+                    <a href="#">mycompanysite.com</a>
+                    <a href="#">mycompanysite.com</a>
+                </div>
+            </div>
+        </div>
+        <div class="row">
+            <div class="span3">
+                <h4>Links</h4>
+
+                <div class="service-links">
+                    <a href="#">mycompanysite.com</a>
+                    <a href="#">mycompanysite.com</a>
+                    <a href="#">mycompanysite.com</a>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<div class="row">
+    <div class="box">
+        <div class="box-header">
+            <h4>Service-Level Configuration</h4>
+        </div>
+        <div class="service-configuration service-summary">
+            <h5>Summary</h5>
+            <dl class="dl-horizontal">
+                <dt>Hostname:</dt>
+                <dd>ip-12-12-12-1232.cp2</dd>
+                <dt>IP:</dt>
+                <dd>123.123.135.567</dd>
+                <dt>CPU:</dt>
+                <dd>2.2 GHz</dd>
+                <dt>OS:</dt>
+                <dd>type</dd>
+                <dt>Disk:</dt>
+                <dd>total runtime</dd>
+                <dt>Memory:</dt>
+                <dd>total runtime usage</dd>
+                <dt>Agent:</dt>
+                <dd>running</dd>
+            </dl>
+
+        </div>
+    </div>
+</div>

ambari-web/app/views.js

@@ -23,6 +23,14 @@
 require('views/application');
 require('views/login');
 require('views/main');
+require('views/main/menu');
+require('views/main/charts');
+require('views/main/hosts');
+require('views/main/admin');
+require('views/main/dashboard');
+require('views/main/service');
+require('views/main/service/menu');
+require('views/main/service/item');
 require('views/installer');
 require('views/installer/step1');
 require('views/installer/step2');

ambari-web/app/views/main/admin.js

@@ -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.
+ */
+
+var App = require('app');
+
+App.MainAdminView = Em.View.extend({
+    templateName: require('templates/main/admin')
+});

ambari-web/app/views/main/charts.js

@@ -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.
+ */
+
+var App = require('app');
+
+App.MainChartsView = Em.View.extend({
+    templateName: require('templates/main/charts')
+});

ambari-web/app/views/main/dashboard.js

@@ -0,0 +1,26 @@
+/**
+ * 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.
+ */
+
+var App = require('app');
+
+App.MainDashboardView = Em.View.extend({
+  templateName: require('templates/main/dashboard'),
+  services:function(){
+    return App.router.get('mainServiceController.content');
+  }.property('App.router.mainServiceController.content')
+});

ambari-web/app/views/main/hosts.js

@@ -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.
+ */
+
+var App = require('app');
+
+App.MainHostsView = Em.View.extend({
+    templateName: require('templates/main/hosts')
+});

ambari-web/app/views/main/menu.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.
+ */
+
+var App = require('app');
+
+App.MainMenuView = Em.CollectionView.extend({
+  tagName: 'ul',
+  classNames: ["nav", "nav-tabs"],
+  content:[
+    { label:'My Cluster', routing:'cluster'},
+    { label:'Dashboard', routing:'dashboard', active:"active"},
+    { label:'Charts', routing:'charts'},
+    { label:'Services', routing:'service'},
+    { label:'Hosts', routing:'hosts'},
+    { label:'Admin', routing:'admin'}
+  ],
+
+  deactivateChildViews: function() {
+    $.each(this._childViews, function(){
+      this.set('active', "");
+    });
+  },
+
+  itemViewClass: Em.View.extend({
+    classNameBindings: ["active"],
+    active: "",
+    template: Ember.Handlebars.compile('<a {{action navigate view.content.routing }} href="#"> {{unbound view.content.label}}</a>')
+  })
+});

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

@@ -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.
+ */
+
+var App = require('app');
+
+App.MainServiceView = Em.View.extend({
+  templateName:require('templates/main/service')
+});

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

@@ -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.
+ */
+
+var App = require('app');
+
+App.MainServiceItemView = Em.View.extend({
+  templateName: require('templates/main/service/item')
+});

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

@@ -0,0 +1,43 @@
+/**
+ * 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.
+ */
+
+var App = require('app');
+
+App.MainServiceMenuView = Em.CollectionView.extend({
+  content:function(){
+    return App.router.get('mainServiceController.content');
+  }.property('App.router.mainServiceController.content'),
+
+  init: function(){ this._super(); this.activateView(); },
+
+  tagName:'ul',
+  classNames:["nav", "nav-tabs"],
+
+  activateView:function () {
+    var service = App.router.get('mainServiceItemController.content');
+    $.each(this._childViews, function () {
+      this.set('active', (this.get('content.serviceName') == service.get('serviceName') ? "active" : ""));
+    });
+  }.observes("App.router.mainServiceItemController.content"),
+
+  itemViewClass:Em.View.extend({
+    classNameBindings:["active"],
+    active:"",
+    template:Ember.Handlebars.compile('<a {{action showService view.content}} href="#"> {{unbound view.content.label}}</a>')
+  })
+});