feat: query search for debug ui

overextended · Mar 7, 2024 · 7b488f8 · 7b488f8
1 parent 9b2b34f
commit 7b488f8
Show file tree

Hide file tree

Showing 7 changed files with 75 additions and 48 deletions.
diff --git a/src/logger/index.ts b/src/logger/index.ts
@@ -12,8 +12,7 @@ export function logError(
   parameters?: CFXParameters,
   includeParameters?: boolean
 ) {
-  const message =
-    typeof err === 'object' ? err.message : err.replace(/SCRIPT ERROR: citizen:[\w\/\.]+:\d+[:\s]+/, '');
+  const message = typeof err === 'object' ? err.message : err.replace(/SCRIPT ERROR: citizen:[\w\/\.]+:\d+[:\s]+/, '');
 
   const output = `${invokingResource} was unable to execute a query!${query ? `\n${`Query: ${query}`}` : ''}${
     includeParameters ? `\n${JSON.stringify(parameters)}` : ''
@@ -179,16 +178,24 @@ const sortQueries = (queries: QueryData[], sort: { id: 'query' | 'executionTime'
 
 onNet(
   `oxmysql:fetchResource`,
-  (data: { resource: string; pageIndex: number; sortBy?: { id: 'query' | 'executionTime'; desc: boolean }[] }) => {
+  (data: {
+    resource: string;
+    pageIndex: number;
+    search: string;
+    sortBy?: { id: 'query' | 'executionTime'; desc: boolean }[];
+  }) => {
     if (typeof data.resource !== 'string' || !IsPlayerAceAllowed(source as unknown as string, 'command.mysql')) return;
 
-    const resourceLog = logStorage[data.resource];
+    if (data.search) data.search = data.search.toLowerCase();
+
+    const resourceLog = data.search
+      ? logStorage[data.resource].filter((q) => q.query.toLowerCase().includes(data.search))
+      : logStorage[data.resource];
+
     const sort = data.sortBy && data.sortBy.length > 0 ? data.sortBy[0] : false;
     const startRow = data.pageIndex * 10;
     const endRow = startRow + 10;
-    const queries = sort
-      ? sortQueries(logStorage[data.resource], sort).slice(startRow, endRow)
-      : logStorage[data.resource].slice(startRow, endRow);
+    const queries = sort ? sortQueries(resourceLog, sort).slice(startRow, endRow) : resourceLog.slice(startRow, endRow);
     const pageCount = Math.ceil(resourceLog.length / 10);
 
     if (!queries) return;

diff --git a/web/src/App.svelte b/web/src/App.svelte
@@ -71,9 +71,9 @@
 {#if $visible}
   <main
     transition:scale={{ start: 0.95, duration: 150 }}
-    class="w-full h-full flex justify-center items-center font-main"
+    class="font-main flex h-full w-full items-center justify-center"
   >
-    <div class="bg-dark-800 text-white w-[1000px] h-[600px] flex rounded-md">
+    <div class="bg-dark-800 flex h-[700px] w-[1200px] rounded-md text-white">
       <Route path="/">
         <Root />
       </Route>

diff --git a/web/src/pages/resource/Resource.svelte b/web/src/pages/resource/Resource.svelte
@@ -8,13 +8,15 @@
   import { queries, resourceData, type QueryData } from '../../store';
   import { debugData } from '../../utils/debugData';
   import { onDestroy } from 'svelte';
-  import { tablePage } from '../../store';
+  import { filterData } from '../../store';
+  import QuerySearch from './components/QuerySearch.svelte';
+  import IconSearch from '@tabler/icons-svelte/dist/svelte/icons/IconSearch.svelte';
 
   let maxPage = 0;
 
   onDestroy(() => {
     $queries = [];
-    $tablePage = 0;
+    $filterData.page = 0;
   });
 
   interface ResourceData {
@@ -55,9 +57,10 @@
   });
 </script>
 
-<div class="flex flex-col w-full justify-between">
+<div class="flex w-full flex-col justify-between">
   <div>
     <ResourceHeader />
+    <QuerySearch icon={IconSearch} />
     <QueryTable />
   </div>
   <Pagination {maxPage} />

diff --git a/web/src/pages/resource/components/Pagination.svelte b/web/src/pages/resource/components/Pagination.svelte
@@ -4,40 +4,40 @@
   import IconChevronsLeft from '@tabler/icons-svelte/dist/svelte/icons/IconChevronsLeft.svelte';
   import IconChevronsRight from '@tabler/icons-svelte/dist/svelte/icons/IconChevronsRight.svelte';
   import { onDestroy } from 'svelte';
-  import { tablePage } from '../../../store';
+  import { filterData } from '../../../store';
 
   export let maxPage: number;
 
   onDestroy(() => (maxPage = 0));
 </script>
 
-<div class="flex justify-center items-center gap-6 pb-5">
+<div class="flex items-center justify-center gap-6 pb-5">
   <button
-    disabled={$tablePage === 0}
-    on:click={() => ($tablePage = 0)}
-    class="bg-dark-600 disabled:bg-dark-300 disabled:text-dark-400 disabled:cursor-not-allowed text-dark-100 hover:text-white focus-visible:text-white rounded-md hover:bg-dark-500 p-2 active:translate-y-[3px] outline-none border-[1px] border-transparent focus-visible:border-cyan-600"
+    disabled={$filterData.page === 0}
+    on:click={() => ($filterData.page = 0)}
+    class="bg-dark-600 disabled:bg-dark-300 disabled:text-dark-400 text-dark-100 hover:bg-dark-500 rounded-md border-[1px] border-transparent p-2 outline-none hover:text-white focus-visible:border-cyan-600 focus-visible:text-white active:translate-y-[3px] disabled:cursor-not-allowed"
   >
     <IconChevronsLeft />
   </button>
   <button
-    disabled={$tablePage === 0}
-    on:click={() => $tablePage--}
-    class="bg-dark-600 disabled:bg-dark-300 disabled:text-dark-400 disabled:cursor-not-allowed text-dark-100 hover:text-white focus-visible:text-white rounded-md hover:bg-dark-500 p-2 active:translate-y-[3px] outline-none border-[1px] border-transparent focus-visible:border-cyan-600"
+    disabled={$filterData.page === 0}
+    on:click={() => $filterData.page--}
+    class="bg-dark-600 disabled:bg-dark-300 disabled:text-dark-400 text-dark-100 hover:bg-dark-500 rounded-md border-[1px] border-transparent p-2 outline-none hover:text-white focus-visible:border-cyan-600 focus-visible:text-white active:translate-y-[3px] disabled:cursor-not-allowed"
   >
     <IconChevronLeft />
   </button>
-  <p>Page {$tablePage + 1} of {maxPage}</p>
+  <p>Page {$filterData.page + 1} of {maxPage}</p>
   <button
-    disabled={$tablePage >= maxPage - 1}
-    on:click={() => $tablePage++}
-    class="bg-dark-600 disabled:bg-dark-300 disabled:text-dark-400 disabled:cursor-not-allowed text-dark-100 hover:text-white focus-visible:text-white rounded-md hover:bg-dark-500 p-2 active:translate-y-[3px] outline-none border-[1px] border-transparent focus-visible:border-cyan-600"
+    disabled={$filterData.page >= maxPage - 1}
+    on:click={() => $filterData.page++}
+    class="bg-dark-600 disabled:bg-dark-300 disabled:text-dark-400 text-dark-100 hover:bg-dark-500 rounded-md border-[1px] border-transparent p-2 outline-none hover:text-white focus-visible:border-cyan-600 focus-visible:text-white active:translate-y-[3px] disabled:cursor-not-allowed"
   >
     <IconChevronRight />
   </button>
   <button
-    disabled={$tablePage === maxPage - 1}
-    on:click={() => ($tablePage = maxPage - 1)}
-    class="bg-dark-600 disabled:bg-dark-300 disabled:text-dark-400 disabled:cursor-not-allowed text-dark-100 hover:text-white focus-visible:text-white rounded-md hover:bg-dark-500 p-2 active:translate-y-[3px] outline-none border-[1px] border-transparent focus-visible:border-cyan-600"
+    disabled={$filterData.page === maxPage - 1}
+    on:click={() => ($filterData.page = maxPage - 1)}
+    class="bg-dark-600 disabled:bg-dark-300 disabled:text-dark-400 text-dark-100 hover:bg-dark-500 rounded-md border-[1px] border-transparent p-2 outline-none hover:text-white focus-visible:border-cyan-600 focus-visible:text-white active:translate-y-[3px] disabled:cursor-not-allowed"
   >
     <IconChevronsRight />
   </button>

diff --git a/web/src/pages/resource/components/QuerySearch.svelte b/web/src/pages/resource/components/QuerySearch.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { filterData } from '../../../store/resource';
+
+  let value = '';
+
+  $: {
+    $filterData.search = value;
+    $filterData.page = 0;
+  }
+
+  export let icon: ConstructorOfATypedSvelteComponent;
+</script>
+
+<div
+  class="bg-dark-600 m-4 mt-0 flex items-center rounded-md border-[1px] border-transparent p-2 outline-none transition-all duration-100 focus-within:border-cyan-600"
+>
+  <div class="pr-2">
+    <svelte:component this={icon} class="text-dark-300" />
+  </div>
+  <input type="text" bind:value class="w-full bg-transparent outline-none" placeholder="Search queries..." />
+</div>
diff --git a/web/src/pages/resource/components/QueryTable.svelte b/web/src/pages/resource/components/QueryTable.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
   import IconChevronDown from '@tabler/icons-svelte/dist/svelte/icons/IconChevronDown.svelte';
   import IconChevronUp from '@tabler/icons-svelte/dist/svelte/icons/IconChevronUp.svelte';
-
   import { queries, type QueryData } from '../../../store';
   import {
     createSvelteTable,
@@ -14,7 +13,7 @@
   import { writable } from 'svelte/store';
   import { meta } from 'tinro';
   import { fetchNui } from '../../../utils/fetchNui';
-  import { debouncedTablePage } from '../../../store';
+  import { filterData } from '../../../store';
   import QueryTooltip from './QueryTooltip.svelte';
 
   const route = meta();
@@ -68,12 +67,17 @@
 
   const table = createSvelteTable(options);
 
+  let timer: NodeJS.Timeout;
   $: {
-    fetchNui('fetchResource', {
-      resource: route.params.resource,
-      pageIndex: $debouncedTablePage,
-      sortBy: sorting,
-    });
+    clearTimeout(timer);
+    timer = setTimeout(() => {
+      fetchNui('fetchResource', {
+        resource: route.params.resource,
+        pageIndex: $filterData.page,
+        search: $filterData.search,
+        sortBy: sorting,
+      });
+    }, 300);
   }
 </script>
 
@@ -83,12 +87,12 @@
       {#each $table.getHeaderGroups() as headerGroup}
         <tr>
           {#each headerGroup.headers as header}
-            <th class={`p-1 bg-dark-600 select-none ${header.id === 'executionTime' ? 'w-1/4' : 'w-3/4'}`}>
+            <th class={`bg-dark-600 select-none p-1 ${header.id === 'executionTime' ? 'w-1/4' : 'w-3/4'}`}>
               {#if !header.isPlaceholder}
                 <button
                   class:cursor-pointer={header.column.getCanSort()}
                   class:select-none={header.column.getCanSort()}
-                  class="flex items-center justify-center w-full gap-1"
+                  class="flex w-full items-center justify-center gap-1"
                   on:click={header.column.getToggleSortingHandler()}
                 >
                   <svelte:component this={flexRender(header.column.columnDef.header, header.getContext())} />
@@ -119,9 +123,9 @@
                 use:floatingRef
                 on:mouseenter={displayTooltip}
                 on:mouseleave={hideTooltip}
-                class={`${cell.column.id === 'executionTime' && 'text-center'} p-2 bg-dark-700 ${
+                class={`${cell.column.id === 'executionTime' && 'text-center'} bg-dark-700 p-2 ${
                   row.original.slow && 'text-yellow-500'
-                } truncate max-w-[200px]`}
+                } max-w-[200px] truncate`}
               >
                 <svelte:component this={flexRender(cell.column.columnDef.cell, cell.getContext())} />
               </td>

diff --git a/web/src/store/resource.ts b/web/src/store/resource.ts
@@ -1,4 +1,4 @@
-import { derived, writable } from 'svelte/store';
+import { writable } from 'svelte/store';
 
 export interface QueryData {
   date: number;
@@ -19,12 +19,4 @@ export const resourceData = writable<{
   resourceTime: 0,
 });
 
-export const tablePage = writable(0);
-
-let timer: NodeJS.Timer;
-export const debouncedTablePage = derived(tablePage, ($tablePage, set) => {
-  clearTimeout(timer);
-  timer = setTimeout(() => {
-    set($tablePage);
-  }, 300);
-});
+export const filterData = writable({ search: '', page: 0 });