Merge pull request #62 from atlarge-research/bug/tutorial

Implement various fixes in preparation for tutorial

8 files changed, 129 insertions, 10 deletions

diff --git a/frontend/Dockerfile b/frontend/Dockerfile
index d20f0232..20e16b08 100644
--- a/frontend/Dockerfile
+++ b/frontend/Dockerfile
@@ -10,12 +10,14 @@ FROM node:14 AS build
 
 ARG OPENDC_OAUTH_CLIENT_ID
 ARG OPENDC_API_BASE_URL
+ARG OPENDC_FRONTEND_SENTRY_DSN
 
 COPY ./ /opendc
 COPY --from=staging /opendc/node_modules /opendc/node_modules
 RUN cd /opendc/ \
     && export REACT_APP_OAUTH_CLIENT_ID=$OPENDC_OAUTH_CLIENT_ID \
     && export REACT_APP_API_BASE_URL=$OPENDC_API_BASE_URL \
+    && export REACT_APP_SENTRY_DSN=$OPENDC_FRONTEND_SENTRY_DSN \
     && yarn build
 
 # Setup nginx to serve the frontend
diff --git a/frontend/package.json b/frontend/package.json
index 16732995..0cdce949 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -18,6 +18,8 @@
     "private": true,
     "proxy": "http://localhost:8081",
     "dependencies": {
+        "@sentry/react": "^5.27.3",
+        "@sentry/tracing": "^5.27.3",
         "approximate-number": "~2.0.0",
         "bootstrap": "4.5.3",
         "classnames": "~2.2.5",
diff --git a/frontend/src/components/modals/Modal.js b/frontend/src/components/modals/Modal.js
index b494d970..21b7f119 100644
--- a/frontend/src/components/modals/Modal.js
+++ b/frontend/src/components/modals/Modal.js
@@ -9,12 +9,14 @@ function Modal({ children, title, show, onSubmit, onCancel, submitButtonType, su
 
     const toggle = () => setModal(!modal)
     const cancel = () => {
-        toggle()
-        onCancel()
+        if (onCancel() !== false) {
+            toggle()
+        }
     }
     const submit = () => {
-        toggle()
-        onSubmit()
+        if (onSubmit() !== false) {
+            toggle()
+        }
     }
 
     return (
diff --git a/frontend/src/components/modals/custom-components/NewPortfolioModalComponent.js b/frontend/src/components/modals/custom-components/NewPortfolioModalComponent.js
index 67646e2c..3c6b8724 100644
--- a/frontend/src/components/modals/custom-components/NewPortfolioModalComponent.js
+++ b/frontend/src/components/modals/custom-components/NewPortfolioModalComponent.js
@@ -5,15 +5,23 @@ import Modal from '../Modal'
 import { AVAILABLE_METRICS, METRIC_NAMES } from '../../../util/available-metrics'
 
 const NewPortfolioModalComponent = ({ show, callback }) => {
+    const form = useRef(null)
     const textInput = useRef(null)
     const repeatsInput = useRef(null)
     const metricCheckboxes = useRef({})
 
-    const onSubmit = () =>
-        callback(textInput.current.value, {
-            enabledMetrics: AVAILABLE_METRICS.filter((metric) => metricCheckboxes.current[metric].checked),
-            repeatsPerScenario: parseInt(repeatsInput.current.value),
-        })
+    const onSubmit = () => {
+        if (form.current.reportValidity()) {
+            callback(textInput.current.value, {
+                enabledMetrics: AVAILABLE_METRICS.filter((metric) => metricCheckboxes.current[metric].checked),
+                repeatsPerScenario: parseInt(repeatsInput.current.value),
+            })
+
+            return true
+        } else {
+            return false
+        }
+    }
     const onCancel = () => callback(undefined)
 
     return (
@@ -23,6 +31,7 @@ const NewPortfolioModalComponent = ({ show, callback }) => {
                     e.preventDefault()
                     this.onSubmit()
                 }}
+                innerRef={form}
             >
                 <FormGroup>
                     <Label for="name">Name</Label>
diff --git a/frontend/src/components/modals/custom-components/NewScenarioModalComponent.js b/frontend/src/components/modals/custom-components/NewScenarioModalComponent.js
index 631082a2..01a5719c 100644
--- a/frontend/src/components/modals/custom-components/NewScenarioModalComponent.js
+++ b/frontend/src/components/modals/custom-components/NewScenarioModalComponent.js
@@ -13,6 +13,7 @@ const NewScenarioModalComponent = ({
     topologies,
     schedulers,
 }) => {
+    const form = useRef(null)
     const textInput = useRef(null)
     const traceSelect = useRef(null)
     const traceLoadInput = useRef(null)
@@ -22,6 +23,9 @@ const NewScenarioModalComponent = ({
     const schedulerSelect = useRef(null)
 
     const onSubmit = () => {
+        if (!form.current.reportValidity()) {
+            return false
+        }
         callback(
             textInput.current.value,
             currentPortfolioId,
@@ -38,6 +42,7 @@ const NewScenarioModalComponent = ({
                 schedulerName: schedulerSelect.current.value,
             }
         )
+        return true
     }
     const onCancel = () => {
         callback(undefined)
@@ -50,6 +55,7 @@ const NewScenarioModalComponent = ({
                     e.preventDefault()
                     onSubmit()
                 }}
+                innerRef={form}
             >
                 <FormGroup>
                     <Label for="name">Name</Label>
diff --git a/frontend/src/components/modals/custom-components/NewTopologyModalComponent.js b/frontend/src/components/modals/custom-components/NewTopologyModalComponent.js
index b20ec13b..9fee8831 100644
--- a/frontend/src/components/modals/custom-components/NewTopologyModalComponent.js
+++ b/frontend/src/components/modals/custom-components/NewTopologyModalComponent.js
@@ -5,6 +5,7 @@ import Shapes from '../../../shapes'
 import Modal from '../Modal'
 
 const NewTopologyModalComponent = ({ show, onCreateTopology, onDuplicateTopology, onCancel, topologies }) => {
+    const form = useRef(null)
     const textInput = useRef(null)
     const originTopology = useRef(null)
 
@@ -17,11 +18,15 @@ const NewTopologyModalComponent = ({ show, onCreateTopology, onDuplicateTopology
     }
 
     const onSubmit = () => {
-        if (originTopology.current.selectedIndex === 0) {
+        if (!form.current.reportValidity()) {
+            return false
+        } else if (originTopology.current.selectedIndex === 0) {
             onCreate()
         } else {
             onDuplicate()
         }
+
+        return true
     }
 
     return (
@@ -31,6 +36,7 @@ const NewTopologyModalComponent = ({ show, onCreateTopology, onDuplicateTopology
                     e.preventDefault()
                     onSubmit()
                 }}
+                innerRef={form}
             >
                 <FormGroup>
                     <Label for="name">Name</Label>
diff --git a/frontend/src/index.js b/frontend/src/index.js
index 0971b1e6..fe119dfb 100644
--- a/frontend/src/index.js
+++ b/frontend/src/index.js
@@ -1,5 +1,7 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
+import * as Sentry from '@sentry/react'
+import { Integrations } from '@sentry/tracing'
 import { Provider } from 'react-redux'
 import { setupSocketConnection } from './api/socket'
 import './index.sass'
@@ -9,6 +11,16 @@ import configureStore from './store/configure-store'
 setupSocketConnection(() => {
     const store = configureStore()
 
+    // Initialize Sentry if the user has configured a DSN
+    if (process.env.REACT_APP_SENTRY_DSN) {
+        Sentry.init({
+            environment: process.env.NODE_ENV,
+            dsn: process.env.REACT_APP_SENTRY_DSN,
+            integrations: [new Integrations.BrowserTracing()],
+            tracesSampleRate: 0.5,
+        })
+    }
+
     ReactDOM.render(
         <Provider store={store}>
             <Routes />
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 7398bf38..9c522e42 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -1371,6 +1371,81 @@
   resolved "https://registry.yarnpkg.com/@redux-saga/types/-/types-1.1.0.tgz#0e81ce56b4883b4b2a3001ebe1ab298b84237204"
   integrity sha512-afmTuJrylUU/0OtqzaRkbyYFFNgCF73Bvel/sw90pvGrWIZ+vyoIJqA6eMSoA6+nb443kTmulmBtC9NerXboNg==
 
+"@sentry/browser@5.27.3":
+  version "5.27.3"
+  resolved "https://registry.yarnpkg.com/@sentry/browser/-/browser-5.27.3.tgz#02e78a4502ee99988d3cbb0075a11ec44b503871"
+  integrity sha512-vczS+XTW4Nk2A7TIpAw8IVFHpp+NK6mV9euBG2I61Bs2QbQY9yKLfbjiln/yH2Q8X4THX6MKa0GuiPoCEeq3uw==
+  dependencies:
+    "@sentry/core" "5.27.3"
+    "@sentry/types" "5.27.3"
+    "@sentry/utils" "5.27.3"
+    tslib "^1.9.3"
+
+"@sentry/core@5.27.3":
+  version "5.27.3"
+  resolved "https://registry.yarnpkg.com/@sentry/core/-/core-5.27.3.tgz#d7a175b71596b7eb4b2e8b4cd1858a60d95813bb"
+  integrity sha512-yqepQO88jSt5hy0awpk61AxI4oHB09LjVbUEk4nJDg+1YXuND23cuZvH+Sp2jCZX2vrsw2tefwflToYfA8/U2w==
+  dependencies:
+    "@sentry/hub" "5.27.3"
+    "@sentry/minimal" "5.27.3"
+    "@sentry/types" "5.27.3"
+    "@sentry/utils" "5.27.3"
+    tslib "^1.9.3"
+
+"@sentry/hub@5.27.3":
+  version "5.27.3"
+  resolved "https://registry.yarnpkg.com/@sentry/hub/-/hub-5.27.3.tgz#f509c2fd38f500afef6030504e82510dbd0649d6"
+  integrity sha512-icEH3hr6NVQkpowXZcPOs9IgJZP5lMKtvud4mVioSpkd+NxtRdKrGEX4eF2TCviOJc9Md0mV4K+aL5Au7hxggQ==
+  dependencies:
+    "@sentry/types" "5.27.3"
+    "@sentry/utils" "5.27.3"
+    tslib "^1.9.3"
+
+"@sentry/minimal@5.27.3":
+  version "5.27.3"
+  resolved "https://registry.yarnpkg.com/@sentry/minimal/-/minimal-5.27.3.tgz#c9263bdd6270bfeae64137177448911dff568e53"
+  integrity sha512-ng01cM0rsE1RMjqVTpPLN0ZVkTo0I675usM1krkpQe8ddW6tfQ6EJWpt02/BrpQZRQzTtfWp6/RyB1KFXg6icg==
+  dependencies:
+    "@sentry/hub" "5.27.3"
+    "@sentry/types" "5.27.3"
+    tslib "^1.9.3"
+
+"@sentry/react@^5.27.3":
+  version "5.27.3"
+  resolved "https://registry.yarnpkg.com/@sentry/react/-/react-5.27.3.tgz#aefff1cb2249a4e7f123c7467d1da205d5c02e92"
+  integrity sha512-p7E+djSUVKz02HoRVDX+zamjV8+RL4bqoPnS9JQESweB0sRTYlpvi+CqWLYWNWnamWQWOl97hOw/lLDpo4kUSA==
+  dependencies:
+    "@sentry/browser" "5.27.3"
+    "@sentry/minimal" "5.27.3"
+    "@sentry/types" "5.27.3"
+    "@sentry/utils" "5.27.3"
+    hoist-non-react-statics "^3.3.2"
+    tslib "^1.9.3"
+
+"@sentry/tracing@^5.27.3":
+  version "5.27.3"
+  resolved "https://registry.yarnpkg.com/@sentry/tracing/-/tracing-5.27.3.tgz#787e57a2f7071e375f4fad0f3c3a5ff3381928e7"
+  integrity sha512-UWrHMdGxPfx1u558CWm1tptc2z0BuqCHVe2+BNN7POahq5BkpbGqaotyPQTBHbfmcs6QGfsMG57ou8HQFrBxyA==
+  dependencies:
+    "@sentry/hub" "5.27.3"
+    "@sentry/minimal" "5.27.3"
+    "@sentry/types" "5.27.3"
+    "@sentry/utils" "5.27.3"
+    tslib "^1.9.3"
+
+"@sentry/types@5.27.3":
+  version "5.27.3"
+  resolved "https://registry.yarnpkg.com/@sentry/types/-/types-5.27.3.tgz#d377508769bc658d672c287166c7f6c5db45660c"
+  integrity sha512-PkWhMArFMxBb1g3HtMEL8Ea9PYae2MU0z9CMIWiqzerFy2ZpKG98IU3pt8ic4JkmKQdwB8hDiZpRPMHhW0WYwQ==
+
+"@sentry/utils@5.27.3":
+  version "5.27.3"
+  resolved "https://registry.yarnpkg.com/@sentry/utils/-/utils-5.27.3.tgz#1fc45dfad1f1e4398bee58684d8947666d8d3003"
+  integrity sha512-R9WvFrRBALZvCzu/9BsuXBCfkNxz4MwdBNSXaBsJo4afQw1ljkjIc9DpHzlL9S9goIwXo81Buwmr5gGDO6aH+Q==
+  dependencies:
+    "@sentry/types" "5.27.3"
+    tslib "^1.9.3"
+
 "@svgr/babel-plugin-add-jsx-attribute@^4.2.0":
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-4.2.0.tgz#dadcb6218503532d6884b210e7f3c502caaa44b1"
@@ -11366,6 +11441,11 @@ tslib@^1.10.0, tslib@^1.8.1, tslib@^1.9.0:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.13.0.tgz#c881e13cc7015894ed914862d276436fa9a47043"
   integrity sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q==
 
+tslib@^1.9.3:
+  version "1.14.1"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
+  integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
+
 tsutils@^3.17.1:
   version "3.17.1"
   resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.17.1.tgz#ed719917f11ca0dee586272b2ac49e015a2dd759"