From 90fae26aa4bd0e0eb3272ff6e6524060e9004fbb Mon Sep 17 00:00:00 2001 From: Georgios Andreadis Date: Mon, 29 Jun 2020 15:47:09 +0200 Subject: Prepare frontend repository for monorepo This change prepares the frontend Git repository for the monorepo residing at https://github.com/atlarge-research.com/opendc. To accomodate for this, we move all files into a frontend subdirectory. --- frontend/src/components/home/ContactSection.js | 64 ++++++++++++++++++++++ frontend/src/components/home/ContactSection.sass | 15 +++++ frontend/src/components/home/ContentSection.js | 19 +++++++ frontend/src/components/home/ContentSection.sass | 9 +++ frontend/src/components/home/IntroSection.js | 40 ++++++++++++++ frontend/src/components/home/JumbotronHeader.js | 20 +++++++ frontend/src/components/home/JumbotronHeader.sass | 24 ++++++++ frontend/src/components/home/ModelingSection.js | 24 ++++++++ frontend/src/components/home/ScreenshotSection.js | 32 +++++++++++ .../src/components/home/ScreenshotSection.sass | 5 ++ frontend/src/components/home/SimulationSection.js | 25 +++++++++ frontend/src/components/home/StakeholderSection.js | 42 ++++++++++++++ frontend/src/components/home/TeamSection.js | 56 +++++++++++++++++++ .../src/components/home/TechnologiesSection.js | 42 ++++++++++++++ 14 files changed, 417 insertions(+) create mode 100644 frontend/src/components/home/ContactSection.js create mode 100644 frontend/src/components/home/ContactSection.sass create mode 100644 frontend/src/components/home/ContentSection.js create mode 100644 frontend/src/components/home/ContentSection.sass create mode 100644 frontend/src/components/home/IntroSection.js create mode 100644 frontend/src/components/home/JumbotronHeader.js create mode 100644 frontend/src/components/home/JumbotronHeader.sass create mode 100644 frontend/src/components/home/ModelingSection.js create mode 100644 frontend/src/components/home/ScreenshotSection.js create mode 100644 frontend/src/components/home/ScreenshotSection.sass create mode 100644 frontend/src/components/home/SimulationSection.js create mode 100644 frontend/src/components/home/StakeholderSection.js create mode 100644 frontend/src/components/home/TeamSection.js create mode 100644 frontend/src/components/home/TechnologiesSection.js (limited to 'frontend/src/components/home') diff --git a/frontend/src/components/home/ContactSection.js b/frontend/src/components/home/ContactSection.js new file mode 100644 index 00000000..4e640924 --- /dev/null +++ b/frontend/src/components/home/ContactSection.js @@ -0,0 +1,64 @@ +import React from "react"; +import FontAwesome from "react-fontawesome"; +import "./ContactSection.css"; +import ContentSection from "./ContentSection"; + +const ContactSection = () => ( + +
+
+ + +
+ atlarge-research/opendc + +
+
+ + + +
+
+
+ TU Delft +
+
+
+
+ A project by the   + + @Large Research Group + . +
+
+
+
+ +
+ 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/frontend/src/components/home/ContactSection.sass b/frontend/src/components/home/ContactSection.sass new file mode 100644 index 00000000..2cde7391 --- /dev/null +++ b/frontend/src/components/home/ContactSection.sass @@ -0,0 +1,15 @@ +.contact-section + background-color: #444 + color: #ddd + + a + color: #ddd + + a:hover + color: #fff + + .tudelft-icon + height: 100px + + .disclaimer + color: #cccccc diff --git a/frontend/src/components/home/ContentSection.js b/frontend/src/components/home/ContentSection.js new file mode 100644 index 00000000..2e24ee10 --- /dev/null +++ b/frontend/src/components/home/ContentSection.js @@ -0,0 +1,19 @@ +import classNames from "classnames"; +import PropTypes from "prop-types"; +import React from "react"; +import "./ContentSection.css"; + +const ContentSection = ({ name, title, children }) => ( +
+
+

{title}

