@windwalker-io/core 4.0.8 → 4.0.9

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

@@ -5,7 +5,15 @@
       <slot name="title"></slot>
     </h1>
     <div class="text-muted">
-      {{ currentId }} / <a target="_blank" class="text-gray-600" :href="currentData.url">{{ currentData.url }}</a>
+      <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

@@ -13,6 +13,9 @@ const routes = [
   { 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') },
 ];
 
@@ -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,
     };
   }
 };

package/src/debugger/views/Database.vue

@@ -1,5 +1,5 @@
 <template>
-  <default-layout>
+  <defaultLayout>
     <template #title>
       Database
     </template>
@@ -7,37 +7,91 @@
     <div v-if="data" class="p-4">
       <!-- DB info -->
 
-      <div>
-        <h4>Queries</h4>
+      <ul class="nav nav-pills" id="profilers-tab" role="tablist">
+        <li class="nav-item" role="presentation"
+          v-for="(instance, i) of instances">
+          <button class="nav-link active" id="home-tab" data-bs-toggle="tab"
+            :data-bs-target="`tab-${instance}`"
+            type="button"
+            role="tab"
+            aria-selected="true">
+            {{ instance }}
+          </button>
+        </li>
+      </ul>
 
-        <div class="my-3">
-          Count: <span class="bg-blue-300 text-blue-600 px-2 py-1 rounded-sm text-sm">{{ data?.queries?.length }}</span>
-          -
-          Time: <span class="bg-blue-300 text-blue-600 px-2 py-1 rounded-sm text-sm">{{ round(totalTime) }}ms</span>
-          -
-          Memory: <span class="bg-blue-300 text-blue-600 px-2 py-1 rounded-sm text-sm">{{ round(totalMemory) }}MB</span>
-        </div>
-      </div>
+      <div class="tab-content mt-4" id="myTabContent">
+        <div class="tab-pane fade "
+          v-for="(instance, i) of instances"
+          :class="[ i === 0 ? 'show active' : '' ]"
+          :id="`tab-${instance}`"
+          role="tabpanel"
+          tabindex="0">
+
+          <div>
+            <h4>Queries</h4>
+
+            <div class="my-3">
+              Count: <span class="badge bg-info">{{ data?.queries[instance]?.length || 0 }}</span>
+              -
+              Time:
+              <span class="badge" :class="`bg-${stateColor(totalTime(instance), 15 * (data?.queries[instance]?.length || 0))}`">
+            {{ round(totalTime(instance)) }}ms
+          </span>
+              -
+              Memory:
+              <span class="badge" :class="`bg-${stateColor(totalMemory(instance), 0.05 * (data?.queries[instance]?.length || 0))}`">
+            {{ round(totalMemory(instance)) }}MB
+          </span>
+            </div>
+          </div>
+
+          <div class="mt-5">
+            <div class="mb-4" v-for="(query, i) of data.queries[instance]">
+              <QueryInfo :item="query" :i="i + 1"
+                :total-count="data?.queries[instance]?.length || 0"
+                :total-time="totalTime(instance)"
+                :total-memory="totalMemory(instance)"
+                @open-backtrace="openBacktrace"
+              />
+            </div>
+          </div>
 
-      <div class="mt-5">
-        <div class="mb-4" v-for="(query, i) of data.queries">
-          <query-info :item="query" :i="i + 1" />
         </div>
       </div>
 
+      <BsModal :open="showBacktraceModal" @hidden="showBacktraceModal = false"
+        :title="`Query ${backtraceIndex}: Backtrace`" size="xl">
+        <table class="table table-striped table-bordered">
+          <tbody>
+          <tr v-for="traceItem of backtrace" style="font-family: monospace; font-size: 13px; word-break: break-all;">
+            <td>
+              {{ traceItem.function }}
+            </td>
+            <td>
+              <a :href="getEditorLink(traceItem)">
+                {{ replaceRoot(traceItem.pathname) }}
+              </a>
+            </td>
+          </tr>
+          </tbody>
+        </table>
+      </BsModal>
     </div>
-  </default-layout>
+  </defaultLayout>
 </template>
 
 <script>
 import { computed, ref } from 'vue';
