@windwalker-io/core 4.0.7 → 4.0.9

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>

package/src/debugger/views/Request.vue

@@ -1,10 +1,142 @@
 <template>
+  <DefaultLayout>
+    <template #title>
+      Request
+    </template>
 
+    <div ref="root" class="p-4" v-if="data">
+      <section class="l-section l-section--get mt-5">
+        <h3>GET Variables</h3>
+
+        <KeyValueTable :data="data.request.query" />
+
+      </section>
+
+      <section class="l-section l-section--body mt-5">
+        <h3>Body Variables</h3>
+
+        <KeyValueTable :data="data.request.body" />
+
+      </section>
+
+      <section class="l-section l-section--files mt-5">
+        <h3>FILES Variables</h3>
+
+        <KeyValueTable :data="data.request.files" />
+
+      </section>
+
+      <section class="l-section l-section--session mt-5">
+        <h3>Session Variables</h3>
+
+        <KeyValueTable :data="data.session" />
+
+      </section>
+
+      <section class="l-section l-section--cookies mt-5">
+        <h3>Cookies Variables</h3>
+
+        <KeyValueTable :data="data.cookies || data.request.cookies" />
+
+      </section>
+
+      <section class="l-section l-section--server mt-5">
+        <h3>SERVER Variables</h3>
+
+        <KeyValueTable :data="data.request.server" />
+
+      </section>
+
+      <section class="l-section l-section--env mt-5">
+        <h3>ENV Variables</h3>
+
+        <KeyValueTable :data="data.request.env" />
+
+      </section>
+    </div>
+
+    <teleport to=".nav-item--request">
+      <ul class="nav flex-column ps-4 small">
+        <li class="nav-item">
+          <a href="#" class="nav-link" @click.prevent="goto('get')">
+            GET Variables
+          </a>
+        </li>
+        <li class="nav-item">
+          <a href="#" class="nav-link" @click.prevent="goto('body')">
+            Body Variables
+          </a>
+        </li>
+        <li class="nav-item">
+          <a href="#" class="nav-link" @click.prevent="goto('files')">
+            Files Variables
+          </a>
+        </li>
+        <li class="nav-item">
+          <a href="#" class="nav-link" @click.prevent="goto('session')">
+            Session Variables
+          </a>
+        </li>
+        <li class="nav-item">
+          <a href="#" class="nav-link" @click.prevent="goto('cookies')">
+            Cookies Variables
+          </a>
+        </li>
+        <li class="nav-item">
+          <a href="#" class="nav-link" @click.prevent="goto('server')">
+            SERVER Variables
+          </a>
+        </li>
+        <li class="nav-item">
+          <a href="#" class="nav-link" @click.prevent="goto('env')">
+            ENV Variables
+          </a>
+        </li>
+      </ul>
+    </teleport>
+  </DefaultLayout>
 </template>
 
 <script>
+import { ref } from 'vue';
+import KeyValueTable from '../components/KeyValueTable.vue';
+import DefaultLayout from '../layouts/DefaultLayout.vue';
+import $http from '../services/http.js';
+
 export default {
-  name: 'Request'
+  name: 'Request',
+  components: { KeyValueTable, DefaultLayout },
+  async beforeRouteEnter(to, from ,next) {
+    next(async (vm) => {
+      const res = await $http.get('ajax/data?path=http');
+      vm.data = res.data.data;
+    });
+  },
+  async beforeRouteUpdate(to, from ,next) {
+    const res = await $http.get('ajax/data?path=http');
+    this.data = res.data.data;
+  },
+  setup() {
+    const data = ref(null);
+    const root = ref(null);
+
+    function goto(section) {
+      const sec = root.value.querySelector(`.l-section--${section}`);
+
+      if (sec) {
+        window.scrollTo({
+          top: sec.offsetTop - 100,
+          behavior: 'smooth'
+        });
+      }
+    }
+
+    return {
+      data,
+      root,
+      goto,
+    }
+  }
 };
 </script>
 

package/src/debugger/views/Routing.vue

