From 4345dce3b8c623a79b7d5c14bf67bc1a3c1633ed Mon Sep 17 00:00:00 2001 From: =Corey Hulen Date: Tue, 6 Oct 2015 16:17:27 -0700 Subject: [PATCH 1/4] PLT-500 fixing connection msg issues --- web/react/components/error_bar.jsx | 65 ++++++++++++++++++------- web/react/stores/socket_store.jsx | 6 ++- web/react/utils/client.jsx | 12 ++++- web/sass-files/sass/partials/_post.scss | 2 +- 4 files changed, 63 insertions(+), 22 deletions(-) diff --git a/web/react/components/error_bar.jsx b/web/react/components/error_bar.jsx index 05726e860c..0af1acc6e0 100644 --- a/web/react/components/error_bar.jsx +++ b/web/react/components/error_bar.jsx @@ -12,17 +12,47 @@ export default class ErrorBar extends React.Component { this.prevTimer = null; this.state = ErrorStore.getLastError(); - if (this.state && this.state.message) { + if (this.isValidError(this.state)) { this.prevTimer = setTimeout(this.handleClose, 10000); } } + isValidError(s) { + if (!s) { + return false; + } + + if (!s.message) { + return false; + } + + if (s.connErrorCount && s.connErrorCount >= 1 && s.connErrorCount < 7) { + return false; + } + + return true; + } + + isConnectionError(s) { + if (!s.connErrorCount || s.connErrorCount === 0) { + return false; + } + + if (s.connErrorCount > 7) { + return true; + } + + return false; + } + componentDidMount() { ErrorStore.addChangeListener(this.onErrorChange); - $('body').css('padding-top', $(React.findDOMNode(this)).outerHeight()); + $(window).resize(() => { - if (this.state && this.state.message) { - $('body').css('padding-top', $(React.findDOMNode(this)).outerHeight()); + if (this.isValidError(this.state)) { + $('body').css('padding-top', '30px'); + } else { + $('body').css('padding-top', '0'); } }); } @@ -31,6 +61,14 @@ export default class ErrorBar extends React.Component { ErrorStore.removeChangeListener(this.onErrorChange); } + componentWillUpdate(nextProps, nextState) { + if (this.isValidError(nextState)) { + $('body').css('padding-top', '30px'); + } else { + $('body').css('padding-top', '0'); + } + } + onErrorChange() { var newState = ErrorStore.getLastError(); @@ -41,7 +79,9 @@ export default class ErrorBar extends React.Component { if (newState) { this.setState(newState); - this.prevTimer = setTimeout(this.handleClose, 10000); + if (!this.isConnectionError(newState)) { + this.prevTimer = setTimeout(this.handleClose, 10000); + } } else { this.setState({message: null}); } @@ -52,22 +92,11 @@ export default class ErrorBar extends React.Component { e.preventDefault(); } - ErrorStore.storeLastError(null); - ErrorStore.emitChange(); - - $('body').css('padding-top', '0'); + this.setState({message: null}); } render() { - if (!this.state) { - return
; - } - - if (!this.state.message) { - return
; - } - - if (this.state.connErrorCount < 7) { + if (!this.isValidError(this.state)) { return
; } diff --git a/web/react/stores/socket_store.jsx b/web/react/stores/socket_store.jsx index 1d853f979d..9f354965e3 100644 --- a/web/react/stores/socket_store.jsx +++ b/web/react/stores/socket_store.jsx @@ -50,8 +50,10 @@ class SocketStoreClass extends EventEmitter { } this.failCount = 0; - ErrorStore.storeLastError(null); - ErrorStore.emitChange(); + if (ErrorStore.getLastError()) { + ErrorStore.storeLastError(null); + ErrorStore.emitChange(); + } }; conn.onclose = () => { diff --git a/web/react/utils/client.jsx b/web/react/utils/client.jsx index d9f4860098..6dccfcdeb4 100644 --- a/web/react/utils/client.jsx +++ b/web/react/utils/client.jsx @@ -2,6 +2,7 @@ var BrowserStore = require('../stores/browser_store.jsx'); var TeamStore = require('../stores/team_store.jsx'); +var ErrorStore = require('../stores/error_store.jsx'); export function track(category, action, label, prop, val) { global.window.analytics.track(action, {category: category, label: label, property: prop, value: val}); @@ -27,7 +28,16 @@ function handleError(methodName, xhr, status, err) { msg = 'error in ' + methodName + ' status=' + status + ' statusCode=' + xhr.status + ' err=' + err; if (xhr.status === 0) { - e = {message: 'There appears to be a problem with your internet connection', connErrorCount: 1}; + let errorCount = 1; + const oldError = ErrorStore.getLastError(); + let connectError = 'There appears to be a problem with your internet connection'; + + if (oldError && oldError.connErrorCount) { + errorCount += oldError.connErrorCount; + connectError = 'We cannot reach the Mattermost service. The service may be down or misconfigured. Please contact an administrator to make sure the WebSocket port is configured properly.'; + } + + e = {message: connectError, connErrorCount: errorCount}; } else { e = {message: 'We received an unexpected status code from the server (' + xhr.status + ')'}; } diff --git a/web/sass-files/sass/partials/_post.scss b/web/sass-files/sass/partials/_post.scss index 8bf4b05345..24fbbdb3eb 100644 --- a/web/sass-files/sass/partials/_post.scss +++ b/web/sass-files/sass/partials/_post.scss @@ -16,7 +16,7 @@ } .bad-connection { - background-color: rgb(255, 255, 172); + background-color: rgb(255, 255, 172) !important; } .textarea-div { From c6c2a97f446d8b9d413e3b827bb95406912a006d Mon Sep 17 00:00:00 2001 From: =Corey Hulen Date: Wed, 7 Oct 2015 08:37:56 -0700 Subject: [PATCH 2/4] Fixing resiz --- web/react/components/error_bar.jsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/web/react/components/error_bar.jsx b/web/react/components/error_bar.jsx index 0af1acc6e0..a96917d92d 100644 --- a/web/react/components/error_bar.jsx +++ b/web/react/components/error_bar.jsx @@ -50,7 +50,9 @@ export default class ErrorBar extends React.Component { $(window).resize(() => { if (this.isValidError(this.state)) { - $('body').css('padding-top', '30px'); + var height = $(React.findDOMNode(this)).outerHeight(); + height = height < 30 ? 30 : height; + $('body').css('padding-top', height + 'px'); } else { $('body').css('padding-top', '0'); } @@ -63,7 +65,9 @@ export default class ErrorBar extends React.Component { componentWillUpdate(nextProps, nextState) { if (this.isValidError(nextState)) { - $('body').css('padding-top', '30px'); + var height = $(React.findDOMNode(this)).outerHeight(); + height = height < 30 ? 30 : height; + $('body').css('padding-top', height + 'px'); } else { $('body').css('padding-top', '0'); } From e83dd553611abddd142a73805392b069a65caf67 Mon Sep 17 00:00:00 2001 From: =Corey Hulen Date: Wed, 7 Oct 2015 08:48:18 -0700 Subject: [PATCH 3/4] Moving to updated --- web/react/components/error_bar.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/react/components/error_bar.jsx b/web/react/components/error_bar.jsx index a96917d92d..787b716bee 100644 --- a/web/react/components/error_bar.jsx +++ b/web/react/components/error_bar.jsx @@ -63,7 +63,7 @@ export default class ErrorBar extends React.Component { ErrorStore.removeChangeListener(this.onErrorChange); } - componentWillUpdate(nextProps, nextState) { + componentDidUpdate(nextProps, nextState) { if (this.isValidError(nextState)) { var height = $(React.findDOMNode(this)).outerHeight(); height = height < 30 ? 30 : height; From 8a65601db424d5969448b06ae4e3048a7f34bd94 Mon Sep 17 00:00:00 2001 From: =Corey Hulen Date: Wed, 7 Oct 2015 09:13:42 -0700 Subject: [PATCH 4/4] Fixing resize --- web/react/components/error_bar.jsx | 41 +++++++++++++++--------------- 1 file changed, 21 insertions(+), 20 deletions(-) diff --git a/web/react/components/error_bar.jsx b/web/react/components/error_bar.jsx index 787b716bee..5aa55be93d 100644 --- a/web/react/components/error_bar.jsx +++ b/web/react/components/error_bar.jsx @@ -9,6 +9,7 @@ export default class ErrorBar extends React.Component { this.onErrorChange = this.onErrorChange.bind(this); this.handleClose = this.handleClose.bind(this); + this.resize = this.resize.bind(this); this.prevTimer = null; this.state = ErrorStore.getLastError(); @@ -45,26 +46,8 @@ export default class ErrorBar extends React.Component { return false; } - componentDidMount() { - ErrorStore.addChangeListener(this.onErrorChange); - - $(window).resize(() => { - if (this.isValidError(this.state)) { - var height = $(React.findDOMNode(this)).outerHeight(); - height = height < 30 ? 30 : height; - $('body').css('padding-top', height + 'px'); - } else { - $('body').css('padding-top', '0'); - } - }); - } - - componentWillUnmount() { - ErrorStore.removeChangeListener(this.onErrorChange); - } - - componentDidUpdate(nextProps, nextState) { - if (this.isValidError(nextState)) { + resize() { + if (this.isValidError(this.state)) { var height = $(React.findDOMNode(this)).outerHeight(); height = height < 30 ? 30 : height; $('body').css('padding-top', height + 'px'); @@ -73,6 +56,24 @@ export default class ErrorBar extends React.Component { } } + componentDidMount() { + ErrorStore.addChangeListener(this.onErrorChange); + + $(window).resize(() => { + this.resize(); + }); + + this.resize(); + } + + componentWillUnmount() { + ErrorStore.removeChangeListener(this.onErrorChange); + } + + componentDidUpdate() { + this.resize(); + } + onErrorChange() { var newState = ErrorStore.getLastError();