Tasks, Env, Logs are ready for beta testing.

frontend/pages/env.vue

@@ -106,10 +106,8 @@
           </tr>
           </tbody>
         </table>
-        <div class="is-hidden-mobile">
+        <div class="is-hidden-mobile help">
-          <Message message_class="is-info" title="Informational">
+          Some variables values are masked for security reasons. If you need to see the value, click on edit.
-            Some variables values are masked for security reasons. If you need to see the value, click on edit.
-          </Message>
         </div>
       </div>
     </div>

frontend/pages/tasks.vue

@@ -7,7 +7,7 @@
         <div class="is-pulled-right">
           <div class="field is-grouped">
             <p class="control">
-              <button class="button is-primary" @click.prevent="loadContent">
+              <button class="button is-primary" @click.prevent="loadContent(true)">
                 <span class="icon is-small">
                   <i class="fas fa-sync"></i>
                 </span>
@@ -16,24 +16,43 @@
           </div>
         </div>
       </div>
+      <div class="is-hidden-mobile" v-if="queued.length > 0">
+        <p>
+          <span>The following tasks <code>{{ queued.join(', ') }}</code> are queued to be run soon.</span>
+        </p>
+      </div>
     </div>
 
     <div v-for="task in tasks" :key="task.name" class="column is-6-tablet is-12-mobile">
       <div class="card">
         <header class="card-header">
-          <div class="card-header-title is-centered is-word-break">
+          <div class="is-capitalized card-header-title is-centered has-tooltip"
-            <NuxtLink :href="'/tasks/' + task.name">
+               v-tooltip="'The command: ' + task.command">
-              {{ task.name }}
+            {{ task.name }}
-            </NuxtLink>
           </div>
         </header>
         <div class="card-content">
           <div class="columns is-multiline is-mobile has-text-centered">
-            <div class="column is-6-mobile" v-if="task.next_run">
+            <div class="column is-12 has-text-left" v-if="task.description">
-              <strong>Next Run:</strong> {{ moment(task.next_run).fromNow() }}
+              {{ task.description }}
             </div>
-            <div class="column is-hidden-mobile" v-if="task.prev_run">
+            <div class="column is-6 has-text-left">
-              <strong>Prev Run:</strong> {{ moment(task.prev_run).fromNow() }}
+              <strong class="is-hidden-mobile">Timer:</strong>
+              <a target="_blank" :href="`https://crontab.guru/#${task.timer.replace(/ /g, '_')}`"
+                 rel="noreferrer,nofollow,noopener">
+                {{ task.timer }}
+              </a>
+            </div>
+            <div class="column is-6 has-text-right" v-if="task.args">
+              <strong class="is-hidden-mobile">Args:</strong> <code>{{ task.args }}</code>
+            </div>
+            <div class="column is-6 has-text-left">
+              <strong class="is-hidden-mobile">Prev Run:</strong>
+              {{ task.prev_run ? moment(task.prev_run).fromNow() : '???' }}
+            </div>
+            <div class="column is-6 has-text-right">
+              <strong class="is-hidden-mobile">Next Run:</strong>
+              {{ task.next_run ? moment(task.next_run).fromNow() : 'Never' }}
             </div>
           </div>
         </div>
@@ -43,12 +62,12 @@
               <input :id="task.name" type="checkbox" class="switch is-success" :checked="task.enabled"
                      @change="toggleTask(task)">
               <label :for="task.name">
-                Task is {{ task.enabled ? 'Enabled' : 'Disabled' }}
+                <span class="is-hidden-mobile">Task is&nbsp;</span> {{ task.enabled ? 'Enabled' : 'Disabled' }}
               </label>
             </div>
           </div>
-          <div class="card-footer-item" v-if="task.enabled">
+          <div class="card-footer-item">
-            <button class="button is-info" @click="queueTask(task)" :disabled="task.queued">
+            <button class="button is-info" @click="queueTask(task)" :disabled="task.queued || !task.enabled">
               <span class="icon-text">
                 <span class="icon"><i class="fas fa-trash"></i></span>
                 <span v-if="!task.queued">Run now</span>
@@ -70,12 +89,16 @@ import request from "~/utils/request.js";
 useHead({title: 'tasks'})
 
 const tasks = ref([])
+const queued = ref([])
 
-const loadContent = async () => {
+const loadContent = async (clear = false) => {
-  tasks.value = []
+  if (clear) {
+    tasks.value = []
+  }
   const response = await request('/tasks')
   const json = await response.json();
   tasks.value = json.tasks
+  queued.value = json.queued
 }
 
 onMounted(() => loadContent())

frontend/pages/tasks/[task]/index.vue

@@ -1,28 +0,0 @@
-<template>
-  <div class="columns is-multiline">
-    <div class="column is-12">
-      <div class="p-2">
-        <span class="title is-4">
-          <NuxtLink href="/tasks">Tasks</NuxtLink>
-          : {{ task }}
-        </span>
-
-        <div class="is-pulled-right">
-          <div class="field is-grouped">
-            <p class="control">
-              <button class="button is-primary">
-                <span class="icon is-small">
-                  <i class="fas fa-sync"></i>
-                </span>
-              </button>
-            </p>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-const task = useRoute().params.task
-</script>

frontend/utils/request.js

@@ -11,7 +11,7 @@ const api_token = useStorage('api_token', '')
  * @param options {RequestInit}
  * @returns {Promise<Response>}
  */
-export default async function request(url, options) {
+export default async function request(url, options = {}) {
     if (!api_token.value) {
         throw new Error('API token is not set');
     }

src/API/Tasks/Index.php

@@ -31,21 +31,18 @@ final class Index
         $apiUrl = $request->getUri()->withHost('')->withPort(0)->withScheme('');
         $urlPath = rtrim($request->getUri()->getPath(), '/');
 
+        $queuedTasks = $this->cache->get('queued_tasks', []);
+
         $response = [
             'tasks' => [],
+            'queued' => $queuedTasks,
             'links' => [
                 'self' => (string)$apiUrl,
             ],
         ];
 
-        $queuedTasks = $this->cache->get('queued_tasks', []);
-
         foreach (TasksCommand::getTasks() as $task) {
-            $task = array_filter(
+            $task = self::formatTask($task);
-                self::formatTask($task),
-                fn($k) => false === in_array($k, ['command', 'args']),
-                ARRAY_FILTER_USE_KEY
-            );
 
             $task['links'] = [
                 'self' => (string)$apiUrl->withPath($urlPath . '/' . ag($task, 'name')),