formatting and compile

laravel · Feb 12, 2020 · d01ada1 · d01ada1
1 parent 481ef82
commit d01ada1
Show file tree

Hide file tree

Showing 8 changed files with 127 additions and 119 deletions.
diff --git a/public/app-dark.css b/public/app-dark.css
diff --git a/public/app.css b/public/app.css
diff --git a/public/app.js b/public/app.js
diff --git a/public/mix-manifest.json b/public/mix-manifest.json
@@ -1,5 +1,5 @@
 {
-    "/app.js": "/app.js?id=0d279600e8f8bb811551",
-    "/app.css": "/app.css?id=b95d548aba488172f4b4",
-    "/app-dark.css": "/app-dark.css?id=b5b064c2f5a4b673a1c5"
+    "/app.js": "/app.js?id=a1d687fa187d60549f6a",
+    "/app.css": "/app.css?id=81fbc8fec874ad3203d7",
+    "/app-dark.css": "/app-dark.css?id=3d68663a6ab8e86cb5dc"
 }
diff --git a/resources/js/base.js b/resources/js/base.js
@@ -44,13 +44,6 @@ 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);
-        },
+        }
     },
 };
diff --git a/resources/js/screens/recentJobs/index.vue b/resources/js/screens/recentJobs/index.vue
@@ -166,16 +166,17 @@
                 </thead>
 
                 <tbody>
-                <tr v-if="hasNewEntries" key="newEntries" class="dontanimate">
-                    <td colspan="100" class="text-center card-bg-secondary py-1">
-                        <small><a href="#" v-on:click.prevent="loadNewEntries" v-if="!loadingNewEntries">Load New
-                            Entries</a></small>
+                    <tr v-if="hasNewEntries" key="newEntries" class="dontanimate">
+                        <td colspan="100" class="text-center card-bg-secondary py-1">
+                            <small><a href="#" v-on:click.prevent="loadNewEntries" v-if="!loadingNewEntries">Load New
+                                Entries</a></small>
 
-                        <small v-if="loadingNewEntries">Loading...</small>
-                    </td>
-                </tr>
+                            <small v-if="loadingNewEntries">Loading...</small>
+                        </td>
+                    </tr>
 
-                <tr v-for="job in jobs" :key="job.id" :job="job" is="job-row"></tr>
+                    <tr v-for="job in jobs" :key="job.id" :job="job" is="job-row">
+                    </tr>
                 </tbody>
             </table>
 

diff --git a/resources/js/screens/recentJobs/job-row.vue b/resources/js/screens/recentJobs/job-row.vue
@@ -1,51 +1,33 @@
-<script type="text/ecmascript-6">
-    import phpunserialize from 'phpunserialize'
-    import moment from 'moment-timezone';
-
-    export default {
-        props: {
-            job: {
-                type: Object,
-                required: true
-            }
-        },
-
-        computed: {
-            unserialized() {
-                return phpunserialize(this.job.payload.data.command);
-            },
-
-            delayed() {
-                if(this.unserialized && this.unserialized.delay){
-                    return moment.utc(this.unserialized.delay.date).fromNow(true);
-                }
-
-                return null;
-            },
-        },
-    }
-</script>
 <template>
     <tr>
         <td>
             <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>
 
             {{ job.id }}
 
-            <small class="badge badge-secondary badge-sm" v-tooltip:top="`Delayed for ${delayed}`" v-if="delayed && (job.status == 'reserved' || job.status == 'pending')">Delayed</small>
+            <small class="badge badge-secondary badge-sm"
+                    v-tooltip:top="`Delayed for ${delayed}`"
+                    v-if="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> |
+
                 Queue: {{job.queue}}
+
                 <span v-if="job.payload.tags.length">
                     | Tags: {{ job.payload.tags && job.payload.tags.length ? job.payload.tags.slice(0,3).join(', ') : '' }}<span v-if="job.payload.tags.length > 3"> ({{ job.payload.tags.length - 3 }} more)</span>
                 </span>
             </small>
         </td>
+
         <td class="table-fit">
             {{ readableTimestamp(job.payload.pushedAt) }}
         </td>
@@ -69,3 +51,31 @@
         </td>
     </tr>
 </template>
