Nagios widget which shows details for hosts in warning and error but not for OK hosts.

README.md

Intro

This is another widget as replacement for the nagios list provided by https://github.com/QubitProducts/dashing-contrib/wiki/Widget:-Nagios-List

Required

You will need dashing-contrib and nagiosharder

nagios_list_nok.coffee

class Dashing.NagiosListNok extends Dashing.Widget
  @accessor 'hasCritical', ->
    if (@get('critical') && @get('critical').length > 0) then true else false
  @accessor 'hasWarning', ->
    if (@get('warning') && @get('warning').length > 0) then true else false

  @accessor 'isOk', ->
    return !(@get('hasWarning') || @get('hasCritical'))

  @accessor 'criticalMap', ->
    @_groupBy(@get('critical'))

  @accessor 'warningMap', ->
    @_groupBy(@get('warning'))

  @accessor 'okMap', ->
    @_groupBy(@get('ok'))

  @accessor 'criticalCount', ->
    @get('critical').length

  @accessor 'warningCount', ->
    @get('warning').length

  @accessor 'okCount', ->
    @get('ok').length

  @accessor 'wrapperClass', ->
    if @get('hasCritical')
      return 'critical'
    else if @get('hasWarning')
      return 'warning'
    else
      return 'ok'

  ready: ->
    node = $(@node)
    style = 'overflow': 'hidden'
    node.parent().css(style)

  clear: ->


  _groupBy: (items) ->
    maps = {}
    items = items || []
    for item, index in items
      item.last_check = @_parseTime(item.last_check)
      if !maps[item.host]
        maps[item.host] = [item]
      else
        maps[item.host] = maps[item.host].concat item

    results = []
    for key, item of maps
      node = host: key, checks: item
      results = results.concat node

    return results

  _parseTime: (timestamp) ->
    time = new Date(timestamp)
    return "#{@_toTwoDigits(time.getHours())}:#{@_toTwoDigits(time.getMinutes())}"

  _toTwoDigits: (val) ->
    val = val + ''
    if val.length == 1
      return "0#{val}"

    return val

nagios_list_nok.html

<div id="wrapper" data-bind-class="wrapperClass">
    <h1 class="title" data-bind="title" data-showif="title"></h1>

    <ul class="critical-list" data-showif="hasCritical">
        <li data-foreach-item="criticalMap">
            <span class="host-title" data-bind="item.host"></span>
            <div class="checks-list">
                <div class="check-item" data-foreach-check="item.checks">
                    <span class="check-item-name" data-bind="check.service"></span>
                    <span class="check-item-timestamp" data-bind="check.duration"></span>
                </div>
            </div>
        </li>
    </ul>

    <ul class="warning-list" data-showif="hasWarning">
        <li data-foreach-item="warningMap">
            <span class="host-title" data-bind="item.host"></span>
            <div class="checks-list">
                <div class="check-item" data-foreach-check="item.checks">
                    <span class="check-item-name" data-bind="check.service"></span>
                    <span class="check-item-timestamp" data-bind="check.duration"></span>
                </div>
            </div>
        </li>
    </ul>

    <i class="fa fa-thumbs-o-up okIcon" data-showif="isOk"></i>

    <ul class="count-list">
      <li class="pulse" data-showIf="hasCritical" data-bind="criticalCount"></li>
      <li class="pulse" data-showIf="hasWarning" data-bind="warningCount"></li>
      <li data-bind="okCount"></li>
    </ul>
</div>

nagios_list_nok.scss

// settings
$ok-color: transparentize(#1ED65F, 0.3);
$warning-color: transparentize(#F7CE1B, 0.3);
$critical-color: transparentize(#DC5945, 0.3);

// stuff
div.widget-nagios-list-nok {
  vertical-align: top;
  padding: 0;
  position: absolute;
  top: 0;
  bottom: 0;

  #wrapper {
    background: $ok-color;
    padding: 25px 12px;
    height: 100%;

    &.critical {
      background: $critical-color;
    }

    &.warning {
      background: $warning-color;
    }
  }

  ul {
    padding: 0px;
    margin: 0;
    text-align: left;

    li {
      padding: 10px;
      background: rgba(0,0,0,.2);
    }

    .host-title {
      display: block;
      font-size: 25px;
      padding-bottom: 10px;
    }

    .checks-list {
      .check-item {
        display: inline-block;
        margin-bottom: 18px;
        margin-right: 5px;
        border-radius: 5px;

        .check-item-name {
          padding: 3px 15px 5px 15px;
          margin-right: 0px;
          background: rgba(0,0,0,0.3);
        }
        .check-item-timestamp {
          padding: 3px 15px 5px 15px;
          margin-left: -6px;
        }
      }
    }
  }

  .count-list {
    position: absolute;
    top: 0;
    right: 0;

    li {
      float: left;
      min-width: 50px;
      height: 50px;
      display: block;
      background: rgba(255, 255, 255, 0.3);
      line-height: 50px;
      text-align: center;
      font-size: 35px;
      margin-left: 10px;

      &.pulse {
        -webkit-animation: pulse 2s infinite;
      }
    }
  }

  .okIcon {
    font-size: 180px;
    margin-top: 30px;
    color: rgba(255, 255, 255, 0.4);
  }
}

@-webkit-keyframes pulse {
  0% {background-color: rgba(255, 255, 255, 0.3);}
  50% {background-color: rgba(0, 0, 0, 0.3);}
  100% {background-color: rgba(255, 255, 255, 0.3);}
}