1
0
Fork 0
mirror of https://github.com/retspen/webvirtcloud synced 2024-12-24 23:25:24 +00:00

modified 'create new instance' screen with compute details

This commit is contained in:
cserma 2023-05-10 13:59:13 +03:00
parent 96ea999926
commit 3cd4212cdd
3 changed files with 42 additions and 27 deletions

View file

@ -48,6 +48,10 @@ class Compute(Model):
@cached_property @cached_property
def cpu_count(self): def cpu_count(self):
return self.proxy.get_node_info()[3] return self.proxy.get_node_info()[3]
@cached_property
def cpu_usage(self):
return round(self.proxy.get_cpu_usage().get('usage'))
@cached_property @cached_property
def ram_size(self): def ram_size(self):

View file

@ -39,8 +39,8 @@
<script src="{% static 'js/filter-table.js' %}"></script> <script src="{% static 'js/filter-table.js' %}"></script>
{% if request.user.is_superuser %} {% if request.user.is_superuser %}
<script> <script>
function goto_compute() { function goto_compute(compute) {
let compute = $("#compute_select").val(); //let compute = $("#compute_select").val();
window.location.href = "{% url 'instances:create_instance_select_type' 1 %}".replace(1, compute); window.location.href = "{% url 'instances:create_instance_select_type' 1 %}".replace(1, compute);
} }
</script> </script>

View file

@ -5,7 +5,7 @@
<!-- Modal pool --> <!-- Modal pool -->
<div class="modal fade" id="AddInstance" tabindex="-1" role="dialog" aria-labelledby="AddInstanceModal" aria-hidden="true"> <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-content">
<div class="modal-header"> <div class="modal-header">
<h5 class="modal-title">{% trans "Choose a compute for new instance" %}</h5> <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"> <form method="post" aria-label="Select compute for instance create form">
{% csrf_token %} {% csrf_token %}
<div class="row"> <div class="row">
<label class="col-sm-4 col-form-label">{% trans "Compute" %}</label> <table class="table table-hover">
<div class="col-sm-6"> <thead>
<select class="form-select" id="compute_select"> <tr style="cursor:default;pointer-events:none">
<option>{% trans "Please select" %}</option> <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 %} {% for compute in computes %}
<option {% if compute.status is not True %} class="font-italic text-muted" {% else %} value="{{ compute.id }}" {% endif %}>{{ compute.name }}</option> {% if compute.status is True %}
{% empty %} <tr style="cursor:pointer" onclick="goto_compute('{{ compute.id }}')">
<option value="None">{% trans "None" %}</option> <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 %} {% endfor %}
</select> </tbody>
</div> </table>
</div> </div>
</form> </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 %}
</div> </div>
</div> <!-- /.modal-content --> </div> <!-- /.modal-content -->
</div> <!-- /.modal-dialog --> </div> <!-- /.modal-dialog -->