Skip to content

Commit 535761b

Browse files
author
Hoang Nguyen
authored
UI: Refactor async job polling codebase-wide (#4782)
* refactor async job polling codebase-wide * fix multiple call fetchData() when async job completed * remove unnecessary functions * remove const not use * move closeaction out of handleResponse * call closeAction without waiting for all group actions to complete * refactor polljob network provider * removed variable not use * remove await
1 parent 5228fae commit 535761b

62 files changed

Lines changed: 364 additions & 813 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎ui/src/components/header/HeaderNotice.vue‎

Lines changed: 10 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -32,24 +32,23 @@
3232
<a-button size="small" slot="description" @click="clearJobs">{{ $t('label.clear.list') }}</a-button>
3333
</a-list-item-meta>
3434
</a-list-item>
35-
<a-list-item v-for="(job, index) in jobs" :key="index">
36-
<a-list-item-meta :title="job.title" :description="job.description">
37-
<a-avatar :style="notificationAvatar[job.status].style" :icon="notificationAvatar[job.status].icon" slot="avatar"/>
35+
<a-list-item v-for="(notice, index) in notices" :key="index">
36+
<a-list-item-meta :title="notice.title" :description="notice.description">
37+
<a-avatar :style="notificationAvatar[notice.status].style" :icon="notificationAvatar[notice.status].icon" slot="avatar"/>
3838
</a-list-item-meta>
3939
</a-list-item>
4040
</a-list>
4141
</a-spin>
4242
</template>
4343
<span @click="showNotifications" class="header-notice-opener">
44-
<a-badge :count="jobs.length">
44+
<a-badge :count="notices.length">
4545
<a-icon class="header-notice-icon" type="bell" />
4646
</a-badge>
4747
</span>
4848
</a-popover>
4949
</template>
5050

5151
<script>
52-
import { api } from '@/api'
5352
import store from '@/store'
5453
5554
export default {
@@ -58,7 +57,7 @@ export default {
5857
return {
5958
loading: false,
6059
visible: false,
61-
jobs: [],
60+
notices: [],
6261
poller: null,
6362
notificationAvatar: {
6463
done: { icon: 'check-circle', style: 'backgroundColor:#87d068' },
@@ -72,66 +71,17 @@ export default {
7271
this.visible = !this.visible
7372
},
7473
clearJobs () {
75-
this.jobs = this.jobs.filter(x => x.status === 'progress')
76-
this.$store.commit('SET_ASYNC_JOB_IDS', this.jobs)
77-
},
78-
startPolling () {
79-
this.poller = setInterval(() => {
80-
this.pollJobs()
81-
}, 4000)
82-
},
83-
async pollJobs () {
84-
var hasUpdated = false
85-
for (var i in this.jobs) {
86-
if (this.jobs[i].status === 'progress') {
87-
await api('queryAsyncJobResult', { jobid: this.jobs[i].jobid }).then(json => {
88-
var result = json.queryasyncjobresultresponse
89-
if (result.jobstatus === 1 && this.jobs[i].status !== 'done') {
90-
hasUpdated = true
91-
const title = this.jobs[i].title
92-
const description = this.jobs[i].description
93-
this.$message.success({
94-
content: title + (description ? ' - ' + description : ''),
95-
key: this.jobs[i].jobid,
96-
duration: 2
97-
})
98-
this.jobs[i].status = 'done'
99-
} else if (result.jobstatus === 2 && this.jobs[i].status !== 'failed') {
100-
hasUpdated = true
101-
this.jobs[i].status = 'failed'
102-
if (result.jobresult.errortext !== null) {
103-
this.jobs[i].description = '(' + this.jobs[i].description + ') ' + result.jobresult.errortext
104-
}
105-
this.$notification.error({
106-
message: this.jobs[i].title,
107-
description: this.jobs[i].description,
108-
key: this.jobs[i].jobid,
109-
duration: 0
110-
})
111-
}
112-
}).catch(function (e) {
113-
console.log(this.$t('error.fetching.async.job.result') + e)
114-
})
115-
}
116-
}
117-
if (hasUpdated) {
118-
this.$store.commit('SET_ASYNC_JOB_IDS', this.jobs.reverse())
119-
}
74+
this.notices = this.notices.filter(x => x.status === 'progress')
75+
this.$store.commit('SET_HEADER_NOTICES', this.notices)
12076
}
12177
},
122-
beforeDestroy () {
123-
clearInterval(this.poller)
124-
},
125-
created () {
126-
this.startPolling()
127-
},
12878
mounted () {
129-
this.jobs = (store.getters.asyncJobIds || []).reverse()
79+
this.notices = (store.getters.headerNotices || []).reverse()
13080
this.$store.watch(
131-
(state, getters) => getters.asyncJobIds,
81+
(state, getters) => getters.headerNotices,
13282
(newValue, oldValue) => {
13383
if (oldValue !== newValue && newValue !== undefined) {
134-
this.jobs = newValue.reverse()
84+
this.notices = newValue.reverse()
13585
}
13686
}
13787
)

‎ui/src/components/view/ActionButton.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -143,6 +143,7 @@ export default {
143143
this.actionBadge = {}
144144
const arrAsync = []
145145
const actionBadge = this.actions.filter(action => action.showBadge === true)
146+
if ((actionBadge.dataView ? actionBadge.dataView : false) !== this.dataView) return
146147
147148
if (actionBadge && actionBadge.length > 0) {
148149
const dataLength = actionBadge.length

‎ui/src/components/view/DedicateData.vue‎

Lines changed: 8 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -175,20 +175,13 @@ export default {
175175
}).then(response => {
176176
this.$pollJob({
177177
jobId: response.releasededicatedzoneresponse.jobid,
178+
title: this.$t('label.release.dedicated.zone'),
179+
description: this.resource.id,
178180
successMessage: this.$t('message.dedicated.zone.released'),
179181
successMethod: () => {
180-
this.parentFetchData()
181182
this.dedicatedDomainId = null
182-
this.$store.dispatch('AddAsyncJob', {
183-
title: this.$t('message.dedicated.zone.released'),
184-
jobid: response.releasededicatedzoneresponse.jobid,
185-
status: 'progress'
186-
})
187183
},
188184
errorMessage: this.$t('error.release.dedicate.zone'),
189-
errorMethod: () => {
190-
this.parentFetchData()
191-
},
192185
loadingMessage: this.$t('message.releasing.dedicated.zone'),
193186
catchMessage: this.$t('error.fetching.async.job.result'),
194187
catchMethod: () => {
@@ -205,20 +198,13 @@ export default {
205198
}).then(response => {
206199
this.$pollJob({
207200
jobId: response.releasededicatedpodresponse.jobid,
201+
title: this.$t('label.release.dedicated.pod'),
202+
description: this.resource.id,
208203
successMessage: this.$t('message.pod.dedication.released'),
209204
successMethod: () => {
210-
this.parentFetchData()
211205
this.dedicatedDomainId = null
212-
this.$store.dispatch('AddAsyncJob', {
213-
title: this.$t('message.pod.dedication.released'),
214-
jobid: response.releasededicatedpodresponse.jobid,
215-
status: 'progress'
216-
})
217206
},
218207
errorMessage: this.$t('error.release.dedicate.pod'),
219-
errorMethod: () => {
220-
this.parentFetchData()
221-
},
222208
loadingMessage: this.$t('message.releasing.dedicated.pod'),
223209
catchMessage: this.$t('error.fetching.async.job.result'),
224210
catchMethod: () => {
@@ -235,20 +221,13 @@ export default {
235221
}).then(response => {
236222
this.$pollJob({
237223
jobId: response.releasededicatedclusterresponse.jobid,
224+
title: this.$t('label.release.dedicated.cluster'),
225+
description: this.resource.id,
238226
successMessage: this.$t('message.cluster.dedication.released'),
239227
successMethod: () => {
240-
this.parentFetchData()
241228
this.dedicatedDomainId = null
242-
this.$store.dispatch('AddAsyncJob', {
243-
title: this.$t('message.cluster.dedication.released'),
244-
jobid: response.releasededicatedclusterresponse.jobid,
245-
status: 'progress'
246-
})
247229
},
248230
errorMessage: this.$t('error.release.dedicate.cluster'),
249-
errorMethod: () => {
250-
this.parentFetchData()
251-
},
252231
loadingMessage: this.$t('message.releasing.dedicated.cluster'),
253232
catchMessage: this.$t('error.fetching.async.job.result'),
254233
catchMethod: () => {
@@ -265,20 +244,13 @@ export default {
265244
}).then(response => {
266245
this.$pollJob({
267246
jobId: response.releasededicatedhostresponse.jobid,
247+
title: this.$t('label.release.dedicated.host'),
248+
description: this.resource.id,
268249
successMessage: this.$t('message.host.dedication.released'),
269250
successMethod: () => {
270-
this.parentFetchData()
271251
this.dedicatedDomainId = null
272-
this.$store.dispatch('AddAsyncJob', {
273-
title: this.$t('message.host.dedication.released'),
274-
jobid: response.releasededicatedhostresponse.jobid,
275-
status: 'progress'
276-
})
277252
},
278253
errorMessage: this.$t('error.release.dedicate.host'),
279-
errorMethod: () => {
280-
this.parentFetchData()
281-
},
282254
loadingMessage: this.$t('message.releasing.dedicated.host'),
283255
catchMessage: this.$t('error.fetching.async.job.result'),
284256
catchMethod: () => {

‎ui/src/components/view/DedicateModal.vue‎

Lines changed: 9 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -93,22 +93,16 @@ export default {
9393
}).then(response => {
9494
this.$pollJob({
9595
jobId: response.dedicatezoneresponse.jobid,
96-
successMessage: this.$t('label.zone.dedicated'),
96+
title: this.$t('label.dedicate.zone'),
97+
description: `${this.$t('label.domain.id')} : ${this.domainId}`,
98+
successMessage: `${this.$t('label.zone.dedicated')}`,
9799
successMethod: () => {
98-
this.parentFetchData()
99100
this.fetchParentData()
100101
this.dedicatedDomainId = this.domainId
101102
this.dedicatedDomainModal = false
102-
this.$store.dispatch('AddAsyncJob', {
103-
title: this.$t('label.zone.dedicated'),
104-
jobid: response.dedicatezoneresponse.jobid,
105-
description: `${this.$t('label.domain.id')} : ${this.dedicatedDomainId}`,
106-
status: 'progress'
107-
})
108103
},
109104
errorMessage: this.$t('error.dedicate.zone.failed'),
110105
errorMethod: () => {
111-
this.parentFetchData()
112106
this.fetchParentData()
113107
this.dedicatedDomainModal = false
114108
},
@@ -137,22 +131,16 @@ export default {
137131
}).then(response => {
138132
this.$pollJob({
139133
jobId: response.dedicatepodresponse.jobid,
134+
title: this.$t('label.dedicate.pod'),
135+
description: `${this.$t('label.domain.id')} : ${this.domainId}`,
140136
successMessage: this.$t('label.pod.dedicated'),
141137
successMethod: () => {
142-
this.parentFetchData()
143138
this.fetchParentData()
144139
this.dedicatedDomainId = this.domainId
145140
this.dedicatedDomainModal = false
146-
this.$store.dispatch('AddAsyncJob', {
147-
title: this.$t('label.pod.dedicated'),
148-
jobid: response.dedicatepodresponse.jobid,
149-
description: `${this.$t('label.domainid')}: ${this.dedicatedDomainId}`,
150-
status: 'progress'
151-
})
152141
},
153142
errorMessage: this.$t('error.dedicate.pod.failed'),
154143
errorMethod: () => {
155-
this.parentFetchData()
156144
this.fetchParentData()
157145
this.dedicatedDomainModal = false
158146
},
@@ -181,22 +169,16 @@ export default {
181169
}).then(response => {
182170
this.$pollJob({
183171
jobId: response.dedicateclusterresponse.jobid,
172+
title: this.$t('label.dedicate.cluster'),
173+
description: `${this.$t('label.domain.id')} : ${this.domainId}`,
184174
successMessage: this.$t('message.cluster.dedicated'),
185175
successMethod: () => {
186-
this.parentFetchData()
187176
this.fetchParentData()
188177
this.dedicatedDomainId = this.domainId
189178
this.dedicatedDomainModal = false
190-
this.$store.dispatch('AddAsyncJob', {
191-
title: this.$t('message.cluster.dedicated'),
192-
jobid: response.dedicateclusterresponse.jobid,
193-
description: `${this.$t('label.domainid')}: ${this.dedicatedDomainId}`,
194-
status: 'progress'
195-
})
196179
},
197180
errorMessage: this.$t('error.dedicate.cluster.failed'),
198181
errorMethod: () => {
199-
this.parentFetchData()
200182
this.fetchParentData()
201183
this.dedicatedDomainModal = false
202184
},
@@ -225,22 +207,16 @@ export default {
225207
}).then(response => {
226208
this.$pollJob({
227209
jobId: response.dedicatehostresponse.jobid,
210+
title: this.$t('label.dedicate.host'),
211+
description: `${this.$t('label.domain.id')} : ${this.domainId}`,
228212
successMessage: this.$t('message.host.dedicated'),
229213
successMethod: () => {
230-
this.parentFetchData()
231214
this.fetchParentData()
232215
this.dedicatedDomainId = this.domainId
233216
this.dedicatedDomainModal = false
234-
this.$store.dispatch('AddAsyncJob', {
235-
title: this.$t('message.host.dedicated'),
236-
jobid: response.dedicatehostresponse.jobid,
237-
description: `${this.$t('label.domainid')}: ${this.dedicatedDomainId}`,
238-
status: 'progress'
239-
})
240217
},
241218
errorMessage: this.$t('error.dedicate.host.failed'),
242219
errorMethod: () => {
243-
this.parentFetchData()
244220
this.fetchParentData()
245221
this.dedicatedDomainModal = false
246222
},

‎ui/src/core/bootstrap.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ import {
3131
DEFAULT_FIXED_SIDEMENU,
3232
DEFAULT_CONTENT_WIDTH_TYPE,
3333
DEFAULT_MULTI_TAB,
34-
ASYNC_JOB_IDS
34+
HEADER_NOTICES
3535
} from '@/store/mutation-types'
3636

3737
export default function Initializer () {
@@ -47,5 +47,5 @@ export default function Initializer () {
4747
store.commit('TOGGLE_MULTI_TAB', Vue.ls.get(DEFAULT_MULTI_TAB, config.multiTab))
4848
store.commit('SET_TOKEN', Vue.ls.get(ACCESS_TOKEN))
4949
store.commit('SET_PROJECT', Vue.ls.get(CURRENT_PROJECT))
50-
store.commit('SET_ASYNC_JOB_IDS', Vue.ls.get(ASYNC_JOB_IDS) || [])
50+
store.commit('SET_HEADER_NOTICES', Vue.ls.get(HEADER_NOTICES) || [])
5151
}

‎ui/src/store/getters.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ const getters = {
3030
userInfo: state => state.user.info,
3131
addRouters: state => state.permission.addRouters,
3232
multiTab: state => state.app.multiTab,
33-
asyncJobIds: state => state.user.asyncJobIds,
33+
headerNotices: state => state.user.headerNotices,
3434
isLdapEnabled: state => state.user.isLdapEnabled,
3535
cloudian: state => state.user.cloudian,
3636
zones: state => state.user.zones,

0 commit comments

Comments
 (0)