@windwalker-io/core 4.0.7 → 4.0.9

package/src/debugger/components/db/{query-info.vue → QueryInfo.vue}

@@ -1,123 +1,137 @@
 <template>
-  <!-- component -->
-  <div :id="`query-${i}`" class="bg-white shadow-md rounded-lg overflow-hidden mx-auto">
-    <div class="py-4 px-8 mt-3">
-      <div class="flex items-center justify-between mb-4">
-        <div>
-          <h2 class="text-gray-700 font-semibold text-2xl tracking-wide mb-2">
-            Query: {{ i }}
-          </h2>
-        </div>
-        <div class="text-gray-500 text-base">
+  <div :id="`query-${i}`" class="card rounded-3 border border-1 border-primary">
+    <div class="card-header d-flex justify-content-between">
+      <h4 class="m-0">
+        Query: {{ i }}
+      </h4>
+
+      <div class="d-flex align-items-center justify-content-between">
+        <div class="text-muted">
           <button
             type="button"
-            class="mr-2 border border-blue-500 text-blue-500 rounded-md px-4 py-1 transition duration-500 ease select-none hover:text-white hover:bg-blue-600 focus:outline-none focus:shadow-outline"
+            class="btn btn-outline-primary btn-sm"
             @click="copy"
           >
             <svg style="height: 14px; display: inline" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="clipboard" class="svg-inline--fa fa-clipboard fa-w-12" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="currentColor" d="M336 64h-53.88C268.9 26.8 233.7 0 192 0S115.1 26.8 101.9 64H48C21.5 64 0 85.48 0 112v352C0 490.5 21.5 512 48 512h288c26.5 0 48-21.48 48-48v-352C384 85.48 362.5 64 336 64zM192 64c17.67 0 32 14.33 32 32c0 17.67-14.33 32-32 32S160 113.7 160 96C160 78.33 174.3 64 192 64zM272 224h-160C103.2 224 96 216.8 96 208C96 199.2 103.2 192 112 192h160C280.8 192 288 199.2 288 208S280.8 224 272 224z"></path></svg>
-            <span class="text-sm ml-2">Copy</span>
+            <span class="">Copy</span>
           </button>
           <button
             type="button"
-            class="mr-2 border border-indigo-500 text-indigo-500 rounded-md px-3 py-2 transition duration-500 ease select-none hover:text-white hover:bg-indigo-600 focus:outline-none focus:shadow-outline"
+            class="btn btn-primary btn-sm"
           >
             <svg style="height: 14px" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="link" class="svg-inline--fa fa-link fa-w-20" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path fill="currentColor" d="M598.6 41.41C570.1 13.8 534.8 0 498.6 0s-72.36 13.8-99.96 41.41l-43.36 43.36c15.11 8.012 29.47 17.58 41.91 30.02c3.146 3.146 5.898 6.518 8.742 9.838l37.96-37.96C458.5 72.05 477.1 64 498.6 64c20.67 0 40.1 8.047 54.71 22.66c14.61 14.61 22.66 34.04 22.66 54.71s-8.049 40.1-22.66 54.71l-133.3 133.3C405.5 343.1 386 352 365.4 352s-40.1-8.048-54.71-22.66C296 314.7 287.1 295.3 287.1 274.6s8.047-40.1 22.66-54.71L314.2 216.4C312.1 212.5 309.9 208.5 306.7 205.3C298.1 196.7 286.8 192 274.6 192c-11.93 0-23.1 4.664-31.61 12.97c-30.71 53.96-23.63 123.6 22.39 169.6C293 402.2 329.2 416 365.4 416c36.18 0 72.36-13.8 99.96-41.41L598.6 241.3c28.45-28.45 42.24-66.01 41.37-103.3C639.1 102.1 625.4 68.16 598.6 41.41zM234 387.4L196.1 425.3C181.5 439.1 162 448 141.4 448c-20.67 0-40.1-8.047-54.71-22.66c-14.61-14.61-22.66-34.04-22.66-54.71s8.049-40.1 22.66-54.71l133.3-133.3C234.5 168 253.1 160 274.6 160s40.1 8.048 54.71 22.66c14.62 14.61 22.66 34.04 22.66 54.71s-8.047 40.1-22.66 54.71L325.8 295.6c2.094 3.939 4.219 7.895 7.465 11.15C341.9 315.3 353.3 320 365.4 320c11.93 0 23.1-4.664 31.61-12.97c30.71-53.96 23.63-123.6-22.39-169.6C346.1 109.8 310.8 96 274.6 96C238.4 96 202.3 109.8 174.7 137.4L41.41 270.7c-27.6 27.6-41.41 63.78-41.41 99.96c-.0001 36.18 13.8 72.36 41.41 99.97C69.01 498.2 105.2 512 141.4 512c36.18 0 72.36-13.8 99.96-41.41l43.36-43.36c-15.11-8.012-29.47-17.58-41.91-30.02C239.6 394.1 236.9 390.7 234 387.4z"></path></svg>
           </button>
           <button
             type="button"
