summaryrefslogtreecommitdiff
path: root/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitTabsComponent.js
blob: 4032d60788b9809a1a19a732e4453089c0ef1303 (plain)
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
import PropTypes from 'prop-types'
import React, { useState } from 'react'
import { Tab, Tabs, TabTitleText } from '@patternfly/react-core'
import UnitAddContainer from './UnitAddContainer'
import UnitListContainer from './UnitListContainer'

function UnitTabsComponent({ machineId }) {
    const [activeTab, setActiveTab] = useState('cpuModel-units')

    return (
        <Tabs activeKey={activeTab} onSelect={(_, tab) => setActiveTab(tab)}>
            <Tab eventKey="cpuModel-units" title={<TabTitleText>CPU</TabTitleText>}>
                <UnitAddContainer machineId={machineId} unitType="cpus" />
                <UnitListContainer machineId={machineId} unitType="cpus" />
            </Tab>
            <Tab eventKey="gpu-units" title={<TabTitleText>GPU</TabTitleText>}>
                <UnitAddContainer machineId={machineId} unitType="gpus" />
                <UnitListContainer machineId={machineId} unitType="gpus" />
            </Tab>
            <Tab eventKey="memory-units" title={<TabTitleText>Memory</TabTitleText>}>
                <UnitAddContainer machineId={machineId} unitType="memories" />
                <UnitListContainer machineId={machineId} unitType="memories" />
            </Tab>
            <Tab eventKey="storage-units" title={<TabTitleText>Storage</TabTitleText>}>
                <UnitAddContainer machineId={machineId} unitType="storages" />
                <UnitListContainer machineId={machineId} unitType="storages" />
            </Tab>
        </Tabs>
    )
}

UnitTabsComponent.propTypes = {
    machineId: PropTypes.string.isRequired,
}

export default UnitTabsComponent