Add process load counts to the dashboard

packages/nylas-dashboard/public/css/app.css

@@ -17,6 +17,10 @@ pre {
   margin: 0;
 }
 
+#accounts-wrapper {
+  position: relative;
+}
+
 .account {
   position: absolute;
   border-radius: 5px;
@@ -57,6 +61,7 @@ pre {
 
 #open-all-sync {
   color: #ffffff;
+  padding-left: 5px;
 }
 
 .right-action {
@@ -219,3 +224,21 @@ pre {
 .mini-account.errored {
   background-color: rgb(255, 38, 0);
 }
+
+.process-loads {
+  display: inline-block;
+  padding: 15px;
+  width: 250px;
+  margin: 15px 0;
+  background-color: white;
+}
+
+.process-loads .section {
+  text-decoration: underline;
+  margin-bottom: 10px;
+  font-size: 12px;
+}
+
+.account-filter {
+  padding-left: 5px;
+}

packages/nylas-dashboard/public/index.html

@@ -4,6 +4,7 @@
   <script src="/js/react-dom.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
   <script src="/js/elapsed-time.jsx" type="text/babel"></script>
+  <script src="/js/process-loads.jsx" type="text/babel"></script>
   <script src="/js/mini-account.jsx" type="text/babel"></script>
   <script src="/js/modal.jsx" type="text/babel"></script>
   <script src="/js/sync-policy.jsx" type="text/babel"></script>

packages/nylas-dashboard/public/js/account-filter.jsx

@@ -2,7 +2,7 @@ const React = window.React;
 
 function AccountFilter(props) {
   return (
-    <div>
+    <div className="account-filter">
       Display: <select {...props}>
         <option value={AccountFilter.states.all}>All Accounts</option>
         <option value={AccountFilter.states.errored}>Accounts with Errors</option>

packages/nylas-dashboard/public/js/app.jsx

@@ -12,12 +12,13 @@ const {
   ElapsedTime,
   Modal,
   MiniAccount,
+  ProcessLoads,
 } = window;
 
 function calcAcctPosition(count) {
   const width = 280;
   const height = 490;
-  const marginTop = 100;
+  const marginTop = 0;
   const marginSide = 0;
 
   const acctsPerRow = Math.floor((window.innerWidth - 2 * marginSide) / width);
@@ -195,6 +196,7 @@ class Root extends React.Component {
       assignments: update.assignments || this.state.assignments,
       activeAccountIds: update.activeAccountIds || this.state.activeAccountIds,
       accounts: accounts,
+      processLoadCounts: update.processLoadCounts,
     })
   }
 
@@ -221,19 +223,22 @@ class Root extends React.Component {
 
     return (
       <div>
+        <ProcessLoads counts={this.state.processLoadCounts} />
         <AccountFilter id="account-filter" onChange={() => this.onFilter.call(this)} />
         <SetAllSyncPolicies accountIds={ids.map((id) => parseInt(id, 10))} />
-        {
-          ids.sort((a, b) => a / 1 - b / 1).map((id) =>
-            <AccountType
-              key={id}
-              active={this.state.activeAccountIds.includes(id)}
-              assignment={this.state.assignments[id]}
-              account={this.state.accounts[id]}
-              count={count++}
-            />
-          )
-        }
+        <div id="accounts-wrapper">
+          {
+            ids.sort((a, b) => a / 1 - b / 1).map((id) =>
+              <AccountType
+                key={id}
+                active={this.state.activeAccountIds.includes(id)}
+                assignment={this.state.assignments[id]}
+                account={this.state.accounts[id]}
+                count={count++}
+              />
+            )
+          }
+        </div>
       </div>
     )
   }

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

@@ -0,0 +1,34 @@
+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"
+    }
+    else {
+      entries = [];
+      for (const processName of Object.keys(this.props.counts)) {
+        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>
+    )
+  }
+}
+
+ProcessLoads.propTypes = {
+  counts: React.PropTypes.object,
+}
+
+window.ProcessLoads = ProcessLoads;

packages/nylas-dashboard/routes/websocket.js

@@ -11,6 +11,7 @@ function onWebsocketConnected(wss, ws) {
       updatedAccounts: [],
       activeAccountIds: [],
       assignments: {},
+      processLoadCounts: {},
     };
   }
   resetToSend();
@@ -42,6 +43,7 @@ function onWebsocketConnected(wss, ws) {
         toSend.activeAccountIds = accountIds;
       });
       const getAssignments = SchedulerUtils.forEachAccountList((identity, accountIds) => {
+        toSend.processLoadCounts[identity] = accountIds.length;
         for (const accountId of accountIds) {
           toSend.assignments[accountId] = identity;
         }