Merge pull request #57 from seokho-son/master

UI enhancement
cloud-barista · May 30, 2022 · ca208b1 · ca208b1
2 parents 95ae198 + 4ef62c3
commit ca208b1
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 26 deletions.
diff --git a/index.html b/index.html
@@ -280,10 +280,10 @@
         <td>
           <div class="range-slider">
             <span>CPU
-              <input type="number" value="2" min="1" max="448" step="1" style="text-align:center; width:50px">
+              <input type="number" value="1" min="1" max="448" step="1" style="text-align:center; width:50px">
               ~<input type="number" value="8" min="1" max="448" step="1" style="text-align:center; width:50px">
             </span>
-            <input value="2" min="1" max="104" step="1" type="range" id='minVCPU'>
+            <input value="1" min="1" max="104" step="1" type="range" id='minVCPU'>
             <input value="8" min="1" max="104" step="1" type="range" id='maxVCPU'>
             <svg width="100%" height="24">
                 <!-- .range-slider width & x2 should be same -->
@@ -296,10 +296,10 @@
         <td>
           <div class="range-slider">
             <span>RAM
-              <input type="number" value="1.5" min="0.5" max="12288" step="0.5" style="text-align:center; width:50px">
+              <input type="number" value="0.5" min="0.5" max="12288" step="0.5" style="text-align:center; width:50px">
               ~<input type="number" value="8" min="0.5" max="12288" step="0.5" style="text-align:center; width:50px">
             </span>
-            <input value="1.5" min="0.5" max="128" step="1" type="range" id='minRAM'>
+            <input value="0.5" min="0.5" max="128" step="1" type="range" id='minRAM'>
             <input value="8" min="0.5" max="128" step="1" type="range" id='maxRAM'>
             <svg width="100%" height="24">
                 <!-- .range-slider width & x2 should be same -->

