[3.x] Ability to see if a job is delayed

resources/js/app.js

@@ -5,7 +5,13 @@ import Routes from './routes';
 import VueRouter from 'vue-router';
 import VueJsonPretty from 'vue-json-pretty';
 
-require('bootstrap');
+window.Popper = require('popper.js').default;
+
+try {
+    window.$ = window.jQuery = require('jquery');
+
+    require('bootstrap');
+} catch (e) {}
 
 let token = document.head.querySelector('meta[name="csrf-token"]');
 
@@ -17,8 +23,6 @@ if (token) {
 
 Vue.use(VueRouter);
 
-window.Popper = require('popper.js').default;
-
 Vue.prototype.$http = axios.create();
 
 window.Horizon.basePath = '/' + window.Horizon.path;
@@ -41,6 +45,14 @@ Vue.component('alert', require('./components/Alert.vue').default);
 
 Vue.mixin(Base);
 
+Vue.directive('tooltip', function(el, binding) {
+    $(el).tooltip({
+        title: binding.value,
+        placement: binding.arg,
+        trigger: 'hover',
+    });
+});
+
 new Vue({
     el: '#horizon',
 

resources/js/base.js

@@ -45,5 +45,12 @@ export default {
         readableTimestamp(timestamp) {
             return this.formatDate(timestamp).format('YYYY-MM-DD HH:mm:ss');
         },
+
+        /**
+         * Convert to human readable timestamp e.g. "18 minutes".
+         */
+        readableHumanTimestamp(timestamp) {
+            return this.formatDate(timestamp).fromNow(true);
+        },
     },
 };

resources/js/components/Alert.vue

@@ -1,6 +1,4 @@
 <script type="text/ecmascript-6">
-    import $ from 'jquery';
-
     export default {
         props: ['type', 'message', 'autoClose', 'confirmationProceed', 'confirmationCancel'],
 

resources/js/components/Stacktrace.vue

@@ -1,5 +1,5 @@
 <script type="text/ecmascript-6">
-    import _ from "lodash"
+    import _take from "lodash/take"
 
     export default {
         props: ['trace'],
@@ -16,7 +16,7 @@
 
         computed: {
             lines(){
-                return this.showAll ? _.take(this.trace, 1000) : _.take(this.trace, this.minimumLines);
+                return this.showAll ? _take(this.trace, 1000) : _take(this.trace, this.minimumLines);
             }
         }
     }
@@ -38,4 +38,4 @@
 
 <style scoped>
 
-</style>
+</style>

resources/js/screens/monitoring/index.vue

@@ -1,6 +1,4 @@
 <script type="text/ecmascript-6">
-    import $ from 'jquery';
-
     export default {
         /**
          * The component's data.

resources/js/screens/recentJobs/index.vue

@@ -1,6 +1,4 @@
 <script type="text/ecmascript-6">
-    import $ from 'jquery';
-
     export default {
         /**
          * The component's data.
@@ -173,7 +171,10 @@
                         <span v-if="job.status != 'failed'" :title="job.name">{{jobBaseName(job.name)}}</span>
                         <router-link v-if="job.status === 'failed'" :title="job.name" :to="{ name: 'failed-jobs-preview', params: { jobId: job.id }}">
                             {{ jobBaseName(job.name) }}
-                        </router-link><br>
+                        </router-link>
+
+                        <small class="badge badge-secondary badge-sm" v-tooltip:top="`Delayed for ${readableHumanTimestamp(job.delayed)}`" v-if="job.delayed && (job.status == 'reserved' || job.status == 'pending')">Delayed</small>
+                        <br>
 
                         <small class="text-muted">
                             <router-link :to="{name: 'recent-jobs-preview', params: {jobId: job.id}}">View detail</router-link> |

resources/js/screens/recentJobs/job.vue

@@ -81,9 +81,18 @@
                     <div class="col-md-2"><strong>Queue</strong></div>
                     <div class="col">{{job.queue}}</div>
                 </div>
+                <div class="row mb-2">
+                    <div class="col-md-2"><strong>Pushed At</strong></div>
+                    <div class="col">{{ readableTimestamp(job.payload.pushedAt) }}</div>
+                </div>
+                <div class="row mb-2" v-if="job.delayed">
+                    <div class="col-md-2"><strong>Delayed Until</strong></div>
+                    <div class="col">{{readableTimestamp(job.delayed)}}</div>
+                </div>
                 <div class="row">
                     <div class="col-md-2"><strong>Completed At</strong></div>
-                    <div class="col">{{readableTimestamp(job.completed_at)}}</div>
+                    <div class="col" v-if="job.completed_at">{{readableTimestamp(job.completed_at)}}</div>
+                    <div class="col" else>-</div>
                 </div>
             </div>
         </div>

resources/sass/base.scss

@@ -268,3 +268,7 @@ button:hover {
     color: #fff;
     background: $danger;
 }
+
+.badge-sm {
+    font-size: 0.75rem;
+}

src/Http/Controllers/RecentJobsController.php

@@ -38,6 +38,8 @@ public function index(Request $request)
         $jobs = $this->jobs->getRecent($request->query('starting_at', -1))->map(function ($job) {
             $job->payload = json_decode($job->payload);
 
+            $job->delayed = strtotime(optional(unserialize($job->payload->data->command))->delay);
+
             return $job;
         })->values();
 
@@ -64,6 +66,8 @@ protected function decode($job)
     {
         $job->payload = json_decode($job->payload);
 
+        $job->delayed = strtotime(optional(unserialize($job->payload->data->command))->delay);
+
         return $job;
     }
 }