mirror of
https://github.com/ComputerScienceHouse/proxstar.git
synced 2025-02-14 22:11:51 +00:00
115 lines
5.5 KiB
HTML
115 lines
5.5 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 limits['disk'] - usage['disk'] <= 0 %}
|
|
<p>Before you can create any more VMs, you must first delete existing VMs until you have enough disk resources available.</p>
|
|
{% else %}
|
|
<div class="form-group">
|
|
<label for="name">VM Name</label>
|
|
<input type="text" name="name" id="name" class="form-control">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="cores">Cores</label>
|
|
<select name="cores" id="cores" class="form-control">
|
|
{% for i in range(1, limits['cpu'] + 1) %}
|
|
<option value="{{ i }}">{{ i }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="mem">Memory</label>
|
|
<select name="mem" id="mem" class="form-control">
|
|
{% for i in range(1, limits['mem'] + 1) %}
|
|
<option value="{{ i * 1024 }}">{{ i }}GB</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="disk">Disk (GB)</label>
|
|
<input type="number" name="disk" id="disk" class="form-control" min="1" max="{{ limits['disk'] - usage['disk'] }}">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="iso">ISO</label>
|
|
<select name="iso" id="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" id="create-vm" name="create" data-max_disk="{{ limits['disk'] - usage['disk'] }}">CREATE</button>
|
|
{% 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 %}
|