Improve create container UX

Author: turtle0x1

CHANGELOG

@@ -2,6 +2,7 @@ Unreleased
 
 Changed
     Used buttons instead of dropdown to change instance state
+    Slight improvement to create container UX
 
 0.9.3
 

src/views/index.php

@@ -552,7 +552,9 @@
        ]
 
        if(loadServerOviewDescriptions.includes(msg.metadata.description)  && msg.metadata.status_code == 200 && $("#mainBreadcrumb").find(".active").text()){
-          loadContainerTreeAfter();
+          if($(`.nav-item[data-hostid='${msg.hostId}']`).hasClass("open")){
+              loadContainerTreeAfter(0, msg.hostId, msg.hostAlias);
+          }
        }
 
        if(hostList.length == 0){

src/views/modals/containers/createContainer.php

@@ -18,7 +18,12 @@
             </div>
             <div class="col-md-6">
                 <div class="form-group">
-                    <label> Instance Type (Optional) </label>
+                    <label
+                        data-toggle="tooltip"
+                        data-placement="bottom"
+                        title="Used to impose resource limits akin to different cloud provider limits!">
+                         Instance Type (Optional)
+                        <i class="fas fa-question-circle"></i></label>
                     <select id="newContainerInstanceType" class="form-control"></select>
                 </div>
             </div>
@@ -202,16 +207,30 @@
     });
 
     $("#modal-container-create").on("click", "#create", function(){
+        let btn = $(this);
+
+        btn.html('<i class="fa fa-cog fa-spin"></i>Creating..');
+        $("#modal-container-create").find(".btn").attr("disabled", true);
+
         let profileIds = mapObjToSignleDimension($("#newContainerProfiles").tokenInput("get"), "profile");
         let hosts = mapObjToSignleDimension($("#newContainerHosts").tokenInput("get"), "hostId");
         let image = $("#newContainerImage").tokenInput("get");
         let instanceType = $("#newContainerInstanceType").val();
 
-        if(image.legnth == 0 || !image[0].hasOwnProperty("details")){
+        if(image.length == 0 || !image[0].hasOwnProperty("details")){
+            btn.html('Create Container');
+            $("#modal-container-create").find(".btn").attr("disabled", false);
             makeToastr(JSON.stringify({state: "error", message: "Please select image"}));
             return false;
         }
 
+        if(hosts.length == 0 || !image[0].hasOwnProperty("details")){
+            btn.html('Create Container');
+            $("#modal-container-create").find(".btn").attr("disabled", false);
+            makeToastr(JSON.stringify({state: "error", message: "Please select host/s"}));
+            return false;
+        }
+
         let gpus = [];
 
         if(hosts.length == 1){
@@ -240,6 +259,8 @@
         });
 
         if(invalid){
+            btn.html('Create Container');
+            $("#modal-container-create").find(".btn").attr("disabled", false);
             makeToastr(JSON.stringify({state: "error", message: message}));
             return false;
         }
@@ -256,11 +277,15 @@
 
         ajaxRequest(globalUrls.instances.create, x, function(data){
             let x = makeToastr(data);
+            btn.html('Create Container');
+            $("#modal-container-create").find(".btn").attr("disabled", false);
             if(x.state == "error"){
                 return false;
             }
             $("#modal-container-create").modal("hide");
-            createDashboardSidebar();
+            if(typeof io == "undefined"){
+                createDashboardSidebar();
+            }
         });
     });
 </script>