internal-13-ui-updates

src/js/engagement_view/src/App.tsx

@@ -2,32 +2,14 @@ import React, {useEffect} from 'react';
 import './LogIn.css';
 import {checkLogin, LogIn} from './Login';
 import {EngagementUx} from "./components/SideBar";
-import { RouteState, SetRouteState } from '../src/modules/GraphViz/CustomTypes'
-
-console.log("App loading");
+import Dashboard from "./components/Dashboard";
+import  PageNotFound  from "./components/PageNotFound";
+import UploadPlugin from "./components/UploadPlugin";
+import {redirectTo, defaultRouteState} from "../src/modules/GraphViz/routing";
 
 // Updates our react state, as well as localStorage state, to reflect the page
 // we should render
 
-const redirectTo = (
-    routeState: RouteState, 
-    setRouteState: SetRouteState, 
-    page_name: string
-    ) => {
-    setRouteState({
-        ...routeState,
-        curPage: page_name,
-    })
-    localStorage.setItem("grapl_curPage", page_name)
-}
-
-const defaultRouteState = (): RouteState => {
-    return {
-        curPage: localStorage.getItem("grapl_curPage") || "login",
-        lastCheckLoginCheck: Date.now(),
-    }
-}
-
 const Router = () => {
     // By default, load either the last page we were on, or the login page
     // if there is no last page
@@ -47,27 +29,50 @@ const Router = () => {
     });
 
     if (routeState.curPage === "login") {
-        console.log("routing to engagement_ux page");
+        console.log("routing to Dashboard");
         return (
-            <LogIn loginSuccess={
-                () => redirectTo(routeState, setRouteState, "engagement_ux")
-            }></LogIn>
+            <LogIn 
+                loginSuccess={
+                    () => redirectTo(routeState, setRouteState, "dashboard")
+                }
+            ></LogIn>
         )
     }
 
-    if (routeState.curPage === "engagement_ux") {
-        console.log("routing to login page");
-        return <EngagementUx/>
+    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)
+                }
+            }
+        /> 
     }
 
-    // #TODO: This should be a nice landing page explaining that something has gone
-    // wrong, and give a redirect back to the login page
+    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 <div>Invalid Page State</div>
-    // <PageNotFound />
+    return <PageNotFound />
 }
 
-
 export default function App() {
     console.log("App loaded");
     return (

src/js/engagement_view/src/LogIn.css

@@ -17,8 +17,8 @@
   color: white;
   text-transform: uppercase;
   font-weight: bold;
-  font-size: 90px;
-  margin: 3em 1.5em;
+  font-size: 5rem;
+  margin: 3em 1em;
   font-family: "Arial";
 }
 
@@ -36,14 +36,14 @@
 
 input{
   border: 1px solid darkgrey;
-  width: 100%;
+  width: 85%;
   opacity: 1;
   padding: .2em;
+  font-size: 1em;
 } 
 
 input, 
 .submitBtn{
-  font-size: 1.25em;
   margin: .5em;
 }
 
@@ -52,10 +52,15 @@ input,
   border: none;
   padding: .25em;
   color: white;
+  font-size: 1.15rem;
 }
 