-import QueryInfo from '../components/db/query-info.vue';
-import DefaultLayout from '../layouts/DefaultLayout.vue';
-import $http from '../services/http.js';
+import BsModal from '@/components/BsModal.vue';
+import QueryInfo from '@/components/db/QueryInfo.vue';
+import DefaultLayout from '@/layouts/DefaultLayout.vue';
+import $http from '@/services/http.js';
+import { stateColor } from '../services/utilities.js';
 
 export default {
   name: 'Database',
-  components: { DefaultLayout, QueryInfo },
+  components: { BsModal, QueryInfo, DefaultLayout },
   async beforeRouteEnter(to, from ,next) {
     next(async (vm) => {
       const res = await $http.get('ajax/data?path=db');
@@ -51,23 +105,56 @@ export default {
   setup() {
     const data = ref(null);
 
-    const totalTime = computed(() => {
-      return data.value?.queries?.reduce((sum, query) => {
+    function totalTime(instance) {
+      return data.value?.queries[instance]?.reduce((sum, query) => {
         return sum + query.time;
       }, 0) * 1000;
-    });
+    }
 
-    const totalMemory = computed(() => {
-      return data.value?.queries?.reduce((sum, query) => {
+    function totalMemory(instance) {
+      return data.value?.queries[instance]?.reduce((sum, query) => {
         return sum + query.memory;
       }, 0) / 1024 / 1024;
-    });
+    }
+
+    const showBacktraceModal = ref(false);
+    const backtrace = ref([]);
+    const backtraceIndex = ref(0);
+
+    function openBacktrace(trace, i) {
+      backtrace.value = trace;
+      backtraceIndex.value = i;
+      showBacktraceModal.value = true;
+    }
+
+    const editor = document.__data.editor;
+    const sysPath = document.__data.systemPath;
+
+    function getEditorLink(trace) {
+      return `${editor}://open?file=${trace.pathname}&line=${trace.line}`;
+    }
+
+    function replaceRoot(path) {
+      return path.replace(sysPath, 'ROOT');
+    }
+
+    const instances = computed(() => data.value.connections.map((conn) => conn.name));
 
     return {
       data,
       totalTime,
       totalMemory,
-      round
+      showBacktraceModal,
+      backtrace,
+      backtraceIndex,
+      instances,
+
+      openBacktrace,
+      getEditorLink,
+
+      stateColor,
+      round,
+      replaceRoot,
     }
   }
 };

package/src/debugger/views/Events.vue

@@ -0,0 +1,113 @@
+<template>
+<DefaultLayout>
+  <template #title>
+    Events
+  </template>
+
+  <div class="p-4" v-if="data">
+
+    <section class="l-section l-section--triggered">
+      <h3>Event Triggered</h3>
+
+      <EventListenersTable :events="data.invoked" />
+    </section>
+
+    <section class="l-section l-section--untriggered mt-5">
+      <h3>Event Not Triggered (But has Listeners)</h3>
+
+      <EventListenersTable :events="data.uninvoked" />
+    </section>
+
+  </div>
+</DefaultLayout>
+</template>
+
+<script>
+import { computed, ref } from 'vue';
+import EventListenersTable from '../components/events/EventListenersTable.vue';
+import DefaultLayout from '../layouts/DefaultLayout.vue';
+import $http from '../services/http.js';
+export default {
+  name: 'Events',
+  components: { EventListenersTable, DefaultLayout },
+  async beforeRouteEnter(to, from ,next) {
+    next(async (vm) => {
+      const res = await $http.get('ajax/data?path=events');
+      vm.data = res.data.data;
+    });
+  },
+  async beforeRouteUpdate(to, from ,next) {
+    const res = await $http.get('ajax/data?path=events');
+    this.data = res.data.data;
+  },
+  setup() {
+    const data = ref(null);
+
+    // const events = computed(() => {
+    //   const items = [];
+    //
+    //   for (const eventName in data.value) {
+    //     const listeners = data.value[eventName] || {};
+    //
+    //     for (const listenerName in listeners) {
+    //       const count = listeners[listenerName] || 0;
+    //
+    //       items.push({
+    //         event: eventName,
+    //         listener: listenerName,
+    //         count
+    //       });
+    //     }
+    //   }
+    //
+    //   return items;
+    // });
+
+    // const triggeredEvents = computed(() => {
+    //   const items = {};
+    //
+    //   for (const eventName in data.value) {
+    //     const listeners = data.value[eventName] || {};
+    //
+    //     for (const listenerName in listeners) {
+    //       const count = listeners[listenerName] || 0;
+    //
+    //       if (count > 0) {
+    //         items[eventName] = items[eventName] || {};
+    //         items[eventName][listenerName] = count;
+    //       }
+    //     }
+    //   }
+    //
+    //   return items;
+    // });
+    //
+    // const untriggeredEvents = computed(() => {
+    //   const items = {};
+    //
+    //   for (const eventName in data.value) {
+    //     const listeners = data.value[eventName] || {};
+    //
+    //     for (const listenerName in listeners) {
+    //       const count = listeners[listenerName] || 0;
+    //
+    //       if (count <= 0) {
+    //         items[eventName] = items[eventName] || {};
+    //         items[eventName][listenerName] = count;
+    //       }
+    //     }
+    //   }
+    //
+    //   return items;
+    // });
+
+    return {
+      data,
+    };
+  }
+};
+</script>
+
+<style scoped>
+
+</style>