Routing (#131)

* added paging for graphQL endpoint

* added front-end pagination to plugins

* graphQL paging

* fixed duplicate pagination bug for lenses

* added styling for paging

* formatting

* Revert extra lenses

* Styling

* fixed any types

* revisions

* refactored custom routing to use react-router-dom HashRouter

* remove redirectTo function

* added logic to check if logged in

* removed unneeded props

* Improve performance of plugin page and fix warnings

src/js/engagement_view/package.json

@@ -12,19 +12,21 @@
     "@trendmicro/react-sidenav": "^0.5.0",
     "@types/jest": "^24.0.0",
     "@types/node": "^12.12.34",
-    "@types/react-dom": "^16.9.6",
+    "@types/react-dom": "^16.9.8",
+    "@types/react-router": "^5.1.8",
     "@types/react-router-dom": "^5.1.3",
     "@types/react-sidebar": "^3.0.0",
     "d3": "^5.15.1",
     "debug": "^2.6.9",
     "formik": "^2.1.4",
     "gulp": "^4.0.2",
+    "history": "^5.0.0",
     "minimist": "^1.2.3",
     "prettier": "2.0.3",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-force-graph": "^1.32.1",
-    "react-router-dom": "^5.1.2",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.0",
     "semantic-ui-react": "^0.88.2",
     "typescript": "~3.7.2"

src/js/engagement_view/src/App.tsx

@@ -1,83 +1,26 @@
-import React, {useEffect} from 'react';
+import React from 'react';
 import './LogIn.css';
-import {checkLogin, LogIn} from './Login';
+import {LogIn} from './Login';
 import {EngagementUx} from "./components/SideBar";
 import Dashboard from "./components/Dashboard";
-import  PageNotFound  from "./components/PageNotFound";
 import UploadPlugin from "./components/UploadPlugin";
-import {redirectTo, defaultRouteState} from "../src/modules/GraphViz/routing";
+import {HashRouter, Route, Switch} from 'react-router-dom';
 
 // Updates our react state, as well as localStorage state, to reflect the page
 // we should render
 
-const Router = () => {
-    // By default, load either the last page we were on, or the login page
-    // if there is no last page
-    const [routeState, setRouteState] = React.useState(defaultRouteState())
-
-    useEffect(() => {
-        if (routeState.curPage !== "login") {
-            if (Date.now() - routeState.lastCheckLoginCheck > 1000) {
-                checkLogin()
-                    .then((loggedIn) => {
-                        console.log('Not logged in, redirecting.');
-                        if (!loggedIn && routeState.curPage !== "login") {
-                            redirectTo(routeState, setRouteState, "login")
-                        }
-                    })
-            }}
-    });
-
-    if (routeState.curPage === "login") {
-        console.log("routing to Dashboard");
-        return (
-            <LogIn 
-                loginSuccess={
-                    () => redirectTo(routeState, setRouteState, "dashboard")
-                }
-            ></LogIn>
-        )
-    }
-
-    if (routeState.curPage === "engagementUX") {
-        console.log("Routing to EngagementUX page");
-        return <EngagementUx redirectTo={
-            (pageName: string) => {
-                redirectTo(routeState, setRouteState, pageName)
-            }
-        }/>
-    }
-
-    if(routeState.curPage === "dashboard"){
-        console.log("Routing to Dashboard");
-        return <Dashboard 
-            redirectTo = {
-                (pageName: string) => {
-                    redirectTo(routeState, setRouteState, pageName)
-                }
-            }
-        /> 
-    }
-
-    if(routeState.curPage === "uploadPlugin"){
-        console.log("Routing to Upload Plugin");
-        return <UploadPlugin 
-            redirectTo = {
-                (pageName: string) => {
-                    redirectTo(routeState, setRouteState, pageName)
-                }
-            }
-        /> 
-    }
-    console.warn("Invalid Page State");
-    return <PageNotFound />
-}
-
 export default function App() {
     console.log("App loaded");
     return (
         <>
-            <Router/>
+        <HashRouter>
+            <Switch>
+                <Route exact path = "/login" component = {LogIn}/>
+                <Route exact path = "/" component = {Dashboard}/>
+                <Route exact path = "/plugins" component = {UploadPlugin}/>
+                <Route exact path = "/engagements" component = {EngagementUx}/>
+            </Switch>
+        </HashRouter>
         </>
     )
 }

src/js/engagement_view/src/Login.tsx

@@ -17,22 +17,23 @@ export const checkLogin = async () => {
     return body['success'] === 'True';
 };
 
-export const LogIn = (props: LoginProps) => {
+export const LogIn = (_: LoginProps) => {
   return (
     <div className = "backgroundImage">
       <div className="grapl"> Grapl </div>
       <div className = "formContainer">
       <Formik
         initialValues={{ userName: "", password: "" }}
         onSubmit={async values => {
+          console.log("logging in");
           const password = await sha256WithPepper(
             values.userName, values.password
           );
 
           const loginSuccess = login(values.userName, password);
 
           if (loginSuccess) {
-            props.loginSuccess();
+            window.history.replaceState('/login', "", "/")
             console.log("Logged in");
           } else {
             console.warn("Login failed!")
@@ -94,11 +95,12 @@ const login = async (username: string, password: string) => {
           });
 
           const body = await res.json();
+          console.log("body", body);
           return body['success'] === 'True';
         } catch (e) {
           console.log(e);
           return false
       }
     };
 
-// export default LogIn;
+export default LogIn;

src/js/engagement_view/src/components/Dashboard.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import Button from "@material-ui/core/Button";
 import {createStyles, makeStyles, Theme} from "@material-ui/core/styles";
 import GraplHeader from "./reusableComponents/GraplHeader";
+import {Link} from 'react-router-dom';
 
 const useStyles = makeStyles( (theme: Theme) =>
     createStyles({
@@ -29,37 +30,30 @@ const useStyles = makeStyles( (theme: Theme) =>
             display: "flex",
             flexDirection: "row",
         }, 
+        link:{
+            color: "white",
+            textDecoration: "none"
+        }
     })
 );
 
-export default function Dashboard(
-    {redirectTo}: any) {
+export default function Dashboard() {
         const classes = useStyles();
         return (
             <> 
-                <GraplHeader redirectTo={redirectTo} displayBtn={false} />
+                <GraplHeader displayBtn={false} />
 
                 <div className = { classes.dashboard}>
                     <section className = { classes.nav }>
-                        <Button 
-                            className = {classes.button }
-                            onClick = { 
-                                (e) => {
-                                    redirectTo("engagementUX");
-                                } 
-                            }
-                        >
-                                Engagements
+
+                        <Button  className = {classes.button }>
+                            <Link to = "/engagements" className = {classes.link}> Engagements </Link>
                         </Button>
 
-                        <Button 
-                            className = {classes.button }
-                            onClick = { (e) => {
-                                redirectTo("uploadPlugin");
-                            } }
-                        >
-                            Upload Plugin
+                        <Button  className = {classes.button }>
+                            <Link to = "/plugins" className = {classes.link}> Upload Plugin </Link>
                         </Button>
+
                     </section>
 
                     <section className = { classes.welcome }>

src/js/engagement_view/src/components/NodeTable.tsx

@@ -7,21 +7,24 @@ import TableContainer from '@material-ui/core/TableContainer';
 import TableHead from '@material-ui/core/TableHead';
 import TableRow from '@material-ui/core/TableRow';
 import { mapEdgeProps } from '../modules/GraphViz/graph/graph_traverse';
-import {mapNodeProps} from './GraphViz';
-import {Node} from "../modules/GraphViz/CustomTypes"
+import { mapNodeProps } from './GraphViz';
+import { Node } from "../modules/GraphViz/CustomTypes"
 
 
 const useStyles = makeStyles({
     root: {
-        fontSize: "1em"
+        fontSize: ".75em"
     },
-    table: {
+    nodeTable: {
         minWidth: 450,
     }, 
     tableHeader: {
-        fontSize: "18px", 
-        color: "#EAFDFF", 
-    }
+        fontSize: ".85rem", 
+        backgroundColor: "#595959"
+    }, 
+    nodeTableData: {
+        fontSize: ".75rem"
+    },
 });
 
 function innerTable(node: Node, styles: any) {
@@ -53,10 +56,9 @@ type NodeTableProps = {
 }
 
 function NodeTable({node}: NodeTableProps){
-    console.log("Displaying node: ", node);
     const classes = useStyles();
     const hidden = new Set(
-        ['id', 'dgraph.type', '__indexColor', 'risks','uid', 'scope', 'name', 'nodeType', 'nodeLabel', 'x', 'y', 'index', 'vy', 'vx', 'fx', 'fy']
+        ['id', 'dgraph.type', 'dgraph_type', '__indexColor', 'risks','uid', 'scope', 'name', 'nodeType', 'nodeLabel', 'x', 'y', 'index', 'vy', 'vx', 'fx', 'fy']
     );
 
     mapEdgeProps(node, (edgeName: string, _neighbor: Node) => {
@@ -84,7 +86,7 @@ function NodeTable({node}: NodeTableProps){
 
         return(
             <TableContainer>
-                <Table className={classes.table}>
+                <Table className={classes.nodeTable}>
                 {
                     innerTable(node, classes)
                 }
@@ -95,8 +97,8 @@ function NodeTable({node}: NodeTableProps){
 
                                 return(
                                     <TableRow>
-                                        <TableCell align="left"><b>{key}</b></TableCell>
-                                        <TableCell align="left">{value as any}</TableCell>
+                                        <TableCell className = {classes.nodeTableData} align="left"><b>{key}</b></TableCell>
+                                        <TableCell className = {classes.nodeTableData} align="left">{value as any}</TableCell>
                                     </TableRow>
                                 ) 
                             })

src/js/engagement_view/src/components/PageNotFound.tsx

@@ -26,14 +26,14 @@ const useStyles = makeStyles((theme: Theme) =>
     })
 );
 
-const PageNotFound = () => {
-    const classes = useStyles();
-    return(
-        <> 
-            <h1 className = {classes.errCode}> 404 </h1>
-            <h3 className = {classes.notFound}> Page Not Found </h3>        
-        </>
-    )
-}
+// const PageNotFound = () => {
+//     const classes = useStyles();
+//     return(
+//         <> 
+//             <h1 className = {classes.errCode}> 404 </h1>
+//             <h3 className = {classes.notFound}> Page Not Found </h3>        
+//         </>
+//     )
+// }
 
-export default PageNotFound;
+// export default PageNotFound;

src/js/engagement_view/src/components/SideBar.tsx

@@ -13,6 +13,7 @@ import KeyboardArrowLeftIcon from '@material-ui/icons/KeyboardArrowLeft';
 import Button from "@material-ui/core/Button";
 import { Node } from "../modules/GraphViz/CustomTypes";
 import Home from '@material-ui/icons/Home';
+import {Link} from 'react-router-dom'
 
 const drawerWidth = 500;
 
@@ -80,8 +81,7 @@ const useStyles = makeStyles((theme: Theme) =>
     },
     lensName:{
       color:"#EAFDFF",
-      fontSize: "2rem", 
-      margin: "10px 15px 0px 0px",
+      fontSize: "1.5rem", 
     },
     header:{
       fontSize: "35px",
@@ -93,18 +93,21 @@ const useStyles = makeStyles((theme: Theme) =>
     },
     close:{
       color:"#42C6FF",
+    },
+    link: {
+      color: "#42C6FF", 
+      textDecoration: "none"
     }
   })
 );
 
 type SideBarProps = {
   setLens: (lens: string) => void,
   curLens: string,
-  curNode: Node | null,
-  redirectTo: (pageName: string) => void,
+  curNode: Node | null
 }
 
-export default function SideBar({setLens, curLens, curNode, redirectTo}: SideBarProps) {
+export default function SideBar({setLens, curLens, curNode}: SideBarProps) {
   const classes = useStyles();
 
   const [open, setOpen] = React.useState(true);
@@ -146,14 +149,7 @@ export default function SideBar({setLens, curLens, curNode, redirectTo}: SideBar
             >
               <b className={classes.header}> GRAPL </b>
             </Typography>
-            <Button 
-                className = {classes.button }
-                onClick = { (e) => {
-                    redirectTo("dashboard");
-                } }
-            >
-                <Home/>
-            </Button>
+                <Link to = "/" className = {classes.link}><Home/></Link>
           </div>
 
         </Toolbar>
@@ -210,7 +206,7 @@ const defaultEngagementUxState = (): EngagementUxState => {
   }
 }
 
-export const EngagementUx = ({redirectTo}: any) => {
+export const EngagementUx = () => {
     const [state, setState] = React.useState(defaultEngagementUxState());
 
     return (
@@ -224,7 +220,6 @@ export const EngagementUx = ({redirectTo}: any) => {
                 }
                 curLens={state.curLens}
                 curNode={state.curNode}
-                redirectTo={redirectTo}
             />
 
             <GraphDisplay