feat(web): resource specific query data on the resource page

src/logger/index.ts

@@ -87,37 +87,33 @@ RegisterCommand(
   true
 );
 
-const sortQueries = (queries: QueryData[], sort: { id: 'query' | 'executionTime'; desc: boolean }) => {
-  const sortedQueries = [...queries].sort((a, b) => {
-    switch (sort.id) {
-      case 'query':
-        return a.query > b.query ? 1 : -1;
-      case 'executionTime':
-        return a.executionTime - b.executionTime;
-      default:
-        return 0;
-    }
-  });
-
-  return sort.desc ? sortedQueries.reverse() : sortedQueries;
-};
+onNet(`oxmysql:fetchResource`, (data: { resource: string; pageIndex: number }) => {
+  if (typeof data.resource !== 'string') return;
+  const resourceLog = logStorage[data.resource];
 
-onNet(
-  `oxmysql:fetchResource`,
-  (data: { resource: string; pageIndex: number; sortBy?: { id: 'query' | 'executionTime'; desc: boolean }[] }) => {
-    if (typeof data.resource !== 'string') return;
+  const startRow = data.pageIndex * 10;
+  const endRow = startRow + 10;
+  const queries = resourceLog.slice(startRow, endRow);
+  const pageCount = Math.ceil(resourceLog.length / 10);
 
-    const sort = data.sortBy ? data.sortBy[0] : false;
+  if (!queries) return;
 
-    const startRow = data.pageIndex * 12;
-    const endRow = startRow + 12;
-    const queries = sort
-      ? sortQueries(logStorage[data.resource], sort).slice(startRow, endRow)
-      : logStorage[data.resource].slice(startRow, endRow);
-    const pageCount = Math.ceil(logStorage[data.resource].length / 12);
+  let resourceTime = 0;
+  let resourceSlowQueries = 0;
+  const resourceQueriesCount = resourceLog.length;
 
-    if (!queries) return;
+  for (let i = 0; i < resourceQueriesCount; i++) {
+    const query = resourceLog[i];
 
-    emitNet(`oxmysql:loadResource`, source, { queries, pageCount });
+    resourceTime += query.executionTime;
+    if (query.slow) resourceSlowQueries += 1;
   }
-);
+
+  emitNet(`oxmysql:loadResource`, source, {
+    queries,
+    pageCount,
+    resourceQueriesCount,
+    resourceSlowQueries,
+    resourceTime,
+  });
+});

web/src/pages/resource/Resource.svelte

@@ -5,7 +5,7 @@
   import ResourceHeader from './components/ResourceHeader.svelte';
   import { meta } from 'tinro';
   import { useNuiEvent } from '../../utils/useNuiEvent';
-  import { queries, type QueryData } from '../../store';
+  import { queries, resourceData, type QueryData } from '../../store';
   import { debugData } from '../../utils/debugData';
   import { onDestroy } from 'svelte';
 
@@ -18,6 +18,14 @@
     $queries = [];
   });
 
+  interface ResourceData {
+    queries: QueryData[];
+    pageCount: number;
+    resourceQueriesCount: number;
+    resourceSlowQueries: number;
+    resourceTime: number;
+  }
+
   debugData<{ queries: QueryData[]; pageCount: number }>([
     {
       action: 'loadResource',
@@ -35,9 +43,14 @@
   ]);
 
   // I miss callbacks :(
-  useNuiEvent('loadResource', (data: { queries: QueryData[]; pageCount: number }) => {
+  useNuiEvent('loadResource', (data: ResourceData) => {
     maxPage = data.pageCount;
     $queries = data.queries;
+    $resourceData = {
+      resourceQueriesCount: data.resourceQueriesCount,
+      resourceSlowQueries: data.resourceSlowQueries,
+      resourceTime: data.resourceTime,
+    };
   });
 
   $: fetchNui('fetchResource', { resource: route.params.resource, pageIndex: page });

web/src/pages/resource/components/ResourceHeader.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { IconChevronLeft } from '@tabler/icons-svelte';
   import { meta, router } from 'tinro';
+  import { resourceData } from '../../../store';
 
   const route = meta();
 </script>
@@ -14,8 +15,8 @@
   </button>
   <p class="text-center text-lg">{route.params.resource}</p>
   <div class="text-end text-dark-100 flex flex-col text-xs">
-    <p>Queries: 530</p>
-    <p>Time: 3014 ms</p>
-    <p class="text-yellow-500">Slow queries: 3</p>
+    <p>Queries: {$resourceData.resourceQueriesCount}</p>
+    <p>Time: {$resourceData.resourceTime} ms</p>
+    <p class="text-yellow-500">Slow queries: {$resourceData.resourceSlowQueries}</p>
   </div>
 </div>

web/src/store/resource.ts

@@ -8,3 +8,13 @@ export interface QueryData {
 }
 
 export const queries = writable<QueryData[]>([]);
+
+export const resourceData = writable<{
+  resourceQueriesCount: number;
+  resourceSlowQueries: number;
+  resourceTime: number;
+}>({
+  resourceQueriesCount: 0,
+  resourceSlowQueries: 0,
+  resourceTime: 0,
+});