From 6e2ae255196cdbea0b6b84d136e9d4a14b0057d0 Mon Sep 17 00:00:00 2001
From: Halla Moore <halla@nylas.com>
Date: Thu, 14 Jul 2016 18:01:52 -0700
Subject: [PATCH] Add a sum line to the dashboard's process load counts

---
 packages/nylas-dashboard/public/css/app.css   |  6 +++
 .../public/js/process-loads.jsx               | 49 ++++++++++---------
 2 files changed, 32 insertions(+), 23 deletions(-)

diff --git a/packages/nylas-dashboard/public/css/app.css b/packages/nylas-dashboard/public/css/app.css
index 2cfe5fe04..2a874590a 100644
--- a/packages/nylas-dashboard/public/css/app.css
+++ b/packages/nylas-dashboard/public/css/app.css
@@ -239,6 +239,12 @@ pre {
   font-size: 12px;
 }
 
+.sum-accounts {
+  border-top: solid black 1px;
+  margin-top: 5px;
+  padding-top: 5px;
+}
+
 .account-filter {
   padding-left: 5px;
 }
diff --git a/packages/nylas-dashboard/public/js/process-loads.jsx b/packages/nylas-dashboard/public/js/process-loads.jsx
index dc412a7e8..ceb8334b3 100644
--- a/packages/nylas-dashboard/public/js/process-loads.jsx
+++ b/packages/nylas-dashboard/public/js/process-loads.jsx
@@ -1,30 +1,33 @@
 const React = window.React;
 
-class ProcessLoads extends React.Component {
-
-  render() {
-    let entries;
-    if (this.props.counts == null || Object.keys(this.props.counts).length === 0) {
-      entries = "No Data"
+function ProcessLoads(props) {
+  let entries;
+  let sumElem;
+  if (props.counts == null || Object.keys(props.counts).length === 0) {
+    entries = "No Data";
+    sumElem = "";
+  } else {
+    entries = [];
+    let sum = 0;
+    for (const processName of Object.keys(props.counts)) {
+      const count = props.counts[processName];
+      sum += count;
+      entries.push(
+        <div className="load-count">
+          <b>{processName}</b>: {count} accounts
+        </div>
+      );
     }
-    else {
-      entries = [];
-      for (const processName of Object.keys(this.props.counts).sort()) {
-        entries.push(
-          <div className="load-count">
-            <b>{processName}</b>: {this.props.counts[processName]} accounts
-          </div>
-        );
-      }
-    }
-
-    return (
-      <div className="process-loads">
-        <div className="section">Process Loads </div>
-        {entries}
-      </div>
-    )
+    sumElem = <div className="sum-accounts">Total Accounts: {sum} </div>
   }
+
+  return (
+    <div className="process-loads">
+      <div className="section">Process Loads </div>
+      {entries}
+      {sumElem}
+    </div>
+  )
 }
 
 ProcessLoads.propTypes = {