From 5e5ab63b280eb446db4090733cd3ad2e97d02018 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Mon, 19 Jul 2021 15:47:23 +0200
Subject: refactor(ui): Restructure components per page

This change updates the source structure of the OpenDC frontend to
follow the page structure.
---
 .../sidebar/machine/UnitTabsComponent.js           | 36 ++++++++++++++++++++++
 1 file changed, 36 insertions(+)
 create mode 100644 opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitTabsComponent.js

(limited to 'opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitTabsComponent.js')

diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitTabsComponent.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitTabsComponent.js
new file mode 100644
index 00000000..6d10d2df
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitTabsComponent.js
@@ -0,0 +1,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('cpu-units')
+
+    return (
+        <Tabs activeKey={activeTab} onSelect={(_, tab) => setActiveTab(tab)}>
+            <Tab eventKey="cpu-units" title={<TabTitleText>CPU</TabTitleText>}>
+                <UnitAddContainer machineId={machineId} unitType="cpu" />
+                <UnitListContainer machineId={machineId} unitType="cpu" />
+            </Tab>
+            <Tab eventKey="gpu-units" title={<TabTitleText>GPU</TabTitleText>}>
+                <UnitAddContainer machineId={machineId} unitType="gpu" />
+                <UnitListContainer machineId={machineId} unitType="gpu" />
+            </Tab>
+            <Tab eventKey="memory-units" title={<TabTitleText>Memory</TabTitleText>}>
+                <UnitAddContainer machineId={machineId} unitType="memory" />
+                <UnitListContainer machineId={machineId} unitType="memory" />
+            </Tab>
+            <Tab eventKey="storage-units" title={<TabTitleText>Storage</TabTitleText>}>
+                <UnitAddContainer machineId={machineId} unitType="storage" />
+                <UnitListContainer machineId={machineId} unitType="storage" />
+            </Tab>
+        </Tabs>
+    )
+}
+
+UnitTabsComponent.propTypes = {
+    machineId: PropTypes.string.isRequired,
+}
+
+export default UnitTabsComponent
-- 
cgit v1.2.3