Jackhe/sqlite frontend (#18)

* all code for fetching sqlite database

* add example

dashboard/package.json

@@ -38,7 +38,8 @@
     "react-helmet-async": "^1.3.0",
     "react-hook-form": "^7.47.0",
     "react-router-dom": "^6.16.0",
-    "simplebar-react": "^3.2.4"
+    "simplebar-react": "^3.2.4",
+    "sql.js": "^1.9.0"
   },
   "devDependencies": {
     "@vitejs/plugin-react-swc": "^3.4.0",
@@ -57,6 +58,5 @@
     "vite": "^4.4.11",
     "vite-plugin-checker": "^0.6.2"
   },
-
   "homepage": "https://microsoft.github.io/netperf/dist"
 }

dashboard/src/app.jsx

@@ -3,17 +3,28 @@ import 'src/global.css';
 
 import { useScrollToTop } from 'src/hooks/use-scroll-to-top';
 
+import useSQLite from './hooks/use-sql-lite';
+
 import Router from 'src/routes/sections';
 import ThemeProvider from 'src/theme';
 
 // ----------------------------------------------------------------------
 
 export default function App() {
   useScrollToTop();
+  const { db, isLoading, error } = useSQLite("http://localhost:3030/netperf/dist/example.sqlite"); // TODO: replace with sqlite file from orphan branch.
+
+  let content = <div className="spinner"></div>;
+
+  if (error) {
+    content = <div>Error...</div>
+  } else if (db && !isLoading) {
+    content = <Router db = {db} />
+  }
 
   return (
     <ThemeProvider>
-      <Router />
+      {content}
     </ThemeProvider>
   );
 }

dashboard/src/global.css

@@ -1,2 +1,26 @@
 /* scrollbar */
 @import 'simplebar-react/dist/simplebar.min.css';
+
+/* Spinner Styles */
+.spinner {
+  border: 4px solid rgba(0, 0, 0, 0.1);
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  border-left-color: #09f;
+
+  animation: spin 1s ease infinite;
+  position: absolute; /* Positioning the spinner */
+  top: 50%; /* Center vertically */
+  left: 50%; /* Center horizontally */
+  transform: translate(-50%, -50%); /* Adjust the position correctly */
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

dashboard/src/hooks/use-db.js

@@ -0,0 +1,11 @@
+import initSqlJs from 'sql.js'
+
+const sqlPromise = initSqlJs({
+    locateFile: file => `https://cdnjs.cloudflare.com/ajax/libs/sql.js/1.9.0/${file}`
+});
+
+const dataPromise = fetch("http://localhost:3030/netperf/dist/example.sqlite").then(res => res.arrayBuffer()); // TODO: replace this with netperf/sqlite URL.
+const [SQL, buf] = await Promise.all([sqlPromise, dataPromise])
+const db = new SQL.Database(new Uint8Array(buf));
+
+export default db

dashboard/src/hooks/use-sql-lite.js

@@ -0,0 +1,42 @@
+import { useState, useEffect } from 'react';
+import initSqlJs from 'sql.js';
+
+const useSQLite = (dbUrl) => {
+  const [db, setDb] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    let dbInstance = null;
+
+    const loadDatabase = async () => {
+      try {
+        const SQL = await initSqlJs({
+          locateFile: file => `https://cdnjs.cloudflare.com/ajax/libs/sql.js/1.9.0/${file}`
+        });
+
+        const response = await fetch(dbUrl);
+        const buf = await response.arrayBuffer();
+        dbInstance = new SQL.Database(new Uint8Array(buf));
+        setDb(dbInstance);
+      } catch (err) {
+        setError(err);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    loadDatabase();
+
+    // Cleanup function to close the db when the component unmounts
+    return () => {
+      if (dbInstance) {
+        dbInstance.close();
+      }
+    };
+  }, []);
+
+  return { db, loading, error };
+};
+
+export default useSQLite;

dashboard/src/layouts/dashboard/config-navigation.jsx

@@ -31,6 +31,11 @@ const navConfig = [
     title: 'Handshakes Per Second',
     path: '/hps',
     icon: icon('ic_analytics'),
+  },
+  {
+    title: 'Detailed Analysis',
+    path: '/detailed',
+    icon: icon('ic_analytics'),
   }
   // {
   //   title: 'product',

dashboard/src/pages/detailed.jsx

@@ -0,0 +1,45 @@
+import React, { useState } from 'react';
+import { Helmet } from 'react-helmet-async';
+
+export default function DetailedPage(props) {
+   const { db } = props;
+   const [query, setQuery] = useState('');
+
+   const executeQuery = (query) => {
+      let values = db.exec(query);
+      for (let val of values.values()) {
+         console.log(val);
+      }
+   };
+
+   const handleInputChange = (event) => {
+      setQuery(event.target.value);
+   };
+
+   const handleQuerySubmit = () => {
+      executeQuery(query);
+   };
+
+   return (
+      <>
+         <Helmet>
+            <title> Detailed Page </title>
+         </Helmet>
+
+         <div>
+            <input 
+               type="text" 
+               value={query} 
+               onChange={handleInputChange} 
+               placeholder="Enter SQL query" 
+            />
+            <br></br>
+            <button onClick={handleQuerySubmit}>Execute Query</button>
+            <button>Download sqlite file</button>
+            <br></br>
+            Look in the browser console for the output. (Right click, select option 'inspect element', navigate to the console tab)
+            <br></br>
+         </div>
+      </>
+   );
+}

dashboard/src/routes/sections.jsx

@@ -13,10 +13,12 @@ export const UserPage = lazy(() => import('src/pages/user'));
 export const LoginPage = lazy(() => import('src/pages/login'));
 export const ProductsPage = lazy(() => import('src/pages/products'));
 export const Page404 = lazy(() => import('src/pages/page-not-found'));
+export const DetailedPage = lazy(() => import('src/pages/detailed'))
 
 // ----------------------------------------------------------------------
 
-export default function Router() {
+export default function Router(props) {
+  const { db } = props 
   const routes = useRoutes([
     {
       element: (
@@ -43,6 +45,10 @@ export default function Router() {
         {
           path: 'hps', 
           element: <HpsPage />,
+        },
+        {
+          path: 'Detailed', 
+          element: <DetailedPage db = {db} />,
         }
       ],
     },

dashboard/src/sections/overview/view/app-view.jsx

@@ -5,7 +5,6 @@ import Grid from '@mui/material/Unstable_Grid2';
 import Typography from '@mui/material/Typography';
 // import Iconify from 'src/components/iconify';
 
-import useFetchData from 'src/hooks/use-fetch-data';
 // import AppTasks from '../app-tasks';
 // import AppNewsUpdate from '../app-news-update';
 // import AppOrderTimeline from '../app-order-timeline';
@@ -22,21 +21,6 @@ import AppWidgetSummary from '../app-widget-summary';
 
 export default function AppView() {
 
-  const URL = "https://microsoft.github.io/netperf/data/secnetperf/dashboard.json";
-  const { data, isLoading, error } = useFetchData(URL);
-
-  if (isLoading) {
-    console.log("Loading...");
-  }
-
-  if (error) {
-    console.log("Error!");
-  }
-
-  if (data) {
-    console.log(data);
-  }
-
   return (
     <Container maxWidth="xl">
       <Typography variant="h3" sx={{ mb: 5 }}>