mirror of
https://github.com/ComputerScienceHouse/proxstar.git
synced 2025-03-09 15:40:09 +00:00
add proper confirmations, add resource usage indicators, add authorization check, change routes to be more consistent
This commit is contained in:
Jordan Rodgers
parent
16974eec39
commit
a2278f59db
10 changed files with 1451 additions and 89 deletions
|
|
@ -7,9 +7,8 @@
|
|||
<meta name="theme-color" content="#B0197E">
|
||||
<link rel="stylesheet" href="/proxstar/static/css/csh-material-bootstrap/dist/css/csh-material-bootstrap.css">
|
||||
<link rel="stylesheet" href="/proxstar/static/css/styles.css">
|
||||
<link rel="stylesheet" href="/proxstar/static/css/circle.css">
|
||||
<link rel="manifest" href="/static/manifest.json">
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
|
||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
{% block nav %}
|
||||
|
|
@ -34,7 +33,7 @@
|
|||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/proxstar/create">
|
||||
<a href="/proxstar/vm/create">
|
||||
<span class="glyphicon glyphicon-plus-sign"></span>
|
||||
Create VM
|
||||
</a>
|
||||
|
|
@ -90,6 +89,10 @@
|
|||
<a class="footer-version" href="https://github.com/com6056/proxstar/tree/{{config["GIT_REVISION"]}}">Proxstar ({{config["GIT_REVISION"]}})</a>
|
||||
</div>
|
||||
</footer>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
|
||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
|
||||
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
|
||||
<script src="/proxstar/static/js/script.js"></script>
|
||||
</body>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,10 +0,0 @@
|
|||
{% extends "base.html" %}
|
||||
{% block body %}
|
||||
|
||||
Are you sure you want to delete "{{ vmname }}"?
|
||||
|
||||
<form action="/proxstar/confirm_delete" method="post">
|
||||
<button type="submit" name="delete" value="{{ vmid }}">CONFIRM</button>
|
||||
</form>
|
||||
|
||||
{% endblock %}
|
||||
|
|
@ -11,11 +11,9 @@
|
|||
<div class="panel-body">
|
||||
{% if full_limits %}
|
||||
<p>You have reached your limit for the following resources:</p>
|
||||
<ul>
|
||||
{% for limit in full_limits %}
|
||||
<li>{{ limit }}</li>
|
||||
<p><strong>{{ limit }}</strong></p>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<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">
|
||||
|
|
@ -55,9 +53,56 @@
|
|||
<h3 class="panel-title">Current Usage</h3>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<p>CPU: {{ usage['cpu'] }}/{{ limits['cpu'] }} Cores</p>
|
||||
<p>Memory: {{ usage['mem'] }}/{{ limits['mem'] }} GB</p>
|
||||
<p>Disk: {{ usage['disk'] }}/{{ limits['disk'] }} GB</p>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -3,18 +3,28 @@
|
|||
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
{% for vm in vms %}
|
||||
<div class="col-md-3 col-sm-4 col-xs-6">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-body">
|
||||
<a href="/proxstar/vm/{{ vm['vmid'] }}">
|
||||
<p>{{ vm['name'] }}</p>
|
||||
</a>
|
||||
<p>Status: {{ vm['status'] }}</p>
|
||||
</div>
|
||||
{% if not vms %}
|
||||
<div class="col-md-12 col-sm-12">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-body">
|
||||
<p>It looks like you don't have any VMs! If you want to create a VM, click <a href="/proxstar/vm/create">here</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
{% for vm in vms %}
|
||||
<div class="col-md-3 col-sm-4 col-xs-6">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-body">
|
||||
<a href="/proxstar/vm/{{ vm['vmid'] }}">
|
||||
<p>{{ vm['name'] }}</p>
|
||||
</a>
|
||||
<p>Status: {{ vm['status'] }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -10,34 +10,20 @@
|
|||
</div>
|
||||
<div class="panel-body">
|
||||
{% if vm['qmpstatus'] == 'stopped' %}
|
||||
<form action="/proxstar/vm_status/{{ vm['vmid'] }}" method="post">
|
||||
<button class="btn btn-success proxstar-actionbtn" type="submit" name="action" value="start">START</button>
|
||||
</form>
|
||||
<button class="btn btn-success proxstar-actionbtn" id="start-vm" name="start" data-vmid="{{ vm['vmid'] }}" data-vmname="{{ vm['name'] }}">START</button>
|
||||
<button class="btn btn-danger proxstar-actionbtn" id="delete-vm" name="delete" data-vmid="{{ vm['vmid'] }}" data-vmname="{{ vm['name'] }}">DELETE</button>
|
||||
{% endif %}
|
||||
{% if vm['qmpstatus'] == 'paused' %}
|
||||
<form action="/proxstar/vm_status/{{ vm['vmid'] }}" method="post">
|
||||
<button class="btn btn-success proxstar-actionbtn" type="submit" name="action" value="resume">RESUME</button>
|
||||
</form>
|
||||
<button class="btn btn-success proxstar-actionbtn" id="resume-vm" name="resume" data-vmid="{{ vm['vmid'] }}" data-vmname="{{ vm['name'] }}">RESUME</button>
|
||||
{% endif %}
|
||||
{% if vm['qmpstatus'] == 'running' or vm['qmpstatus'] == 'paused' %}
|
||||
<form action="/proxstar/vm_status/{{ vm['vmid'] }}" method="post">
|
||||
<button class="btn btn-info proxstar-actionbtn" type="submit" name="action" value="shutdown">SHUTDOWN</button>
|
||||
</form>
|
||||
<button class="btn btn-info proxstar-actionbtn" id="shutdown-vm" name="shutdown" data-vmid="{{ vm['vmid'] }}" data-vmname="{{ vm['name'] }}">SHUTDOWN</button>
|
||||
{% if vm['qmpstatus'] == 'running' %}
|
||||
<form action="/proxstar/vm_status/{{ vm['vmid'] }}" method="post">
|
||||
<button class="btn btn-info proxstar-actionbtn" type="submit" name="action" value="suspend">SUSPEND</button>
|
||||
</form>
|
||||
<button class="btn btn-info proxstar-actionbtn" id="suspend-vm" name="suspend" data-vmid="{{ vm['vmid'] }}" data-vmname="{{ vm['name'] }}">SUSPEND</button>
|
||||
{% endif %}
|
||||
<form action="/proxstar/vm_status/{{ vm['vmid'] }}" method="post">
|
||||
<button class="btn btn-warning proxstar-actionbtn" type="submit" name="action" value="stop">STOP</button>
|
||||
</form>
|
||||
<form action="/proxstar/vm_status/{{ vm['vmid'] }}" method="post">
|
||||
<button class="btn btn-warning proxstar-actionbtn" type="submit" name="action" value="reset">RESET</button>
|
||||
</form>
|
||||
<button class="btn btn-warning proxstar-actionbtn" id="stop-vm" name="stop" data-vmid="{{ vm['vmid'] }}" data-vmname="{{ vm['name'] }}">STOP</button>
|
||||
<button class="btn btn-warning proxstar-actionbtn" id="reset-vm" name="reset" data-vmid="{{ vm['vmid'] }}" data-vmname="{{ vm['name'] }}">RESET</button>
|
||||
{% endif %}
|
||||
<form action="/proxstar/delete" method="post">
|
||||
<button class="btn btn-danger proxstar-actionbtn" type="submit" name="delete" value="{{ vm['vmid'] }}">DELETE</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue