1 files changed, 115 insertions, 0 deletions
diff --git a/opendc-web/opendc-web-server/src/main/webui/components/projects/TopologyTable.js b/opendc-web/opendc-web-server/src/main/webui/components/projects/TopologyTable.js
new file mode 100644
index 00000000..1c2c4f04
--- /dev/null
+++ b/opendc-web/opendc-web-server/src/main/webui/components/projects/TopologyTable.js
@@ -0,0 +1,115 @@
+/*
+ * 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 { Bullseye, AlertGroup, Alert, AlertVariant, AlertActionCloseButton } from '@patternfly/react-core'
+import PropTypes from 'prop-types'
+import Link from 'next/link'
+import { Tr, Th, Thead, Td, ActionsColumn, Tbody, TableComposable } from '@patternfly/react-table'
+import React, { useState } from 'react'
+import TableEmptyState from '../util/TableEmptyState'
+import { parseAndFormatDateTime } from '../../util/date-time'
+import { useTopologies, useDeleteTopology } from '../../data/topology'
+
+function TopologyTable({ projectId }) {
+    const [error, setError] = useState('')
+
+    const { status, data: topologies = [] } = useTopologies(projectId)
+    const { mutate: deleteTopology } = useDeleteTopology({
+        onError: (error) => setError(error),
+    })
+
+    const actions = ({ number }) => [
+        {
+            title: 'Delete Topology',
+            onClick: () => deleteTopology({ projectId, number }),
+            isDisabled: number === 0,
+        },
+    ]
+
+    return (
+        <>
+            <AlertGroup isToast>
+                {error && (
+                    <Alert
+                        isLiveRegion
+                        variant={AlertVariant.danger}
+                        title={error}
+                        actionClose={
+                            <AlertActionCloseButton
+                                title={error}
+                                variantLabel="danger alert"
+                                onClose={() => setError(null)}
+                            />
+                        }
+                    />
+                )}
+            </AlertGroup>
+            <TableComposable aria-label="Topology List" variant="compact">
+                <Thead>
+                    <Tr>
+                        <Th>Name</Th>
+                        <Th>Rooms</Th>
+                        <Th>Last Edited</Th>
+                    </Tr>
+                </Thead>
+                <Tbody>
+                    {topologies.map((topology) => (
+                        <Tr key={topology.id}>
+                            <Td dataLabel="Name">
+                                <Link href={`/projects/${projectId}/topologies/${topology.number}`}>
+                                    {topology.name}
+                                </Link>
+                            </Td>
+                            <Td dataLabel="Rooms">
+                                {topology.rooms.length === 1 ? '1 room' : `${topology.rooms.length} rooms`}
+                            </Td>
+                            <Td dataLabel="Last Edited">{parseAndFormatDateTime(topology.updatedAt)}</Td>
+                            <Td isActionCell>
+                                <ActionsColumn items={actions(topology)} />
+                            </Td>
+                        </Tr>
+                    ))}
+                    {topologies.length === 0 && (
+                        <Tr>
+                            <Td colSpan={3}>
+                                <Bullseye>
+                                    <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."
+                                    />
+                                </Bullseye>
+                            </Td>
+                        </Tr>
+                    )}
+                </Tbody>
+            </TableComposable>
+        </>
+    )
+}
+
+TopologyTable.propTypes = {
+    projectId: PropTypes.number,
+}
+
+export default TopologyTable