diff options
3 files changed, 20 insertions, 21 deletions
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 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 761e7f9a..213a4868 100644 --- a/opendc-web/opendc-web-ui/src/components/topologies/TopologyOverview.js +++ b/opendc-web/opendc-web-ui/src/components/topologies/TopologyOverview.js @@ -38,7 +38,7 @@ import { useTopology } from '../../data/topology' import { parseAndFormatDateTime } from '../../util/date-time' import RoomTable from './RoomTable' -function TopologyOverview({ topologyId }) { +function TopologyOverview({ topologyId, onSelect }) { const { data: topology } = useTopology(topologyId) return ( <Grid hasGutter> @@ -71,7 +71,7 @@ function TopologyOverview({ topologyId }) { <Card> <CardTitle>Rooms</CardTitle> <CardBody> - <RoomTable topologyId={topologyId} /> + <RoomTable topologyId={topologyId} onSelect={(room) => onSelect('room', room)} /> </CardBody> </Card> </GridItem> @@ -81,6 +81,7 @@ function TopologyOverview({ topologyId }) { TopologyOverview.propTypes = { topologyId: PropTypes.string, + onSelect: PropTypes.func, } export default TopologyOverview diff --git a/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js b/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js index c2753144..ae26ae83 100644 --- a/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js +++ b/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js @@ -24,7 +24,7 @@ import { useRouter } from 'next/router' import TopologyOverview from '../../../../components/topologies/TopologyOverview' import { useProject } from '../../../../data/project' import { useDispatch } from 'react-redux' -import React, { useEffect, useRef, useState } from 'react' +import React, { useEffect, useState } from 'react' import Head from 'next/head' import { AppPage } from '../../../../components/AppPage' import { @@ -42,6 +42,7 @@ import { } from '@patternfly/react-core' import BreadcrumbLink from '../../../../components/util/BreadcrumbLink' import TopologyMap from '../../../../components/topologies/TopologyMap' +import { goToRoom } from '../../../../redux/actions/interaction-level' import { openTopology } from '../../../../redux/actions/topologies' /** @@ -61,8 +62,6 @@ function Topology() { }, [topologyId, dispatch]) const [activeTab, setActiveTab] = useState('overview') - const overviewRef = useRef(null) - const floorPlanRef = useRef(null) const breadcrumb = ( <Breadcrumb> @@ -95,31 +94,31 @@ function Topology() { onSelect={(_, tabIndex) => setActiveTab(tabIndex)} className="pf-m-page-insets" > - <Tab - eventKey="overview" - title={<TabTitleText>Overview</TabTitleText>} - tabContentId="overview" - tabContentRef={overviewRef} - /> + <Tab eventKey="overview" title={<TabTitleText>Overview</TabTitleText>} tabContentId="overview" /> <Tab eventKey="floor-plan" title={<TabTitleText>Floor Plan</TabTitleText>} tabContentId="floor-plan" - tabContentRef={floorPlanRef} /> </Tabs> </PageSection> <PageSection padding={activeTab === 'floor-plan' && { default: 'noPadding' }} isFilled> - <TabContent eventKey="overview" id="overview" ref={overviewRef} aria-label="Overview tab"> - <TopologyOverview topologyId={topologyId} /> + <TabContent id="overview" aria-label="Overview tab" hidden={activeTab !== 'overview'}> + <TopologyOverview + topologyId={topologyId} + onSelect={(type, obj) => { + if (type === 'room') { + dispatch(goToRoom(obj._id)) + setActiveTab('floor-plan') + } + }} + /> </TabContent> <TabContent - eventKey="floor-plan" id="floor-plan" - ref={floorPlanRef} aria-label="Floor Plan tab" className="pf-u-h-100" - hidden + hidden={activeTab !== 'floor-plan'} > <TopologyMap /> </TabContent> |