AMBARI-1505. Hosts page: add filtering by host status. (Xi Wang via yusaku)

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

CHANGES.txt

@@ -63,6 +63,8 @@ Trunk (unreleased changes):
 
  IMPROVEMENTS
 
+ AMBARI-1505. Hosts page: add filtering by host status. (yusaku)
+
  AMBARI-1496. Make all service properties reconfigurable. (jaimin)
 
  AMBARI-1477. Improve performance for App.statusMapper. (yusaku)

ambari-web/app/assets/data/dashboard/services.json

@@ -27,8 +27,8 @@
                 },
                 "cluster_name" : "cl1",
                 "desired_configs" : { },
-                "desired_state" : "STARTED",
-                "state" : "STARTED",
+                "desired_state" : "INSTALLED",
+                "state" : "INSTALLED",
                 "component_name" : "HBASE_REGIONSERVER",
                 "host_name" : "domU-12-31-39-0E-E6-01.compute-1.internal"
               }
@@ -42,8 +42,8 @@
                 },
                 "cluster_name" : "cl1",
                 "desired_configs" : { },
-                "desired_state" : "STARTED",
-                "state" : "STARTED",
+                "desired_state" : "INSTALLED",
+                "state" : "INSTALLED",
                 "component_name" : "HBASE_REGIONSERVER",
                 "host_name" : "domU-12-31-39-16-48-4B.compute-1.internal"
               }
@@ -793,8 +793,8 @@
                 },
                 "cluster_name" : "cl1",
                 "desired_configs" : { },
-                "desired_state" : "STARTED",
-                "state" : "STARTED",
+                "desired_state" : "INSTALLED",
+                "state" : "INSTALLED",
                 "component_name" : "JOBTRACKER",
                 "host_name" : "domU-12-31-39-0E-E6-01.compute-1.internal"
               }

ambari-web/app/messages.js

