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/components/home/SimulationSection.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'opendc-web/opendc-web-ui/src/components/home/SimulationSection.js') 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 8e98717a..44ce905b 100644 --- a/opendc-web/opendc-web-ui/src/components/home/SimulationSection.js +++ b/opendc-web/opendc-web-ui/src/components/home/SimulationSection.js @@ -2,9 +2,9 @@ import React from 'react' import { Col, Row } from 'reactstrap' import ContentSection from './ContentSection' -const SimulationSection = () => { +const SimulationSection = ({ className }) => { return ( - +

Working with OpenDC:

-- cgit v1.2.3 From 53623fad76274e39206b8e073e371775ea96946b Mon Sep 17 00:00:00 2001 From: Fabian Mastenbroek Date: Mon, 17 May 2021 12:16:10 +0200 Subject: ui: Migrate to FontAwesome 5 React library This change updates the frontend to use the FontAwesome 5 React library that renders SVG icons as opposed to CSS icon fonts. This migration resolves a couple of issues we had with server-side rendering of the previous FontAwesome icons. --- .../src/components/home/SimulationSection.js | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) (limited to 'opendc-web/opendc-web-ui/src/components/home/SimulationSection.js') 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 44ce905b..c154cc26 100644 --- a/opendc-web/opendc-web-ui/src/components/home/SimulationSection.js +++ b/opendc-web/opendc-web-ui/src/components/home/SimulationSection.js @@ -1,4 +1,5 @@ import React from 'react' +import Image from 'next/image' import { Col, Row } from 'reactstrap' import ContentSection from './ContentSection' @@ -18,9 +19,12 @@ const SimulationSection = ({ className }) => { - Running an experiment in OpenDC Running an experiment in OpenDC @@ -39,7 +43,14 @@ const SimulationSection = ({ className }) => { - OpenDC's Architecture + OpenDC's Architecture OpenDC's Architecture -- cgit v1.2.3 From 0e52785dfc5e99f48718530976083cfbd1507651 Mon Sep 17 00:00:00 2001 From: Fabian Mastenbroek Date: Mon, 5 Jul 2021 15:36:23 +0200 Subject: ui: Fix linting errors --- .../opendc-web-ui/src/components/home/SimulationSection.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) (limited to 'opendc-web/opendc-web-ui/src/components/home/SimulationSection.js') 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 c154cc26..46ce6a35 100644 --- a/opendc-web/opendc-web-ui/src/components/home/SimulationSection.js +++ b/opendc-web/opendc-web-ui/src/components/home/SimulationSection.js @@ -1,3 +1,4 @@ +import PropTypes from 'prop-types' import React from 'react' import Image from 'next/image' import { Col, Row } from 'reactstrap' @@ -32,7 +33,7 @@ const SimulationSection = ({ className }) => { -

OpenDC's Simulator:

+

OpenDC's Simulator:

  • Includes a detailed operational model of modern datacenters
  • @@ -51,11 +52,15 @@ const SimulationSection = ({ className }) => { height={232} alt="OpenDC's Architecture" /> - OpenDC's Architecture + OpenDC's Architecture ) } +SimulationSection.propTypes = { + className: PropTypes.string, +} + export default SimulationSection -- cgit v1.2.3 From 829be3c973f5ca837431c3ca10909412b675e668 Mon Sep 17 00:00:00 2001 From: Fabian Mastenbroek Date: Thu, 15 Jul 2021 15:10:04 +0200 Subject: refactor(ui): Extract OpenDC landing page from web interface This change extracts the landing page from the web interface in order to separate the development of the two. This allows the landing page to be developed independently of the actual OpenDC web application. --- .../src/components/home/SimulationSection.js | 66 ---------------------- 1 file changed, 66 deletions(-) delete mode 100644 opendc-web/opendc-web-ui/src/components/home/SimulationSection.js (limited to 'opendc-web/opendc-web-ui/src/components/home/SimulationSection.js') diff --git a/opendc-web/opendc-web-ui/src/components/home/SimulationSection.js b/opendc-web/opendc-web-ui/src/components/home/SimulationSection.js deleted file mode 100644 index 46ce6a35..00000000 --- a/opendc-web/opendc-web-ui/src/components/home/SimulationSection.js +++ /dev/null @@ -1,66 +0,0 @@ -import PropTypes from 'prop-types' -import React from 'react' -import Image from 'next/image' -import { Col, Row } from 'reactstrap' -import ContentSection from './ContentSection' - -const SimulationSection = ({ className }) => { - 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 -
      • -
    - - - - OpenDC's Architecture - OpenDC's Architecture - -     -     - ) -} - -SimulationSection.propTypes = { - className: PropTypes.string, -} - -export default SimulationSection -- cgit v1.2.3