cachet-status-popover-example.js

var initStatus = function (components) {
  var content = '',
      allGood = true;

  // Iterate over all components from Cachet API response and build
  // HTML code for popover window.
  //
  // One component is represened with its name and state icon.
  //
  // Example:
  //
  //   <div>
  //     <span class="glyphicon glyphicon-ok-sign text-success"></span>
  //     Multiposting API
  //   </div>
  for (var i = 0; i < components.length; i++) {
    content += '<div>';
    if (components[i].status === 'operational') {
      content += '<span class="glyphicon glyphicon-ok-sign text-success"></span>';
    } else {
      content += '<span class="glyphicon glyphicon-exclamation-sign text-danger"></span>';
    }
    content += ' ' + components[i].name;
    content += '</div>';

    if (components[i].status !== 'operational') {
      allGood = false;
    }
  }

  var status = $('#popover-example'),
      icon = $('#popover-example > span.glyphicon');

  // Set status icon state
  icon.removeClass('glyphicon-question-sign')
      .toggleClass('glyphicon-ok-sign text-success', allGood)
      .toggleClass('glyphicon-exclamation-sign text-danger', !allGood);

  // Set content of the popover window and activate it
  status.data('content', content)
        .popover({ trigger: 'hover focus', html: true });
};

new CachetStatus('https://status.gohiring.com', initStatus);