AMBARI-5416. Add 'Flume Agents Live' widget to Ambari dashboard. (akovalenko)

ambari-web/app/messages.js

@@ -1665,6 +1665,7 @@ Em.I18n.translations = {
   'dashboard.widgets.DataNodeUp': 'DataNodes Live',
   'dashboard.widgets.TaskTrackerUp': 'TaskTrackers Live',
   'dashboard.widgets.SuperVisorUp': 'Supervisors Live',
+  'dashboard.widgets.FlumeAgentUp': 'Flume Agents Live',
   'dashboard.widgets.NameNodeRpc': 'NameNode RPC',
   'dashboard.widgets.JobTrackerRpc': 'JobTracker RPC',
   'dashboard.widgets.MapReduceSlots': 'MapReduce Slots',

ambari-web/app/views.js

@@ -140,6 +140,7 @@ require('views/main/dashboard/widgets/resource_manager_uptime');
 require('views/main/dashboard/widgets/node_managers_live');
 require('views/main/dashboard/widgets/yarn_memory');
 require('views/main/dashboard/widgets/supervisor_live');
+require('views/main/dashboard/widgets/flume_agent_live');
 
 
 require('views/main/service');

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

@@ -102,6 +102,9 @@ App.MainDashboardView = Em.View.extend(App.UserPref, App.LocalStorage, {
         case "STORM":
           self.set('storm_model', item);
           break;
+        case "FLUME":
+          self.set('flume_model', item);
+          break;
       }
     }, this);
   },
