Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 9 commits into from
Feb 14, 2022
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
7d77e74
Update bootstrap and remove jQuery and popper.js dependencies
mmachatschek Feb 9, 2022
dbd30de
Update utility classes
mmachatschek Feb 9, 2022
8cc7f44
Fix badge color classes
mmachatschek Feb 9, 2022
2615934
Remove text decoration of anchor tags
mmachatschek Feb 9, 2022
59c9322
Fix data-toggle attribute
mmachatschek Feb 9, 2022
b423260
Remove text-decoration of route-link elements
mmachatschek Feb 9, 2022
fe0da09
Remove new border styling under thead
mmachatschek Feb 13, 2022
5617364
Fix vue-json-pretty output with overflowing text
mmachatschek Feb 13, 2022
a5f691a
Apply fixes for updated vue-json-pretty css
mmachatschek Feb 13, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6,551 changes: 3,577 additions & 2,974 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

10 changes: 4 additions & 6 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
17 changes: 1 addition & 16 deletions resources/js/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"]');

Expand Down Expand Up @@ -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',

Expand Down
19 changes: 12 additions & 7 deletions resources/js/components/Alert.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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(() => {
Expand All @@ -42,7 +47,7 @@
close(){
clearTimeout(this.timeout);

$('#alertModal').modal('hide');
this.alertModal.hide();
},


Expand Down
2 changes: 1 addition & 1 deletion resources/js/components/Stacktrace.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
16 changes: 8 additions & 8 deletions resources/js/screens/batches/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand All @@ -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>
Expand Down
14 changes: 7 additions & 7 deletions resources/js/screens/batches/preview.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand All @@ -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>
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand Down
36 changes: 18 additions & 18 deletions resources/js/screens/dashboard.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand All @@ -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>

Expand All @@ -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>

Expand All @@ -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>

Expand All @@ -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>

Expand All @@ -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>

Expand Down Expand Up @@ -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">
Expand All @@ -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>
Expand All @@ -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>
Expand Down
Loading