From 45720d3bcf84e017395091a61c9d6d28e1878962 Mon Sep 17 00:00:00 2001
From: catborise <catborise@yahoo.com>
Date: Fri, 16 Nov 2018 16:08:35 +0300
Subject: [PATCH] convert HDD selection of new instance creation to user
 request. Before that, instance creation gets all images of all pools. If
 there is a problem with some pools other than default. It causes problem and
 sometimes it takes too long to opeen create instance page. With that
 extension getting volumes is up to request. Firs you must select pool then
 select volume. For now the create page opens instantly.

---
 create/templates/create_instance.html | 120 ++++++++++++++++++++------
 create/views.py                       |   3 +-
 2 files changed, 95 insertions(+), 28 deletions(-)

diff --git a/create/templates/create_instance.html b/create/templates/create_instance.html
index 024405d..aab1228 100644
--- a/create/templates/create_instance.html
+++ b/create/templates/create_instance.html
@@ -16,6 +16,22 @@
     {% include 'errors_block.html' %}
     {% include 'pleasewaitdialog.html' %}
 
+
+    {% if form.errors %}
+    {% for field in form %}
+        {% for error in field.errors %}
+            <div class="alert alert-danger">
+                <strong>{{ error|escape }}</strong>
+            </div>
+        {% endfor %}
+    {% endfor %}
+    {% for error in form.non_field_errors %}
+        <div class="alert alert-danger">
+            <strong>{{ error|escape }}</strong>
+        </div>
+    {% endfor %}
+{% endif %}
+
     <div class="row" id="max-width-page">
         <div class="col-lg-12">
             <div role="tabpanel">
@@ -223,9 +239,9 @@
                                 </tbody>
                             </table>
                         </div>
-                    {% endif %}
-                <div class="clearfix"></div>
-            </div>
+                        {% endif %}
+                        <div class="clearfix"></div>
+                    </div>
 
             <div role="tabpanel" class="tab-pane tab-pane-bordered" id="addCustom">
                 <div class="well">
@@ -239,7 +255,7 @@
                     <div class="form-group">
                         <label class="col-sm-3 control-label">{% trans "VCPU" %}</label>
                         <div class="col-sm-6">
-                            <input type="text" class="form-control" name="vcpu" value="1" maxlength="1" required pattern="[0-9]">
+                            <input type="text" class="form-control" name="vcpu" value="1" maxlength="2" required pattern="[0-9]">
                         </div>
                     </div>
                     <div class="form-group">
@@ -256,24 +272,36 @@
                         </div>
                         <label class="col-sm-1 control-label">{% trans "MB" %}</label>
                     </div>
+                    <div id="disk_list_div" class="form-group" hidden>
+                        <label id="added_disks" class="col-sm-3 control-label">{% trans "Added Disks" %}</label>
+                        <div class="col-sm-6">
+                         <ul id="img-list" class="form-row">
+                              <!-- populated from javascript -->
+                          </ul>
+                        </div>
+                    </div>
                     <div class="form-group">
                         <label class="col-sm-3 control-label">{% trans "HDD" %}</label>
-                        <div class="col-sm-6">
-                            <ul id="img-list">
-                                <!-- populated from javascript -->
-                            </ul>
-                            <input id="images" name="images" type="hidden" value=""/>
-                            <select id="image-control" name="image-control" class="form-control" multiple="multiple">
-                                {% if get_images %}
-                                    {% for name in get_images %}
-                                        <option value="{{ name }}">{{ name }}</option>
+                        <input id="images" name="images" type="hidden" value=""/>
+                        <div class="col-sm-3">
+                            <select id="storage-control" name="storage-control" class="form-control" onchange="get_cust_vols({{ compute_id }}, value);">
+                                {% if storages %}
+                                    <option value disabled selected>{% trans "Select pool..." %}</option>
+                                    {% for storage in storages %}
+                                        <option value="{{ storage }}" >{{ storage }}</option>
                                     {% endfor %}
                                 {% else %}
                                     <option value="">{% trans "None" %}</option>
                                 {% endif %}
                             </select>
                         </div>
+                        <div class="col-sm-3">
+                            <select id="image-control" name="image-control" multiple="multiple">
+                                <!-- populated from javascript -->
+                            </select>
+                        </div>
                     </div>
+
                     <div class="form-group meta-prealloc">
                         <label class="col-sm-3 control-label">{% trans "Metadata" %}</label>
                         <div class="col-sm-6">
@@ -354,7 +382,7 @@
                         </div>
                     </div>
                     {% if storages %}
-                        <button type="submit" class="btn btn-primary" name="create" onclick="showPleaseWaitDialog()" value="1">
+                        <button type="submit" class="btn btn-primary" name="create" formnovalidate onclick="showPleaseWaitDialog()" value="1">
                             {% trans "Create" %}
                         </button>
                     {% else %}
@@ -379,7 +407,7 @@
                         <div class="form-group">
                             <label class="col-sm-3 control-label">{% trans "VCPU" %}</label>
                             <div class="col-sm-6">
-                                <input type="text" class="form-control" name="vcpu" value="1" maxlength="1" required pattern="[0-9]">
+                                <input type="text" class="form-control" name="vcpu" value="1" maxlength="2" required pattern="[0-9]">
                             </div>
                         </div>
                         <div class="form-group">
@@ -396,19 +424,27 @@
                             </div>
                             <label class="col-sm-1 control-label">{% trans "MB" %}</label>
                         </div>
+
                         <div class="form-group">
                             <label class="col-sm-3 control-label">{% trans "HDD" %}</label>
