Add a sum line to the dashboard's process load counts

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;
 }

packages/nylas-dashboard/public/js/process-loads.jsx

@@ -1,30 +1,33 @@
 const React = window.React;
 
-class ProcessLoads extends React.Component {
+function ProcessLoads(props) {
-
+  let entries;
-  render() {
+  let sumElem;
-    let entries;
+  if (props.counts == null || Object.keys(props.counts).length === 0) {
-    if (this.props.counts == null || Object.keys(this.props.counts).length === 0) {
+    entries = "No Data";
-      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 {
+    sumElem = <div className="sum-accounts">Total Accounts: {sum} </div>
-      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>
-    )
   }
+
+  return (
+    <div className="process-loads">
+      <div className="section">Process Loads </div>
+      {entries}
+      {sumElem}
+    </div>
+  )
 }
 
 ProcessLoads.propTypes = {