Make it possible to set the limit/thresholds on the summary page (#2997)

lib/cli/cli.js

@@ -1280,6 +1280,10 @@ module.exports.parseCommandLine = function parseCommandLine() {
       group: 'HTML',
       default: htmlConfig.html.summaryBoxes
     })
+    .option('html.summaryBoxesThresholds', {
+      describe: '',
+      group: 'HTML'
+    })
     .option('summary', {
       describe: 'Show brief text summary to stdout',
       default: false,
@@ -1490,6 +1494,14 @@ module.exports.parseCommandLine = function parseCommandLine() {
     );
   }
 
+  if (argv.html && argv.html.summaryBoxesThresholds) {
+    argv.html.summaryBoxesThresholds = JSON.parse(
+      fs.readFileSync(path.resolve(argv.html.summaryBoxesThresholds), {
+        encoding: 'utf8'
+      })
+    );
+  }
+
   if (argv.summaryDetail) argv.summary = true;
 
   if (

lib/plugins/html/setup/summaryBoxes.js

@@ -1,10 +1,11 @@
 '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');
+const defaultLimits = require('./summaryBoxesDefaultLimits');
+const merge = require('lodash.merge');
 
 function infoBox(stat, name, formatter) {
   if (typeof stat === 'undefined') {
@@ -14,82 +15,36 @@ function infoBox(stat, name, formatter) {
   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) {
+function scoreBox(stat, name, formatter, box, limits) {
   if (typeof stat === 'undefined') {
     return undefined;
   }
 
   let label = 'info';
 
-  if (box === 'timings.firstPaint' || box === 'timings.FirstVisualChange') {
-    if (stat.median < 1000) {
+  if (limits && limits.green) {
+    if (stat.median >= limits.green) {
       label = 'ok';
-    } else if (stat.median < 2000) {
+    } else if (stat.median >= limits.yellow) {
       label = 'warning';
     } else {
       label = 'error';
     }
-  } else if (box === 'timings.VisualReadiness') {
-    if (stat.median < 500) {
+  }
+  return _box(stat, name, label, formatter, name.replace(/\s/g, ''));
+}
+
+function timingBox(stat, name, formatter, box, limits) {
+  if (typeof stat === 'undefined') {
+    return undefined;
+  }
+
+  let label = 'info';
+
+  if (limits && limits.green) {
+    if (stat.median < limits.green) {
       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) {
+    } else if (stat.median < limits.yellow) {
       label = 'warning';
     } else {
       label = 'error';
@@ -99,34 +54,16 @@ function timingBox(stat, name, formatter, box) {
   return _box(stat, name, label, formatter, name.replace(/\s/g, ''));
 }
 
-function pagexrayBox(stat, name, formatter, box) {
+function pagexrayBox(stat, name, formatter, box, limits) {
   if (typeof stat === 'undefined') {
     return undefined;
   }
 
   let label = 'info';
-  if (box === 'requests.total') {
-    if (stat.median < 80) {
+  if (limits && limits.green) {
+    if (stat.median < limits.green) {
       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) {
+    } else if (stat.median < limits.yellow) {
       label = 'warning';
     } else {
       label = 'error';
@@ -136,12 +73,21 @@ function pagexrayBox(stat, name, formatter, box) {
   return _box(stat, name, label, formatter, name.replace(/\s/g, ''));
 }
 
-function axeBox(stat, name, formatter, url) {
+function axeBox(stat, name, formatter, url, limits) {
   if (typeof stat === 'undefined') {
     return undefined;
   }
-  const label =
-    stat.median === 0 ? 'ok' : stat.median < 2 ? 'warning' : 'error';
+  let label = 'info';
+
+  if (limits && limits.green) {
+    if (stat.median === limits.green) {
+      label = 'ok';
+    } else if (stat.median === limits.yellow) {
+      label = 'warning';
+    } else {
+      label = 'error';
+    }
+  }
 
   if (stat.median !== undefined) {
     return _box(stat, name, label, formatter, url);
@@ -166,6 +112,8 @@ module.exports = function(data, html) {
   }
   const tools = Object.keys(data);
   const boxes = [];
+
+  const limits = merge(defaultLimits, html.summaryBoxesThresholds || {});
   for (let tool of tools) {
     const configuredBoxes = toArray(html.summaryBoxes);
     for (let box of configuredBoxes) {
@@ -191,13 +139,18 @@ module.exports = function(data, html) {
         }
 
         const metric = get(data, tool + '.summary.' + friendly.summaryPath);
+        const boxLimits = get(limits, box);
 
         if (metric !== undefined) {
-          boxes.push(boxType(metric, friendly.name, friendly.format, box));
+          boxes.push(
+            boxType(metric, friendly.name, friendly.format, box, boxLimits)
+          );
         } else if (friendly.path) {
           const metric = get(data, tool + '.summary.' + friendly.path);
           if (metric !== undefined) {
-            boxes.push(boxType(metric, friendly.name, friendly.format, box));
+            boxes.push(
+              boxType(metric, friendly.name, friendly.format, box, boxLimits)
+            );
           } else {
             log.verbose('Summary box without any match:' + friendly.name);
           }

lib/plugins/html/setup/summaryBoxesDefaultLimits.js

@@ -0,0 +1,84 @@
+'use strict';
+module.exports = {
+  score: {
+    score: {
+      green: 90,
+      yellow: 80
+    },
+    accessibility: {
+      green: 90,
+      yellow: 80
+    },
+    bestpractice: {
+      green: 90,
+      yellow: 80
+    },
+    privacy: {
+      green: 90,
+      yellow: 80
+    },
+    performance: {
+      green: 90,
+      yellow: 80
+    }
+  },
+  // All timings are in ms
+  timings: {
+    firstPaint: { green: 1000, yellow: 2000 },
+    fullyLoaded: {},
+    pageLoadTime: {},
+    FirstVisualChange: { green: 1000, yellow: 2000 },
+    LastVisualChange: {},
+    SpeedIndex: { green: 2000, yellow: 3000 },
+    PerceptualSpeedIndex: {},
+    VisualReadiness: { green: 500, yellow: 1000 },
+    VisualComplete: {}
+  },
+  requests: {
+    total: { green: 80, yellow: 200 },
+    javascript: {},
+    css: {},
+    image: {}
+  },
+  // Size in byte
+  transferSize: {
+    total: { green: 1000000, yellow: 1500000 },
+    html: {},
+    css: {},
+    image: {},
+    javascript: {}
+  },
+  contentSize: {
+    javascript: { green: 100000, yellow: 150000 }
+  },
+  thirdParty: {
+    requests: {},
+    transferSize: {}
+  },
+  axe: {
+    critical: { green: 0, yellow: 1 },
+    serious: { green: 0, yellow: 1 },
+    minor: { green: 0, yellow: 1 },
+    moderate: { green: 0, yellow: 1 }
+  },
+  cpu: {
+    longTasks: { green: 1, yellow: 3 },
+    totalBlockingTime: { green: 1, yellow: 500 },
+    maxPotentialFid: { green: 1, yellow: 300 },
+    longTasksTotalDuration: { green: 100, yellow: 200 }
+  },
+  sustainable: {
+    totalCO2: {},
+    co2PerPageView: {},
+    co2FirstParty: {},
+    co2ThirdParty: {}
+  },
+  webpagetest: {
+    SpeedIndex: {},
+    lastVisualChange: {},
+    render: {},
+    visualComplete: {},
+    visualComplete95: {},
+    fullyLoaded: {}
+  }
+};