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