Fixed: Separate failed grabs

Fixes #81

frontend/src/Components/Chart/BarChart.js

@@ -1,8 +1,18 @@
 import Chart from 'chart.js/auto';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import { kinds } from 'Helpers/Props';
 import colors from 'Styles/Variables/colors';
 
+function getColors(kind) {
+
+  if (kind === kinds.WARNING) {
+    return colors.failedColors.reverse();
+  }
+
+  return colors.chartColors;
+}
+
 class BarChart extends Component {
   constructor(props) {
     super(props);
@@ -30,7 +40,7 @@ class BarChart extends Component {
         datasets: [{
           label: this.props.title,
           data: this.props.data.map((d) => d.value),
-          backgroundColor: colors.chartColors
+          backgroundColor: getColors(this.props.kind)
         }]
       }
     });
@@ -53,14 +63,16 @@ BarChart.propTypes = {
   data: PropTypes.arrayOf(PropTypes.object).isRequired,
   horizontal: PropTypes.bool,
   legend: PropTypes.bool,
-  title: PropTypes.string.isRequired
+  title: PropTypes.string.isRequired,
+  kind: PropTypes.oneOf(kinds.all).isRequired
 };
 
 BarChart.defaultProps = {
   data: [],
   horizontal: false,
   legend: false,
-  title: ''
+  title: '',
+  kind: kinds.INFO
 };
 
 export default BarChart;

frontend/src/Indexer/Stats/Stats.js

@@ -7,6 +7,7 @@ import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import PageContent from 'Components/Page/PageContent';
 import PageContentBody from 'Components/Page/PageContentBody';
 import PageToolbar from 'Components/Page/Toolbar/PageToolbar';
+import { kinds } from 'Helpers/Props';
 import getErrorMessage from 'Utilities/Object/getErrorMessage';
 import styles from './Stats.css';
 
@@ -21,6 +22,22 @@ function getAverageResponseTimeData(indexerStats) {
   return data;
 }
 
+function getFailureRateData(indexerStats) {
+  const data = indexerStats.map((indexer) => {
+    return {
+      label: indexer.indexerName,
+      value: (indexer.numberOfFailedQueries + indexer.numberOfFailedRssQueries + indexer.numberOfFailedAuthQueries + indexer.numberOfFailedGrabs) /
+        (indexer.numberOfQueries + indexer.numberOfRssQueries + indexer.numberOfAuthQueries + indexer.numberOfGrabs)
+    };
+  });
+
+  data.sort((a, b) => {
+    return b.value - a.value;
+  });
+
+  return data;
+}
+
 function getTotalRequestsData(indexerStats) {
   const data = {
     labels: indexerStats.map((indexer) => indexer.indexerName),
@@ -47,7 +64,7 @@ function getNumberGrabsData(indexerStats) {
   const data = indexerStats.map((indexer) => {
     return {
       label: indexer.indexerName,
-      value: indexer.numberOfGrabs
+      value: indexer.numberOfGrabs - indexer.numberOfFailedGrabs
     };
   });
 
@@ -153,6 +170,13 @@ function Stats(props) {
                   title='Average Response Times (ms)'
                 />
               </div>
+              <div className={styles.fullWidthChart}>
+                <BarChart
+                  data={getFailureRateData(item.indexers)}
+                  title='Indexer Failure Rate'
+                  kind={kinds.WARNING}
+                />
+              </div>
               <div className={styles.halfWidthChart}>
                 <StackedBarChart
                   data={getTotalRequestsData(item.indexers)}
@@ -162,7 +186,7 @@ function Stats(props) {
               <div className={styles.halfWidthChart}>
                 <BarChart
                   data={getNumberGrabsData(item.indexers)}
-                  title='Total Indexer Grabs'
+                  title='Total Indexer Successful Grabs'
                 />
               </div>
               <div className={styles.halfWidthChart}>

frontend/src/Styles/Variables/colors.js

@@ -186,5 +186,6 @@ module.exports = {
   //
   // Charts
 
+  failedColors: ['#ffbeb2', '#feb4a6', '#fdab9b', '#fca290', '#fb9984', '#fa8f79', '#f9856e', '#f77b66', '#f5715d', '#f36754', '#f05c4d', '#ec5049', '#e74545', '#e13b42', '#da323f', '#d3293d', '#ca223c', '#c11a3b', '#b8163a', '#ae123a'],
   chartColors: ['#f4d166', '#f6c760', '#f8bc58', '#f8b252', '#f7a84a', '#f69e41', '#f49538', '#f38b2f', '#f28026', '#f0751e', '#eb6c1c', '#e4641e', '#de5d1f', '#d75521', '#cf4f22', '#c64a22', '#bc4623', '#b24223', '#a83e24', '#9e3a26']
 };