-            class="border border-green-500 text-green-500 rounded-md px-3 py-2 transition duration-500 ease select-none hover:text-white hover:bg-green-600 focus:outline-none focus:shadow-outline"
+            class="btn btn-success btn-sm"
             @click="goToLast('/db')"
           >
             <svg style="height: 14px" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="arrow-rotate-right" class="svg-inline--fa fa-arrow-rotate-right fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M496 48V192c0 17.69-14.31 32-32 32H320c-17.69 0-32-14.31-32-32s14.31-32 32-32h63.39c-29.97-39.7-77.25-63.78-127.6-63.78C167.7 96.22 96 167.9 96 256s71.69 159.8 159.8 159.8c34.88 0 68.03-11.03 95.88-31.94c14.22-10.53 34.22-7.75 44.81 6.375c10.59 14.16 7.75 34.22-6.375 44.81c-39.03 29.28-85.36 44.86-134.2 44.86C132.5 479.9 32 379.4 32 256s100.5-223.9 223.9-223.9c69.15 0 134 32.47 176.1 86.12V48c0-17.69 14.31-32 32-32S496 30.31 496 48z"></path></svg>
           </button>
         </div>
       </div>
-      <div class="bg-gray-100 rounded-lg py-4 px-4"
-        v-html="item.debug_query">
+    </div>
+    <div class="card-body">
 
+      <div class="">
+        <pre style="word-break: break-all; white-space: pre-wrap;"
+          class="bg-light p-4"
+          v-html="formatQuery(item.debug_query)"
+          ></pre>
       </div>
-      <div class="py-4">
-        Query Time:
-        <span class="inline-block rounded-full text-gray-600 bg-gray-100 px-2 py-1 text-xs font-bold mr-3">
-          {{ round(item.time * 1000) }}ms
-        </span>
-        Memory:
-        <span class="inline-block rounded-full text-gray-600 bg-gray-100 px-2 py-1 text-xs font-bold mr-3">
-          {{ round(item.memory / 1024 / 1024) }}MB
-        </span>
-        Return Rows
-        <span class="inline-block rounded-full text-gray-600 bg-gray-100 px-2 py-1 text-xs font-bold mr-3">
-          {{ item.count }}
-        </span>
+      <div class="py-4 d-flex justify-content-between">
+        <div>
+          Query Time:
+          <span class="badge" :class="`bg-${stateColor(item.time * 1000, 15)}`">
+            {{ round(item.time * 1000) }}ms
+          </span>
+          Memory:
+          <span class="badge" :class="`bg-${stateColor(item.memory / 1024 / 1024, 0.05)}`">
+            {{ round(item.memory / 1024 / 1024) }}MB
+          </span>
+          Return Rows
+          <span class="badge bg-info rounded-pill">
+            {{ item.count }}
+          </span>
+        </div>
+
+        <div>
+          <button class="btn btn-primary" @click="openBacktrace(item.backtrace, i)">
+            <svg style="height: 14px; fill: white;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M40 48C26.7 48 16 58.7 16 72v48c0 13.3 10.7 24 24 24H88c13.3 0 24-10.7 24-24V72c0-13.3-10.7-24-24-24H40zM192 64c-17.7 0-32 14.3-32 32s14.3 32 32 32H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H192zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H192zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H192zM16 232v48c0 13.3 10.7 24 24 24H88c13.3 0 24-10.7 24-24V232c0-13.3-10.7-24-24-24H40c-13.3 0-24 10.7-24 24zM40 368c-13.3 0-24 10.7-24 24v48c0 13.3 10.7 24 24 24H88c13.3 0 24-10.7 24-24V392c0-13.3-10.7-24-24-24H40z"/></svg>
+            Backtrace
+          </button>
+        </div>
       </div>
     </div>
 
     <div v-if="item.explain">
