AMBARI-917. Update layout and flow for App Browser. (yusaku)

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

AMBARI-666-CHANGES.txt

@@ -344,6 +344,8 @@ AMBARI-666 branch (unreleased changes)
 
   IMPROVEMENTS
 
+  AMBARI-917. Update layout and flow for App Browser. (yusaku)
+
   AMBARI-888. Add more tests for controller implementation. (hitesh)
 
   AMBARI-891. Initial work to refactor the Wizards in Ambari Web. (yusaku)

ambari-web/app/assets/data/hosts/background_operations/bg_operations.json

@@ -0,0 +1,21 @@
+  {
+    "requestId"  : 23 ,
+    "tasks" : [
+    {
+      "taskId": 1,
+      "stageId": 2,
+      "hostname": "x.y.z.com",
+      "role": "NAMENODE",
+      "command": "START",
+      "status": "PENDING"
+    },
+    {
+      "taskId": 2,
+      "stageId": 3,
+      "hostname": "a.b.c.com",
+      "role": "DATANODE",
+      "command": "START",
+      "status": "PENDING"
+    }
+    ]
+}

ambari-web/app/assets/data/hosts/background_operations/logs/task1.json

@@ -0,0 +1,13 @@
+{
+  "taskId": 1,
+  "stageId": 2,
+  "hostname": "x.y.z.com",
+  "role": "NAMENODE",
+  "command": "START",
+  "status": "PENDING",
+  "exitcode": "exitcode",
+  "stderror": "stderror",
+  "stdout": "stdout",
+  "startTime": "",
+  "attemptCount": 8
+}

ambari-web/app/assets/data/hosts/background_operations/logs/task2.json

@@ -0,0 +1,13 @@
+{
+  "taskId": 2,
+  "stageId": 3,
+  "hostname": "a.b.c.com",
+  "role": "DATANODE",
+  "command": "START",
+  "status": "PENDING",
+  "exitcode": "exitcode",
+  "stderror": "stderror",
+  "stdout": "stdout",
+  "startTime": "",
+  "attemptCount": 8
+}

ambari-web/app/assets/data/hosts/background_operations/logs/task3.json

@@ -0,0 +1,13 @@
+{
+  "taskId": 3,
+  "stageId":4,
+  "hostname":"host3.com",
+  "role":"DATANODE",
+  "command":"STOP",
+  "status":"PENDING",
+  "exitcode": "exitcode",
+  "stderror": "stderror",
+  "stdout": "stdout",
+  "startTime": "",
+  "attemptCount": 8
+}

ambari-web/app/controllers.js

@@ -58,11 +58,6 @@ require('controllers/main/charts/horizon_chart');
 require('controllers/main/rack');
 require('controllers/main/apps_controller');
 require('controllers/main/apps/item_controller');
-require('controllers/main/apps/runs_controller');
-require('controllers/main/apps/runs/item_controller');
-require('controllers/main/apps/runs/jobs_controller');
-require('controllers/main/apps/runs/jobs/dag_controller');
-require('controllers/main/apps/runs/jobs/bar_controller');
 require('controllers/wizard/step2_controller');
 require('controllers/wizard/step3_controller');
 require('controllers/wizard/step4_controller');

ambari-web/app/controllers/main/apps/runs/item_controller.js

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

ambari-web/app/controllers/main/apps/runs/jobs/bar_controller.js

