ambari-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From jonathanhur...@apache.org
Subject [37/39] git commit: AMBARI-7238 Slider View: FE - Show alerts provided by alerts API. (atkach)
Date Wed, 10 Sep 2014 13:03:49 GMT
AMBARI-7238 Slider View: FE - Show alerts provided by alerts API. (atkach)


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

Branch: refs/heads/branch-alerts-dev
Commit: c91fab72a2290b537e2a4036d02239b8f23e2d0f
Parents: d3bfd49
Author: atkach <atkach@hortonworks.com>
Authored: Wed Sep 10 14:35:58 2014 +0300
Committer: atkach <atkach@hortonworks.com>
Committed: Wed Sep 10 14:35:58 2014 +0300

----------------------------------------------------------------------
 .../resources/ui/app/assets/data/apps/apps.json | 124 +++++++++++
 .../src/main/resources/ui/app/helpers/helper.js |  47 +++-
 .../ui/app/mappers/slider_apps_mapper.js        |  79 ++++---
 .../main/resources/ui/app/models/slider_app.js  |   5 +
 .../resources/ui/app/models/slider_app_alert.js | 172 +++++++++++++++
 .../resources/ui/app/styles/application.less    |  60 ++++++
 .../ui/app/templates/slider_app/summary.hbs     |  27 ++-
 .../src/main/resources/ui/app/translations.js   |  14 ++
 .../ui/app/views/slider_app/summary_view.js     |  20 +-
 .../slider/src/main/resources/ui/config.js      |   1 +
 .../ui/vendor/scripts/common/jquery.timeago.js  | 214 +++++++++++++++++++
 11 files changed, 732 insertions(+), 31 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/ambari/blob/c91fab72/contrib/views/slider/src/main/resources/ui/app/assets/data/apps/apps.json
----------------------------------------------------------------------
diff --git a/contrib/views/slider/src/main/resources/ui/app/assets/data/apps/apps.json b/contrib/views/slider/src/main/resources/ui/app/assets/data/apps/apps.json
index 60cc831..d774387 100644
--- a/contrib/views/slider/src/main/resources/ui/app/assets/data/apps/apps.json
+++ b/contrib/views/slider/src/main/resources/ui/app/assets/data/apps/apps.json
@@ -18,6 +18,68 @@
       "version" : "1.0.0",
       "view_name" : "SLIDER",
       "yarnId" : "application_1409333994422_0005",
