vastly improved ui, added redirects after operations complete, and added novnc repo

.gitmodules

@@ -1,3 +1,6 @@
 [submodule "static/css/csh-material-bootstrap"]
 	path = static/css/csh-material-bootstrap
 	url = https://github.com/ComputerScienceHouse/csh-material-bootstrap/
+[submodule "static/noVNC"]
+	path = static/noVNC
+	url = https://github.com/novnc/noVNC

app.py

@@ -5,7 +5,7 @@ import subprocess
 from starrs import *
 from proxmox import *
 from proxmoxer import ProxmoxAPI
-from flask import Flask, render_template, request
+from flask import Flask, render_template, request, redirect
 
 
 app = Flask(__name__)
@@ -28,13 +28,25 @@ starrs = connect_starrs(app.config['STARRS_DB_NAME'], app.config['STARRS_DB_USER
 
 
 @app.route("/")
-def get_vms():
+def list_vms():
     vms = get_vms_for_user(proxmox, user)
     for vm in vms:
-        vm['config'] = get_vm_config(proxmox, vm['vmid'])
-        vm['disk_size'] = get_vm_disk_size(proxmox, vm['vmid'], config=vm['config'])
-        print(vm)
-    return render_template('get_vms.html', username='com6056', vms=vms)
+        if 'name' not in vm:
+            vms.remove(vm)
+        else:
+            vm['config'] = get_vm_config(proxmox, vm['vmid'])
+            vm['disk_size'] = get_vm_disk_size(proxmox, vm['vmid'], config=vm['config'])
+    vms = sorted(vms, key=lambda k: k['name'])
+    return render_template('list_vms.html', username='com6056', vms=vms)
+
+
+@app.route("/vm/<string:vmid>")
+def vm_details(vmid):
+    vm = get_vm(proxmox, vmid)
+    vm['vmid'] = vmid
+    vm['config'] = get_vm_config(proxmox, vmid)
+    vm['disk_size'] = get_vm_disk_size(proxmox, vmid, config=vm['config'])
+    return render_template('vm_details.html', username='com6056', vm=vm)
 
 
 @app.route("/create")
@@ -48,16 +60,15 @@ def get_create():
     cores = request.form['cores']
     memory = request.form['memory']
     disk = request.form['disk']
-    print(name, cores, memory, disk)
     vmid, mac = create_vm(proxmox, starrs, user, name, cores, memory, disk)
     print(register_starrs(starrs, name, user, mac, get_next_ip(starrs, '49net Public Fixed')[0][0]))
-    print(vmid)
-    return vmid
+    return redirect("/proxstar/vm/{}".format(vmid))
 
 
 @app.route("/delete", methods=['POST'])
 def delete():
     vmid = request.form['delete']
+    print(vmid)
     vmname = get_vm_config(proxmox, vmid)['name']
     return render_template('confirm_delete.html', username='com6056', vmid=vmid, vmname=vmname)
 
@@ -68,7 +79,8 @@ def confirm_delete():
     vmname = get_vm_config(proxmox, vmid)['name']
     delete_vm(proxmox, starrs, vmid)
     print(delete_starrs(starrs, vmname))
-    return 'SUCCESS'
+    time.sleep(3)
+    return redirect("/proxstar")
 
 
 if __name__ == "__main__":

proxmox.py

@@ -31,6 +31,11 @@ def get_vm_node(proxmox, vmid):
             return vm['node']
 
 
+def get_vm(proxmox, vmid):
+    node = proxmox.nodes(get_vm_node(proxmox, vmid))
+    return node.qemu(vmid).status.current.get()
+
+
 def get_vm_config(proxmox, vmid):
     node = proxmox.nodes(get_vm_node(proxmox, vmid))
     return node.qemu(vmid).config.get()

static/css/styles.css

@@ -1,6 +1,46 @@
 body {
-    margin-top: 60px;
+    padding-top: 100px;
 }
+
+footer {
+    text-align: center;
+    margin: 20px 0;
+}
+
 table, th, td {
     border: 1px solid black;
 }
+
+.panel {
+    text-align: center;
+}
+
+.panel-body {
+    padding: 25px 15px 15px 15px;
+}
+
+.panel p {
+    line-height: 1.4;
+    margin: 5px 0 0 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.panel p a {
+    font-weight: 500;
+}
+
+.form-control {
+    width: 100%;
+}
+
+.dl-horizontal dt {
+    float: left;
+    width: 160px;
+    text-align: right;
+}
+
+.dl-horizontal dd {
+    margin-left: 180px;
+}

static/noVNC

@@ -0,0 +1 @@
+Subproject commit 7f3986815879421432ba6f4ea4b16c15925daccd

templates/base.html

@@ -35,7 +35,7 @@
                     </li>
                     <li>
                         <a href="/proxstar/create">
-                            <span class="glyphicon glyphicon-th-list"></span>
+                            <span class="glyphicon glyphicon-plus-sign"></span>
                             Create VM
                         </a>
                     </li>

templates/create.html

@@ -1,24 +1,55 @@
 {% extends "base.html" %}
 {% block body %}
 
-<form action="get_create" method="post">
-    <label for="name">VM Name</label>
-    <input type="text" name="name">
-    <label for="cores">Cores</label>
-    <select name="cores">
-        <option value="1">1</option>
-        <option value="2">2</option>
-        <option value="4">4</option>
-    </select>
-    <label for="memory">Memory</label>
-    <select name="memory">
-        <option value="1024">1GB</option>
-        <option value="2048">2GB</option>
-        <option value="4096">4GB</option>
-    </select>
-    <label for="disk">Disk</label>
-    <input type="text" name="disk">
-    <input type="submit">
-</form>
+<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">
+                    <form action="get_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">
+                                <option value="1">1</option>
+                                <option value="2">2</option>
+                                <option value="4">4</option>
+                            </select>
+                        </div>
+                        <div class="form-group">
+                            <label for="memory">Memory</label>
+                            <select name="memory" class="form-control">
+                                <option value="1024">1GB</option>
+                                <option value="2048">2GB</option>
+                                <option value="4096">4GB</option>
+                            </select>
+                        </div>
+                        <div class="form-group">
+                            <label for="disk">Disk</label>
+                            <input type="text" name="disk" class="form-control">
+                        </div>
+                        <input type="submit">
+                    </form>
+                </div>
+            </div>
+        </div>
+        <div class="col-md-3 col-sm-12">
+            <div class="panel panel-default">
+                <div class="panel-heading">
+                    <h3 class="panel-title">Help</h3>
+                </div>
+                <div class="panel-body">
+                    <p>Some help text.</p>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
 
 {% endblock %}

templates/get_vms.html

@@ -1,32 +0,0 @@
-{% extends "base.html" %}
-{% block body %}
-
-<table>
-   <tr>
-        <th> Name </th>
-	<th> Status </th>
-	<th> Cores </th>
-	<th> Memory </th>
-	<th> Disk Size </th>
-	<th> Delete </th>
-   </tr>
-{% for vm in vms %}
-   <tr>
-        <td> {{ vm['name'] }} </td>
-        <td> {{ vm['status'] }} </td>
-	<td> {{ vm['config']['cores'] * vm['config'].get(sockets, 1) }} </td>
-	<td> {{ vm['config']['memory'] }} MB </td>
-	<td> {{ vm['disk_size'] }} </td>
-	<td>
-	    <form action="/proxstar/delete" method="post">
-		    <button type="submit" name="delete" value="{{ vm['vmid'] }}">DELETE</button>
-	    </form>
-	</td>
-   </tr>
-{% endfor %}
-</table>
-
-<br>
-
-{{ vms }}
-{% endblock %}

templates/list_vms.html

@@ -0,0 +1,21 @@
+{% extends "base.html" %}
+{% block body %}
+
+<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>
+                </div>
+            </div>
+        {% endfor %}
+    </div>
+</div>
+
+{% endblock %}

templates/vm_details.html

@@ -0,0 +1,56 @@
+{% extends "base.html" %}
+{% block body %}
+
+<div class="container">
+    <div class="row">
+        <div class="col-md-3 col-md-push-9 col-sm-12">
+            <div class="panel panel-default">
+                <div class="panel-heading">
+                    <h3 class="panel-title">Actions</h3>
+                </div>
+                <div class="panel-body">
+                    <form action="/proxstar/delete" method="post">
+                        <button type="submit" name="delete" value="{{ vm['vmid'] }}">DELETE</button>
+                    </form>
+                </div>
+            </div>
+        </div>
+        <div class="col-md-3 col-md-pull-3 col-sm-12">
+            <div class="panel panel-default">
+                <div class="panel-heading">
+                    <h3 class="panel-title">Resources</h3>
+                </div>
+                <div class="panel-body">
+                    <ul class="nav nav-list">
+                        <li class="nav-header">Interfaces</li>
+                        <li class="nav-header">Disks</li>
+                        <li>Disk Size: {{ vm['disk_size'] }}</li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+        <div class="col-md-6 col-md-pull-3 col-sm-12">
+            <div class="panel panel-default">
+                <div class="panel-heading">
+                    <h3 class="panel-title">VM Details</h3>
+                </div>
+                <div class="panel-body">
+                    <dl class="dl-horizontal">
+                        <dt>Name</dt>
+                        <dd>{{ vm['name'] }}</dd>
+                        <dt>ID</dt>
+                        <dd>{{ vm['vmid'] }}</dd>
+                        <dt>Status</dt>
+                        <dd>{{ vm['status'] }}</dd>
+                        <dt>Cores</dt>
+                        <dd>{{ vm['config']['cores'] * vm['config'].get(sockets, 1) }}</dd>
+                        <dt>Memory</dt>
+                        <dd>{{ vm['config']['memory'] }} MB</dd>
+                    </dl>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+{% endblock %}