Front end fixes for enforcing hostname

Signed-off-by: Sean Smith <ssmith@iol.unh.edu>
Change-Id: I0a077307a2e1bcfef5b31acdaf4ecb73be64fff9

4 files changed, 26 insertions, 27 deletions

diff --git a/src/booking/forms.py b/src/booking/forms.py
index 2a8784f..19c0c85 100644
--- a/src/booking/forms.py
+++ b/src/booking/forms.py
@@ -59,6 +59,14 @@ class QuickBookingForm(forms.Form):
 
         self.fields['filter_field'] = MultipleSelectFilterField(widget=MultipleSelectFilterWidget(**lab_data))
 
+        help_text = 'Hostname can be set only for single-node bookings. For multi-node bookings set hostname through Design a POD.'
+        self.fields['hostname'].widget.attrs.update({
+            'class': 'has-popover',
+            'data-content': help_text,
+            'data-placement': 'top',
+            'data-container': 'body'
+        })
+
     def build_user_list(self):
         """
         Build list of UserProfiles.
diff --git a/src/booking/quick_deployer.py b/src/booking/quick_deployer.py
index 8b3af6c..7865ee4 100644
--- a/src/booking/quick_deployer.py
+++ b/src/booking/quick_deployer.py
@@ -111,7 +111,8 @@ def update_template(old_template, image, hostname, user):
             profile=old_config.profile,
             image=image_to_set,
             template=template,
-            is_head_node=old_config.is_head_node
+            is_head_node=old_config.is_head_node,
+            name=hostname if len(old_template.getConfigs()) == 1 else old_config.name
         )
 
         for old_iface_config in old_config.interface_configs.all():
diff --git a/src/static/js/dashboard.js b/src/static/js/dashboard.js
index efc0542..12d8ee6 100644
--- a/src/static/js/dashboard.js
+++ b/src/static/js/dashboard.js
@@ -388,21 +388,30 @@ class MultipleSelectFilterWidget {
 
     reserveResource(node){
         const required_resources = JSON.parse(node['required_resources']);
+        let hostname = document.getElementById('id_hostname');
+        let cnt = 0
+
 
         for(let resource in required_resources){
             this.available_resources[resource] -= required_resources[resource];
+            cnt += required_resources[resource];
         }
 
+        if (cnt > 1)
+            hostname.readOnly = true;
+
         this.updateAvailibility();
     }
 
     releaseResource(node){
         const required_resources = JSON.parse(node['required_resources']);
+        let hostname = document.getElementById('id_hostname');
 
         for(let resource in required_resources){
             this.available_resources[resource] += required_resources[resource];
         }
 
+        hostname.readOnly = false;
         this.updateAvailibility();
     }
 
diff --git a/src/templates/base/booking/quick_deploy.html b/src/templates/base/booking/quick_deploy.html
index c954073..8c8b1df 100644
--- a/src/templates/base/booking/quick_deploy.html
+++ b/src/templates/base/booking/quick_deploy.html
@@ -18,7 +18,7 @@
             </div>
         </div>
         <div class="row justify-content-center">
-            <div class="col-12 col-lg-3 my-2">
+            <div class="col-12 col-lg-4 my-2">
                 <div class="col border rounded py-2 h-100">
                     {% bootstrap_field form.purpose %}
                     {% bootstrap_field form.project %}
@@ -31,28 +31,19 @@
                 </div>
             </div>
             {% block collab %}
-            <div class="col-12 col-lg-3 my-2">
+            <div class="col-12 col-lg-4 my-2">
                 <div class="col border rounded py-2 h-100">
                     <label>Collaborators</label>
                     {{ form.users }}
                 </div>
             </div>
             {% endblock collab %}
-            <div class="col-12 col-lg-3 my-2">
+            <div class="col-12 col-lg-4 my-2">
                 <div class="col border rounded py-2 h-100">
                     {% bootstrap_field form.hostname %}
                     {% bootstrap_field form.image %}
                 </div>
             </div>
-            {% block opnfv %}
-            <div class="col-12 col-lg-3 my-2">
-                <div class="col border rounded py-2 h-100">
-                    <strong>OPNFV: (Optional)</strong>
-                    {% bootstrap_field form.installer %}
-                    {% bootstrap_field form.scenario %}
-                </div>
-            </div>
-            {% endblock opnfv %}
             <div class="col-12 d-flex mt-2 justify-content-end">
                 <button id="quick_booking_confirm" onclick="submit_form();" type="button" class="btn btn-success">Confirm</button>
             </div>
@@ -85,6 +76,10 @@
         }
     }
 
+    $(document).ready(function() {
+        $('.has-popover').popover({'trigger':'hover'});
+    });
+
     var sup_image_dict = {{image_filter | safe}};
     var sup_installer_dict = {{installer_filter | safe}};
     var sup_scenario_dict = {{scenario_filter | safe}};
@@ -108,25 +103,11 @@
     }
 
     imageFilter();
-    $('#id_installer').children().hide();
-    $('#id_scenario').children().hide();
-
 
     Array.from(document.getElementsByClassName("grid-item-select-btn")).forEach(function (element) {
         element.addEventListener('click', imageFilter);
     });
 
-    function installerHider() {
-        dropFilter("id_installer", sup_installer_dict, "id_image");
-        scenarioHider();
-    }
-    document.getElementById('id_image').addEventListener('change', installerHider);
-
-    function scenarioHider() {
-        dropFilter("id_scenario", sup_scenario_dict, "id_installer");
-    }
-    document.getElementById('id_installer').addEventListener('change', scenarioHider);
-
     function dropFilter(target, target_filter, master) {
         var dropdown = document.getElementById(target);