-                            <div class="col-sm-6">
-                                <select name="template" class="form-control">
-                                    {% if get_images %}
-                                        {% for name in get_images %}
-                                            <option value="{{ name }}">{{ name }}</option>
+                            <input id="images" name="images" type="hidden" value=""/>
+                            <div class="col-sm-3">
+                                <select id="temp-storage-control" name="temp-storage-control" class="form-control" onchange="get_template_vols({{ compute_id }}, value);">
+                                    {% if storages %}
+                                        <option value disabled selected>{% trans "Select pool" %}...</option>
+                                        {% for storage in storages %}
+                                            <option value="{{ storage }}" >{{ storage }}</option>
                                         {% endfor %}
                                     {% else %}
                                         <option value="">{% trans "None" %}</option>
                                     {% endif %}
                                 </select>
                             </div>
+                            <div class="col-sm-3">
+                                <select id="template" class="form-control" name="template" disabled>
+                                    <!-- populated from javascript -->
+                                </select>
+                            </div>
                         </div>
                         <div class="form-group meta-prealloc">
                             <label class="col-sm-3 control-label">{% trans "Metadata" %}</label>
@@ -487,7 +523,7 @@
                         </div>
 
                         {% if storages %}
-                            <button type="submit" class="btn btn-primary" name="create" value="1" onclick="showPleaseWaitDialog()">
+                            <button type="submit" class="btn btn-primary" name="create" value="1" formnovalidate onclick="showPleaseWaitDialog()">
                                 {% trans "Create" %}
                             </button>
                         {% else %}
@@ -539,12 +575,14 @@
     }
 
     $(document).ready(function () {
-        $('#image-control').multiselect({
+
+          $('#image-control').multiselect({
+            disableIfEmpty: true,
             enableCaseInsensitiveFiltering: true,
             maxHeight: 400,
             inheritClass: true,
             buttonText: function (options, select) {
-                return 'Add image';
+                return 'Add image...';
             },
             buttonTitle: function (options, select) {
                 return '';
@@ -552,21 +590,27 @@
             onChange: function (element, checked) {
                 var input_value = toggleValue($('#images').val(), element.val(), checked);
                 $('#images').val(input_value);
+
                 var selected_list_html = '';
                 var counter = 0;
                 if (input_value != '') {
-                    $.each(input_value.split(','), function (index, value) {
+                       $('#disk_list_div').show();
+                       $.each(input_value.split(','), function (index, value) {
                         var li = '<li>hdd' + counter +
                                 ' -> ' + value + ' ' +
-                                '<a class="btn-link" onclick="javascript:$(\'#image-control\').multiselect(\'deselect\', \'' + value + '\')">x</a></li>';
+                                '<a class="btn-link" onclick="javascript:$(\'#image-control\').multiselect(\'deselect\', \'' + value + '\', true)">x</a></li>';
                         selected_list_html += li;
                         counter++;
                     });
+                }else {
+                    $('#disk_list_div').hide();
                 }
                 $('#img-list').html(selected_list_html);
+
             }
         });
 
+
         $('#network-control').multiselect({
             inheritClass: true,
             buttonText: function (options, select) {
@@ -584,7 +628,7 @@
                     $.each(input_value.split(','), function (index, value) {
                         var li = '<li>eth' + counter +
                                 ' -> ' + value + ' ' +
-                                '<a class="btn-link" onclick="javascript:$(\'#network-control\').multiselect(\'deselect\', \'' + value + '\')">x</a></li>';
+                                '<a class="btn-link" onclick="javascript:$(\'#network-control\').multiselect(\'deselect\', \'' + value + '\', true)">x</a></li>';
                         selected_list_html += li;
                         counter++;
                     });
@@ -593,7 +637,31 @@
             }
         });
     });
+
+    function get_cust_vols(compute_id, pool) {
+        get_vol_url = "/computes/" + compute_id + "/storage/" + pool + "/volumes";
+        $.getJSON(get_vol_url, function (data) {
+            $("#image-control").find('option').remove();
+            $.each(data['vols'], function(i, item) {
+                $("#image-control").append('<option value=' + item +'>' + item + '</option>');
+
+            });
+            $('#image-control').multiselect('rebuild');
+        });
+    }
+
+    function get_template_vols(compute_id, pool) {
+        get_vol_url = "/computes/" + compute_id + "/storage/" + pool + "/volumes";
+        $.getJSON(get_vol_url, function (data) {
+            $("#template").find('option').remove();
+            $.each(data['vols'], function(i, item) {
+                $("#template").append('<option value=' + item +'>' + item + '</option>');
+            });
+        });
+        $("#template").removeAttr("disabled");
+    }
 </script>
+
 <script src="{% static "js/ace.js" %}"></script>
 <script>
     var editor = ace.edit("editor");
diff --git a/create/views.py b/create/views.py
index a975619..d514a22 100644
--- a/create/views.py
+++ b/create/views.py
@@ -48,7 +48,7 @@ def create_instance(request, compute_id):
         default_cache = INSTANCE_VOLUME_DEFAULT_CACHE
         listener_addr = QEMU_CONSOLE_LISTEN_ADDRESSES
         mac_auto = util.randomMAC()
-        get_images = sorted(conn.get_storages_images())
+        #get_images = sorted(conn.get_storages_images())
     except libvirtError as lib_err:
         error_messages.append(lib_err)
 
@@ -157,5 +157,4 @@ def create_instance(request, compute_id):
                                     conn.delete_volume(volumes.keys()[0])
                                 error_messages.append(lib_err)
         conn.close()
-
     return render(request, 'create_instance.html', locals())