@live-change/task-frontend 0.9.84 → 0.9.86

package/front/locales/en.js

@@ -22,5 +22,9 @@ export const datetimeFormats = {
   "long": {
     "year": "numeric", "month": "short", "day": "numeric",
       "weekday": "short", "hour": "numeric", "minute": "numeric"
+  },
+  "longWithSeconds": {
+    "year": "numeric", "month": "short", "day": "numeric",
+      "weekday": "short", "hour": "numeric", "minute": "numeric", "second": "numeric"
   }
 }

package/front/src/components/Task.vue

@@ -5,24 +5,23 @@
         <i :class="['pi', icon, taskColor]" style="font-size: 1rem" />
         <div :class="['ml-2']">{{ label }}</div>
       </div>
-      <div v-if="task?.progress && task?.state !== 'done'" class="w-32 mr-4 grow" style="max-width: 50vw">
+      <div v-if="taskData?.progress && taskData?.state !== 'done'" class="w-32 mr-4 grow" style="max-width: 50vw">
         <ProgressBar :value="Math.floor((100 * taskData.progress.current / taskData.progress.total))" />
       </div>
-      <div v-if="task?.retries?.length && taskData.retries.length < taskData.maxRetries" class="mr-4">
+      <div v-if="taskData?.retries?.length && taskData.retries.length < taskData.maxRetries" class="mr-4">
         <i class="pi pi-replay" />
         {{ taskData.retries.length }} / {{ taskData.maxRetries }}
       </div>
-      <div>{{ task?.state !== 'done' ? (task?.progress?.action || task?.state) : 'done' }}</div>
+      <div>{{ taskData?.state !== 'done' ? (taskData?.progress?.action || taskData?.state) : 'done' }}</div>
     </div>
-    <div v-for="retry in task?.retries" class="ml-6 flex flex-row justify-between text-red-800">
+    <div v-for="retry in taskData?.retries" class="ml-6 flex flex-row justify-between text-red-800">
       {{ retry.error }} at {{ d(retry.failedAt, 'shortestTime')}}
     </div>
-<!--    <pre>{{ taskData.progress }}</pre>-->
     <div v-if="taskResultComponent && taskData.result" class="m-2">
-      <component :is="taskResultComponent" :task="task" :result="taskData.result" :taskType="taskType" />
+      <component :is="taskResultComponent" :task="taskData" :result="taskData.result" :taskType="taskType" />
     </div>
     <div class="ml-6">
-      <Task v-for="task in childTasks" :key="taskData.id" :task="task" :tasks="allTasks" :taskTypes="taskTypes" />
+      <Task v-for="task in childTasks" :key="taskId" :task="task" :tasks="allTasks" :taskTypes="taskTypes" />
     </div>
   </div>
 </template>
@@ -70,7 +69,11 @@
   
   const allTasks = computed(() => tasks.value || loadedTasks.value)
 
-  const taskData = computed(() => allTasks.value && allTasks.value.find(m => (m.to ?? m.id) === taskId.value))
+  const taskData = computed(() => 
+    typeof task.value === 'object' 
+      ? task.value
+      : (allTasks.value && allTasks.value.find(m => (m.to ?? m.id) === taskId.value))
+  )
 
   const taskType = computed(() => taskTypes.value[taskData.value?.type || taskData.value?.name] || {})
 
