oncall/client/browser/components/page-header/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.

/**
 * The page header.
 *
 * In the page header panel, we show the following items:
 * - At the left side, we show the logo, title, and the date+time of the data
 *   currently shown in the dashboard.
 * - At the center, we show the current view level and navigation links to go
 *   back to higher levels.
 * - At the right side, we show the pictures of the current oncalls.
 */

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

var staleDataThresholdInSec = 900;

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

/** Constructor. */
function create(data) {
  var state = hg.state({
    // The time period of the current data.
    startTimestamp: hg.value(data.startTimestamp),
    endTimestamp: hg.value(data.endTimestamp),

    // IDs of current oncalls.
    oncallIds: hg.array(data.oncallIds),

    // Whether the data is being loaded.
    loadingData: hg.value(data.loadingData),

    // Whether there is any error loading data.
    hasLoadingFailure: hg.value(data.hasLoadingFailure)
  });

  return state;
}

/** The main render function. */
function render(state) {
  // Oncalls' pictures.
  var pics = state.oncallIds.map(
    function(oncallId) {
      return h('img', {
        'src': 'pic?id=' + oncallId,
        'title': oncallId
      });
    }
  );

  // Timestamp for current data.
  var strTime = '';
  var timeClass = '.time';
  var infoClass = '.info';
  var staleData = false;
  if (state.endTimestamp >= 0) {
    var date = new Date(state.endTimestamp * 1000);
    strTime = dateformat(date);

    // Check stale data.
    var curTs = Math.round(new Date().getTime() / 1000.0);
    if (curTs - state.endTimestamp > staleDataThresholdInSec) {
      infoClass += '.stale-data';
      staleData = true;
    }
  }
  // It also shows whether the data is being loaded or errors.
  if (state.loadingData) {
    strTime = 'LOADING...';
    timeClass += '.loading';
  }
  if (state.hasLoadingFailure) {
    strTime = 'FAILED TO LOAD DATA';
    timeClass += '.failure';
  }
  if (staleData) {
    strTime = 'STALE DATA [' + strTime + ']';
    timeClass += '.failure';
  }

  return h('div.header', [
      h('div' + infoClass, [
        h('div.dashboard-title', [
          h('div#logo', ''),
        ]),
        h('div.title-and-time', [
          h('div.title', 'Vanadium Oncall Dashboard'),
          h('div' + timeClass, strTime)
        ]),
        h('div.pics', pics)
      ])
  ]);
}