Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add recommend by spec name keyword #110

Merged
merged 2 commits into from
Mar 5, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 32 additions & 14 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -272,21 +272,12 @@
</div>
</div>

<!-- Disk Size Field -->
<div class="form-group col">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">Disk Size</span>
</div>
<input type="text" class="form-control" id="diskSize" name="diskSize" value="default">
</div>
</div>

<!-- CPU Range Field -->
<div class="form-group col">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">CPU(N)</span>
<span class="input-group-text">CPU(n)</span>
</div>
<input type="number" class="form-control m-0" id='minVCPU' value="1" min="1" max="448" step="1">
<span class="mx-1">~</span>
Expand All @@ -299,7 +290,7 @@
<div class="form-group col">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">Mem(GB)</span>
<span class="input-group-text">Mem(gb)</span>
</div>
<input type="number" class="form-control m-0" id='minRAM' value="0.5" min="0.5" max="12288"
step="0.5">
Expand All @@ -308,6 +299,28 @@
</div>
</div>

<!-- Spec Name Field -->
<div class="form-group col">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">Spec(t)</span>
</div>
<input type="text" class="form-control" id="specName" name="specName" value=""
placeholder="Ex: 2xlarge">
</div>
</div>

<!-- Disk Size Field -->
<div class="form-group col">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">Disk Size</span>
</div>
<input type="text" class="form-control" id="diskSize" name="diskSize" placeholder="Ex: 250">
</div>
</div>


<!-- Clear Selection Field -->
<div class="form-group col">
<button type="button" onClick="clearCircle('clearText');" class="btn btn-secondary w-100">Clear
Expand Down Expand Up @@ -390,7 +403,8 @@
<div class="input-group-prepend">
<span class="input-group-text" id="pubipLabel">Pub IP</span>
</div>
<select id="pubip" name="pubip" class="form-control" aria-label="Pub IP" aria-describedby="pubipLabel">
<select id="pubip" name="pubip" class="form-control" aria-label="Pub IP"
aria-describedby="pubipLabel">
<!-- Options will be filled dynamically -->
</select>
</div>
Expand All @@ -402,7 +416,8 @@
<div class="input-group-prepend">
<span class="input-group-text" id="priipLabel">Pri IP</span>
</div>
<select id="priip" name="priip" class="form-control" aria-label="Pri IP" aria-describedby="priipLabel">
<select id="priip" name="priip" class="form-control" aria-label="Pri IP"
aria-describedby="priipLabel">
<!-- Options will be filled dynamically -->
</select>
</div>
Expand Down Expand Up @@ -640,7 +655,9 @@
</div>
</div> -->
<div class="col-md-12">
<div id="jsonoutput" class="form-control" readonly style="height: auto; background-color: black; word-wrap: break-word; overflow-wrap: break-word; overflow-x: auto;"></div>
<div id="jsonoutput" class="form-control" readonly
style="height: auto; background-color: black; word-wrap: break-word; overflow-wrap: break-word; overflow-x: auto;">
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -713,6 +730,7 @@
setColumnHeight();
</script>