@@ -1,29 +0,0 @@
-/**
- * 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.MainAppsRunsJobsBarController = Em.ArrayController.extend({
-  name:'mainAppsRunsJobsBarController',
-  job:null,
-  activeJobId:null,
-  selectJob:function (event) {
-    this.set('job', event.context);
-    this.set('activeJobId', event.context.get('jobId'));
-  }
-})

ambari-web/app/controllers/main/apps/runs/jobs/dag_controller.js

@@ -1,23 +0,0 @@
-/**
- * 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.MainJobsAppsRunsDagController = Em.ArrayController.extend({
-  name:'mainJobsAppsRunsDagController'
-})

ambari-web/app/controllers/main/apps/runs/jobs_controller.js

@@ -1,24 +0,0 @@
-/**
- * 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.MainAppsRunsJobsController = Em.ArrayController.extend({
-  name:'mainAppsRunsJobsController',
-  content: null
-})

ambari-web/app/controllers/main/apps/runs_controller.js

@@ -1,30 +0,0 @@
-/**
- * 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.MainAppsRunsController = Em.ArrayController.extend({
-  name:'mainAppsRunsController',
-  content:null,
-  routeHome:function () {
-    App.router.get('mainAppsController').get('routeHome')();
-  },
-  routeApps:function () {
-    App.router.transitionTo('main.apps');
-  }
-})

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

@@ -20,26 +20,13 @@ var App = require('app');
 
 App.MainAppsController = Em.ArrayController.extend({
   name:'mainAppsController',
-  content:App.App.find(),
+  content:App.Run.find(),
+  apps:App.App.find(),
   routeHome:function () {
     App.router.transitionTo('main.dashboard');
     var view = Ember.View.views['main_menu'];
     $.each(view._childViews, function () {
       this.set('active', this.get('content.routing') == 'dashboard' ? "active" : "");
     });
-  },
-  arrayUnique:function (array) {
-    var result = new Array();
-    var i, j, unique;
-    for (i = 0; i < array.length; i++) {
-      j = 0;
-      unique = true;
-      do {
-        if (array[i] === result[j]) unique = false;
-        j++;
-      } while (j < result.length);
-      if (unique) result.push(array[i]);
-    }
-    return result;
   }
 })

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

@@ -37,15 +37,43 @@ App.MainHostController = Em.ArrayController.extend(App.Pagination, {
   selectedHostsIds: [],
   sortingAsc: true,
   isSort: false,
+  intervalId: false,
+  updateOperationsInterval: 8000,
   sortClass: function(){
     return this.get('sortingAsc')? 'icon-arrow-down' : 'icon-arrow-up';
   }.property('sortingAsc'),
   isDisabled:true,
-  operations: App.BackgroundOperation.find(),
+  backgroundOperations: null,
+  startLoadOperationsPeriodically: function() {
+    this.intervalId = setInterval(this.loadBackgroundOperations, this.get('updateOperationsInterval'));
+  },
+  stopLoadOperationsPeriodically:function () {
+    if(this.intervalId) {
+      clearInterval(this.intervalId);
+    }
+    this.intervalId = false;
+  },
+  loadBackgroundOperations: function(){
+    var self = App.router.get('mainHostController');
+    jQuery.getJSON('data/hosts/background_operations/bg_operations.json',
+      function (data) {
+        var backgroundOperations = self.get('backgroundOperations');
+        if(!backgroundOperations)
+          self.set('backgroundOperations', data);
+        else backgroundOperations.tasks.pushObjects(data['tasks'])
+      }
+    )
+  },
+
+  checkRemoved: function(host_id) {
+    var hosts = this.get('content');
+    var selectedHosts = hosts.filterProperty('id', host_id);
+    this.get('fullContent').removeObjects(selectedHosts);
+  },
 
   backgroundOperationsCount: function() {
-    return this.get('operations.length');
-  }.property('operations.length'),
+    return this.get('backgroundOperations.tasks.length');
+  }.property('backgroundOperations.tasks.length'),
 
   showBackgroundOperationsPopup: function(){
     var self = this;
@@ -94,7 +122,7 @@ App.MainHostController = Em.ArrayController.extend(App.Pagination, {
   filterByComponentsIds: function(componentsIds) {
     this.set('filters.components', componentsIds);
     this.get('componentsForFilter').forEach(function(component) {
-      if (componentsIds.indexOf(component.get('id')) == -1){
+      if (componentsIds.indexOf(component.get('id')) != -1){
         component.set('isChecked', false);
       } else component.set('isChecked', true);
     });
@@ -115,7 +143,7 @@ App.MainHostController = Em.ArrayController.extend(App.Pagination, {
       this.get('fullContent').forEach(function(item) {
         var inFilters = false;
         item.get('components').forEach(function(component) {
-          if (filters.indexOf(component.get('id')) != -1){
+          if (filters.indexOf(component.get('id')) == -1){
             inFilters = true;
           }
         });

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

@@ -106,5 +106,29 @@ App.MainHostDetailsController = Em.Controller.extend({
         this.hide();
       }
     });
+  },
+  deleteButtonPopup: function(event) {
+    var self = this;
+    App.ModalPopup.show({
+      header: Em.I18n.t('hosts.delete.popup.header'),
+      body: Em.I18n.t('hosts.delete.popup.body'),
+      primary: 'Yes',
+      secondary: 'No',
+      onPrimary: function() {
+        self.removeHost(event);
+        this.hide();
+      },
+      onSecondary: function() {
+        this.hide();
+      }
+    });
+  },
+  removeHost: function () {
+    var clientId = this.get('content.clientId');
+    var host_ids = this.get('content.store.clientIdToId');
+    var host_id = host_ids[clientId];
+    App.router.get('mainHostController').checkRemoved(host_id);
+    App.router.transitionTo('hosts');
+
   }
 })

ambari-web/app/models/host.js

@@ -41,7 +41,7 @@ App.Host.FIXTURES = [
     id: 1,
     host_name: 'z_host1',
     cluster_id: 1,
-    components:[1, 2, 4],
+    components:[1, 3, 4, 5, 8],
     cpu: '2x2.5GHz',
     memory: '8GB',
     disk_usage: '40',
@@ -57,7 +57,7 @@ App.Host.FIXTURES = [
     id: 2,
     host_name: 'host2',
     cluster_id: 1,
-    components:[4, 5],
+    components:[1, 3, 4, 5, 8],
     cpu: '2x2.5GHz',
     memory: '8GB',
     disk_usage: '20',

ambari-web/app/models/run.js

@@ -20,159 +20,160 @@
 var App = require('app');
 
 App.Run = DS.Model.extend({
-  workflowId:DS.attr('string'),
-  parentWorkflowId:DS.attr('string'),
+  runId:DS.attr('string'),
+  parentRunId:DS.attr('string'),
   workflowContext:DS.attr('string'),
   userName:DS.attr('string'),
   startTime:DS.attr('string'),
   lastUpdateTime:DS.attr('string'),
   numJobsTotal:DS.attr('number'),
   numJobsCompleted:DS.attr('number'),
-  app:DS.belongsTo('App.App'),
+  appId:DS.attr('number'),
   jobs:DS.hasMany('App.Job')
 });
 
 App.Run.FIXTURES = [
   {
     id:1,
-    workflow_id:'pig_1',
-    parent_workflow_id:null,
+    run_id:'pig_1',
+    parent_run_id:null,
     workflow_context:'{dag: {"1":["2","3"],"2":["3","4"],"4":["2","5"]}}',
     user_name:'user3',
     start_time:1347629541501,
-    last_update_time:1347639541501,
+    last_update_time:'1347639541501',
     num_jobs_total:5,
     num_jobs_completed:0,
-    app:1,
+    app_id:1,
     jobs:[1, 2, 3, 4, 5]
   },
   {
     id:2,
-    workflow_id:'pig_3',
-    parent_workflow_id:null,
+    run_id:'pig_3',
+    parent_run_id:null,
     workflow_context:'{dag:{"4":["5","1"],"3":["6"],"6":["4"],"1":["5"]}}',
     user_name:'user1',
     start_time:1347629951502,
-    last_update_time:1347639951502,
+    last_update_time:'1347439951502',
     num_jobs_total:5,
     num_jobs_completed:2,
-    app:3,
+    app_id:4,
     jobs:[4, 5, 1, 3, 6]
   },
   {
     id:3,
-    workflow_id:'pig_5',
-    parent_workflow_id:null,
+    run_id:'pig_5',
+    parent_run_id:null,
     workflow_context:'{dag:{"6":["7","8"],"9":["8"],"10":["6"],"9":["7"]}}',
     user_name:'user1',
     start_time:1347629841503,
-    last_update_time:1347639841503,
+    last_update_time:'1341639841503',
     num_jobs_total:5,
     num_jobs_completed:0,
+    app_id:1,
     jobs:[6, 7, 8, 9, 10]
   },
   {
     id:4,
-    workflow_id:'pig_5',
-    parent_workflow_id:null,
+    run_id:'pig_5',
+    parent_run_id:null,
     workflow_context:'{dag:{"8":["9","10"],"9":["10"]}}',
     user_name:'user1',
     start_time:1347629541504,
-    last_update_time:1347639541504,
+    last_update_time:'1347639591504',
     num_jobs_total:3,
     num_jobs_completed:0,
-    app:2,
+    app_id:2,
     jobs:[8, 9, 10]
   },
   {
     id:5,
-    workflow_id:'pig_5',
-    parent_workflow_id:null,
+    run_id:'pig_5',
+    parent_run_id:null,
     workflow_context:'{dag:{"8":["9","10"],"8":["10","9"]}}',
     user_name:'user1',
     start_time:1347629541505,
-    last_update_time:1347639541505,
+    last_update_time:'1347631541505',
     num_jobs_total:3,
     num_jobs_completed:0,
-    app:2,
+    app_id:2,
     jobs:[8, 9, 10]
   },
   {
     id:6,
-    workflow_id:'pig_5',
-    parent_workflow_id:null,
+    run_id:'pig_5',
+    parent_run_id:null,
     workflow_context:'{dag:{"8":["9","10"],"9":["10","8"]}}',
     user_name:'user1',
     start_time:1347629541506,
-    last_update_time:1347639541506,
+    last_update_time:'1342639541506',
     num_jobs_total:3,
     num_jobs_completed:0,
-    app:2,
+    app_id:2,
     jobs:[8, 9, 10]
   },
   {
     id:7,
-    workflow_id:'pig_5',
-    parent_workflow_id:null,
+    run_id:'pig_5',
+    parent_run_id:null,
     workflow_context:'{dag:{"1":["3","5"],"5":["7"],"3":["1"]}}',
     user_name:'user1',
     start_time:1347629541507,
-    last_update_time:1347639541507,
+    last_update_time:'1347639541507',
     num_jobs_total:4,
     num_jobs_completed:0,
-    app:3,
+    app_id:4,
     jobs:[1, 3, 5, 7]
   },
   {
     id:8,
-    workflow_id:'pig_5',
-    parent_workflow_id:null,
+    run_id:'pig_5',
+    parent_run_id:null,
     workflow_context:'{dag:{"1":["3","5"],"5":["7"],"3":["1"]}}',
     user_name:'user1',
     start_time:1347629541508,
-    last_update_time:1347639541508,
+    last_update_time:'1347639541508',
     num_jobs_total:4,
     num_jobs_completed:0,
-    app:3,
+    app_id:3,
     jobs:[1, 3, 5, 7]
   },
   {
     id:9,
-    workflow_id:'pig_5',
-    parent_workflow_id:null,
+    run_id:'pig_5',
+    parent_run_id:null,
     workflow_context:'{dag:{"1":["3","5"],"5":["7"],"3":["1"]}}',
     user_name:'user1',
     start_time:1347629541509,
-    last_update_time:1347639541509,
+    last_update_time:'1347639541509',
     num_jobs_total:4,
     num_jobs_completed:0,
-    app:3,
+    app_id:3,
     jobs:[1, 3, 5, 7]
   },
   {
     id:10,
-    workflow_id:'pig_5',
-    parent_workflow_id:null,
+    run_id:'pig_5',
+    parent_run_id:null,
     workflow_context:'{dag:{"1":["3","5"],"5":["7"],"3":["1"]}}',
     user_name:'user1',
     start_time:1347629541510,
-    last_update_time:1347639541510,
+    last_update_time:'1347639541510',
     num_jobs_total:4,
     num_jobs_completed:0,
-    app:3,
+    app_id:3,
     jobs:[1, 3, 5, 7]
   },
   {
     id:11,
-    workflow_id:'pig_5',
-    parent_workflow_id:null,
+    run_id:'pig_5',
+    parent_run_id:null,
     workflow_context:'{dag:{"1":["3","5"],"5":["7"],"3":["1"]}}',
     user_name:'user1',
     start_time:1347629541511,
-    last_update_time:1347639541511,
+    last_update_time:'1347639541511',
     num_jobs_total:4,
     num_jobs_completed:0,
-    app:3,
+    app_id:3,
     jobs:[1, 3, 5, 7]
   }
 ];

ambari-web/app/models/service.js

@@ -128,6 +128,15 @@ App.Component.FIXTURES = [
     service_id:3,
     host_id:2,
     work_status:true
+  },
+  {
+    id:8,
+    component_name:'Oozie',
+    label: 'Oz',
+    type: false,
+    service_id:5,
+    host_id:2,
+    work_status:true
   }
 ];
 

ambari-web/app/routes/main.js

@@ -79,7 +79,6 @@ module.exports = Em.Route.extend({
   apps:Em.Route.extend({
     route:'/apps',
     connectOutlets:function (router, context) {
-      console.log(1245);
       router.get('mainController').connectOutlet('mainApps');
     },
     index:Ember.Route.extend({

ambari-web/app/styles/application.less

@@ -867,12 +867,6 @@ a:focus {
     width: 16px;
   }
   .operation-details {
-    .operation-log{
-      display: none;
-    }
-    .operation-log.open{
-      display: block;
-    }
     padding-left: 16px;
     padding-top: 5px;
     display: none;
@@ -1453,6 +1447,24 @@ ul.inline li {
 
 /* TIME RANGE WIDGET END */
 
