opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/MachineListComponent.js


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

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>{index + 1}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>{index + 1}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>
                    )
                )
                .reverse()}
        </DataList>
    )
}

MachineListComponent.propTypes = {
    machines: PropTypes.arrayOf(Machine),
    onSelect: PropTypes.func.isRequired,
    onAdd: PropTypes.func.isRequired,
}

export default MachineListComponent