Merge branch 'dev' into emma/TestingTestNewQueryPage

Author: emma-vargas

server/controllers/mysqlData.controller.ts

@@ -191,6 +191,51 @@ const mysqlController = {
         // Step 3: Parse the output for actual times
         let totalExecutionTime = 0;
 
+        // Regex to extract the additional metrics
+        const match = row.match(
+          /-> (\w+ \w+) on (\w+).*cost=([\d.]+) rows=(\d+).*actual time=([\d.]+)\.\.([\d.]+) rows=(\d+)/
+        );
+
+        if (match) {
+          const [
+            _,
+            nodeType,
+            relationName,
+            totalCost,
+            planRows,
+            actualTimeStart,
+            actualTimeEnd,
+            actualRows,
+          ] = match;
+
+          const actualTotalTime = parseFloat(actualTimeEnd) - parseFloat(actualTimeStart);
+          console.log({
+            nodeType,
+            relationName,
+            totalCost: parseFloat(totalCost),
+            planRows: parseInt(planRows),
+            actualRows: parseInt(actualRows),
+            actualTotalTime: parseFloat(actualTotalTime.toFixed(4)), // in ms
+          });
+
+          // MySQL, doesn't have planningTime, sharedHit, and sharedRead so setting as null
+          const moreMets: Array<object> = [
+            {
+              planningTime: null,
+              actualTotalTime: parseFloat(actualTotalTime.toFixed(4)),
+              totalCost: parseFloat(totalCost),
+              nodeType,
+              relationName,
+              planRows: parseInt(planRows),
+              actualRows: parseInt(actualRows),
+              sharedHit: null,
+              sharedRead: null,
+            },
+          ];
+
+          res.locals.otherMetrics = moreMets;
+        }
+
         // Regex to extract actual time values from the EXPLAIN ANALYZE output
         const times = row.match(/actual time=(\d+\.\d+)\.\.(\d+\.\d+)/);
         // console.log('🌟 RESULT OF TIMES', times);
@@ -232,10 +277,6 @@ const mysqlController = {
         year: 'numeric',
         month: 'long',
         day: 'numeric',
-        // hour: 'numeric',
-        // minute: 'numeric',
-        // second: 'numeric',
-        // hour12: true, // Use 12-hour time format
         timeZone: 'America/New_York', // Set to US Eastern Time
       };
 
@@ -261,17 +302,27 @@ const mysqlController = {
   mysqlSaveQuery: async (req: Request, res: Response, next: NextFunction) => {
     try {
       // grab queryString from FE
-      console.log('REACHED mysqlSaveQuery MIDDLEWARE');
       console.log('REQ QUERY: ', req.body.params);
       const { query_date, exec_time } = req.body.params.extractedQueryRes;
       const { queryString, queryName, hostname, database_name } =
         req.body.params.dbValues;
+      const {
+        planningTime,
+        totalCost,
+        actualTotalTime,
+        nodeType,
+        relationName,
+        planRows,
+        actualRows,
+        sharedHit,
+        sharedRead,
+      } = req.body.params.moreMetrics;
 
       const date = new Date(query_date);
       const formatDateForMySql = date.toISOString().split('T')[0];
       console.log('formatted date: ', formatDateForMySql);
 
-      const insertQueryStr = `INSERT INTO queries (query, db_link, exec_time, db_name, query_date, name) VALUES(?,?,?,?,?,?)`;
+      const insertQueryStr = `INSERT INTO queries (query, db_link, exec_time, db_name, query_date, name, planning_time, total_cost, actual_total_time, node_type, relation_name, plan_rows, actual_rows, shared_hit_blocks, shared_read_blocks) VALUES(?,?,?,?,?,?,?,?,?,?,?,?,?,?,?)`;
 
       const [saveQuery]: any = await pool.query(insertQueryStr, [
         queryString,
@@ -280,6 +331,15 @@ const mysqlController = {
         database_name,
         formatDateForMySql,
         queryName,
+        planningTime,
+        totalCost,
+        actualTotalTime,
+        nodeType,
+        relationName,
+        planRows,
+        actualRows,
+        sharedHit,
+        sharedRead,
       ]);
 
       // Check if insertion was successful
@@ -295,6 +355,15 @@ const mysqlController = {
           database_name,
           formatDateForMySql,
           queryName,
+          planningTime,
+          totalCost,
+          actualTotalTime,
+          nodeType,
+          relationName,
+          planRows,
+          actualRows,
+          sharedHit,
+          sharedRead,
         ];
         return next();
       } else {

server/controllers/postgresData.controller.ts

@@ -183,35 +183,55 @@ const postgresController = {
       const testQuery = `EXPLAIN (FORMAT JSON, ANALYZE, VERBOSE, BUFFERS) ${queryString};`;
       const result = await PostgresGetMetrics.query(testQuery);
 
-      // console.log('🌟 result of testing: ', result);
       console.log('⭐️QUERY PLAN RESULT: ', result[0]['QUERY PLAN']);
+      // 🌟🌟🌟
+      /*
+      Key Metrics Explanation:
+      - Execution Time: total time it takes to execute the query (in ms)
+      - Planning Time: time spent preparing the query plan (shows if the query is complex to plan)
+      - Actual Total Time: actual runtime of query (helps show real-time performance)
+      - Node Type (Seq Scan, Index Scan, Hash Join): tells you what scan/join is used - seq scan on big tables is a red flag
+      - Relation Name: table being queried (context for which part is being scanned)
+      - Plan Rows vs Actual Rows: estimated vs actual rows (if they differ a lot = bad stats or inefficient plan)
+      - Shared Hit Blocks / Read Blocks: pages read from cache vs. disk (shows I/O behavior -> disk access = slower)
+      */
 
       //pull exec time alone for the mysql update when storing queries
       const exec_time = result[0]['QUERY PLAN'][0]['Execution Time'];
       console.log('exec_time:', exec_time);
 
       // Pull Execution time only
-      const executionTime = `Execution Time: ${result[0]['QUERY PLAN'][0]['Execution Time']}ms`;
+      const resObj = result[0]['QUERY PLAN'][0];
+      const resObjPlan = resObj['Plan'];
+      const executionTime = `Execution Time: ${resObj['Execution Time']}ms`;
       const namedQuery = `Query Name: ${queryName}`;
       const queryStr = `Query: ${queryString}`;
       // console.log('⏰ EXECUTION TIME METRIC', executionTime);
 
+      const otherMetrics: Array<object> = [
+        {
+          planningTime: resObj['Planning Time'],
+          actualTotalTime: resObjPlan['Actual Total Time'],
+          totalCost: resObjPlan['Total Cost'],
+          nodeType: resObjPlan['Node Type'],
+          relationName: resObjPlan['Relation Name'],
+          planRows: resObjPlan['Plan Rows'],
+          actualRows: resObjPlan['Actual Rows'],
+          sharedHit: resObjPlan['Shared Hit Blocks'],
+          sharedRead: resObjPlan['Shared Read Blocks'],
+        },
+      ];
+      // console.log('OTHER METRICCSSSS: ', otherMetrics);
+
       // Create date metric to add to response
       const now = new Date();
       const options: any = {
         year: 'numeric',
         month: 'long',
         day: 'numeric',
-        // hour: 'numeric',
-        // minute: 'numeric',
-        // second: 'numeric',
-        // hour12: true, // Use 12-hour time format
         timeZone: 'America/New_York', // Set to US Eastern Time
       };
       const formattedDate = `Date Run: ${now.toLocaleString('en-US', options)}`;
-      //console.log(`🗓️ TODAY'S DATE`, formattedDate);
-
-      // console.log('done w getMetrics controller');
 
       /************* mysql querymetrics db insert for saved query page retrieval ******/
       // creating insert query for mysql query metrics db
@@ -220,8 +240,9 @@ const postgresController = {
       //const db_link = 'postgresql://postgres.gcfszuopjvbjtllgmenw:[email protected]:6543/postgres';
       //const db_name = 'dbSpy';
 
-      // Send query string, date, and execution time on response
+      // Send query name, query string, date, and execution time on response
       res.locals.metrics = [namedQuery, queryStr, formattedDate, executionTime];
+      res.locals.otherMetrics = otherMetrics;
       PostgresGetMetrics.destroy();
       return next();
     } catch (err) {
@@ -241,17 +262,24 @@ const postgresController = {
       const { query_date, exec_time } = req.body.params.extractedQueryRes;
       const { queryString, queryName, hostname, database_name } =
         req.body.params.dbValues;
+      const {
+        planningTime,
+        totalCost,
+        actualTotalTime,
+        nodeType,
+        relationName,
+        planRows,
+        actualRows,
+        sharedHit,
+        sharedRead,
+      } = req.body.params.moreMetrics;
 
       // converting date to DATE format (YYYY-MM-DD) for MySQL to insert into queries table
       const date = new Date(query_date);
       const formatDateForMySql = date.toISOString().split('T')[0];
       console.log('formatted date: ', formatDateForMySql);
 
-      // UNCOMMENT code below
-      // const insertQueryStr = `INSERT INTO queries (query, db_link, exec_time, db_name, query_date, name) VALUES(?,?,?,?,?,?)`;
-
-      // DELETE this after Vicky does her PR (mock data)
-      const insertQueryStr = `INSERT INTO queries (query, db_link, exec_time, db_name, query_date, name, planning_time, total_cost, actual_total_time, node_type, relation_name, plan_rows, actual_rows, shared_hit_blocks, shared_read_blocks) VALUES(?,?,?,?,?,?, 0, 0, 0, 'test', 'test', 0, 0, 0, 0)`;
+      const insertQueryStr = `INSERT INTO queries (query, db_link, exec_time, db_name, query_date, name, planning_time, total_cost, actual_total_time, node_type, relation_name, plan_rows, actual_rows, shared_hit_blocks, shared_read_blocks) VALUES(?,?,?,?,?,?,?,?,?,?,?,?,?,?,?)`;
 
       //connect to mysql pool imported from userModel and send the query to update table
       const [savingQuery]: any = await pool.query(insertQueryStr, [
@@ -261,6 +289,15 @@ const postgresController = {
         database_name,
         formatDateForMySql,
         queryName,
+        planningTime,
+        totalCost,
+        actualTotalTime,
+        nodeType,
+        relationName,
+        planRows,
+        actualRows,
+        sharedHit,
+        sharedRead,
       ]);
 
       // Check if insertion was successful
@@ -276,6 +313,15 @@ const postgresController = {
           database_name,
           formatDateForMySql,
           queryName,
+          planningTime,
+          totalCost,
+          actualTotalTime,
+          nodeType,
+          relationName,
+          planRows,
+          actualRows,
+          sharedHit,
+          sharedRead,
         ];
         return next();
       } else {

server/controllers/save.controller.ts

@@ -35,7 +35,7 @@ const saveController = {
     try {
       // query to get all necessary data to the FE
       // TODO - add in user data to filter per user
-      const getQueries: string = `SELECT name, query, query_date, exec_time FROM queries`;
+      const getQueries: string = `SELECT name, query, query_date, exec_time, planning_time, total_cost, actual_total_time, node_type, relation_name, plan_rows, actual_rows, shared_hit_blocks, shared_read_blocks FROM queries ORDER BY id DESC`;
       const queryVal = await pool.query(getQueries);
       res.locals.savedQueries = queryVal;
       return next();

server/routes/mysql.router.ts

@@ -12,7 +12,7 @@ mysqlRouter.get(
   '/run-query',
   mysqlController.mysqlGetMetrics,
   (_req: Request, res: Response) => {
-    return res.status(200).json(res.locals.metrics);
+    return res.status(200).json(res.locals);
   }
 );
 

server/routes/postgres.router.ts

@@ -16,7 +16,7 @@ postgresRouter.get(
   '/run-query',
   postgresController.postgresGetMetrics,
   (_req: Request, res: Response) => {
-    return res.status(200).json(res.locals.metrics);
+    return res.status(200).json(res.locals);
   }
 );
 

server/seed/seed.ts

@@ -28,7 +28,7 @@ const loadData = async () => {
       \`type\` varchar(40) DEFAULT NULL,
       PRIMARY KEY (\`id\`),
       KEY \`FOREIGN\` (\`email\`)
-    ) ENGINE = InnoDB AUTO_INCREMENT = 40 DEFAULT CHARSET = utf8mb4 COLLATE = utf8mb4_0900_ai_ci`;
+  ) ENGINE = InnoDB AUTO_INCREMENT = 40 DEFAULT CHARSET = utf8mb4 COLLATE = utf8mb4_0900_ai_ci`;
   try {
     console.log('🔹 Seeding createUserTable...');
     await connection.promise().query(createUserTable);
@@ -39,14 +39,23 @@ const loadData = async () => {
 
   const createQueriesTable: string = `CREATE TABLE 
   \`queries\` (
-  \`id\` int unsigned NOT NULL AUTO_INCREMENT,
-  \`email\` varchar(240) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL,
-  \`query\` text CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL,
-  \`db_link\` varchar(240) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL,
-  \`db_name\` varchar(40) NOT NULL,
-  \`exec_time\` double NOT NULL,
-  \`query_date\` date DEFAULT NULL,
-  \`name\` varchar(40) DEFAULT NULL,
+    \`id\` int unsigned NOT NULL AUTO_INCREMENT,
+    \`email\` varchar(240) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL,
+    \`query\` text CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL,
+    \`db_link\` varchar(240) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL,
+    \`db_name\` varchar(40) NOT NULL,
+    \`exec_time\` double NOT NULL,
+    \`query_date\` date DEFAULT NULL,
+    \`name\` varchar(40) DEFAULT NULL,
+    \`planning_time\` double DEFAULT NULL,
+    \`total_cost\` double NOT NULL,
+    \`actual_total_time\` double NOT NULL,
+    \`node_type\` char(40) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL,
+    \`relation_name\` varchar(240) NOT NULL,
+    \`plan_rows\` int NOT NULL,
+    \`actual_rows\` int NOT NULL,
+    \`shared_hit_blocks\` int DEFAULT NULL,
+    \`shared_read_blocks\` int DEFAULT NULL,
   PRIMARY KEY (\`id\`),
   KEY \`email_queries\` (\`email\`),
   CONSTRAINT \`email_queries\` FOREIGN KEY (\`email\`) REFERENCES \`users\` (\`email\`))`;
@@ -60,11 +69,11 @@ const loadData = async () => {
 
   const createSavedDbTable: string = `CREATE TABLE 
   \`saveddb\` (
-  \`id\` int unsigned NOT NULL AUTO_INCREMENT,
-  \`SaveName\` varchar(240) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL,
-  \`email\` varchar(240) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL,
-  \`SaveData\` text CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL,
-  \`TableData\` text,
+    \`id\` int unsigned NOT NULL AUTO_INCREMENT,
+    \`SaveName\` varchar(240) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL,
+    \`email\` varchar(240) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL,
+    \`SaveData\` text CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL,
+    \`TableData\` text,
   PRIMARY KEY (\`id\`),
   KEY \`email\` (\`email\`),
   CONSTRAINT \`email\` FOREIGN KEY (\`email\`) REFERENCES \`users\` (\`email\`))`;

src/assets/sidebarClose.svg

@@ -4,8 +4,6 @@ import axios, { AxiosResponse } from 'axios';
 import { NavLink, useNavigate } from 'react-router-dom';
 import { useNavStore } from '../../store/navStore';
 
-const linkbtn = 'mt-4 inline-block lg:mt-0 text-blue-200 hover:text-white mr-4';
-
 // Functions imported:
 import parseSql from '../../parse';