+#host-details .host-components .btn-group > .btn{
+  min-width: 130px;
+}
+
+#host-details > .host-maintenance{
+  text-align: right;
+  margin-top: -20px;
+}
+
+#host-details > .host-maintenance > div{
+  text-align: left;
+}
+
+#host-details > .host-title{
+  background-position: 0px center;
+  padding-left: 17px;
+}
+
 /* fieldset begin */
 .fieldset {
   border: 2px solid black;

ambari-web/app/styles/apps.less

@@ -0,0 +1,38 @@
+#apps{
+  .search-bar {
+    float:right;
+  }
+  .dataTable {
+    border: 1px solid silver;
+    th {
+      border-top:none;
+    }
+  }
+  #filter_info {
+    float:left;
+    padding-top:10px;
+  }
+  .page-bar {
+    border: 1px solid silver;
+    text-align:right;
+    div {
+      display: inline-block;
+      margin:0 10px;
+    }
+    .dataTables_length {
+      label {
+        display:inline;
+      }
+      select {
+        margin-bottom: 4px;
+        margin-top: 4px;
+        width:70px;
+      }
+    }
+    .dataTables_paginate {
+      a {
+        padding:0 5px;
+      }
+    }
+  }
+}

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

@@ -15,39 +15,51 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 -->
-<div id="apps" class="box">
-  <div><a href='#' {{action "routeHome" target="controller"}}><i class="icon-home"></i></a>&nbsp;/&nbsp;Apps</div>
-  <div>Show:
-  {{view view.filterTypesView}}
-  </div>
-  <div class="box-header">
-  <h2>Application list</h2>
-    <table class="table table-bordered table-striped" id="dataTable">
+<div id="apps">
+    <div id="filter_info" class="row">
+      <div class="span3">Show: <a href="javascript:void(0)">filtered(400)</a>&nbsp;&#124;&nbsp;<a href="javascript:void(0)">starred(20)</a></div>
+      <div class="span2 offset1"><a href="javascript:void(0)">Clear filters</a>&nbsp;&#124;&nbsp;<a href="javascript:void(0)">Clear stars</a></div>
+    </div>
+    <table class="table table-striped" id="dataTable">
     <thead>
     <tr>
