From 3cd4212cdd01612adbea700aca956d12c8e6fafd Mon Sep 17 00:00:00 2001
From: cserma <emre.serdengecti@hotmail.com>
Date: Wed, 10 May 2023 13:59:13 +0300
Subject: [PATCH] modified 'create new instance' screen with compute details

---
 computes/models.py                         |  4 ++
 instances/templates/allinstances.html      |  4 +-
 instances/templates/create_inst_block.html | 61 +++++++++++++---------
 3 files changed, 42 insertions(+), 27 deletions(-)

diff --git a/computes/models.py b/computes/models.py
index f81eafa..86df52a 100644
--- a/computes/models.py
+++ b/computes/models.py
@@ -48,6 +48,10 @@ class Compute(Model):
     @cached_property
     def cpu_count(self):
         return self.proxy.get_node_info()[3]
+    
+    @cached_property
+    def cpu_usage(self):
+        return round(self.proxy.get_cpu_usage().get('usage'))
 
     @cached_property
     def ram_size(self):
diff --git a/instances/templates/allinstances.html b/instances/templates/allinstances.html
index 457d9f6..b600db5 100644
--- a/instances/templates/allinstances.html
+++ b/instances/templates/allinstances.html
@@ -39,8 +39,8 @@
     <script src="{% static 'js/filter-table.js' %}"></script>
     {% if request.user.is_superuser %}
         <script>
-            function goto_compute() {
-                let compute = $("#compute_select").val();
+            function goto_compute(compute) {
+                //let compute = $("#compute_select").val();
                 window.location.href = "{% url 'instances:create_instance_select_type' 1 %}".replace(1, compute);
             }
         </script>
diff --git a/instances/templates/create_inst_block.html b/instances/templates/create_inst_block.html
index e069773..6ef1915 100644
--- a/instances/templates/create_inst_block.html
+++ b/instances/templates/create_inst_block.html
@@ -5,7 +5,7 @@
 
 <!-- Modal pool -->
 <div class="modal fade" id="AddInstance" tabindex="-1" role="dialog" aria-labelledby="AddInstanceModal" aria-hidden="true">
-    <div class="modal-dialog">
+    <div class="modal-dialog modal-dialog-scrollable modal-lg">
         <div class="modal-content">
             <div class="modal-header">
                 <h5 class="modal-title">{% trans "Choose a compute for new instance" %}</h5>
@@ -15,33 +15,44 @@
                 <form method="post" aria-label="Select compute for instance create form">
                     {% csrf_token %}
                     <div class="row">
-                        <label class="col-sm-4 col-form-label">{% trans "Compute" %}</label>
-                        <div class="col-sm-6">
-                            <select class="form-select" id="compute_select">
-                                <option>{% trans "Please select" %}</option>
+                        <table class="table table-hover">
+                            <thead>
+                                <tr style="cursor:default;pointer-events:none">
+                                    <th>{% trans "Name" %}</th>
+                                    <th>{% trans "VCPU" %}
+                                    <th>{% trans "Cpu Usage" %}</th>
+                                    <th>{% trans "Memory" %}</th>
+                                    <th>{% trans "Mem Usage" %}</th>
+                                </tr>
+                            </thead>
+                            <tbody>
                                 {% for compute in computes %}
-                                    <option {% if compute.status is not True %} class="font-italic text-muted" {% else %} value="{{ compute.id }}" {% endif %}>{{ compute.name }}</option>
-                                {% empty %}
-                                    <option value="None">{% trans "None" %}</option>
+                                    {% if compute.status is True %}
+                                        <tr style="cursor:pointer" onclick="goto_compute('{{ compute.id }}')">
+                                            <td>{{ compute.name }}</td>
+                                            <td>{{ compute.cpu_count }}</td>
+                                            <td>
+                                                <div class="progress">
+                                                    <div class="progress-bar bg-success" role="progressbar" style="width: {{ compute.cpu_usage }}%"
+                                                        aria-valuenow="{{ compute.cpu_usage }}" aria-valuemin="0" aria-valuemax="100">{{ compute.cpu_usage }}%
+                                                    </div>
+                                                </div>
+                                            </td>
+                                            <td>{{ compute.ram_size|filesizeformat }}</td>
+                                            <td>
+                                                <div class="progress">
+                                                    <div class="progress-bar bg-success" role="progressbar" style="width: {{ compute.ram_usage }}%"
+                                                        aria-valuenow="{{ compute.ram_usage }}" aria-valuemin="0" aria-valuemax="100">{{ compute.ram_usage }}%
+                                                    </div>
+                                                </div>
+                                            </td>
+                                        </tr>
+                                    {% endif %}
                                 {% endfor %}
-                            </select>
-                        </div>
+                            </tbody>
+                        </table>
                     </div>
-                </form>
-            </div>
-            <div class="modal-footer">
-                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
-                    {% trans "Close" %}
-                </button>
-                {% if computes %}
-                    <button type="submit" class="btn btn-primary" name="choose" onclick='goto_compute()'>
-                        {% trans "Choose" %}
-                    </button>
-                {% else %}
-                    <button class="btn btn-primary disabled">
-                        {% trans "Choose" %}
-                    </button>
-                {% endif %}
+                </form> 
             </div>
         </div> <!-- /.modal-content -->
     </div> <!-- /.modal-dialog -->