feat(nui): Display the amount of slow queries

overextended · Feb 2, 2022 · 553775c · 553775c
1 parent 18eb6d1
commit 553775c
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 2 deletions.
diff --git a/src/logger/index.ts b/src/logger/index.ts
@@ -37,6 +37,7 @@ RegisterCommand(
 
     let totalQueries: number = 0;
     let totalTime = 0;
+    let slowQueries = 0;
     let chartData: [
       {
         x: number; // Number of queries
@@ -57,13 +58,15 @@ RegisterCommand(
 
       totalQueries += queries.length;
       totalTime += queries.reduce((totalTime, query) => (totalTime += query.executionTime), 0);
+      slowQueries += queries.reduce((slowQueries, query) => (slowQueries += query.slow ? 1 : 0), 0);
       totalResourceTime += queries.reduce((totalResourceTime, query) => (totalResourceTime += query.executionTime), 0);
       chartData.push({ x: queries.length, y: totalResourceTime, z: resource });
     }
 
     emitNet(`oxmysql:openUi`, source, {
       resources: Object.keys(logStorage),
       totalQueries,
+      slowQueries,
       totalTime,
       chartData,
     });

diff --git a/ui/src/components/App.tsx b/ui/src/components/App.tsx
@@ -15,6 +15,7 @@ debugData([
       resources: ['ox_inventory', 'luke_garages', 'es_extended'],
       totalQueries: 732,
       totalTime: 258,
+      slowQueries: 6,
       chartData: [
         { x: 13, y: 350, z: 'ox_inventory' },
         { x: 27, y: 752, z: 'es_extended' },

diff --git a/ui/src/components/NavBars/LeftBar.tsx b/ui/src/components/NavBars/LeftBar.tsx
@@ -9,6 +9,7 @@ const LeftBar: React.FC = () => {
     resources: [''],
     totalQueries: 0,
     totalTime: 0,
+    slowQueries: 0,
     chartData: [{ x: 0, y: 0, z: '' }],
   });
 

diff --git a/ui/src/components/NavBars/RightBar.tsx b/ui/src/components/NavBars/RightBar.tsx
@@ -8,6 +8,7 @@ const RightBar: React.FC = () => {
   const [initData, setInitData] = useState<InitData>({
     totalQueries: 0,
     totalTime: 0,
+    slowQueries: 0,
     resources: [''],
     chartData: [{ x: 0, y: 0, z: '' }],
   });
@@ -24,8 +25,9 @@ const RightBar: React.FC = () => {
         <Flex direction="column" h="100%">
           <Box>
             <VStack align="left">
-              <Box>Number of queries: {initData.totalQueries}</Box>
-              <Box>Time querying: {Math.trunc(initData.totalTime)} ms</Box>
+              <Text>Number of queries: {initData.totalQueries}</Text>
+              <Text>Time querying: {Math.trunc(initData.totalTime)} ms</Text>
+              <Text color="#f3eca1">Slow queries: {initData.slowQueries}</Text>
             </VStack>
           </Box>
           <Spacer />

diff --git a/ui/src/types/index.ts b/ui/src/types/index.ts
@@ -8,5 +8,6 @@ export type InitData = {
   resources: string[];
   totalQueries: number;
   totalTime: number;
+  slowQueries: number;
   chartData: ChartData[];
 };