@@ -700,6 +700,14 @@ Em.I18n.translations = {
   'hosts.host.healthStatus.heartBeatNotReceived':'The server has not received a heartbeat from this host for more than 3 minutes.',
   'hosts.host.healthStatus.mastersDown':"The following master components are down:\n",
   'hosts.host.healthStatus.slavesDown':"The following slave components are down:\n",
+  'hosts.host.healthStatusCategory.green': "Healthy",
+  'hosts.host.healthStatusCategory.red': "Master Down",
+  'hosts.host.healthStatusCategory.orange': "Slave Down",
+  'hosts.host.healthStatusCategory.yellow': "No Heartbeat",
+  'hosts.decommission.popup.body':'Are you sure?',
+  'hosts.decommission.popup.header':'Confirmation',
+  'hosts.delete.popup.body':'Are you sure?',
+  'hosts.delete.popup.header':'Confirmation',
   'hosts.cant.do.popup.header':'Operation not allowed',
   'hosts.cant.do.popup.masterList.body':'You cannot delete this host because it is hosting following master services: {0}.',
   'hosts.cant.do.popup.workingList.body':'You cannot delete this host because following slave services are not fully stopped or decommissioned: {0}.',

ambari-web/app/models/host.js

@@ -113,7 +113,7 @@ App.Host = DS.Model.extend({
    * Return true if host not heartbeating last 180 seconds
    */
   isNotHeartBeating : function(){
-    return ((new Date()).getTime() - this.get('lastHeartBeatTime')) > 180 * 1000;
+    return (App.testMode) ? false : ((new Date()).getTime() - this.get('lastHeartBeatTime')) > 180 * 1000;
   }.property('lastHeartBeatTime'),
 
   loadAvg: function() {
@@ -139,7 +139,7 @@ App.Host = DS.Model.extend({
       } else if (masterComponentsRunning && slaveComponentsRunning) {
         status = 'LIVE';
       } else if (masterComponents.length > 0 && !masterComponentsRunning) {
-        status = 'DEAD';
+        status = 'DEAD-RED';
       } else {
         status = 'DEAD-ORANGE';
       }
@@ -157,7 +157,7 @@ App.Host = DS.Model.extend({
     });
     var output = '';
     switch (this.get('healthClass')){
-      case 'health-status-DEAD':
+      case 'health-status-DEAD-RED':
         hostComponents = hostComponents.filterProperty('isMaster', true);
         output = Em.I18n.t('hosts.host.healthStatus.mastersDown');
         hostComponents.forEach(function(hc, index){

ambari-web/app/styles/application.less

@@ -514,7 +514,7 @@ a:focus {
 }
 
 @status-live-marker: url("/img/health-status-live.png");
-@status-dead-marker: url("/img/health-status-dead.png");
+@status-dead-red-marker: url("/img/health-status-dead.png");
 @status-dead-orange-marker: url("/img/health-status-dead-orange.png");
 @status-dead-yellow-marker: url("/img/health-status-dead-yellow.png");
 @status-ok-marker: url("/img/status-ok.jpg");
@@ -784,9 +784,9 @@ a:focus {
     .tab-marker-position;
     background-image: @status-live-marker;
   }
-  .health-status-DEAD, .health-status-STOPPING {
+  .health-status-DEAD-RED, .health-status-STOPPING {
     .tab-marker-position;
-    background-image: @status-dead-marker;
+    background-image: @status-dead-red-marker;
   }
   .health-status-DEAD-ORANGE {
     .tab-marker-position;
@@ -1178,9 +1178,9 @@ a:focus {
       .tab-marker-position;
       background-image: @status-live-marker;
     }
-    .health-status-DEAD, .health-status-STOPPING {
+    .health-status-DEAD-RED, .health-status-STOPPING {
       .tab-marker-position;
-      background-image: @status-dead-marker;
+      background-image: @status-dead-red-marker;
     }
     .health-status-undefined {
       .tab-marker-position;
@@ -1336,18 +1336,28 @@ table.graphs {
 
   .health-status-HEALTHY{
     background-image: @status-live-marker;
+    background-repeat:no-repeat;
+    background-position:center;
   }
   .health-status-LIVE {
     background-image: @status-live-marker;
+    background-repeat:no-repeat;
+    background-position:center;
   }
-  .health-status-DEAD {
-    background-image: @status-dead-marker;
+  .health-status-DEAD-RED {
+    background-image: @status-dead-red-marker;
+    background-repeat:no-repeat;
+    background-position:center;
   }
   .health-status-DEAD-ORANGE {
     background-image: @status-dead-orange-marker;
+    background-repeat:no-repeat;
+    background-position:center;
   }
   .health-status-DEAD-YELLOW {
     background-image: @status-dead-yellow-marker;
+    background-repeat:no-repeat;
+    background-position:center;
   }
   .host-name-search {
     position: relative;
@@ -1369,6 +1379,16 @@ table.graphs {
     .btn.add-host-button {
       float: right;
     }
+    .health-status-bar {
+      font-size: 13px;
+      position: relative;
+      top: 20px;
+      left: 10px;
+      .active a{
+        text-decoration: none;
+        color: #000000;
+      }
+    }
   }
   .progress {
     margin-bottom: 0;
@@ -1612,7 +1632,7 @@ url-prefix
 }
 
 .health-status-installed, .health-status-stopping {
-  background-image: @status-dead-marker;
+  background-image: @status-dead-red-marker;
   .marker;
 }
 
@@ -1621,8 +1641,8 @@ url-prefix
   .marker;
 }
 
-.health-status-DEAD {
-  background-image: @status-dead-marker;
+.health-status-DEAD-RED {
+  background-image: @status-dead-red-marker;
   .marker;
 }
 

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

@@ -18,25 +18,39 @@
 
 <div id="hosts">
 
-  <div class="box-header row">
-    <div class="pull-left">
-        <span>{{t common.search}}&nbsp;</span>{{view Ember.TextField valueBinding="view.globalSearchValue"}}
+  <div class="box-header">
+
+    <div class="health-status-bar" >
+      {{#each category in view.categories}}
+        <span {{bindAttr class="category.itemClass"}}>
+          <span {{bindAttr class="category.healthStatusValue"}}> &nbsp;&nbsp;&nbsp; </span>
+          <a {{action selectCategory category target="view"}} href="#">
+            {{category.label}}
+          </a>
+        </span>
+          {{#unless category.last}}
+            |
+          {{/unless}}
+      {{/each}}
     </div>
+
     {{#if App.isAdmin}}
-    <div class="button-section pull-right">
+    <div class="button-section pull-right ">
       <button class="btn btn-inverse add-host-button" {{action addHost}}>
         <i class="icon-plus icon-white"></i>
         {{t hosts.host.add}}
       </button>
     </div>
     {{/if}}
+
   </div>
 
+
   <table class="datatable table table-bordered table-striped" id="hosts-table">
     <thead>
     <tr>
         {{#view view.sortView contentBinding="view.filteredContent"}}
-          <th class="first"></th>
+          <th class="first"> </th>
           {{view view.parentView.nameSort}}
           {{view view.parentView.ipSort}}
           {{view view.parentView.cpuSort}}
@@ -47,7 +61,7 @@
         {{/view}}
     </tr>
     <tr>
-      <th class="first">&nbsp;</th>
+      <th class="first"> </th>
       <th>{{view view.nameFilterView}}</th>
       <th>{{view view.ipFilterView}}</th>
       <th>{{view view.cpuFilterView}}</th>

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

@@ -177,6 +177,64 @@ App.MainHostView = Em.View.extend({
 
   }),
 
+  /**
+   * Category view for all hosts
+   */
+  categoryObject: Em.Object.extend({
+
+    hostsCount: function () {
+      var statusString = this.get('healthStatusValue');
+      if (statusString == "") {
+        return this.get('view.content').get('length');
+      } else {
+        return this.get('view.content').filterProperty('healthClass', statusString ).get('length');
+      }
+
+    }.property('view.content.@each.healthClass'),
+
+    label: function () {
+      return "%@ (%@)".fmt(this.get('value'), this.get('hostsCount'));
+    }.property('value', 'hostsCount')
+  }),
+
+  getCategory: function(field, value){
+    return this.get('categories').find(function(item) {
+      return item.get(field) == value;
+    });
+  },
+
+  categories: function () {
+    var self = this;
+    self.categoryObject.reopen({
+      view: self,
+      isActive: function() {
+        return this.get('view.category') == this;
+      }.property('view.category'),
+      itemClass: function() {
+        return this.get('isActive') ? 'active' : '';
+      }.property('isActive')
+    });
+
+    var categories = [
+      self.categoryObject.create({value: Em.I18n.t('common.all'), healthStatusValue: ''}),
+      self.categoryObject.create({value: Em.I18n.t('hosts.host.healthStatusCategory.green'), healthStatusValue: 'health-status-LIVE'}),
+      self.categoryObject.create({value: Em.I18n.t('hosts.host.healthStatusCategory.red'), healthStatusValue: 'health-status-DEAD-RED'}),
+      self.categoryObject.create({value: Em.I18n.t('hosts.host.healthStatusCategory.orange'), healthStatusValue: 'health-status-DEAD-ORANGE'}),
+      self.categoryObject.create({value: Em.I18n.t('hosts.host.healthStatusCategory.yellow'), healthStatusValue: 'health-status-DEAD-YELLOW', last: true })
+    ];
+
+    this.set('category', categories.get('firstObject'));
+
+    return categories;
+  }.property(),
+
+  category: false,
+
+  selectCategory: function(event, context){
+    this.set('category', event.context);
+    this.updateFilter(0, event.context.get('healthStatusValue'), 'string');
+  },
+
   /**
    * Filter view for name column
    * Based on <code>filters</code> library
@@ -358,11 +416,13 @@ App.MainHostView = Em.View.extend({
     }
     this.filter();
   },
+
   /**
    * associations between host property and column index
    */
   colPropAssoc: function(){
     var associations = [];
+    associations[0] = 'healthClass';
     associations[1] = 'publicHostName';
     associations[2] = 'ip';
     associations[3] = 'cpu';
@@ -372,7 +432,9 @@ App.MainHostView = Em.View.extend({
     associations[7] = 'criticalAlertsCount';
     return associations;
   }.property(),
+
   globalSearchValue:null,
+
   /**
    * filter table by all fields
    */
@@ -399,10 +461,13 @@ App.MainHostView = Em.View.extend({
       this.filter();
     }
   }.observes('globalSearchValue', 'content'),
+
   /**
    * contain filter conditions for each column
    */
   filterConditions: [],
+  filteredContent: null,
+
   filteredContent: [],
 
   // contain content to show on the current page of hosts page view
@@ -437,4 +502,5 @@ App.MainHostView = Em.View.extend({
       }
     }
   }.observes('content')
+
 });