Skip to content

Commit

Permalink
#332: added model availabilties to site detail page
Browse files Browse the repository at this point in the history
  • Loading branch information
@yaxue1123
yaxue1123 committed May 31, 2024
1 parent 9fb990f commit c55d086
Show file tree
Hide file tree
Showing 6 changed files with 155 additions and 25 deletions.
14 changes: 9 additions & 5 deletions src/components/Experiment/Slices.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,11 @@ class Slices extends React.Component {
searchQuery: "",
sortColumn: { path: "name", order: "asc" },
showSpinner: false,
spinnerText: ""
spinnerText: "",
radioBtnValues: [
{ display: "My Slices", value: "mySlices", isActive: true },
{ display: "Project Slices", value: "projectSlices", isActive: false },
],
};

async componentDidMount() {
Expand All @@ -43,12 +47,12 @@ class Slices extends React.Component {
if(!localStorage.getItem("idToken")) {
// call credential manager to generate tokens
autoCreateTokens("all").then(async () => {
const { data: res } = await getMySlices();
const { data: res } = await getMySlices("mySlices");
const slices = res.data.filter(s => s.project_id === this.props.projectId);
this.setState({ slices, showSpinner: false, spinnerText: "" });
});
} else {
const { data: res } = await getMySlices();
const { data: res } = await getMySlices("mySlices");
const slices = res.data.filter(s => s.project_id === this.props.projectId);
this.setState({ slices, showSpinner: false, spinnerText: "" });
}
Expand All @@ -60,12 +64,12 @@ class Slices extends React.Component {
} else if(!localStorage.getItem("idToken")) {
// call credential manager to generate tokens
autoCreateTokens("all").then(async () => {
const { data: res } = await getMySlices();
const { data: res } = await getMySlices("allSlices");
this.setState({ slices: res.data, showSpinner: false, spinnerText: "" });
});
}
else {
const { data: res } = await getMySlices();
const { data: res } = await getMySlices("allSlices");
this.setState({ slices: res.data, showSpinner: false, spinnerText: "" });
}
}
Expand Down
31 changes: 20 additions & 11 deletions src/components/Resource/DetailTable.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,16 +17,25 @@ const generateProgressBar = (total, free, color, labelColor) => {
const DetailTable = props => {
const {name, resource, parent} = props;

const rows = [
["Cores", "totalCore", "freeCore"],
["Disk (GB)", "totalDisk", "freeDisk"],
["RAM (GB)", "totalRAM", "freeRAM"],
["GPU", "totalGPU", "freeGPU"],
["NVME", "totalNVME", "freeNVME"],
["SmartNIC", "totalSmartNIC", "freeSmartNIC"],
["SharedNIC", "totalSharedNIC", "freeSharedNIC"],
["FPGA", "totalFPGA", "freeFPGA"],
]
const rowsOptions = {
"short" : [
["Cores", "totalCore", "freeCore"],
["Disk (GB)", "totalDisk", "freeDisk"],
["RAM (GB)", "totalRAM", "freeRAM"]
],
"long": [
["Cores", "totalCore", "freeCore"],
["Disk (GB)", "totalDisk", "freeDisk"],
["RAM (GB)", "totalRAM", "freeRAM"],
["GPU", "totalGPU", "freeGPU"],
["NVME", "totalNVME", "freeNVME"],
["SmartNIC", "totalSmartNIC", "freeSmartNIC"],
["SharedNIC", "totalSharedNIC", "freeSharedNIC"],
["FPGA", "totalFPGA", "freeFPGA"],
]
}

const rows = parent === "sitepage" ? rowsOptions["short"] : rowsOptions["long"];

const statusMapping = {
"Maint": {
Expand Down Expand Up @@ -57,7 +66,7 @@ const DetailTable = props => {

return (
<div>
<table className="table resource-detail-table">
<table className={`table resource-detail-table`}>
<thead>
<tr>
<th scope="col" colSpan="2" className="text-center">
Expand Down
119 changes: 111 additions & 8 deletions src/components/Resource/SiteDetailPage.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,35 +4,55 @@ import { sitesNameMapping } from "../../data/sites";
import utcToLocalTimeParser from "../../utils/utcToLocalTimeParser.js";
import { default as portalData } from "../../services/portalData.json";
import { Link, useLocation } from "react-router-dom";
import ProgressBar from '../common/ProgressBar';

const generateProgressBar = (total, free, color, labelColor) => {
return (
<ProgressBar
now={total > 0 ? Math.round(free * 100/ total) : 0}
label={`${free}/${total}`}
color={color}
labelColor={labelColor}
/>
)
}

const SiteDetailPage = props => {
const statusMapping = {
"Maint": {
state: "Maintenance",
color: "warning",
explanation: "no requests would be accepted"
colorName: "danger",
colorHex: "#b00020",
labelColorHex: "#fff"
},
"PreMaint": {
state: "Pre-Maintenance",
color: "warning",
explanation: "requests will be expected until the deadline"
colorName: "warning",
colorHex: "#ffb670",
labelColorHex: "#212529"
},
"PartMaint": {
state: "Partial Maintenance",
colorHex: "warning",
explanation: "requests may fail due to some equipment being off-line"
colorName: "warning",
colorHex: "#ffb670",
labelColorHex: "#212529"
},
"Active": {
state: "Active",
color: "primary",
explanation: ""
colorName: "primary",
colorHex: "#68b3d1",
labelColorHex: "#212529"
}
}

const componentTypes = ["GPU", "NVME", "SmartNIC", "SharedNIC", "FPGA"];

const location = useLocation();

const data = location.state.data;

console.log(data);

return (
<div className="container">
<div className="d-flex flex-row justify-content-between">
Expand Down Expand Up @@ -148,6 +168,89 @@ const SiteDetailPage = props => {
resource={ data }
parent="sitepage"
/>
<table className="table table-hover table-bordered site-detail-table">
<thead>
<tr>
<th scope="col" rowSpan={2}>Component</th>
<th colSpan="3" className="border-bottom">Avalability</th>
<th scope="col" rowSpan={2}>Available / Total</th>
</tr>
<tr>
<td><b>Model</b></td>
<td><b>Total Units</b></td>
<td><b>Allocated Units</b></td>
</tr>
</thead>
<tbody>
{
componentTypes.map((type, index) => (
data[type] && data[type].length > 1 ?
<React.Fragment>
<tr key={`site-resource-${index}`}>
<th scope="col" rowSpan={data[type] && data[type].length}>{type}</th>
<td>
{data[type][0].model}
</td>
<td>
{data[type][0].unit}
</td>
<td>
{data[type][0].allocatedUnit}
</td>
<td rowSpan={data[type] && data[type].length}>
{
generateProgressBar(
data[`free${type}`],
data[`total${type}`],
statusMapping[data.status.state].colorHex,
statusMapping[data.status.state].labelColorHex
)
}
</td>
</tr>
{
data[type].slice(1).map((row, index) =>
<tr key={`site-resource-${index}`}>
<td>
{row.model}
</td>
<td>
{row.unit}
</td>
<td>
{row.allocatedUnit}
</td>
</tr>)
}
</React.Fragment>
:
<tr key={`site-resource-${index}`}>
<th scope="col">{type}</th>
<td>
{data[type][0].model}
</td>
<td>
{data[type][0].unit}
</td>
<td>
{data[type][0].allocatedUnit}
</td>
<td rowSpan={data[type] && data[type].length}>
{
generateProgressBar(
data[`free${type}`],
data[`total${type}`],
statusMapping[data.status.state].colorHex,
statusMapping[data.status.state].labelColorHex
)
}
</td>
</tr>
)
)
}
</tbody>
</table>
</div>
</div>
)
Expand Down
8 changes: 8 additions & 0 deletions src/services/parser/sitesParser.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,6 +86,7 @@ export default function parseSites(data, acronymToShortName) {
site[`total${type}`] = 0;
site[`allocated${type}`] = 0;
site[`free${type}`] = 0;
site[type] = []; // models for a type of component
}

// find site components.
Expand All @@ -100,6 +101,11 @@ export default function parseSites(data, acronymToShortName) {
if (component.Type === type) {
site[`total${type}`] += component.capacities.unit || 0;
site[`allocated${type}`] += component.allocatedCapacities.unit || 0;
site[type].push({
"model": component.Model,
"unit": component.capacities.unit || 0,
"allocatedUnit": component.allocatedCapacities.unit || 0
})
}
}
}
Expand Down Expand Up @@ -130,5 +136,7 @@ export default function parseSites(data, acronymToShortName) {
"siteAcronyms": siteAcronyms
};

console.log(parsedObj);

return parsedObj;
}
3 changes: 2 additions & 1 deletion src/services/sliceService.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,8 @@ import { default as config } from "../config.json";
const apiEndpoint = `${config.orchestratorApiUrl}/slices`;
const poasEndpoint = `${config.orchestratorApiUrl}/poas`;

export function getMySlices() {
export function getMySlices(type) {
if (type === "projectSlices") {}
return http.get(apiEndpoint + "?as_self=true&states=All&limit=200&offset=0", {
headers: {'Authorization': `Bearer ${localStorage.getItem("idToken")}`}
});
Expand Down
5 changes: 5 additions & 0 deletions src/styles/App.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1234,4 +1234,9 @@ ul,

.tool-link-block p {
line-height: 200%;
}

.site-detail-table td, .site-detail-table tr, .site-detail-table thead th {
text-align: center;
vertical-align: middle !important;
}

0 comments on commit c55d086

Please sign in to comment.