@@ -105,6 +108,7 @@
 
   const taskColor = computed(() => {
     console.log("TD", taskData.value, "AT", allTasks.value)
+    console.trace('taskColor', taskData.value)
     switch(taskData.value?.state) {
       case 'failed': return 'text-red-600'
       default: {}

package/front/src/components/TaskAdminCard.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="bg-surface-0 dark:bg-surface-900 px-3 py-1 shadow">
+    <div class="flex flex-row justify-between items-center" v-if="taskData">
+      <div class="flex flex-row items-center">
+        <i :class="['pi', icon, taskColor]" style="font-size: 1rem" />
+        <div class="ml-2">{{ taskData.name }}</div>
+        <div v-if="taskData.state === 'failed'" class="ml-2 text-red-600 dark:text-red-400">
+          {{ taskData.retries[taskData.retries.length - 1]?.error }}
+        </div>
+      </div>      
+      <div class="flex flex-row items-center gap-4">
+        <div v-if="taskData.retries?.length" >
+          <i class="pi pi-replay" />
+          {{ taskData.retries.length }} / {{ taskData.maxRetries }}
+        </div>
+        <time :datetime="taskData.createdAt">
+          {{ d(locale.localTime(new Date(taskData.createdAt)), 'shortTime') }}
+        </time>
+        <Button 
+          :icon="isExpanded ? 'pi pi-chevron-up' : 'pi pi-chevron-down'" 
+          @click="isExpanded = !isExpanded"
+          text
+          rounded
+        />
+      </div>
+    </div>
+    
+    <div v-if="isExpanded">
+      <TaskAdminDetails :task="task" :tasks="tasks" :taskTypes="taskTypes" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import { ref, computed } from 'vue'
+  import Button from 'primevue/button'
+  import TaskAdminDetails from './TaskAdminDetails.vue'
+
+  import { useLocale } from "@live-change/vue3-components"
+  const locale = useLocale()
+
+  import { useI18n } from 'vue-i18n'
+  const { d } = useI18n()
+
+  const props = defineProps({
+    task: {
+      type: Object,
+      required: true
+    },
+    tasks: {
+      type: Array,
+      default: () => []
+    },
+    taskTypes: {
+      type: Object,
+      default: () => ({})
+    }
+  })
+
+  const taskId = computed(() => props.task?.to || props.task?.id || props.task)
+
+  const taskData = computed(() => props.tasks.find(t => t.to === taskId.value || t.id === taskId.value))
+
+  const isExpanded = ref(false)
+
+  const icon = computed(() => {
+    switch(props.task?.state) {
+      case 'created': return 'pi-sparkles'
+      case 'waiting': return 'pi-hourglass pi-spin'
+      case 'running': return 'pi-play'
+      case 'working': return 'pi-spin pi-spinner'
+      case 'done': return 'pi-check'
+      case 'failed': return 'pi-exclamation-triangle'
+      case 'retrying': return 'pi-replay'
+      default: return 'pi-question'
+    }
+  })
+
+  const taskColor = computed(() => {
+    switch(props.task?.state) {
+      case 'failed': return 'text-red-600'
+      default: return ''
+    }
+  })
+</script>

package/front/src/components/TaskAdminDetails.vue

@@ -0,0 +1,171 @@
+<template>
+  <div class="mt-2">
+    <div v-if="taskData.progress" class="mb-2">
+      <ProgressBar :value="Math.floor((100 * taskData.progress.current / taskData.progress.total))" />
+      <div class="flex flex-row items-center justify-between">
+        <div class="text-sm text-gray-600 dark:text-gray-400">{{ taskData.progress.action }}</div>
+        <div class="text-sm text-gray-600 dark:text-gray-400">{{ taskData.progress.current }} / {{ taskData.progress.total }}</div>
+      </div>
+    </div>
+
+    <div class="grid grid-cols-1 lg:grid-cols-2 gap-2 text-sm">
+      <div class="grid grid-cols-2 gap-2 text-sm">
+        <div>ID:</div>
+        <div>{{ taskData.id }}</div>
+      </div>
+      
+      <div class="grid grid-cols-2 gap-2 text-sm">
+        <div>State:</div>
+        <div>{{ taskData.state }}</div>
+      </div>
+      
+      <div class="grid grid-cols-2 gap-2 text-sm">
+        <div>Created:</div>
+        <div>{{ d(taskData.createdAt, 'longWithSeconds') }}</div>
+      </div>
+
+      <div class="grid grid-cols-2 gap-2 text-sm">
+        <div>Started:</div>
+        <div>{{ d(taskData.startedAt, 'longWithSeconds') }}</div>
+      </div>
+
+      <div class="grid grid-cols-2 gap-2 text-sm" v-if="taskData.doneAt">
+        <div>Duration:</div>
+        <div>
+          {{ (new Date(taskData.doneAt).getTime() - new Date(taskData.startedAt).getTime()) / 1000 }}s
+        </div>
+      </div>
+      
+      <div class="grid grid-cols-2 gap-2 text-sm" v-if="taskData.doneAt">
+        <div v-if="taskData.doneAt">Done:</div>
+        <div v-if="taskData.doneAt">{{ d(taskData.doneAt, 'longWithSeconds') }}</div>
+      </div>
+    </div>
+
+    <div v-if="taskData.properties" class="mt-2">
+      <div class="font-semibold">Properties:</div>
+      <div class="relative">
+        <pre 
+          :class="[
+            'text-sm bg-gray-100 dark:bg-gray-800 p-2 rounded overflow-x-auto whitespace-pre',
+            !isPropertiesExpanded && 'overflow-y-hidden'
+          ]"
+        >{{ JSON.stringify(taskData.properties, null, 2).split('\n')
+            .slice(0, !isPropertiesExpanded ? 5 : undefined).join('\n') }}</pre>
+
+        <div v-if="!isPropertiesExpanded && hasPropertiesOverflow" class="absolute bottom-0 left-0 right-0 h-8 bg-gradient-to-t from-gray-100 dark:from-gray-800 to-transparent" />
+      </div>
+      <div 
+          v-if="hasPropertiesOverflow" 
+          class="mt-1 flex items-center ml-3"
+          @click="expandProperties"
+        >
+          <span class="text-sm text-slate-600 dark:text-slate-400 hover:text-slate-800 dark:hover:text-slate-200 cursor-pointer">
+            {{ isPropertiesExpanded ? 'show less' : 'show more' }}
+          </span>
+          <i :class="['pi', isPropertiesExpanded ? 'pi-chevron-up' : 'pi-chevron-down', 'text-sm cursor-pointer ml-2']" />
+        </div>
+    </div>
+
+    <div v-if="taskData.retries?.length" class="mt-2">
+      <div class="font-semibold">Retries:</div>
+      <TaskRetry 
+        v-for="(retry, index) in taskData.retries" 
+        :key="index"
+        :retry="retry"
+        :index="index"
+      />
+    </div>
+
+    <div v-if="taskData.result" class="mt-2">
+      <div class="font-semibold">Result:</div>
+      <div class="relative">
+        <pre 
+          :class="[
+            'text-sm bg-gray-100 dark:bg-gray-800 p-2 rounded overflow-x-auto whitespace-pre',
+            !isResultExpanded && 'overflow-y-hidden'
+          ]"
+        >{{ JSON.stringify(taskData.result, null, 2).split('\n')
+           .slice(0, !isResultExpanded ? 5 : undefined).join('\n') }}</pre>
+
+        <div v-if="!isResultExpanded && hasOverflow" class="absolute bottom-0 left-0 right-0 h-8 bg-gradient-to-t from-gray-100 dark:from-gray-800 to-transparent" />
+
+      </div>
+      <div 
+          v-if="hasOverflow" 
+          class="mt-1 flex items-center ml-3"
+          @click="expandResult"
+        >
+          <span class="text-sm text-slate-600 dark:text-slate-400 hover:text-slate-800 dark:hover:text-slate-200 cursor-pointer">
+            {{ isResultExpanded ? 'show less' : 'show more' }}
+          </span>
+          <i :class="['pi', isResultExpanded ? 'pi-chevron-up' : 'pi-chevron-down', 'text-sm cursor-pointer ml-2']" />
+        </div>
+    </div>
+
+    <div v-if="childTasks.length" class="mt-2">
+      <div class="font-semibold">Subtasks:</div>
+      <div v-for="subtask in childTasks" :key="subtask.id" class="mt-2">
+        <TaskAdminCard :task="subtask" :tasks="tasks" :taskTypes="taskTypes" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import { ref, computed } from 'vue'
+  import ProgressBar from 'primevue/progressbar'
+  import TaskAdminCard from './TaskAdminCard.vue'
+  import TaskRetry from './TaskRetry.vue'
+
+  import { useI18n } from 'vue-i18n'
+  const { d } = useI18n()
+
+  const props = defineProps({
+    task: {
+      type: Object,
+      required: true
+    },
+    tasks: {
+      type: Array,
+      default: () => []
+    },
+    taskTypes: {
+      type: Object,
+      default: () => ({})
+    }
+  })
+
+  const taskId = computed(() => props.task?.to || props.task?.id || props.task)
+
+  const taskData = computed(() => props.tasks.find(t => t.to === taskId.value || t.id === taskId.value))
+
+  const childTasks = computed(() => {
+    return props.tasks.filter(t => t.causeType === "task_Task" && t.cause === taskId.value)
+  })
+
+  const isResultExpanded = ref(false)
+  const isPropertiesExpanded = ref(false)
+  
+  const hasOverflow = computed(() => {
+    if (!taskData.value?.result) return false
+    const jsonString = JSON.stringify(taskData.value.result, null, 2)
+    const lineCount = (jsonString.match(/\n/g) || []).length
+    return lineCount > 4
+  })
+
+  const hasPropertiesOverflow = computed(() => {
+    if (!taskData.value?.properties) return false
+    const jsonString = JSON.stringify(taskData.value.properties, null, 2)
+    const lineCount = (jsonString.match(/\n/g) || []).length
+    return lineCount > 4
+  })
+
+  const expandResult = () => {
+    isResultExpanded.value = !isResultExpanded.value
+  }
+
+  const expandProperties = () => {
+    isPropertiesExpanded.value = !isPropertiesExpanded.value
+  }
+</script>

package/front/src/components/TaskRetry.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="mt-0 ml-4">
+    <div class="flex flex-row items-center">
+      <div class="text-red-600 dark:text-red-400">
+        {{ index + 1 }}. {{ retry.error }}
+        <span class="text-gray-600 dark:text-gray-400">at {{ d(retry.failedAt, 'shortestTime') }}</span>
+      </div>
+      <i 
+        v-if="retry.stack"
+        :class="['pi', isExpanded ? 'pi-chevron-up' : 'pi-chevron-down', 'text-sm cursor-pointer ml-2']"
+        @click="isExpanded = !isExpanded"
+      />
+    </div>
+    <pre v-if="retry.stack && isExpanded" class="text-xs text-red-800 dark:text-red-300 bg-red-50 dark:bg-red-900/30 p-2 rounded mt-1 overflow-x-auto whitespace-pre">{{ retry.stack }}</pre>
+  </div>
+</template>
+
+<script setup>
+  import { ref } from 'vue'
+  import { useI18n } from 'vue-i18n'
+
+  const { d } = useI18n()
+
+  const props = defineProps({
+    retry: {
+      type: Object,
+      required: true
+    },
+    index: {
+      type: Number,
+      required: true
+    }
+  })
+
+  const isExpanded = ref(false)
+</script> 

package/front/src/pages/TaskAdmin.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="w-full">
+    <div class="bg-surface-0 dark:bg-surface-900 p-3 shadow mb-1">
+      <h2>Tasks</h2>
+<!--       <pre>tasksNames = {{ tasksNames }}</pre>
+      <pre>taskStates = {{ taskStates }}</pre> -->
+      <div class="flex flex-wrap gap-3 mb-3">
+        <div class="flex-1">
+          <label for="task-name" class="block mb-2">Task Name</label>
+          <Select id="task-name" v-model="name" :options="['any', ...tasksNames]" 
+                  placeholder="Select Task Name" class="w-full"  />
+        </div>
+        <div class="flex-1">
+          <label for="task-state" class="block mb-2">Task State</label>
+          <Select id="task-state" v-model="state" :options="['any', ...taskStates.map(s => ({label: s, value: s}))]"
+                  placeholder="Select Task State" class="w-full" />
+        </div>
+      </div>
+    </div>
+    
+    <!-- <pre>tasksPathConfig = {{ tasksPathConfig }}</pre> -->
+
+    <range-viewer :pathFunction="tasksPathFunction" :key="JSON.stringify(tasksPathConfig)"
+                  :canLoadTop="false" canDropBottom
+                  loadBottomSensorSize="4000px" dropBottomSensorSize="3000px">
+      <template #empty>
+        <div class="bg-surface-0 p-3 shadow text-center text-gray-500 text-lg">
+          No tasks found...
+        </div>
+      </template>
+
+      <template #default="{ item: task }">     
+        <TaskAdminCard :task="task" :tasks="task.subTasks" class="mt-1"  />
+      </template>
+    </range-viewer>
+    
+  </div>
+
+</template>
+
+<script setup>
+
+  import TaskAdminCard from '../components/TaskAdminCard.vue'
+
+  import Select from 'primevue/select'
+
+  import { ref, computed } from 'vue'
+  import { RangeViewer } from "@live-change/vue3-components"
+
+  import { inject } from 'vue'
+  const workingZone = inject('workingZone')
+
+  import { usePath, live, useClient, useActions, reverseRange, useApi } from '@live-change/vue3-ssr'
+  const path = usePath()
+  const client = useClient()
+  const actions = useActions()
+  const api = useApi()
+
+  const taskDefinition = computed(() => api.getServiceDefinition('task').models.Task)
+  const taskStates = computed(() => taskDefinition.value?.properties?.state?.enum)
+
+
+  const state = ref('any')
+  const name = ref('any')
+
+  const tasksPathConfig = computed(() => {
+    return {
+      name: name.value === 'any' ? undefined : name.value,
+      state: state.value === 'any' ? undefined : state.value
+    }
+  })
+
+  const tasksPathFunction = computed(() => (range) => 
+    path.task.independentTasks({ ...tasksPathConfig.value, ...reverseRange(range) })
+      .with(task => path.task.tasksByRoot({
+         rootType: 'task_Task',
+         root: task.id//{ or: [task.to, task.id]} 
+        }).bind('subTasks'))
+     
+  )
+
+  const tasksNamesPath = path.task.taskNames({})
+
+  console.log("TASKS NAMES PATH", tasksNamesPath)
+
+  const [tasksNamesData] = await Promise.all([
+    live(tasksNamesPath)
+  ])
+  const tasksNames = computed(() => tasksNamesData.value.map(task => task.id))
+
+  console.log("TASKS NAMES", tasksNames)
+
+</script>

package/front/src/router.js

@@ -1,3 +1,17 @@
+export function taskAdminRoutes(config = {}) {
+  const { prefix = '/', route = (r) => r } = config
+  return [
+
+    route({
+      name: 'task:admin', path: prefix, meta: { },
+      component: () => import("./pages/TaskAdmin.vue"),
+      props: true
+    }),
+
+  ]
+}
+
+
 import {
   createMemoryHistory,
   createRouter as _createRouter,

package/index.js

@@ -1,4 +1,5 @@
 import Task from './front/src/components/Task.vue'
 import TaskModal from './front/src/components/TaskModal.vue'
+import { taskAdminRoutes } from './front/src/router.js'
 
-export { Task, TaskModal }
+export { Task, TaskModal, taskAdminRoutes }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@live-change/task-frontend",
-  "version": "0.9.84",
+  "version": "0.9.86",
   "scripts": {
     "memDev": "tsx --inspect --expose-gc server/start.js memDev --enableSessions --initScript ./init.js --dbAccess",
     "localDevInit": "tsx server/start.js localDev --enableSessions --initScript ./init.js --dbAccess",
@@ -37,41 +37,41 @@
     "@codemirror/language": "6.10.1",
     "@dotenvx/dotenvx": "0.27.0",
     "@fortawesome/fontawesome-free": "^6.7.2",
-    "@live-change/access-control-frontend": "^0.9.84",
-    "@live-change/access-control-service": "^0.9.84",
-    "@live-change/backup-service": "^0.9.84",
-    "@live-change/blog-frontend": "^0.9.84",
-    "@live-change/blog-service": "^0.9.84",
-    "@live-change/cli": "^0.9.84",
-    "@live-change/content-frontend": "^0.9.84",
-    "@live-change/content-service": "^0.9.84",
-    "@live-change/dao": "^0.9.84",
-    "@live-change/dao-vue3": "^0.9.84",
-    "@live-change/dao-websocket": "^0.9.84",
-    "@live-change/db-client": "^0.9.84",
-    "@live-change/email-service": "^0.9.84",
-    "@live-change/framework": "^0.9.84",
-    "@live-change/frontend-auto-form": "^0.9.84",
-    "@live-change/frontend-base": "^0.9.84",
-    "@live-change/geoip-service": "^0.9.84",
-    "@live-change/image-frontend": "^0.9.84",
-    "@live-change/locale-settings-service": "^0.9.84",
-    "@live-change/password-authentication-service": "^0.9.84",
-    "@live-change/prosemirror-service": "^0.9.84",
-    "@live-change/secret-code-service": "^0.9.84",
-    "@live-change/secret-link-service": "^0.9.84",
-    "@live-change/session-service": "^0.9.84",
-    "@live-change/task-service": "^0.9.84",
-    "@live-change/upload-frontend": "^0.9.84",
-    "@live-change/url-frontend": "^0.9.84",
-    "@live-change/url-service": "^0.9.84",
-    "@live-change/user-frontend": "^0.9.84",
-    "@live-change/user-identification-service": "^0.9.84",
-    "@live-change/user-service": "^0.9.84",
-    "@live-change/vote-service": "^0.9.84",
-    "@live-change/vue3-components": "^0.9.84",
-    "@live-change/vue3-ssr": "^0.9.84",
-    "@live-change/wysiwyg-frontend": "^0.9.84",
+    "@live-change/access-control-frontend": "^0.9.86",
+    "@live-change/access-control-service": "^0.9.86",
+    "@live-change/backup-service": "^0.9.86",
+    "@live-change/blog-frontend": "^0.9.86",
+    "@live-change/blog-service": "^0.9.86",
+    "@live-change/cli": "^0.9.86",
+    "@live-change/content-frontend": "^0.9.86",
+    "@live-change/content-service": "^0.9.86",
+    "@live-change/dao": "^0.9.86",
+    "@live-change/dao-vue3": "^0.9.86",
+    "@live-change/dao-websocket": "^0.9.86",
+    "@live-change/db-client": "^0.9.86",
+    "@live-change/email-service": "^0.9.86",
+    "@live-change/framework": "^0.9.86",
+    "@live-change/frontend-auto-form": "^0.9.86",
+    "@live-change/frontend-base": "^0.9.86",
+    "@live-change/geoip-service": "^0.9.86",
+    "@live-change/image-frontend": "^0.9.86",
+    "@live-change/locale-settings-service": "^0.9.86",
+    "@live-change/password-authentication-service": "^0.9.86",
+    "@live-change/prosemirror-service": "^0.9.86",
+    "@live-change/secret-code-service": "^0.9.86",
+    "@live-change/secret-link-service": "^0.9.86",
+    "@live-change/session-service": "^0.9.86",
+    "@live-change/task-service": "^0.9.86",
+    "@live-change/upload-frontend": "^0.9.86",
+    "@live-change/url-frontend": "^0.9.86",
+    "@live-change/url-service": "^0.9.86",
+    "@live-change/user-frontend": "^0.9.86",
+    "@live-change/user-identification-service": "^0.9.86",
+    "@live-change/user-service": "^0.9.86",
+    "@live-change/vote-service": "^0.9.86",
+    "@live-change/vue3-components": "^0.9.86",
+    "@live-change/vue3-ssr": "^0.9.86",
+    "@live-change/wysiwyg-frontend": "^0.9.86",
     "@vueuse/core": "^12.3.0",
     "codeceptjs-assert": "^0.0.5",
     "compression": "^1.7.5",
@@ -93,7 +93,7 @@
     "vue3-scroll-border": "0.1.6"
   },
   "devDependencies": {
-    "@live-change/codeceptjs-helper": "^0.9.84",
+    "@live-change/codeceptjs-helper": "^0.9.86",
     "codeceptjs": "^3.6.10",
     "generate-password": "1.7.1",
     "playwright": "1.49.1",
@@ -104,5 +104,5 @@
   "author": "Michał Łaszczewski <michal@laszczewski.pl>",
   "license": "ISC",
   "description": "",
-  "gitHead": "5881a5406e3a39e673034f172266409ddb306f2e"
+  "gitHead": "7b0013ef101d9033402eeec45fd1be60e151aada"
 }