+      "alerts" : {
+        "detail" : [
+          {
+            "description" : "alert1",
+            "host_name" : "с6402.ambari.apache.org",
+            "last_status" : "CRITICAL",
+            "last_status_time" : 1409689349,
+            "service_name" : "HBASE",
+            "status" : "OK",
+            "status_time" : 1409703869,
+            "output" : "Connection refused",
+            "actual_status" : "CRITICAL"
+          },
+          {
+            "description" : "alert2",
+            "host_name" : "с6402.ambari.apache.org",
+            "last_status" : "OK",
+            "last_status_time" : 1409334745,
+            "service_name" : "HBASE",
+            "status" : "WARNING",
+            "status_time" : 1409703865,
+            "output" : "TCP OK - 0.001 second response time on port 9083",
+            "actual_status" : "OK"
+          },
+          {
+            "description" : "NameNode edit logs directory status on dev01.hortonworks.com",
+            "host_name" : "dev01.hortonworks.com",
+            "last_status" : "WARNING",
+            "last_status_time" : 1389788011,
+            "service_name" : "HBASE",
+            "status" : "CRITICAL",
+            "status_time" : 1389793171,
+            "output" : "WARNING: NameNode directory status not available via http://dev01.hortonworks.com:50070/jmx
url, code 0"
+          },
+          {
+            "description" : "NameNode host CPU utilization on dev01.hortonworks.com",
+            "host_name" : "dev01.hortonworks.com",
+            "last_status" : "OK",
+            "last_status_time" : 1389636534,
+            "service_name" : "HBASE",
+            "status" : "PASSIVE",
+            "status_time" : 1389793060,
+            "output" : "1 CPU, load 19.0% &lt; 200% : OK"
+          },
+          {
+            "description" : "App Timeline Server Web UI",
+            "host_name" : "dev01.hortonworks.com",
+            "last_status" : "WARNING",
+            "last_status_time" : 1389636534,
+            "service_name" : "HBASE",
+            "status" : "UNKNOWN",
+            "status_time" : 1389793060,
+            "output" : "1 CPU, load 19.0% &lt; 200% : OK"
+          }
+        ],
+        "summary" : {
+          "CRITICAL" : 1,
+          "OK" : 1,
+          "PASSIVE" : 0,
+          "WARNING" : 0
+        }
+      },
       "components" : {
         "HBASE_MASTER" : {
           "componentName" : "HBASE_MASTER",
@@ -403,6 +465,68 @@
       "version" : "1.0.0",
       "view_name" : "SLIDER",
       "yarnId" : "application_1409333994422_0009",
+      "alerts" : {
+        "detail" : [
+          {
+            "description" : "alert1",
+            "host_name" : "с6402.ambari.apache.org",
+            "last_status" : "CRITICAL",
+            "last_status_time" : 1409689349,
+            "service_name" : "HBASE",
+            "status" : "OK",
+            "status_time" : 1409703869,
+            "output" : "Connection refused",
+            "actual_status" : "CRITICAL"
+          },
+          {
+            "description" : "alert2",
+            "host_name" : "с6402.ambari.apache.org",
+            "last_status" : "OK",
+            "last_status_time" : 1409334745,
+            "service_name" : "HBASE",
+            "status" : "WARNING",
+            "status_time" : 1409703865,
+            "output" : "TCP OK - 0.001 second response time on port 9083",
+            "actual_status" : "OK"
+          },
+          {
+            "description" : "NameNode edit logs directory status on dev01.hortonworks.com",
+            "host_name" : "dev01.hortonworks.com",
+            "last_status" : "WARNING",
+            "last_status_time" : 1389788011,
+            "service_name" : "HBASE",
+            "status" : "CRITICAL",
+            "status_time" : 1389793171,
+            "output" : "WARNING: NameNode directory status not available via http://dev01.hortonworks.com:50070/jmx
url, code 0"
+          },
+          {
+            "description" : "NameNode host CPU utilization on dev01.hortonworks.com",
+            "host_name" : "dev01.hortonworks.com",
+            "last_status" : "OK",
+            "last_status_time" : 1389636534,
+            "service_name" : "HBASE",
+            "status" : "PASSIVE",
+            "status_time" : 1389793060,
+            "output" : "1 CPU, load 19.0% &lt; 200% : OK"
+          },
+          {
+            "description" : "App Timeline Server Web UI",
+            "host_name" : "dev01.hortonworks.com",
+            "last_status" : "WARNING",
+            "last_status_time" : 1389636534,
+            "service_name" : "HBASE",
+            "status" : "UNKNOWN",
+            "status_time" : 1389793060,
+            "output" : "1 CPU, load 19.0% &lt; 200% : OK"
+          }
+        ],
+        "summary" : {
+          "CRITICAL" : 1,
+          "OK" : 1,
+          "PASSIVE" : 0,
+          "WARNING" : 0
+        }
+      },
       "components" : {
         "HBASE_MASTER" : {
           "componentName" : "HBASE_MASTER",

http://git-wip-us.apache.org/repos/asf/ambari/blob/c91fab72/contrib/views/slider/src/main/resources/ui/app/helpers/helper.js
----------------------------------------------------------------------
diff --git a/contrib/views/slider/src/main/resources/ui/app/helpers/helper.js b/contrib/views/slider/src/main/resources/ui/app/helpers/helper.js
index 88dfcb7..3f47ffd 100644
--- a/contrib/views/slider/src/main/resources/ui/app/helpers/helper.js
+++ b/contrib/views/slider/src/main/resources/ui/app/helpers/helper.js
@@ -100,4 +100,49 @@ App.registerBoundHelper('humanize', Em.View.extend({
     var content = this.get('content');
     return content && (content[0].toUpperCase() + content.slice(1)).replace(/([A-Z])/g,
' $1').replace(/_/g, ' ');
   }.property('content')
-}));
\ No newline at end of file
+}));
+
+/**
+ * Ambari overrides the default date transformer.
+ * This is done because of the non-standard data
+ * sent. For example Nagios sends date as "12345678".
+ * The problem is that it is a String and is represented
+ * only in seconds whereas Javascript's Date needs
+ * milliseconds representation.
+ */
+DS.attr.transforms = {
+  date: {
+    from: function (serialized) {
+      var type = typeof serialized;
+      if (type === 'string') {
+        serialized = parseInt(serialized);
+        type = typeof serialized;
+      }
+      if (type === 'number') {
+        if (!serialized) {  //serialized timestamp = 0;
+          return 0;
+        }
+        // The number could be seconds or milliseconds.
+        // If seconds, then the length is 10
+        // If milliseconds, the length is 13
+        if (serialized.toString().length < 13) {
+          serialized = serialized * 1000;
+        }
+        return new Date(serialized);
+      } else if (serialized === null || serialized === undefined) {
+        // if the value is not present in the data,
+        // return undefined, not null.
+        return serialized;
+      } else {
+        return null;
+      }
+    },
+    to: function (deserialized) {
+      if (deserialized instanceof Date) {
+        return deserialized.getTime();
+      } else {
+        return null;
+      }
+    }
+  }
+};
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/ambari/blob/c91fab72/contrib/views/slider/src/main/resources/ui/app/mappers/slider_apps_mapper.js
----------------------------------------------------------------------
diff --git a/contrib/views/slider/src/main/resources/ui/app/mappers/slider_apps_mapper.js
b/contrib/views/slider/src/main/resources/ui/app/mappers/slider_apps_mapper.js
index 23d8a8e..6b83eea 100644
--- a/contrib/views/slider/src/main/resources/ui/app/mappers/slider_apps_mapper.js
+++ b/contrib/views/slider/src/main/resources/ui/app/mappers/slider_apps_mapper.js
@@ -27,7 +27,7 @@ App.SliderAppsMapper = App.Mapper.createWithMixins(App.RunPeriodically,
{
    * @method load
    * @return {$.ajax}
    */
-  load: function() {
+  load: function () {
     return App.ajax.send({
       name: 'mapper.applicationApps',
       sender: this,
@@ -37,18 +37,47 @@ App.SliderAppsMapper = App.Mapper.createWithMixins(App.RunPeriodically,
{
 
   /**
    * Parse loaded data
+   * Load <code>App.Alert</code> model
+   * @param {object} data received from server data
+   * @method parse
+   */
+  parseAlerts: function (data) {
+    var alerts = [],
+      appId = data.id;
+
+    if (data.alerts && data.alerts.detail) {
+      data.alerts.detail.forEach(function (alert) {
+        alerts.push({
+          id: appId + alert.description,
+          title: alert.description,
+          serviceName: alert.service_name,
+          status: alert.status,
+          message: alert.output,
+          hostName: alert.host_name,
+          lastTime: alert.status_time,
+          appId: appId,
+          lastCheck: alert.last_status_time
+        });
+      });
+      App.SliderApp.store.pushMany('sliderAppAlert', alerts);
+    }
+    return alerts.mapProperty('id');
+  },
+
+  /**
+   * Parse loaded data
    * Load <code>App.SliderAppComponent</code> model
    * @param {object} data received from server data
    * @method parse
    */
-  parseComponents: function(data) {
+  parseComponents: function (data) {
     var components = [],
-    appId = data.id;
+      appId = data.id;
 
     Object.keys(data.components).forEach(function (key) {
       var component = data.components[key];
       activeContainers = Object.keys(component.activeContainers);
-      for(var i= 0; i < component.instanceCount; i++){
+      for (var i = 0; i < component.instanceCount; i++) {
         components.pushObject(
           Ember.Object.create({
             id: appId + component.componentName + i,
@@ -70,7 +99,7 @@ App.SliderAppsMapper = App.Mapper.createWithMixins(App.RunPeriodically,
{
    * @param {object} data received from server data
    * @method parse
    */
-  parseConfigs : function(data) {
+  parseConfigs: function (data) {
     var configs = {};
     Object.keys(data.configs).forEach(function (key) {
       configs[key] = data.configs[key];
@@ -84,25 +113,25 @@ App.SliderAppsMapper = App.Mapper.createWithMixins(App.RunPeriodically,
{
    * @param {object} data received from server data
    * @method parse
    */
-  parseQuickLinks : function(data) {
+  parseQuickLinks: function (data) {
     var quickLinks = [],
-    appId = data.id;
+      appId = data.id;
     quickLinks.push(
       Ember.Object.create({
         id: 'YARN application',
         label: 'YARN application',
-        url: "http://"+window.location.hostname+":8088"
+        url: "http://" + window.location.hostname + ":8088"
       })
     );
 
-    if(!data.urls){
+    if (!data.urls) {
       return quickLinks.mapProperty('id');
     }
 
     Object.keys(data.urls).forEach(function (key) {
       quickLinks.push(
         Ember.Object.create({
-          id: appId+key,
+          id: appId + key,
           label: key,
           url: data.urls[key]
         })
@@ -112,9 +141,9 @@ App.SliderAppsMapper = App.Mapper.createWithMixins(App.RunPeriodically,
{
     return quickLinks.mapProperty('id');
   },
 
-  parseObject: function(o) {
+  parseObject: function (o) {
     if (Ember.typeOf(o) !== 'object') return [];
-    return Ember.keys(o).map(function(key) {
+    return Ember.keys(o).map(function (key) {
       return {key: key, value: o[key]};
     });
   },
@@ -125,22 +154,23 @@ App.SliderAppsMapper = App.Mapper.createWithMixins(App.RunPeriodically,
{
    * @param {object} data received from server data
    * @method parse
    */
-  parse: function(data) {
+  parse: function (data) {
     var apps = [],
-    self = this,
-    appsToDelete = App.SliderApp.store.all('sliderApp').get('content').mapProperty('id');
+      self = this,
+      appsToDelete = App.SliderApp.store.all('sliderApp').get('content').mapProperty('id');
 
-    data.items.forEach(function(app) {
+    data.items.forEach(function (app) {
       var componentsId = app.components ? self.parseComponents(app) : [],
-      configs = app.configs ? self.parseConfigs(app) : {},
-      quickLinks = self.parseQuickLinks(app),
-      jmx = self.parseObject(app.jmx),
-      masterActiveTime = jmx.findProperty('key', 'MasterActiveTime'),
-      masterStartTime = jmx.findProperty('key', 'MasterStartTime');
-      if(masterActiveTime){
+        configs = app.configs ? self.parseConfigs(app) : {},
+        quickLinks = self.parseQuickLinks(app),
+        alerts = self.parseAlerts(app),
+        jmx = self.parseObject(app.jmx),
+        masterActiveTime = jmx.findProperty('key', 'MasterActiveTime'),
+        masterStartTime = jmx.findProperty('key', 'MasterStartTime');
+      if (masterActiveTime) {
         masterActiveTime.value = new Date(Date.now() - masterActiveTime.value).getHours()
+ "h:" + new Date(Date.now() - masterActiveTime.value).getMinutes() + "m";
       }
-      if(masterStartTime){
+      if (masterStartTime) {
         masterStartTime.value = (new Date(parseInt(masterStartTime.value)).toUTCString());
       }
       apps.push(
@@ -157,6 +187,7 @@ App.SliderAppsMapper = App.Mapper.createWithMixins(App.RunPeriodically,
{
           description: app.description || "-",
           components: componentsId,
           quickLinks: quickLinks,
+          alerts: alerts,
           configs: configs,
           jmx: jmx,
           runtimeProperties: app.configs
@@ -168,7 +199,7 @@ App.SliderAppsMapper = App.Mapper.createWithMixins(App.RunPeriodically,
{
 
     appsToDelete.forEach(function (app) {
       var appRecord = App.SliderApp.store.getById('sliderApp', app);
-      if(appRecord){
+      if (appRecord) {
         appRecord.destroyRecord();
       }
     });

http://git-wip-us.apache.org/repos/asf/ambari/blob/c91fab72/contrib/views/slider/src/main/resources/ui/app/models/slider_app.js
----------------------------------------------------------------------
diff --git a/contrib/views/slider/src/main/resources/ui/app/models/slider_app.js b/contrib/views/slider/src/main/resources/ui/app/models/slider_app.js
index 69f2479..6d6bfcc 100644
--- a/contrib/views/slider/src/main/resources/ui/app/models/slider_app.js
+++ b/contrib/views/slider/src/main/resources/ui/app/models/slider_app.js
@@ -74,6 +74,11 @@ App.SliderApp = DS.Model.extend({
   quickLinks: DS.hasMany('quickLink', {async:true}),
 
   /**
+   * @type {App.SliderAppAlert[]}
+   */
+  alerts: DS.hasMany('sliderAppAlert', {async:true}),
+
+  /**
    * @type {App.TypedProperty[]}
    */
   runtimeProperties: DS.hasMany('typedProperty', {async:true}),

http://git-wip-us.apache.org/repos/asf/ambari/blob/c91fab72/contrib/views/slider/src/main/resources/ui/app/models/slider_app_alert.js
----------------------------------------------------------------------
diff --git a/contrib/views/slider/src/main/resources/ui/app/models/slider_app_alert.js b/contrib/views/slider/src/main/resources/ui/app/models/slider_app_alert.js
new file mode 100644
index 0000000..c8cf0bd
--- /dev/null
+++ b/contrib/views/slider/src/main/resources/ui/app/models/slider_app_alert.js
@@ -0,0 +1,172 @@
+/**
+ * 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.SliderAppAlert = DS.Model.extend({
+  /**
+   * @type {string}
+   */
+  title: DS.attr('string'),
+
+  /**
+   * @type {string}
+   */
+  serviceName: DS.attr('string'),
+
+  /**
+   * @type {string}
+   */
+  status: DS.attr('string'),
+
+  /**
+   * @type {string}
+   */
+  message: DS.attr('string'),
+
+  /**
+   * @type {string}
+   */
+  hostName: DS.attr('string'),
+
+  /**
+   * @type {number}
+   */
+  lastTime: DS.attr('number'),
+
+  /**
+   * @type {number}
+   */
+  lastCheck: DS.attr('number'),
+
+  /**
+   * @type {App.SliderApp}
+   */
+  appId: DS.belongsTo('sliderApp'),
+
+  /**
+   * @type {string}
+   */
+  iconClass: function () {
+    var statusMap = Em.Object.create({
+      'OK': 'icon-ok',
+      'WARNING': 'icon-warning-sign',
+      'CRITICAL': 'icon-remove',
+      'PASSIVE': 'icon-medkit'
+    });
+    return statusMap.getWithDefault(this.get('status'), 'icon-question-sign');
+  }.property('status'),
+
+  /**
+   * @type {object}
+   */
+  date: function () {
+    return DS.attr.transforms.date.from(this.get('lastTime'));
+  }.property('lastTime'),
+
+  /**
+   * Provides how long ago this alert happened.
+   *
+   * @type {String}
+   */
+  timeSinceAlert: function () {
+    var d = this.get('date');
+    var timeFormat;
+    if (d) {
+      switch (this.get('status')) {
+        case "0":
+          timeFormat = Em.I18n.t('sliderApp.alerts.OK.timePrefix');
+          break;
+        case "1":
+          timeFormat = Em.I18n.t('sliderApp.alerts.WARN.timePrefix');
+          break;
+        case "2":
+          timeFormat = Em.I18n.t('sliderApp.alerts.CRIT.timePrefix');
+          break;
+        case "3":
+          timeFormat = Em.I18n.t('sliderApp.alerts.MAINT.timePrefix');
+          break;
+        default:
+          timeFormat = Em.I18n.t('sliderApp.alerts.UNKNOWN.timePrefix');
+          break;
+      }
+      var prevSuffix = $.timeago.settings.strings.suffixAgo;
+      $.timeago.settings.strings.suffixAgo = '';
+      var since = timeFormat.format($.timeago(this.makeTimeAtleastMinuteAgo(d)));
+      $.timeago.settings.strings.suffixAgo = prevSuffix;
+      return since;
+    } else if (d == 0) {
+      switch (this.get('status')) {
+        case "0":
+          timeFormat = Em.I18n.t('sliderApp.alerts.OK.timePrefixShort');
+          break;
+        case "1":
+          timeFormat = Em.I18n.t('sliderApp.alerts.WARN.timePrefixShort');
+          break;
+        case "2":
+          timeFormat = Em.I18n.t('sliderApp.alerts.CRIT.timePrefixShort');
+          break;
+        case "3":
+          timeFormat = Em.I18n.t('sliderApp.alerts.MAINT.timePrefixShort');
+          break;
+        default:
+          timeFormat = Em.I18n.t('sliderApp.alerts.UNKNOWN.timePrefixShort');
+      }
+      return timeFormat;
+    } else {
+      return "";
+    }
+  }.property('date', 'status'),
+
+  /**
+   *
+   * @param d
+   * @return {object}
+   */
+  makeTimeAtleastMinuteAgo: function (d) {
+    var diff = (new Date).getTime() - d.getTime();
+    if (diff < 60000) {
+      diff = 60000 - diff;
+      return new Date(d.getTime() - diff);
+    }
+    return d;
+  },
+
+  /**
+   * Provides more details about when this alert happened.
+   *
+   * @type {String}
+   */
+  timeSinceAlertDetails: function () {
+    var details = "";
+    var date = this.get('date');
+    if (date) {
+      var dateString = date.toDateString();
+      dateString = dateString.substr(dateString.indexOf(" ") + 1);
+      dateString = Em.I18n.t('sliderApp.alerts.occurredOn').format(dateString, date.toLocaleTimeString());
+      details += dateString;
+    }
+    var lastCheck = this.get('lastCheck');
+    if (lastCheck) {
+      lastCheck = new Date(lastCheck * 1000);
+      details = details ? details + Em.I18n.t('sliderApp.alerts.brLastCheck').format($.timeago(lastCheck))
: Em.I18n.t('sliderApp.alerts.lastCheck').format($.timeago(lastCheck));
+    }
+    return details;
+  }.property('lastCheck', 'date')
+
+});
+
+App.SliderAppAlert.FIXTURES = [];
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/ambari/blob/c91fab72/contrib/views/slider/src/main/resources/ui/app/styles/application.less
----------------------------------------------------------------------
diff --git a/contrib/views/slider/src/main/resources/ui/app/styles/application.less b/contrib/views/slider/src/main/resources/ui/app/styles/application.less
index 3eb6d55..11ec39b 100644
--- a/contrib/views/slider/src/main/resources/ui/app/styles/application.less
+++ b/contrib/views/slider/src/main/resources/ui/app/styles/application.less
@@ -608,3 +608,63 @@ a {
     margin-top: 20px;
   }
 }
+
+.app-alerts {
+  overflow-y: auto;
+  ul {
+    padding-left: 0;
+    margin-bottom: 0;
+  }
+  li {
+    border-bottom: 1px solid #eee;
+    list-style: none;
+    padding: 5px;
+    background-position: 14px 9px;
+    background-repeat: no-repeat;
+    .date-time {
+      float: right;
+    }
+    p {
+      margin-bottom: 2px;
+    }
+    .container-fluid {
+      padding-left: 10px;
+      padding-right: 10px;
+    }
+    .title {
+      font-weight: normal;
+      font-size: 13px;
+    }
+    .row-fluid [class*="span"] {
+      min-height: 0px;
+    }
+    .status-icon {
+      padding-top: 7px;
+    }
+    .date-time {
+      color: #999;
+      font-style: italic;
+      font-size: small;
+      text-align: right;
+    }
+    .message {
+      font-size: 12px;
+      color: #777;
+    }
+    .serviceLink {
+      padding-left: 7px;
+    }
+  }
+  .icon-ok {
+    color: #5AB400;
+  }
+  .icon-remove {
+    color: #FF4B4B;
+  }
+  .icon-warning-sign {
+    color: #FDB82F;
+  }
+  .icon-question-sign {
+    color: #999;
+  }
+}

http://git-wip-us.apache.org/repos/asf/ambari/blob/c91fab72/contrib/views/slider/src/main/resources/ui/app/templates/slider_app/summary.hbs
----------------------------------------------------------------------
diff --git a/contrib/views/slider/src/main/resources/ui/app/templates/slider_app/summary.hbs
b/contrib/views/slider/src/main/resources/ui/app/templates/slider_app/summary.hbs
index 974186d..0ba3998 100644
--- a/contrib/views/slider/src/main/resources/ui/app/templates/slider_app/summary.hbs
+++ b/contrib/views/slider/src/main/resources/ui/app/templates/slider_app/summary.hbs
@@ -69,14 +69,35 @@
         <div class="panel-heading">
           Alerts
           <div class="btn-group pull-right panel-link">
-            <a class="btn btn-default btn-sm" target="_blank" rel="tooltip"
+{{!--            <a class="btn btn-default btn-sm" target="_blank" rel="tooltip"
               {{translateAttr title="sliderApp.summary.go_to_nagios"}}
               {{bindAttr href="view.nagiosUrl"}}>
                 <i class="icon-link"></i>
-            </a>
+            </a>--}}
           </div>
         </div>
-        <div class="panel-body">
+        <div class="app-alerts">
+            <ul>
+              {{#each controller.model.alerts}}
+                {{#view view.AlertView contentBinding="this"}}
+                      <div class="container-fluid">
+                          <div class="row">
+                              <div class="col-md-1 status-icon">
+                                  <i {{bindAttr class="iconClass :icon-large"}}></i>
+                              </div>
+                              <div class="col-md-11">
+                                  <div class="row">
+                                      <div class="col-md-7 title">{{title}}</div>
+
+                                      <div {{bs-bind-tooltip view.tooltip}} data-placement="right"
class="col-md-5 date-time">{{timeSinceAlert}}</div>
+                                  </div>
+                                  <div class="message">{{message}}</div>
+                              </div>
+                          </div>
+                      </div>
+                  {{/view}}
+              {{/each}}
+            </ul>
         </div>
       </div>
     </div>

http://git-wip-us.apache.org/repos/asf/ambari/blob/c91fab72/contrib/views/slider/src/main/resources/ui/app/translations.js
----------------------------------------------------------------------
diff --git a/contrib/views/slider/src/main/resources/ui/app/translations.js b/contrib/views/slider/src/main/resources/ui/app/translations.js
index 4af412a..e5e6a79 100644
--- a/contrib/views/slider/src/main/resources/ui/app/translations.js
+++ b/contrib/views/slider/src/main/resources/ui/app/translations.js
@@ -79,6 +79,20 @@ Em.I18n.translations = {
   'sliderApp.summary.go_to_nagios': 'Go to Nagios',
   'sliderApp.summary.go_to_ganglia': 'Go to Ganglia',
 
+  'sliderApp.alerts.OK.timePrefixShort': 'OK',
+  'sliderApp.alerts.WARN.timePrefixShort': 'WARN',
+  'sliderApp.alerts.CRIT.timePrefixShort': 'CRIT',
+  'sliderApp.alerts.MAINT.timePrefixShort': 'MAINT',
+  'sliderApp.alerts.UNKNOWN.timePrefixShort': 'UNKNOWN',
+  'sliderApp.alerts.OK.timePrefix': 'OK for {0}',
+  'sliderApp.alerts.WARN.timePrefix': 'WARN for {0}',
+  'sliderApp.alerts.CRIT.timePrefix': 'CRIT for {0}',
+  'sliderApp.alerts.MAINT.timePrefix': 'MAINT for {0}',
+  'sliderApp.alerts.UNKNOWN.timePrefix': 'UNKNOWN for {0}',
+  'sliderApp.alerts.lastCheck': 'Last Checked {0}',
+  'sliderApp.alerts.brLastCheck': "\nLast Checked {0}",
+  'sliderApp.alerts.occurredOn': 'Occurred on {0}, {1}',
+
   'wizard.name': 'Create Slider App',
   'wizard.step1.name': 'Select Type',
   'wizard.step1.header': 'Available Types',

http://git-wip-us.apache.org/repos/asf/ambari/blob/c91fab72/contrib/views/slider/src/main/resources/ui/app/views/slider_app/summary_view.js
----------------------------------------------------------------------
diff --git a/contrib/views/slider/src/main/resources/ui/app/views/slider_app/summary_view.js
b/contrib/views/slider/src/main/resources/ui/app/views/slider_app/summary_view.js
index cb3b64a..1be586d 100644
--- a/contrib/views/slider/src/main/resources/ui/app/views/slider_app/summary_view.js
+++ b/contrib/views/slider/src/main/resources/ui/app/views/slider_app/summary_view.js
@@ -38,9 +38,23 @@ App.SliderAppSummaryView = Ember.View.extend({
     return 'http://' + App.get('nagiosHost') + '/nagios';
   }.property(),
 
-  fitPanels:function () {
+  fitPanels: function () {
     var heightLeft = parseInt(this.$('.panel-summury').css('height'));
-    this.$('.panel-components, .panel-alerts').css('height',((heightLeft<200)?200:heightLeft-20)/2);
-  }.on('didInsertElement')
+    this.$('.panel-components').css('height', ((heightLeft < 200) ? 200 : heightLeft -
20) / 2);
+    this.$('.panel-alerts .app-alerts').css('height', ((heightLeft < 200) ? 200 : heightLeft
- 106) / 2);
+  }.on('didInsertElement'),
+
+  AlertView: Em.View.extend({
+    content: null,
+    tagName: 'li',
+    tooltip: function () {
+      var self = this;
+      return Ember.Object.create({
+        trigger: 'hover',
+        content: this.get('content.timeSinceAlertDetails'),
+        placement: "right"
+      });
+    }.property('content')
+  })
 
 });

http://git-wip-us.apache.org/repos/asf/ambari/blob/c91fab72/contrib/views/slider/src/main/resources/ui/config.js
----------------------------------------------------------------------
diff --git a/contrib/views/slider/src/main/resources/ui/config.js b/contrib/views/slider/src/main/resources/ui/config.js
index 7acda84..e464128 100755
--- a/contrib/views/slider/src/main/resources/ui/config.js
+++ b/contrib/views/slider/src/main/resources/ui/config.js
@@ -37,6 +37,7 @@ exports.config = {
           'vendor/scripts/common/jquery.ui.widget.js',
           'vendor/scripts/common/jquery.ui.mouse.js',
           'vendor/scripts/common/jquery.ui.sortable.js',
+          'vendor/scripts/common/jquery.timeago.js',
           'vendor/scripts/common/handlebars.js',
           'vendor/scripts/development/ember.js',
           'vendor/scripts/production/ember-data.js',

http://git-wip-us.apache.org/repos/asf/ambari/blob/c91fab72/contrib/views/slider/src/main/resources/ui/vendor/scripts/common/jquery.timeago.js
----------------------------------------------------------------------
diff --git a/contrib/views/slider/src/main/resources/ui/vendor/scripts/common/jquery.timeago.js
b/contrib/views/slider/src/main/resources/ui/vendor/scripts/common/jquery.timeago.js
new file mode 100644
index 0000000..90e9553
--- /dev/null
+++ b/contrib/views/slider/src/main/resources/ui/vendor/scripts/common/jquery.timeago.js
@@ -0,0 +1,214 @@
+/**
+ * Timeago is a jQuery plugin that makes it easy to support automatically
+ * updating fuzzy timestamps (e.g. "4 minutes ago" or "about 1 day ago").
+ *
+ * @name timeago
+ * @version 1.4.1
+ * @requires jQuery v1.2.3+
+ * @author Ryan McGeary
+ * @license MIT License - http://www.opensource.org/licenses/mit-license.php
+ *
+ * For usage and examples, visit:
+ * http://timeago.yarp.com/
+ *
+ * Copyright (c) 2008-2013, Ryan McGeary (ryan -[at]- mcgeary [*dot*] org)
+ */
+
+(function (factory) {
+  if (typeof define === 'function' && define.amd) {
+    // AMD. Register as an anonymous module.
+    define(['jquery'], factory);
+  } else {
+    // Browser globals
+    factory(jQuery);
+  }
+}(function ($) {
+  $.timeago = function(timestamp) {
+    if (timestamp instanceof Date) {
+      return inWords(timestamp);
+    } else if (typeof timestamp === "string") {
+      return inWords($.timeago.parse(timestamp));
+    } else if (typeof timestamp === "number") {
+      return inWords(new Date(timestamp));
+    } else {
+      return inWords($.timeago.datetime(timestamp));
+    }
+  };
+  var $t = $.timeago;
+
+  $.extend($.timeago, {
+    settings: {
+      refreshMillis: 60000,
+      allowPast: true,
+      allowFuture: false,
+      localeTitle: false,
+      cutoff: 0,
+      strings: {
+        prefixAgo: null,
+        prefixFromNow: null,
+        suffixAgo: "ago",
+        suffixFromNow: "from now",
+        inPast: 'any moment now',
+        seconds: "less than a minute",
+        minute: "about a minute",
+        minutes: "%d minutes",
+        hour: "about an hour",
+        hours: "about %d hours",
+        day: "a day",
+        days: "%d days",
+        month: "about a month",
+        months: "%d months",
+        year: "about a year",
+        years: "%d years",
+        wordSeparator: " ",
+        numbers: []
+      }
+    },
+
+    inWords: function(distanceMillis) {
+      if(!this.settings.allowPast && ! this.settings.allowFuture) {
+        throw 'timeago allowPast and allowFuture settings can not both be set to false.';
+      }
+
+      var $l = this.settings.strings;
+      var prefix = $l.prefixAgo;
+      var suffix = $l.suffixAgo;
+      if (this.settings.allowFuture) {
+        if (distanceMillis < 0) {
+          prefix = $l.prefixFromNow;
+          suffix = $l.suffixFromNow;
+        }
+      }
+
+      if(!this.settings.allowPast && distanceMillis >= 0) {
+        return this.settings.strings.inPast;
+      }
+
+      var seconds = Math.abs(distanceMillis) / 1000;
+      var minutes = seconds / 60;
+      var hours = minutes / 60;
+      var days = hours / 24;
+      var years = days / 365;
+
+      function substitute(stringOrFunction, number) {
+        var string = $.isFunction(stringOrFunction) ? stringOrFunction(number, distanceMillis)
: stringOrFunction;
+        var value = ($l.numbers && $l.numbers[number]) || number;
+        return string.replace(/%d/i, value);
+      }
+
+      var words = seconds < 45 && substitute($l.seconds, Math.round(seconds))
||
+        seconds < 90 && substitute($l.minute, 1) ||
+        minutes < 45 && substitute($l.minutes, Math.round(minutes)) ||
+        minutes < 90 && substitute($l.hour, 1) ||
+        hours < 24 && substitute($l.hours, Math.round(hours)) ||
+        hours < 42 && substitute($l.day, 1) ||
+        days < 30 && substitute($l.days, Math.round(days)) ||
+        days < 45 && substitute($l.month, 1) ||
+        days < 365 && substitute($l.months, Math.round(days / 30)) ||
+        years < 1.5 && substitute($l.year, 1) ||
+        substitute($l.years, Math.round(years));
+
+      var separator = $l.wordSeparator || "";
+      if ($l.wordSeparator === undefined) { separator = " "; }
+      return $.trim([prefix, words, suffix].join(separator));
+    },
+
+    parse: function(iso8601) {
+      var s = $.trim(iso8601);
+      s = s.replace(/\.\d+/,""); // remove milliseconds
+      s = s.replace(/-/,"/").replace(/-/,"/");
+      s = s.replace(/T/," ").replace(/Z/," UTC");
+      s = s.replace(/([\+\-]\d\d)\:?(\d\d)/," $1$2"); // -04:00 -> -0400
+      s = s.replace(/([\+\-]\d\d)$/," $100"); // +09 -> +0900
+      return new Date(s);
+    },
+    datetime: function(elem) {
+      var iso8601 = $t.isTime(elem) ? $(elem).attr("datetime") : $(elem).attr("title");
+      return $t.parse(iso8601);
+    },
+    isTime: function(elem) {
+      // jQuery's `is()` doesn't play well with HTML5 in IE
+      return $(elem).get(0).tagName.toLowerCase() === "time"; // $(elem).is("time");
+    }
+  });
+
+  // functions that can be called via $(el).timeago('action')
+  // init is default when no action is given
+  // functions are called with context of a single element
+  var functions = {
+    init: function(){
+      var refresh_el = $.proxy(refresh, this);
+      refresh_el();
+      var $s = $t.settings;
+      if ($s.refreshMillis > 0) {
+        this._timeagoInterval = setInterval(refresh_el, $s.refreshMillis);
+      }
+    },
+    update: function(time){
+      var parsedTime = $t.parse(time);
+      $(this).data('timeago', { datetime: parsedTime });
+      if($t.settings.localeTitle) $(this).attr("title", parsedTime.toLocaleString());
+      refresh.apply(this);
+    },
+    updateFromDOM: function(){
+      $(this).data('timeago', { datetime: $t.parse( $t.isTime(this) ? $(this).attr("datetime")
: $(this).attr("title") ) });
+      refresh.apply(this);
+    },
+    dispose: function () {
+      if (this._timeagoInterval) {
+        window.clearInterval(this._timeagoInterval);
+        this._timeagoInterval = null;
+      }
+    }
+  };
+
+  $.fn.timeago = function(action, options) {
+    var fn = action ? functions[action] : functions.init;
+    if(!fn){
+      throw new Error("Unknown function name '"+ action +"' for timeago");
+    }
+    // each over objects here and call the requested function
+    this.each(function(){
+      fn.call(this, options);
+    });
+    return this;
+  };
+
+  function refresh() {
+    var data = prepareData(this);
+    var $s = $t.settings;
+
+    if (!isNaN(data.datetime)) {
+      if ( $s.cutoff == 0 || Math.abs(distance(data.datetime)) < $s.cutoff) {
+        $(this).text(inWords(data.datetime));
+      }
+    }
+    return this;
+  }
+
+  function prepareData(element) {
+    element = $(element);
+    if (!element.data("timeago")) {
+      element.data("timeago", { datetime: $t.datetime(element) });
+      var text = $.trim(element.text());
+      if ($t.settings.localeTitle) {
+        element.attr("title", element.data('timeago').datetime.toLocaleString());
+      } else if (text.length > 0 && !($t.isTime(element) && element.attr("title")))
{
+        element.attr("title", text);
+      }
+    }
+    return element.data("timeago");
+  }
+
+  function inWords(date) {
+    return $t.inWords(distance(date));
+  }
+
+  function distance(date) {
+    return (new Date().getTime() - date.getTime());
+  }
+
+  // fix for IE6 suckage
+  document.createElement("abbr");
+  document.createElement("time");
+}));
\ No newline at end of file


Mime
View raw message