merge: Add PatternFly 4 web interface (#161)

This pull requests adds the new web interface based on the PatternFly 4 design framework.
This framework enables us to develop more quickly the interfaces necessary in OpenDC. 

* Remove the OpenDC landing page from the web interface module
* Add support for the PatternFly 4 framework in Next.js
* Relax topology schema requirements
* Migrate UI components to PatternFly 4

1 files changed, 139 insertions, 0 deletions

diff --git a/opendc-web/opendc-web-ui/src/components/modals/custom-components/NewPortfolioModal.js b/opendc-web/opendc-web-ui/src/components/modals/custom-components/NewPortfolioModal.js
new file mode 100644
index 00000000..afe07597
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/modals/custom-components/NewPortfolioModal.js
@@ -0,0 +1,139 @@
+import PropTypes from 'prop-types'
+import React, { useRef, useState } from 'react'
+import Modal from '../Modal'
+import {
+    Form,
+    FormGroup,
+    FormSection,
+    NumberInput,
+    Select,
+    SelectGroup,
+    SelectOption,
+    SelectVariant,
+    TextInput,
+} from '@patternfly/react-core'
+import { METRIC_GROUPS, METRIC_NAMES } from '../../../util/available-metrics'
+
+const NewPortfolioModal = ({ isOpen, onSubmit: onSubmitUpstream, onCancel: onUpstreamCancel }) => {
+    const nameInput = useRef(null)
+    const [repeats, setRepeats] = useState(1)
+    const [isSelectOpen, setSelectOpen] = useState(false)
+    const [selectedMetrics, setSelectedMetrics] = useState([])
+
+    const [isSubmitted, setSubmitted] = useState(false)
+    const [errors, setErrors] = useState({})
+
+    const clearState = () => {
+        setSubmitted(false)
+        setErrors({})
+        nameInput.current.value = ''
+        setRepeats(1)
+        setSelectOpen(false)
+        setSelectedMetrics([])
+    }
+
+    const onSubmit = (event) => {
+        setSubmitted(true)
+
+        if (event) {
+            event.preventDefault()
+        }
+
+        const name = nameInput.current.value
+
+        if (!name) {
+            setErrors({ name: true })
+            return false
+        } else {
+            onSubmitUpstream(name, { enabledMetrics: selectedMetrics, repeatsPerScenario: repeats })
+        }
+
+        clearState()
+        return false
+    }
+    const onCancel = () => {
+        onUpstreamCancel()
+        clearState()
+    }
+
+    const onSelect = (event, selection) => {
+        if (selectedMetrics.includes(selection)) {
+            setSelectedMetrics((metrics) => metrics.filter((item) => item !== selection))
+        } else {
+            setSelectedMetrics((metrics) => [...metrics, selection])
+        }
+    }
+
+    return (
+        <Modal title="New Portfolio" isOpen={isOpen} onSubmit={onSubmit} onCancel={onCancel}>
+            <Form onSubmit={onSubmit}>
+                <FormSection>
+                    <FormGroup
+                        label="Name"
+                        fieldId="name"
+                        isRequired
+                        validated={isSubmitted && errors.name ? 'error' : 'default'}
+                        helperTextInvalid="This field cannot be empty"
+                    >
+                        <TextInput
+                            name="name"
+                            id="name"
+                            type="text"
+                            isRequired
+                            ref={nameInput}
+                            placeholder="My Portfolio"
+                        />
+                    </FormGroup>
+                </FormSection>
+                <FormSection title="Targets" titleElement="h4">
+                    <FormGroup label="Metrics" fieldId="metrics">
+                        <Select
+                            variant={SelectVariant.typeaheadMulti}
+                            typeAheadAriaLabel="Select a metric"
+                            onToggle={() => setSelectOpen(!isSelectOpen)}
+                            onSelect={onSelect}
+                            onClear={() => setSelectedMetrics([])}
+                            selections={selectedMetrics}
+                            isOpen={isSelectOpen}
+                            placeholderText="Select a metric"
+                            menuAppendTo="parent"
+                            maxHeight="300px"
+                            chipGroupProps={{ numChips: 1 }}
+                            isGrouped
+                        >
+                            {Object.entries(METRIC_GROUPS).map(([group, metrics]) => (
+                                <SelectGroup label={group} key={group}>
+                                    {metrics.map((metric) => (
+                                        <SelectOption key={metric} value={metric}>
+                                            {METRIC_NAMES[metric]}
+                                        </SelectOption>
+                                    ))}
+                                </SelectGroup>
+                            ))}
+                        </Select>
+                    </FormGroup>
+                    <FormGroup label="Repeats per Scenario" fieldId="repeats">
+                        <NumberInput
+                            id="repeats"
+                            inputName="repeats"
+                            type="number"
+                            value={repeats}
+                            onChange={(e) => setRepeats(Number(e.target.value))}
+                            onPlus={() => setRepeats((r) => r + 1)}
+                            onMinus={() => setRepeats((r) => r - 1)}
+                            min={1}
+                        />
+                    </FormGroup>
+                </FormSection>
+            </Form>
+        </Modal>
+    )
+}
+
+NewPortfolioModal.propTypes = {
+    isOpen: PropTypes.bool.isRequired,
+    onSubmit: PropTypes.func.isRequired,
+    onCancel: PropTypes.func.isRequired,
+}
+
+export default NewPortfolioModal