-      <th>Application Name</th>
-      <th>Type</th>
-      <th>Runs</th>
-      <th>Jobs</th>
-      <th>User</th>
-      <th>Last Run</th>
-      <th></th>
+      <th>App ID<i class="icon-question-sign"></i></th>
+      <th>Name<i class="icon-question-sign"></i></th>
+      <th>Type<i class="icon-question-sign"></i></th>
+      <th>User<i class="icon-question-sign"></i></th>
+      <th>Jobs<i class="icon-question-sign"></i></th>
+      <th>Input<i class="icon-question-sign"></i></th>
+      <th>Output<i class="icon-question-sign"></i></th>
+      <th>Duration<i class="icon-question-sign"></i></th>
+      <th>Run Date</th>
     </tr>
+    <tr>
+          <th>{{view view.appidFilterView}}</th>
+          <th><input class="input-small" type="text" placeholder="Name"/></th>
+          <th>{{view view.typeSelectView}}</th>
+          <th><input class="input-mini" type="text" placeholder="User"/></th>
+          <th><input class="input-mini" type="text" placeholder="Jobs"/></th>
+          <th><input class="input-mini" type="text" placeholder="Input"/></th>
+          <th><input class="input-mini" type="text" placeholder="Output"/></th>
+          <th><input class="input-mini" type="text" placeholder="Duration"/></th>
+          <th>{{view view.rundateSelectView}}</th>
+        </tr>
     </thead>
     <tbody>
