Skip to content

Commit

Permalink
Merge pull request #20 from jpelbertrios/gh-7-Add/ViewGraph-error-han…
Browse files Browse the repository at this point in the history 
…dling

Gh 07 add/view graph error handling
  • Loading branch information
@macenturalxl1
macenturalxl1 committed Sep 15, 2020
2 parents aea7907 + 6c91f2d commit 875583f
Show file tree
Hide file tree
Showing 15 changed files with 1,087 additions and 497 deletions.
883 changes: 727 additions & 156 deletions ui/package-lock.json
View file

Large diffs are not rendered by default.

16 changes: 8 additions & 8 deletions ui/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
"server": "node server/middleware.js",
"build": "react-scripts build",
"test": "jest \"-- --coverage\"",
"testwatch": "jest --watchAll",
"watch": "jest --watchAll",
"deploy": "aws s3 sync build/ s3://kai-ui",
"eject": "react-scripts eject"
},
Expand All @@ -19,14 +19,14 @@
"@material-ui/lab": "^4.0.0-alpha.56",
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/user-event": "^7.2.1",
"@types/node": "^12.12.54",
"@types/react": "^16.9.46",
"@types/node": "^12.12.58",
"@types/react": "^16.9.49",
"@types/react-dom": "^16.9.8",
"axios": "^0.19.2",
"body-parser": "^1.19.0",
"express": "^4.17.1",
"json": "^9.0.6",
"material-table": "^1.68.1",
"material-table": "^1.69.0",
"material-ui-dropzone": "^3.4.0",
"npm-check-updates": "^7.1.1",
"react": "^16.13.1",
Expand All @@ -38,20 +38,20 @@
"react-testing-library": "latest"
},
"devDependencies": {
"@babel/preset-env": "^7.11.0",
"@babel/preset-env": "^7.11.5",
"@babel/preset-react": "^7.10.4",
"@testing-library/react": "^9.5.0",
"@types/body-parser": "^1.19.0",
"@types/enzyme": "^3.10.5",
"@types/enzyme": "^3.10.6",
"@types/enzyme-adapter-react-16": "^1.0.6",
"@types/express": "^4.17.7",
"@types/express": "^4.17.8",
"@types/jest": "26.0.5",
"@types/react-router-dom": "^5.1.5",
"axios-mock-adapter": "^1.18.2",
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
"concurrently": "^5.3.0",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.3",
"enzyme-adapter-react-16": "^1.15.4",
"enzyme-to-json": "^3.5.0",
"fetch-mock": "^9.10.7",
"jest": "^24.9.0",
Expand Down
1 change: 1 addition & 0 deletions ui/prettier.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,4 +5,5 @@ module.exports = {
semi: true,
singleQuote: true,
bracketSpacing: true,
eslintIntegration: true,
}
52 changes: 34 additions & 18 deletions ui/src/components/AddGraph/AddGraph.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,17 @@
import React from 'react';
import { Button, Container, CssBaseline, Dialog, DialogContent, Grid, IconButton, makeStyles, Slide, TextField } from '@material-ui/core';
import { Button, Container, CssBaseline, Dialog, DialogContent, Grid, IconButton, makeStyles, Slide, TextField, Tooltip, Zoom } from '@material-ui/core';
import { Schema } from '../../domain/schema';
import { Notifications } from '../../domain/notifications';
import { CreateGraphRepo } from '../../rest/repositories/create-graph-repo';
import { Alert } from '@material-ui/lab';
import InsertDriveFileOutlinedIcon from '@material-ui/icons/InsertDriveFileOutlined';
import AddCircleOutlineOutlinedIcon from '@material-ui/icons/AddCircleOutlineOutlined';
import { DropzoneArea } from 'material-ui-dropzone';
import ClearIcon from '@material-ui/icons/Clear';
import { TransitionProps } from '@material-ui/core/transitions';
import Toolbar from '@material-ui/core/Toolbar';
import { AlertType, NotificationAlert } from '../Errors/NotificationAlert';
import AttachFileIcon from '@material-ui/icons/AttachFile';
import ClearIcon from '@material-ui/icons/Clear';

interface IState {
dialogIsOpen: boolean;
Expand Down Expand Up @@ -50,15 +52,9 @@ export default class AddGraph extends React.Component<{}, IState> {

private async submitNewGraph() {
const { graphName, schemaJson } = this.state.newGraph;
const errors: Notifications = new Notifications();
if (graphName.length === 0) {
errors.addError('Graph Name is empty');
}

const schema = new Schema(schemaJson);
const schemaErrors: Notifications = schema.validation();
errors.concat(schemaErrors);


const errors: Notifications = schema.validation();
if (errors.isEmpty()) {
try {
await new CreateGraphRepo().create(graphName, [], schema);
Expand All @@ -68,7 +64,7 @@ export default class AddGraph extends React.Component<{}, IState> {
this.setState({ outcome: AlertType.FAILED, outcomeMessage: `Failed to Add '${graphName}' Graph: ${e.message}` });
}
} else {
this.setState({ errors: errors });
this.setState({ errors });
}
}

Expand Down Expand Up @@ -101,6 +97,11 @@ export default class AddGraph extends React.Component<{}, IState> {
}
}

private disableSubmitButton(): boolean {
const { graphName, schemaJson} = this.state.newGraph;
return !graphName || !schemaJson;
}

public render() {

const openDialogBox = () => {
Expand All @@ -121,7 +122,7 @@ export default class AddGraph extends React.Component<{}, IState> {
<Grid container spacing={2}>
{this.state.outcome && <NotificationAlert alertType={this.state.outcome} message={this.state.outcomeMessage} />}
{!this.state.errors.isEmpty() && (
<Alert variant="outlined" severity="error">Error(s): {this.state.errors.errorMessage()}</Alert>
<NotificationAlert alertType={AlertType.FAILED} message={`Error(s): ${this.state.errors.errorMessage()}`} />
)}
<Grid item xs={12}>
<TextField
Expand All @@ -144,11 +145,22 @@ export default class AddGraph extends React.Component<{}, IState> {
/>
</Grid>
<Grid item xs={12} container direction="row" justify="flex-end" alignItems="center">
<IconButton onClick={openDialogBox}>
<InsertDriveFileOutlinedIcon />
</IconButton>

<Dialog
<Tooltip TransitionComponent={Zoom} title='Add Schema From File'>
<IconButton id='attach-file-button' onClick={openDialogBox}>
<AttachFileIcon />
</IconButton>
</Tooltip>
<Tooltip TransitionComponent={Zoom} title='Clear Schema'>
<IconButton onClick={() => this.setState({
newGraph: {
...this.state.newGraph,
schemaJson: '',
},
})}>
<ClearIcon />
</IconButton>
</Tooltip>
<Dialog id='dropzone'
open={this.state.dialogIsOpen}
TransitionComponent={Transition}
keepMounted
Expand All @@ -158,7 +170,7 @@ export default class AddGraph extends React.Component<{}, IState> {
aria-describedby="alert-dialog-slide-description"
>
<Grid container direction="row" justify="flex-end" alignItems="flex-start">
<IconButton onClick={closeDialogBox}>
<IconButton id='close-dropzone-button' onClick={closeDialogBox}>
<ClearIcon />
</IconButton>
</Grid>
Expand Down Expand Up @@ -205,13 +217,17 @@ export default class AddGraph extends React.Component<{}, IState> {
</div>
</Container>
</Grid>

<Grid container style={{ margin: 10 }} direction="row" justify="center" alignItems="center">
<Button
id='add-new-graph-button'
onClick={() => { this.submitNewGraph(); }}
startIcon={<AddCircleOutlineOutlinedIcon />}
type="submit"
variant="outlined"
color="primary"
className={this.classes.submit}
disabled={this.disableSubmitButton()}
>
Add Graph
</Button>
Expand Down
14 changes: 0 additions & 14 deletions ui/src/components/Errors/PageNotFound.tsx
View file

This file was deleted.

87 changes: 37 additions & 50 deletions ui/src/components/Navigation/NavigationAppbar.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
import React, { useState } from 'react';
import React from 'react';
import { NavLink, withRouter } from 'react-router-dom';
import Routes from './Routes';
import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
import { AppBar, Toolbar, Typography, MenuList, MenuItem, ListItemText,Drawer, Divider, ListItem, List, ListItemIcon, Avatar, ListItemAvatar} from '@material-ui/core';
import { green } from '@material-ui/core/colors';
import { AppBar, Toolbar, Typography, ListItemText, Drawer, Divider, ListItem, List, ListItemIcon, Avatar, ListItemAvatar } from '@material-ui/core';
import AddCircleOutlineIcon from '@material-ui/icons/AddCircleOutline';
import VisibilityIcon from '@material-ui/icons/Visibility';
import LocalLibraryIcon from '@material-ui/icons/LocalLibrary';
Expand All @@ -17,7 +16,7 @@ const useStyles = makeStyles((theme: Theme) =>
marginRight: theme.spacing(2),
},
title: {
marginRight:20,
marginRight: 20,
},
drawer: {
width: 240,
Expand All @@ -29,11 +28,11 @@ const useStyles = makeStyles((theme: Theme) =>
},
drawerPaper: {
width: drawerWidth,
},
},
drawerContainer: {
overflow: 'auto',
overflow: 'auto',
},
// necessary for content to be below app bar
// necessary for content to be below app bar
toolbar: theme.mixins.toolbar,
drawerHeader: {
display: 'flex',
Expand All @@ -56,8 +55,8 @@ const useStyles = makeStyles((theme: Theme) =>
boxShadow: "0px 0px 0px 0px",
zIndex: theme.zIndex.drawer + 1,
},
listItem: {
color: '#696666'
listItem: {
color: '#696666'
},
listItemText: {
'& span, & svg': {
Expand All @@ -68,88 +67,76 @@ const useStyles = makeStyles((theme: Theme) =>
);

const NavigationAppbar: React.FC = (props: any) => {

const classes = useStyles();
const [isOpen, setIsOpen] = useState(false);
const toggleDrawer = (open: boolean) => (
event: React.KeyboardEvent | React.MouseEvent,
) => {
if (
event.type === 'keydown' &&
((event as React.KeyboardEvent).key === 'Tab' ||
(event as React.KeyboardEvent).key === 'Shift')
) {
return;
}

setIsOpen(open);
};
const classes = useStyles();

const activeRoute = (routeName: any) => {
return props.location.pathname === routeName ? true : false;
}

const getSideNavIcon = (sidebarName: any) => {
switch(sidebarName) {
case 'Add Graph':
return (<AddCircleOutlineIcon/>);
case 'View Graph':
return (<VisibilityIcon/>);
case 'User Guide':
return (<LocalLibraryIcon/>);
default:
return null;
switch (sidebarName) {
case 'Add Graph':
return (<AddCircleOutlineIcon />);
case 'View Graphs':
return (<VisibilityIcon />);
case 'User Guide':
return (<LocalLibraryIcon />);
default:
return null;
}
}
}

return (
<div className={classes.root}>
<AppBar position="fixed" className={classes.appBar}>
<Toolbar>
<Typography variant="h6" className={classes.title} >
Graph As Service
</Typography>
</Toolbar>
</Toolbar>
</AppBar>

<Drawer
className={classes.drawer}
variant="permanent"
classes={{
paper: classes.drawerPaper,
paper: classes.drawerPaper,
}}>
<Toolbar />
<Toolbar />
<div className={classes.drawerContainer}>
<List>
<ListItem className={classes.listItem} >
<ListItemAvatar>
<Avatar>
<PersonIcon/>
<PersonIcon />
</Avatar>
</ListItemAvatar>
<ListItemText primary="User" secondary="someuser@mail.com"/>

<ListItemText primary="User" secondary="someuser@mail.com" />
</ListItem>
</List>
<Divider />
<Divider />
<List >
{Routes.map((prop, key) => {
return (
<NavLink to={prop.path}
style={{ color: 'inherit', textDecoration: 'inherit'}}
key={key}>
style={{ color: 'inherit', textDecoration: 'inherit' }}
key={key}>
<ListItem className={classes.listItem} selected={activeRoute(prop.path)}>
<ListItemIcon>
{getSideNavIcon(prop.sidebarName)}
</ListItemIcon>
<ListItemText classes={{primary: classes.listItemText}} primary={prop.sidebarName}/>
<ListItemIcon>
{getSideNavIcon(prop.sidebarName)}
</ListItemIcon>
<ListItemText classes={{ primary: classes.listItemText }} primary={prop.sidebarName} />
</ListItem>
</NavLink>
);
})}
</List>
<Divider />
<Divider />
</div>
</Drawer>

</div>
);
};
Expand Down
4 changes: 1 addition & 3 deletions ui/src/components/Navigation/Routes.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,6 @@
import ViewGraph from "../ViewGraph/ViewGraph";
import AddGraph from "../AddGraph/AddGraph";
import UserGuide from "../UserGuide/UserGuide";
import AddCircleOutlineIcon from '@material-ui/icons/AddCircleOutline';
import VisibilityIcon from '@material-ui/icons/Visibility';

const Routes = [
{
Expand All @@ -13,7 +11,7 @@ const Routes = [
},
{
path: '/ViewGraph',
sidebarName: 'View Graph',
sidebarName: 'View Graphs',
component: ViewGraph
},
{
Expand Down
Loading

0 comments on commit 875583f

Please sign in to comment.