From dad2701ac61d032289a79e69bb0e6ea47cb7323d Mon Sep 17 00:00:00 2001 From: Fabian Mastenbroek Date: Sat, 8 May 2021 22:15:10 +0200 Subject: ui: Update disclaimer in footer --- opendc-web/opendc-web-ui/src/components/home/ContactSection.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'opendc-web/opendc-web-ui/src') diff --git a/opendc-web/opendc-web-ui/src/components/home/ContactSection.js b/opendc-web/opendc-web-ui/src/components/home/ContactSection.js index 42bdab8a..d5c6e55f 100644 --- a/opendc-web/opendc-web-ui/src/components/home/ContactSection.js +++ b/opendc-web/opendc-web-ui/src/components/home/ContactSection.js @@ -39,11 +39,12 @@ const ContactSection = () => (

+ Disclaimer: OpenDC is an experimental tool. Your data may get lost, overwritten, or otherwise become unavailable.
The OpenDC authors should in no way be liable in the event this happens (see our{' '} - license + license ). Sorry for the inconvenience.
-- cgit v1.2.3 From 85e9603897c020bb4634c7c941d66f2c06dcacb7 Mon Sep 17 00:00:00 2001 From: Fabian Mastenbroek Date: Sun, 9 May 2021 10:56:57 +0200 Subject: ui: Actualize team section --- .../src/components/home/TeamSection.js | 88 ++++++++++++---------- 1 file changed, 50 insertions(+), 38 deletions(-) (limited to 'opendc-web/opendc-web-ui/src') diff --git a/opendc-web/opendc-web-ui/src/components/home/TeamSection.js b/opendc-web/opendc-web-ui/src/components/home/TeamSection.js index 4b6f1e25..1ee1cbf5 100644 --- a/opendc-web/opendc-web-ui/src/components/home/TeamSection.js +++ b/opendc-web/opendc-web-ui/src/components/home/TeamSection.js @@ -1,52 +1,64 @@ import React from 'react' +import { Row, Col } from 'reactstrap' import ContentSection from './ContentSection' -const TeamMember = ({ photoId, name, description }) => ( -
- ( + + -
+

{name}

{description}
-
-
+ + +) + +const TeamMember = ({ photoId, name }) => ( + + + +
{name}
+ + ) const TeamSection = () => ( - -
- - - - - -
-
- See{' '} - - atlarge.science/opendc - {' '} - for the full team! -
+ + + + + + + + + + + + + + + + + ) -- cgit v1.2.3 From dceed47c17241a25b58437a9772cc418551ac30a Mon Sep 17 00:00:00 2001 From: Fabian Mastenbroek Date: Sun, 9 May 2021 11:11:14 +0200 Subject: ui: Update screenshots of OpenDC user-interface --- .../src/components/home/ScreenshotSection.js | 21 +++++++++++++-------- .../src/components/home/ScreenshotSection.sass | 1 - .../src/components/home/SimulationSection.js | 10 ++++++---- 3 files changed, 19 insertions(+), 13 deletions(-) (limited to 'opendc-web/opendc-web-ui/src') diff --git a/opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.js b/opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.js index c987d5d0..263590d5 100644 --- a/opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.js +++ b/opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.js @@ -1,23 +1,28 @@ import classNames from 'classnames' import React from 'react' +import { Row, Col } from 'reactstrap' import ContentSection from './ContentSection' import './ScreenshotSection.sass' const ScreenshotSection = ({ name, title, imageUrl, caption, imageIsRight, children }) => ( -
-
+ {children} -
-
+ + {caption} -
{caption}
-
-
+ {caption} + + ) diff --git a/opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.sass b/opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.sass index 2f454cb4..6b1a6ec4 100644 --- a/opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.sass +++ b/opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.sass @@ -1,5 +1,4 @@ .screenshot - outline: 2px black solid padding-left: 0 padding-right: 0 margin-bottom: 5px diff --git a/opendc-web/opendc-web-ui/src/components/home/SimulationSection.js b/opendc-web/opendc-web-ui/src/components/home/SimulationSection.js index b0244cb5..739a5d11 100644 --- a/opendc-web/opendc-web-ui/src/components/home/SimulationSection.js +++ b/opendc-web/opendc-web-ui/src/components/home/SimulationSection.js @@ -5,16 +5,18 @@ const ModelingSection = () => (

Working with OpenDC:

  • Seamlessly switch between construction and simulation modes
    • -
  • Choose one of several predefined workloads (Big Data, Bag of Tasks, Hadoop, etc.)
    • -
  • Play, pause, and skip around the informative simulation timeline
    • -
  • Visualize and demo live
    • +
  • + Choose one of several predefined workloads (Business Critical, Workflows, Machine Learning, Serverless, + etc.) +
    • +
  • Compare datacenter topologies using automated plots and visual summaries
 ) -- cgit v1.2.3 From a0345ef9aac2138b6b78cdf72a168862e47a45da Mon Sep 17 00:00:00 2001 From: Fabian Mastenbroek Date: Sun, 9 May 2021 11:21:51 +0200 Subject: ui: Link to OpenDC 2.0 paper --- .../src/components/home/JumbotronHeader.js | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) (limited to 'opendc-web/opendc-web-ui/src') diff --git a/opendc-web/opendc-web-ui/src/components/home/JumbotronHeader.js b/opendc-web/opendc-web-ui/src/components/home/JumbotronHeader.js index 7b410679..6a9ea00c 100644 --- a/opendc-web/opendc-web-ui/src/components/home/JumbotronHeader.js +++ b/opendc-web/opendc-web-ui/src/components/home/JumbotronHeader.js @@ -1,17 +1,28 @@ import React from 'react' +import { Container, Jumbotron, Button } from 'reactstrap' import './JumbotronHeader.sass' const JumbotronHeader = () => (
-
-
+ +

OpenDC

Collaborative Datacenter Simulation and Exploration for Everybody

OpenDC -
-
+

+ +

+ +
) -- cgit v1.2.3 From 33e425279f171539205fcda20c6817e9f8e02033 Mon Sep 17 00:00:00 2001 From: Fabian Mastenbroek Date: Sun, 9 May 2021 11:37:04 +0200 Subject: ui: Include figure on OpenDC 2.0 architecture --- .../src/components/home/SimulationSection.js | 68 +++++++++++++++------- 1 file changed, 47 insertions(+), 21 deletions(-) (limited to 'opendc-web/opendc-web-ui/src') diff --git a/opendc-web/opendc-web-ui/src/components/home/SimulationSection.js b/opendc-web/opendc-web-ui/src/components/home/SimulationSection.js index 739a5d11..8e98717a 100644 --- a/opendc-web/opendc-web-ui/src/components/home/SimulationSection.js +++ b/opendc-web/opendc-web-ui/src/components/home/SimulationSection.js @@ -1,24 +1,50 @@ import React from 'react' -import ScreenshotSection from './ScreenshotSection' +import { Col, Row } from 'reactstrap' +import ContentSection from './ContentSection' -const ModelingSection = () => ( - -

Working with OpenDC:

-
    -
  • Seamlessly switch between construction and simulation modes
    • -
  • - Choose one of several predefined workloads (Business Critical, Workflows, Machine Learning, Serverless, - etc.) -
    • -
  • Compare datacenter topologies using automated plots and visual summaries
    • -
- -) +const SimulationSection = () => { + return ( + + + +

Working with OpenDC:

+
    +
  • Seamlessly switch between construction and simulation modes
    • +
  • + Choose one of several predefined workloads (Business Critical, Workflows, Machine Learning, + Serverless, etc.) +
    • +
  • Compare datacenter topologies using automated plots and visual summaries
    • +
+ + + Running an experiment in OpenDC + Running an experiment in OpenDC + + + + +

OpenDC's Simulator:

+
    +
  • Includes a detailed operational model of modern datacenters
    • +
  • + Support for emerging datacenter technologies around cloud computing,{' '} + serverless computing, big data, and machine learning +
    • +
+ -export default ModelingSection + + OpenDC's Architecture + OpenDC's Architecture + + + + ) +} + +export default SimulationSection -- cgit v1.2.3 From f79c0872ddfcbe02a7bcc498b4a9d5d202caccd2 Mon Sep 17 00:00:00 2001 From: Fabian Mastenbroek Date: Sun, 9 May 2021 13:12:21 +0200 Subject: ui: Update runtime variable workaround This change updates the workaround used to access runtime variables in the React frontend, in order to improve the ergonimics when using the development mode of CRA (Create React App). --- .../opendc-web-ui/src/api/routes/token-signin.js | 4 ++- opendc-web/opendc-web-ui/src/api/socket.js | 4 +-- opendc-web/opendc-web-ui/src/config.js | 40 ++++++++++++++++++++++ .../opendc-web-ui/src/containers/auth/Login.js | 5 +-- opendc-web/opendc-web-ui/src/index.js | 5 ++- 5 files changed, 52 insertions(+), 6 deletions(-) create mode 100644 opendc-web/opendc-web-ui/src/config.js (limited to 'opendc-web/opendc-web-ui/src') diff --git a/opendc-web/opendc-web-ui/src/api/routes/token-signin.js b/opendc-web/opendc-web-ui/src/api/routes/token-signin.js index e40127f2..ced5d2e0 100644 --- a/opendc-web/opendc-web-ui/src/api/routes/token-signin.js +++ b/opendc-web/opendc-web-ui/src/api/routes/token-signin.js @@ -1,5 +1,7 @@ +import config from '../../config' + export function performTokenSignIn(token) { - const apiUrl = window.$$env['API_BASE_URL'] || '' + const apiUrl = config['API_BASE_URL'] return fetch(`${apiUrl}/tokensignin`, { method: 'POST', diff --git a/opendc-web/opendc-web-ui/src/api/socket.js b/opendc-web/opendc-web-ui/src/api/socket.js index 884c4152..87facda8 100644 --- a/opendc-web/opendc-web-ui/src/api/socket.js +++ b/opendc-web/opendc-web-ui/src/api/socket.js @@ -1,5 +1,6 @@ import io from 'socket.io-client' import { getAuthToken } from '../auth/index' +import config from '../config' let socket let requestIdCounter = 0 @@ -7,8 +8,7 @@ const callbacks = {} export function setupSocketConnection(onConnect) { const apiUrl = - window.$$env['API_BASE_URL'] || - `${window.location.protocol}//${window.location.hostname}:${window.location.port}` + config['API_BASE_URL'] || `${window.location.protocol}//${window.location.hostname}:${window.location.port}` socket = io.connect(apiUrl) socket.on('connect', onConnect) diff --git a/opendc-web/opendc-web-ui/src/config.js b/opendc-web/opendc-web-ui/src/config.js new file mode 100644 index 00000000..13f4abf2 --- /dev/null +++ b/opendc-web/opendc-web-ui/src/config.js @@ -0,0 +1,40 @@ +/* + * Copyright (c) 2021 AtLarge Research + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in all + * copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + * SOFTWARE. + */ + +function getConfig(name) { + if (process.env.NODE_ENV === 'production' && window.config_overrides) { + const value = window.config_overrides[name] + if (value !== `$${name}`) { + return value + } + } + + return process.env[name] +} + +const config = { + API_BASE_URL: getConfig('REACT_APP_API_BASE_URL'), + OAUTH_CLIENT_ID: getConfig('REACT_APP_OAUTH_CLIENT_ID'), + SENTRY_DSN: getConfig('REACT_APP_SENTRY_DSN'), +} + +export default config diff --git a/opendc-web/opendc-web-ui/src/containers/auth/Login.js b/opendc-web/opendc-web-ui/src/containers/auth/Login.js index 9201c09a..bebe015c 100644 --- a/opendc-web/opendc-web-ui/src/containers/auth/Login.js +++ b/opendc-web/opendc-web-ui/src/containers/auth/Login.js @@ -3,6 +3,7 @@ import React from 'react' import GoogleLogin from 'react-google-login' import { connect } from 'react-redux' import { logIn } from '../../actions/auth' +import config from '../../config' class LoginContainer extends React.Component { static propTypes = { @@ -32,12 +33,12 @@ class LoginContainer extends React.Component { return ( ( - Login with Google + Login with Google )} /> diff --git a/opendc-web/opendc-web-ui/src/index.js b/opendc-web/opendc-web-ui/src/index.js index bddf0b0e..7f60098d 100644 --- a/opendc-web/opendc-web-ui/src/index.js +++ b/opendc-web/opendc-web-ui/src/index.js @@ -6,13 +6,16 @@ import { Provider } from 'react-redux' import { setupSocketConnection } from './api/socket' import './index.sass' import Routes from './routes' +import config from './config' import configureStore from './store/configure-store' setupSocketConnection(() => { const store = configureStore() + console.log('test', config) + // Initialize Sentry if the user has configured a DSN - const dsn = window.$$env['SENTRY_DSN'] + const dsn = config['SENTRY_DSN'] if (dsn) { Sentry.init({ environment: process.env.NODE_ENV, -- cgit v1.2.3