diff --git a/packages/nylas-dashboard/public/css/app.css b/packages/nylas-dashboard/public/css/app.css index 2a874590a..a144daaf2 100644 --- a/packages/nylas-dashboard/public/css/app.css +++ b/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; +} diff --git a/packages/nylas-dashboard/public/index.html b/packages/nylas-dashboard/public/index.html index 6b012db66..888e40cfb 100644 --- a/packages/nylas-dashboard/public/index.html +++ b/packages/nylas-dashboard/public/index.html @@ -3,6 +3,7 @@ + diff --git a/packages/nylas-dashboard/public/js/app.jsx b/packages/nylas-dashboard/public/js/app.jsx index bb023c48b..7c458f8d9 100644 --- a/packages/nylas-dashboard/public/js/app.jsx +++ b/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 = ( +
+ this.onGroupChange()} + /> + Group Accounts By Process +
+ ) - return ( -
- - this.onFilter.call(this)} /> - 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(( + + )) + } + processes.push(( +
+ {accounts} +
+ )) + } + content = ( +
+ {groupByProcess} +
+ {processes} +
+
+ ) + } else { + content = ( +
+ {groupByProcess} +
+ { + ids.sort((a, b) => a / 1 - b / 1).map((id) => + + ) + } +
+
+ ) + } + } else { + let count = 0; + content = (
{ ids.sort((a, b) => a / 1 - b / 1).map((id) => - + ) + } + + return ( +
+ + this.onFilter.call(this)} /> + parseInt(id, 10))} /> + {content}
) } diff --git a/packages/nylas-dashboard/public/js/mini-account.jsx b/packages/nylas-dashboard/public/js/mini-account.jsx index cd3539470..ef6ceca8b 100644 --- a/packages/nylas-dashboard/public/js/mini-account.jsx +++ b/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; diff --git a/packages/nylas-dashboard/public/js/process-loads.jsx b/packages/nylas-dashboard/public/js/process-loads.jsx index 4e05d0725..e8917fd52 100644 --- a/packages/nylas-dashboard/public/js/process-loads.jsx +++ b/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( -
+
{processName}: {count} accounts
); @@ -31,7 +31,7 @@ function ProcessLoads(props) { } ProcessLoads.propTypes = { - counts: React.PropTypes.object, + loads: React.PropTypes.object, } window.ProcessLoads = ProcessLoads; diff --git a/packages/nylas-dashboard/routes/websocket.js b/packages/nylas-dashboard/routes/websocket.js index f3aff4ccb..5bfb8e419 100644 --- a/packages/nylas-dashboard/routes/websocket.js +++ b/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; }