From 646af16c6edf195b86374f2053f2ee40e72e4e7e Mon Sep 17 00:00:00 2001 From: = Date: Thu, 5 Nov 2020 13:57:31 -0500 Subject: [PATCH 1/9] Add loader to sidebar --- components/Sidebar/index.js | 48 ++++++++++++++++++++++++------------- 1 file changed, 32 insertions(+), 16 deletions(-) diff --git a/components/Sidebar/index.js b/components/Sidebar/index.js index 23b851d..7c299ab 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,13 +23,14 @@ const useStyles = makeStyles(() => ({ position: 'relative', }, drawer: { - width: 180, + width: '180px', }, drawerPaper: { width: 180, }, - drawerContainer: { - overflow: 'auto', + drawerPaperNoOverflow: { + width: 180, + overflow: 'hidden', }, toolbar: { minHeight: 46, @@ -36,33 +39,46 @@ const useStyles = makeStyles(() => ({ function Sidebar({ events, title }) { const classes = useStyles(); + const [mounted, setMounted] = useState(false); + + useEffect(() => { + setTimeout(() => setMounted(true), 2500); + }, []); + return (
-
+
{title} - {events.slice().reverse().map((evt) => { - const { date, statusCode, time } = evt.responses.slice(-1)[0].headers; - return ( - - ); - })} + {!mounted + ? ( + + ) : ( + events.slice().reverse().map((evt) => { + const { date, statusCode, time } = evt.responses.slice(-1)[0].headers; + return ( + + ); + }) + )}
From 9fb145bc642088dadab4c61d1dbcfb0d90170239 Mon Sep 17 00:00:00 2001 From: William Jackson Date: Fri, 20 Nov 2020 10:08:40 -0600 Subject: [PATCH 2/9] updated sidebar attributes --- components/Sidebar/ListItem.js | 4 ++-- components/Sidebar/index.js | 9 ++++----- 2 files changed, 6 insertions(+), 7 deletions(-) diff --git a/components/Sidebar/ListItem.js b/components/Sidebar/ListItem.js index 853e4bd..9a32f25 100644 --- a/components/Sidebar/ListItem.js +++ b/components/Sidebar/ListItem.js @@ -5,7 +5,7 @@ import { } from '@material-ui/core'; function ListItem({ - date, statusCode, timestamp, completed, + completed, completedAt, statusCode, }) { return ( @@ -15,7 +15,7 @@ function ListItem({ noWrap align="center" > - {completed ? `${timestamp} - ${date} ${statusCode}` : 'Ongoing' } + {completed ? `${completedAt} - ${statusCode}` : 'Ongoing' } diff --git a/components/Sidebar/index.js b/components/Sidebar/index.js index 7c299ab..2520fdd 100644 --- a/components/Sidebar/index.js +++ b/components/Sidebar/index.js @@ -67,14 +67,13 @@ function Sidebar({ events, title }) { ? ( ) : ( - events.slice().reverse().map((evt) => { - const { date, statusCode, time } = evt.responses.slice(-1)[0].headers; + events.map((event) => { + const { completed, completedAt, statusCode } = event; return ( ); }) From b2be8590d7d5010c14f1fb0b4010abee4307321a Mon Sep 17 00:00:00 2001 From: William Jackson Date: Fri, 20 Nov 2020 12:37:51 -0600 Subject: [PATCH 3/9] tooltip and tooltip message validation --- components/AccordionSummary/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/components/AccordionSummary/index.js b/components/AccordionSummary/index.js index 159801c..b66bdf4 100644 --- a/components/AccordionSummary/index.js +++ b/components/AccordionSummary/index.js @@ -65,7 +65,6 @@ AccordionSummary.propTypes = { PropTypes.arrayOf(PropTypes.node), PropTypes.node, ]).isRequired, - // TODO tooltip: PropTypes.bool.isRequired, tooltipMessage: PropTypes.string.isRequired, }; From d97edc8b681b30c4b7b8bfd564953e69bf0d9461 Mon Sep 17 00:00:00 2001 From: = Date: Tue, 1 Dec 2020 12:39:44 -0500 Subject: [PATCH 4/9] sidebar working on each page --- components/Dashboard/Card.js | 14 ++++++++++---- components/Editor/index.js | 2 +- components/Sidebar/ListItem.js | 19 ++++++++++++------- components/Sidebar/index.js | 8 ++++---- pages/dashboard.js | 5 +++-- pages/events/[slug].js | 6 ++++-- 6 files changed, 34 insertions(+), 20 deletions(-) diff --git a/components/Dashboard/Card.js b/components/Dashboard/Card.js index bdb8423..be60ee4 100644 --- a/components/Dashboard/Card.js +++ b/components/Dashboard/Card.js @@ -84,12 +84,18 @@ function Card({ bridge, index }) { - {/* TODO: Should be request id */} - - + {bridge.eventId ? ( + + + View Events + + + ) : ( + View Events - + )} + diff --git a/components/Editor/index.js b/components/Editor/index.js index 0029c1e..60a1794 100644 --- a/components/Editor/index.js +++ b/components/Editor/index.js @@ -140,7 +140,7 @@ function Editor({ bridge, isEditView }) { return ( <> - + diff --git a/components/Sidebar/ListItem.js b/components/Sidebar/ListItem.js index 2da91d0..03bbb63 100644 --- a/components/Sidebar/ListItem.js +++ b/components/Sidebar/ListItem.js @@ -2,6 +2,7 @@ import { ListItem as MUIListItem, ListItemText, Typography, + Link, } from '@material-ui/core'; import PropTypes from 'prop-types'; @@ -12,15 +13,19 @@ function ListItem({ return ( + - - {completed ? `${timestamp} - ${statusCode}` : 'Ongoing' } - + + + {completed ? `${timestamp} - ${statusCode}` : 'Ongoing' } + + + ); } diff --git a/components/Sidebar/index.js b/components/Sidebar/index.js index c97d710..822e05d 100644 --- a/components/Sidebar/index.js +++ b/components/Sidebar/index.js @@ -37,12 +37,12 @@ const useStyles = makeStyles(() => ({ }, })); -function Sidebar({ events, title }) { +function Sidebar({ events, bridgeId, title }) { const classes = useStyles(); const [mounted, setMounted] = useState(false); useEffect(() => { - setTimeout(() => setMounted(true), 2500); + setTimeout(() => setMounted(true), 1000); }, []); return ( @@ -59,7 +59,7 @@ function Sidebar({ events, title }) { style={{ overflow: mounted ? 'auto' : 'hidden' }} > - + {title || 'Untitled'} @@ -67,7 +67,7 @@ function Sidebar({ events, title }) { ? ( ) : ( - events.map((event) => ( + events && events.map((event) => ( ({ }, })); -function Events({ event }) { +function Events({ event, events, bridgeTitle }) { const classes = useStyles(); const { inbound, outbound } = event.data; @@ -37,7 +37,7 @@ function Events({ event }) { return ( - + Date: Tue, 1 Dec 2020 12:40:13 -0500 Subject: [PATCH 5/9] removed center dropdown in navbar --- components/shared/dashboard/Navbar/index.js | 83 +++++++++++---------- 1 file changed, 42 insertions(+), 41 deletions(-) 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() { ))} - + */} +
}> From 7e2aa2a2929d04decbff69d35acb81240f9cec3a Mon Sep 17 00:00:00 2001 From: = Date: Tue, 1 Dec 2020 13:59:48 -0500 Subject: [PATCH 6/9] Abort works, sidebar doesn't show null status codes, dashboard shows bridge state --- components/Dashboard/Card.js | 8 ++++++++ components/Editor/index.js | 2 +- components/Event/EventStatus.js | 12 ++++++++++-- components/Sidebar/ListItem.js | 10 +++++++--- components/Sidebar/index.js | 1 + pages/events/[slug].js | 2 +- 6 files changed, 28 insertions(+), 7 deletions(-) diff --git a/components/Dashboard/Card.js b/components/Dashboard/Card.js index be60ee4..b5f140e 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'} + @@ -113,6 +120,7 @@ Card.propTypes = { updatedAt: PropTypes.string.isRequired, eventCount: PropTypes.number.isRequired, completedAt: PropTypes.string, + active: PropTypes.bool.isRequired, }).isRequired, index: PropTypes.number.isRequired, }; diff --git a/components/Editor/index.js b/components/Editor/index.js index 60a1794..d5359d6 100644 --- a/components/Editor/index.js +++ b/components/Editor/index.js @@ -99,7 +99,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, diff --git a/components/Event/EventStatus.js b/components/Event/EventStatus.js index 65072ee..404accf 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); }; diff --git a/components/Sidebar/ListItem.js b/components/Sidebar/ListItem.js index 03bbb63..3b269fa 100644 --- a/components/Sidebar/ListItem.js +++ b/components/Sidebar/ListItem.js @@ -7,21 +7,25 @@ import { import PropTypes from 'prop-types'; function ListItem({ - completed, completedAt, statusCode, + 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} diff --git a/components/Sidebar/index.js b/components/Sidebar/index.js index 822e05d..b3dd0bb 100644 --- a/components/Sidebar/index.js +++ b/components/Sidebar/index.js @@ -72,6 +72,7 @@ function Sidebar({ events, bridgeId, title }) { completedAt={event.completedAt} statusCode={event.statusCode} completed={event.completed} + eventId={event.id} /> )) )} diff --git a/pages/events/[slug].js b/pages/events/[slug].js index a270d71..61bee52 100644 --- a/pages/events/[slug].js +++ b/pages/events/[slug].js @@ -50,7 +50,7 @@ function Events({ event, events, bridgeTitle }) { From e84112cd909994583de9dba3db4886e2966b50d4 Mon Sep 17 00:00:00 2001 From: = Date: Tue, 1 Dec 2020 14:04:27 -0500 Subject: [PATCH 7/9] Abort all --- components/Editor/ActionsDialog/index.js | 14 ++++++++++++++ 1 file changed, 14 insertions(+) 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 () => { From 54d2367e2fbffe4054dc327e5422f2df8efc22e0 Mon Sep 17 00:00:00 2001 From: = Date: Tue, 1 Dec 2020 14:12:44 -0500 Subject: [PATCH 8/9] eslint fix --- components/Dashboard/Card.js | 1 + components/Editor/index.js | 1 - components/Event/EventStatus.js | 2 +- components/Sidebar/ListItem.js | 1 + components/Sidebar/index.js | 1 + pages/events/[slug].js | 44 +++++++++++++++++++++++++++++++++ 6 files changed, 48 insertions(+), 2 deletions(-) diff --git a/components/Dashboard/Card.js b/components/Dashboard/Card.js index b5f140e..12fcb24 100644 --- a/components/Dashboard/Card.js +++ b/components/Dashboard/Card.js @@ -121,6 +121,7 @@ Card.propTypes = { 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/index.js b/components/Editor/index.js index d5359d6..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; diff --git a/components/Event/EventStatus.js b/components/Event/EventStatus.js index 404accf..7247ddd 100644 --- a/components/Event/EventStatus.js +++ b/components/Event/EventStatus.js @@ -99,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 3b269fa..0da5561 100644 --- a/components/Sidebar/ListItem.js +++ b/components/Sidebar/ListItem.js @@ -40,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 b3dd0bb..2d46a78 100644 --- a/components/Sidebar/index.js +++ b/components/Sidebar/index.js @@ -88,4 +88,5 @@ export default Sidebar; Sidebar.propTypes = { events: PropTypes.array.isRequired, title: PropTypes.string.isRequired, + bridgeId: PropTypes.number.isRequired, }; diff --git a/pages/events/[slug].js b/pages/events/[slug].js index 61bee52..62b918d 100644 --- a/pages/events/[slug].js +++ b/pages/events/[slug].js @@ -148,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; From 2f8173ae8c9a6190bce1d73f166d513646af1f25 Mon Sep 17 00:00:00 2001 From: = Date: Tue, 1 Dec 2020 16:01:38 -0500 Subject: [PATCH 9/9] Fix broken spec --- specs/fixtures/event.json | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) 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