mirror of
https://github.com/ComputerScienceHouse/proxstar.git
synced 2025-02-14 22:11:51 +00:00
121 lines
5.8 KiB
HTML
121 lines
5.8 KiB
HTML
{% extends "base.html" %}
|
|
{% block body %}
|
|
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-9 col-sm-12">
|
|
<div class="panel panel-default">
|
|
<div class="panel-heading">
|
|
<h3 class="panel-title">Create VM</h3>
|
|
</div>
|
|
<div class="panel-body">
|
|
{% if full_limits %}
|
|
<p>You have reached your limit for the following resources:</p>
|
|
{% for limit in full_limits %}
|
|
<p><strong>{{ limit }}</strong></p>
|
|
{% endfor %}
|
|
<p>Before you can create any more VMs, you must first either power off (CPU/Memory) or delete (Disk) existing VMs until you have enough resources available.</p>
|
|
{% else %}
|
|
<form action="create" method="post">
|
|
<div class="form-group">
|
|
<label for="name">VM Name</label>
|
|
<input type="text" name="name" class="form-control">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="cores">Cores</label>
|
|
<select name="cores" class="form-control">
|
|
{% for i in range(1, 4 - usage['cpu'] + 1) %}
|
|
<option value="{{ i }}">{{ i }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="memory">Memory</label>
|
|
<select name="memory" class="form-control">
|
|
{% for i in range(1, 4 - usage['mem'] + 1) %}
|
|
<option value="{{ i * 1024 }}">{{ i }}GB</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="disk">Disk</label>
|
|
<input type="text" name="disk" class="form-control">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="iso">ISO</label>
|
|
<select name="iso" class="form-control">
|
|
<option value="none"></option>
|
|
{% for iso in isos %}
|
|
<option value="{{ iso }}">{{ iso }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
<button class="btn btn-success" type="submit" value="Create">Create</button>
|
|
</form>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3 col-sm-12">
|
|
<div class="panel panel-default">
|
|
<div class="panel-heading">
|
|
<h3 class="panel-title">Current Usage</h3>
|
|
</div>
|
|
<div class="panel-body">
|
|
<div class="resource-usage">
|
|
<div>
|
|
CPU Cores
|
|
{% if percents['cpu'] <= 50 %}
|
|
<div class="c100 p{{ percents['cpu'] }} green">
|
|
{% elif percents['cpu'] <= 75 %}
|
|
<div class="c100 p{{ percents['cpu'] }} blue">
|
|
{% else %}
|
|
<div class="c100 p{{ percents['cpu'] }} orange">
|
|
{% endif %}
|
|
<span>{{ usage['cpu'] }}/{{ limits['cpu'] }}</span>
|
|
<div class="slice">
|
|
<div class="bar"></div>
|
|
<div class="fill"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
Memory (GB)
|
|
{% if percents['mem'] <= 50 %}
|
|
<div class="c100 p{{ percents['mem'] }} green">
|
|
{% elif percents['mem'] <= 75 %}
|
|
<div class="c100 p{{ percents['mem'] }} blue">
|
|
{% else %}
|
|
<div class="c100 p{{ percents['mem'] }} orange">
|
|
{% endif %}
|
|
<span>{{ usage['mem'] }}/{{ limits['mem'] }}</span>
|
|
<div class="slice">
|
|
<div class="bar"></div>
|
|
<div class="fill"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
Disk (GB)
|
|
{% if percents['disk'] <= 50 %}
|
|
<div class="c100 p{{ percents['disk'] }} green">
|
|
{% elif percents['disk'] <= 75 %}
|
|
<div class="c100 p{{ percents['disk'] }} blue">
|
|
{% else %}
|
|
<div class="c100 p{{ percents['disk'] }} orange">
|
|
{% endif %}
|
|
<span>{{ usage['disk'] }}/{{ limits['disk'] }}</span>
|
|
<div class="slice">
|
|
<div class="bar"></div>
|
|
<div class="fill"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% endblock %}
|