diff --git a/packages/nylas-dashboard/public/css/app.css b/packages/nylas-dashboard/public/css/app.css index 2cfe5fe04..2a874590a 100644 --- a/packages/nylas-dashboard/public/css/app.css +++ b/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; } diff --git a/packages/nylas-dashboard/public/js/process-loads.jsx b/packages/nylas-dashboard/public/js/process-loads.jsx index dc412a7e8..ceb8334b3 100644 --- a/packages/nylas-dashboard/public/js/process-loads.jsx +++ b/packages/nylas-dashboard/public/js/process-loads.jsx @@ -1,30 +1,33 @@ 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" +function ProcessLoads(props) { + let entries; + let sumElem; + if (props.counts == null || Object.keys(props.counts).length === 0) { + 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( +
+ {processName}: {count} accounts +
+ ); } - else { - entries = []; - for (const processName of Object.keys(this.props.counts).sort()) { - entries.push( -
- {processName}: {this.props.counts[processName]} accounts -
- ); - } - } - - return ( -
-
Process Loads
- {entries} -
- ) + sumElem =
Total Accounts: {sum}
} + + return ( +
+
Process Loads
+ {entries} + {sumElem} +
+ ) } ProcessLoads.propTypes = {