Add progress reporting to rageshake submission

pull/3648/head
Richard van der Hoff 2017-04-12 14:53:47 +01:00
parent 269f9a5ccc
commit d8bf57edc5
2 changed files with 51 additions and 9 deletions

View File

@ -26,11 +26,18 @@ export default class BugReportDialog extends React.Component {
busy: false, busy: false,
err: null, err: null,
text: "", text: "",
progress: null,
}; };
this._unmounted = false;
this._onSubmit = this._onSubmit.bind(this); this._onSubmit = this._onSubmit.bind(this);
this._onCancel = this._onCancel.bind(this); this._onCancel = this._onCancel.bind(this);
this._onTextChange = this._onTextChange.bind(this); this._onTextChange = this._onTextChange.bind(this);
this._onSendLogsChange = this._onSendLogsChange.bind(this); this._onSendLogsChange = this._onSendLogsChange.bind(this);
this._sendProgressCallback = this._sendProgressCallback.bind(this);
}
componentWillUnmount() {
this._unmounted = true;
} }
_onCancel(ev) { _onCancel(ev) {
@ -46,17 +53,22 @@ export default class BugReportDialog extends React.Component {
}); });
return; return;
} }
this.setState({ busy: true, err: null }); this.setState({ busy: true, progress: null, err: null });
this._sendProgressCallback("Loading bug report module");
require(['../../../vector/submit-rageshake'], (s) => { require(['../../../vector/submit-rageshake'], (s) => {
s(SdkConfig.get().bug_report_endpoint_url, { s(SdkConfig.get().bug_report_endpoint_url, {
userText: userText, userText: userText,
sendLogs: sendLogs, sendLogs: sendLogs,
progressCallback: this._sendProgressCallback,
}).then(() => { }).then(() => {
this.setState({ busy: false }); this.setState({ busy: false, progress: null });
this.props.onFinished(false); this.props.onFinished(false);
}, (err) => { }, (err) => {
this.setState({ busy: false, err: `Failed: ${err.message}` }); this.setState({
busy: false, progress: null,
err: `Failed to send report: ${err.message}`,
});
}); });
}); });
} }
@ -69,6 +81,13 @@ export default class BugReportDialog extends React.Component {
this.setState({ sendLogs: ev.target.checked }); this.setState({ sendLogs: ev.target.checked });
} }
_sendProgressCallback(progress) {
if (this._unmounted) {
return;
}
this.setState({progress: progress});
}
render() { render() {
const Loader = sdk.getComponent("elements.Spinner"); const Loader = sdk.getComponent("elements.Spinner");
@ -79,8 +98,6 @@ export default class BugReportDialog extends React.Component {
</div>; </div>;
} }
const okLabel = this.state.busy ? <Loader /> : 'Send';
let cancelButton = null; let cancelButton = null;
if (!this.state.busy) { if (!this.state.busy) {
cancelButton = <button onClick={this._onCancel}> cancelButton = <button onClick={this._onCancel}>
@ -88,6 +105,16 @@ export default class BugReportDialog extends React.Component {
</button>; </button>;
} }
let progress = null;
if (this.state.busy) {
progress = (
<div className="progress">
<Loader />
{this.state.progress} ...
</div>
);
}
return ( return (
<div className="mx_BugReportDialog"> <div className="mx_BugReportDialog">
<div className="mx_Dialog_title"> <div className="mx_Dialog_title">
@ -110,6 +137,7 @@ export default class BugReportDialog extends React.Component {
<input type="checkbox" checked={this.state.sendLogs} <input type="checkbox" checked={this.state.sendLogs}
onChange={this._onSendLogsChange} id="mx_BugReportDialog_logs"/> onChange={this._onSendLogsChange} id="mx_BugReportDialog_logs"/>
<label htmlFor="mx_BugReportDialog_logs">Send logs</label> <label htmlFor="mx_BugReportDialog_logs">Send logs</label>
{progress}
{error} {error}
</div> </div>
<div className="mx_Dialog_buttons"> <div className="mx_Dialog_buttons">
@ -117,8 +145,9 @@ export default class BugReportDialog extends React.Component {
className="mx_Dialog_primary danger" className="mx_Dialog_primary danger"
onClick={this._onSubmit} onClick={this._onSubmit}
autoFocus={true} autoFocus={true}
disabled={this.state.busy}
> >
{okLabel} Send
</button> </button>
{cancelButton} {cancelButton}

View File

@ -30,10 +30,17 @@ if (!TextEncoder) {
/** /**
* Send a bug report. * Send a bug report.
*
* @param {string} bugReportEndpoint HTTP url to send the report to * @param {string} bugReportEndpoint HTTP url to send the report to
*
* @param {object} opts optional dictionary of options * @param {object} opts optional dictionary of options
*
* @param {string} opts.userText Any additional user input. * @param {string} opts.userText Any additional user input.
*
* @param {boolean} opts.sendLogs True to send logs * @param {boolean} opts.sendLogs True to send logs
*
* @param {function(string)} opts.progressCallback Callback to call with progress updates
*
* @return {Promise} Resolved when the bug report is sent. * @return {Promise} Resolved when the bug report is sent.
*/ */
export default async function sendBugReport(bugReportEndpoint, opts) { export default async function sendBugReport(bugReportEndpoint, opts) {
@ -42,7 +49,9 @@ export default async function sendBugReport(bugReportEndpoint, opts) {
} }
opts = opts || {}; opts = opts || {};
const progressCallback = opts.progressCallback || (() => {});
progressCallback("Collecting app version information");
let version = "UNKNOWN"; let version = "UNKNOWN";
try { try {
version = await PlatformPeg.get().getAppVersion(); version = await PlatformPeg.get().getAppVersion();
@ -63,6 +72,7 @@ export default async function sendBugReport(bugReportEndpoint, opts) {
body.append('user_agent', userAgent); body.append('user_agent', userAgent);
if (opts.sendLogs) { if (opts.sendLogs) {
progressCallback("Collecting logs");
const logs = await rageshake.getLogsForReport(); const logs = await rageshake.getLogsForReport();
for (let entry of logs) { for (let entry of logs) {
// encode as UTF-8 // encode as UTF-8
@ -72,17 +82,20 @@ export default async function sendBugReport(bugReportEndpoint, opts) {
} }
} }
await _submitReport(bugReportEndpoint, body); progressCallback("Uploading report");
await _submitReport(bugReportEndpoint, body, progressCallback);
} }
function _submitReport(endpoint, body) { function _submitReport(endpoint, body, progressCallback) {
const deferred = q.defer(); const deferred = q.defer();
const req = new XMLHttpRequest(); const req = new XMLHttpRequest();
req.open("POST", endpoint); req.open("POST", endpoint);
req.timeout = 5 * 60 * 1000; req.timeout = 5 * 60 * 1000;
req.onreadystatechange = function() { req.onreadystatechange = function() {
if (req.readyState === XMLHttpRequest.DONE) { if (req.readyState === XMLHttpRequest.LOADING) {
progressCallback("Waiting for response from server");
} else if (req.readyState === XMLHttpRequest.DONE) {
on_done(); on_done();
} }
}; };