-    {{#each app in view.content}}
+    {{#each run in view.content}}
     <tr>
-      <td>{{app.appName}}</td>
-      <td>{{app.type}}</td>
-      <td>{{app.numRuns}}</td>
-      <td>{{app.numJobsTotal}}</td>
-      <td>{{app.userName}}</td>
-      <td>{{app.executionTime}}</td>
-      <td><a href="#"{{action "showApp" app}}>Runs</a></td>
+      <td><i class="icon-star"></i>&nbsp;<a href="javascript:void(0)">ID&nbsp;{{run.appId}}</a></td>
+      <td>{{run.appName}}</td>
+      <td>{{run.type}}</td>
+      <td>{{run.userName}}</td>
+      <td>{{run.numJobsTotal}}</td>
+      <td>10MB</td>
+      <td>30MB</td>
+      <td>00:15:32</td>
+      <td>{{run.lastUpdateTime}}</td>
     </tr>
     {{/each}}
     </tbody>
     </table>
-    </div>
 </div>
 

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

@@ -16,20 +16,30 @@
 * limitations under the License.
 -->
 
-{{#each operation in operations}}
+{{#each operation in backgroundOperations.tasks}}
 {{#view App.MainBackgroundOperation contentBinding="operation"}}
 <a class="open-details" {{action openDetails target="view"}} href="#">
   <i {{bindAttr class="view.iconClass"}}></i>
 </a>
-{{operation.operationName}}
+{{operation.command}} {{operation.role}} on {{operation.hostname}}
 <div class="operation-details">
-  {{#each event in operation.events}}
-  <div>{{event.eventDate}}: {{event.eventName}}</div>
-  {{/each}}
-  <a {{action showLog target="view"}} href="#">
+  {{#if operation.details.length}}
+    {{#each detail in operation.details}}
+    <div>{{detail.startTime}}: {{detail.name}}</div>
+    {{/each}}
+  {{/if}}
+  <a {{action showOperationLog target="view"}} href="#">
     {{#if view.isOpenShowLog}}Hide{{else}}Show{{/if}} operation log
   </a>
-  <div {{bindAttr class="view.showLogClass"}}>{{operation.operationLog}}</div>
+  {{#if view.isOpenShowLog}}
+  <div class="operation-log">
+    <dl class="dl-horizontal">
+      <dt>exitcode:</dt><dd>{{view.logDetails.exitcode}}</dd>
+      <dt>stdout:</dt><dd>{{view.logDetails.stdout}}</dd>
+      <dt>stderror:</dt><dd>{{view.logDetails.stderror}}</dd>
+    </dl>
+  </div>
+  {{/if}}
 </div>
 {{/view}}
 {{/each}}

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

@@ -16,26 +16,27 @@
 * limitations under the License.
 -->
 <div id="host-details">
-  {{#if controller.isFromHosts}}
-  <a class="btn back" {{action backToHostsList}}>← Back to Hosts</a>
-  {{/if}}
-  <div class="box ">
-    <div class="box-header">
-      <div class="span1 host-title health-status-{{unbound view.content.healthStatus}}">{{unbound view.content.hostName}}</div>
-      <div class="button-section pull-right clearfix">
-        <button {{bindAttr disabled="controller.isStarting"}} class="btn btn-success" data-toggle="modal" {{action "startConfirmPopup" target="controller"}}>
-          <i class="icon-play"></i>
-          Start
-        </button>
-        <button {{bindAttr disabled="controller.isStopping"}} class="btn btn-danger" data-toggle="modal" {{action "stopConfirmPopup" target="controller"}}>
-          <i class="icon-stop"></i>
-          Stop
-        </button>
-      </div>
-    </div>
-    <div class="content">
-      {{view App.MainHostMenuView}}
-      {{outlet}}
+  <i class="icon-home"></i> /
+  <a href="javascript:void(null)" data-toggle="modal" {{action backToHostsList}}>Hosts</a> /
+  <span class="host-title health-status-{{unbound view.content.healthStatus}}">{{unbound view.content.hostName}}</span>
+  <div class="host-maintenance">
+    <div class="btn-group display-inline-block">
+      <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
+        {{t services.service.actions.maintenance}}
+        <span class="caret"></span>
+      </a>
+      <ul class="dropdown-menu">
+      <!-- dropdown menu links -->
+        {{#each option in view.maintenance}}
+        <li>
+        <a {{action deleteButtonPopup target="controller"}} href="#">{{option.label}}</a>
+        </li>
+        {{/each}}
+      </ul>
     </div>
   </div>
+  <div class="content">
+    {{view App.MainHostMenuView}}
+    {{outlet}}
+  </div>
 </div>

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

@@ -15,5 +15,5 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 -->
-<h5>Metrics</h5>
+<h5>Host Metrics</h5>
 

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

@@ -31,27 +31,31 @@
   <div class="span3 host-components pull-right">
     {{#each component in view.content.components}}
     {{#view view.ComponentButtonView contentBinding="component"}}
-    <div class="btn-group">
-      <button {{bindAttr class="view.buttonClass"}} data-toggle="dropdown">
-        {{unbound view.content.componentName}}
-        <span class="caret"></span>
-      </button>
-      <ul class="dropdown-menu">
-        <li>
-          <a href="javascript:void(null)" data-toggle="modal" {{action "startComponent" view.content target="controller"}}>
-            Start
-          </a>
-        </li>
-        <li>
-          <a href="javascript:void(null)" data-toggle="modal" {{action "stopComponent" view.content target="controller"}}>
-            Stop
-          </a>
-        </li>
-      </ul>
-    </div>
+      <div {{bindAttr class=":btn-group view.positionButton:pull-right:pull-left"}}>
+        <button {{bindAttr class="view.buttonClass"}} data-toggle="dropdown">
+          {{unbound view.content.componentName}}
+          <span class="caret"></span>
+        </button>
+        <ul class="dropdown-menu">
+            <li {{bindAttr class="view.content.workStatus::hidden"}}>
+              <a href="javascript:void(null)" data-toggle="modal" {{action "stopComponent" view.content target="controller"}}>
+                Stop
+              </a>
+            </li>
+            <li {{bindAttr class="view.content.workStatus:hidden:"}}>
+              <a href="javascript:void(null)" data-toggle="modal" {{action "startComponent" view.content target="controller"}}>
+                Start
+              </a>
+            </li>
+        </ul>
+      </div>
     {{/view}}
     {{/each}}
   </div>
   {{/if}}
 </div>
-
+<div class="row">
+  <div class="span5 host-configuration">
+    {{view App.MainHostMetricsView}}
+  </div>
+</div>

ambari-web/app/views.js

@@ -78,13 +78,7 @@ require('views/main/charts/heatmap/heatmap_rack');
 require('views/main/charts/heatmap/heatmap_host');
 require('views/main/charts/heatmap/heatmap_host_detail');
 require('views/main/apps_view');
-require('views/main/apps/runs_view');
 require('views/main/apps/item_view');
-require('views/main/apps/runs/item_view');
-require('views/main/apps/runs/jobs_view');
-require('views/main/apps/runs/jobs/bar_view');
-require('views/main/apps/runs/jobs/dag_view');
-require('views/main/apps/runs/jobs/menu_view');
 require('views/installer');
 require('views/installer/step1_view');
 require('views/installer/step2_view');

ambari-web/app/views/main.js

@@ -20,10 +20,15 @@
 var App = require('app');
 
 App.MainView = Em.View.extend({
-
   templateName: require('templates/main'),
   isInHostsPath: function(){
-    return App.router.get('currentState.name') === 'hosts';
+    var isInHostsPath = App.router.get('currentState.name') === 'hosts';
+    if (isInHostsPath){
+      App.router.get('mainHostController').startLoadOperationsPeriodically()
+    } else {
+      App.router.get('mainHostController').stopLoadOperationsPeriodically()
+    }
+    return isInHostsPath;
   }.property('App.router.currentState.name'),
   backgroundOperationsCount:function () {
     return App.router.get('mainHostController.backgroundOperationsCount');

ambari-web/app/views/main/apps/runs/item_view.js

@@ -1,26 +0,0 @@
-/**
- * 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.MainAppsRunsItemView = Em.View.extend({
-  templateName:require('templates/main/apps/runs/item'),
-  content:function () {
-    return App.router.get('mainAppsRunsItemController.content');
-  }.property('App.router.mainAppsRunsItemController.content')
-});

ambari-web/app/views/main/apps/runs/jobs/bar_view.js

@@ -1,49 +0,0 @@
-/**
- * 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');
-var graph = require('utils/graph');
-App.MainAppsRunsJobsBarView = Em.View.extend({
-  templateName:require('templates/main/apps/runs/jobs/bar'),
-  content:function () {
-    return App.router.get('mainAppsRunsItemController.content').get('jobs');
-  }.property('App.router.mainAppsRunsItemController.content'),
-  firstJob:function () {
-    return this.get('content').get('firstObject');
-  }.property('content'),
-  didInsertElement:function () {
-    this.get('controller').set('activeJobId', this.get('firstJob').get('jobId'));
-    this.get('controller').set('job', this.get('firstJob'));
-    this.get('controller').set('job', null);
-  },
-  draw:function () {
-    if (!this.get('controller').get('job')) {
-      return;//when job is not defined
-    }
-    width = 500;
-    height = 420;
-    var desc1 = $('#graph1_desc');
-    var desc2 = $('#graph2_desc');
-    $('.rickshaw_graph, .rickshaw_legend, .rickshaw_annotation_timeline').html('');
-    if (null == desc1.html() || null == desc2.html()) return;
-    desc1.css('display', 'block');
-    desc2.css('display', 'block');
-    graph.drawJobTimeline(this.get('controller').get('job').get('jobTimeline'), width, height, '#chart', 'legend', 'timeline1');
-    graph.drawJobTasks(this.get('controller').get('job').get('jobTaskview'), width, height, '#job_tasks', 'tasks_legend', 'timeline2');
-  }.observes('controller.job')
-});

ambari-web/app/views/main/apps/runs/jobs/dag_view.js

@@ -1,51 +0,0 @@
-/**
- * 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.MainAppsRunsJobsDagView = Em.View.extend({
-  templateName:require('templates/main/apps/runs/jobs/dag'),
-  content:function () {
-    return App.router.get('mainAppsRunsItemController.content').get('jobs');
-  }.property('App.router.mainAppsRunsItemController.content'),
-  classNames:['table', 'dataTable'],
-  jobs:function () {
-    var c = this.get('content');
-    var result = new Array();
-    c.forEach(function (item, index) {
-      result[index] = new Object({
-        'name':item.get('id'),
-        'status':(item.get('status') == 'COMPLETE') ? true : false,
-        'info':[],
-        'input':2,
-        'output':3
-      })
-    });
-    return result;
-  }.property('content'),
-  didInsertElement:function () {
-    var oTable = this.$('#dataTable').dataTable({
-    });
-    var dagSchema = App.router.get('mainAppsRunsItemController.content').get('workflowContext');
-    var jobs = this.get('jobs');
-    var graph = new DagViewer(false, 'dag_viewer')
-      .setPhysicalParametrs(800, 250, -800, 0.01)
-      .setData(dagSchema, jobs)
-      .drawDag(10, 20, 100);
-  }
-});

ambari-web/app/views/main/apps/runs/jobs/menu_view.js

@@ -1,51 +0,0 @@
-/**
- * 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.MainJobsAppsRunsMenuView = Em.CollectionView.extend({
-  tagName:'ul',
-  classNames:["nav", "nav-tabs"],
-  content:[
-    { label:'DAG', routing:'dag', active:"active"},
-    { label:'BAR', routing:'bar'}
-  ],
-
-  init:function () {
-    this._super();
-    this.activateView();
-  },
-
-  activateView:function () {
-    $.each(this._childViews, function () {
-      this.set('active', (this.get('content.routing') == 'dag' ? "active" : ""));
-    });
-  },
-
-  deactivateChildViews:function () {
-    $.each(this._childViews, function () {
-      this.set('active', "");
-    });
-  },
-
-  itemViewClass:Em.View.extend({
-    classNameBindings:["active"],
-    active:"",
-    template:Ember.Handlebars.compile('<a {{action showGraph view.content.routing }} href="#"> {{unbound view.content.label}}</a>')
-  })
-});

ambari-web/app/views/main/apps/runs/jobs_view.js

@@ -1,29 +0,0 @@
-/**
- * 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.MainAppsRunsJobsView = Em.View.extend({
-  templateName:require('templates/main/apps/runs/jobs'),
-  runItem:function () {
-    return App.router.get('mainAppsRunsItemController.content');
-  }.property('App.router.mainAppsRunsItemController.content'),
-  appItem:function () {
-    return App.router.get('mainAppsItemController.content');
-  }.property('App.router.mainAppsItemController.content')
-});

ambari-web/app/views/main/apps/runs_view.js

@@ -1,63 +0,0 @@
-/**
- * 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');
-var validator = require('utils/validator');
-var date = require('utils/date');
-
-App.MainAppsRunsView = Em.View.extend({
-  templateName:require('templates/main/apps/runs'),
-  classNames:['table', 'dataTable'],
-  didInsertElement:function () {
-    var oTable = this.$('#dataTable').dataTable({
-      "aoColumns":[
-        null,
-        { "sType":"ambari-date" },
-        null,
-        null,
-        null,
-        null,
-        null,
-        null
-      ]
-    });
-  },
-  RunsCheckboxView:Em.Checkbox.extend({
-    content:null,
-    isChecked:false,
-    change:function (event) {
-
-    }
-  }),
-  content:function () {
-    var content = App.router.get('mainAppsItemController.content').get('runs');
-    content.forEach(function (item) {
-      item.set('numJobs', item.get('jobs').get('content').length);
-      var startTime = item.get('startTime');
-      var lastUpdateTime = item.get('lastUpdateTime');
-      item.set('startTime', date.dateFormat(item.get('startTime')));
-      if (validator.isValidInt(lastUpdateTime)) {
-        item.set('lastUpdateTime', date.dateFormatInterval((lastUpdateTime - startTime) / 1000));
-      }
-    });
-    return content;
-  }.property('App.router.mainAppsItemController.content'),
-  appItem:function () {
-    return App.router.get('mainAppsItemController.content');
-  }.property('App.router.mainAppsItemController.content')
-});

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

@@ -21,69 +21,96 @@ var date = require('utils/date');
 
 App.MainAppsView = Em.View.extend({
   templateName:require('templates/main/apps'),
-  classNames:['table', 'dataTable'],
-  oTable:null,
-  types:function () {
+  content:function () {
+    var content =  this.get('controller').get('content');
+    content.forEach(function(item){
+      var app = App.store.find(App.App, item.get('appId'));
+      item.set('appName', app.get('appName'));
+      item.set('type', app.get('type'));
+      item.set('lastUpdateTime', date.dateFormat(item.get('lastUpdateTime')));
+    });
+    return content;
+  }.property('App.router.mainAppsController.content'),
+  types: function(){
     var result = new Array();
-    var content = this.get('content');
-    content.forEach(function (item) {
+    this.get('content').forEach(function(item){
       result.push(item.get('type'));
     });
+    result = $.unique(result);
     return result;
   }.property('content'),
-  uniqueTypes:function () {
-    return this.get('controller').get('arrayUnique')(this.get('types'));
-  }.property('types'),
-  filterTypesView:Em.CollectionView.extend({
-    tagName:'span',
-    parentView:null,
-    content:function () {
-      var content = new Array();
-      this.set('parentView', this._parentView);
-      content.push({label:'All', active:'active'});
-      for (var i = 0; i < this._parentView.get('uniqueTypes').length; i++) {
-        content.push({
-          label:this._parentView.get('uniqueTypes')[i],
-          active:''
-        })
-      }
-      return content;
-    }.property('view.uniqueTypes'),
-    filterByType:function (event) {
-      var type = (event.context.label === 'All') ? '' : event.context.label;
-      event.view._parentView.get('parentView').get('oTable').fnFilter(type, 1);
-    },
-    itemViewClass:Em.View.extend({
-      tagName:'span',
-      classNames:['btn', 'btn-link'],
-
-      filterByType:function (event) {
-        event.view._parentView.get('filterByType')(event);
-      },
-      template:Ember.Handlebars.compile('<a {{action "filterByType" view.content target="view"}}>{{view.content.label}}</a><p></p>')
-    })
-
-  }),
+  oTable:null,
   didInsertElement:function () {
     var oTable = this.$('#dataTable').dataTable({
+      "sDom": '<"search-bar"f>rt<"page-bar"lip><"clear">',
+      "oLanguage": {
+        "sSearch": "<i class='icon-question-sign'>&nbsp;Search</i>",
+        "sLengthMenu": "Show: _MENU_",
+        "sInfo": "_START_ - _END_ of _TOTAL_",
+        "oPaginate":{
+          "sPrevious": "<i class='icon-arrow-left'></i>",
+          "sNext": "<i class='icon-arrow-right'></i>"
+        }
+      },
+      "bSortCellsTop": true,
+      "iDisplayLength": 10,
+      "aLengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
       "aoColumns":[
         null,
         null,
         null,
         null,
         null,
-        { "sType":"ambari-date" },
-        null
+        null,
+        null,
+        null,
+        { "sType":"ambari-date" }
       ]
     });
     this.set('oTable', oTable);
   },
-  content:function () {
-    var content = App.router.get('mainAppsController.content');
-    content.forEach(function (item) {
-      item.set('numRuns', item.get('runs').get('content').length);
-      item.set('executionTime', date.dateFormat(item.get('executionTime')));
-    });
-    return content;
-  }.property('App.router.mainAppsController.content')
+  typeSelectView: Em.Select.extend({
+    classNames:['input-small'],
+    selected: 'Any',
+    content: function(){
+      this._parentView.get('types').push('Any');
+      return this._parentView.get('types');
+    }.property('view.types'),
+
+    /*types:function(){
+        function stripTags( str ){
+            return str.replace(/<\/?[^>]+>/gi, '');
+        };
+        var columnData = new Array('Any');
+        var length = this._parentView.get('oTable').fnSettings().fnRecordsTotal();
+        for(var i = 0; i < length; i++) {
+            columnData.push(stripTags(this._parentView.get('oTable').fnGetData(i,2)));
+        }
+        return jQuery.unique(columnData);
+    }.property(),*/
+    change:function(event){
+      if(this.get('selection') === 'Any') {
+        this._parentView.get('oTable').fnFilter('', 2);
+        return;
+      }
+      this._parentView.get('oTable').fnFilter(this.get('selection'), 2);
+    }
+  }),
+  rundateSelectView: Em.Select.extend({
+    change:function(e) {
+      console.log(this.get('selection'));
+    },
+    content: ['Any', 'Running Now', 'Past 1 Day', 'Past 2 Day', 'Past 7 Day', 'Past 14 Day', 'Past 30 Day', 'Custom'],
+    selected: 'Any',
+    classNames:['input-medium']
+  }),
+  appidFilterView: Em.TextField.extend({
+    classNames:['input-small'],
+    type:'text',
+    placeholder: 'Any ID',
+    filtering:function(){
+      console.log(this.get('value'));
+      this._parentView.get('oTable').fnFilter(this.get('value') ,0);
+    }.observes('value')
+  })
 });

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

@@ -23,7 +23,7 @@ App.MainHostView = Em.View.extend({
   content:function(){
     return App.router.get('mainHostController.content');
   }.property('App.router.mainHostController.content'),
-  componentsIds: [],
+  componentsIds: [1, 2, 3, 4, 5, 6, 7, 8],
   isFilterOpen: false,
   isApplyDisabled: function(){
     return !this.get('isFilterOpen')
@@ -45,7 +45,7 @@ App.MainHostView = Em.View.extend({
       $('.filter-component').each(function () {
         var componentId = parseInt($(this).attr('id').replace('component-',''));
         var index = filters.indexOf(componentId);
-        $(this).attr('checked', index!=-1);
+        $(this).attr('checked', index == -1);
       });
       this.set('componentsIds', filters.toArray());
 
@@ -102,6 +102,7 @@ App.MainBackgroundOperation = Em.View.extend({
   classNames: ['background-operations'],
   classNameBindings: ['isOpen'],
   isOpen: false,
+  logDetails: null,
   isOpenShowLog: false,
   iconClass: function(){
     return this.get('isOpen') ? 'icon-minus' : 'icon-plus';
@@ -109,10 +110,16 @@ App.MainBackgroundOperation = Em.View.extend({
   openDetails: function(){
     this.set('isOpen', !this.get('isOpen'))
   },
-  showLogClass: function(){
-    return this.get('isOpenShowLog') ? 'operation-log open' : 'operation-log';
-  }.property('isOpenShowLog'),
-  showLog:function(){
+  showOperationLog:function(){
+    var operation = this.get('content');
+    var self = this;
+    if (!this.get('isOpenShowLog') && !this.get('logDetails')) {
+      jQuery.getJSON('data/hosts/background_operations/logs/task' +operation.taskId + '.json',
+        function (data) {
+          self.set('logDetails', data);
+        }
+      );
+    }
     this.set('isOpenShowLog', !this.get('isOpenShowLog'))
   }
 });

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

@@ -20,7 +20,11 @@ var App = require('app');
 
 App.MainHostDetailsView = Em.View.extend({
   templateName: require('templates/main/host/details'),
-  content:function(){
+  content: function(){
     return App.router.get('mainHostDetailsController.content');
-  }.property('App.router.mainHostDetailsController.content')
+  }.property('App.router.mainHostDetailsController.content'),
+  maintenance: function(){
+    var options = [{action: 'deleteHost', 'label': 'Delete Host'}];
+    return options;
+  }.property('controller.content')
 });

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

@@ -23,7 +23,6 @@ App.MainHostMenuView = Em.CollectionView.extend({
   classNames: ["nav", "nav-tabs"],
   content:[
     { label:'Summary', routing:'summary'},
-    { label:'Metrics', routing:'metrics'},
     { label:'Audit', routing:'audit'}
   ],
 

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

@@ -25,7 +25,13 @@ App.MainHostSummaryView = Em.View.extend({
   }.property('App.router.mainHostDetailsController.content'),
   ComponentButtonView: Em.View.extend({
     content: null,
-    buttonClass: function(){
+    adjustedIndex: function() {
+      return this.getPath('_parentView.contentIndex') + 1;
+    }.property(),
+    positionButton: function() {
+      return (this.get("adjustedIndex")%2 == 0) ? true : false;
+    }.property('content.id') ,
+    buttonClass: function() {
       return this.get('content.workStatus') ? 'btn btn-success dropdown-toggle' : 'btn btn-danger dropdown-toggle';
     }.property('content.workStatus')
   })