Add option to group by process in collapsed dashboard view

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

@@ -248,3 +248,14 @@ pre {
 .account-filter {
   padding-left: 5px;
 }
+
+.process-group {
+  display: inline-block;
+  margin: 10px;
+  max-width: 250px;
+  vertical-align: top;
+}
+
+#group-by-process {
+  vertical-align: middle;
+}

packages/nylas-dashboard/public/index.html

@@ -3,6 +3,7 @@
   <script src="/js/react.js"></script>
   <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="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-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>

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

@@ -3,6 +3,7 @@
 
 const React = window.React;
 const ReactDOM = window.ReactDOM;
+const _ = window._;
 const {
   SyncPolicy,
   SetAllSyncPolicies,
@@ -152,6 +153,7 @@ class Root extends React.Component {
       assignments: {},
       activeAccountIds: [],
       visibleAccounts: AccountFilter.states.all,
+      groupByProcess: false,
     };
   }
 
@@ -196,7 +198,7 @@ class Root extends React.Component {
       assignments: update.assignments || this.state.assignments,
       activeAccountIds: update.activeAccountIds || this.state.activeAccountIds,
       accounts: accounts,
-      processLoadCounts: update.processLoadCounts,
+      processLoads: update.processLoads,
     })
   }
 
@@ -204,6 +206,12 @@ class Root extends React.Component {
     this.setState({visibleAccounts: document.getElementById('account-filter').value});
   }
 
+  onGroupChange() {
+    this.setState({
+      groupByProcess: document.getElementById('group-by-proccess').checked,
+    });
+  }
+
   render() {
     let ids = Object.keys(this.state.accounts);
 
@@ -218,18 +226,70 @@ class Root extends React.Component {
         break;
     }
 
-    const AccountType = this.props.collapsed ? MiniAccount : Account;
-    let count = 0;
+    let content;
+    if (this.props.collapsed) {
+      const groupByProcess = (
+        <div>
+          <input
+            type="checkbox"
+            id="group-by-proccess"
+            onChange={() => this.onGroupChange()}
+          />
+          Group Accounts By Process
+        </div>
+      )
 
-    return (
-      <div>
-        <ProcessLoads counts={this.state.processLoadCounts} />
-        <AccountFilter id="account-filter" onChange={() => this.onFilter.call(this)} />
-        <SetAllSyncPolicies accountIds={ids.map((id) => parseInt(id, 10))} />
+      if (this.state.groupByProcess) {
+        const accountsById = _.groupBy(this.state.accounts, 'id');
+        const processes = [];
+
+        for (const processName of Object.keys(this.state.processLoads)) {
+          const accounts = []
+
+          for (const accountId of this.state.processLoads[processName]) {
+            const account = accountsById[accountId][0];
+            accounts.push((
+              <MiniAccount key={accountId} account={account} />
+            ))
+          }
+          processes.push((
+            <div key={processName} title={`Process: ${processName}`} className="process-group">
+              {accounts}
+            </div>
+          ))
+        }
+        content = (
+          <div>
+            {groupByProcess}
+            <div id="accounts-wrapper">
+              {processes}
+            </div>
+          </div>
+        )
+      } else {
+        content = (
+          <div>
+            {groupByProcess}
+            <div id="accounts-wrapper">
+              {
+                ids.sort((a, b) => a / 1 - b / 1).map((id) =>
+                  <MiniAccount
+                    key={id}
+                    account={this.state.accounts[id]}
+                  />
+                )
+              }
+            </div>
+          </div>
+        )
+      }
+    } else {
+      let count = 0;
+      content = (
         <div id="accounts-wrapper">
           {
             ids.sort((a, b) => a / 1 - b / 1).map((id) =>
-              <AccountType
+              <Account
                 key={id}
                 active={this.state.activeAccountIds.includes(id)}
                 assignment={this.state.assignments[id]}
@@ -239,6 +299,15 @@ class Root extends React.Component {
             )
           }
         </div>
+      )
+    }
+
+    return (
+      <div>
+        <ProcessLoads loads={this.state.processLoads} />
+        <AccountFilter id="account-filter" onChange={() => this.onFilter.call(this)} />
+        <SetAllSyncPolicies accountIds={ids.map((id) => parseInt(id, 10))} />
+        {content}
       </div>
     )
   }

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

@@ -15,11 +15,9 @@ class MiniAccount extends React.Component {
   }
 
   render() {
-    const {account, assignment, active} = this.props;
-
     let errorClass;
     let style;
-    if (account.sync_error) {
+    if (this.props.account.sync_error) {
       errorClass = 'errored';
       style = {};
     } else {
@@ -38,9 +36,6 @@ class MiniAccount extends React.Component {
 
 MiniAccount.propTypes = {
   account: React.PropTypes.object,
-  active: React.PropTypes.bool,
-  assignment: React.PropTypes.string,
-  count: React.PropTypes.number,
 };
 
 window.MiniAccount = MiniAccount;

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

@@ -3,17 +3,17 @@ const React = window.React;
 function ProcessLoads(props) {
   let entries;
   let sumElem;
-  if (props.counts == null || Object.keys(props.counts).length === 0) {
+  if (props.loads == null || Object.keys(props.loads).length === 0) {
     entries = "No Data";
     sumElem = "";
   } else {
     entries = [];
     let sum = 0;
-    for (const processName of Object.keys(props.counts).sort()) {
-      const count = props.counts[processName];
+    for (const processName of Object.keys(props.loads).sort()) {
+      const count = props.loads[processName].length;
       sum += count;
       entries.push(
-        <div className="load-count">
+        <div className="load-count" key={processName}>
           <b>{processName}</b>: {count} accounts
         </div>
       );
@@ -31,7 +31,7 @@ function ProcessLoads(props) {
 }
 
 ProcessLoads.propTypes = {
-  counts: React.PropTypes.object,
+  loads: React.PropTypes.object,
 }
 
 window.ProcessLoads = ProcessLoads;

packages/nylas-dashboard/routes/websocket.js

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