Re-enabled linking from task to env page

This commit is contained in:
arabcoders
2025-05-05 22:31:29 +03:00
parent 45e9e27b54
commit d690436115
2 changed files with 33 additions and 44 deletions

View File

@@ -10,13 +10,13 @@
<div class="field is-grouped">
<p class="control">
<button class="button" @click="showTaskRunner = !showTaskRunner" v-tooltip="'Task Runner Status'"
:class="{ 'is-primary': taskRunner.status, 'is-danger': !taskRunner.status }">
<span class="icon"><i class="fas fa-microchip" /></span>
:class="{ 'is-primary': taskRunner.status, 'is-danger': !taskRunner.status }">
<span class="icon"><i class="fas fa-microchip"/></span>
</button>
</p>
<p class="control">
<button class="button is-info" @click="loadContent()" :disabled="isLoading"
:class="{ 'is-loading': isLoading }">
:class="{ 'is-loading': isLoading }">
<span class="icon"><i class="fas fa-sync"></i></span>
</button>
</p>
@@ -30,12 +30,12 @@
</div>
<div class="column is-12" v-if="showTaskRunner || false === taskRunner?.status">
<TaskRunnerStatus :status="taskRunner" @taskrunner_update="e => taskRunner = e" />
<TaskRunnerStatus :status="taskRunner" @taskrunner_update="e => taskRunner = e"/>
</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">
icon="fas fa-circle-notch fa-spin">
<p>
The following tasks
<template v-for="(task, index) in queued" :key="`queued-${index}`">
@@ -51,7 +51,7 @@
<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..." />
message="Loading data. Please wait..."/>
</div>
<div v-for="task in tasks" :key="task.name" class="column is-6-tablet is-12-mobile">
@@ -62,7 +62,7 @@
</div>
<span class="card-header-icon" v-tooltip="'Enable/Disable Task.'" v-if="task.allow_disable">
<input :id="task.name" type="checkbox" class="switch is-success" :checked="task.enabled"
@change="toggleTask(task)">
@change="toggleTask(task)">
<label :for="task.name"></label>
</span>
</header>
@@ -73,28 +73,22 @@
</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, '_')}`">
<NuxtLink class="is-underlined" 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:&nbsp;</strong>
<span v-if="!task.allow_disabled" class="is-unselectable">
{{ task.timer }}
</span>
<NuxtLink v-else class="has-tooltip"
:to='makeEnvLink(`WS_CRON_${task.name.toUpperCase()}_AT`, task.timer)'>
<NuxtLink class="has-tooltip" :to='makeEnvLink(`WS_CRON_${task.name.toUpperCase()}_AT`, task.timer)'
v-tooltip="'Edit cron timer.'">
{{ task.timer }}
</NuxtLink>
</div>
<div class="column is-6 has-text-right" v-if="task.args">
<strong class="is-hidden-mobile">Args:&nbsp;</strong>
<span v-if="!task.allow_disabled" class="is-unselectable">
{{ task.args }}
</span>
<NuxtLink v-else class="has-tooltip"
:to='makeEnvLink(`WS_CRON_${task.name.toUpperCase()}_ARGS`, task.args)'>
<NuxtLink class="has-tooltip" :to='makeEnvLink(`WS_CRON_${task.name.toUpperCase()}_ARGS`, task.args)'
v-tooltip="'Edit task arguments.'">
{{ task.args }}
</NuxtLink>
</div>
@@ -102,7 +96,7 @@
<strong class="is-hidden-mobile">Prev Run:&nbsp;</strong>
<template v-if="task.enabled">
<span class="has-tooltip"
v-tooltip="`Last run was at: ${moment(task.prev_run).format(TOOLTIP_DATE_FORMAT)}`">
v-tooltip="`Last run was at: ${moment(task.prev_run).format(TOOLTIP_DATE_FORMAT)}`">
{{ task.prev_run ? moment(task.prev_run).fromNow() : '???' }}
</span>
</template>
@@ -114,7 +108,7 @@
<strong class="is-hidden-mobile">Next Run:&nbsp;</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)}`">
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>
@@ -127,7 +121,7 @@
<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 }">
: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>
@@ -152,22 +146,17 @@
<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">
@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>For long running tasks like <strong>Import</strong> and <strong>Export</strong>, 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>&nbsp;</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>Clicking on the <strong>Runs</strong> link will take you to external page that will show for you more
information about the cron timer syntax. While clicking on <strong>Timer</strong> or <strong>Args</strong>
link will take you to <span><i class="fas fa-cogs"></i></span> <strong>Env</strong> page to edit the
related environment variable.
</li>
</ul>
</Message>
@@ -180,19 +169,19 @@
import 'assets/css/bulma-switch.css'
import moment from 'moment'
import request from '~/utils/request'
import { awaitElement, makeConsoleCommand, notification, parse_api_response, TOOLTIP_DATE_FORMAT } from '~/utils/index'
import {awaitElement, makeConsoleCommand, notification, parse_api_response, TOOLTIP_DATE_FORMAT} from '~/utils/index'
import cronstrue from 'cronstrue'
import Message from '~/components/Message'
import { useStorage } from '@vueuse/core'
import {useStorage} from '@vueuse/core'
import TaskRunnerStatus from '~/components/TaskRunnerStatus'
useHead({ title: 'Tasks' })
useHead({title: 'Tasks'})
const tasks = ref([])
const queued = ref([])
const isLoading = ref(false)
const show_page_tips = useStorage('show_page_tips', true)
const taskRunner = ref({ status: true, message: '', restartable: false })
const taskRunner = ref({status: true, message: '', restartable: false})
const showTaskRunner = ref(false)
const loadContent = async () => {
@@ -224,7 +213,7 @@ const toggleTask = async task => {
const update = await request(`/system/env/${keyName}`, {
method: 'POST',
body: JSON.stringify({ "value": !task.enabled })
body: JSON.stringify({"value": !task.enabled})
})
if (200 !== update.status) {
@@ -249,7 +238,7 @@ const queueTask = async task => {
}
try {
const response = await request(`/tasks/${task.name}/queue`, { method: is_queued ? 'DELETE' : 'POST' })
const response = await request(`/tasks/${task.name}/queue`, {method: is_queued ? 'DELETE' : 'POST'})
if (response.ok) {
notification('success', 'Success', `Task '${task.name}' has been ${is_queued ? 'cancelled' : 'queued'}.`)
task.queued = !is_queued

View File

@@ -10,7 +10,7 @@ use Closure;
final readonly class Request
{
public readonly string $id;
public string $id;
/**
* Wrap client requests into object.
@@ -18,8 +18,8 @@ final readonly class Request
* @param Method $method The HTTP method to use.
* @param Uri|string $url The URL to send the request to.
* @param array $options The options to pass to the request.
* @param callable|null $success The callback to call on successful response.
* @param callable|null $error The callback to call on error response.
* @param Closure|null $success The callback to call on successful response.
* @param Closure|null $error The callback to call on error response.
* @param array $extras An array that can contain anything. Should be rarely used.
*/
public function __construct(