<script type="text/javascript">
document.addEventListener('DOMContentLoaded', (event) => {
// event linster for copy to clipboard
Expand Down
104 changes: 76 additions & 28 deletions index.js
Original file line number Diff line number Diff line change
Expand Up @@ -135,7 +135,7 @@ var map = new Map({
layers: [tileLayer],
target: "map",
view: new View({
center: [40, 90],
center: [30, 30],
zoom: 3,
}),
//projection: 'EPSG:4326'
Expand Down Expand Up @@ -454,6 +454,7 @@ function addIconToMap(imageSrc, point, index) {
source: vectorSource,
});
map.addLayer(iconLayer);
map.render();
}
Object.keys(cspIconImg).forEach((csp, index) => {
const iconIndex = index.toString().padStart(3, "0");
Expand Down Expand Up @@ -870,29 +871,29 @@ function getMcis() {

// Get list of cloud connections
function getConnection() {
let timerInterval;
Swal.fire({
title: "Show registered Cloud Regions to the Map",
html: "closed in <b></b> milliseconds.",
timer: 2000,
timerProgressBar: true,
position: "top-end",
didOpen: () => {
Swal.showLoading();
const b = Swal.getHtmlContainer().querySelector("b");
timerInterval = setInterval(() => {
b.textContent = Swal.getTimerLeft();
}, 100);
},
willClose: () => {
clearInterval(timerInterval);
},
}).then((result) => {
/* Read more about handling dismissals below */
if (result.dismiss === Swal.DismissReason.timer) {
console.log("I was closed by the timer");
}
});
// let timerInterval;
// Swal.fire({
// title: "Show registered Cloud Regions to the Map",
// html: "closed in <b></b> milliseconds.",
// timer: 2000,
// timerProgressBar: true,
// position: "top-end",
// didOpen: () => {
// Swal.showLoading();
// const b = Swal.getHtmlContainer().querySelector("b");
// timerInterval = setInterval(() => {
// b.textContent = Swal.getTimerLeft();
// }, 100);
// },
// willClose: () => {
// clearInterval(timerInterval);
// },
// }).then((result) => {
// /* Read more about handling dismissals below */
// if (result.dismiss === Swal.DismissReason.timer) {
// console.log("I was closed by the timer");
// }
// });

var hostname = hostnameElement.value;
var port = portElement.value;
Expand Down Expand Up @@ -948,21 +949,20 @@ function getConnection() {
briefAddr +
")\n";

// 배열이 존재하지 않는 경우 초기화
if (!cspPoints[providerName]) {
cspPoints[providerName] = [];
}

cspPoints[providerName].push([longitude, latitude]);

// geoCspPoints에 MultiPoint 객체 생성
if (!geoCspPoints[providerName]) {
geoCspPoints[providerName] = [];
}
geoCspPoints[providerName][0] = new MultiPoint(
cspPoints[providerName]
);
});
map.render();

infoAlert("Registered Cloud Regions: " + obj.connectionconfig.length);
}
Expand Down Expand Up @@ -1151,6 +1151,7 @@ function getRecommendedSpec(idx, latitude, longitude) {
var maxVCPU = document.getElementById("maxVCPU").value;
var minRAM = document.getElementById("minRAM").value;
var maxRAM = document.getElementById("maxRAM").value;
var specName = document.getElementById("specName").value;

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

Expand Down Expand Up @@ -1183,6 +1184,14 @@ function getRecommendedSpec(idx, latitude, longitude) {
],
metric: "memory",
},
{
condition: [
{
operand: `${specName}`,
}
],
metric: "specname",
},
],
},
limit: "10",
Expand Down Expand Up @@ -1231,6 +1240,14 @@ function getRecommendedSpec(idx, latitude, longitude) {
],
metric: "memory",
},
{
condition: [
{
operand: `${specName}`,
}
],
metric: "specname",
},
],
},
limit: "10",
Expand Down Expand Up @@ -1273,6 +1290,14 @@ function getRecommendedSpec(idx, latitude, longitude) {
],
metric: "memory",
},
{
condition: [
{
operand: `${specName}`,
}
],
metric: "specname",
},
],
},
limit: "10",
Expand Down Expand Up @@ -2628,7 +2653,7 @@ function startApp() {
defaultRemoteCommand01 =
"wget https://raw.githubusercontent.com/cloud-barista/cb-tumblebug/main/scripts/usecases/llm/startServer.sh; chmod +x ~/startServer.sh";
defaultRemoteCommand02 =
"~/startServer.sh " + "--ip" + publicIPs + " --port 5000" + " --model tiiuae/falcon-7b-instruct";
"~/startServer.sh " + "--ip" + publicIPs + " --port 5000" + " --token 1024" + " --model tiiuae/falcon-7b-instruct";
} else if (selectApp.value == "Westward") {
defaultRemoteCommand =
"wget https://raw.githubusercontent.com/cloud-barista/cb-tumblebug/main/scripts/setgame.sh";
Expand Down Expand Up @@ -2828,7 +2853,7 @@ function executeRemoteCmd() {
let cmdCount = 3; // Initial number of textboxes

if (mcisid) {
var spinnerId = addSpinnerTask("Remote command to " + mcisid);
var spinnerId = ""

messageTextArea.value =
"[Forward remote ssh command to MCIS:" + mcisid + "]\n";
Expand Down Expand Up @@ -2930,6 +2955,8 @@ function executeRemoteCmd() {

var jsonBody = JSON.stringify(commandReqTmp, undefined, 4);

spinnerId = addSpinnerTask("Remote command to " + mcisid);

axios({
method: "post",
url: url,
Expand Down Expand Up @@ -2963,9 +2990,29 @@ function executeRemoteCmd() {
});

messageTextArea.value = formattedOutput;
})
.catch(function (error) {
if (error.response) {
// status code is not 2xx
console.log(error.response.data);
console.log(error.response.status);
console.log(error.response.headers);
} else {
console.log("Error", error.message);
}
console.log(error.config);

errorAlert(
JSON.stringify(error.response.data, null, 2).replace(
/['",]+/g,
""
)
);
})
.finally(function () {
removeSpinnerTask(spinnerId);
});

} else {
messageTextArea.value = "Cannot set command";
removeSpinnerTask(spinnerId);
Expand Down Expand Up @@ -3125,6 +3172,7 @@ window.onload = function () {
var strArray = tbServerAp.split(":");
console.log("Host address: " + strArray[0]);
document.getElementById("hostname").value = strArray[0];
setTimeout(getConnection, 3000);

updateNsList();

Expand Down
2 changes: 1 addition & 1 deletion package.json
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.1",
"version": "0.8.4",
"repository": {
"type": "git",
"url": "git+https://github.com/cloud-barista/cb-mapui.git"
Expand Down