From 5e5ab63b280eb446db4090733cd3ad2e97d02018 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Mon, 19 Jul 2021 15:47:23 +0200
Subject: refactor(ui): Restructure components per page

This change updates the source structure of the OpenDC frontend to
follow the page structure.
---
 .../modals/custom-components/NewPortfolioModal.js  | 139 ------------------
 .../modals/custom-components/NewScenarioModal.js   | 159 ---------------------
 .../modals/custom-components/NewTopologyModal.js   |  81 -----------
 3 files changed, 379 deletions(-)
 delete mode 100644 opendc-web/opendc-web-ui/src/components/modals/custom-components/NewPortfolioModal.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/modals/custom-components/NewScenarioModal.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/modals/custom-components/NewTopologyModal.js

(limited to 'opendc-web/opendc-web-ui/src/components/modals/custom-components')

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
deleted file mode 100644
index afe07597..00000000
--- a/opendc-web/opendc-web-ui/src/components/modals/custom-components/NewPortfolioModal.js
+++ /dev/null
@@ -1,139 +0,0 @@
-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
diff --git a/opendc-web/opendc-web-ui/src/components/modals/custom-components/NewScenarioModal.js b/opendc-web/opendc-web-ui/src/components/modals/custom-components/NewScenarioModal.js
deleted file mode 100644
index 94d0d424..00000000
--- a/opendc-web/opendc-web-ui/src/components/modals/custom-components/NewScenarioModal.js
+++ /dev/null
@@ -1,159 +0,0 @@
-import PropTypes from 'prop-types'
-import React, { useRef, useState } from 'react'
-import { Portfolio } from '../../../shapes'
-import Modal from '../Modal'
-import {
-    Checkbox,
-    Form,
-    FormGroup,
-    FormSection,
-    FormSelect,
-    FormSelectOption,
-    NumberInput,
-    TextInput,
-} from '@patternfly/react-core'
-import { useSchedulers, useTraces } from '../../../data/experiments'
-import { useProjectTopologies } from '../../../data/topology'
-import { usePortfolio } from '../../../data/project'
-
-const NewScenarioModal = ({ portfolioId, isOpen, onSubmit: onSubmitUpstream, onCancel: onCancelUpstream }) => {
-    const { data: portfolio } = usePortfolio(portfolioId)
-    const { data: topologies = [] } = useProjectTopologies(portfolio?.projectId)
-    const { data: traces = [] } = useTraces()
-    const { data: schedulers = [] } = useSchedulers()
-
-    const [isSubmitted, setSubmitted] = useState(false)
-    const [traceLoad, setTraceLoad] = useState(100)
-    const [trace, setTrace] = useState(undefined)
-    const [topology, setTopology] = useState(undefined)
-    const [scheduler, setScheduler] = useState(undefined)
-    const [failuresEnabled, setFailuresEnabled] = useState(false)
-    const [opPhenEnabled, setOpPhenEnabled] = useState(false)
-    const nameInput = useRef(null)
-
-    const resetState = () => {
-        setSubmitted(false)
-        setTraceLoad(100)
-        setTrace(undefined)
-        setTopology(undefined)
-        setScheduler(undefined)
-        setFailuresEnabled(false)
-        setOpPhenEnabled(false)
-        nameInput.current.value = ''
-    }
-
-    const onSubmit = (event) => {
-        setSubmitted(true)
-
-        if (event) {
-            event.preventDefault()
-        }
-
-        const name = nameInput.current.value
-
-        onSubmitUpstream(
-            name,
-            portfolio._id,
-            {
-                traceId: trace || traces[0]._id,
-                loadSamplingFraction: traceLoad / 100,
-            },
-            {
-                topologyId: topology || topologies[0]._id,
-            },
-            {
-                failuresEnabled,
-                performanceInterferenceEnabled: opPhenEnabled,
-                schedulerName: scheduler || schedulers[0].name,
-            }
-        )
-
-        resetState()
-        return true
-    }
-    const onCancel = () => {
-        onCancelUpstream()
-        resetState()
-    }
-
-    return (
-        <Modal title="New Scenario" isOpen={isOpen} onSubmit={onSubmit} onCancel={onCancel}>
-            <Form onSubmit={onSubmit}>
-                <FormGroup label="Name" fieldId="name" isRequired>
-                    <TextInput
-                        id="name"
-                        name="name"
-                        type="text"
-                        isDisabled={portfolio?.scenarioIds?.length === 0}
-                        defaultValue={portfolio?.scenarioIds?.length === 0 ? 'Base scenario' : ''}
-                        ref={nameInput}
-                    />
-                </FormGroup>
-                <FormSection title="Workload">
-                    <FormGroup label="Trace" fieldId="trace" isRequired>
-                        <FormSelect id="trace" name="trace" value={trace} onChange={setTrace}>
-                            {traces.map((trace) => (
-                                <FormSelectOption value={trace._id} key={trace._id} label={trace.name} />
-                            ))}
-                        </FormSelect>
-                    </FormGroup>
-                    <FormGroup label="Load Sampling Fraction" fieldId="trace-load" isRequired>
-                        <NumberInput
-                            name="trace-load"
-                            type="number"
-                            min={0}
-                            max={100}
-                            value={traceLoad}
-                            onMinus={() => setTraceLoad((load) => load - 1)}
-                            onPlus={() => setTraceLoad((load) => load + 1)}
-                            onChange={(e) => setTraceLoad(Number(e.target.value))}
-                            unit="%"
-                        />
-                    </FormGroup>
-                </FormSection>
-                <FormSection title="Topology">
-                    <FormGroup label="Topology" fieldId="topology" isRequired>
-                        <FormSelect id="topology" name="topology" value={topology} onChange={setTopology}>
-                            {topologies.map((topology) => (
-                                <FormSelectOption value={topology._id} key={topology._id} label={topology.name} />
-                            ))}
-                        </FormSelect>
-                    </FormGroup>
-
-                    <FormGroup label="Scheduler" fieldId="scheduler" isRequired>
-                        <FormSelect id="scheduler" name="scheduler" value={scheduler} onChange={setScheduler}>
-                            {schedulers.map((scheduler) => (
-                                <FormSelectOption value={scheduler.name} key={scheduler.name} label={scheduler.name} />
-                            ))}
-                        </FormSelect>
-                    </FormGroup>
-                </FormSection>
-                <FormSection title="Operational Phenomena">
-                    <Checkbox
-                        label="Failures"
-                        id="failures"
-                        name="failures"
-                        isChecked={failuresEnabled}
-                        onChange={() => setFailuresEnabled((e) => !e)}
-                    />
-                    <Checkbox
-                        label="Performance Interference"
-                        id="perf-interference"
-                        name="perf-interference"
-                        isChecked={opPhenEnabled}
-                        onChange={() => setOpPhenEnabled((e) => !e)}
-                    />
-                </FormSection>
-            </Form>
-        </Modal>
-    )
-}
-
-NewScenarioModal.propTypes = {
-    portfolioId: PropTypes.string,
-    isOpen: PropTypes.bool.isRequired,
-    onSubmit: PropTypes.func.isRequired,
-    onCancel: PropTypes.func.isRequired,
-}
-
-export default NewScenarioModal
diff --git a/opendc-web/opendc-web-ui/src/components/modals/custom-components/NewTopologyModal.js b/opendc-web/opendc-web-ui/src/components/modals/custom-components/NewTopologyModal.js
deleted file mode 100644
index 49952aec..00000000
--- a/opendc-web/opendc-web-ui/src/components/modals/custom-components/NewTopologyModal.js
+++ /dev/null
@@ -1,81 +0,0 @@
-import PropTypes from 'prop-types'
-import React, { useRef, useState } from 'react'
-import Modal from '../Modal'
-import { Form, FormGroup, FormSelect, FormSelectOption, TextInput } from '@patternfly/react-core'
-import { useProjectTopologies } from '../../../data/topology'
-
-const NewTopologyModal = ({ projectId, isOpen, onSubmit: onSubmitUpstream, onCancel: onCancelUpstream }) => {
-    const nameInput = useRef(null)
-    const [isSubmitted, setSubmitted] = useState(false)
-    const [originTopology, setOriginTopology] = useState(-1)
-    const [errors, setErrors] = useState({})
-
-    const { data: topologies = [] } = useProjectTopologies(projectId)
-
-    const clearState = () => {
-        nameInput.current.value = ''
-        setSubmitted(false)
-        setOriginTopology(-1)
-        setErrors({})
-    }
-
-    const onSubmit = (event) => {
-        setSubmitted(true)
-
-        if (event) {
-            event.preventDefault()
-        }
-
-        const name = nameInput.current.value
-
-        if (!name) {
-            setErrors({ name: true })
-            return false
-        } else if (originTopology === -1) {
-            onSubmitUpstream(name)
-        } else {
-            onSubmitUpstream(name, originTopology)
-        }
-
-        clearState()
-        return true
-    }
-
-    const onCancel = () => {
-        onCancelUpstream()
-        clearState()
-    }
-
-    return (
-        <Modal title="New Topology" isOpen={isOpen} onSubmit={onSubmit} onCancel={onCancel}>
-            <Form onSubmit={onSubmit}>
-                <FormGroup
-                    label="Name"
-                    fieldId="name"
-                    isRequired
-                    validated={isSubmitted && errors.name ? 'error' : 'default'}
-                    helperTextInvalid="This field cannot be empty"
-                >
-                    <TextInput id="name" name="name" type="text" isRequired ref={nameInput} />
-                </FormGroup>
-                <FormGroup label="Topology to duplicate" fieldId="origin" isRequired>
-                    <FormSelect id="origin" name="origin" value={originTopology} onChange={setOriginTopology}>
-                        <FormSelectOption value={-1} key={-1} label="None - start from scratch" />
-                        {topologies.map((topology) => (
-                            <FormSelectOption value={topology._id} key={topology._id} label={topology.name} />
-                        ))}
-                    </FormSelect>
-                </FormGroup>
-            </Form>
-        </Modal>
-    )
-}
-
-NewTopologyModal.propTypes = {
-    projectId: PropTypes.string,
-    isOpen: PropTypes.bool.isRequired,
-    onSubmit: PropTypes.func.isRequired,
-    onCancel: PropTypes.func.isRequired,
-}
-
-export default NewTopologyModal
-- 
cgit v1.2.3