dasching widget for icinga2

icinga2.coffee

class Dashing.Icinga2 extends Dashing.Widget
  @accessor 'current', Dashing.AnimatedValue

  onData: (data) ->
    if data.color
      # clear existing "color-*" classes
      $(@get('node')).attr 'class', (i,c) ->
        c.replace /\bcolor-\S+/g, ''
      # add new class
      $(@get('node')).addClass "color-#{data.color}"

  checkUpdate: =>
    if updatedAt = @get('updatedAt')
      timestamp = new Date(updatedAt * 1000)
      now = new Date()
      diff = now.getTime() - timestamp.getTime()
      if diff > 30000
        @onData({color:'grey'})

icinga2.html

<h1 class="title" data-bind="title"></h1>

<ul class="list-nostyle">
  <li data-foreach-item="items">
    <div data-bind-class="item.color">
      <span class="label" data-bind="item.label"></span>
      <span class="value" data-bind="item.value"></span>
    </div>
  </li>
</ul>

<p class="updated-at" data-bind="updatedAtMessage"></p>

icinga2.scss

// ----------------------------------------------------------------------------
// Sass declarations
// ----------------------------------------------------------------------------
$background-color:  #165aa8;
$value-color:       #fff;
$label-color:       rgba(255, 255, 255, 0.7);

$background-color-green:  green;
$background-color-green-1:  lighten($background-color-green, 60%);
$background-color-green-2:  darken($background-color-green, 30%);
$value-color-green:       #fff;

$background-color-red:  red;
$background-color-red-1:  lighten($background-color-red, 60%);
$background-color-red-2:  darken($background-color-red, 30%);
$value-color-red:       #fff;

$background-color-yellow:  yellow;
$background-color-yellow-1:  lighten($background-color-yellow, 60%);
$background-color-yellow-2:  darken($background-color-yellow, 30%);
$value-color-yellow:       #fff;

$background-color-purple:  #aa44ff;
$background-color-purple-1:  #aa44ff;
$background-color-purple-2:  #aa44ff;
$value-color-purple:       #fff;

$background-color-grey:  #999999;
$value-color-grey:       #fff;

$title-color:       rgba(255, 255, 255, 0.7);
// $title-color-uns:   rgba(0, 0, 0, 0.7);
$moreinfo-color:    rgba(255, 255, 255, 0.7);

@-webkit-keyframes icinga-yellow-background {
    0%   { background-color: $background-color-yellow-1; }
    50%  { background-color: $background-color-yellow-2; }
    100% { background-color: $background-color-yellow-1; }
}
@-webkit-keyframes icinga-red-background {
    0%   { background-color: $background-color-red-1; }
    50%  { background-color: $background-color-red-2; }
    100% { background-color: $background-color-red-1; }
}
@-webkit-keyframes icinga-green-background {
    0%   { background-color: $background-color-green-1; }
    50%  { background-color: $background-color-green-2; }
    100% { background-color: $background-color-green-1; }
}
@-webkit-keyframes icinga-purple-background {
    0%   { background-color: $background-color-purple-1; }
    50%  { background-color: $background-color-purple-2; }
    100% { background-color: $background-color-purple-1; }
}
@mixin animation($animation-name, $duration, $function, $animation-iteration-count:"infinite"){
    -webkit-animation:  $animation-name $duration $function #{$animation-iteration-count};
    -moz-animation:     $animation-name $duration $function #{$animation-iteration-count};
    -ms-animation:      $animation-name $duration $function #{$animation-iteration-count};
}


// ----------------------------------------------------------------------------
// Widget-number styles
// ----------------------------------------------------------------------------
.widget-icinga2 {

/*   background-color: $background-color; */

  .title {
    color: $title-color;
    font-size: 25px;
    text-align: center;
    margin-top: -3em;
  }

  .list-nostyle {
    list-style: none;
    text-align: left;
  }

  .list-nostyle div {
    padding: 0 4px 2px 4px;
    border-radius: 3px
  }

  .list-nostyle div.green {
      background-color: $background-color-green;
      .value { color: $value-color-green; }
  }
  .list-nostyle div.green-blink {
      background-color: $background-color-green;
      @include animation(icinga-green-background, 4s, ease);
      .value { color: $value-color-green; }
  }
  .list-nostyle div.red {
      background-color: $background-color-red;
      .value { color: $value-color-red; }
  }
  .list-nostyle div.red-blink {
      background-color: $background-color-red;
      @include animation(icinga-red-background, 4s, ease);
      .value { color: $value-color-red; }
  }
  .list-nostyle div.yellow {
      background-color: $background-color-yellow;
      .value { color: $value-color-yellow; }
  }
  .list-nostyle div.yellow-blink {
      @include animation(icinga-yellow-background, 4s, ease);
      background-color: $background-color-yellow;
      .value { color: $value-color-yellow; }
  }
  .list-nostyle div.purple {
      background-color: $background-color-purple;
      .value { color: $value-color-purple; }
  }
  .list-nostyle div.purple-blink {
      @include animation(icinga-purple-background, 4s, ease);
      background-color: $background-color-purple;
      .value { color: $value-color-purple; }
  }
  .list-nostyle div.grey {
      background-color: $background-color-grey;
      .value { color: $value-color-grey; }
  }

  .label {
    color: $label-color;
    font-size: 15px;
  }

  .value {
    float: right;
    margin-left: 50px;
    margin-top: 5px;
    font-weight: 500;
    font-size: 15px;
    color: $value-color;
  }
}

to use them, include this into the dashing dashboard:

    <li data-row="3" data-col="1" data-sizex="1" data-sizey="1">
      <div data-id="icinga-hosts" data-view="Icinga2" data-title="Icinga2 Hosts"></div>
    </li>

    <li data-row="3" data-col="1" data-sizex="1" data-sizey="1">
      <div data-id="icinga-services" data-view="Icinga2" data-title="Icinga2 Services"></div>
    </li>

and this into the dashing job:

  hosts_data = [
    { label: 'Up'          , value: hosts_up, color: 'green' },
    { label: 'Down'        , value: hosts_down },
    { label: 'Pending'     , value: hosts_pending },
    { label: 'Unreachable' , value: hosts_unreachable },
    { label: 'In Downtime' , value: hosts_in_downtime },
    { label: 'Acknowledged', value: hosts_ack },
  ]

  services_data = [
    { label: 'ok', value: services_ok },
    { label: 'warning', value: services_warning },
    { label: 'critical', value: services_critical },
    { label: 'unknown', value: services_unknown },
    { label: 'pending', value: services_pending },
    { label: 'in downtime', value: services_in_downtime },
    { label: 'Acknowledged', value: services_acknowledged }
  ]


  send_event('icinga-hosts', {
    title: format( '%d Hosts', icinga.hosts_all ),
    items: hosts_data
  })

  send_event('icinga-services', {
    title: format( '%d Services', icinga.services_all ),
    items: services_data
  })