Summary clear button

src/botPage/bot/TradeEngine/Total.js

@@ -2,6 +2,7 @@ import { translate } from '../../../common/i18n';
 import { roundBalance } from '../../common/tools';
 import { info, notify } from '../broadcast';
 import createError from '../../common/error';
+import { observer as globalObserver } from '../../../common/utils/observer';
 
 const skeleton = {
     totalProfit: 0,
@@ -20,6 +21,14 @@ export default Engine =>
             super();
             this.sessionRuns = 0;
             this.sessionProfit = 0;
+
+            globalObserver.register('summary.clear', () => {
+                this.sessionRuns = 0;
+                this.sessionProfit = 0;
+
+                const { loginid: accountID } = this.accountInfo;
+                globalStat[accountID] = { ...skeleton };
+            });
         }
         updateTotals(contract) {
             const { sell_price: sellPrice, buy_price: buyPrice, currency } = contract;
@@ -87,7 +96,9 @@ export default Engine =>
                 return;
             }
 
-            const { limitations: { maxLoss, maxTrades } } = tradeOption;
+            const {
+                limitations: { maxLoss, maxTrades },
+            } = tradeOption;
 
             if (maxLoss && maxTrades) {
                 if (this.sessionRuns >= maxTrades) {

src/botPage/bot/tools.js

@@ -157,3 +157,48 @@ export const createDetails = contract => {
 };
 
 export const getUUID = () => `${new Date().getTime() * Math.random()}`;
+
+export const showDialog = options =>
+    new Promise((resolve, reject) => {
+        const $dialog = $('<div/>', { class: 'draggable-dialog', title: options.title });
+        options.text.forEach(text => $dialog.append(`<p style="margin: 0.7em;">${text}</p>`));
+        const defaultButtons = [
+            {
+                text : translate('No'),
+                class: 'button-secondary',
+                click() {
+                    $(this).dialog('close');
+                    $(this).remove();
+                    reject();
+                },
+            },
+            {
+                text : translate('Yes'),
+                class: 'button-primary',
+                click() {
+                    $(this).dialog('close');
+                    $(this).remove();
+                    resolve();
+                },
+            },
+        ];
+        const dialogOptions = {
+            autoOpen : false,
+            classes  : { 'ui-dialog-titlebar-close': 'icon-close' },
+            closeText: '',
+            height   : 'auto',
+            width    : 600,
+            modal    : true,
+            resizable: false,
+            open() {
+                $(this)
+                    .parent()
+                    .find('.ui-dialog-buttonset > button')
+                    .removeClass('ui-button ui-corner-all ui-widget');
+            },
+        };
+        Object.assign(dialogOptions, { buttons: options.buttons || defaultButtons });
+
+        $dialog.dialog(dialogOptions);
+        $dialog.dialog('open');
+    });

src/botPage/view/TradeInfoPanel/ClearButton.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { observer as globalObserver } from '../../../common/utils/observer';
+import { showDialog } from '../../bot/tools';
+import { translate } from '../../../common/utils/tools';
+
+export default class ClearButton extends React.PureComponent {
+    constructor() {
+        super();
+        this.state = { isButtonDisabled: true };
+    }
+    componentDidMount() {
+        globalObserver.register('summary.enable_clear', () => this.setState({ isButtonDisabled: false }));
+        globalObserver.register('summary.disable_clear', () => this.setState({ isButtonDisabled: true }));
+    }
+    // eslint-disable-next-line class-methods-use-this
+    confirmClearLog() {
+        showDialog({
+            title: translate('Are you sure?'),
+            text : [
+                translate(
+                    'This will clear all transactions in the summary panel, and all counters will be reset to zero.'
+                ),
+            ],
+        })
+            .then(() => globalObserver.emit('summary.clear'))
+            .catch(() => {});
+    }
+    render() {
+        return (
+            <button
+                title="Clear summary log"
+                id="summaryClearButton"
+                className="toolbox-button icon-clear"
+                onClick={this.confirmClearLog}
+                disabled={this.state.isButtonDisabled}
+            />
+        );
+    }
+}

src/botPage/view/TradeInfoPanel/RunButton.js

@@ -2,15 +2,15 @@ import React from 'react';
 import { translate } from '../../../common/i18n';
 
 const RunButton = () => (
-    <div className="summary-toolbox">
+    <React.Fragment>
         <button title="Run the bot" id="summaryRunButton" className="toolbox-button icon-run" />
         <button
             title={translate('Stop the bot')}
             id="summaryStopButton"
             className="toolbox-button icon-stop"
             style={{ display: 'none' }}
         />
-    </div>
+    </React.Fragment>
 );
 
 export default RunButton;

src/botPage/view/TradeInfoPanel/Summary.js

@@ -4,15 +4,19 @@ import { translate } from '../../../common/i18n';
 import * as style from '../style';
 
 export default class Summary extends Component {
+    constructor({ accountID }) {
+        super();
+        this.state = { [accountID]: {} };
+    }
     componentWillMount() {
         globalObserver.register('bot.info', info => {
             const { accountID } = info;
             this.setState({ [accountID]: { ...this.state[accountID], ...info } });
         });
-    }
-    constructor({ accountID }) {
-        super();
-        this.state = { [accountID]: {} };
+        globalObserver.register('summary.clear', () => {
+            const { accountID } = this.props;
+            this.setState({ [accountID]: {} });
+        });
     }
     render() {
         const { accountID } = this.props;

src/botPage/view/TradeInfoPanel/TradeTable.js

@@ -49,9 +49,20 @@ export default class TradeTable extends Component {
     }
     componentWillMount() {
         globalObserver.register('summary.export', () => {
-            const { accountID } = this.props;
-            const { rows } = this.state[accountID];
-            if (rows.length) this.export();
+            const accountData = this.state[this.props.accountID];
+            if (accountData && accountData.rows.length > 0) {
+                this.export();
+            }
+        });
+        globalObserver.register('summary.clear', () => {
+            this.setState({ [this.props.accountID]: { ...this.state.initial } });
+            globalObserver.emit('summary.disable_clear');
+        });
+        globalObserver.register('bot.stop', () => {
+            const accountData = this.state[this.props.accountID];
+            if (accountData && accountData.rows.length > 0) {
+                globalObserver.emit('summary.enable_clear');
+            }
         });
         globalObserver.register('bot.contract', info => {
             if (!info) {

src/botPage/view/TradeInfoPanel/index.js

@@ -4,6 +4,7 @@ import { translate } from '../../../common/i18n';
 import Summary from './Summary';
 import TradeTable from './TradeTable';
 import RunButton from './RunButton';
+import ClearButton from './ClearButton';
 
 const resetAnimation = () => {
     $('.circle-wrapper')
@@ -151,7 +152,10 @@ export default class TradeInfoPanel extends Component {
             <div>
                 <div className="content">
                     <div className="content-row">
-                        <RunButton />
+                        <div className="summary-toolbox">
+                            <RunButton />
+                            <ClearButton />
+                        </div>
                     </div>
                     <div className="content-row">
                         <AnimateTrade />
@@ -162,7 +166,6 @@ export default class TradeInfoPanel extends Component {
                     <div className="content-row">
                         <Summary accountID={accountID} />
                     </div>
-
                     <div>
                         <p id="sync-warning">
                             {translate(