display saved queries from users works

Author: vyue013

server/controllers/postgresData.controller.ts

@@ -233,13 +233,6 @@ const postgresController = {
       };
       const formattedDate = `Date Run: ${now.toLocaleString('en-US', options)}`;
 
-      /************* mysql querymetrics db insert for saved query page retrieval ******/
-      // creating insert query for mysql query metrics db
-      //Todo: figure out how to get the email from the session, if an user logs in and then tests query performance
-      //const email = 'https://api.github.com/users/reva2024';
-      //const db_link = 'postgresql://postgres.gcfszuopjvbjtllgmenw:[email protected]:6543/postgres';
-      //const db_name = 'dbSpy';
-
       // Send query name, query string, date, and execution time on response
       res.locals.metrics = [namedQuery, queryStr, formattedDate, executionTime];
       res.locals.otherMetrics = otherMetrics;

server/controllers/save.controller.ts

@@ -32,14 +32,20 @@ interface GlobalError {
 const saveController = {
   getSavedQueries: async (req: Request, res: Response, next: NextFunction) => {
     log.info('[saveCtrl - getSavedQueries] Beginning to load saved queries');
+    const user = req.session.user;
+    if (!user) {
+      return res.status(401).json({ error: 'User not authenticated' });
+    }
+
     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, 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);
+      const userEmail = user.email;
+      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 WHERE email = ? ORDER BY id DESC`;
+      const queryVal = await pool.query(getQueries, [userEmail]);
       res.locals.savedQueries = queryVal;
       return next();
     } catch (err) {
+      console.error('getSavedQueries ERROR:', err);
       return next({
         log: 'An error occurred in saveController.getSavedQueries',
         message: 'Something went wrong in the loading process',

server/routes/save.router.ts

@@ -3,6 +3,8 @@
 import { Router, Response, Request } from 'express';
 import bodyParser from 'body-parser';
 import saveController from '../controllers/save.controller';
+import { isAuthenticated } from '../controllers/user.controller';
+
 const saveRouter = Router();
 
 // Apply bodyParser with a larger limit
@@ -13,6 +15,7 @@ const saveRouter = Router();
 //Load Saved Queries
 saveRouter.get(
   '/saved-queries',
+  isAuthenticated,
   saveController.getSavedQueries,
   (_req: Request, res: Response) => {
     return res.status(200).json(res.locals.savedQueries);

src/pages/ViewSavedQueries.tsx

@@ -54,19 +54,17 @@ const ViewSavedQueries: React.FC = () => {
     <>
       <div className="justify-space-around flex-auto justify-end border-2 border-black pr-2">
         <FeatureTab />
-        <div className="ml-20 pt-20 text-center">
-          <h1 className="mb-12 text-5xl font-bold tracking-tight text-yellow-400">
-            Saved Queries
-          </h1>
-        </div>
         <div
           className={`h-screen transition-all duration-300 ${
             toggleClicked ? 'ml-16' : 'ml-64'
           }`}
         >
-          {/* this wrap aligns the title 'Queries Saved w/ the table  together */}
+          <h1 className="flex items-center justify-center pt-20 text-5xl font-bold tracking-tight text-slate-700 dark:text-white">
+            Saved Queries
+          </h1>
+          {/* this wrap aligns the title 'Saved Queries w/ the table together */}
           <div className="mt-4 flex gap-x-8">
-            {savedQueries.length > 0 && (
+            {savedQueries.length > 0 ? (
               <div className="mt-8 w-full max-w-[1300px] shrink-0 overflow-x-auto px-4 text-white">
                 <table className="min-w-full table-fixed border-collapse border border-white text-white">
                   <thead>
@@ -164,6 +162,10 @@ const ViewSavedQueries: React.FC = () => {
                   </tbody>
                 </table>
               </div>
+            ) : (
+              <div className="flex h-full w-full items-center justify-center text-white">
+                No queries saved.
+              </div>
             )}
           </div>
         </div>