diff --git a/components/Dashboard/Card.js b/components/Dashboard/Card.js index bdb8423..12fcb24 100644 --- a/components/Dashboard/Card.js +++ b/components/Dashboard/Card.js @@ -62,6 +62,9 @@ function Card({ bridge, index }) { Total Requests: + + State: + @@ -77,6 +80,10 @@ function Card({ bridge, index }) { {bridge.eventCount || '0'} + + + {bridge.active ? 'Active' : 'Deactivated'} + @@ -84,12 +91,18 @@ function Card({ bridge, index }) { - {/* TODO: Should be request id */} - - + {bridge.eventId ? ( + + + View Events + + + ) : ( + View Events - + )} + @@ -107,6 +120,8 @@ Card.propTypes = { updatedAt: PropTypes.string.isRequired, eventCount: PropTypes.number.isRequired, completedAt: PropTypes.string, + active: PropTypes.bool.isRequired, + eventId: PropTypes.number.isRequired, }).isRequired, index: PropTypes.number.isRequired, }; diff --git a/components/Editor/ActionsDialog/index.js b/components/Editor/ActionsDialog/index.js index f0d8760..39aecb7 100644 --- a/components/Editor/ActionsDialog/index.js +++ b/components/Editor/ActionsDialog/index.js @@ -34,6 +34,20 @@ function ActionsDialog({ const router = useRouter(); const handleAbort = () => { + api.patch('/events/abort', { + bridge_id: id, + }) + .then((res) => { + if (res.status === 200) { + setSuccessOpen(true); + } + }) + .catch(() => { + setErrorOpen(true); + setTimeout(() => { + setErrorOpen(false); + }, 2500); + }); }; const handleActivate = async () => { diff --git a/components/Editor/index.js b/components/Editor/index.js index 0029c1e..fe5a874 100644 --- a/components/Editor/index.js +++ b/components/Editor/index.js @@ -52,7 +52,6 @@ function Editor({ bridge, isEditView }) { method, headers, environmentVariables, - events, data, title, } = bridge; @@ -99,7 +98,7 @@ function Editor({ bridge, isEditView }) { const generatePayload = (values) => ({ active: values.active, title: values.title, - method: values.method, + http_method: values.method, outbound_url: values.outboundUrl, retries: values.retries, delay: values.delay, @@ -140,7 +139,7 @@ function Editor({ bridge, isEditView }) { return ( <> - + diff --git a/components/Event/EventStatus.js b/components/Event/EventStatus.js index 65072ee..7247ddd 100644 --- a/components/Event/EventStatus.js +++ b/components/Event/EventStatus.js @@ -18,10 +18,11 @@ const useStyles = makeStyles({ }); function EventStatus({ - eventCompleted, aborted, outbound, eventId, + eventCompleted, eventAborted, outbound, eventId, }) { const classes = useStyles(); const [completed, setCompleted] = useState(eventCompleted); + const [aborted, setAborted] = useState(eventAborted); const [buttonDisable, setButtonDisable] = useState(false); const { statusCode, message } = (outbound.length >= 1 && outbound.slice(-1)[0].response); @@ -33,7 +34,14 @@ function EventStatus({ const handleAbort = async () => { setButtonDisable(true); - await api.patch(`/events/${eventId}/abort`); + await api.patch('/events/abort', { + event_id: eventId, + }) + .then((res) => { + if (res.status === 200) { + setAborted(true); + } + }); setCompleted(true); }; @@ -91,7 +99,7 @@ function EventStatus({ export default EventStatus; EventStatus.propTypes = { - aborted: PropTypes.bool.isRequired, + eventAborted: PropTypes.bool.isRequired, eventCompleted: PropTypes.bool.isRequired, outbound: PropTypes.array.isRequired, eventId: PropTypes.number.isRequired, diff --git a/components/Sidebar/ListItem.js b/components/Sidebar/ListItem.js index 00e8625..0da5561 100644 --- a/components/Sidebar/ListItem.js +++ b/components/Sidebar/ListItem.js @@ -2,25 +2,34 @@ import { ListItem as MUIListItem, ListItemText, Typography, + Link, } from '@material-ui/core'; import PropTypes from 'prop-types'; function ListItem({ - completedAt, statusCode, completed, + completed, completedAt, statusCode, eventId, }) { const timestamp = new Date(completedAt).toDateString(); + let message = completed ? `${timestamp}` : 'Ongoing'; + if (statusCode) { + message += ` - ${statusCode}`; + } return ( + - - {completed ? `${timestamp} - ${statusCode}` : 'Ongoing' } - + + + {message} + + + ); } @@ -31,4 +40,5 @@ ListItem.propTypes = { statusCode: PropTypes.number.isRequired, completedAt: PropTypes.string.isRequired, completed: PropTypes.bool.isRequired, + eventId: PropTypes.number.isRequired, }; diff --git a/components/Sidebar/index.js b/components/Sidebar/index.js index 2bcb1a9..2d46a78 100644 --- a/components/Sidebar/index.js +++ b/components/Sidebar/index.js @@ -1,4 +1,5 @@ /* eslint-disable react/forbid-prop-types */ +import React, { useEffect, useState } from 'react'; import PropTypes from 'prop-types'; import { Divider, @@ -11,6 +12,7 @@ import { } from '@material-ui/core'; import ListItem from './ListItem'; +import Loader from '../Loader'; const useStyles = makeStyles(() => ({ title: { @@ -21,21 +23,27 @@ const useStyles = makeStyles(() => ({ position: 'relative', }, drawer: { - width: 180, + width: '180px', }, drawerPaper: { width: 180, }, - drawerContainer: { - overflow: 'auto', + drawerPaperNoOverflow: { + width: 180, + overflow: 'hidden', }, toolbar: { minHeight: 46, }, })); -function Sidebar({ events, title }) { +function Sidebar({ events, bridgeId, title }) { const classes = useStyles(); + const [mounted, setMounted] = useState(false); + + useEffect(() => { + setTimeout(() => setMounted(true), 1000); + }, []); return (
@@ -43,23 +51,31 @@ function Sidebar({ events, title }) { className={classes.drawer} variant="permanent" classes={{ - paper: classes.drawerPaper, + paper: mounted ? classes.drawerPaper : classes.drawerPaperNoOverflow, }} > -
+
- + {title || 'Untitled'} - {events.map((event) => ( - - ))} + {!mounted + ? ( + + ) : ( + events && events.map((event) => ( + + )) + )}
@@ -72,4 +88,5 @@ export default Sidebar; Sidebar.propTypes = { events: PropTypes.array.isRequired, title: PropTypes.string.isRequired, + bridgeId: PropTypes.number.isRequired, }; diff --git a/components/shared/dashboard/Navbar/index.js b/components/shared/dashboard/Navbar/index.js index 60c55ae..3cbb48e 100644 --- a/components/shared/dashboard/Navbar/index.js +++ b/components/shared/dashboard/Navbar/index.js @@ -1,10 +1,10 @@ import React, { - useState, useEffect, useRef, + useRef, } from 'react'; import { AppBar, Toolbar, Typography, IconButton, makeStyles, Link, } from '@material-ui/core'; -import { FaPlus, FaArrowDown } from 'react-icons/fa'; +import { FaPlus } from 'react-icons/fa'; import { AccountCircle } from '@material-ui/icons'; import Menu from './Menu'; @@ -47,51 +47,51 @@ const useStyles = makeStyles((theme) => ({ export default function Navbar() { const classes = useStyles(); - const [bridges, setBridges] = useState([]); - const [width, setWidth] = useState(null); + // const [bridges, setBridges] = useState([]); + // const [width, setWidth] = useState(null); const { logout } = useAuth(); - const bridgeMenuTransforms = { - anchor: { - vertical: 'bottom', - horizontal: 'center', - }, - transform: { - vertical: 'top', - horizontal: 'center', - }, - }; + // const bridgeMenuTransforms = { + // anchor: { + // vertical: 'bottom', + // horizontal: 'center', + // }, + // transform: { + // vertical: 'top', + // horizontal: 'center', + // }, + // }; - const menuUseEffect = () => { - let cancelled = false; - const getBridges = async () => { - // await axios.get('http://localhost:3001/bridges') - // if (!cancelled) - // .then((res) => { - // setBridges(res.data); - // }); - setBridges([ - 'Bridge 1', - 'Bridge 2', - 'Bridge 3', - ]); - }; + // const menuUseEffect = () => { + // let cancelled = false; + // const getBridges = async () => { + // // await axios.get('http://localhost:3001/bridges') + // // if (!cancelled) + // // .then((res) => { + // // setBridges(res.data); + // // }); + // setBridges([ + // 'Bridge 1', + // 'Bridge 2', + // 'Bridge 3', + // ]); + // }; - getBridges(); - // eslint-disable-next-line no-unused-vars - return () => { cancelled = true; }; - }; + // getBridges(); + // // eslint-disable-next-line no-unused-vars + // return () => { cancelled = true; }; + // }; // Determine the width of the 'Dashboard' link & // move the brigdes dropdown to center of the screen const ref = useRef(null); - useEffect(() => { - if (ref.current) { - setWidth(ref.current.offsetWidth); - } else { - throw new Error('Ref not found'); - } - }, [ref.current]); + // useEffect(() => { + // if (ref.current) { + // setWidth(ref.current.offsetWidth); + // } else { + // throw new Error('Ref not found'); + // } + // }, [ref.current]); return (
@@ -114,7 +114,7 @@ export default function Navbar() { - } text="Bridges" width={width} @@ -132,7 +132,8 @@ export default function Navbar() { ))} - + */} +
}> diff --git a/pages/dashboard.js b/pages/dashboard.js index 9e94249..fdf2dec 100644 --- a/pages/dashboard.js +++ b/pages/dashboard.js @@ -72,8 +72,9 @@ Dashboard.propTypes = { PropTypes.shape({ title: PropTypes.string.isRequired, updatedAt: PropTypes.string.isRequired, - lastRequest: PropTypes.string, - requests: PropTypes.string, + lastRequest: PropTypes.string.isRequired, + requests: PropTypes.string.isRequired, + eventId: PropTypes.string.isRequired, }), ).isRequired, }; diff --git a/pages/events/[slug].js b/pages/events/[slug].js index 26e0645..62b918d 100644 --- a/pages/events/[slug].js +++ b/pages/events/[slug].js @@ -28,7 +28,7 @@ const useStyles = makeStyles(() => ({ }, })); -function Events({ event }) { +function Events({ event, events, bridgeTitle }) { const classes = useStyles(); const { inbound, outbound } = event.data; @@ -37,7 +37,7 @@ function Events({ event }) { return ( - + @@ -99,7 +99,9 @@ export async function getServerSideProps(context) { return { props: { + bridgeTitle: res.data.bridge_title, event: toCamel(event), + events: toCamel(JSON.parse(res.data.events)), }, }; } @@ -146,6 +148,50 @@ Events.propTypes = { statusCode: PropTypes.number, test: PropTypes.bool, }).isRequired, + events: PropTypes.arrayOf( + PropTypes.shape({ + completed: PropTypes.bool.isRequired, + aborted: PropTypes.bool.isRequired, + id: PropTypes.number.isRequired, + bridgeId: PropTypes.number.isRequired, + completedAt: PropTypes.string.isRequired, + data: PropTypes.shape({ + inbound: PropTypes.shape({ + dateTime: PropTypes.string.isRequired, + contentLength: PropTypes.number.isRequired, + payload: PropTypes.shape({}).isRequired, + }).isRequired, + + outbound: PropTypes.arrayOf( + PropTypes.shape({ + request: PropTypes.shape({ + dateTime: PropTypes.string.isRequired, + contentLength: PropTypes.string.isRequired, + uri: PropTypes.string.isRequired, + payload: PropTypes.shape({}).isRequired, + headers: PropTypes.arrayOf( + PropTypes.shape({ + key: PropTypes.string.isRequired, + value: PropTypes.string.isRequired, + }), + ), + }).isRequired, + + response: PropTypes.shape({ + dateTime: PropTypes.string.isRequired, + statusCode: PropTypes.string.isRequired, + message: PropTypes.string.isRequired, + size: PropTypes.number.isRequired, + payload: PropTypes.shape({}).isRequired, + }).isRequired, + }).isRequired, + ).isRequired, + }), + statusCode: PropTypes.number, + test: PropTypes.bool, + }).isRequired, + ).isRequired, + bridgeTitle: PropTypes.string.isRequired, }; export default Events; diff --git a/specs/fixtures/event.json b/specs/fixtures/event.json index 1107235..7eaec91 100644 --- a/specs/fixtures/event.json +++ b/specs/fixtures/event.json @@ -12,5 +12,7 @@ "updated_at": "2020-11-28T13: 07: 00.408Z", "test": false, "aborted": false - } + }, + "events": "[]", + "bridge_title": "Hello World" } \ No newline at end of file