1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
|
import PropTypes from 'prop-types'
import React from 'react'
import { InteractionLevel } from '../../../shapes'
import BuildingSidebar from './building/BuildingSidebar'
import {
Button,
DrawerActions,
DrawerCloseButton,
DrawerHead,
DrawerPanelBody,
DrawerPanelContent,
Flex,
Title,
} from '@patternfly/react-core'
import { AngleLeftIcon } from '@patternfly/react-icons'
import { useDispatch } from 'react-redux'
import { backButton } from './TopologySidebar.module.scss'
import RoomSidebar from './room/RoomSidebar'
import RackSidebar from './rack/RackSidebar'
import MachineSidebar from './machine/MachineSidebar'
import { goDownOneInteractionLevel } from '../../../redux/actions/interaction-level'
const name = {
BUILDING: 'Building',
ROOM: 'Room',
RACK: 'Rack',
MACHINE: 'Machine',
}
function TopologySidebar({ interactionLevel, onClose }) {
let sidebarContent
switch (interactionLevel.mode) {
case 'BUILDING':
sidebarContent = <BuildingSidebar />
break
case 'ROOM':
sidebarContent = <RoomSidebar roomId={interactionLevel.roomId} />
break
case 'RACK':
sidebarContent = <RackSidebar tileId={interactionLevel.tileId} />
break
case 'MACHINE':
sidebarContent = <MachineSidebar tileId={interactionLevel.tileId} position={interactionLevel.position} />
break
default:
sidebarContent = 'Missing Content'
}
const dispatch = useDispatch()
const onClick = () => dispatch(goDownOneInteractionLevel())
return (
<DrawerPanelContent isResizable defaultSize="450px" minSize="400px">
<DrawerHead>
<Flex>
<Button
variant="tertiary"
isSmall
className={backButton}
onClick={interactionLevel.mode === 'BUILDING' ? onClose : onClick}
>
<AngleLeftIcon />
</Button>
<Title className="pf-u-align-self-center" headingLevel="h1">
{name[interactionLevel.mode]}
</Title>
</Flex>
<DrawerActions>
<DrawerCloseButton onClose={onClose} />
</DrawerActions>
</DrawerHead>
<DrawerPanelBody>{sidebarContent}</DrawerPanelBody>
</DrawerPanelContent>
)
}
TopologySidebar.propTypes = {
interactionLevel: InteractionLevel,
onClose: PropTypes.func,
}
export default TopologySidebar
|
