From cd0b45627f0d8da8c8dc4edde223f3c36e9bcfbf Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Sun, 25 Apr 2021 16:01:14 +0200
Subject: build: Migrate to flat project structure

This change updates the project structure to become flattened.
Previously, the simulator, frontend and API each lived into their own
directory.

With this change, all modules of the project live in the top-level
directory of the repository. This should improve discoverability of
modules of the project.
---
 .../topology/machine/BackToRackComponent.js        | 10 +++
 .../topology/machine/DeleteMachineComponent.js     | 10 +++
 .../topology/machine/MachineNameComponent.js       |  5 ++
 .../topology/machine/MachineSidebarComponent.js    | 18 +++++
 .../sidebars/topology/machine/UnitAddComponent.js  | 35 ++++++++++
 .../app/sidebars/topology/machine/UnitComponent.js | 52 +++++++++++++++
 .../sidebars/topology/machine/UnitListComponent.js | 20 ++++++
 .../sidebars/topology/machine/UnitTabsComponent.js | 78 ++++++++++++++++++++++
 8 files changed, 228 insertions(+)
 create mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/BackToRackComponent.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/DeleteMachineComponent.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/MachineNameComponent.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/MachineSidebarComponent.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitAddComponent.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitComponent.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitListComponent.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitTabsComponent.js

(limited to 'opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine')

diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/BackToRackComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/BackToRackComponent.js
new file mode 100644
index 00000000..70d522b2
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/BackToRackComponent.js
@@ -0,0 +1,10 @@
+import React from 'react'
+
+const BackToRackComponent = ({ onClick }) => (
+    <div className="btn btn-secondary btn-block" onClick={onClick}>
+        <span className="fa fa-angle-left mr-2" />
+        Back to rack
+    </div>
+)
+
+export default BackToRackComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/DeleteMachineComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/DeleteMachineComponent.js
new file mode 100644
index 00000000..37820316
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/DeleteMachineComponent.js
@@ -0,0 +1,10 @@
+import React from 'react'
+
+const DeleteMachineComponent = ({ onClick }) => (
+    <div className="btn btn-outline-danger btn-block" onClick={onClick}>
+        <span className="fa fa-trash mr-2" />
+        Delete this machine
+    </div>
+)
+
+export default DeleteMachineComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/MachineNameComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/MachineNameComponent.js
new file mode 100644
index 00000000..992383c4
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/MachineNameComponent.js
@@ -0,0 +1,5 @@
+import React from 'react'
+
+const MachineNameComponent = ({ position }) => <h2>Machine at slot {position}</h2>
+
+export default MachineNameComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/MachineSidebarComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/MachineSidebarComponent.js
new file mode 100644
index 00000000..7c78cf9e
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/MachineSidebarComponent.js
@@ -0,0 +1,18 @@
+import React from 'react'
+import BackToRackContainer from '../../../../../containers/app/sidebars/topology/machine/BackToRackContainer'
+import DeleteMachineContainer from '../../../../../containers/app/sidebars/topology/machine/DeleteMachineContainer'
+import MachineNameContainer from '../../../../../containers/app/sidebars/topology/machine/MachineNameContainer'
+import UnitTabsContainer from '../../../../../containers/app/sidebars/topology/machine/UnitTabsContainer'
+
+const MachineSidebarComponent = ({ machineId }) => {
+    return (
+        <div className="h-100 overflow-auto">
+            <MachineNameContainer />
+            <BackToRackContainer />
+            <DeleteMachineContainer />
+            <UnitTabsContainer />
+        </div>
+    )
+}
+
+export default MachineSidebarComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitAddComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitAddComponent.js
new file mode 100644
index 00000000..4e9dbc7e
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitAddComponent.js
@@ -0,0 +1,35 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+
+class UnitAddComponent extends React.Component {
+    static propTypes = {
+        units: PropTypes.array.isRequired,
+        onAdd: PropTypes.func.isRequired,
+    }
+
+    render() {
+        return (
+            <div className="form-inline">
+                <div className="form-group w-100">
+                    <select className="form-control w-70 mr-1" ref={(unitSelect) => (this.unitSelect = unitSelect)}>
+                        {this.props.units.map((unit) => (
+                            <option value={unit._id} key={unit._id}>
+                                {unit.name}
+                            </option>
+                        ))}
+                    </select>
+                    <button
+                        type="submit"
+                        className="btn btn-outline-primary"
+                        onClick={() => this.props.onAdd(this.unitSelect.value)}
+                    >
+                        <span className="fa fa-plus mr-2" />
+                        Add
+                    </button>
+                </div>
+            </div>
+        )
+    }
+}
+
+export default UnitAddComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitComponent.js
new file mode 100644
index 00000000..de55e506
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitComponent.js
@@ -0,0 +1,52 @@
+import React from 'react'
+import { UncontrolledPopover, PopoverHeader, PopoverBody, Button } from 'reactstrap'
+
+function UnitComponent({ index, unitType, unit, onDelete }) {
+    let unitInfo
+    if (unitType === 'cpu' || unitType === 'gpu') {
+        unitInfo = (
+            <>
+                <strong>Clockrate: </strong>
+                <code>{unit.clockRateMhz}</code>
+                <br />
+                <strong>Num. Cores: </strong>
+                <code>{unit.numberOfCores}</code>
+                <br />
+                <strong>Energy Cons.: </strong>
+                <code>{unit.energyConsumptionW} W</code>
+                <br />
+            </>
+        )
+    } else if (unitType === 'memory' || unitType === 'storage') {
+        unitInfo = (
+            <>
+                <strong>Speed:</strong>
+                <code>{unit.speedMbPerS} Mb/s</code>
+                <br />
+                <strong>Size:</strong>
+                <code>{unit.sizeMb} MB</code>
+                <br />
+                <strong>Energy Cons.:</strong>
+                <code>{unit.energyConsumptionW} W</code>
+                <br />
+            </>
+        )
+    }
+
+    return (
+        <li className="d-flex list-group-item justify-content-between align-items-center">
+            <span style={{ maxWidth: '60%' }}>{unit.name}</span>
+            <span>
+                <Button outline={true} color="info" className="mr-1 fa fa-info-circle" id={`unit-${index}`} />
+                <UncontrolledPopover trigger="focus" placement="left" target={`unit-${index}`}>
+                    <PopoverHeader>Unit Information</PopoverHeader>
+                    <PopoverBody>{unitInfo}</PopoverBody>
+                </UncontrolledPopover>
+
+                <span className="btn btn-outline-danger fa fa-trash" onClick={onDelete} />
+            </span>
+        </li>
+    )
+}
+
+export default UnitComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitListComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitListComponent.js
new file mode 100644
index 00000000..2ade0f6a
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitListComponent.js
@@ -0,0 +1,20 @@
+import React from 'react'
+import UnitContainer from '../../../../../containers/app/sidebars/topology/machine/UnitContainer'
+
+const UnitListComponent = ({ unitType, unitIds }) => (
+    <ul className="list-group mt-1">
+        {unitIds.length !== 0 ? (
+            unitIds.map((unitId, index) => (
+                <UnitContainer unitType={unitType} unitId={unitId} index={index} key={index} />
+            ))
+        ) : (
+            <div className="alert alert-info">
+                <span>
+                    <strong>No units...</strong> Add some with the menu above!
+                </span>
+            </div>
+        )}
+    </ul>
+)
+
+export default UnitListComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitTabsComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitTabsComponent.js
new file mode 100644
index 00000000..6599fefd
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitTabsComponent.js
@@ -0,0 +1,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
-- 
cgit v1.2.3