+
+<script type="text/ecmascript-6">
+    import phpunserialize from 'phpunserialize'
+    import moment from 'moment-timezone';
+
+    export default {
+        props: {
+            job: {
+                type: Object,
+                required: true
+            }
+        },
+
+        computed: {
+            unserialized() {
+                return phpunserialize(this.job.payload.data.command);
+            },
+
+            delayed() {
+                if (this.unserialized && this.unserialized.delay){
+                    return moment.utc(this.unserialized.delay.date).fromNow(true);
+                }
+
+                return null;
+            },
+        },
+    }
+</script>
diff --git a/resources/js/screens/recentJobs/job.vue b/resources/js/screens/recentJobs/job.vue
@@ -1,72 +1,3 @@
-<script type="text/ecmascript-6">
-    import phpunserialize from 'phpunserialize'
-    import moment from "moment-timezone";
-
-    export default {
-        components: {
-            'stack-trace': require('./../../components/Stacktrace').default
-        },
-
-        /**
-         * The component's data.
-         */
-        data() {
-            return {
-                ready: false,
-                job: {}
-            };
-        },
-
-        computed: {
-            unserialized() {
-                return phpunserialize(this.job.payload.data.command);
-            },
-
-            delayed() {
-                if(this.unserialized && this.unserialized.delay){
-                    return moment.utc(this.unserialized.delay.date).local().format('YYYY-MM-DD HH:mm:ss');
-                }
-
-                return null;
-            },
-        },
-
-
-        /**
-         * Prepare the component.
-         */
-        mounted() {
-            this.loadJob(this.$route.params.jobId);
-
-            document.title = "Horizon - Job Detail";
-        },
-
-        methods: {
-            /**
-             * Load a job by the given ID.
-             */
-            loadJob(id) {
-                this.ready = false;
-
-                this.$http.get(Horizon.basePath + '/api/jobs/recent/' + id)
-                    .then(response => {
-                        this.job = response.data;
-
-                        this.ready = true;
-                    });
-            },
-
-            /**
-             * Pretty print serialized job.
-             */
-            prettyPrintJob(data) {
-                return data.command && !data.command.includes('CallQueuedClosure')
-                    ? phpunserialize(data.command) : data;
-            }
-        }
-    }
-</script>
-
 <template>
     <div>
         <div class="card">
@@ -92,18 +23,22 @@
                     <div class="col-md-2"><strong>ID</strong></div>
                     <div class="col">{{job.id}}</div>
                 </div>
+
                 <div class="row mb-2">
                     <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="delayed">
                     <div class="col-md-2"><strong>Delayed Until</strong></div>
                     <div class="col">{{delayed}}</div>
                 </div>
+
                 <div class="row">
                     <div class="col-md-2"><strong>Completed At</strong></div>
                     <div class="col" v-if="job.completed_at">{{readableTimestamp(job.completed_at)}}</div>
@@ -142,3 +77,72 @@
         </div>
     </div>
 </template>
+
+<script type="text/ecmascript-6">
+    import phpunserialize from 'phpunserialize'
+    import moment from "moment-timezone";
+
+    export default {
+        components: {
+            'stack-trace': require('./../../components/Stacktrace').default
+        },
+
+        /**
+         * The component's data.
+         */
+        data() {
+            return {
+                ready: false,
+                job: {}
+            };
+        },
+
+        computed: {
+            unserialized() {
+                return phpunserialize(this.job.payload.data.command);
+            },
+
+            delayed() {
+                if(this.unserialized && this.unserialized.delay){
+                    return moment.utc(this.unserialized.delay.date).local().format('YYYY-MM-DD HH:mm:ss');
+                }
+
+                return null;
+            },
+        },
+
+
+        /**
+         * Prepare the component.
+         */
+        mounted() {
+            this.loadJob(this.$route.params.jobId);
+
+            document.title = "Horizon - Job Detail";
+        },
+
+        methods: {
+            /**
+             * Load a job by the given ID.
+             */
+            loadJob(id) {
+                this.ready = false;
+
+                this.$http.get(Horizon.basePath + '/api/jobs/recent/' + id)
+                    .then(response => {
+                        this.job = response.data;
+
+                        this.ready = true;
+                    });
+            },
+
+            /**
+             * Pretty print serialized job.
+             */
+            prettyPrintJob(data) {
+                return data.command && !data.command.includes('CallQueuedClosure')
+                    ? phpunserialize(data.command) : data;
+            }
+        }
+    }
+</script>