From 873ddacf5abafe43fbc2b6c1033e473c3366dc62 Mon Sep 17 00:00:00 2001 From: Fabian Mastenbroek Date: Tue, 11 May 2021 15:40:11 +0200 Subject: ui: Move component styling into CSS modules This change updates the frontend codebase by moving the component styling into CSS module files as opposed to the global styles which we used before. In addition, I have changed the syntax to the newer SCSS syntax, which is more similar to CSS. These changes reduces the styling conflicts that can occur between components and allows us to migrate to systems that do not support importing global styles in components. Moreover, we can benefit from treeshaking using CSS modules. --- opendc-web/opendc-web-ui/src/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'opendc-web/opendc-web-ui/src/index.js') diff --git a/opendc-web/opendc-web-ui/src/index.js b/opendc-web/opendc-web-ui/src/index.js index ae3a5ddc..d40d17a2 100644 --- a/opendc-web/opendc-web-ui/src/index.js +++ b/opendc-web/opendc-web-ui/src/index.js @@ -4,7 +4,7 @@ import * as Sentry from '@sentry/react' import { Integrations } from '@sentry/tracing' import { Provider } from 'react-redux' import { setupSocketConnection } from './api/socket' -import './index.sass' +import './index.scss' import Routes from './routes' import config from './config' import configureStore from './store/configure-store' -- cgit v1.2.3 From 2dbb06f433964ccac13fd64ef512ed03142ed97b Mon Sep 17 00:00:00 2001 From: Fabian Mastenbroek Date: Tue, 11 May 2021 16:34:25 +0200 Subject: ui: Move communication to REST API This change removes the socket.io websocket connection/client in favour of the OpenDC REST API. The socket.io websocket implementation was intended to be used for interactive and collaborative datacenter design and exploration. However, we do not support this functionality at the moment (collaborative design and exploration) and having the entire API run over this websocket connection is fragile and not standard practice. To improve maintainability, we therefore remove the websocket implementation in favour of the OpenDC REST API implementation using the fetch API. If we want to implement collaboration in the future, we will develop appropriate extensions in conjuction with the existing REST API. For this, we should look for standard and existing implementation of this functionality. --- opendc-web/opendc-web-ui/src/index.js | 37 ++++++++++++++++------------------- 1 file changed, 17 insertions(+), 20 deletions(-) (limited to 'opendc-web/opendc-web-ui/src/index.js') diff --git a/opendc-web/opendc-web-ui/src/index.js b/opendc-web/opendc-web-ui/src/index.js index d40d17a2..fdfec24b 100644 --- a/opendc-web/opendc-web-ui/src/index.js +++ b/opendc-web/opendc-web-ui/src/index.js @@ -3,30 +3,27 @@ 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.scss' import Routes from './routes' import config from './config' import configureStore from './store/configure-store' -setupSocketConnection(() => { - const store = configureStore() +const store = configureStore() - // Initialize Sentry if the user has configured a DSN - const dsn = config['SENTRY_DSN'] - if (dsn) { - Sentry.init({ - environment: process.env.NODE_ENV, - dsn: dsn, - integrations: [new Integrations.BrowserTracing()], - tracesSampleRate: 0.1, - }) - } +// Initialize Sentry if the user has configured a DSN +const dsn = config['SENTRY_DSN'] +if (dsn) { + Sentry.init({ + environment: process.env.NODE_ENV, + dsn: dsn, + integrations: [new Integrations.BrowserTracing()], + tracesSampleRate: 0.1, + }) +} - ReactDOM.render( - - - , - document.getElementById('root') - ) -}) +ReactDOM.render( + + + , + document.getElementById('root') +) -- cgit v1.2.3 From 4397a959e806bf476be4c81bc804616adf58b969 Mon Sep 17 00:00:00 2001 From: Fabian Mastenbroek Date: Wed, 12 May 2021 22:42:12 +0200 Subject: ui: Migrate from CRA to Next.js This change updates the web frontend to use Next.js instead of Create React App (CRA). Next.js enables the possibility of rendering pages on the server side (which reduces the time to first frame) and overall provides a better development experience. Future commits will try to futher optimize the implementation for Next.js. --- opendc-web/opendc-web-ui/src/index.js | 29 ----------------------------- 1 file changed, 29 deletions(-) delete mode 100644 opendc-web/opendc-web-ui/src/index.js (limited to 'opendc-web/opendc-web-ui/src/index.js') diff --git a/opendc-web/opendc-web-ui/src/index.js b/opendc-web/opendc-web-ui/src/index.js deleted file mode 100644 index fdfec24b..00000000 --- a/opendc-web/opendc-web-ui/src/index.js +++ /dev/null @@ -1,29 +0,0 @@ -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 './index.scss' -import Routes from './routes' -import config from './config' -import configureStore from './store/configure-store' - -const store = configureStore() - -// Initialize Sentry if the user has configured a DSN -const dsn = config['SENTRY_DSN'] -if (dsn) { - Sentry.init({ - environment: process.env.NODE_ENV, - dsn: dsn, - integrations: [new Integrations.BrowserTracing()], - tracesSampleRate: 0.1, - }) -} - -ReactDOM.render( - - - , - document.getElementById('root') -) -- cgit v1.2.3