diff --git a/index.js b/index.js
@@ -189,7 +189,7 @@ map.on('singleclick', function (event) {
 const http = require("http");
 const csv = require("csv-parser");
 
-const csvPath = "https://raw.githubusercontent.com/cloud-barista/cb-tumblebug/master/assets/cloudlocation.csv";
+const csvPath = "https://raw.githubusercontent.com/cloud-barista/cb-tumblebug/main/assets/cloudlocation.csv";
 const cloudLocation = [];
 var cspPointsAzure = [];
 var cspPointsAws = [];
@@ -809,13 +809,13 @@ function changeSizeStatus(status){
   } else if (status.includes("Partial")){
     return 2.4;
   } else if (status.includes("Running")){
-    return 2.8;
+    return 2.5;
   } else if (status.includes("Suspending")){
     return 2.4;
   } else if (status.includes("Suspended")){
     return 2.4;
   } else if (status.includes("Creating")){
-    return 2.8;
+    return 2.5;
   } else if (status.includes("Resuming")){
     return 2.4;
   } else if (status.includes("Terminated")){
@@ -833,7 +833,7 @@ function changeSizeByName(status){
   } else if (status.includes("-ws")){
     return 0.4;
   } else {
-    return 2.8;
+    return 2.5;
   }
 }
 
@@ -1114,7 +1114,7 @@ function getMcis() {
       username: `${username}`,
       password: `${password}`
     },
-    timeout: 9000
+    timeout: 30000
   })
   .then((res)=>{
       document.getElementById("hostname").style.color = "#000000";
@@ -1370,8 +1370,6 @@ function createMcis() {
     createMcisReq.name = "mc-" + `${randomString}`;
     createMcisReq.vm = recommendedSpecList;
 
-    var jsonBody = JSON.stringify(createMcisReq, undefined, 4);
-
     var vmGroupReqString = '';
     for(i = 0; i < createMcisReq.vm.length; i++) {
       var html = 
@@ -1393,15 +1391,25 @@ function createMcis() {
       html: 
         '<font size=3>' +
         'MCIS name: <b>' + createMcisReq.name +
-        '<br></b> Install CB-Dragonfly monitoring agent? <b>' + createMcisReq.installMonAgent +
 
         vmGroupReqString,
       showCancelButton: true,
+      inputPlaceholder: 'Deploy CB-Dragonfly monitoring agent',
+      input: 'checkbox',
+      inputValue: 0,
       confirmButtonText: 'Confirm',
+      inputPlaceholder: '<font size=3> Check to deploy CB-Dragonfly monitoring agent',
       showLoaderOnConfirm: true,
+      scrollbarPadding: false,
       allowOutsideClick: () => !Swal.isLoading()
     }).then((result) => {
       if (result.isConfirmed) {
+        if (result.value) {
+          Swal.fire('Create MCIS with CB-Dragonfly monitoring agent')
+          createMcisReq.installMonAgent = 'yes'
+        }
+        var jsonBody = JSON.stringify(createMcisReq, undefined, 4);
+
         messageTextArea.value = " Creating MCIS ...";
         document.getElementById("createMcis").style.color = "#FF0000";
 
@@ -1685,7 +1693,7 @@ function getRecommendedSpec(idx, latitude, longitude) {
         messageTextArea.value = messageTextArea.value.replace(/\n.*$/, '')
         latLonInputPairIdx--;
         cspPointsCircle.pop();
-        geoCspPointsCircle.pop();
+        geoCspPointsCircle[0] = new MultiPoint([cspPointsCircle]);
       }
     })
   });
@@ -2103,7 +2111,7 @@ function startApp() {
     var url = `http://${hostname}:${port}/tumblebug/ns/${namespace}/cmd/mcis/${mcisid}`
     var cmd = ""
     if (selectApp.value == "Xonotic"){
-      cmd = "wget https://raw.githubusercontent.com/cloud-barista/cb-tumblebug/main/scripts/usecases/xonotic/startServer.sh; chmod +x ~/startServer.sh; sudo ~/startServer.sh " + "Xonotic-by-Cloud-Barista-" + mcisid
+      cmd = "wget https://raw.githubusercontent.com/cloud-barista/cb-tumblebug/main/scripts/usecases/xonotic/startServer.sh; chmod +x ~/startServer.sh; sudo ~/startServer.sh " + "Xonotic-by-Cloud-Barista-" + mcisid + " 26000" + " 8"
     } else if (selectApp.value == "Westward"){
       cmd = "wget https://raw.githubusercontent.com/cloud-barista/cb-tumblebug/main/scripts/setgame.sh -O ~/setgame.sh; chmod +x ~/setgame.sh; sudo ~/setgame.sh"
     } else if (selectApp.value == "Nginx"){
@@ -2285,15 +2293,6 @@ function drawMCIS(event) {
   // Draw CSP location first
   if (Array.isArray(geoCspPointsCloudit) && geoCspPointsCloudit.length ) {
     // array exists and is not empty
-
-    vectorContext.setStyle(iconStyleAzure);
-    vectorContext.drawGeometry(geoCspPointsAzure[0]);
-    vectorContext.setStyle(iconStyleAws);
-    vectorContext.drawGeometry(geoCspPointsAws[0]);
-    vectorContext.setStyle(iconStyleGcp);
-    vectorContext.drawGeometry(geoCspPointsGcp[0]);
-    vectorContext.setStyle(iconStyleAlibaba);
-    vectorContext.drawGeometry(geoCspPointsAlibaba[0]);
     vectorContext.setStyle(iconStyleCloudit);
     vectorContext.drawGeometry(geoCspPointsCloudit[0]);
     vectorContext.setStyle(iconStyleIBM);
@@ -2302,6 +2301,15 @@ function drawMCIS(event) {
     vectorContext.drawGeometry(geoCspPointsTencent[0]);
     vectorContext.setStyle(iconStyleNcpVpc);
     vectorContext.drawGeometry(geoCspPointsNcpVpc[0]);
+    vectorContext.setStyle(iconStyleAlibaba);
+    vectorContext.drawGeometry(geoCspPointsAlibaba[0]);
+    vectorContext.setStyle(iconStyleAzure);
+    vectorContext.drawGeometry(geoCspPointsAzure[0]);
+    vectorContext.setStyle(iconStyleAws);
+    vectorContext.drawGeometry(geoCspPointsAws[0]);
+    vectorContext.setStyle(iconStyleGcp);
+    vectorContext.drawGeometry(geoCspPointsGcp[0]);
+
   }
 
   if (cspPointsCircle.length) {
@@ -2334,7 +2342,7 @@ function drawMCIS(event) {
       // MCIS status text style
       text: new Text({
         text: mcisStatus[i],
-        font: 'bold 12px sans-serif',
+        font: 'bold 10px sans-serif',
         scale: changeSizeStatus(mcisName[i]+mcisStatus[i]),
         offsetY: 110,
         stroke: new Stroke({
@@ -2356,9 +2364,9 @@ function drawMCIS(event) {
     var polyNameTextStyle = new Style({
       text: new Text({
         text: mcisName[i],
-        font: 'bold 12px sans-serif',
+        font: 'bold 10px sans-serif',
         scale: (changeSizeByName(mcisName[i]+mcisStatus[i]) + 0.8 ),
-        offsetY: 60,
+        offsetY: 80,
         stroke: new Stroke({
           color: 'white',
           width: 1