Changeset View
Changeset View
Standalone View
Standalone View
src/resources/vue/Widgets/Status.vue
| Show First 20 Lines • Show All 45 Lines • ▼ Show 20 Lines | export default { | ||||
| status: { type: Object, default: () => {} } | status: { type: Object, default: () => {} } | ||||
| }, | }, | ||||
| data() { | data() { | ||||
| return { | return { | ||||
| className: 'pending', | className: 'pending', | ||||
| refresh: false, | refresh: false, | ||||
| delay: 5000, | delay: 5000, | ||||
| scope: 'user', | scope: 'user', | ||||
| state: { isReady: true } | state: { isReady: true }, | ||||
| waiting: 0, | |||||
| } | } | ||||
| }, | }, | ||||
| watch: { | watch: { | ||||
| // We use property watcher because parent component | // We use property watcher because parent component | ||||
| // might set the property with a delay and we need to parse it | // might set the property with a delay and we need to parse it | ||||
| // FIXME: Problem with this and update-status event is that whenever | |||||
| // we emit the event a watcher function is executed, causing | |||||
| // duplicate parseStatusInfo() calls. Fortunaltely this does not | |||||
| // cause duplicate http requests. | |||||
| status: function (val, oldVal) { | status: function (val, oldVal) { | ||||
| this.parseStatusInfo(val) | this.parseStatusInfo(val) | ||||
| } | } | ||||
| }, | }, | ||||
| destroyed() { | destroyed() { | ||||
| clearTimeout(window.infoRequest) | clearTimeout(window.infoRequest) | ||||
| }, | }, | ||||
| mounted() { | mounted() { | ||||
| Show All 26 Lines | export default { | ||||
| this.$nextTick(function() { | this.$nextTick(function() { | ||||
| $(this.$el).find('.progress-bar') | $(this.$el).find('.progress-bar') | ||||
| .css('width', info.percent + '%') | .css('width', info.percent + '%') | ||||
| .attr('aria-valuenow', info.percent) | .attr('aria-valuenow', info.percent) | ||||
| }) | }) | ||||
| // Unhide the Refresh button, the process is in failure state | // Unhide the Refresh button, the process is in failure state | ||||
| this.refresh = info.processState == 'failed' | this.refresh = info.processState == 'failed' && this.waiting == 0 | ||||
| if (this.refresh || info.step == 'domain-confirmed') { | if (this.refresh || info.step == 'domain-confirmed') { | ||||
| this.className = 'failed' | this.className = 'failed' | ||||
| } | } | ||||
| // A async job has been dispatched, switch to a waiting mode where | |||||
| // we hide the Refresh button and pull status for about a minute, | |||||
| // after that we switch to normal mode, i.e. user can Refresh again (if still not ready) | |||||
| if (info.processState == 'waiting') { | |||||
| this.waiting = 10 | |||||
| this.delay = 5000 | |||||
| } else if (this.waiting > 0) { | |||||
| this.waiting -= 1 | |||||
| } | |||||
| } | } | ||||
| // Update status process info every 10 seconds | // Update status process info every 5,6,7,8,9,... seconds | ||||
| // FIXME: This probably should have some limit, or the interval | |||||
| // should grow (well, until it could be done with websocket notifications) | |||||
| clearTimeout(window.infoRequest) | clearTimeout(window.infoRequest) | ||||
| if (!this.refresh && (!info || !info.isReady)) { | if ((!this.refresh || this.waiting > 0) && (!info || !info.isReady)) { | ||||
| window.infoRequest = setTimeout(() => { | window.infoRequest = setTimeout(() => { | ||||
| delete window.infoRequest | delete window.infoRequest | ||||
| // Stop updates after user logged out | // Stop updates after user logged out | ||||
| if (!this.$store.state.isLoggedIn) { | if (!this.$store.state.isLoggedIn) { | ||||
| return; | return; | ||||
| } | } | ||||
| axios.get(this.getUrl()) | axios.get(this.getUrl()) | ||||
| ▲ Show 20 Lines • Show All 64 Lines • Show Last 20 Lines | |||||