[6.x] Update to bootstrap 5.1 and drop jQuery (#1119)

* Update bootstrap and remove jQuery and popper.js dependencies Popper.js is needed for tooltips, using the browser native title attribute removes the need to keep this * Update utility classes https://getbootstrap.com/docs/5.1/migration/#utilities * Fix badge color classes https://getbootstrap.com/docs/5.1/migration/#badges * Remove text decoration of anchor tags https://getbootstrap.com/docs/5.1/migration/#content-reboot-etc * Fix data-toggle attribute https://getbootstrap.com/docs/5.1/migration/#javascript * Remove text-decoration of route-link elements https://getbootstrap.com/docs/5.1/migration/#content-reboot-etc * Remove new border styling under thead * Fix vue-json-pretty output with overflowing text * Apply fixes for updated vue-json-pretty css laravel/telescope#1049
laravel · Feb 14, 2022 · dde92b9 · dde92b9
1 parent 5925802
commit dde92b9
Show file tree

Hide file tree

Showing 24 changed files with 3,698 additions and 3,089 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,23 +11,21 @@
     },
     "devDependencies": {
         "axios": "^0.21.1",
-        "bootstrap": "^4.3.1",
+        "bootstrap": "^5.1.3",
         "chart.js": "^2.5.0",
         "highlight.js": "^10.4.1",
-        "jquery": "^3.5.0",
         "laravel-mix": "^6.0.13",
         "lodash": "^4.17.19",
         "md5": "^2.2.1",
         "moment": "^2.10.6",
         "moment-timezone": "^0.5.21",
         "phpunserialize": "1.*",
-        "popper.js": "^1.12",
         "resolve-url-loader": "^3.1.2",
-        "sass": "^1.26.3",
-        "sass-loader": "^11.0.1",
+        "sass": "^1.49.7",
+        "sass-loader": "^12.4",
         "sql-formatter": "^4.0.2",
         "vue": "^2.5.7",
-        "vue-json-pretty": "^1.4.1",
+        "vue-json-pretty": "^1.6.2",
         "vue-loader": "^15.9.6",
         "vue-router": "^3.0.1",
         "vue-template-compiler": "^2.5.21"

diff --git a/resources/js/app.js b/resources/js/app.js
@@ -4,14 +4,7 @@ import axios from 'axios';
 import Routes from './routes';
 import VueRouter from 'vue-router';
 import VueJsonPretty from 'vue-json-pretty';
-
-window.Popper = require('popper.js').default;
-
-try {
-    window.$ = window.jQuery = require('jquery');
-
-    require('bootstrap');
-} catch (e) {}
+import 'vue-json-pretty/lib/styles.css';
 
 let token = document.head.querySelector('meta[name="csrf-token"]');
 
@@ -45,14 +38,6 @@ 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',
 

diff --git a/resources/js/components/Alert.vue b/resources/js/components/Alert.vue
@@ -1,31 +1,36 @@
 <script type="text/ecmascript-6">
+    import { Modal } from 'bootstrap';
+
     export default {
         props: ['type', 'message', 'autoClose', 'confirmationProceed', 'confirmationCancel'],
 
         data(){
             return {
                 timeout: null,
-                anotherModalOpened: $('body').hasClass('modal-open')
+                alertModal: null,
+                anotherModalOpened: document.body.classList.contains('modal-open')
             }
         },
 
 
         mounted() {
-            $('#alertModal').modal({
+            const alertModalElement = document.getElementById('alertModal');
+            this.alertModal = Modal.getOrCreateInstance(alertModalElement, {
                 backdrop: 'static',
-            });
+            })
+            this.alertModal.show();
 
-            $('#alertModal').on('hidden.bs.modal', e => {
+            alertModalElement.addEventListener('hidden.bs.modal', e => {
                 this.$root.alert.type = null;
                 this.$root.alert.autoClose = false;
                 this.$root.alert.message = '';
                 this.$root.alert.confirmationProceed = null;
                 this.$root.alert.confirmationCancel = null;
 
                 if (this.anotherModalOpened) {
-                    $('body').addClass('modal-open');
+                    document.body.classList.add('modal-open');
                 }
-            });
+            }, this);
 
             if (this.autoClose) {
                 this.timeout = setTimeout(() => {
@@ -42,7 +47,7 @@
             close(){
                 clearTimeout(this.timeout);
 
-                $('#alertModal').modal('hide');
+                this.alertModal.hide();
             },
 
 

diff --git a/resources/js/components/Stacktrace.vue b/resources/js/components/Stacktrace.vue
@@ -31,7 +31,7 @@
             </tr>
 
             <tr v-if="! showAll">
-                <td class="card-bg-secondary"><a href="*" v-on:click.prevent="showAll = true">Show All</a></td>
+                <td class="card-bg-secondary"><a href="*" class="text-decoration-none" v-on:click.prevent="showAll = true">Show All</a></td>
             </tr>
             </tbody>
         </table>

diff --git a/resources/js/screens/batches/index.vue b/resources/js/screens/batches/index.vue
@@ -133,7 +133,7 @@
             </div>
 
             <div v-if="!ready" class="d-flex align-items-center justify-content-center card-bg-secondary p-5 bottom-radius">
-                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="icon spin mr-2 fill-text-color">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="icon spin me-2 fill-text-color">
                     <path d="M12 10a2 2 0 0 1-3.41 1.41A2 2 0 0 1 10 8V0a9.97 9.97 0 0 1 10 10h-8zm7.9 1.41A10 10 0 1 1 8.59.1v2.03a8 8 0 1 0 9.29 9.29h2.02zm-4.07 0a6 6 0 1 1-7.25-7.25v2.1a3.99 3.99 0 0 0-1.4 6.57 4 4 0 0 0 6.56-1.42h2.1z"></path>
                 </svg>
 
@@ -152,40 +152,40 @@
                     <th>Status</th>
                     <th>Size</th>
                     <th>Completion</th>
-                    <th class="text-right">Created At</th>
+                    <th class="text-end">Created At</th>
                 </tr>
                 </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>
+                        <small><a href="#" class="text-decoration-none" v-on:click.prevent="loadNewEntries" v-if="!loadingNewEntries">Load New Entries</a></small>
 
                         <small v-if="loadingNewEntries">Loading...</small>
                     </td>
                 </tr>
 
                 <tr v-for="batch in batches" :key="batch.id">
                     <td>
-                        <router-link :title="batch.id" :to="{ name: 'batches-preview', params: { batchId: batch.id }}">
+                        <router-link class="text-decoration-none" :title="batch.id" :to="{ name: 'batches-preview', params: { batchId: batch.id }}">
                             {{ batch.name || batch.id }}
                         </router-link>
                     </td>
                     <td>
-                        <small class="badge badge-danger badge-sm" v-if="batch.failedJobs > 0 && batch.totalJobs - batch.pendingJobs < batch.totalJobs">
+                        <small class="badge bg-danger badge-sm" v-if="batch.failedJobs > 0 && batch.totalJobs - batch.pendingJobs < batch.totalJobs">
                             Failures
                         </small>
-                        <small class="badge badge-success badge-sm" v-if="batch.totalJobs - batch.pendingJobs == batch.totalJobs">
+                        <small class="badge bg-success badge-sm" v-if="batch.totalJobs - batch.pendingJobs == batch.totalJobs">
                             Finished
                         </small>
-                        <small class="badge badge-secondary badge-sm" v-if="batch.pendingJobs > 0 && !batch.failedJobs">
+                        <small class="badge bg-secondary badge-sm" v-if="batch.pendingJobs > 0 && !batch.failedJobs">
                             Pending
                         </small>
                     </td>
                     <td>{{batch.totalJobs}}</td>
                     <td>{{batch.progress}}%</td>
 
-                    <td class="text-right table-fit">
+                    <td class="text-end table-fit">
                         {{ formatDateIso(batch.createdAt).format('YYYY-MM-DD HH:mm:ss') }}
                     </td>
                 </tr>

diff --git a/resources/js/screens/batches/preview.vue b/resources/js/screens/batches/preview.vue
@@ -92,7 +92,7 @@
             </div>
 
             <div v-if="!ready" class="d-flex align-items-center justify-content-center card-bg-secondary p-5 bottom-radius">
-                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="icon spin mr-2 fill-text-color">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="icon spin me-2 fill-text-color">
                     <path d="M12 10a2 2 0 0 1-3.41 1.41A2 2 0 0 1 10 8V0a9.97 9.97 0 0 1 10 10h-8zm7.9 1.41A10 10 0 1 1 8.59.1v2.03a8 8 0 1 0 9.29 9.29h2.02zm-4.07 0a6 6 0 1 1-7.25-7.25v2.1a3.99 3.99 0 0 0-1.4 6.57 4 4 0 0 0 6.56-1.42h2.1z"></path>
                 </svg>
 
@@ -105,13 +105,13 @@
                     <div class="col">
                         {{batch.id}}
 
-                        <small class="badge badge-danger badge-sm" v-if="batch.failedJobs > 0 && batch.totalJobs - batch.pendingJobs < batch.totalJobs">
+                        <small class="badge bg-danger badge-sm" v-if="batch.failedJobs > 0 && batch.totalJobs - batch.pendingJobs < batch.totalJobs">
                             Failures
                         </small>
-                        <small class="badge badge-success badge-sm" v-if="batch.totalJobs - batch.pendingJobs == batch.totalJobs">
+                        <small class="badge bg-success badge-sm" v-if="batch.totalJobs - batch.pendingJobs == batch.totalJobs">
                             Finished
                         </small>
-                        <small class="badge badge-secondary badge-sm" v-if="batch.pendingJobs > 0 && !batch.failedJobs">
+                        <small class="badge bg-secondary badge-sm" v-if="batch.pendingJobs > 0 && !batch.failedJobs">
                             Pending
                         </small>
                     </div>
@@ -170,15 +170,15 @@
                 <tr>
                     <th>Job</th>
                     <th>Runtime</th>
-                    <th class="text-right">Failed At</th>
+                    <th class="text-end">Failed At</th>
                 </tr>
                 </thead>
 
                 <tbody>
 
                 <tr v-for="failedJob in failedJobs">
                     <td>
-                        <router-link :to="{ name: 'failed-jobs-preview', params: { jobId: failedJob.id }}">
+                        <router-link class="text-decoration-none" :to="{ name: 'failed-jobs-preview', params: { jobId: failedJob.id }}">
                             {{ jobBaseName(failedJob.name) }}
                         </router-link>
                     </td>
@@ -187,7 +187,7 @@
                         <span>{{ failedJob.failed_at && failedJob.reserved_at ? String((failedJob.failed_at - failedJob.reserved_at).toFixed(2))+'s' : '-' }}</span>
                     </td>
 
-                    <td class="text-right table-fit">
+                    <td class="text-end table-fit">
                         {{ readableTimestamp(failedJob.failed_at) }}
                     </td>
                 </tr>

diff --git a/resources/js/screens/dashboard.vue b/resources/js/screens/dashboard.vue
@@ -162,7 +162,7 @@
 
             <div class="card-bg-secondary">
                 <div class="d-flex">
-                    <div class="w-25 border-right border-bottom">
+                    <div class="w-25 border-end border-bottom">
                         <div class="p-4">
                             <small class="text-uppercase">Jobs Per Minute</small>
 
@@ -172,7 +172,7 @@
                         </div>
                     </div>
 
-                    <div class="w-25 border-right border-bottom">
+                    <div class="w-25 border-end border-bottom">
                         <div class="p-4">
                             <small class="text-uppercase" v-text="recentJobsPeriod"></small>
 
@@ -182,7 +182,7 @@
                         </div>
                     </div>
 
-                    <div class="w-25 border-right border-bottom">
+                    <div class="w-25 border-end border-bottom">
                         <div class="p-4">
                             <small class="text-uppercase" v-text="failedJobsPeriod"></small>
 
@@ -209,15 +209,15 @@
                                     <path d="M2.93 17.07A10 10 0 1 1 17.07 2.93 10 10 0 0 1 2.93 17.07zm1.41-1.41A8 8 0 1 0 15.66 4.34 8 8 0 0 0 4.34 15.66zm9.9-8.49L11.41 10l2.83 2.83-1.41 1.41L10 11.41l-2.83 2.83-1.41-1.41L8.59 10 5.76 7.17l1.41-1.41L10 8.59l2.83-2.83 1.41 1.41z"/>
                                 </svg>
 
-                                <h4 class="mb-0 ml-2">{{ {running: 'Active', paused: 'Paused', inactive:'Inactive'}[stats.status] }}</h4>
-                                <small v-if="stats.status == 'running' && stats.pausedMasters > 0" class="mb-0 ml-2">({{ stats.pausedMasters }} paused)</small>
+                                <h4 class="mb-0 ms-2">{{ {running: 'Active', paused: 'Paused', inactive:'Inactive'}[stats.status] }}</h4>
+                                <small v-if="stats.status == 'running' && stats.pausedMasters > 0" class="mb-0 ms-2">({{ stats.pausedMasters }} paused)</small>
                             </div>
                         </div>
                     </div>
                 </div>
 
                 <div class="d-flex">
-                    <div class="w-25 border-right">
+                    <div class="w-25 border-end">
                         <div class="p-4 mb-0">
                             <small class="text-uppercase">TOTAL PROCESSES</small>
 
@@ -227,7 +227,7 @@
                         </div>
                     </div>
 
-                    <div class="w-25 border-right">
+                    <div class="w-25 border-end">
                         <div class="p-4 mb-0">
                             <small class="text-uppercase">MAX WAIT TIME</small>
 
@@ -239,7 +239,7 @@
                         </div>
                     </div>
 
-                    <div class="w-25 border-right">
+                    <div class="w-25 border-end">
                         <div class="p-4 mb-0">
                             <small class="text-uppercase">MAX RUNTIME</small>
 
@@ -274,19 +274,19 @@
                     <th>Queue</th>
                     <th>Processes</th>
                     <th>Jobs</th>
-                    <th class="text-right">Wait</th>
+                    <th class="text-end">Wait</th>
                 </tr>
                 </thead>
 
                 <tbody>
                     <template v-for="queue in workload">
                         <tr>
-                            <td :class="{'font-weight-bold': queue.split_queues}">
+                            <td :class="{'fw-bold': queue.split_queues}">
                                 <span>{{ queue.name.replace(/,/g, ', ') }}</span>
                             </td>
-                            <td :class="{'font-weight-bold': queue.split_queues}">{{ queue.processes ? queue.processes.toLocaleString() : 0 }}</td>
-                            <td :class="{'font-weight-bold': queue.split_queues}">{{ queue.length ? queue.length.toLocaleString() : 0 }}</td>
-                            <td :class="{'font-weight-bold': queue.split_queues}" class="text-right">{{ humanTime(queue.wait) }}</td>
+                            <td :class="{'fw-bold': queue.split_queues}">{{ queue.processes ? queue.processes.toLocaleString() : 0 }}</td>
+                            <td :class="{'fw-bold': queue.split_queues}">{{ queue.length ? queue.length.toLocaleString() : 0 }}</td>
+                            <td :class="{'fw-bold': queue.split_queues}" class="text-end">{{ humanTime(queue.wait) }}</td>
                         </tr>
 
                         <tr v-for="split_queue in queue.split_queues">
@@ -299,7 +299,7 @@
                             </td>
                             <td>-</td>
                             <td>{{ split_queue.length ? split_queue.length.toLocaleString() : 0 }}</td>
-                            <td class="text-right">{{ humanTime(split_queue.wait) }}</td>
+                            <td class="text-end">{{ humanTime(split_queue.wait) }}</td>
                         </tr>
                     </template>
                 </tbody>
@@ -326,24 +326,24 @@
                     <th>Supervisor</th>
                     <th>Processes</th>
                     <th>Queues</th>
-                    <th class="text-right">Balancing</th>
+                    <th class="text-end">Balancing</th>
                 </tr>
                 </thead>
 
                 <tbody>
                 <tr v-for="supervisor in worker.supervisors">
                     <td>
-                        <svg v-if="supervisor.status == 'paused'" class="fill-warning mr-1" viewBox="0 0 20 20" style="width: 1rem; height: 1rem;">
+                        <svg v-if="supervisor.status == 'paused'" class="fill-warning me-1" viewBox="0 0 20 20" style="width: 1rem; height: 1rem;">
                             <path d="M2.93 17.07A10 10 0 1 1 17.07 2.93 10 10 0 0 1 2.93 17.07zm12.73-1.41A8 8 0 1 0 4.34 4.34a8 8 0 0 0 11.32 11.32zM7 6h2v8H7V6zm4 0h2v8h-2V6z"/>
                         </svg>
                         {{ superVisorDisplayName(supervisor.name, worker.name) }}
                     </td>
                     <td>{{ countProcesses(supervisor.processes) }}</td>
                     <td>{{ supervisor.options.queue.replace(/,/g, ', ') }}</td>
-                    <td class="text-right" v-if="supervisor.options.balance">
+                    <td class="text-end" v-if="supervisor.options.balance">
                         ({{ supervisor.options.balance.charAt(0).toUpperCase() + supervisor.options.balance.slice(1) }})
                     </td>
-                    <td class="text-right" v-else>
+                    <td class="text-end" v-else>
                         (Disabled)
                     </td>
                 </tr>