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.

6 files changed, 312 insertions, 0 deletions

diff --git a/opendc-web/opendc-web-ui/src/components/util/BreadcrumbLink.js b/opendc-web/opendc-web-ui/src/components/util/BreadcrumbLink.js
new file mode 100644
index 00000000..c6ab214a
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/util/BreadcrumbLink.js
@@ -0,0 +1,37 @@
+/*
+ * 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'
+
+const BreadcrumbLink = ({ children, href, ...props }) => (
+    <Link href={href}>
+        <a {...props}>{children}</a>
+    </Link>
+)
+
+BreadcrumbLink.propTypes = {
+    children: PropTypes.node,
+    href: PropTypes.string.isRequired,
+}
+
+export default BreadcrumbLink
diff --git a/opendc-web/opendc-web-ui/src/components/util/NavItemLink.js b/opendc-web/opendc-web-ui/src/components/util/NavItemLink.js
new file mode 100644
index 00000000..c0d109bd
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/util/NavItemLink.js
@@ -0,0 +1,37 @@
+/*
+ * 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 Link from 'next/link'
+import PropTypes from 'prop-types'
+
+const NavItemLink = ({ children, href, ...props }) => (
+    <Link href={href}>
+        <a {...props}>{children}</a>
+    </Link>
+)
+
+NavItemLink.propTypes = {
+    children: PropTypes.node,
+    href: PropTypes.string.isRequired,
+}
+
+export default NavItemLink
diff --git a/opendc-web/opendc-web-ui/src/components/util/TableEmptyState.js b/opendc-web/opendc-web-ui/src/components/util/TableEmptyState.js
new file mode 100644
index 00000000..9d16ffbb
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/util/TableEmptyState.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 { Bullseye, EmptyState, EmptyStateBody, EmptyStateIcon, Spinner, Title } from '@patternfly/react-core'
+import { SearchIcon, CubesIcon } from '@patternfly/react-icons'
+import { Status } from '../../shapes'
+
+function TableEmptyState({
+    status,
+    isFiltering,
+    loadingTitle = 'Loading',
+    emptyTitle = 'No results found',
+    emptyText = 'No results found of this type.',
+    emptyAction = '',
+}) {
+    if (status === 'loading') {
+        return (
+            <Bullseye>
+                <EmptyState variant="xs">
+                    <EmptyStateIcon variant="container" component={Spinner} />
+                    <Title headingLevel="h4" size="md">
+                        {loadingTitle}
+                    </Title>
+                </EmptyState>
+            </Bullseye>
+        )
+    } else if (status === 'error') {
+        return (
+            <EmptyState variant="xs">
+                <Title headingLevel="h4" size="md">
+                    Unable to connect
+                </Title>
+                <EmptyStateBody>
+                    There was an error retrieving data. Check your connection and try again.
+                </EmptyStateBody>
+            </EmptyState>
+        )
+    } else if (status === 'idle') {
+        return (
+            <EmptyState variant="xs">
+                <EmptyStateIcon icon={CubesIcon} />
+                <Title headingLevel="h4" size="md">
+                    {emptyTitle}
+                </Title>
+                <EmptyStateBody>No results available at this moment.</EmptyStateBody>
+            </EmptyState>
+        )
+    } else if (isFiltering) {
+        return (
+            <EmptyState variant="xs">
+                <EmptyStateIcon icon={SearchIcon} />
+                <Title headingLevel="h4" size="md">
+                    No results found
+                </Title>
+                <EmptyStateBody>
+                    No results match this filter criteria. Remove all filters or clear all filters to show results.
+                </EmptyStateBody>
+            </EmptyState>
+        )
+    }
+
+    return (
+        <EmptyState variant="xs">
+            <EmptyStateIcon icon={CubesIcon} />
+            <Title headingLevel="h4" size="md">
+                {emptyTitle}
+            </Title>
+            <EmptyStateBody>{emptyText}</EmptyStateBody>
+            {emptyAction}
+        </EmptyState>
+    )
+}
+
+TableEmptyState.propTypes = {
+    status: Status.isRequired,
+    isFiltering: PropTypes.bool,
+    loadingTitle: PropTypes.string,
+    emptyTitle: PropTypes.string,
+    emptyText: PropTypes.string,
+    emptyAction: PropTypes.node,
+}
+
+export default TableEmptyState
diff --git a/opendc-web/opendc-web-ui/src/components/util/modals/ConfirmationModal.js b/opendc-web/opendc-web-ui/src/components/util/modals/ConfirmationModal.js
new file mode 100644
index 00000000..f6e1c98b
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/util/modals/ConfirmationModal.js
@@ -0,0 +1,27 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import Modal from './Modal'
+
+function ConfirmationModal({ title, message, isOpen, callback }) {
+    return (
+        <Modal
+            title={title}
+            isOpen={isOpen}
+            onSubmit={() => callback(true)}
+            onCancel={() => callback(false)}
+            submitButtonType="danger"
+            submitButtonText="Confirm"
+        >
+            {message}
+        </Modal>
+    )
+}
+
+ConfirmationModal.propTypes = {
+    title: PropTypes.string.isRequired,
+    message: PropTypes.string.isRequired,
+    isOpen: PropTypes.bool.isRequired,
+    callback: PropTypes.func.isRequired,
+}
+
+export default ConfirmationModal
diff --git a/opendc-web/opendc-web-ui/src/components/util/modals/Modal.js b/opendc-web/opendc-web-ui/src/components/util/modals/Modal.js
new file mode 100644
index 00000000..d4577062
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/util/modals/Modal.js
@@ -0,0 +1,38 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Button, Modal as PModal, ModalVariant } from '@patternfly/react-core'
+
+function Modal({ children, title, isOpen, onSubmit, onCancel, submitButtonType, submitButtonText }) {
+    const actions = [
+        <Button variant={submitButtonType} onClick={onSubmit} key="confirm">
+            {submitButtonText}
+        </Button>,
+        <Button variant="link" onClick={onCancel} key="cancel">
+            Cancel
+        </Button>,
+    ]
+
+    return (
+        <PModal variant={ModalVariant.small} isOpen={isOpen} onClose={onCancel} title={title} actions={actions}>
+            {children}
+        </PModal>
+    )
+}
+
+Modal.propTypes = {
+    title: PropTypes.string.isRequired,
+    isOpen: PropTypes.bool,
+    onSubmit: PropTypes.func.isRequired,
+    onCancel: PropTypes.func.isRequired,
+    submitButtonType: PropTypes.string,
+    submitButtonText: PropTypes.string,
+    children: PropTypes.node,
+}
+
+Modal.defaultProps = {
+    submitButtonType: 'primary',
+    submitButtonText: 'Save',
+    isOpen: false,
+}
+
+export default Modal
diff --git a/opendc-web/opendc-web-ui/src/components/util/modals/TextInputModal.js b/opendc-web/opendc-web-ui/src/components/util/modals/TextInputModal.js
new file mode 100644
index 00000000..392a729e
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/util/modals/TextInputModal.js
@@ -0,0 +1,70 @@
+import PropTypes from 'prop-types'
+import React, { useRef, useState } from 'react'
+import Modal from './Modal'
+import { Form, FormGroup, TextInput } from '@patternfly/react-core'
+
+function TextInputModal({ title, label, isOpen, callback, initialValue }) {
+    const textInput = useRef(null)
+    const [isSubmitted, setSubmitted] = useState(false)
+    const [isValid, setValid] = useState(true)
+
+    const resetState = () => {
+        textInput.current.value = ''
+        setSubmitted(false)
+        setValid(false)
+    }
+    const onSubmit = (event) => {
+        const value = textInput.current.value
+        setSubmitted(true)
+
+        if (event) {
+            event.preventDefault()
+        }
+
+        if (!value) {
+            setValid(false)
+            return false
+        }
+
+        callback(value)
+        resetState()
+        return true
+    }
+    const onCancel = () => {
+        callback(undefined)
+        resetState()
+    }
+
+    return (
+        <Modal title={title} isOpen={isOpen} onSubmit={onSubmit} onCancel={onCancel}>
+            <Form onSubmit={onSubmit}>
+                <FormGroup
+                    label={label}
+                    fieldId="text-input"
+                    isRequired
+                    validated={isSubmitted && !isValid ? 'error' : 'default'}
+                    helperTextInvalid="This field cannot be empty"
+                >
+                    <TextInput
+                        id="text-input"
+                        name="text-input"
+                        isRequired
+                        type="text"
+                        ref={textInput}
+                        defaultValue={initialValue}
+                    />
+                </FormGroup>
+            </Form>
+        </Modal>
+    )
+}
+
+TextInputModal.propTypes = {
+    title: PropTypes.string.isRequired,
+    label: PropTypes.string.isRequired,
+    isOpen: PropTypes.bool.isRequired,
+    callback: PropTypes.func.isRequired,
+    initialValue: PropTypes.string,
+}
+
+export default TextInputModal