add control

package.json

@@ -60,14 +60,17 @@
     "directory-tree": "^3.5.2",
     "dotenv-cli": "^7.4.2",
     "drizzle-orm": "^0.30.10",
+    "fs-reverse": "^0.0.3",
     "glob": "10.3.10",
     "highlight.js": "^11.10.0",
+    "i": "^0.3.7",
     "image-type": "^5.2.0",
     "lodash-es": "^4.17.21",
     "lowlight": "^3.1.0",
     "md5": "^2.3.0",
     "mysql2": "^3.11.3",
     "nodemailer": "^6.9.15",
+    "npm": "^10.9.1",
     "prosemirror-commands": "^1.6.0",
     "prosemirror-dropcursor": "^1.8.1",
     "prosemirror-gapcursor": "^1.3.2",

src/def/index.ts

@@ -7,6 +7,17 @@ import type {
   ScoreRankingSystem,
 } from './common'
 
+export enum LogLevel {
+  unknown = -1,
+  error = 0,
+  warn = 1,
+  info = 2,
+  http = 3,
+  verbose = 4,
+  debug = 5,
+  silly = 6,
+}
+
 export enum Lang {
   enGB = 'en-GB',
   zhCN = 'zh-CN',

src/pages/admin/logs.vue

@@ -1,13 +1,26 @@
 <script setup lang="ts" async>
+import { LogLevel } from '~/def'
+
+enum Direction {
+  asc = 'asc',
+  desc = 'desc',
+}
+
 definePageMeta({
   middleware: 'admin',
 })
 
 const app = useNuxtApp()
-const last = ref(50)
-const { data: logs } = await app.$client.admin.log.last.useQuery(last)
 const { t, locale } = useI18n()
 
+const direction = ref<Direction>(Direction.desc)
+const q = reactive({
+  last: 50,
+  loglevel: LogLevel.warn,
+})
+const { data: logs, refresh } = await app.$client.admin.log.last.useQuery(q)
+watch(q, () => refresh())
+
 useHead({
   title: () => t(localeKey.title.logs.__path__),
   titleTemplate: title => `${title} - ${t(localeKey.server.name.__path__)}`,
@@ -28,6 +41,38 @@ async function truncate() {
         truncate
       </button>
     </div>
+    <div class="grid grid-cols-12 py-4 gap-4">
+      <div class="col-span-12 md:col-span-6 lg:col-span-4">
+        <label for="loglevel" class="label">Log Level: {{ LogLevel[q.loglevel] }}</label>
+        <input id="loglevel" v-model.number="q.loglevel" type="range" min="0" max="6" class="range range-sm" step="1">
+        <div class="flex w-full justify-between px-2 text-xs">
+          <span>|</span>
+          <span>|</span>
+          <span>|</span>
+          <span>|</span>
+          <span>|</span>
+          <span>|</span>
+          <span>|</span>
+        </div>
+      </div>
+      <div class="col-span-6 md:col-span-4 lg:col-span-2 form-control">
+        <label for="last" class="label">Last</label>
+        <input id="last" v-model.number="q.last" class="input input-sm">
+      </div>
+      <div class="col-span-6 md:col-span-4 lg:col-span-2 form-control">
+        <label for="direction" class="label">Direction</label>
+        <select id="direction" v-model="direction" class="select select-sm">
+          <option v-for="d in Object.values(Direction)" :key="d" :value="d">
+            {{ d }}
+          </option>
+        </select>
+      </div>
+    </div>
+    <div class="py-4">
+      <button class="btn" @click="() => refresh()">
+        fetch
+      </button>
+    </div>
     <div class="overflow-x-auto rounded border border-base-300">
       <table class="table table-sm table-zebra table-pin-rows">
         <thead>
@@ -40,9 +85,9 @@ async function truncate() {
           </tr>
         </thead>
         <tbody>
-          <tr v-for="log in logs" :key="`log-${log.timestamp}`">
+          <tr v-for="log in direction === Direction.asc ? logs : logs?.toReversed()" :key="`log-${log.timestamp}`">
             <td class="whitespace-pre">
-              {{ log.timestamp.toLocaleString(locale) }}
+              {{ new Date(log.timestamp).toLocaleString(locale) }}
             </td>
             <td class="whitespace-pre">
               {{ log.level }}