Web: re-fetch jobs after reconnecting to backend

If the backend connection was lost, and then obtained again, just fetch
all available jobs to ensure the presented data is fresh.
This commit is contained in:
Sybren A. Stüvel 2022-04-08 15:03:04 +02:00
parent e7fc2c6f6e
commit f155715d12
3 changed files with 11 additions and 1 deletions

View File

@ -14,6 +14,7 @@
:websocketURL="websocketURL" :websocketURL="websocketURL"
@jobUpdate="onJobUpdate" @jobUpdate="onJobUpdate"
@message="onChatMessage" @message="onChatMessage"
@reconnected="onReconnected"
/> />
</div> </div>
</template> </template>
@ -59,6 +60,9 @@ export default {
console.log("chat message received:", message); console.log("chat message received:", message);
this.messages.push(`${message.text}`); this.messages.push(`${message.text}`);
}, },
onReconnected() {
this.$refs.jobsTable.onReconnected();
},
}, },
}; };
</script> </script>

View File

@ -66,6 +66,11 @@ export default {
this.fetchAllJobs(); this.fetchAllJobs();
}, },
methods: { methods: {
onReconnected() {
// If the connection to the backend was lost, we have likely missed some
// updates. Just fetch the data and start from scratch.
this.fetchAllJobs();
},
tabulator: function() { tabulator: function() {
const tab = this.$refs.tabulator.getInstance(); const tab = this.$refs.tabulator.getInstance();
return tab; return tab;

View File

@ -6,7 +6,7 @@
import io from "socket.io-client"; import io from "socket.io-client";
export default { export default {
emits: ["jobUpdate", "taskUpdate", "message"], emits: ["jobUpdate", "taskUpdate", "message", "reconnected"],
props: ["websocketURL"], props: ["websocketURL"],
data() { data() {
return { return {
@ -30,6 +30,7 @@ export default {
this.socket.on("reconnect", (attemptNumber) => { this.socket.on("reconnect", (attemptNumber) => {
console.log("socketIO reconnected after", attemptNumber, "attempts"); console.log("socketIO reconnected after", attemptNumber, "attempts");
this.$emit("reconnected");
}) })
this.socket.on("/jobs", (jobUpdate) => { this.socket.on("/jobs", (jobUpdate) => {