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.

web/app/src/App.vue

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

web/app/src/components/FlamencoJobsTable.vue

@@ -66,6 +66,11 @@ export default {
     this.fetchAllJobs();
   },
   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() {
       const tab = this.$refs.tabulator.getInstance();
       return tab;

web/app/src/components/JobsListener.vue

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