Fix rerun button of Actions (#22798)

When clicking the return button, the page should be refreshed. However,
the browser may cancel the previous fetch request, and it fails to rerun
the job. It's easier to reproduce the bug in Safari or Firefox than
Chrome for some reason.

<img width="384" alt="image"
src="https://user-images.githubusercontent.com/9418365/217142792-a783f9a1-7089-44db-b7d8-46c46c72d284.png">


<img width="752" alt="image"
src="https://user-images.githubusercontent.com/9418365/217132406-b8381b63-b323-474e-935b-2596b1b5c046.png">
This commit is contained in:
Jason Song 2023-02-08 15:55:57 +08:00 committed by GitHub
parent e8186f1c0f
commit 7d3c4c3e8a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 9 additions and 6 deletions

View File

@ -20,7 +20,8 @@
<SvgIcon name="octicon-meter" class="ui text yellow" class-name="job-status-rotate" v-else-if="job.status === 'running'"/> <SvgIcon name="octicon-meter" class="ui text yellow" class-name="job-status-rotate" v-else-if="job.status === 'running'"/>
<SvgIcon name="octicon-x-circle-fill" class="red" v-else/> <SvgIcon name="octicon-x-circle-fill" class="red" v-else/>
{{ job.name }} {{ job.name }}
<button class="job-brief-rerun" @click="rerunJob(index)" v-if="job.canRerun"> <!-- TODO: it will be a better idea to move "button" out from "a", and the ".prevent" will not be needed. But it needs some work with CSS -->
<button class="job-brief-rerun" @click.prevent="rerunJob(index)" v-if="job.canRerun">
<SvgIcon name="octicon-sync" class="ui text black"/> <SvgIcon name="octicon-sync" class="ui text black"/>
</button> </button>
</a> </a>
@ -162,12 +163,14 @@ const sfc = {
} }
}, },
// rerun a job // rerun a job
rerunJob(idx) { async rerunJob(idx) {
this.fetch(`${this.run.link}/jobs/${idx}/rerun`); const jobLink = `${this.run.link}/jobs/${idx}`;
await this.fetchPost(`${jobLink}/rerun`);
window.location.href = jobLink;
}, },
// cancel a run // cancel a run
cancelRun() { cancelRun() {
this.fetch(`${this.run.link}/cancel`); this.fetchPost(`${this.run.link}/cancel`);
}, },
createLogLine(line) { createLogLine(line) {
@ -205,7 +208,7 @@ const sfc = {
// for example: make cursor=null means the first time to fetch logs, cursor=eof means no more logs, etc // for example: make cursor=null means the first time to fetch logs, cursor=eof means no more logs, etc
return {step: idx, cursor: it.cursor, expanded: it.expanded}; return {step: idx, cursor: it.cursor, expanded: it.expanded};
}); });
const resp = await this.fetch( const resp = await this.fetchPost(
`${this.actionsURL}/runs/${this.runIndex}/jobs/${this.jobIndex}`, `${this.actionsURL}/runs/${this.runIndex}/jobs/${this.jobIndex}`,
JSON.stringify({logCursors}), JSON.stringify({logCursors}),
); );
@ -245,7 +248,7 @@ const sfc = {
} }
}, },
fetch(url, body) { fetchPost(url, body) {
return fetch(url, { return fetch(url, {
method: 'POST', method: 'POST',
headers: { headers: {