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
|
import PropTypes from 'prop-types'
import React from 'react'
import MachineComponent from './MachineComponent'
import {
Badge,
Button,
DataList,
DataListAction,
DataListCell,
DataListItem,
DataListItemCells,
DataListItemRow,
} from '@patternfly/react-core'
import { AngleRightIcon, PlusIcon } from '@patternfly/react-icons'
import { Machine } from '../../../../shapes'
function MachineListComponent({ machines = [], onSelect, onAdd }) {
return (
<DataList aria-label="Rack Units">
{machines.map((machine, index) =>
machine ? (
<DataListItem key={index} onClick={() => onSelect(index + 1)}>
<DataListItemRow>
<DataListItemCells
dataListCells={[
<DataListCell isIcon key="icon">
<Badge isRead>{machines.length - index}U</Badge>
</DataListCell>,
<DataListCell key="primary content">
<MachineComponent onClick={() => onSelect(index + 1)} machine={machine} />
</DataListCell>,
]}
/>
<DataListAction id="goto" aria-label="Goto Machine" aria-labelledby="goto">
<Button isSmall variant="plain" className="pf-u-p-0">
<AngleRightIcon />
</Button>
</DataListAction>
</DataListItemRow>
</DataListItem>
) : (
<DataListItem key={index}>
<DataListItemRow>
<DataListItemCells
dataListCells={[
<DataListCell isIcon key="icon">
<Badge isRead>{machines.length - index}U</Badge>
</DataListCell>,
<DataListCell key="add" className="text-secondary">
Empty Slot
</DataListCell>,
]}
/>
<DataListAction id="add" aria-label="Add Machine" aria-labelledby="add">
<Button isSmall variant="plain" className="pf-u-p-0" onClick={() => onAdd(index + 1)}>
<PlusIcon />
</Button>
</DataListAction>
</DataListItemRow>
</DataListItem>
)
)}
</DataList>
)
}
MachineListComponent.propTypes = {
machines: PropTypes.arrayOf(Machine),
onSelect: PropTypes.func.isRequired,
onAdd: PropTypes.func.isRequired,
}
export default MachineListComponent
|
