Merge pull request #51 from atlarge-research/build/migration

Migrate opendc.org to OpenDC v2

9 files changed, 19 insertions, 26 deletions

diff --git a/frontend/.dockerignore b/frontend/.dockerignore
new file mode 100644
index 00000000..3c3629e6
--- /dev/null
+++ b/frontend/.dockerignore
@@ -0,0 +1 @@
+node_modules
diff --git a/frontend/Dockerfile b/frontend/Dockerfile
index 36e3c20b..113b09c9 100644
--- a/frontend/Dockerfile
+++ b/frontend/Dockerfile
@@ -1,7 +1,8 @@
 FROM node:14
 MAINTAINER OpenDC Maintainers <opendc@atlarge-research.com>
 
-ARG REACT_APP_OAUTH_CLIENT_ID
+ARG OPENDC_OAUTH_CLIENT_ID
+ARG OPENDC_API_BASE_URL
 
 # Copy OpenDC directory
 COPY ./ /opendc
@@ -10,7 +11,8 @@ COPY ./ /opendc
 RUN cd /opendc/ \
     && rm -rf ./build \
     && yarn \
-    && export REACT_APP_OAUTH_CLIENT_ID=$REACT_APP_OAUTH_CLIENT_ID \
+    && export REACT_APP_OAUTH_CLIENT_ID=$OPENDC_OAUTH_CLIENT_ID \
+    && export REACT_APP_API_BASE_URL=$OPENDC_API_BASE_URL \
     && yarn build
 
 # Setup nginx to serve the frontend
diff --git a/frontend/nginx.conf b/frontend/nginx.conf
index ed7e5cfe..1b4e3a73 100644
--- a/frontend/nginx.conf
+++ b/frontend/nginx.conf
@@ -8,23 +8,6 @@ server {
         try_files $uri $uri/ /index.html;
     }
 
-    location /socket.io {
-        proxy_http_version 1.1;
-
-        proxy_buffering off;
-        proxy_set_header Upgrade $http_upgrade;
-        proxy_set_header Connection "Upgrade";
-        proxy_pass http://api:8081/socket.io;
-    }
-
-    location /tokensignin {
-        proxy_pass http://api:8081/tokensignin;
-    }
-
-    location /api {
-        proxy_pass http://api:8081/api;
-    }
-
     error_page   500 502 503 504  /50x.html;
     location = /50x.html {
         root   /usr/share/nginx/html;
diff --git a/frontend/public/img/screenshot-construction.png b/frontend/public/img/screenshot-construction.png
new file mode 100644
index 00000000..223e8d48
--- /dev/null
+++ b/frontend/public/img/screenshot-construction.png
diff --git a/frontend/public/img/screenshot-simulation-zoom.png b/frontend/public/img/screenshot-simulation-zoom.png
new file mode 100644
index 00000000..d7744926
--- /dev/null
+++ b/frontend/public/img/screenshot-simulation-zoom.png
diff --git a/frontend/src/api/routes/token-signin.js b/frontend/src/api/routes/token-signin.js
index 7553d043..d6cff570 100644
--- a/frontend/src/api/routes/token-signin.js
+++ b/frontend/src/api/routes/token-signin.js
@@ -1,5 +1,10 @@
 export function performTokenSignIn(token) {
-    return new Promise((resolve) => {
-        window['jQuery'].post('/tokensignin', { idtoken: token }, (data) => resolve(data))
-    })
+    const apiUrl = process.env.REACT_APP_API_BASE_URL || ''
+
+    return fetch(`${apiUrl}/tokensignin`, {
+        method: 'POST',
+        body: new URLSearchParams({
+            idtoken: token,
+        }),
+    }).then((res) => res.json())
 }
diff --git a/frontend/src/api/socket.js b/frontend/src/api/socket.js
index 96034021..1c432167 100644
--- a/frontend/src/api/socket.js
+++ b/frontend/src/api/socket.js
@@ -6,9 +6,11 @@ let requestIdCounter = 0
 const callbacks = {}
 
 export function setupSocketConnection(onConnect) {
-    const apiUrl = process.env.REACT_APP_API_URL || window.location.hostname + ':' + window.location.port
+    const apiUrl =
+        process.env.REACT_APP_API_BASE_URL ||
+        `${window.location.protocol}//${window.location.hostname}:${window.location.port}`
 
-    socket = io.connect(window.location.protocol + '//' + apiUrl)
+    socket = io.connect(apiUrl)
     socket.on('connect', onConnect)
     socket.on('response', onSocketResponse)
 }
diff --git a/frontend/src/components/home/ModelingSection.js b/frontend/src/components/home/ModelingSection.js
index 60d372f2..643dca65 100644
--- a/frontend/src/components/home/ModelingSection.js
+++ b/frontend/src/components/home/ModelingSection.js
@@ -5,7 +5,7 @@ const ModelingSection = () => (
     <ScreenshotSection
         name="modeling"
         title="Datacenter Modeling"
-        imageUrl="https://github.com/atlarge-research/opendc/raw/master/images/opendc-frontend-construction.PNG"
+        imageUrl="/img/screenshot-construction.png"
         caption="Building a datacenter in OpenDC"
         imageIsRight={true}
     >
diff --git a/frontend/src/components/home/SimulationSection.js b/frontend/src/components/home/SimulationSection.js
index 9852cbb8..e7a02068 100644
--- a/frontend/src/components/home/SimulationSection.js
+++ b/frontend/src/components/home/SimulationSection.js
@@ -5,7 +5,7 @@ const ModelingSection = () => (
     <ScreenshotSection
         name="simulation"
         title="Datacenter Simulation"
-        imageUrl="https://github.com/atlarge-research/opendc/raw/master/images/opendc-frontend-simulation-zoom.PNG"
+        imageUrl="/img/screenshot-simulation-zoom.png"
         caption="Running an experiment in OpenDC"
         imageIsRight={false}
     >