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 ++++++++++++++++++++++
 .../src/components/topologies/TopologyOverview.js  | 11 +++-
 .../src/redux/actions/interaction-level.js         |  7 +++
 3 files changed, 87 insertions(+), 1 deletion(-)
 create mode 100644 opendc-web/opendc-web-ui/src/components/topologies/RoomTable.js

(limited to 'opendc-web')

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
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/TopologyOverview.js b/opendc-web/opendc-web-ui/src/components/topologies/TopologyOverview.js
index f773dcd1..761e7f9a 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/TopologyOverview.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/TopologyOverview.js
@@ -33,12 +33,13 @@ import {
     GridItem,
     Skeleton,
 } from '@patternfly/react-core'
+import React from 'react'
 import { useTopology } from '../../data/topology'
 import { parseAndFormatDateTime } from '../../util/date-time'
+import RoomTable from './RoomTable'
 
 function TopologyOverview({ topologyId }) {
     const { data: topology } = useTopology(topologyId)
-
     return (
         <Grid hasGutter>
             <GridItem md={2}>
@@ -66,6 +67,14 @@ function TopologyOverview({ topologyId }) {
                     </CardBody>
                 </Card>
             </GridItem>
+            <GridItem md={5}>
+                <Card>
+                    <CardTitle>Rooms</CardTitle>
+                    <CardBody>
+                        <RoomTable topologyId={topologyId} />
+                    </CardBody>
+                </Card>
+            </GridItem>
         </Grid>
     )
 }
diff --git a/opendc-web/opendc-web-ui/src/redux/actions/interaction-level.js b/opendc-web/opendc-web-ui/src/redux/actions/interaction-level.js
index ff6b1fa3..8381eeef 100644
--- a/opendc-web/opendc-web-ui/src/redux/actions/interaction-level.js
+++ b/opendc-web/opendc-web-ui/src/redux/actions/interaction-level.js
@@ -3,6 +3,13 @@ export const GO_FROM_ROOM_TO_RACK = 'GO_FROM_ROOM_TO_RACK'
 export const GO_FROM_RACK_TO_MACHINE = 'GO_FROM_RACK_TO_MACHINE'
 export const GO_DOWN_ONE_INTERACTION_LEVEL = 'GO_DOWN_ONE_INTERACTION_LEVEL'
 
+export function goToRoom(roomId) {
+    return {
+        type: GO_FROM_BUILDING_TO_ROOM,
+        roomId,
+    }
+}
+
 export function goFromBuildingToRoom(roomId) {
     return (dispatch, getState) => {
         const { interactionLevel } = getState()
-- 
cgit v1.2.3