blob: 6599fefdc0bf0b9f7cf14df60108c2c16abe6e01 (
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
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
|
import React, { useState } from 'react'
import { Nav, NavItem, NavLink, TabContent, TabPane } from 'reactstrap'
import UnitAddContainer from '../../../../../containers/app/sidebars/topology/machine/UnitAddContainer'
import UnitListContainer from '../../../../../containers/app/sidebars/topology/machine/UnitListContainer'
const UnitTabsComponent = () => {
const [activeTab, setActiveTab] = useState('cpu-units')
const toggle = (tab) => {
if (activeTab !== tab) setActiveTab(tab)
}
return (
<div>
<Nav tabs>
<NavItem>
<NavLink
className={activeTab === 'cpu-units' ? 'active' : ''}
onClick={() => {
toggle('cpu-units')
}}
>
CPU
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={activeTab === 'gpu-units' ? 'active' : ''}
onClick={() => {
toggle('gpu-units')
}}
>
GPU
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={activeTab === 'memory-units' ? 'active' : ''}
onClick={() => {
toggle('memory-units')
}}
>
Memory
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={activeTab === 'storage-units' ? 'active' : ''}
onClick={() => {
toggle('storage-units')
}}
>
Stor.
</NavLink>
</NavItem>
</Nav>
<TabContent activeTab={activeTab}>
<TabPane tabId="cpu-units">
<UnitAddContainer unitType="cpu" />
<UnitListContainer unitType="cpu" />
</TabPane>
<TabPane tabId="gpu-units">
<UnitAddContainer unitType="gpu" />
<UnitListContainer unitType="gpu" />
</TabPane>
<TabPane tabId="memory-units">
<UnitAddContainer unitType="memory" />
<UnitListContainer unitType="memory" />
</TabPane>
<TabPane tabId="storage-units">
<UnitAddContainer unitType="storage" />
<UnitListContainer unitType="storage" />
</TabPane>
</TabContent>
</div>
)
}
export default UnitTabsComponent
|
