User Agent Stats

frontend/src/Indexer/Stats/Stats.js

@@ -4,6 +4,7 @@ import BarChart from 'Components/Chart/BarChart';
 import DoughnutChart from 'Components/Chart/DoughnutChart';
 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 getErrorMessage from 'Utilities/Object/getErrorMessage';
 import styles from './Stats.css';
@@ -45,60 +46,106 @@ function getNumberGrabsData(indexerStats) {
   return data;
 }
 
+function getUserAgentGrabsData(indexerStats) {
+  const data = indexerStats.map((indexer) => {
+    return {
+      label: indexer.userAgent ? indexer.userAgent : 'Other',
+      value: indexer.numberOfGrabs
+    };
+  });
+
+  data.sort((a, b) => {
+    return b.value - a.value;
+  });
+
+  return data;
+}
+
+function getUserAgentQueryData(indexerStats) {
+  const data = indexerStats.map((indexer) => {
+    return {
+      label: indexer.userAgent ? indexer.userAgent : 'Other',
+      value: indexer.numberOfQueries
+    };
+  });
+
+  data.sort((a, b) => {
+    return b.value - a.value;
+  });
+
+  return data;
+}
+
 function Stats(props) {
   const {
-    items,
+    item,
     isFetching,
     isPopulated,
     error
   } = props;
 
-  const isLoaded = !!(!error && isPopulated && items.length);
+  const isLoaded = !!(!error && isPopulated);
 
   return (
     <PageContent>
       <PageToolbar />
-      {
-        isFetching && !isPopulated &&
-          <LoadingIndicator />
-      }
+      <PageContentBody>
+        {
+          isFetching && !isPopulated &&
+            <LoadingIndicator />
+        }
 
-      {
-        !isFetching && !!error &&
-          <div className={styles.errorMessage}>
-            {getErrorMessage(error, 'Failed to load indexer stats from API')}
-          </div>
-      }
+        {
+          !isFetching && !!error &&
+            <div className={styles.errorMessage}>
+              {getErrorMessage(error, 'Failed to load indexer stats from API')}
+            </div>
+        }
 
-      {
-        isLoaded &&
-          <div>
-            <div className={styles.fullWidthChart}>
-              <BarChart
-                data={getAverageResponseTimeData(items)}
-                title='Average Response Times (ms)'
-              />
+        {
+          isLoaded &&
+            <div>
+              <div className={styles.fullWidthChart}>
+                <BarChart
+                  data={getAverageResponseTimeData(item.indexers)}
+                  title='Average Response Times (ms)'
+                />
+              </div>
+              <div className={styles.halfWidthChart}>
+                <DoughnutChart
+                  data={getTotalRequestsData(item.indexers)}
+                  title='Total Indexer Queries'
+                />
+              </div>
+              <div className={styles.halfWidthChart}>
+                <BarChart
+                  data={getNumberGrabsData(item.indexers)}
+                  title='Total Indexer Grabs'
+                />
+              </div>
+              <div className={styles.halfWidthChart}>
+                <BarChart
+                  data={getUserAgentQueryData(item.userAgents)}
+                  title='Total User Agent Queries'
+                  horizontal={true}
+                />
+              </div>
+              <div className={styles.halfWidthChart}>
+                <BarChart
+                  data={getUserAgentGrabsData(item.userAgents)}
+                  title='Total User Agent Grabs'
+                  horizontal={true}
+                />
+              </div>
             </div>
-            <div className={styles.halfWidthChart}>
-              <DoughnutChart
-                data={getTotalRequestsData(items)}
-                title='Total Indexer Queries'
-              />
-            </div>
-            <div className={styles.halfWidthChart}>
-              <BarChart
-                data={getNumberGrabsData(items)}
-                title='Total Indexer Grabs'
-              />
-            </div>
-          </div>
-      }
+        }
+      </PageContentBody>
     </PageContent>
   );
 }
 
 Stats.propTypes = {
-  items: PropTypes.arrayOf(PropTypes.object).isRequired,
+  item: PropTypes.object.isRequired,
   isFetching: PropTypes.bool.isRequired,
   isPopulated: PropTypes.bool.isRequired,
   error: PropTypes.object,