@@ -0,0 +1,210 @@
+<template>
+<DefaultLayout>
+  <template #title>
+    Routing
+  </template>
+
+  <div class="p-4" v-if="data">
+
+    <section class="l-section l-section--info">
+      <h3 class="mb-3">Route Information</h3>
+
+      <table class="table table-bordered">
+        <tbody>
+        <!-- Method -->
+        <tr>
+          <th style="width: 20%">
+            Request Method
+          </th>
+          <td>
+            {{ data.request.method }}
+          </td>
+        </tr>
+
+        <!-- Routes -->
+        <tr>
+          <th>
+            Total Routes
+          </th>
+          <td>
+            {{ Object.keys(data.routing.routes).length }}
+          </td>
+        </tr>
+
+        <!-- Matched -->
+        <tr>
+          <th>
+            Matched Route
+          </th>
+          <td>
+            <pre class="m-0">{{ data.routing.matched?.name }}</pre>
+          </td>
+        </tr>
+
+        <!-- Controller -->
+        <tr>
+          <th>
+            Controller / View
+          </th>
+          <td>
+            <pre class="m-0">{{ data.routing.controller }}</pre>
+
+            <div v-if="data.routing.matched?.options?.vars?.view"
+              class="ps-3 mt-2">
+              <pre class="m-0"><strong>View:</strong> {{ data.routing.matched?.options?.vars?.view }}</pre>
+            </div>
+          </td>
+        </tr>
+
+        <!-- Handler -->
+        <tr>
+          <th>
+            Handler
+          </th>
+          <td>
+            <pre class="m-0">{{ JSON.stringify(data.routing.matched?.options?.handlers, null, 2) }}</pre>
+          </td>
+        </tr>
+
+        <!-- Middlewares -->
+        <tr>
+          <th>
+            Middlewares
+          </th>
+          <td>
+            <div v-for="middleware of data.routing?.matched?.options?.middlewares">
+              <pre class="mb-1">{{ middleware }}</pre>
+            </div>
+          </td>
+        </tr>
+        </tbody>
+      </table>
+    </section>
+
+    <section class="l-section l-section--uri mt-5">
+      <h3 class="mb-3">Uri Information</h3>
+
+      <KeyValueTable :data="data.uri" />
+    </section>
+
+    <section class="l-section l-section--routes mt-5">
+      <h3 class="mb-3">Routes</h3>
+
+      <table class="table table-bordered">
+        <thead>
+          <tr>
+            <th>
+              Route Name
+            </th>
+            <th>
+              Pattern
+            </th>
+            <th>
+              Methods
+            </th>
+            <th>
+              Controller / View
+            </th>
+            <!--<th>-->
+            <!--  Detail-->
+            <!--</th>-->
+          </tr>
+        </thead>
+
+        <tbody>
+        <tr v-for="(route, name) of data.routing.routes"
+          :class="{ 'table-success': data.routing.matched?.name === route.name }">
+          <td>
+            <code>{{ route.name }}</code>
+          </td>
+          <td>
+            <code>{{ route.options.pattern }}</code>
+          </td>
+          <td>
+            {{ route.options?.method?.join('|') || 'Any' }}
+          </td>
+          <td style="max-width: 400px">
+            <div style="overflow-x: auto">
+              <div v-if="route?.options?.vars?.view"
+                class="">
+                <pre class="m-0">{{ route?.options?.vars?.view }}</pre>
+              </div>
+              <div v-else>
+                <pre>{{ getHandler(route.options.handlers || {}) }}</pre>
+              </div>
+            </div>
+          </td>
+          <!--<td></td>-->
+        </tr>
+        </tbody>
+      </table>
+
+    </section>
+
+  </div>
+</DefaultLayout>
+</template>
+
+<script>
+import { ref } from 'vue';
+import KeyValueTable from '../components/KeyValueTable.vue';
+import DefaultLayout from '../layouts/DefaultLayout.vue';
+import $http from '../services/http.js';
+export default {
+  name: 'Routing',
+  components: { KeyValueTable, DefaultLayout },
+  async beforeRouteEnter(to, from ,next) {
+    next(async (vm) => {
+      const params = new URLSearchParams();
+      params.set('path[request]', 'http::request');
+      params.set('path[uri]', 'http::systemUri');
+      params.set('path[routing]', 'routing');
+
+      const res = await $http.get('ajax/data?' + params.toString());
+      vm.data = res.data.data;
+    });
+  },
+  async beforeRouteUpdate(to, from ,next) {
+    const params = new URLSearchParams();
+    params.set('path[request]', 'http::request');
+    params.set('path[uri]', 'http::systemUri');
+    params.set('path[routing]', 'routing');
+
+    const res = await $http.get('ajax/data?' + params.toString());
+    vm.data = res.data.data;
+  },
+  setup() {
+    const data = ref(null);
+
+    function getHandler(handlers) {
+      if (handlers['*']) {
+        return getCallable(handlers['*']);
+      }
+
+      return getCallable(Object.values(handlers)[0]);
+    }
+
+    function getCallable(callable) {
+      if (!callable) {
+        return '-';
+      }
+
+      if (typeof callable === 'string') {
+        return callable;
+      }
+
+      return callable.join('::') + '()';
+    }
+
+    return {
+      data,
+
+      getHandler
+    };
+  }
+};
+</script>
+
+<style scoped>
+
+</style>