@@ -118,7 +121,8 @@ App.MainDashboardView = Em.View.extend(App.UserPref, App.LocalStorage, {
       '3', '7', '15', '16', '20',
       '19', '21', '23',
       '24', '25', '26', '27',// all yarn
-      '28' // storm
+      '28', // storm
+      '29' // flume
     ]; // all in order
     var hiddenFull = [['22','Region In Transition']];
     if (this.get('hdfs_model') == null) {
@@ -152,6 +156,12 @@ App.MainDashboardView = Em.View.extend(App.UserPref, App.LocalStorage, {
         visibleFull = visibleFull.without(item);
       }, this);
     }
+    if (this.get('flume_model') == null) {
+      var flume = ['29'];
+      flume.forEach(function(item) {
+        visibleFull = visibleFull.without(item);
+      }, this);
+    }
     var obj = this.get('initPrefObject');
     obj.set('visible', visibleFull);
     obj.set('hidden', hiddenFull);
@@ -169,6 +179,8 @@ App.MainDashboardView = Em.View.extend(App.UserPref, App.LocalStorage, {
 
   storm_model: null,
 
+  flume_model: null,
+
   /**
    * List of visible widgets
    * @type {Ember.Enumerable}
@@ -389,7 +401,6 @@ App.MainDashboardView = Em.View.extend(App.UserPref, App.LocalStorage, {
     if (this.get('storm_model') != null) {
       var storm = ['28'];
       var flag = self.containsWidget(toDelete, storm[0]);
-      var self = this;
       if (flag) {
         storm.forEach ( function (item) {
           toDelete = self.removeWidget(toDelete, item);
@@ -398,6 +409,17 @@ App.MainDashboardView = Em.View.extend(App.UserPref, App.LocalStorage, {
         toAdd = toAdd.concat(storm);
       }
     }
+    if (this.get('flume_model') != null) {
+      var flume = ['29'];
+      var flag = self.containsWidget(toDelete, flume[0]);
+      if (flag) {
+        flume.forEach ( function (item) {
+          toDelete = self.removeWidget(toDelete, item);
+        }, this);
+      } else {
+        toAdd = toAdd.concat(flume);
+      }
+    }
     var value = currentPrefObject;
     if (toDelete.visible.length || toDelete.hidden.length) {
       toDelete.visible.forEach ( function (item) {
@@ -452,7 +474,8 @@ App.MainDashboardView = Em.View.extend(App.UserPref, App.LocalStorage, {
      '25': App.ResourceManagerUptimeView,
      '26': App.NodeManagersLiveView,
      '27': App.YARNMemoryPieChartView,
-     '28': App.SuperVisorUpView
+     '28': App.SuperVisorUpView,
+     '29': App.FlumeAgentUpView
     }, id);
   },
 
@@ -470,7 +493,7 @@ App.MainDashboardView = Em.View.extend(App.UserPref, App.LocalStorage, {
     hidden: [],
     threshold: {1: [80, 90], 2: [85, 95], 3: [90, 95], 4: [80, 90], 5: [1000, 3000], 6: [70, 90], 7: [90, 95], 8: [50, 75], 9: [30000, 120000],
       10: [], 11: [], 12: [], 13: [], 14: [], 15: [], 16: [], 17: [], 18: [], 19: [], 20: [70, 90], 21: [10, 19.2], 22: [3, 10], 23: [],
-      24: [70, 90], 25: [], 26: [50, 75], 27: [50, 75], 28: [85, 95]} // id:[thresh1, thresh2]
+      24: [70, 90], 25: [], 26: [50, 75], 27: [50, 75], 28: [85, 95], 29: [85, 95]} // id:[thresh1, thresh2]
   }),
 
   /**

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

@@ -0,0 +1,177 @@
+/**
+ * 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.FlumeAgentUpView = App.TextDashboardWidgetView.extend({
+
+  title: Em.I18n.t('dashboard.widgets.FlumeAgentUp'),
+  id: '29',
+
+  isPieChart: false,
+  isText: true,
+  isProgressBar: false,
+  model_type: 'flume',
+
+  hiddenInfo: function () {
+    var result = [];
+    result.pushObject(this.get('flumeAgentsLive').length + ' ' + Em.I18n.t('dashboard.services.hdfs.nodes.live'));
+    result.pushObject(this.get('flumeAgentsDead').length + ' ' + Em.I18n.t('dashboard.services.hdfs.nodes.dead'));
+    return result;
+  }.property('flumeAgentsLive', 'flumeAgentsDead'),
+  hiddenInfoClass: "hidden-info-two-line",
+
+  thresh1: 40,
+  thresh2: 70,
+  maxValue: 100,
+
+  flumeAgentComponents: function() {
+    return this.get('model.hostComponents').filterProperty('componentName', 'FLUME_HANDLER');
+  }.property('model.hostComponents.length'),
+
+  flumeAgentsLive: function () {
+    return this.get('flumeAgentComponents').filterProperty("workStatus", "STARTED");
+  }.property('flumeAgentComponents.@each.workStatus'),
+
+  flumeAgentsDead: function () {
+    return this.get('flumeAgentComponents').filterProperty("workStatus", "INSTALLED");
+  }.property('flumeAgentComponents.@each.workStatus'),
+
+
+  data: function () {
+    if ( !this.get('flumeAgentComponents.length')) {
+      return -1;
+    } else {
+      return ((this.get('flumeAgentsLive').length / this.get('model.hostComponents').filterProperty('componentName', 'FLUME_HANDLER').length).toFixed(2)) * 100;
+    }
+  }.property('model.hostComponents.length', 'flumeAgentsLive'),
+
+  content: function () {
+    return this.get('flumeAgentsLive').length + "/" + this.get('flumeAgentComponents').length;
+  }.property('flumeAgentComponents.length', 'flumeAgentsLive'),
+
+  editWidget: function (event) {
+    var parent = this;
+    var max_tmp =  parseFloat(parent.get('maxValue'));
+    var configObj = Ember.Object.create({
+      thresh1: parent.get('thresh1') + '',
+      thresh2: parent.get('thresh2') + '',
+      hintInfo: Em.I18n.t('dashboard.widgets.hintInfo.hint1').format(max_tmp),
+      isThresh1Error: false,
+      isThresh2Error: false,
+      errorMessage1: "",
+      errorMessage2: "",
+      maxValue: max_tmp,
+      observeNewThresholdValue: function () {
+        var thresh1 = this.get('thresh1');
+        var thresh2 = this.get('thresh2');
+        if (thresh1.trim() != "") {
+          if (isNaN(thresh1) || thresh1 > max_tmp || thresh1 < 0){
+            this.set('isThresh1Error', true);
+            this.set('errorMessage1', 'Invalid! Enter a number between 0 - ' + max_tmp);
+          } else if ( this.get('isThresh2Error') === false && parseFloat(thresh2)<= parseFloat(thresh1)) {
+            this.set('isThresh1Error', true);
+            this.set('errorMessage1', 'Threshold 1 should be smaller than threshold 2 !');
+          } else {
+            this.set('isThresh1Error', false);
+            this.set('errorMessage1', '');
+          }
+        } else {
+          this.set('isThresh1Error', true);
+          this.set('errorMessage1', 'This is required');
+        }
+
+        if (thresh2.trim() != "") {
+          if (isNaN(thresh2) || thresh2 > max_tmp || thresh2 < 0) {
+            this.set('isThresh2Error', true);
+            this.set('errorMessage2', 'Invalid! Enter a number between 0 - ' + max_tmp);
+          } else {
+            this.set('isThresh2Error', false);
+            this.set('errorMessage2', '');
+          }
+        } else {
+          this.set('isThresh2Error', true);
+          this.set('errorMessage2', 'This is required');
+        }
+
+        // update the slider handles and color
+        if (this.get('isThresh1Error') === false && this.get('isThresh2Error') === false) {
+          $("#slider-range").slider('values', 0 , parseFloat(thresh1));
+          $("#slider-range").slider('values', 1 , parseFloat(thresh2));
+        }
+      }.observes('thresh1', 'thresh2')
+
+    });
+
+    var browserVerion = this.getInternetExplorerVersion();
+    App.ModalPopup.show({
+      header: Em.I18n.t('dashboard.widgets.popupHeader'),
+      classNames: [ 'sixty-percent-width-modal-edit-widget'],
+      bodyClass: Ember.View.extend({
+        templateName: require('templates/main/dashboard/edit_widget_popup'),
+        configPropertyObj: configObj
+      }),
+      primary: Em.I18n.t('common.apply'),
+      onPrimary: function () {
+        configObj.observeNewThresholdValue();
+        if (!configObj.isThresh1Error && !configObj.isThresh2Error) {
+          parent.set('thresh1', parseFloat(configObj.get('thresh1')) );
+          parent.set('thresh2', parseFloat(configObj.get('thresh2')) );
+          if (!App.testMode) {
+            var big_parent = parent.get('parentView');
+            big_parent.getUserPref(big_parent.get('persistKey'));
+            var oldValue = big_parent.get('currentPrefObject');
+            oldValue.threshold[parseInt(parent.id)] = [configObj.get('thresh1'), configObj.get('thresh2')];
+            big_parent.postUserPref(big_parent.get('persistKey'),oldValue);
+          }
+          this.hide();
+        }
+      },
+
+      didInsertElement: function () {
+        var handlers = [configObj.get('thresh1'), configObj.get('thresh2')];
+        var colors = ['#B80000', '#FF8E00', '#95A800']; //color red, orange, green
+
+        if (browserVerion == -1 || browserVerion > 9) {
+          configObj.set('isIE9', false);
+          configObj.set('isGreenOrangeRed', false);
+          $("#slider-range").slider({
+            range: true,
+            min: 0,
+            max: max_tmp,
+            values: handlers,
+            create: function (event, ui) {
+              parent.updateColors(handlers, colors);
+            },
+            slide: function (event, ui) {
+              parent.updateColors(ui.values, colors);
+              configObj.set('thresh1', ui.values[0] + '');
+              configObj.set('thresh2', ui.values[1] + '');
+            },
+            change: function (event, ui) {
+              parent.updateColors(ui.values, colors);
+            }
+          });
+        } else {
+          configObj.set('isIE9', true);
+          configObj.set('isGreenOrangeRed', false);
+        }
+      }
+    });
+  }
+});