-      <table class="min-w-full">
+      <table class="table">
         <thead>
         <tr>
-          <th class="px-4 py-3 border-b-2 border-gray-300 text-left leading-4 text-blue-500 tracking-wider">
+          <th class="">
             ID
           </th>
-          <th class="px-4 py-3 border-b-2 border-gray-300 text-left leading-4 text-blue-500 tracking-wider">
+          <th class="">
             Select Type
           </th>
-          <th class="px-4 py-3 border-b-2 border-gray-300 text-left leading-4 text-blue-500 tracking-wider">
+          <th class="">
             Table
           </th>
-          <th class="px-4 py-3 border-b-2 border-gray-300 text-left leading-4 text-blue-500 tracking-wider">
+          <th class="">
             Type
           </th>
-          <th class="px-4 py-3 border-b-2 border-gray-300 text-left leading-4 text-blue-500 tracking-wider">
+          <th class="">
             Possible Keys
           </th>
-          <th class="px-4 py-3 border-b-2 border-gray-300 text-left leading-4 text-blue-500 tracking-wider">
+          <th class="">
             Key
           </th>
-          <th class="px-4 py-3 border-b-2 border-gray-300 text-left leading-4 text-blue-500 tracking-wider">
+          <th class="">
             Key Length
           </th>
-          <th class="px-4 py-3 border-b-2 border-gray-300 text-left leading-4 text-blue-500 tracking-wider">
+          <th class="">
             Reference
           </th>
-          <th class="px-4 py-3 border-b-2 border-gray-300 text-left leading-4 text-blue-500 tracking-wider">
+          <th class="">
             Rows
           </th>
-          <th class="px-4 py-3 border-b-2 border-gray-300 text-left leading-4 text-blue-500 tracking-wider">
+          <th class="">
             Extra
           </th>
         </tr>
         </thead>
         <tbody class="bg-white">
         <tr v-for="explain of item.explain">
-          <td class="p-4 text-xs whitespace-no-wrap border-b border-gray-500">
+          <td class="">
             {{ explain.id }}
           </td>
-          <td class="p-4 text-xs whitespace-no-wrap border-b border-gray-500">
+          <td class="">
             {{ explain.select_type }}
           </td>
-          <td class="p-4 text-xs whitespace-no-wrap border-b border-gray-500">
+          <td class="">
             {{ explain.table }}
           </td>
-          <td class="p-4 text-xs whitespace-no-wrap border-b border-gray-500">
+          <td class="">
             {{ explain.type }}
           </td>
-          <td class="p-4 text-xs whitespace-no-wrap border-b border-gray-500">
-            {{ explain.possible_keys }}
+          <td class="text-wrap">
+            <div style="word-break: break-all">
+              {{ explain.possible_keys }}
+            </div>
           </td>
-          <td class="p-4 text-xs whitespace-no-wrap border-b border-gray-500">
+          <td class="">
             {{ explain.key }}
           </td>
-          <td class="p-4 text-xs whitespace-no-wrap border-b border-gray-500">
+          <td class="">
             {{ explain.key_len }}
           </td>
-          <td class="p-4 text-xs whitespace-no-wrap border-b border-gray-500">
+          <td class="">
             {{ explain.ref }}
           </td>
-          <td class="p-4 text-xs whitespace-no-wrap border-b border-gray-500">
+          <td class="">
             {{ explain.rows }}
           </td>
-          <td class="p-4 text-xs whitespace-no-wrap border-b border-gray-500">
+          <td class="">
             {{ explain.Extra }}
           </td>
         </tr>
@@ -129,30 +143,48 @@
 
 <script>
 import { format } from 'sql-formatter';