+ {children} +
+
+); + +ContentSection.propTypes = { + name: PropTypes.string.isRequired +}; + +export default ContentSection; diff --git a/frontend/src/components/home/ContentSection.sass b/frontend/src/components/home/ContentSection.sass new file mode 100644 index 00000000..67541179 --- /dev/null +++ b/frontend/src/components/home/ContentSection.sass @@ -0,0 +1,9 @@ +@import ../../style-globals/_variables.sass + +.content-section + padding-top: 50px + padding-bottom: 100px + text-align: center + + h1 + margin-bottom: 30px diff --git a/frontend/src/components/home/IntroSection.js b/frontend/src/components/home/IntroSection.js new file mode 100644 index 00000000..59f5face --- /dev/null +++ b/frontend/src/components/home/IntroSection.js @@ -0,0 +1,40 @@ +import React from "react"; + +const IntroSection = () => ( +
+
+
+
+

The datacenter (DC) industry...

+
    +
  • Is worth over $15 bn, and growing
    • +
  • Has many hard-to-grasp concepts
    • +
  • Needs to become accessible to many
    • +
+
+ +
+

OpenDC provides...

+
    +
  • Collaborative online DC modeling
    • +
  • Diverse and effective DC simulation
    • +
  • Exploratory DC performance feedback
    • +
+
+
+
+
+); + +export default IntroSection; diff --git a/frontend/src/components/home/JumbotronHeader.js b/frontend/src/components/home/JumbotronHeader.js new file mode 100644 index 00000000..8a5312b3 --- /dev/null +++ b/frontend/src/components/home/JumbotronHeader.js @@ -0,0 +1,20 @@ +import React from "react"; +import "./JumbotronHeader.css"; + +const JumbotronHeader = () => ( +
+
+
+

+ OpenDC +

+

+ Collaborative Datacenter Simulation and Exploration for Everybody +

+ OpenDC +
+
+
+); + +export default JumbotronHeader; diff --git a/frontend/src/components/home/JumbotronHeader.sass b/frontend/src/components/home/JumbotronHeader.sass new file mode 100644 index 00000000..b88b79f7 --- /dev/null +++ b/frontend/src/components/home/JumbotronHeader.sass @@ -0,0 +1,24 @@ +.jumbotron-header + background: #00A6D6 + +.jumbotron + background-color: inherit + margin-bottom: 0 + + padding-top: 120px + padding-bottom: 120px + + img + max-width: 110px + + h1 + color: #fff + font-size: 4.5em + + .dc + color: #fff + font-weight: bold + + .lead + color: #fff + font-size: 1.4em diff --git a/frontend/src/components/home/ModelingSection.js b/frontend/src/components/home/ModelingSection.js new file mode 100644 index 00000000..17834b0b --- /dev/null +++ b/frontend/src/components/home/ModelingSection.js @@ -0,0 +1,24 @@ +import React from "react"; +import ScreenshotSection from "./ScreenshotSection"; + +const ModelingSection = () => ( + +

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
    • +
+ +); + +export default ModelingSection; diff --git a/frontend/src/components/home/ScreenshotSection.js b/frontend/src/components/home/ScreenshotSection.js new file mode 100644 index 00000000..42b8ac77 --- /dev/null +++ b/frontend/src/components/home/ScreenshotSection.js @@ -0,0 +1,32 @@ +import classNames from "classnames"; +import React from "react"; +import ContentSection from "./ContentSection"; +import "./ScreenshotSection.css"; + +const ScreenshotSection = ({ + name, + title, + imageUrl, + caption, + imageIsRight, + children +}) => ( + +
+
+ {children} +
+
+ {caption} +
{caption}
+
+
+ +); + +export default ScreenshotSection; diff --git a/frontend/src/components/home/ScreenshotSection.sass b/frontend/src/components/home/ScreenshotSection.sass new file mode 100644 index 00000000..a349ad48 --- /dev/null +++ b/frontend/src/components/home/ScreenshotSection.sass @@ -0,0 +1,5 @@ +.screenshot + outline: 2px black solid + padding-left: 0 + padding-right: 0 + margin-bottom: 5px diff --git a/frontend/src/components/home/SimulationSection.js b/frontend/src/components/home/SimulationSection.js new file mode 100644 index 00000000..3961e549 --- /dev/null +++ b/frontend/src/components/home/SimulationSection.js @@ -0,0 +1,25 @@ +import React from "react"; +import ScreenshotSection from "./ScreenshotSection"; + +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
    • +
+ +); + +export default ModelingSection; diff --git a/frontend/src/components/home/StakeholderSection.js b/frontend/src/components/home/StakeholderSection.js new file mode 100644 index 00000000..6d25fd86 --- /dev/null +++ b/frontend/src/components/home/StakeholderSection.js @@ -0,0 +1,42 @@ +import React from "react"; +import ContentSection from "./ContentSection"; + +const Stakeholder = ({ name, title, subtitle }) => ( +
+ {title} +
+

{title}

+

{subtitle}

+
+
+); + +const StakeholderSection = () => ( + +
+ + + + + +
+ +); + +export default StakeholderSection; diff --git a/frontend/src/components/home/TeamSection.js b/frontend/src/components/home/TeamSection.js new file mode 100644 index 00000000..b86655b4 --- /dev/null +++ b/frontend/src/components/home/TeamSection.js @@ -0,0 +1,56 @@ +import React from "react"; +import ContentSection from "./ContentSection"; + +const TeamMember = ({ photoId, name, description }) => ( +
+ {name} +
+

{name}

+
{description}
+
+
+); + +const TeamSection = () => ( + +
+ + + + +
+
+ See{" "} + + atlarge.science/opendc + {" "} + for the full team! +
+ +); + +export default TeamSection; diff --git a/frontend/src/components/home/TechnologiesSection.js b/frontend/src/components/home/TechnologiesSection.js new file mode 100644 index 00000000..fdcfc522 --- /dev/null +++ b/frontend/src/components/home/TechnologiesSection.js @@ -0,0 +1,42 @@ +import React from "react"; +import FontAwesome from "react-fontawesome"; +import ContentSection from "./ContentSection"; + +const TechnologiesSection = () => ( + +
    +
  • + + + Browser + + JavaScript, React, Redux, Konva +
    • +
  • + + + Server + + + Python, Flask, FlaskSocketIO, OpenAPI + +
    • +
  • + + + Database + + MariaDB +
    • +
  • + + + Simulator + + Kotlin +
    • +
+ +); + +export default TechnologiesSection; -- cgit v1.2.3