oncall/client/browser/components/metrics-group/index.js

// Copyright 2015 The Vanadium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style
// license that can be found in the LICENSE file.

/**
 * A metric group shows a set of metric items in multiple rows where each row
 * has "numColumns" items. It can also show a set of links (optionally) after
 * the group title.
 */

var hg = require('mercury');
var h = require('mercury').h;

var metricItemComponent = require('../metric-item');

module.exports = create;
module.exports.render = render;

var numColumns = 5;

/** Constructor. */
function create(data) {
  // Transform data.metrics to an array of metricItemComponents.
  var metrics = data.metrics.map(function(metric) {
    return metricItemComponent({
      metric: metric,
      mouseOffsetFactor: data.mouseOffsetFactor,
      hoveredMetric: data.hoveredMetric
    });
  });

  // Calculate overall health.
  var healthy = true;
  metrics.forEach(function(metric) {
    healthy &= metric.healthy;
  });

  var state = hg.state({
    title: data.title,
    links: data.links,
    healthy: healthy,
    metricItems: hg.array(metrics)
  });

  return state;
}

/** The main render function. */
function render(state) {
  // Organize metric items in rows and fill the empty space with fillers.
  var itemSize = state.metricItems.length;
  var paddedItemSize = (Math.ceil(itemSize / numColumns)) * numColumns;
  var rows = [];
  var curRow = null;
  for (var i = 0; i < paddedItemSize; i++) {
    if (i % numColumns  === 0) {
      if (curRow !== null) {
        rows.push(h('div.metrics-group-row', curRow));
      }
      curRow = [];
    }
    if (i > itemSize - 1) {
      curRow.push(h('div.metric-item-filler'));
    } else {
      curRow.push(metricItemComponent.render(state.metricItems[i]));
    }
  }
  rows.push(h('div.metrics-group-row', curRow));

  // Group title and links.
  var titleItems = [
      h('div.metrics-group-title', h('span', state.title))
  ];
  if (state.links) {
    var links = state.links.map(function(link) {
      return h('a', {
        href: link.link,
        target: '_blank'
      }, link.name);
    });
    titleItems.push(h('div.link-container', links));
  }

  return h('div.metrics-group', [
      h('div.metrics-group-title-container', titleItems),
      h('div.metrics-group-items-container', [
        h('div.metrics-group-items', rows)
      ])
  ]);
}