merge: Integrate v2.1 progress into public repository

This pull request integrates the changes planned for the v2.1 release of
OpenDC into the public Github repository in order to sync the progress
of both repositories.

18 files changed, 835 insertions, 147 deletions

diff --git a/opendc-web/opendc-web-ui/src/components/projects/FilterButton.js b/opendc-web/opendc-web-ui/src/components/projects/FilterButton.js
deleted file mode 100644
index 664f9b46..00000000
--- a/opendc-web/opendc-web-ui/src/components/projects/FilterButton.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import classNames from 'classnames'
-import PropTypes from 'prop-types'
-import React from 'react'
-
-const FilterButton = ({ active, children, onClick }) => (
-    <button
-        className={classNames('btn btn-secondary', { active: active })}
-        onClick={() => {
-            if (!active) {
-                onClick()
-            }
-        }}
-    >
-        {children}
-    </button>
-)
-
-FilterButton.propTypes = {
-    active: PropTypes.bool.isRequired,
-    children: PropTypes.node.isRequired,
-    onClick: PropTypes.func.isRequired,
-}
-
-export default FilterButton
diff --git a/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.js b/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.js
index 2b9795d0..285217e9 100644
--- a/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.js
+++ b/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.js
@@ -1,13 +1,26 @@
 import React from 'react'
