From 28a4259c43e6180723b15a8c36a9b36871420f8a Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Tue, 20 Jul 2021 14:59:58 +0200
Subject: feat(ui): Add table view for topology rooms

---
 .../src/components/topologies/RoomTable.js         | 70 ++++++++++++++++++++++
 1 file changed, 70 insertions(+)
 create mode 100644 opendc-web/opendc-web-ui/src/components/topologies/RoomTable.js

(limited to 'opendc-web/opendc-web-ui/src/components/topologies/RoomTable.js')

diff --git a/opendc-web/opendc-web-ui/src/components/topologies/RoomTable.js b/opendc-web/opendc-web-ui/src/components/topologies/RoomTable.js
new file mode 100644
index 00000000..8a5c401f
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/RoomTable.js
@@ -0,0 +1,70 @@
+import { Button } from '@patternfly/react-core'
+import PropTypes from 'prop-types'
+import React from 'react'
+import { useDispatch } from 'react-redux'
+import { useTopology } from '../../data/topology'
+import { Table, TableBody, TableHeader } from '@patternfly/react-table'
+import { goToRoom } from '../../redux/actions/interaction-level'
+import { deleteRoom } from '../../redux/actions/topology/room'
+import TableEmptyState from '../util/TableEmptyState'
+
+function RoomTable({ topologyId }) {
+    const dispatch = useDispatch()
+    const { status, data: topology } = useTopology(topologyId)
+
+    const onClick = (room) => dispatch(goToRoom(room._id))
+    const onDelete = (room) => dispatch(deleteRoom(room._id))
+
+    const columns = ['Name', 'Tiles', 'Racks']
+    const rows =
+        topology?.rooms.length > 0
+            ? topology.rooms.map((room) => {
+                  const tileCount = room.tiles.length
+                  const rackCount = room.tiles.filter((tile) => tile.rack).length
+                  return [
+                      {
+                          title: (
+                              <Button variant="link" isInline onClick={() => onClick(room)}>
+                                  {room.name}
+                              </Button>
+                          ),
+                      },
+                      tileCount === 1 ? '1 tile' : `${tileCount} tiles`,
+                      rackCount === 1 ? '1 rack' : `${rackCount} racks`,
+                  ]
+              })
+            : [
+                  {
+                      heightAuto: true,
+                      cells: [
+                          {
+                              props: { colSpan: 3 },
+                              title: <TableEmptyState status={status} loadingTitle="Loading Rooms" />,
+                          },
+                      ],
+                  },
+              ]
+
+    const actions =
+        topology?.rooms.length > 0
+            ? [
+                  {
+                      title: 'Delete room',
+                      onClick: (_, rowId) => onDelete(topology.rooms[rowId]),
+                  },
+              ]
+            : []
+
+    return (
+        <Table aria-label="Room list" variant="compact" cells={columns} rows={rows} actions={actions}>
+            <TableHeader />
+            <TableBody />
+        </Table>
+    )
+}
+
+RoomTable.propTypes = {
+    topologyId: PropTypes.string,
+}
+
+export default RoomTable
-- 
cgit v1.2.3


From 7f083b47c2e2333819823fd7835332a0f486b626 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Wed, 21 Jul 2021 17:31:45 +0200
Subject: feat(ui): Toggle to Floor Plan on room select

---
 opendc-web/opendc-web-ui/src/components/topologies/RoomTable.js | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

(limited to 'opendc-web/opendc-web-ui/src/components/topologies/RoomTable.js')

diff --git a/opendc-web/opendc-web-ui/src/components/topologies/RoomTable.js b/opendc-web/opendc-web-ui/src/components/topologies/RoomTable.js
index 8a5c401f..9bf369e9 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/RoomTable.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/RoomTable.js
@@ -4,15 +4,13 @@ import React from 'react'
 import { useDispatch } from 'react-redux'
 import { useTopology } from '../../data/topology'
 import { Table, TableBody, TableHeader } from '@patternfly/react-table'
-import { goToRoom } from '../../redux/actions/interaction-level'
 import { deleteRoom } from '../../redux/actions/topology/room'
 import TableEmptyState from '../util/TableEmptyState'
 
-function RoomTable({ topologyId }) {
+function RoomTable({ topologyId, onSelect }) {
     const dispatch = useDispatch()
     const { status, data: topology } = useTopology(topologyId)
 
-    const onClick = (room) => dispatch(goToRoom(room._id))
     const onDelete = (room) => dispatch(deleteRoom(room._id))
 
     const columns = ['Name', 'Tiles', 'Racks']
@@ -24,7 +22,7 @@ function RoomTable({ topologyId }) {
                   return [
                       {
                           title: (
-                              <Button variant="link" isInline onClick={() => onClick(room)}>
+                              <Button variant="link" isInline onClick={() => onSelect(room)}>
                                   {room.name}
                               </Button>
                           ),
@@ -65,6 +63,7 @@ function RoomTable({ topologyId }) {
 
 RoomTable.propTypes = {
     topologyId: PropTypes.string,
+    onSelect: PropTypes.func,
 }
 
 export default RoomTable
-- 
cgit v1.2.3