-@media only screen and (max-width: 600px) {
+@media (max-width: 800px) {
   .backgroundImage {
     flex-direction: column;
   }
+  .grapl{
+    margin: .5em;
+  }
+  .formContainer{margin:.5em 2.5em;}
 }

src/js/engagement_view/src/Login.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import './LogIn.css';
 import {Field, Form, Formik} from "formik";
 import {LoginProps} from '../src/modules/GraphViz/CustomTypes';
-import {getAuthEdge} from './modules/GraphViz/engagement_edge/getEngagementEdge';
+import {getAuthEdge} from './modules/GraphViz/engagement_edge/getApiURLs';
 
 const engagement_edge = getAuthEdge();
 
@@ -42,7 +42,7 @@ export const LogIn = (props: LoginProps) => {
         <Form>
           <Field name="userName" type="text" placeholder="Username" /> <br/>
           <Field name="password" type="password" placeholder="Password"/> <br/>
-          <button className="s ubmitBtn"  type="submit">Submit</button>
+          <button className="submitBtn"  type="submit">Submit</button>
         </Form>
       </Formik>
 

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

@@ -0,0 +1,71 @@
+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";
+
+const useStyles = makeStyles( (theme: Theme) =>
+    createStyles({
+        root: {
+            display: "flex",
+        },
+        button: {
+            backgroundColor: "#42C6FF",
+            margin: "0.25rem",
+            padding: "0.25rem",
+        }, 
+        welcome: {
+            width:"70%",
+            textAlign:"center",
+            backgroundColor: "#373740",
+            height: "100vh",
+        },
+        nav: {
+            margin: "2rem",
+            width: "30%",
+            display: "flex",
+            flexDirection: "column",
+        },
+        dashboard:{
+            display: "flex",
+            flexDirection: "row",
+        }, 
+    })
+);
+
+export default function Dashboard(
+    {redirectTo}: any) {
+        const classes = useStyles();
+        return (
+            <> 
+                <GraplHeader redirectTo={redirectTo} displayBtn={false} />
+
+                <div className = { classes.dashboard}>
+                    <section className = { classes.nav }>
+                        <Button 
+                            className = {classes.button }
+                            onClick = { 
+                                (e) => {
+                                    redirectTo("engagementUX");
+                                } 
+                            }
+                        >
+                                Engagements
+                        </Button>
+
+                        <Button 
+                            className = {classes.button }
+                            onClick = { (e) => {
+                                redirectTo("uploadPlugin");
+                            } }
+                        >
+                            Upload Plugin
+                        </Button>
+                    </section>
+
+                    <section className = { classes.welcome }>
+                        <h1> Welcome, username </h1>
+                    </section>
+                </div>
+            </>
+        )
+}

src/js/engagement_view/src/components/GraphViz.tsx

@@ -3,7 +3,7 @@ import React, { useEffect, useRef } from 'react';
 import { ForceGraph2D } from 'react-force-graph';
 import * as d3 from "d3";
 import { BKDRHash, riskColor, calcNodeRgb , calcLinkColor} from "../modules/GraphViz/graphColoring/coloring.tsx";
-import { getEngagementEdge, retrieveGraph } from '../modules/GraphViz/graphQL/expandScope.tsx';
+import { retrieveGraph } from '../modules/GraphViz/graphQL/expandScope.tsx';
 import { mapLabel } from '../modules/GraphViz/graph/labels.tsx';
 import { nodeSize } from '../modules/GraphViz/calculations/node/nodeCalcs.tsx'
 import { calcLinkDirectionalArrowRelPos, calcLinkParticleWidth  } from '../modules/GraphViz/calculations/link/linkCalcs.tsx'
@@ -363,7 +363,6 @@ const GraphDisplay = ({lensName, setCurNode}: GraphDisplayProps) => {
                     ctx.fillRect(node.x - bckgDimensions[0] / 2, node.y - bckgDimensions[1] / 2, ...bckgDimensions);
                     ctx.textAlign = 'center';
                     ctx.textBaseline = 'middle';
-                    ctx.fillStyle = 'rgba(0, 0, 0, 0.8)';
                     ctx.fillStyle = 'white';
                     ctx.fillText(label, node.x, node.y);
 

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

@@ -104,7 +104,7 @@ function NodeTable({node}: NodeTableProps){
                 </TableBody>
                 </Table>
             </TableContainer>
-        ) || "no no"
+        ) 
 
 
 }

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

@@ -0,0 +1,39 @@
+import React from 'react';
+import {createStyles, makeStyles, Theme} from "@material-ui/core/styles";
+
+const useStyles = makeStyles((theme: Theme) =>
+    createStyles({
+        root: {
+            display: "flex",
+        },
+        button: {
+            backgroundColor: "#42C6FF",
+            margin: "0.25rem",
+            padding: "0.25rem",
+        }, 
+        errCode: {
+            fontSize: "2rem",
+            alignContent:"center",
+            justifyContent:"center",
+            fontColor: "#42C6FF",
+        },
+        notFound:{
+            fontSize: "1.25rem",
+            alignContent:"center",
+            justifyContent:"center",
+            fontColor: "white",
+        }, 
+    })
+);
+
+const PageNotFound = () => {
+    const classes = useStyles();
+    return(
+        <> 
+            <h1 className = {classes.errCode}> 404 </h1>
+            <h3 className = {classes.notFound}> Page Not Found </h3>        
+        </>
+    )
+}
+
+export default PageNotFound;