Add polling to get realtime job output (#52)

Add polling to get realtime job output

Author: antonkomarev

CHANGELOG.md

@@ -8,6 +8,7 @@ All notable changes to `cybercog/laravel-paket` will be documented in this file.
 
 - ([#48]) Added repositories tab
 - ([#51]) Added refetch data button in top menu
+- ([#52]) Added polling to get realtime job output
 
 ## [1.4.0]
 
@@ -58,6 +59,7 @@ All notable changes to `cybercog/laravel-paket` will be documented in this file.
 [1.2.0]: https://github.com/cybercog/laravel-paket/compare/1.1.0...1.2.0
 [1.1.0]: https://github.com/cybercog/laravel-paket/compare/1.0.0...1.1.0
 
+[#52]: https://github.com/cybercog/laravel-paket/pull/52
 [#51]: https://github.com/cybercog/laravel-paket/pull/51
 [#48]: https://github.com/cybercog/laravel-paket/pull/48
 [#47]: https://github.com/cybercog/laravel-paket/pull/47

resources/js/screens/jobs/item.vue

@@ -45,7 +45,7 @@
         },
 
         mounted() {
-            this.fetchData();
+            this.autoRefreshData();
         },
 
         computed: {
@@ -59,12 +59,24 @@
         },
 
         methods: {
+            autoRefreshData() {
+                setTimeout(async () => {
+                    await this.fetchData();
+
+                    if (this.job.status === 'Pending' || this.job.status === 'Running') {
+                        this.autoRefreshData();
+                    }
+                }, 1000);
+            },
+
             async fetchData() {
                 const response = await this.$store.getters.getJob(this.$route.params.id);
 
-                this.job = response.data;
+                if (typeof response !== 'undefined') {
+                    this.job = response.data;
 
-                this.job.process.output = this.asHtml(this.job.process.output);
+                    this.job.process.output = this.asHtml(this.job.process.output);
+                }
             },
 
             asHtml(string) {

resources/js/store.js

@@ -129,8 +129,14 @@ const getters = {
         return state.jobs;
     },
 
-    getJob: (state, getters) => (jobId) => {
-        return Axios.get(getters.getUrl(`/api/jobs/${jobId}`));
+    getJob: (state, getters) => async (jobId) => {
+        const url = getters.getUrl(`/api/jobs/${jobId}`);
+
+        try {
+            return await Axios.get(url);
+        } catch (exception) {
+            console.warn(`Cannot fetch ${url}`);
+        }
     },
 
     getRequirementJobs: (state, getters) => (requirement) => {