Skip to content

Commit

Permalink
Apply modified recommend api and Support GPU recommend
Browse files Browse the repository at this point in the history
  • Loading branch information
@cb-github-robot
cb-github-robot authored May 7, 2024
2 parents e544fae + 98cf05e commit 3095bab
Show file tree
Hide file tree
Showing 3 changed files with 99 additions and 163 deletions.
60 changes: 54 additions & 6 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@


<head>
<title>Cloud-Barista Tumblebug Map Dashboard</title>
<title>CB-MapUI: Map Dashboard for Cloud-Barista</title>
<!-- Polyfill for older environments like Internet Explorer and Android 4.x -->
<script
src="https://polyfill.io/v3/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
Expand Down Expand Up @@ -320,6 +320,54 @@
</div>
</div>

<!-- Accelerator Configuration Field -->
<div class="form-group col">
<div id="headingAccelerator">
<button class="btn btn-info w-100" type="button" data-toggle="collapse" data-target="#collapseAccelerator" aria-expanded="false" aria-controls="collapseAccelerator">
Accelerator Config
</div>
<div id="collapseAccelerator" class="collapse" aria-labelledby="headingAccelerator" data-parent="#mcis-configuration-form">
<div class="px-0 py-0">

<!-- Accelerator Type Field -->
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">Type</span>
</div>
<select id="acceleratorType" name="acceleratorType" class="form-control">
<option value="" selected="selected">----</option>
<option value="gpu">GPU</option>
</select>
</div>
</div>

<!-- Accelerator Model Field -->
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">Model</span>
</div>
<input type="text" class="form-control" id="acceleratorModel" name="acceleratorModel" value="" placeholder="Ex: A100">
</div>
</div>

<!-- Accelerator Memory Range Field -->
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">Mem</span>
</div>
<input type="number" class="form-control" id='minAMEM' min="1" max="999998" step="1">
<span class="mx-1">~</span>
<input type="number" class="form-control" id='maxAMEM' min="1" max="999999" step="1">
</div>
</div>
</div>
</div>
</div>



<!-- Clear Selection Field -->
<div class="form-group col">
Expand Down Expand Up @@ -696,11 +744,11 @@

<!-- Admin dashboards -->
<div id="console" style="display:none; width:100%; height:100%; position:absolute; top:0; left:0;">
<iframe id="iframe" src="http://localhost:1323/tumblebug/api/index.html"
style="visibility:visible; width:50%; height:100%; position:relative;"></iframe>
<iframe id="iframe2" src="http://localhost:1024/spider/adminweb"
style="visibility:visible; width:50%; height:100%; position:relative;"></iframe>
</div>
<iframe id="iframe" src="http://localhost:1323/tumblebug/api/index.html"
style="visibility:visible; width:50%; height:100%; position:relative;"></iframe>
<iframe id="iframe2" src="http://localhost:1024/spider/adminweb"
style="visibility:visible; width:50%; height:100%; position:relative;"></iframe>
</div>
</div>

