Proof of concept - Vue Polling - Performance Improvement and tweaking for better user experience

app/Classes/Modules/Jobs/Processors/FetchesJobResultProcessor.php

@@ -2,6 +2,7 @@
 
 namespace App\Classes\Modules\Jobs\Processors;
 
+use App\Classes\Exceptions\JobResourceNotFoundException;
 use App\Classes\Modules\Jobs\Services\FetchesJobResult;
 use Illuminate\Http\Request;
 
@@ -32,12 +33,15 @@ class FetchesJobResultProcessor
     public function execute(Request $request){
 
         $res1 = $this->fetchesJobResult->execute(['job_id' => $request->route('job_id')]);
-
+        if($request->route('is_last')){
-        if(!$res1->result){
             $res2 = $this->fetchesJobResult->execute(['request_signature' => $res1->request_signature, 'result_not_null' => true, 'order_by_id_desc' => true]);
             return $res2;
         }
 
+        if(!$res1->result){
+            throw new JobResourceNotFoundException('Unable to find any job based on the criteria provided');
+        }
+
         return $res1;
     }
 }

app/Classes/Modules/Jobs/Processors/UpdateJobResultProcessor.php

@@ -44,9 +44,9 @@ class UpdateJobResultProcessor
         try{
             $jobResultExisting = $this->fetchesJobResult->execute(['request_signature' => $jobResultCurrent->request_signature, 'result_not_null' => true, 'order_by_id_desc' => true]);
             $resultSignatureExisting = $jobResultExisting->result_signature;
-            if($resultSignatureExisting != $resultSignatureCurrent){
+            //if($resultSignatureExisting != $resultSignatureCurrent){
                 $this->updateJobResult($jobResultCurrent, $resultCurrentJson, $resultSignatureCurrent, $listGenericJobObject->getJobCommandName(), $listGenericJobObject->getJobCommand());
-            }
+            //}
         } catch (JobResourceNotFoundException $exception){
             $this->updateJobResult($jobResultCurrent, $resultCurrentJson, $resultSignatureCurrent, $listGenericJobObject->getJobCommandName(), $listGenericJobObject->getJobCommand());
         }

gulpfile.js

@@ -37,6 +37,7 @@ gulp.task('vendorCss', () => {
         .pipe(plugins.cleanCss())
         .pipe(plugins.replace('../../../font-awesome/', './'))
         .pipe(plugins.replace('../../jquery-ui-dist/', ''))
+        //.pipe(plugins.replace(/background-image:url\(\.\.\/\.\./g, `background-image:url(`)) //cief todo: gulp
         .pipe(gulp.dest(pkg.paths.build.css));
 });
 
@@ -115,4 +116,4 @@ gulp.task('watch', (done) => {
     gulp.watch(pkg.globs.sourceJs, gulp.series('sourceJs'));
     gulp.watch(pkg.globs.sourceJs, gulp.series('sourceFonts'));
     done();
-});
+});

resources/assets/vue/components/general/elements/ListPollingComponent.vue

@@ -126,8 +126,10 @@
             errorHandler(error){
                 this.isPolling = false;
             },
-            startPolling(jobId, maxAttempts = 4) {
+            startPolling(jobId, maxAttempts = 8) {
                 let attempts = 0;
+                let interval = 15000; // Initial interval
+
                 const pollJobResult = () => {
                     if (this.isPolling) {
                         return;
@@ -135,6 +137,9 @@
                     this.isPolling = true;
 
                     attempts++;
+                    if(attempts === 1){
+                        interval = 5000;
+                    }
 
                     if (attempts > maxAttempts) {
                         clearInterval(this.pollingInterval);
@@ -145,11 +150,16 @@
                         return;
                     }
 
-                    this.fetchJobResult(jobId);
+                    if(attempts === maxAttempts){
+                        this.fetchJobResult(jobId, true);
+                    }
+                    else{
+                        this.fetchJobResult(jobId);
+                    }
                 };
 
                 // pollJobResult();  // Initial call
-                this.pollingInterval = setInterval(pollJobResult, 15000);
+                this.pollingInterval = setInterval(pollJobResult, interval);
             },
             stopPolling() {
                 clearInterval(this.pollingInterval);
@@ -172,9 +182,12 @@
                     console.error('Error submitJob', error);
                 }
             },
-            fetchJobResult(jobId) {
+            fetchJobResult(jobId, isLastAttempt = false) {
                 try {
                     let anotherEndpoint = route('api.job.fetch', jobId);
+                    if(isLastAttempt){
+                        anotherEndpoint = route('api.job.fetch.last.attempt', jobId, isLastAttempt);
+                    }
                     this.poll(anotherEndpoint, 'get', this.section, false, false); //cief todo: Uncaught (in promise) null
                 } catch (error) {
                     console.error('Error fetchJobResult', error);

routes/job.php

@@ -4,4 +4,5 @@ use Illuminate\Support\Facades\Route;
 
 Route::group(['prefix' => 'job', 'as' => 'job.', 'namespace' => 'Jobs'], function () {
     Route::get('/fetch/{job_id}', 'FetchJobResultController@fetch')->name('fetch');
+    Route::get('/fetch/{job_id}/{is_last}', 'FetchJobResultController@fetch')->name('fetch.last.attempt');
 });