-import FilterLink from '../../containers/projects/FilterLink'
-import './FilterPanel.sass'
-
-const FilterPanel = () => (
-    <div className="btn-group filter-panel mb-2">
-        <FilterLink filter="SHOW_ALL">All Projects</FilterLink>
-        <FilterLink filter="SHOW_OWN">My Projects</FilterLink>
-        <FilterLink filter="SHOW_SHARED">Shared with me</FilterLink>
-    </div>
+import PropTypes from 'prop-types'
+import { ToggleGroup, ToggleGroupItem } from '@patternfly/react-core'
+import { filterPanel } from './FilterPanel.module.scss'
+
+export const FILTERS = { SHOW_ALL: 'All Projects', SHOW_OWN: 'My Projects', SHOW_SHARED: 'Shared with me' }
+
+const FilterPanel = ({ onSelect, activeFilter = 'SHOW_ALL' }) => (
+    <ToggleGroup className={`${filterPanel} mb-2`}>
+        {Object.keys(FILTERS).map((filter) => (
+            <ToggleGroupItem
+                key={filter}
+                onChange={() => activeFilter === filter || onSelect(filter)}
+                isSelected={activeFilter === filter}
+                text={FILTERS[filter]}
+            />
+        ))}
+    </ToggleGroup>
 )
 
+FilterPanel.propTypes = {
+    onSelect: PropTypes.func.isRequired,
+    activeFilter: PropTypes.string,
+}
+
 export default FilterPanel
diff --git a/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.module.scss b/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.module.scss
new file mode 100644
index 00000000..79cdf81a
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.module.scss
@@ -0,0 +1,7 @@
+.filterPanel {
+    display: flex;
+
+    button {
+        flex: 1 !important;
+    }
+}
diff --git a/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.sass b/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.sass
deleted file mode 100644
index f71cf6c8..00000000
--- a/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.sass
+++ /dev/null
@@ -1,5 +0,0 @@
-.filter-panel
-    display: flex
-
-    button
-        flex: 1 !important
diff --git a/opendc-web/opendc-web-ui/src/components/projects/NewPortfolio.js b/opendc-web/opendc-web-ui/src/components/projects/NewPortfolio.js
new file mode 100644
index 00000000..87ea059d
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/projects/NewPortfolio.js
@@ -0,0 +1,53 @@
+/*
+ * Copyright (c) 2021 AtLarge Research
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import PropTypes from 'prop-types'
+import { PlusIcon } from '@patternfly/react-icons'
+import { Button } from '@patternfly/react-core'
+import { useState } from 'react'
+import { useMutation } from 'react-query'
+import NewPortfolioModal from './NewPortfolioModal'
+
+function NewPortfolio({ projectId }) {
+    const [isVisible, setVisible] = useState(false)
+    const { mutate: addPortfolio } = useMutation('addPortfolio')
+
+    const onSubmit = (name, targets) => {
+        addPortfolio({ projectId, name, targets })
+        setVisible(false)
+    }
+
+    return (
+        <>
+            <Button icon={<PlusIcon />} isSmall onClick={() => setVisible(true)}>
+                New Portfolio
+            </Button>
+            <NewPortfolioModal isOpen={isVisible} onSubmit={onSubmit} onCancel={() => setVisible(false)} />
+        </>
+    )
+}
+
+NewPortfolio.propTypes = {
+    projectId: PropTypes.string,
+}
+
+export default NewPortfolio
diff --git a/opendc-web/opendc-web-ui/src/components/projects/NewPortfolioModal.js b/opendc-web/opendc-web-ui/src/components/projects/NewPortfolioModal.js
new file mode 100644
index 00000000..4276d7d4
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/projects/NewPortfolioModal.js
@@ -0,0 +1,161 @@
+/*
+ * Copyright (c) 2021 AtLarge Research
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import PropTypes from 'prop-types'
+import React, { useRef, useState } from 'react'
+import {
+    Form,
+    FormGroup,
+    FormSection,
+    NumberInput,
+    Select,
+    SelectGroup,
+    SelectOption,
+    SelectVariant,
+    TextInput,
+} from '@patternfly/react-core'
+import Modal from '../util/modals/Modal'
+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/projects/NewProject.js b/opendc-web/opendc-web-ui/src/components/projects/NewProject.js
new file mode 100644
index 00000000..984264dc
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/projects/NewProject.js
@@ -0,0 +1,39 @@
+import React, { useState } from 'react'
+import { Button } from '@patternfly/react-core'
+import { useMutation } from 'react-query'
+import { PlusIcon } from '@patternfly/react-icons'
+import { buttonContainer } from './NewProject.module.scss'
+import TextInputModal from '../util/modals/TextInputModal'
+
+/**
+ * A container for creating a new project.
+ */
+const NewProject = () => {
+    const [isVisible, setVisible] = useState(false)
+    const { mutate: addProject } = useMutation('addProject')
+
+    const onSubmit = (name) => {
+        if (name) {
+            addProject({ name })
+        }
+        setVisible(false)
+    }
+
+    return (
+        <>
+            <div className={buttonContainer}>
+                <Button
+                    icon={<PlusIcon />}
+                    color="primary"
+                    className="pf-u-float-right"
+                    onClick={() => setVisible(true)}
+                >
+                    New Project
+                </Button>
+            </div>
+            <TextInputModal title="New Project" label="Project name" isOpen={isVisible} callback={onSubmit} />
+        </>
+    )
+}
+
+export default NewProject
diff --git a/opendc-web/opendc-web-ui/src/components/projects/NewProject.module.scss b/opendc-web/opendc-web-ui/src/components/projects/NewProject.module.scss
new file mode 100644
index 00000000..5a0e74fc
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/projects/NewProject.module.scss
@@ -0,0 +1,26 @@
+/*!
+ * Copyright (c) 2021 AtLarge Research
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+.buttonContainer {
+    flex: 0 1 auto;
+    padding: 20px 0;
+}
diff --git a/opendc-web/opendc-web-ui/src/components/projects/NewProjectButtonComponent.js b/opendc-web/opendc-web-ui/src/components/projects/NewProjectButtonComponent.js
deleted file mode 100644
index 312671c6..00000000
--- a/opendc-web/opendc-web-ui/src/components/projects/NewProjectButtonComponent.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-
-const NewProjectButtonComponent = ({ onClick }) => (
-    <div className="bottom-btn-container">
-        <div className="btn btn-primary float-right" onClick={onClick}>
-            <span className="fa fa-plus mr-2" />
-            New Project
-        </div>
-    </div>
-)
-
-NewProjectButtonComponent.propTypes = {
-    onClick: PropTypes.func.isRequired,
-}
-
-export default NewProjectButtonComponent
diff --git a/opendc-web/opendc-web-ui/src/components/projects/NewTopology.js b/opendc-web/opendc-web-ui/src/components/projects/NewTopology.js
new file mode 100644
index 00000000..bf59e020
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/projects/NewTopology.js
@@ -0,0 +1,58 @@
+/*
+ * Copyright (c) 2021 AtLarge Research
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import PropTypes from 'prop-types'
+import { PlusIcon } from '@patternfly/react-icons'
+import { Button } from '@patternfly/react-core'
+import { useState } from 'react'
+import { useDispatch } from 'react-redux'
+import { addTopology } from '../../redux/actions/topologies'
+import NewTopologyModal from './NewTopologyModal'
+
+function NewTopology({ projectId }) {
+    const [isVisible, setVisible] = useState(false)
+    const dispatch = useDispatch()
+
+    const onSubmit = (name, duplicateId) => {
+        dispatch(addTopology(projectId, name, duplicateId))
+        setVisible(false)
+    }
+    return (
+        <>
+            <Button icon={<PlusIcon />} isSmall onClick={() => setVisible(true)}>
+                New Topology
+            </Button>
+            <NewTopologyModal
+                projectId={projectId}
+                isOpen={isVisible}
+                onSubmit={onSubmit}
+                onCancel={() => setVisible(false)}
+            />
+        </>
+    )
+}
+
+NewTopology.propTypes = {
+    projectId: PropTypes.string,
+}
+
+export default NewTopology
diff --git a/opendc-web/opendc-web-ui/src/components/projects/NewTopologyModal.js b/opendc-web/opendc-web-ui/src/components/projects/NewTopologyModal.js
new file mode 100644
index 00000000..a495f73e
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/projects/NewTopologyModal.js
@@ -0,0 +1,103 @@
+/*
+ * Copyright (c) 2021 AtLarge Research
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import PropTypes from 'prop-types'
+import React, { useRef, useState } from 'react'
+import { Form, FormGroup, FormSelect, FormSelectOption, TextInput } from '@patternfly/react-core'
+import { useProjectTopologies } from '../../data/topology'
+import Modal from '../util/modals/Modal'
+
+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
diff --git a/opendc-web/opendc-web-ui/src/components/projects/PortfolioTable.js b/opendc-web/opendc-web-ui/src/components/projects/PortfolioTable.js
new file mode 100644
index 00000000..45e399ed
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/projects/PortfolioTable.js
@@ -0,0 +1,97 @@
+/*
+ * Copyright (c) 2021 AtLarge Research
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import PropTypes from 'prop-types'
+import Link from 'next/link'
+import { Table, TableBody, TableHeader } from '@patternfly/react-table'
+import React from 'react'
+import TableEmptyState from '../util/TableEmptyState'
+import { useProjectPortfolios } from '../../data/project'
+import { useMutation } from 'react-query'
+
+const PortfolioTable = ({ projectId }) => {
+    const { status, data: portfolios = [] } = useProjectPortfolios(projectId)
+    const { mutate: deletePortfolio } = useMutation('deletePortfolio')
+
+    const columns = ['Name', 'Scenarios', 'Metrics', 'Repeats']
+    const rows =
+        portfolios.length > 0
+            ? portfolios.map((portfolio) => [
+                  {
+                      title: (
+                          <Link href={`/projects/${portfolio.projectId}/portfolios/${portfolio._id}`}>
+                              {portfolio.name}
+                          </Link>
+                      ),
+                  },
+
+                  portfolio.scenarioIds.length === 1 ? '1 scenario' : `${portfolio.scenarioIds.length} scenarios`,
+
+                  portfolio.targets.enabledMetrics.length === 1
+                      ? '1 metric'
+                      : `${portfolio.targets.enabledMetrics.length} metrics`,
+                  portfolio.targets.repeatsPerScenario === 1
+                      ? '1 repeat'
+                      : `${portfolio.targets.repeatsPerScenario} repeats`,
+              ])
+            : [
+                  {
+                      heightAuto: true,
+                      cells: [
+                          {
+                              props: { colSpan: 4 },
+                              title: (
+                                  <TableEmptyState
+                                      status={status}
+                                      loadingTitle="Loading portfolios"
+                                      emptyTitle="No portfolios"
+                                      emptyText="You have not created any portfolio for this project yet. Click the New Portfolio button to create one."
+                                  />
+                              ),
+                          },
+                      ],
+                  },
+              ]
+
+    const actions =
+        portfolios.length > 0
+            ? [
+                  {
+                      title: 'Delete Portfolio',
+                      onClick: (_, rowId) => deletePortfolio(portfolios[rowId]._id),
+                  },
+              ]
+            : []
+
+    return (
+        <Table aria-label="Portfolio List" variant="compact" cells={columns} rows={rows} actions={actions}>
+            <TableHeader />
+            <TableBody />
+        </Table>
+    )
+}
+
+PortfolioTable.propTypes = {
+    projectId: PropTypes.string,
+}
+
+export default PortfolioTable
diff --git a/opendc-web/opendc-web-ui/src/components/projects/ProjectActionButtons.js b/opendc-web/opendc-web-ui/src/components/projects/ProjectActionButtons.js
deleted file mode 100644
index 1c76cc7f..00000000
--- a/opendc-web/opendc-web-ui/src/components/projects/ProjectActionButtons.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-import { Link } from 'react-router-dom'
-
-const ProjectActionButtons = ({ projectId, onViewUsers, onDelete }) => (
-    <td className="text-right">
-        <Link to={'/projects/' + projectId} className="btn btn-outline-primary btn-sm mr-2" title="Open this project">
-            <span className="fa fa-play" />
-        </Link>
-        <div
-            className="btn btn-outline-success btn-sm disabled mr-2"
-            title="View and edit collaborators (not supported currently)"
-            onClick={() => onViewUsers(projectId)}
-        >
-            <span className="fa fa-users" />
-        </div>
-        <div className="btn btn-outline-danger btn-sm" title="Delete this project" onClick={() => onDelete(projectId)}>
-            <span className="fa fa-trash" />
-        </div>
-    </td>
-)
-
-ProjectActionButtons.propTypes = {
-    projectId: PropTypes.string.isRequired,
-    onViewUsers: PropTypes.func,
-    onDelete: PropTypes.func,
-}
-
-export default ProjectActionButtons
diff --git a/opendc-web/opendc-web-ui/src/components/projects/ProjectAuthList.js b/opendc-web/opendc-web-ui/src/components/projects/ProjectAuthList.js
deleted file mode 100644
index 8eb4f93b..00000000
--- a/opendc-web/opendc-web-ui/src/components/projects/ProjectAuthList.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-import Shapes from '../../shapes/index'
-import ProjectAuthRow from './ProjectAuthRow'
-
-const ProjectAuthList = ({ authorizations }) => {
-    return (
-        <div className="vertically-expanding-container">
-            {authorizations.length === 0 ? (
-                <div className="alert alert-info">
-                    <span className="info-icon fa fa-question-circle mr-2" />
-                    <strong>No projects here yet...</strong> Add some with the 'New Project' button!
-                </div>
-            ) : (
-                <table className="table table-striped">
-                    <thead>
-                        <tr>
-                            <th>Project name</th>
-                            <th>Last edited</th>
-                            <th>Access rights</th>
-                            <th />
-                        </tr>
-                    </thead>
-                    <tbody>
-                        {authorizations.map((authorization) => (
-                            <ProjectAuthRow projectAuth={authorization} key={authorization.project._id} />
-                        ))}
-                    </tbody>
-                </table>
-            )}
-        </div>
-    )
-}
-
-ProjectAuthList.propTypes = {
-    authorizations: PropTypes.arrayOf(Shapes.Authorization).isRequired,
-}
-
-export default ProjectAuthList
diff --git a/opendc-web/opendc-web-ui/src/components/projects/ProjectAuthRow.js b/opendc-web/opendc-web-ui/src/components/projects/ProjectAuthRow.js
deleted file mode 100644
index 3f904061..00000000
--- a/opendc-web/opendc-web-ui/src/components/projects/ProjectAuthRow.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import classNames from 'classnames'
-import React from 'react'
-import ProjectActions from '../../containers/projects/ProjectActions'
-import Shapes from '../../shapes/index'
-import { AUTH_DESCRIPTION_MAP, AUTH_ICON_MAP } from '../../util/authorizations'
-import { parseAndFormatDateTime } from '../../util/date-time'
-
-const ProjectAuthRow = ({ projectAuth }) => (
-    <tr>
-        <td className="pt-3">{projectAuth.project.name}</td>
-        <td className="pt-3">{parseAndFormatDateTime(projectAuth.project.datetimeLastEdited)}</td>
-        <td className="pt-3">
-            <span className={classNames('fa', 'fa-' + AUTH_ICON_MAP[projectAuth.authorizationLevel], 'mr-2')} />
-            {AUTH_DESCRIPTION_MAP[projectAuth.authorizationLevel]}
-        </td>
-        <ProjectActions projectId={projectAuth.project._id} />
-    </tr>
-)
-
-ProjectAuthRow.propTypes = {
-    projectAuth: Shapes.Authorization.isRequired,
-}
-
-export default ProjectAuthRow
diff --git a/opendc-web/opendc-web-ui/src/components/projects/ProjectOverview.js b/opendc-web/opendc-web-ui/src/components/projects/ProjectOverview.js
new file mode 100644
index 00000000..65b8f5a0
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/projects/ProjectOverview.js
@@ -0,0 +1,98 @@
+/*
+ * Copyright (c) 2021 AtLarge Research
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import PropTypes from 'prop-types'
+import {
+    Card,
+    CardActions,
+    CardBody,
+    CardHeader,
+    CardTitle,
+    DescriptionList,
+    DescriptionListDescription,
+    DescriptionListGroup,
+    DescriptionListTerm,
+    Grid,
+    GridItem,
+    Skeleton,
+} from '@patternfly/react-core'
+import NewTopology from './NewTopology'
+import TopologyTable from './TopologyTable'
+import NewPortfolio from './NewPortfolio'
+import PortfolioTable from './PortfolioTable'
+import { useProject } from '../../data/project'
+
+function ProjectOverview({ projectId }) {
+    const { data: project } = useProject(projectId)
+
+    return (
+        <Grid hasGutter>
+            <GridItem md={2}>
+                <Card>
+                    <CardTitle>Details</CardTitle>
+                    <CardBody>
+                        <DescriptionList>
+                            <DescriptionListGroup>
+                                <DescriptionListTerm>Name</DescriptionListTerm>
+                                <DescriptionListDescription>
+                                    {project?.name ?? <Skeleton screenreaderText="Loading project" />}
+                                </DescriptionListDescription>
+                            </DescriptionListGroup>
+                        </DescriptionList>
+                    </CardBody>
+                </Card>
+            </GridItem>
+            <GridItem md={5}>
+                <Card>
+                    <CardHeader>
+                        <CardActions>
+                            <NewTopology projectId={projectId} />
+                        </CardActions>
+                        <CardTitle>Topologies</CardTitle>
+                    </CardHeader>
+                    <CardBody>
+                        <TopologyTable projectId={projectId} />
+                    </CardBody>
+                </Card>
+            </GridItem>
+            <GridItem md={5}>
+                <Card>
+                    <CardHeader>
+                        <CardActions>
+                            <NewPortfolio projectId={projectId} />
+                        </CardActions>
+                        <CardTitle>Portfolios</CardTitle>
+                    </CardHeader>
+                    <CardBody>
+                        <PortfolioTable projectId={projectId} />
+                    </CardBody>
+                </Card>
+            </GridItem>
+        </Grid>
+    )
+}
+
+ProjectOverview.propTypes = {
+    projectId: PropTypes.string,
+}
+
+export default ProjectOverview
diff --git a/opendc-web/opendc-web-ui/src/components/projects/ProjectTable.js b/opendc-web/opendc-web-ui/src/components/projects/ProjectTable.js
new file mode 100644
index 00000000..a7290259
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/projects/ProjectTable.js
@@ -0,0 +1,76 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import Link from 'next/link'
+import { Project, Status } from '../../shapes'
+import { Table, TableBody, TableHeader } from '@patternfly/react-table'
+import { parseAndFormatDateTime } from '../../util/date-time'
+import { AUTH_DESCRIPTION_MAP, AUTH_ICON_MAP } from '../../util/authorizations'
+import { useAuth } from '../../auth'
+import TableEmptyState from '../util/TableEmptyState'
+
+const ProjectTable = ({ status, projects, onDelete, isFiltering }) => {
+    const { user } = useAuth()
+    const columns = ['Project name', 'Last edited', 'Access Rights']
+    const rows =
+        projects.length > 0
+            ? projects.map((project) => {
+                  const { level } = project.authorizations.find((auth) => auth.userId === user.sub)
+                  const Icon = AUTH_ICON_MAP[level]
+                  return [
+                      {
+                          title: <Link href={`/projects/${project._id}`}>{project.name}</Link>,
+                      },
+                      parseAndFormatDateTime(project.datetimeLastEdited),
+                      {
+                          title: (
+                              <>
+                                  <Icon className="pf-u-mr-md" key="auth" /> {AUTH_DESCRIPTION_MAP[level]}
+                              </>
+                          ),
+                      },
+                  ]
+              })
+            : [
+                  {
+                      heightAuto: true,
+                      cells: [
+                          {
+                              props: { colSpan: 3 },
+                              title: (
+                                  <TableEmptyState
+                                      status={status}
+                                      loadingTitle="Loading Projects"
+                                      isFiltering={isFiltering}
+                                  />
+                              ),
+                          },
+                      ],
+                  },
+              ]
+
+    const actions =
+        projects.length > 0
+            ? [
+                  {
+                      title: 'Delete Project',
+                      onClick: (_, rowId) => onDelete(projects[rowId]),
+                  },
+              ]
+            : []
+
+    return (
+        <Table aria-label="Project List" variant="compact" cells={columns} rows={rows} actions={actions}>
+            <TableHeader />
+            <TableBody />
+        </Table>
+    )
+}
+
+ProjectTable.propTypes = {
+    status: Status.isRequired,
+    isFiltering: PropTypes.bool,
+    projects: PropTypes.arrayOf(Project).isRequired,
+    onDelete: PropTypes.func,
+}
+
+export default ProjectTable
diff --git a/opendc-web/opendc-web-ui/src/components/projects/TopologyTable.js b/opendc-web/opendc-web-ui/src/components/projects/TopologyTable.js
new file mode 100644
index 00000000..80099ece
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/projects/TopologyTable.js
@@ -0,0 +1,95 @@
+/*
+ * Copyright (c) 2021 AtLarge Research
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import PropTypes from 'prop-types'
+import Link from 'next/link'
+import { Table, TableBody, TableHeader } from '@patternfly/react-table'
+import React from 'react'
+import TableEmptyState from '../util/TableEmptyState'
+import { parseAndFormatDateTime } from '../../util/date-time'
+import { useMutation } from 'react-query'
+import { useProjectTopologies } from '../../data/topology'
+
+const TopologyTable = ({ projectId }) => {
+    const { status, data: topologies = [] } = useProjectTopologies(projectId)
+    const { mutate: deleteTopology } = useMutation('deleteTopology')
+
+    const columns = ['Name', 'Rooms', 'Last Edited']
+    const rows =
+        topologies.length > 0
+            ? topologies.map((topology) => [
+                  {
+                      title: (
+                          <Link href={`/projects/${topology.projectId}/topologies/${topology._id}`}>
+                              {topology.name}
+                          </Link>
+                      ),
+                  },
+                  topology.rooms.length === 1 ? '1 room' : `${topology.rooms.length} rooms`,
+                  parseAndFormatDateTime(topology.datetimeLastEdited),
+              ])
+            : [
+                  {
+                      heightAuto: true,
+                      cells: [
+                          {
+                              props: { colSpan: 3 },
+                              title: (
+                                  <TableEmptyState
+                                      status={status}
+                                      loadingTitle="Loading topologies"
+                                      emptyTitle="No topologies"
+                                      emptyText="You have not created any topology for this project yet. Click the New Topology button to create one."
+                                  />
+                              ),
+                          },
+                      ],
+                  },
+              ]
+
+    const actionResolver = (_, { rowIndex }) => [
+        {
+            title: 'Delete Topology',
+            onClick: (_, rowId) => deleteTopology(topologies[rowId]._id),
+            isDisabled: rowIndex === 0,
+        },
+    ]
+
+    return (
+        <Table
+            aria-label="Topology List"
+            variant="compact"
+            cells={columns}
+            rows={rows}
+            actionResolver={topologies.length > 0 ? actionResolver : () => []}
+        >
+            <TableHeader />
+            <TableBody />
+        </Table>
+    )
+}
+
+TopologyTable.propTypes = {
+    projectId: PropTypes.string,
+}
+
+export default TopologyTable