feat(fe): update task statuses on Dashboard in realtime

Issue: #621
semaphoreui · Nov 22, 2020 · 043b885 · 043b885
1 parent d417f95
commit 043b885
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 2 deletions.
diff --git a/web2/src/components/TaskLogView.vue b/web2/src/components/TaskLogView.vue
@@ -106,7 +106,7 @@ export default {
     },
   },
   async created() {
-    socket.addListener((data) => this.onDataReceive(data));
+    socket.addListener((data) => this.onWebsocketDataReceived(data));
     await this.loadData();
   },
 
@@ -117,7 +117,7 @@ export default {
       this.user = {};
     },
 
-    onDataReceive(data) {
+    onWebsocketDataReceived(data) {
       if (data.project_id !== this.projectId || data.task_id !== this.itemId) {
         return;
       }

diff --git a/web2/src/views/project/History.vue b/web2/src/views/project/History.vue
@@ -46,6 +46,7 @@
 import ItemListPageBase from '@/components/ItemListPageBase';
 import EventBus from '@/event-bus';
 import TaskStatus from '@/components/TaskStatus.vue';
+import socket from '@/socket';
 
 export default {
   mixins: [ItemListPageBase],
@@ -58,13 +59,34 @@ export default {
     },
   },
 
+  created() {
+    socket.addListener((data) => this.onWebsocketDataReceived(data));
+  },
+
   methods: {
     showTaskLog(taskId) {
       EventBus.$emit('i-show-task', {
         taskId,
       });
     },
 
+    async onWebsocketDataReceived(data) {
+      if (data.project_id !== this.projectId || data.type !== 'update') {
+        return;
+      }
+
+      if (!this.items.some((item) => item.id === data.task_id)) {
+        await this.loadItems();
+      }
+
+      const task = this.items.find((item) => item.id === data.task_id);
+
+      Object.assign(task, {
+        ...data,
+        type: undefined,
+      });
+    },
+
     getHeaders() {
       return [
         {