Merge pull request #1 from spikeninja/dev

feat: 1.0.1 version

Author: spikeninja

package.json

@@ -2,7 +2,7 @@
   "name": "nuxt-app",
   "private": true,
   "type": "module",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev",

src/components/header.vue

@@ -3,17 +3,7 @@
   <header>
     <nav class="navbar navbar-expand-lg bg-light">
       <div class="container-fluid">
-        <NuxtLink to="/">Taskiq Admin</NuxtLink>
-        <div class="collapse navbar-collapse" id="navbarSupportedContent">
-          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
-            <li class="nav-item">
-              <NuxtLink class="nav-link" to="/tasks">Home</NuxtLink>
-            </li>
-            <li class="nav-item">
-              <NuxtLink class="nav-link" to="/tasks">Tasks</NuxtLink>
-            </li>
-          </ul>
-        </div>
+        <NuxtLink class="no-underline" to="/"><h3>Taskiq Admin</h3></NuxtLink>
       </div>
     </nav>
   </header>

src/pages/tasks/index.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { formatDate } from "~/utils"
+
 const route = useRoute()
 const router = useRouter()
 
@@ -29,6 +31,13 @@ const { data } = useAsyncData(
 
 const totalPages = computed(() => Math.ceil((data.value?.count || 0) / perPage))
 
+function limitText(text: string, length: number) {
+  if (text.length > length) {
+    return text.slice(0, length).trim() + "..."
+  }
+  return text
+}
+
 function handleNext() {
   router.push({
     path: "/tasks",
@@ -87,7 +96,7 @@ function handlePrev() {
         </thead>
         <tbody>
           <tr v-if="data" v-for="task in data.tasks">
-            <td>{{ task.name }}</td>
+            <td class="task-name-td">{{ task.name }}</td>
             <td>
               <NuxtLink :to="{ name: 'tasks-id', params: { id: task.id } }">
                 {{ task.id }}
@@ -106,10 +115,10 @@ function handlePrev() {
               </span>
             </td>
             <td>{{ task.args }}</td>
-            <td>{{ task.kwargs }}</td>
+            <td>{{ limitText(JSON.stringify(task.kwargs), 50) }}</td>
             <td>{{ task.returnValue }}</td>
-            <td>{{ task.startedAt }}</td>
-            <td>{{ task.finishedAt }}</td>
+            <td>{{ formatDate(task.startedAt) }}</td>
+            <td>{{ task.finishedAt ? formatDate(task.finishedAt) : null }}</td>
             <td>{{ task.executionTime }}</td>
             <td>{{ task.worker }}</td>
           </tr>
@@ -128,7 +137,9 @@ function handlePrev() {
               >Previous</span
             >
           </li>
-          <span>{{ page }} / {{ totalPages }}</span>
+          <div class="flex justify-center items-center px-2">
+            <span>{{ page }} / {{ totalPages }}</span>
+          </div>
           <li class="page-item">
             <span
               @click="handleNext"
@@ -142,3 +153,10 @@ function handlePrev() {
     </div>
   </div>
 </template>
+<style scoped>
+.task-name-td {
+  max-width: 300px;
+  overflow-x: scroll;
+  scrollbar-width: thin;
+}
+</style>

src/server/db/schema.ts

@@ -12,9 +12,11 @@ export const tasksTable = sqliteTable(
     executionTime: real("execution_time"),
     startedAt: int("started_at", { mode: "timestamp" }).notNull(),
     finishedAt: int("finished_at", { mode: "timestamp" }),
-    args: text({ mode: "json" }),
-    kwargs: text({ mode: "json" }),
-    returnValue: text("return_value", { mode: "json" }),
+    args: text({ mode: "json" }).$type<Array<any>>(),
+    kwargs: text({ mode: "json" }).$type<Record<string, any>>(),
+    returnValue: text("return_value", { mode: "json" }).$type<
+      Record<string, any>
+    >(),
   },
   (t) => ({
     idxStartedAt: index("idx_tasks__started_at").on(t.startedAt),

src/utils.ts

@@ -0,0 +1,8 @@
+import dayjs from "dayjs"
+import utc from "dayjs/plugin/utc"
+
+dayjs.extend(utc)
+
+export const formatDate = (date: string) => {
+  return dayjs.utc(date).local().format("MMM D, YYYY hh:mm A")
+}