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. --- opendc-web/opendc-web-ui/next.config.js | 9 +++ opendc-web/opendc-web-ui/package.json | 4 +- opendc-web/opendc-web-ui/public/index.html | 70 ------------------ .../src/components/home/ContactSection.js | 66 ----------------- .../src/components/home/ContactSection.module.scss | 20 ------ .../src/components/home/ContentSection.js | 23 ------ .../src/components/home/ContentSection.module.scss | 11 --- .../src/components/home/IntroSection.js | 50 ------------- .../src/components/home/JumbotronHeader.js | 34 --------- .../components/home/JumbotronHeader.module.scss | 31 -------- .../src/components/home/ModelingSection.js | 28 -------- .../src/components/home/ScreenshotSection.js | 39 ---------- .../components/home/ScreenshotSection.module.scss | 5 -- .../src/components/home/SimulationSection.js | 66 ----------------- .../src/components/home/StakeholderSection.js | 47 ------------- .../src/components/home/TeamSection.js | 82 ---------------------- .../src/components/home/TechnologiesSection.js | 47 ------------- .../src/components/navigation/HomeNavbar.js | 16 ----- opendc-web/opendc-web-ui/src/pages/index.js | 42 ----------- .../opendc-web-ui/src/pages/index.module.scss | 16 ----- 20 files changed, 11 insertions(+), 695 deletions(-) delete mode 100644 opendc-web/opendc-web-ui/public/index.html delete mode 100644 opendc-web/opendc-web-ui/src/components/home/ContactSection.js delete mode 100644 opendc-web/opendc-web-ui/src/components/home/ContactSection.module.scss delete mode 100644 opendc-web/opendc-web-ui/src/components/home/ContentSection.js delete mode 100644 opendc-web/opendc-web-ui/src/components/home/ContentSection.module.scss delete mode 100644 opendc-web/opendc-web-ui/src/components/home/IntroSection.js delete mode 100644 opendc-web/opendc-web-ui/src/components/home/JumbotronHeader.js delete mode 100644 opendc-web/opendc-web-ui/src/components/home/JumbotronHeader.module.scss delete mode 100644 opendc-web/opendc-web-ui/src/components/home/ModelingSection.js delete mode 100644 opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.js delete mode 100644 opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.module.scss delete mode 100644 opendc-web/opendc-web-ui/src/components/home/SimulationSection.js delete mode 100644 opendc-web/opendc-web-ui/src/components/home/StakeholderSection.js delete mode 100644 opendc-web/opendc-web-ui/src/components/home/TeamSection.js delete mode 100644 opendc-web/opendc-web-ui/src/components/home/TechnologiesSection.js delete mode 100644 opendc-web/opendc-web-ui/src/components/navigation/HomeNavbar.js delete mode 100644 opendc-web/opendc-web-ui/src/pages/index.js delete mode 100644 opendc-web/opendc-web-ui/src/pages/index.module.scss (limited to 'opendc-web') diff --git a/opendc-web/opendc-web-ui/next.config.js b/opendc-web/opendc-web-ui/next.config.js index 44ebfff6..97580fa0 100644 --- a/opendc-web/opendc-web-ui/next.config.js +++ b/opendc-web/opendc-web-ui/next.config.js @@ -25,4 +25,13 @@ module.exports = { experimental: { eslint: true, }, + async redirects() { + return [ + { + source: '/', + destination: '/projects', + permanent: true, + }, + ] + }, } diff --git a/opendc-web/opendc-web-ui/package.json b/opendc-web/opendc-web-ui/package.json index 1a906acd..2dfd137c 100644 --- a/opendc-web/opendc-web-ui/package.json +++ b/opendc-web/opendc-web-ui/package.json @@ -10,10 +10,10 @@ ], "homepage": "http://opendc.org", "bugs": { - "url": "https://github.com/atlarge-research/opendc-frontend/issues", + "url": "https://github.com/atlarge-research/opendc/issues", "email": "opendc@atlarge-research.com" }, - "author": "Georgios Andreadis (https://gandreadis.com/)", + "author": "OpenDC Maintainers ", "license": "MIT", "private": true, "dependencies": { diff --git a/opendc-web/opendc-web-ui/public/index.html b/opendc-web/opendc-web-ui/public/index.html deleted file mode 100644 index 19b80e29..00000000 --- a/opendc-web/opendc-web-ui/public/index.html +++ /dev/null @@ -1,70 +0,0 @@ - - - - - OpenDC - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - diff --git a/opendc-web/opendc-web-ui/src/components/home/ContactSection.js b/opendc-web/opendc-web-ui/src/components/home/ContactSection.js deleted file mode 100644 index 60a7e6a3..00000000 --- a/opendc-web/opendc-web-ui/src/components/home/ContactSection.js +++ /dev/null @@ -1,66 +0,0 @@ -import React from 'react' -import Image from 'next/image' -import { Row, Col } from 'reactstrap' -import ContentSection from './ContentSection' -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' -import { faExclamationTriangle, faEnvelope } from '@fortawesome/free-solid-svg-icons' -import { faGithub } from '@fortawesome/free-brands-svg-icons' -import { contactSection, tudelftIcon } from './ContactSection.module.scss' - -const ContactSection = () => ( - - - - - -
- atlarge-research/opendc - - - - - -
- opendc@atlarge-research.com - - - - - - TU Delft - - - - - A project by the   - - @Large Research Group - - . - - - - - -
- 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 - - ). Sorry for the inconvenience. - - - -) - -export default ContactSection diff --git a/opendc-web/opendc-web-ui/src/components/home/ContactSection.module.scss b/opendc-web/opendc-web-ui/src/components/home/ContactSection.module.scss deleted file mode 100644 index 9ab4fcb1..00000000 --- a/opendc-web/opendc-web-ui/src/components/home/ContactSection.module.scss +++ /dev/null @@ -1,20 +0,0 @@ -.contactSection { - background-color: #444; - color: #ddd; - - a { - color: #ddd; - - &:hover { - color: #fff; - } - } - - .tudelftIcon { - height: 100px; - } - - .disclaimer { - color: #cccccc; - } -} diff --git a/opendc-web/opendc-web-ui/src/components/home/ContentSection.js b/opendc-web/opendc-web-ui/src/components/home/ContentSection.js deleted file mode 100644 index abaa565c..00000000 --- a/opendc-web/opendc-web-ui/src/components/home/ContentSection.js +++ /dev/null @@ -1,23 +0,0 @@ -import PropTypes from 'prop-types' -import React from 'react' -import classNames from 'classnames' -import { Container } from 'reactstrap' -import { contentSection } from './ContentSection.module.scss' - -const ContentSection = ({ name, title, children, className }) => ( -
- -

{title}

- {children} - -
-) - -ContentSection.propTypes = { - name: PropTypes.string.isRequired, - title: PropTypes.string.isRequired, - children: PropTypes.node, - className: PropTypes.string, -} - -export default ContentSection diff --git a/opendc-web/opendc-web-ui/src/components/home/ContentSection.module.scss b/opendc-web/opendc-web-ui/src/components/home/ContentSection.module.scss deleted file mode 100644 index d27a0ce0..00000000 --- a/opendc-web/opendc-web-ui/src/components/home/ContentSection.module.scss +++ /dev/null @@ -1,11 +0,0 @@ -@import 'src/style/_variables.scss'; - -.contentSection { - padding-top: 50px; - padding-bottom: 50px; - text-align: center; - - h1 { - margin-bottom: 30px; - } -} diff --git a/opendc-web/opendc-web-ui/src/components/home/IntroSection.js b/opendc-web/opendc-web-ui/src/components/home/IntroSection.js deleted file mode 100644 index f9000d32..00000000 --- a/opendc-web/opendc-web-ui/src/components/home/IntroSection.js +++ /dev/null @@ -1,50 +0,0 @@ -import PropTypes from 'prop-types' -import React from 'react' -import Image from 'next/image' -import { Container, Row, Col } from 'reactstrap' - -const IntroSection = ({ className }) => ( -
- - - -

The datacenter (DC) industry...

-
    -
  • Is worth over $15 bn, and growing
    • -
  • Has many hard-to-grasp concepts
    • -
  • Needs to become accessible to many
    • -
- - - Schematic top-down view of a datacenter -

- - Image source - -

- - -

OpenDC provides...

-
    -
  • Collaborative online DC modeling
    • -
  • Diverse and effective DC simulation
    • -
  • Exploratory DC performance feedback
    • -
- - - -
-) - -IntroSection.propTypes = { - className: PropTypes.string, -} - -export default IntroSection diff --git a/opendc-web/opendc-web-ui/src/components/home/JumbotronHeader.js b/opendc-web/opendc-web-ui/src/components/home/JumbotronHeader.js deleted file mode 100644 index 98aa0af2..00000000 --- a/opendc-web/opendc-web-ui/src/components/home/JumbotronHeader.js +++ /dev/null @@ -1,34 +0,0 @@ -import React from 'react' -import Image from 'next/image' -import { Container, Jumbotron, Button } from 'reactstrap' -import { jumbotronHeader, jumbotron, dc } from './JumbotronHeader.module.scss' -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' -import { faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons' - -const JumbotronHeader = () => ( -
- - -

- OpenDC -

-

Collaborative Datacenter Simulation and Exploration for Everybody

-
- OpenDC -
-

- -

- - -
-) - -export default JumbotronHeader diff --git a/opendc-web/opendc-web-ui/src/components/home/JumbotronHeader.module.scss b/opendc-web/opendc-web-ui/src/components/home/JumbotronHeader.module.scss deleted file mode 100644 index 567b3e73..00000000 --- a/opendc-web/opendc-web-ui/src/components/home/JumbotronHeader.module.scss +++ /dev/null @@ -1,31 +0,0 @@ -.jumbotronHeader { - background: #00a6d6; -} - -.jumbotron { - background-color: inherit; - margin-bottom: 0; - text-align: center; - - padding-top: 120px; - padding-bottom: 120px; - - img { - max-width: 110px; - } - - h1 { - color: #fff; - font-size: 4.5em; - - .dc { - color: #fff; - font-weight: bold; - } - } - - :global(.lead) { - color: #fff; - font-size: 1.4em; - } -} diff --git a/opendc-web/opendc-web-ui/src/components/home/ModelingSection.js b/opendc-web/opendc-web-ui/src/components/home/ModelingSection.js deleted file mode 100644 index 8959663a..00000000 --- a/opendc-web/opendc-web-ui/src/components/home/ModelingSection.js +++ /dev/null @@ -1,28 +0,0 @@ -import PropTypes from 'prop-types' -import React from 'react' -import ScreenshotSection from './ScreenshotSection' - -const ModelingSection = ({ className }) => ( - -

Collaboratively...

-
    -
  • Model DC layout, and room locations and types
    • -
  • Place racks in rooms and nodes in racks
    • -
  • Add real-world CPU, GPU, memory, storage and network units to each node
    • -
  • Select from diverse scheduling policies
    • -
- -) - -ModelingSection.propTypes = { - className: PropTypes.string, -} - -export default ModelingSection diff --git a/opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.js b/opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.js deleted file mode 100644 index 58fe1710..00000000 --- a/opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.js +++ /dev/null @@ -1,39 +0,0 @@ -import PropTypes from 'prop-types' -import React from 'react' -import Image from 'next/image' -import { Row, Col } from 'reactstrap' -import ContentSection from './ContentSection' -import { screenshot } from './ScreenshotSection.module.scss' - -const ScreenshotSection = ({ className, name, title, imageUrl, caption, imageIsRight, children }) => ( - - - - {children} - - - {caption} -
{caption}
- - - -) - -ScreenshotSection.propTypes = { - className: PropTypes.string, - name: PropTypes.string, - title: PropTypes.string, - imageUrl: PropTypes.string, - caption: PropTypes.string, - imageIsRight: PropTypes.bool, - children: PropTypes.node, -} - -export default ScreenshotSection diff --git a/opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.module.scss b/opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.module.scss deleted file mode 100644 index 7e22de32..00000000 --- a/opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.module.scss +++ /dev/null @@ -1,5 +0,0 @@ -.screenshot { - 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 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 diff --git a/opendc-web/opendc-web-ui/src/components/home/StakeholderSection.js b/opendc-web/opendc-web-ui/src/components/home/StakeholderSection.js deleted file mode 100644 index aa689ba4..00000000 --- a/opendc-web/opendc-web-ui/src/components/home/StakeholderSection.js +++ /dev/null @@ -1,47 +0,0 @@ -import PropTypes from 'prop-types' -import React from 'react' -import { Row, Col } from 'reactstrap' -import ContentSection from './ContentSection' - -const Stakeholder = ({ name, title, subtitle }) => ( - - -
-

{title}

-

{subtitle}

-
- -) - -Stakeholder.propTypes = { - name: PropTypes.string, - title: PropTypes.string, - subtitle: PropTypes.string, -} - -const StakeholderSection = ({ className }) => ( - - - - - - - - - -) - -StakeholderSection.propTypes = { - className: PropTypes.string, -} - -export default StakeholderSection diff --git a/opendc-web/opendc-web-ui/src/components/home/TeamSection.js b/opendc-web/opendc-web-ui/src/components/home/TeamSection.js deleted file mode 100644 index dd057a93..00000000 --- a/opendc-web/opendc-web-ui/src/components/home/TeamSection.js +++ /dev/null @@ -1,82 +0,0 @@ -import PropTypes from 'prop-types' -import React from 'react' -import Image from 'next/image' -import { Row, Col } from 'reactstrap' -import ContentSection from './ContentSection' - -const TeamLead = ({ photoId, name, description }) => ( - - - - {name} - - -

{name}

-
{description}
- - - -) - -TeamLead.propTypes = { - photoId: PropTypes.string, - name: PropTypes.string, - description: PropTypes.string, -} - -const TeamMember = ({ photoId, name }) => ( - - - - {name} - - -
{name}
- - - -) - -TeamMember.propTypes = { - photoId: PropTypes.string, - name: PropTypes.string, -} - -const TeamSection = ({ className }) => ( - - - - - - - - - - - - - - - - - - -) - -TeamSection.propTypes = { - className: PropTypes.string, -} - -export default TeamSection diff --git a/opendc-web/opendc-web-ui/src/components/home/TechnologiesSection.js b/opendc-web/opendc-web-ui/src/components/home/TechnologiesSection.js deleted file mode 100644 index e5131c2a..00000000 --- a/opendc-web/opendc-web-ui/src/components/home/TechnologiesSection.js +++ /dev/null @@ -1,47 +0,0 @@ -import PropTypes from 'prop-types' -import React from 'react' -import { ListGroup, ListGroupItem } from 'reactstrap' -import ContentSection from './ContentSection' -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' -import { faWindowMaximize, faTv, faDatabase, faCogs } from '@fortawesome/free-solid-svg-icons' - -const TechnologiesSection = ({ className }) => ( - - - - - - Browser - - JavaScript, React, Redux, Konva - - - - - Server - - Python, Flask, FlaskSocketIO, OpenAPI - - - - - Database - - MongoDB - - - - - Simulator - - Kotlin - - - -) - -TechnologiesSection.propTypes = { - className: PropTypes.string, -} - -export default TechnologiesSection diff --git a/opendc-web/opendc-web-ui/src/components/navigation/HomeNavbar.js b/opendc-web/opendc-web-ui/src/components/navigation/HomeNavbar.js deleted file mode 100644 index 57cb7a53..00000000 --- a/opendc-web/opendc-web-ui/src/components/navigation/HomeNavbar.js +++ /dev/null @@ -1,16 +0,0 @@ -import React from 'react' -import { NavItem, NavLink } from 'reactstrap' -import Navbar from './Navbar' - -const HomeNavbar = () => ( - - Stakeholders - Modeling - Project - Technologies - Team - Contact - -) - -export default HomeNavbar diff --git a/opendc-web/opendc-web-ui/src/pages/index.js b/opendc-web/opendc-web-ui/src/pages/index.js deleted file mode 100644 index bb904eb6..00000000 --- a/opendc-web/opendc-web-ui/src/pages/index.js +++ /dev/null @@ -1,42 +0,0 @@ -import React from 'react' -import Head from 'next/head' -import ContactSection from '../components/home/ContactSection' -import IntroSection from '../components/home/IntroSection' -import JumbotronHeader from '../components/home/JumbotronHeader' -import ModelingSection from '../components/home/ModelingSection' -import SimulationSection from '../components/home/SimulationSection' -import StakeholderSection from '../components/home/StakeholderSection' -import TeamSection from '../components/home/TeamSection' -import TechnologiesSection from '../components/home/TechnologiesSection' -import HomeNavbar from '../components/navigation/HomeNavbar' -import { - introSection, - stakeholderSection, - modelingSection, - simulationSection, - technologiesSection, - teamSection, -} from './index.module.scss' - -function Home() { - return ( - <> - - OpenDC - - -
- - - - - - - - -
- - ) -} - -export default Home diff --git a/opendc-web/opendc-web-ui/src/pages/index.module.scss b/opendc-web/opendc-web-ui/src/pages/index.module.scss deleted file mode 100644 index aed1d88f..00000000 --- a/opendc-web/opendc-web-ui/src/pages/index.module.scss +++ /dev/null @@ -1,16 +0,0 @@ -.bodyWrapper { - position: relative; - overflow-y: hidden; -} - -.introSection, -.modelingSection, -.technologiesSection { - background-color: #fff; -} - -.stakeholderSection, -.simulationSection, -.teamSection { - background-color: #f2f2f2; -} -- cgit v1.2.3