Added simple page transition.
This commit is contained in:
Abdulmhsen B. A. A.
@@ -1,177 +1,180 @@
|
||||
<template>
|
||||
<div class="columns is-multiline">
|
||||
<div class="column is-12 is-clearfix is-unselectable">
|
||||
<span class="title is-4">
|
||||
<span class="icon"><i class="fas fa-tasks"></i></span>
|
||||
Tasks
|
||||
</span>
|
||||
<div class="is-pulled-right">
|
||||
<div class="field is-grouped">
|
||||
<p class="control">
|
||||
<button class="button has-text-dark" @click="show_worker_status=!show_worker_status" :disabled="isLoading"
|
||||
:class="{'has-background-success-90':status?.status, 'has-background-warning-90': !status?.status}"
|
||||
v-tooltip.bottom="'Toggle worker status'">
|
||||
<span class="icon"><i :class="`fas fa-microchip`"></i></span>
|
||||
</button>
|
||||
</p>
|
||||
<p class="control">
|
||||
<button class="button is-info" @click="loadContent()" :disabled="isLoading"
|
||||
:class="{'is-loading':isLoading}">
|
||||
<span class="icon"><i class="fas fa-sync"></i></span>
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="is-hidden-mobile">
|
||||
<span class="subtitle">
|
||||
This page contains all the tasks that are currently configured.
|
||||
<div>
|
||||
<div class="columns is-multiline">
|
||||
<div class="column is-12 is-clearfix is-unselectable">
|
||||
<span class="title is-4">
|
||||
<span class="icon"><i class="fas fa-tasks"></i></span>
|
||||
Tasks
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="queued_tasks" class="column is-12" v-if="queued.length > 0">
|
||||
<Message message_class="has-background-success-90 has-text-dark" title="Queued Tasks"
|
||||
icon="fas fa-circle-notch fa-spin">
|
||||
<p>
|
||||
The following tasks
|
||||
<template v-for="(task, index) in queued" :key="`queued-${index}`">
|
||||
<NuxtLink :to="`#${task}`">
|
||||
<span class="tag has-text-dark is-capitalized">{{ task }}</span>
|
||||
</NuxtLink>
|
||||
<template v-if="queued.length > index+1">, </template>
|
||||
</template>
|
||||
are queued to be run in background soon.
|
||||
</p>
|
||||
</Message>
|
||||
</div>
|
||||
|
||||
<div class="column is-12" v-if="isLoading">
|
||||
<Message message_class="has-background-info-90 has-text-dark" title="Loading"
|
||||
icon="fas fa-spinner fa-spin" message="Loading data. Please wait..."/>
|
||||
</div>
|
||||
|
||||
<div class="column is-12" v-if="status && (show_worker_status || !status.status)">
|
||||
<Message
|
||||
class="is-2"
|
||||
:message_class="`has-text-dark ${status.status ? 'has-background-success-90' : 'has-background-warning-90'}`"
|
||||
:title="`Task runner process is ${status.status ? 'active' : 'not active'}`"
|
||||
:icon="`fas fa-${status.status ? 'pause' : 'exclamation-circle'}`">
|
||||
{{ status.message }}
|
||||
<p v-if="!status.status">
|
||||
<span class="icon"><i class="fas fa-info-circle"></i></span>
|
||||
To restart the task runner, you have to restart the container.
|
||||
</p>
|
||||
</Message>
|
||||
</div>
|
||||
|
||||
<div v-for="task in tasks" :key="task.name" class="column is-6-tablet is-12-mobile">
|
||||
<div class="card" :class="{ 'is-gray' : !task.enabled, 'is-success': task.enabled }">
|
||||
<header class="card-header">
|
||||
<div class="is-capitalized card-header-title">
|
||||
{{ task.name }}
|
||||
</div>
|
||||
<span class="card-header-icon" v-tooltip="'Enable/Disable Task.'">
|
||||
<input :id="task.name" type="checkbox" class="switch is-success" :checked="task.enabled"
|
||||
@change="toggleTask(task)">
|
||||
<label :for="task.name"></label>
|
||||
</span>
|
||||
</header>
|
||||
<div class="card-content">
|
||||
<div class="columns is-multiline is-mobile has-text-centered">
|
||||
<div class="column is-12 has-text-left" v-if="task.description">
|
||||
{{ task.description }}
|
||||
</div>
|
||||
<div class="column is-12 has-text-left">
|
||||
<strong class="is-hidden-mobile">Runs: </strong>
|
||||
<NuxtLink class="has-tooltip" target="_blank"
|
||||
:to="`https://crontab.guru/#${task.timer.replace(/ /g, '_')}`">
|
||||
{{ cronstrue.toString(task.timer) }}
|
||||
</NuxtLink>
|
||||
</div>
|
||||
<div class="column is-6 has-text-left">
|
||||
<strong class="is-hidden-mobile">Timer: </strong>
|
||||
<NuxtLink class="has-tooltip" :to='makeEnvLink(`WS_CRON_${task.name.toUpperCase()}_AT`, task.timer)'>
|
||||
{{ task.timer }}
|
||||
</NuxtLink>
|
||||
</div>
|
||||
<div class="column is-6 has-text-right" v-if="task.args">
|
||||
<strong class="is-hidden-mobile">Args: </strong>
|
||||
<NuxtLink class="has-tooltip" :to='makeEnvLink(`WS_CRON_${task.name.toUpperCase()}_ARGS`, task.args)'>
|
||||
{{ task.args }}
|
||||
</NuxtLink>
|
||||
</div>
|
||||
<div class="column is-6 has-text-left">
|
||||
<strong class="is-hidden-mobile">Prev Run: </strong>
|
||||
<template v-if="task.enabled">
|
||||
<span class="has-tooltip"
|
||||
v-tooltip="`Last run was at: ${moment(task.prev_run).format(TOOLTIP_DATE_FORMAT)}`">
|
||||
{{ task.prev_run ? moment(task.prev_run).fromNow() : '???' }}
|
||||
</span>
|
||||
</template>
|
||||
<template v-else>
|
||||
<span class="tag is-danger">Disabled</span>
|
||||
</template>
|
||||
</div>
|
||||
<div class="column is-6 has-text-right">
|
||||
<strong class="is-hidden-mobile">Next Run: </strong>
|
||||
<template v-if="task.enabled">
|
||||
<span class="has-tooltip"
|
||||
v-tooltip="`Next run will be at: ${moment(task.next_run).format(TOOLTIP_DATE_FORMAT)}`">
|
||||
{{ task.next_run ? moment(task.next_run).fromNow() : 'Never' }}
|
||||
</span>
|
||||
</template>
|
||||
<template v-else>
|
||||
<span class="tag is-danger">Disabled</span>
|
||||
</template>
|
||||
</div>
|
||||
<div class="is-pulled-right">
|
||||
<div class="field is-grouped">
|
||||
<p class="control">
|
||||
<button class="button has-text-dark" @click="show_worker_status=!show_worker_status" :disabled="isLoading"
|
||||
:class="{'has-background-success-90':status?.status, 'has-background-warning-90': !status?.status}"
|
||||
v-tooltip.bottom="'Toggle worker status'">
|
||||
<span class="icon"><i :class="`fas fa-microchip`"></i></span>
|
||||
</button>
|
||||
</p>
|
||||
<p class="control">
|
||||
<button class="button is-info" @click="loadContent()" :disabled="isLoading"
|
||||
:class="{'is-loading':isLoading}">
|
||||
<span class="icon"><i class="fas fa-sync"></i></span>
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="card-footer">
|
||||
<div class="card-footer-item">
|
||||
<button class="button is-info" @click="queueTask(task)"
|
||||
:class="{'is-danger':task.queued,'is-info':!task.queued}">
|
||||
<span class="icon-text">
|
||||
<span class="icon"><i class="fas fa-clock" :class="{ 'fa-spin': task.queued }"></i></span>
|
||||
<span>
|
||||
<template v-if="!task.queued">Queue Task</template>
|
||||
<template v-else>Remove from queue</template>
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="card-footer-item">
|
||||
<button class="button is-warning" @click="confirmRun(task)">
|
||||
<span class="icon-text">
|
||||
<span class="icon"><i class="fas fa-terminal"></i></span>
|
||||
<span class="is-hidden-mobile">Run via console</span>
|
||||
<span class="is-hidden-tablet">Run now</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</footer>
|
||||
<div class="is-hidden-mobile">
|
||||
<span class="subtitle">
|
||||
This page contains all the tasks that are currently configured.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column is-12">
|
||||
<Message message_class="has-background-info-90 has-text-dark" :toggle="show_page_tips"
|
||||
@toggle="show_page_tips = !show_page_tips" :use-toggle="true" title="Tips" icon="fas fa-info-circle">
|
||||
<ul>
|
||||
<li>For long running tasks like <code>Import</code> and <code>Export</code>, you should queue the task to run
|
||||
in background. As running them via web console will take longer if you have many backends and/or has large
|
||||
libraries.
|
||||
</li>
|
||||
<li>Use the switch next to the task to enable or disable the task from being run automatically.</li>
|
||||
<li>To change when task is scheduled to run, please visit
|
||||
<span class="icon"><i class="fas fa-cogs"></i> </span>
|
||||
<NuxtLink to="/env" v-text="'Environment variables'"/>
|
||||
page. The <code>WS_CRON_(TASK)_*</code> variables are used to control scheduled tasks.
|
||||
</li>
|
||||
<li>Clicking on the <code>Runs</code> link will take you to external page that will show for you more
|
||||
information about the cron timer syntax. While clicking on <code>Timer</code> or <code>Args</code>
|
||||
link will take you to edit the related environment variable.
|
||||
</li>
|
||||
</ul>
|
||||
</Message>
|
||||
<div id="queued_tasks" class="column is-12" v-if="queued.length > 0">
|
||||
<Message message_class="has-background-success-90 has-text-dark" title="Queued Tasks"
|
||||
icon="fas fa-circle-notch fa-spin">
|
||||
<p>
|
||||
The following tasks
|
||||
<template v-for="(task, index) in queued" :key="`queued-${index}`">
|
||||
<NuxtLink :to="`#${task}`">
|
||||
<span class="tag has-text-dark is-capitalized">{{ task }}</span>
|
||||
</NuxtLink>
|
||||
<template v-if="queued.length > index+1">, </template>
|
||||
</template>
|
||||
are queued to be run in background soon.
|
||||
</p>
|
||||
</Message>
|
||||
</div>
|
||||
|
||||
<div class="column is-12" v-if="isLoading">
|
||||
<Message message_class="has-background-info-90 has-text-dark" title="Loading"
|
||||
icon="fas fa-spinner fa-spin" message="Loading data. Please wait..."/>
|
||||
</div>
|
||||
|
||||
<div class="column is-12" v-if="status && (show_worker_status || !status.status)">
|
||||
<Message
|
||||
class="is-2"
|
||||
:message_class="`has-text-dark ${status.status ? 'has-background-success-90' : 'has-background-warning-90'}`"
|
||||
:title="`Task runner process is ${status.status ? 'active' : 'not active'}`"
|
||||
:icon="`fas fa-${status.status ? 'pause' : 'exclamation-circle'}`">
|
||||
{{ status.message }}
|
||||
<p v-if="!status.status">
|
||||
<span class="icon"><i class="fas fa-info-circle"></i></span>
|
||||
To restart the task runner, you have to restart the container.
|
||||
</p>
|
||||
</Message>
|
||||
</div>
|
||||
|
||||
<div v-for="task in tasks" :key="task.name" class="column is-6-tablet is-12-mobile">
|
||||
<div class="card" :class="{ 'is-gray' : !task.enabled, 'is-success': task.enabled }">
|
||||
<header class="card-header">
|
||||
<div class="is-capitalized card-header-title">
|
||||
{{ task.name }}
|
||||
</div>
|
||||
<span class="card-header-icon" v-tooltip="'Enable/Disable Task.'">
|
||||
<input :id="task.name" type="checkbox" class="switch is-success" :checked="task.enabled"
|
||||
@change="toggleTask(task)">
|
||||
<label :for="task.name"></label>
|
||||
</span>
|
||||
</header>
|
||||
<div class="card-content">
|
||||
<div class="columns is-multiline is-mobile has-text-centered">
|
||||
<div class="column is-12 has-text-left" v-if="task.description">
|
||||
{{ task.description }}
|
||||
</div>
|
||||
<div class="column is-12 has-text-left">
|
||||
<strong class="is-hidden-mobile">Runs: </strong>
|
||||
<NuxtLink class="has-tooltip" target="_blank"
|
||||
:to="`https://crontab.guru/#${task.timer.replace(/ /g, '_')}`">
|
||||
{{ cronstrue.toString(task.timer) }}
|
||||
</NuxtLink>
|
||||
</div>
|
||||
<div class="column is-6 has-text-left">
|
||||
<strong class="is-hidden-mobile">Timer: </strong>
|
||||
<NuxtLink class="has-tooltip" :to='makeEnvLink(`WS_CRON_${task.name.toUpperCase()}_AT`, task.timer)'>
|
||||
{{ task.timer }}
|
||||
</NuxtLink>
|
||||
</div>
|
||||
<div class="column is-6 has-text-right" v-if="task.args">
|
||||
<strong class="is-hidden-mobile">Args: </strong>
|
||||
<NuxtLink class="has-tooltip" :to='makeEnvLink(`WS_CRON_${task.name.toUpperCase()}_ARGS`, task.args)'>
|
||||
{{ task.args }}
|
||||
</NuxtLink>
|
||||
</div>
|
||||
<div class="column is-6 has-text-left">
|
||||
<strong class="is-hidden-mobile">Prev Run: </strong>
|
||||
<template v-if="task.enabled">
|
||||
<span class="has-tooltip"
|
||||
v-tooltip="`Last run was at: ${moment(task.prev_run).format(TOOLTIP_DATE_FORMAT)}`">
|
||||
{{ task.prev_run ? moment(task.prev_run).fromNow() : '???' }}
|
||||
</span>
|
||||
</template>
|
||||
<template v-else>
|
||||
<span class="tag is-danger">Disabled</span>
|
||||
</template>
|
||||
</div>
|
||||
<div class="column is-6 has-text-right">
|
||||
<strong class="is-hidden-mobile">Next Run: </strong>
|
||||
<template v-if="task.enabled">
|
||||
<span class="has-tooltip"
|
||||
v-tooltip="`Next run will be at: ${moment(task.next_run).format(TOOLTIP_DATE_FORMAT)}`">
|
||||
{{ task.next_run ? moment(task.next_run).fromNow() : 'Never' }}
|
||||
</span>
|
||||
</template>
|
||||
<template v-else>
|
||||
<span class="tag is-danger">Disabled</span>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="card-footer">
|
||||
<div class="card-footer-item">
|
||||
<button class="button is-info" @click="queueTask(task)"
|
||||
:class="{'is-danger':task.queued,'is-info':!task.queued}">
|
||||
<span class="icon-text">
|
||||
<span class="icon"><i class="fas fa-clock" :class="{ 'fa-spin': task.queued }"></i></span>
|
||||
<span>
|
||||
<template v-if="!task.queued">Queue Task</template>
|
||||
<template v-else>Remove from queue</template>
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="card-footer-item">
|
||||
<button class="button is-warning" @click="confirmRun(task)">
|
||||
<span class="icon-text">
|
||||
<span class="icon"><i class="fas fa-terminal"></i></span>
|
||||
<span class="is-hidden-mobile">Run via console</span>
|
||||
<span class="is-hidden-tablet">Run now</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column is-12">
|
||||
<Message message_class="has-background-info-90 has-text-dark" :toggle="show_page_tips"
|
||||
@toggle="show_page_tips = !show_page_tips" :use-toggle="true" title="Tips" icon="fas fa-info-circle">
|
||||
<ul>
|
||||
<li>For long running tasks like <code>Import</code> and <code>Export</code>, you should queue the task to
|
||||
run
|
||||
in background. As running them via web console will take longer if you have many backends and/or has large
|
||||
libraries.
|
||||
</li>
|
||||
<li>Use the switch next to the task to enable or disable the task from being run automatically.</li>
|
||||
<li>To change when task is scheduled to run, please visit
|
||||
<span class="icon"><i class="fas fa-cogs"></i> </span>
|
||||
<NuxtLink to="/env" v-text="'Environment variables'"/>
|
||||
page. The <code>WS_CRON_(TASK)_*</code> variables are used to control scheduled tasks.
|
||||
</li>
|
||||
<li>Clicking on the <code>Runs</code> link will take you to external page that will show for you more
|
||||
information about the cron timer syntax. While clicking on <code>Timer</code> or <code>Args</code>
|
||||
link will take you to edit the related environment variable.
|
||||
</li>
|
||||
</ul>
|
||||
</Message>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user