mirror of https://github.com/requarks/wiki
Nicolas Giard
2 years ago
parent
e1ebaf5b31
commit
7be5943c26
|
After Width: | Height: | Size: 33 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
@ -0,0 +1,250 @@
|
|||||||
|
<template lang='pug'>
|
||||||
|
q-page.admin-terminal
|
||||||
|
.row.q-pa-md.items-center
|
||||||
|
.col-auto
|
||||||
|
img.admin-icon.animated.fadeInLeft(src='/_assets/icons/fluent-bot.svg')
|
||||||
|
.col.q-pl-md
|
||||||
|
.text-h5.text-primary.animated.fadeInLeft {{ t('admin.scheduler.title') }}
|
||||||
|
.text-subtitle1.text-grey.animated.fadeInLeft.wait-p2s {{ t('admin.scheduler.subtitle') }}
|
||||||
|
.col-auto.flex
|
||||||
|
q-btn-toggle.q-mr-md(
|
||||||
|
v-model='state.displayMode'
|
||||||
|
push
|
||||||
|
no-caps
|
||||||
|
:disable='state.loading > 0'
|
||||||
|
:toggle-color='$q.dark.isActive ? `white` : `black`'
|
||||||
|
:toggle-text-color='$q.dark.isActive ? `black` : `white`'
|
||||||
|
:text-color='$q.dark.isActive ? `white` : `black`'
|
||||||
|
:color='$q.dark.isActive ? `dark-1` : `white`'
|
||||||
|
:options=`[
|
||||||
|
{ label: t('admin.scheduler.scheduled'), value: 'scheduled' },
|
||||||
|
{ label: t('admin.scheduler.completed'), value: 'completed' }
|
||||||
|
]`
|
||||||
|
)
|
||||||
|
q-separator.q-mr-md(vertical)
|
||||||
|
q-btn.q-mr-sm.acrylic-btn(
|
||||||
|
icon='las la-question-circle'
|
||||||
|
flat
|
||||||
|
color='grey'
|
||||||
|
:href='siteStore.docsBase + `/admin/scheduler`'
|
||||||
|
target='_blank'
|
||||||
|
type='a'
|
||||||
|
)
|
||||||
|
q-btn.q-mr-sm.acrylic-btn(
|
||||||
|
icon='las la-redo-alt'
|
||||||
|
flat
|
||||||
|
color='secondary'
|
||||||
|
:loading='state.loading > 0'
|
||||||
|
@click='load'
|
||||||
|
)
|
||||||
|
q-separator(inset)
|
||||||
|
.q-pa-md.q-gutter-md
|
||||||
|
template(v-if='state.displayMode === `scheduled`')
|
||||||
|
q-card.rounded-borders(
|
||||||
|
v-if='state.scheduledJobs.length < 1'
|
||||||
|
flat
|
||||||
|
:class='$q.dark.isActive ? `bg-dark-5 text-white` : `bg-grey-3 text-dark`'
|
||||||
|
)
|
||||||
|
q-card-section.items-center(horizontal)
|
||||||
|
q-card-section.col-auto.q-pr-none
|
||||||
|
q-icon(name='las la-info-circle', size='sm')
|
||||||
|
q-card-section.text-caption {{ t('admin.scheduler.scheduledNone') }}
|
||||||
|
q-card.shadow-1(v-else)
|
||||||
|
q-table(
|
||||||
|
:rows='state.scheduledJobs'
|
||||||
|
:columns='scheduledJobsHeaders'
|
||||||
|
row-key='name'
|
||||||
|
flat
|
||||||
|
hide-bottom
|
||||||
|
:rows-per-page-options='[0]'
|
||||||
|
:loading='state.loading > 0'
|
||||||
|
)
|
||||||
|
template(v-slot:body-cell-id='props')
|
||||||
|
q-td(:props='props')
|
||||||
|
q-spinner-clock.q-mr-sm(
|
||||||
|
color='indigo'
|
||||||
|
size='xs'
|
||||||
|
)
|
||||||
|
//- q-icon(name='las la-stopwatch', color='primary', size='sm')
|
||||||
|
template(v-slot:body-cell-name='props')
|
||||||
|
q-td(:props='props')
|
||||||
|
strong {{props.value}}
|
||||||
|
template(v-slot:body-cell-cron='props')
|
||||||
|
q-td(:props='props')
|
||||||
|
span {{ props.value }}
|
||||||
|
template(v-slot:body-cell-date='props')
|
||||||
|
q-td(:props='props')
|
||||||
|
i18n-t.text-caption(keypath='admin.scheduler.nextExecutionIn', tag='div')
|
||||||
|
template(#date)
|
||||||
|
strong {{ humanizeDate(props.value) }}
|
||||||
|
small {{props.value}}
|
||||||
|
template(v-else)
|
||||||
|
q-card.rounded-borders(
|
||||||
|
v-if='state.jobs.length < 1'
|
||||||
|
flat
|
||||||
|
:class='$q.dark.isActive ? `bg-dark-5 text-white` : `bg-grey-3 text-dark`'
|
||||||
|
)
|
||||||
|
q-card-section.items-center(horizontal)
|
||||||
|
q-card-section.col-auto.q-pr-none
|
||||||
|
q-icon(name='las la-info-circle', size='sm')
|
||||||
|
q-card-section.text-caption {{ t('admin.scheduler.completedNone') }}
|
||||||
|
q-card.shadow-1(v-else) ---
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { onMounted, reactive, watch } from 'vue'
|
||||||
|
import { useMeta, useQuasar } from 'quasar'
|
||||||
|
import { useI18n } from 'vue-i18n'
|
||||||
|
import gql from 'graphql-tag'
|
||||||
|
import { DateTime } from 'luxon'
|
||||||
|
|
||||||
|
import { useSiteStore } from 'src/stores/site'
|
||||||
|
|
||||||
|
// QUASAR
|
||||||
|
|
||||||
|
const $q = useQuasar()
|
||||||
|
|
||||||
|
// STORES
|
||||||
|
|
||||||
|
const siteStore = useSiteStore()
|
||||||
|
|
||||||
|
// I18N
|
||||||
|
|
||||||
|
const { t } = useI18n()
|
||||||
|
|
||||||
|
// META
|
||||||
|
|
||||||
|
useMeta({
|
||||||
|
title: t('admin.scheduler.title')
|
||||||
|
})
|
||||||
|
|
||||||
|
// DATA
|
||||||
|
|
||||||
|
const state = reactive({
|
||||||
|
displayMode: 'scheduled',
|
||||||
|
scheduledJobs: [],
|
||||||
|
jobs: [],
|
||||||
|
loading: 0
|
||||||
|
})
|
||||||
|
|
||||||
|
const scheduledJobsHeaders = [
|
||||||
|
{
|
||||||
|
align: 'center',
|
||||||
|
field: 'id',
|
||||||
|
name: 'id',
|
||||||
|
sortable: false,
|
||||||
|
style: 'width: 15px; padding-right: 0;'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: t('common.field.name'),
|
||||||
|
align: 'left',
|
||||||
|
field: 'name',
|
||||||
|
name: 'name',
|
||||||
|
sortable: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: t('admin.scheduler.cron'),
|
||||||
|
align: 'left',
|
||||||
|
field: 'cron',
|
||||||
|
name: 'cron',
|
||||||
|
sortable: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: t('admin.scheduler.timezone'),
|
||||||
|
align: 'left',
|
||||||
|
field: 'timezone',
|
||||||
|
name: 'timezone',
|
||||||
|
sortable: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: t('admin.scheduler.nextExecution'),
|
||||||
|
align: 'left',
|
||||||
|
field: 'nextExecution',
|
||||||
|
name: 'date',
|
||||||
|
sortable: false
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
// WATCHERS
|
||||||
|
|
||||||
|
watch(() => state.displayMode, (newValue) => {
|
||||||
|
load()
|
||||||
|
})
|
||||||
|
|
||||||
|
// METHODS
|
||||||
|
|
||||||
|
async function load () {
|
||||||
|
state.loading++
|
||||||
|
try {
|
||||||
|
if (state.displayMode === 'scheduled') {
|
||||||
|
const resp = await APOLLO_CLIENT.query({
|
||||||
|
query: gql`
|
||||||
|
query getSystemScheduledJobs {
|
||||||
|
systemScheduledJobs {
|
||||||
|
id
|
||||||
|
name
|
||||||
|
cron
|
||||||
|
timezone
|
||||||
|
nextExecution
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`,
|
||||||
|
fetchPolicy: 'network-only'
|
||||||
|
})
|
||||||
|
state.scheduledJobs = resp?.data?.systemScheduledJobs
|
||||||
|
} else {
|
||||||
|
const resp = await APOLLO_CLIENT.query({
|
||||||
|
query: gql`
|
||||||
|
query getSystemJobs (
|
||||||
|
$type: SystemJobType!
|
||||||
|
) {
|
||||||
|
systemJobs (
|
||||||
|
type: $type
|
||||||
|
) {
|
||||||
|
id
|
||||||
|
name
|
||||||
|
priority
|
||||||
|
state
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`,
|
||||||
|
variables: {
|
||||||
|
type: state.displayMode.toUpperCase()
|
||||||
|
},
|
||||||
|
fetchPolicy: 'network-only'
|
||||||
|
})
|
||||||
|
state.jobs = resp?.data?.systemJobs
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
$q.notify({
|
||||||
|
type: 'negative',
|
||||||
|
message: 'Failed to load scheduled jobs.',
|
||||||
|
caption: err.message
|
||||||
|
})
|
||||||
|
}
|
||||||
|
state.loading--
|
||||||
|
}
|
||||||
|
|
||||||
|
function humanizeDate (val) {
|
||||||
|
return DateTime.fromISO(val).toRelative()
|
||||||
|
}
|
||||||
|
|
||||||
|
// MOUNTED
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
load()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang='scss'>
|
||||||
|
.admin-terminal {
|
||||||
|
&-term {
|
||||||
|
width: 100%;
|
||||||
|
background-color: #000;
|
||||||
|
border-radius: 5px;
|
||||||
|
overflow: hidden;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in new issue