sitespeed.io/lib/plugins/html/setup/summaryBoxes.js

'use strict';

const log = require('intel').getLogger('sitespeedio.plugin.html');
const h = require('../../../support/helpers');
const toArray = require('../../../support/util').toArray;
const friendlyNames = require('../../../support/friendlynames');
const get = require('lodash.get');

function infoBox(stat, name, formatter) {
  if (typeof stat === 'undefined') {
    return undefined;
  }

  return _box(stat, name, 'info', formatter, name.replace(/\s/g, ''));
}

function scoreBox(stat, name, formatter) {
  if (typeof stat === 'undefined') {
    return undefined;
  }

  return _box(
    stat,
    name,
    h.scoreLabel(stat.median),
    formatter,
    name.replace(/\s/g, '')
  );
}

function timingBox(stat, name, formatter, box) {
  if (typeof stat === 'undefined') {
    return undefined;
  }

  let label = 'info';

  if (box === 'timings.firstPaint' || box === 'timings.FirstVisualChange') {
    if (stat.median < 1000) {
      label = 'ok';
    } else if (stat.median < 2000) {
      label = 'warning';
    } else {
      label = 'error';
    }
  } else if (box === 'timings.VisualReadiness') {
    if (stat.median < 500) {
      label = 'ok';
    } else if (stat.median < 1000) {
      label = 'warning';
    } else {
      label = 'error';
    }
  } else if (
    box === 'timings.SpeedIndex' ||
    box === 'timings.PerceptualSpeedIndex'
  ) {
    if (stat.median < 2000) {
      label = 'ok';
    } else if (stat.median < 3000) {
      label = 'warning';
    } else {
      label = 'error';
    }
  } else if (box === 'cpu.longTasksTotalDuration') {
    if (stat.median < 100) {
      label = 'ok';
    } else if (stat.median < 200) {
      label = 'warning';
    } else {
      label = 'error';
    }
  } else if (box === 'cpu.longTasks') {
    if (stat.median === 0) {
      label = 'ok';
    } else if (stat.median < 3) {
      label = 'warning';
    } else {
      label = 'error';
    }
  } else if (box === 'cpu.maxPotentialFid') {
    if (stat.median === 0) {
      label = 'ok';
    } else if (stat.median < 300) {
      label = 'warning';
    } else {
      label = 'error';
    }
  } else if (box === 'cpu.totalBlockingTime') {
    if (stat.median === 0) {
      label = 'ok';
    } else if (stat.median < 500) {
      label = 'warning';
    } else {
      label = 'error';
    }
  }

  return _box(stat, name, label, formatter, name.replace(/\s/g, ''));
}

function pagexrayBox(stat, name, formatter, box) {
  if (typeof stat === 'undefined') {
    return undefined;
  }

  let label = 'info';
  if (box === 'requests.total') {
    if (stat.median < 80) {
      label = 'ok';
    } else if (stat.median < 200) {
      label = 'warning';
    } else {
      label = 'error';
    }
  } else if (box === 'transferSize.total') {
    // in bytes
    if (stat.median < 1000000) {
      label = 'ok';
    } else if (stat.median < 1500000) {
      label = 'warning';
    } else {
      label = 'error';
    }
  } else if (box === 'contentSize.javascript') {
    // in bytes
    if (stat.median < 100000) {
      label = 'ok';
    } else if (stat.median < 150000) {
      label = 'warning';
    } else {
      label = 'error';
    }
  }

  return _box(stat, name, label, formatter, name.replace(/\s/g, ''));
}

function axeBox(stat, name, formatter, url) {
  if (typeof stat === 'undefined') {
    return undefined;
  }
  const label =
    stat.median === 0 ? 'ok' : stat.median < 2 ? 'warning' : 'error';

  if (stat.median !== undefined) {
    return _box(stat, name, label, formatter, url);
  }
}

function _box(stat, name, label, formatter, url) {
  const median = formatter ? formatter(stat.median) : stat.median;
  const p90 = formatter ? formatter(stat.p90) : stat.p90;
  return {
    name,
    label,
    median,
    p90,
    url
  };
}

module.exports = function(data, html) {
  if (!data) {
    return [];
  }
  const tools = Object.keys(data);
  const boxes = [];
  for (let tool of tools) {
    const configuredBoxes = toArray(html.summaryBoxes);
    for (let box of configuredBoxes) {
      // const [part1, part2] = box.split('.');
      const friendly = get(friendlyNames, tool + '.' + box);
      if (friendly) {
        let boxType;
        switch (tool) {
          case 'coach':
            boxType = scoreBox;
            break;
          case 'axe':
            boxType = axeBox;
            break;
          case 'pagexray':
            boxType = pagexrayBox;
            break;
          case 'browsertime':
            boxType = timingBox;
            break;
          default:
            boxType = infoBox;
        }

        const metric = get(data, tool + '.summary.' + friendly.summaryPath);
        if (metric !== undefined) {
          boxes.push(boxType(metric, friendly.name, friendly.format, box));
        } else if (friendly.path) {
          const metric = get(data, tool + '.summary.' + friendly.path);
          if (metric !== undefined) {
            boxes.push(boxType(metric, friendly.name, friendly.format, box));
          } else {
            log.verbose('Summary box without any match:' + friendly.name);
          }
        }
      }
    }
  }
  return boxes;
};