</div>
Expand Down
200 changes: 44 additions & 156 deletions index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -979,7 +979,7 @@ function getConnection() {
document.getElementById("port").style.color = "#FF0000";
}
console.log(error);
infoAlert("Cannot get cloud info \n(check the server status and refresh)");
errorAlert("Cannot load cloud info\n\n - check dashboard config \n - check the server is ready");
});
}
window.getConnection = getConnection;
Expand Down Expand Up @@ -1154,171 +1154,59 @@ function getRecommendedSpec(idx, latitude, longitude) {
var minRAM = document.getElementById("minRAM").value;
var maxRAM = document.getElementById("maxRAM").value;
var specName = document.getElementById("specName").value;
var acceleratorType = document.getElementById("acceleratorType").value;
var acceleratorModel = document.getElementById("acceleratorModel").value;
var minAMEM = document.getElementById("minAMEM").value;
var maxAMEM = document.getElementById("maxAMEM").value;

var url = `http://${hostname}:${port}/tumblebug/mcisRecommendVm`;

var struct01 = {
filter: {
policy: [
{
condition: [
{
operand: `${minVCPU}`,
operator: ">=",
},
{
operand: `${maxVCPU}`,
operator: "<=",
},
],
metric: "cpu",
},
{
condition: [
{
operand: `${minRAM}`,
operator: ">=",
},
{
operand: `${maxRAM}`,
operator: "<=",
},
],
metric: "memory",
},
{
condition: [
{
operand: `${specName}`,
}
],
metric: "specname",
},
],
},
limit: "10",
priority: {
policy: [
{
metric: "location",
parameter: [
{
key: "coordinateClose",
val: [`${latitude}/${longitude}`],
},
],
weight: "1.0",
},
],
},
};

var struct02 = {
filter: {
policy: [
{
condition: [
{
operand: `${minVCPU}`,
operator: ">=",
},
{
operand: `${maxVCPU}`,
operator: "<=",
},
],
metric: "cpu",
},
{
condition: [
{
operand: `${minRAM}`,
operator: ">=",
},
{
operand: `${maxRAM}`,
operator: "<=",
},
],
metric: "memory",
},
{
condition: [
{
operand: `${specName}`,
}
],
metric: "specname",
},
],
function createPolicyConditions(metric, values, type) {
const conditions = [];

if (type === 'range') {
if (values.min) conditions.push({ operand: `${values.min}`, operator: ">=" });
if (values.max) conditions.push({ operand: `${values.max}`, operator: "<=" });
} else if (type === 'single') {
if (values.value) conditions.push({ operand: `${values.value}` });
}

return { metric: metric, condition: conditions };
}

var policies = [
createPolicyConditions("NumvCPU", { min: minVCPU, max: maxVCPU }, "range"),
createPolicyConditions("MemGiB", { min: minRAM, max: maxRAM }, "range"),
createPolicyConditions("CspSpecName", { value: specName }, "single"),
createPolicyConditions("AcceleratorType", { value: acceleratorType }, "single"),
createPolicyConditions("AcceleratorModel", { value: acceleratorModel }, "single"),
createPolicyConditions("AcceleratorMemory", { min: minAMEM, max: maxAMEM }, "range"),
];

var recommendationPolicy = recommendPolicy.value;
var priorities = {
"location": {
metric: "location",
parameter: [{ key: "coordinateClose", val: [`${latitude}/${longitude}`] }],
weight: "1.0"
},
limit: "10",
priority: {
policy: [
{
metric: "cost",
weight: "1.0",
},
],
"cost": {
metric: "cost",
weight: "1.0"
},
"performance": {
metric: "performance",
weight: "1.0"
}
};

var struct03 = {
filter: {
policy: [
{
condition: [
{
operand: `${minVCPU}`,
operator: ">=",
},
{
operand: `${maxVCPU}`,
operator: "<=",
},
],
metric: "cpu",
},
{
condition: [
{
operand: `${minRAM}`,
operator: ">=",
},
{
operand: `${maxRAM}`,
operator: "<=",
},
],
metric: "memory",
},
{
condition: [
{
operand: `${specName}`,
}
],
metric: "specname",
},
],
},
var struct = {
filter: { policy: policies },
limit: "10",
priority: {
policy: [
{
metric: "performance",
weight: "1.0",
},
],
},
priority: { policy: [priorities[recommendationPolicy]] }
};

var jsonBody = JSON.stringify(struct01);
if (recommendPolicy.value == "price") {
jsonBody = JSON.stringify(struct02);
} else if (recommendPolicy.value == "performance") {
jsonBody = JSON.stringify(struct03);
}
var jsonBody = JSON.stringify(struct);

axios({
method: "post",
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
"build": "echo 'Removing temporal cache files' && rm -rf dist/* .parcel-cache/* && mkdir -p dist/img/ && cp -r img/ dist/ && parcel build --public-url . index.html"
},
"description": "MapUI Client for CB-Tumblebug (display multi-cloud infra service)",
"version": "0.8.12",
"version": "0.8.13",
"repository": {
"type": "git",
"url": "git+https://github.com/cloud-barista/cb-mapui.git"
Expand Down

0 comments on commit 3095bab

Please sign in to comment.