summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--public/img/topology/cpu-icon.pngbin0 -> 4062 bytes
-rw-r--r--public/img/topology/gpu-icon.pngbin0 -> 2227 bytes
-rw-r--r--public/img/topology/memory-icon.pngbin0 -> 1980 bytes
-rw-r--r--public/img/topology/storage-icon.pngbin0 -> 4038 bytes
-rw-r--r--src/actions/topology.js2
-rw-r--r--src/api/routes/tiles.js2
-rw-r--r--src/auth/index.js4
-rw-r--r--src/components/sidebars/topology/rack/EmptySlotComponent.js14
-rw-r--r--src/components/sidebars/topology/rack/MachineComponent.js54
-rw-r--r--src/components/sidebars/topology/rack/MachineListComponent.js7
-rw-r--r--src/components/sidebars/topology/rack/MachineListComponent.sass2
-rw-r--r--src/components/sidebars/topology/rack/RackSidebarComponent.js7
-rw-r--r--src/components/sidebars/topology/rack/RackSidebarComponent.sass8
-rw-r--r--src/index.sass2
-rw-r--r--src/sagas/topology.js5
15 files changed, 74 insertions, 33 deletions
diff --git a/public/img/topology/cpu-icon.png b/public/img/topology/cpu-icon.png
new file mode 100644
index 00000000..07cfbd31
--- /dev/null
+++ b/public/img/topology/cpu-icon.png
Binary files differ
diff --git a/public/img/topology/gpu-icon.png b/public/img/topology/gpu-icon.png
new file mode 100644
index 00000000..55d4fb05
--- /dev/null
+++ b/public/img/topology/gpu-icon.png
Binary files differ
diff --git a/public/img/topology/memory-icon.png b/public/img/topology/memory-icon.png
new file mode 100644
index 00000000..36e8a44e
--- /dev/null
+++ b/public/img/topology/memory-icon.png
Binary files differ
diff --git a/public/img/topology/storage-icon.png b/public/img/topology/storage-icon.png
new file mode 100644
index 00000000..7a39cb6f
--- /dev/null
+++ b/public/img/topology/storage-icon.png
Binary files differ
diff --git a/src/actions/topology.js b/src/actions/topology.js
index 4d9f1e52..04d9f102 100644
--- a/src/actions/topology.js
+++ b/src/actions/topology.js
@@ -245,7 +245,7 @@ export function addMachineSucceeded(machine) {
const {objects, interactionLevel} = getState();
const rack = objects.rack[objects.tile[interactionLevel.tileId].objectId];
const machineIds = [...rack.machineIds];
- machineIds[machine.position] = machine.id;
+ machineIds[machine.position - 1] = machine.id;
dispatch(addPropToStoreObject("rack", rack.id, {machineIds}));
};
}
diff --git a/src/api/routes/tiles.js b/src/api/routes/tiles.js
index 927a074b..b1c594d5 100644
--- a/src/api/routes/tiles.js
+++ b/src/api/routes/tiles.js
@@ -32,7 +32,7 @@ export function getMachinesOfRackByTile(tileId) {
export function addMachineToRackOnTile(tileId, machine) {
return sendRequest({
path: "/tiles/{tileId}/rack/machines",
- method: "GET",
+ method: "POST",
parameters: {
body: {
machine
diff --git a/src/auth/index.js b/src/auth/index.js
index fb2a7038..418d816c 100644
--- a/src/auth/index.js
+++ b/src/auth/index.js
@@ -3,7 +3,7 @@ import {DELETE_CURRENT_USER_SUCCEEDED} from "../actions/users";
const getAuthObject = () => {
const authItem = localStorage.getItem("auth");
- if (!authItem) {
+ if (!authItem || authItem === "{}") {
return undefined;
}
return JSON.parse(authItem);
@@ -34,7 +34,7 @@ export const saveAuthLocalStorage = (payload) => {
};
export const clearAuthLocalStorage = () => {
- localStorage.setItem("auth", "{}");
+ localStorage.setItem("auth", "");
};
export const authRedirectMiddleware = store => next => action => {
diff --git a/src/components/sidebars/topology/rack/EmptySlotComponent.js b/src/components/sidebars/topology/rack/EmptySlotComponent.js
index 5234ee63..1ca13b67 100644
--- a/src/components/sidebars/topology/rack/EmptySlotComponent.js
+++ b/src/components/sidebars/topology/rack/EmptySlotComponent.js
@@ -2,13 +2,13 @@ import React from "react";
import FontAwesome from "react-fontawesome";
const EmptySlotComponent = ({position, onAdd}) => (
- <li className="list-group-item justify-content-between">
- <span className="badge badge-default badge-info">
- {position}
- </span>
- Add machine
- <button className="btn btn-secondary" onClick={onAdd}>
- <FontAwesome name="plus"/>
+ <li className="list-group-item d-flex justify-content-between align-items-center">
+ <span className="badge badge-default badge-info mr-1">
+ {position}
+ </span>
+ <button className="btn btn-outline-primary" onClick={onAdd}>
+ <FontAwesome name="plus" className="mr-1"/>
+ Add machine
</button>
</li>
);
diff --git a/src/components/sidebars/topology/rack/MachineComponent.js b/src/components/sidebars/topology/rack/MachineComponent.js
index e328951e..56e723bc 100644
--- a/src/components/sidebars/topology/rack/MachineComponent.js
+++ b/src/components/sidebars/topology/rack/MachineComponent.js
@@ -1,23 +1,49 @@
import React from "react";
import Shapes from "../../../../shapes";
+const UnitIcon = ({id, type}) => (
+ <div>
+ <img
+ src={"/img/topology/" + id + "-icon.png"}
+ alt={"Machine contains " + type + " units"}
+ className="img-fluid"
+ style={{maxHeight: "35px"}}
+ />
+ </div>
+);
+
const MachineComponent = ({position, machine, onClick}) => (
- <li className="list-group-item list-group-item-action justify-content-between" onClick={onClick}>
- <span className="badge badge-default badge-info">
+ <li
+ className="d-flex list-group-item list-group-item-action justify-content-between align-items-center"
+ onClick={onClick}
+ >
+ <span className="badge badge-default badge-info mr-1">
{position}
</span>
- <span className="badge badge-primary badge-pill">
- {machine.cpuIds.length} CPUs
- </span>
- <span className="badge badge-warning badge-pill">
- {machine.gpuIds.length} GPUs
- </span>
- <span className="badge badge-success badge-pill">
- {machine.memoryIds.length} Memories
- </span>
- <span className="badge badge-info badge-pill">
- {machine.storageIds.length} Storages
- </span>
+ <div>
+ {machine.cpuIds.length > 0 ?
+ <UnitIcon id="cpu" type="CPU"/> :
+ undefined
+ }
+ {machine.gpuIds.length > 0 ?
+ <UnitIcon id="gpu" type="GPU"/> :
+ undefined
+ }
+ {machine.memoryIds.length > 0 ?
+ <UnitIcon id="memory" type="memory"/> :
+ undefined
+ }
+ {machine.storageIds.length > 0 ?
+ <UnitIcon id="storage" type="storage"/> :
+ undefined
+ }
+ {machine.cpuIds.length + machine.gpuIds.length + machine.memoryIds.length + machine.storageIds.length === 0 ?
+ <span className="badge badge-default badge-warning">
+ Machine with no units
+ </span> :
+ undefined
+ }
+ </div>
</li>
);
diff --git a/src/components/sidebars/topology/rack/MachineListComponent.js b/src/components/sidebars/topology/rack/MachineListComponent.js
index d8a31ddc..41522e36 100644
--- a/src/components/sidebars/topology/rack/MachineListComponent.js
+++ b/src/components/sidebars/topology/rack/MachineListComponent.js
@@ -1,15 +1,16 @@
import React from "react";
import EmptySlotContainer from "../../../../containers/sidebars/topology/rack/EmptySlotContainer";
import MachineContainer from "../../../../containers/sidebars/topology/rack/MachineContainer";
+import "./MachineListComponent.css";
const MachineListComponent = ({machineIds}) => {
return (
- <ul className="list-group">
+ <ul className="list-group machine-list">
{machineIds.map((machineId, index) => {
if (machineId === null) {
- return <EmptySlotContainer key={index} position={index}/>;
+ return <EmptySlotContainer key={index} position={index + 1}/>;
} else {
- return <MachineContainer key={index} position={index} machineId={machineId}/>;
+ return <MachineContainer key={index} position={index + 1} machineId={machineId}/>;
}
})}
</ul>
diff --git a/src/components/sidebars/topology/rack/MachineListComponent.sass b/src/components/sidebars/topology/rack/MachineListComponent.sass
new file mode 100644
index 00000000..bbcfe696
--- /dev/null
+++ b/src/components/sidebars/topology/rack/MachineListComponent.sass
@@ -0,0 +1,2 @@
+.machine-list li
+ min-height: 64px
diff --git a/src/components/sidebars/topology/rack/RackSidebarComponent.js b/src/components/sidebars/topology/rack/RackSidebarComponent.js
index ddb10387..007add6e 100644
--- a/src/components/sidebars/topology/rack/RackSidebarComponent.js
+++ b/src/components/sidebars/topology/rack/RackSidebarComponent.js
@@ -2,13 +2,16 @@ import React from "react";
import DeleteRackContainer from "../../../../containers/sidebars/topology/rack/DeleteRackContainer";
import MachineListContainer from "../../../../containers/sidebars/topology/rack/MachineListContainer";
import RackNameContainer from "../../../../containers/sidebars/topology/rack/RackNameContainer";
+import "./RackSidebarComponent.css";
const RackSidebarComponent = () => {
return (
- <div>
+ <div className="rack-sidebar-container flex-column">
<RackNameContainer/>
<DeleteRackContainer/>
- <MachineListContainer/>
+ <div className="machine-list-container mt-2">
+ <MachineListContainer/>
+ </div>
</div>
);
};
diff --git a/src/components/sidebars/topology/rack/RackSidebarComponent.sass b/src/components/sidebars/topology/rack/RackSidebarComponent.sass
new file mode 100644
index 00000000..192929cf
--- /dev/null
+++ b/src/components/sidebars/topology/rack/RackSidebarComponent.sass
@@ -0,0 +1,8 @@
+.rack-sidebar-container
+ display: flex
+ height: 100%
+ max-height: 100%
+
+.machine-list-container
+ flex: 1
+ overflow-y: scroll
diff --git a/src/index.sass b/src/index.sass
index 4b36d4e9..54a426f9 100644
--- a/src/index.sass
+++ b/src/index.sass
@@ -19,7 +19,7 @@ html, body, #root
.text-page-container
padding-top: 80px
-.btn
+.btn, .list-group-item-action
+clickable
a, a:hover
diff --git a/src/sagas/topology.js b/src/sagas/topology.js
index 2ae31074..87d20e8f 100644
--- a/src/sagas/topology.js
+++ b/src/sagas/topology.js
@@ -101,7 +101,7 @@ function* fetchTile(tile) {
function* fetchMachinesOfRack(tileId, rack) {
const machines = yield fetchAndStoreMachinesOfTile(tileId);
const machineIds = new Array(rack.capacity).fill(null);
- machines.forEach(machine => machineIds[machine.position] = machine.id);
+ machines.forEach(machine => machineIds[machine.position - 1] = machine.id);
yield put(addPropToStoreObject("rack", rack.id, {machineIds}));
@@ -221,10 +221,11 @@ export function* onAddRackToTile(action) {
const rack = yield call(addRackToTile, action.tileId, {
id: -1,
name: "Rack",
- capacity: 5,
+ capacity: 42,
powerCapacityW: 100,
machines: 20
});
+ rack.machineIds = new Array(rack.capacity).fill(null);
yield put(addToStore("rack", rack));
yield put(addRackToTileSucceeded(action.tileId, rack.id));
} catch (error) {
generated by cgit v1.2.3 (git 2.25.1) at 2026-02-04 16:39:01 +0000