+import { stateColor } from '../../services/utilities.js';
 import { goToLast } from '../../services/nav.js';
 
 export default {
   name: 'query-info',
   props: {
     i: Number,
-    item: Object
+    item: Object,
+    totalCount: Number,
+    totalTime: Number,
+    totalMemory: Number,
   },
-  setup(props) {
+  setup(props, { emit }) {
     function copy() {
       navigator.clipboard.writeText(props.item.debug_query);
     }
 
+    function openBacktrace(backtrace) {
+      emit('open-backtrace', backtrace, props.i);
+    }
+
     return {
       formatQuery,
       round,
       goToLast,
-      copy
+      copy,
+      stateColor,
+      openBacktrace
     };
   }
 };
 
 function formatQuery(query) {
-  return format(query).replace(/\n/, '<br>');
+  try {
+    return format(query, {
+      keywordCase: 'upper',
+      
+    }).replace(/\n/, '<br>');
+  } catch (e) {
+    console.error(e);
+    return query;
+  }
 }
 
 function round(num) {

package/src/debugger/components/events/EventListenersTable.vue

@@ -0,0 +1,75 @@
+<template>
+<table class="table table-bordered">
+  <thead>
+  <tr>
+    <th>
+      Event Name
+    </th>
+    <th>
+      Times
+    </th>
+    <th>
+      Listener
+    </th>
+  </tr>
+  </thead>
+  <tbody>
+  <template v-for="(listeners, event) of events" :key="event">
+    <template v-if="Object.keys(listeners).length > 0">
+      <tr v-for="(count, listener) of listeners">
+        <td v-if="isFirstRow(event)" :rowspan="Object.keys(listeners).length">
+          <pre>{{ event }}</pre>
+        </td>
+        <td>
+          {{ count }}
+        </td>
+        <td>
+          <pre>{{ listener }}</pre>
+        </td>
+      </tr>
+    </template>
+    <template v-else>
+      <tr>
+        <td>
+          <pre>{{ event }}</pre>
+        </td>
+        <td>
+          -
+        </td>
+        <td>
+          -
+        </td>
+      </tr>
+    </template>
+  </template>
+  </tbody>
+</table>
+</template>
+
+<script>
+export default {
+  name: 'EventListenersTable',
+  props: {
+    events: Object,
+  },
+  setup() {
+    let lastEvent = null;
+
+    function isFirstRow(event) {
+      const isFirst = event !== lastEvent;
+
+      lastEvent = event;
+
+      return isFirst;
+    }
+
+    return {
+      isFirstRow,
+    };
+  }
+};
+</script>
+
+<style scoped>
+
+</style>

package/src/debugger/components/timeline/TimelineTable.vue

@@ -0,0 +1,107 @@
+<template>
+<div>
+  <table class="table table-bordered">
+    <thead>
+    <tr>
+      <th>Label</th>
+      <th class="text-end">Total Time</th>
+      <th class="text-end">Time</th>
+      <th class="text-end">Total Memory</th>
+      <th class="text-end">Memory</th>
+    </tr>
+    </thead>
+
+    <tbody>
+    <tr v-for="item of items">
+      <td>
+        {{ item.label }}
+      </td>
+      <td class="text-end">
+        <span class="badge bg-secondary">
+          {{ round(item.endTime) }}ms
+        </span>
+      </td>
+      <td class="text-end" v-if="getTimeOffset(item.endTime) || true">
+        <span class="badge" :class="'bg-' + stateColor(getCurrentTimeOffset(), 50)">
+          {{ round(getCurrentTimeOffset()) }}ms
+        </span>
+      </td>
+      <td class="text-end">
+        <span class="badge bg-secondary">
+          {{ round(bytesToMB(item.memory)) }}MB
+        </span>
+      </td>
+      <td class="text-end" v-if="getMemoryOffset(item.memory) || true">
+        <span class="badge" :class="'bg-' + stateColor(bytesToMB(getCurrentMemoryOffset()), 2)">
+          {{ round(bytesToMB(getCurrentMemoryOffset())) }}MB
+        </span>
+      </td>
+    </tr>
+    </tbody>
+  </table>
+</div>
+</template>
+
+<script>
+import { stateColor } from '../../services/utilities.js';
+
+export default {
+  name: 'TimelineTable',
+  props: {
+    items: Array
+  },
+  setup() {
+    let lastTime = 0;
+    let timeOffset = 0;
+
+    function getTimeOffset(time) {
+      timeOffset = time - lastTime;
+
+      lastTime = time;
+
+      return timeOffset;
+    }
+
+    function getCurrentTimeOffset() {
+      return timeOffset;
+    }
+
+    let lastMemory = 0;
+    let memoryOffset = 0;
+
+    function getMemoryOffset(memory) {
+      memoryOffset = memory - lastMemory;
+
+      lastMemory = memory;
+
+      return memoryOffset;
+    }
+
+    function getCurrentMemoryOffset() {
+      return memoryOffset;
+    }
+
+    function bytesToMB(value) {
+      return value / 1024 / 1024;
+    }
+
+    function round(num) {
+      return Math.round(num * 10000) / 10000;
+    }
+
+    return {
+      getTimeOffset,
+      getCurrentTimeOffset,
+      getMemoryOffset,
+      getCurrentMemoryOffset,
+      stateColor,
+      bytesToMB,
+      round
+    };
+  }
+};
+</script>
+
+<style scoped>
+
+</style>

package/src/debugger/debugger.js

@@ -9,10 +9,13 @@ import 'regenerator-runtime';
 import App from '@/App.vue';
 import { createApp } from 'vue';
 import router from './routes.js';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import './font-awesome.js';
 
 import '../../scss/debugger.scss';
 
 const app = createApp(App)
-  .use(router);
+  .use(router)
+  .component('fa-icon', FontAwesomeIcon);
 
 app.mount('app');

package/src/debugger/font-awesome.js

@@ -0,0 +1,23 @@
+/**
+ * Part of earth project.
+ *
+ * @copyright  Copyright (C) 2022 __ORGANIZATION__.
+ * @license    __LICENSE__
+ */
+
+/* import the fontawesome core */
+import { library } from '@fortawesome/fontawesome-svg-core'
+
+/* import specific icons */
+import { faList } from '@fortawesome/free-solid-svg-icons/faList'
+import { faArrowsRotate } from '@fortawesome/free-solid-svg-icons/faArrowsRotate'
+import { faEye } from '@fortawesome/free-solid-svg-icons/faEye'
+import { faExternalLink } from '@fortawesome/free-solid-svg-icons/faExternalLink'
+
+/* add icons to the library */
+library.add(
+  faEye,
+  faExternalLink,
+  faList,
+  faArrowsRotate,
+);

package/src/debugger/layouts/DefaultLayout.vue

@@ -1,11 +1,19 @@
 <template>
 <div v-if="currentData">
-  <div class="p-6 bg-gray-300">
+  <div class="p-3" style="background-color: var(--bs-gray-200);">
     <h1 class="text-xl font-bold text-gray-800">
       <slot name="title"></slot>
     </h1>
-    <div class="text-gray-600">
-      {{ currentId }} / <a target="_blank" class="text-gray-600" :href="currentData.url">{{ currentData.url }}</a>
+    <div class="text-muted">
+      <router-link to="/" class="btn btn-sm btn-primary">
+        <fa-icon icon="fa-solid fa-list"></fa-icon>
+      </router-link>
+      <button type="button" @click="goToLast('/' + route.name)" class="btn btn-sm btn-success">
+        <fa-icon icon="fa-solid fa-arrows-rotate"></fa-icon>
+      </button>
+      /
+      {{ currentId }}
+      / <a target="_blank" class="text-gray-600" :href="currentData.url">{{ currentData.url }}</a>
     </div>
   </div>
 
@@ -14,14 +22,21 @@
 </template>
 
 <script>
+import { useRoute } from 'vue-router';
+import { goToLast } from '../services/nav.js';
 import { currentData, currentId } from '../services/store.js';
 
 export default {
   name: 'DefaultLayout',
   setup() {
+    const route = useRoute();
+    
     return {
       currentId,
-      currentData
+      currentData,
+      route,
+
+      goToLast
     };
   }
 };

package/src/debugger/routes.js

@@ -10,10 +10,13 @@ import $http from './services/http.js';
 import { currentData, currentId } from './services/store.js';
 
 const routes = [
-  { path: '/', component: () => import('./views/Dashboard.vue') },
-  { path: '/system/:id?', component: () => import('./views/System.vue') },
-  { path: '/request/:id?', component: () => import('./views/Request.vue') },
-  { path: '/db/:id?', component: () => import('./views/Database.vue') },
+  { name: 'dashboard', path: '/', component: () => import('./views/Dashboard.vue') },
+  { name: 'system', path: '/system/:id?', component: () => import('./views/System.vue') },
+  { name: 'request', path: '/request/:id?', component: () => import('./views/Request.vue') },
+  { name: 'routing', path: '/routing/:id?', component: () => import('./views/Routing.vue') },
+  { name: 'timeline', path: '/timeline/:id?', component: () => import('./views/Timeline.vue') },
+  { name: 'events', path: '/events/:id?', component: () => import('./views/Events.vue') },
+  { name: 'db', path: '/db/:id?', component: () => import('./views/Database.vue') },
 ];
 
 const router = createRouter({
@@ -36,8 +39,8 @@ router.beforeEach(async (to, from) => {
       currentId.value = to.params.id;
 
       const params = new URLSearchParams({
-        'path[url]': 'http.systemUri.full',
-        'path[status]': 'http.response.status',
+        'path[url]': 'http::systemUri.full',
+        'path[status]': 'http::response.status',
       });
       const res = await $http.get('ajax/data?' + params.toString());
 

package/src/debugger/services/utilities.js

@@ -0,0 +1,18 @@
+/**
+ * Part of earth project.
+ *
+ * @copyright  Copyright (C) 2022 __ORGANIZATION__.
+ * @license    __LICENSE__
+ */
+
+export function stateColor(value, avg) {
+  if (value > (avg * 2)) {
+    return 'danger';
+  } else if (value > (avg * 1.5)) {
+    return 'warning';
+  } else if (value < (avg / 2)) {
+    return 'success';
+  } else {
+    return 'info';
+  }
+}

package/src/debugger/views/Dashboard.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="p-4">
-    <table class="table table-auto">
-      <thead>
+    <table class="table table-striped table-bordered">
+      <thead class="table-dark">
       <tr>
         <th>
           ID
@@ -30,13 +30,15 @@
       <tbody>
       <tr v-for="item of items">
         <td>
-          {{ item.id }}
+          <a href="#" @click.prevent="selectId(item.id)" class="link-secondary">
+            {{ item.id }}
+          </a>
         </td>
         <td>
-          <button class="bg-blue-400 rounded-sm px-3 py-2 text-white hover:bg-blue-500"
+          <button class="btn btn-primary btn-sm"
             type="button"
             @click="selectId(item.id)">
-            <svg style="height: 16px" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="eye" class="svg-inline--fa fa-eye fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M572.5 238.1C518.3 115.5 410.9 32 288 32S57.69 115.6 3.469 238.1C1.563 243.4 0 251 0 256c0 4.977 1.562 12.6 3.469 17.03C57.72 396.5 165.1 480 288 480s230.3-83.58 284.5-206.1C574.4 268.6 576 260.1 576 256C576 251 574.4 243.4 572.5 238.1zM432 256c0 79.45-64.47 144-143.9 144C208.6 400 144 335.5 144 256S208.5 112 288 112S432 176.5 432 256zM288 160C285.7 160 282.4 160.4 279.5 160.8C284.8 170 288 180.6 288 192c0 35.35-28.65 64-64 64C212.6 256 201.1 252.7 192.7 247.5C192.4 250.5 192 253.6 192 256c0 52.1 43 96 96 96s96-42.99 96-95.99S340.1 160 288 160z"></path></svg>
+            <fa-icon icon="fa-solid fa-eye"></fa-icon>
           </button>
         </td>
         <td>
@@ -46,16 +48,18 @@
           {{ item.method }}
         </td>
         <td>
-          <a href="#"
-            class="text-gray-400">
+          <a :href="item.url"
+            target="_blank"
+            class="link-secondary">
             {{ item.url }}
+            <fa-icon class="small" icon="fa-solid fa-external-link"></fa-icon>
           </a>
         </td>
         <td>
-          {{ item.time }}
+          {{ dateFormat(item.time) }}
         </td>
         <td>
-          {{ item.status }}
+          {{ item.response?.status }}
         </td>
       </tr>
       </tbody>
@@ -64,6 +68,7 @@
 </template>
 
 <script>
+import * as dayjs from 'dayjs';
 import { onMounted, reactive, toRefs } from 'vue';
 import router from '@/routes.js';
 import $http from '@/services/http.js';
@@ -88,9 +93,14 @@ export default {
         router.push('/system/' + id);
     }
 
+    function dateFormat(ts) {
+      return dayjs.unix(ts).format('YYYY-MM-DD HH:mm:ssZ');
+    }
+
     return {
       ...toRefs(state),
-      selectId
+      selectId,
+      dateFormat,
     };
   }
 };