mirror of
https://github.com/ComputerScienceHouse/proxstar.git
synced 2025-02-12 13:01:51 +00:00
upgrade to bootstrap 4
This commit is contained in:
Jordan Rodgers
parent
7b38f00a69
commit
7db17ab91d
9 changed files with 249 additions and 308 deletions
3
.gitmodules
vendored
3
.gitmodules
vendored
|
|
@ -1,6 +1,3 @@
|
|||
[submodule "proxstar/static/css/csh-material-bootstrap"]
|
||||
path = proxstar/static/css/csh-material-bootstrap
|
||||
url = https://github.com/ComputerScienceHouse/csh-material-bootstrap.git
|
||||
[submodule "proxstar/static/noVNC"]
|
||||
path = proxstar/static/noVNC
|
||||
url = https://github.com/novnc/noVNC.git
|
||||
|
|
|
|||
|
|
@ -1004,62 +1004,39 @@
|
|||
-o-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
/*.c100:hover {
|
||||
.c100:hover {
|
||||
cursor: default;
|
||||
}
|
||||
.c100:hover > span {
|
||||
width: 3.33em;
|
||||
/* width: 3.33em;
|
||||
line-height: 3.33em;
|
||||
font-size: 0.3em;
|
||||
font-size: 0.3em;*/
|
||||
color: #307bbb;
|
||||
}
|
||||
.c100:hover:after {
|
||||
/*.c100:hover:after {
|
||||
top: 0.04em;
|
||||
left: 0.04em;
|
||||
width: 0.92em;
|
||||
height: 0.92em;
|
||||
}*/
|
||||
.c100.dark {
|
||||
background-color: #777777;
|
||||
}
|
||||
.c100.dark .bar,
|
||||
.c100.dark .fill {
|
||||
border-color: #c6ff00 !important;
|
||||
}
|
||||
.c100.dark > span {
|
||||
color: #777777;
|
||||
}
|
||||
.c100.dark:after {
|
||||
background-color: #666666;
|
||||
}
|
||||
.c100.dark:hover > span {
|
||||
color: #c6ff00;
|
||||
}
|
||||
.c100.green .bar,
|
||||
.c100.green .fill {
|
||||
border-color: #4db53c !important;
|
||||
border-color: #4caf50 !important;
|
||||
}
|
||||
.c100.green:hover > span {
|
||||
color: #4db53c;
|
||||
}
|
||||
.c100.green.dark .bar,
|
||||
.c100.green.dark .fill {
|
||||
border-color: #5fd400 !important;
|
||||
}
|
||||
.c100.green.dark:hover > span {
|
||||
color: #5fd400;
|
||||
color: #4caf50;
|
||||
}
|
||||
.c100.orange .bar,
|
||||
.c100.orange .fill {
|
||||
border-color: #dd9d22 !important;
|
||||
border-color: #ff9800 !important;
|
||||
}
|
||||
.c100.orange:hover > span {
|
||||
color: #dd9d22;
|
||||
color: #ff9800;
|
||||
}
|
||||
.c100.orange.dark .bar,
|
||||
.c100.orange.dark .fill {
|
||||
border-color: #e08833 !important;
|
||||
.c100.red .bar,
|
||||
.c100.red .fill {
|
||||
border-color: #e51c23 !important;
|
||||
}
|
||||
.c100.orange.dark:hover > span {
|
||||
color: #e08833;
|
||||
.c100.red:hover > span {
|
||||
color: #e51c23;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1 +0,0 @@
|
|||
Subproject commit bfeaa127d622489c5f46bdbb0c931da33f89e25a
|
||||
|
|
@ -1,7 +1,3 @@
|
|||
body {
|
||||
padding-top: 100px;
|
||||
}
|
||||
|
||||
footer {
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
|
|
@ -11,6 +7,10 @@ table, th, td {
|
|||
border: 1px solid black;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.panel {
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -47,6 +47,7 @@ table, th, td {
|
|||
|
||||
.nav-list {
|
||||
text-align: left;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.nav-list .nav-header {
|
||||
|
|
@ -65,31 +66,14 @@ table, th, td {
|
|||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.proxstar-ejectbtn {
|
||||
.proxstar-vmbtn {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
text-align: center;
|
||||
padding: 0px 1px 0px 0px;
|
||||
padding: 1px 0px 0px 0px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.proxstar-changebtn {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
text-align: center;
|
||||
padding: 0px 0px 0px 1px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.proxstar-renewbtn {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
text-align: center;
|
||||
padding: 0px 0px 0px 0px;
|
||||
border-radius: 15px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.proxstar-poolbtn {
|
||||
padding: 0;
|
||||
width: 55px;
|
||||
|
|
|
|||
|
|
@ -6,102 +6,82 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
||||
<meta name="theme-color" content="#B0197E">
|
||||
<link rel="shortcut icon" href="https://assets.csh.rit.edu/uploads/favicon.ico" type="image/x-icon">
|
||||
<link rel="stylesheet" href="/static/css/csh-material-bootstrap/dist/css/csh-material-bootstrap.css">
|
||||
<link rel="stylesheet" href="https://s3.csh.rit.edu/csh-material-bootstrap/4.0.0/dist/csh-material-bootstrap.min.css" media="screen">
|
||||
<link rel="stylesheet" href="/static/css/styles.css">
|
||||
<link rel="stylesheet" href="/static/css/circle.css">
|
||||
<link rel="manifest" href="/static/manifest.json">
|
||||
</head>
|
||||
<body>
|
||||
{% block nav %}
|
||||
<nav class="navbar navbar-inverse navbar-fixed-top">
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-primary justify-content-center">
|
||||
<div class="container">
|
||||
<div class="navbar-header">
|
||||
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
|
||||
aria-expanded="false" aria-controls="navbar">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<a class="navbar-brand abs" href="/">Proxstar</a>
|
||||
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<a class="navbar-brand" href="/">Proxstar</a>
|
||||
</div>
|
||||
<div id="navbar" class="navbar-collapse collapse">
|
||||
<ul class="nav navbar-nav">
|
||||
<div class="collapse navbar-collapse" id="navbarResponsive">
|
||||
<ul class="navbar-nav mr-auto">
|
||||
{% if user.active %}
|
||||
<li>
|
||||
<a href="/">
|
||||
<span class="glyphicon glyphicon-th-list"></span>
|
||||
<li class="nav-item navbar-user dropdown">
|
||||
<a class="nav-link" href="/">
|
||||
<i class="fas fa-th-list"></i>
|
||||
VM List
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/vm/create">
|
||||
<span class="glyphicon glyphicon-plus-sign"></span>
|
||||
<li class="nav-item navbar-user dropdown">
|
||||
<a class="nav-link" href="/vm/create">
|
||||
<i class="fas fa-plus-circle"></i>
|
||||
Create VM
|
||||
</a>
|
||||
</li>
|
||||
{% if user.rtp %}
|
||||
<li>
|
||||
<a href="/rq">
|
||||
<span class="glyphicon glyphicon-eye-open"></span>
|
||||
<li class="nav-item navbar-user dropdown">
|
||||
<a class="nav-link" href="/rq">
|
||||
<i class="fas fa-tachometer-alt"></i>
|
||||
RQ Dashboard
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/settings">
|
||||
<span class="glyphicon glyphicon-cog"></span>
|
||||
<li class="nav-item navbar-user dropdown">
|
||||
<a class="nav-link" href="/settings">
|
||||
<i class="fas fa-cog"></i>
|
||||
Settings
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</ul>
|
||||
<ul class="nav navbar-nav navbar-right">
|
||||
<li class="dropdown navbar-user">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown"
|
||||
role="button" aria-expanded="false">
|
||||
<img src="https://profiles.csh.rit.edu/image/{{ user.name }}"
|
||||
title="{{ user.name }}">
|
||||
<ul class="nav navbar-nav ml-auto">
|
||||
<li class="nav-item navbar-user dropdown">
|
||||
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" id="user01">
|
||||
<img src="https://profiles.csh.rit.edu/image/{{ user.name }}">
|
||||
{{ user.name }}
|
||||
<span class="caret"></span>
|
||||
</a>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<li>
|
||||
<a href="https://profiles.csh.rit.edu/user/{{ user.name }}">
|
||||
<span class="glyphicon glyphicon-user"></span>
|
||||
Profile
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://members.csh.rit.edu/">
|
||||
<span class="glyphicon glyphicon-globe"></span>
|
||||
Members Portal
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/logout">
|
||||
Logout
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="dropdown-menu" aria-labelledby="user01">
|
||||
<a class="dropdown-item" href="/logout">Logout</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
{% endblock %}
|
||||
<body>
|
||||
<div class="content">
|
||||
{% block body %}
|
||||
{% endblock %}
|
||||
</div>
|
||||
<footer>
|
||||
<br>
|
||||
<div class="version">
|
||||
<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://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
|
||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
|
||||
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
|
||||
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/solid.js" integrity="sha384-+Ga2s7YBbhOD6nie0DzrZpJes+b2K1xkpKxTFFcx59QmVPaSA8c7pycsNaFwUK6l" crossorigin="anonymous"></script>
|
||||
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/fontawesome.js" integrity="sha384-7ox8Q2yzO/uWircfojVuCQOZl+ZZBg2D2J5nkpLqzH1HY0C1dHlTKIbpRz/LG23c" crossorigin="anonymous"></script>
|
||||
<script src="/static/js/script.js"></script>
|
||||
</body>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -6,13 +6,13 @@
|
|||
{% if user['rtp'] %}
|
||||
<div class="col-md-12 col-sm-12">
|
||||
{% else %}
|
||||
<div class="col-md-9 col-sm-12">
|
||||
<div class="col-lg-9 col-md-8 col-sm-12">
|
||||
{% endif %}
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<h3 class="panel-title">Create VM</h3>
|
||||
<div class="card bg-light mb-3">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Create VM</h3>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<div class="card-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 %}
|
||||
|
|
@ -71,27 +71,29 @@
|
|||
</select>
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="text-center">
|
||||
<button class="btn btn-success" id="create-vm" name="create" data-max_cpu="{{ limits['cpu'] - usage['cpu'] }}" data-max_mem="{{ limits['mem'] - usage['mem'] }}" data-max_disk="{{ limits['disk'] - usage['disk'] }}">CREATE</button>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% if not user['rtp'] %}
|
||||
<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 class="col-lg-3 col-md-4 col-sm-12">
|
||||
<div class="card bg-light mb-3">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Current Usage</h3>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<div class="card-body">
|
||||
<div class="resource-usage">
|
||||
<div class="col-md-12 col-sm-4">
|
||||
CPU Cores
|
||||
{% if percents['cpu'] <= 50 %}
|
||||
<div class="col-md-12 text-center">
|
||||
<p>CPU Cores</p>
|
||||
{% if percents['cpu'] <= 60 %}
|
||||
<div class="c100 p{{ percents['cpu'] }} green">
|
||||
{% elif percents['cpu'] <= 75 %}
|
||||
<div class="c100 p{{ percents['cpu'] }} blue">
|
||||
{% else %}
|
||||
{% elif percents['cpu'] <= 80 %}
|
||||
<div class="c100 p{{ percents['cpu'] }} orange">
|
||||
{% else %}
|
||||
<div class="c100 p{{ percents['cpu'] }} red">
|
||||
{% endif %}
|
||||
<span>{{ usage['cpu'] }}/{{ limits['cpu'] }}</span>
|
||||
<div class="slice">
|
||||
|
|
@ -100,14 +102,14 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-12 col-sm-4">
|
||||
Memory (GB)
|
||||
{% if percents['mem'] <= 50 %}
|
||||
<div class="col-md-12 text-center">
|
||||
<p>Memory (GB)</p>
|
||||
{% if percents['mem'] <= 60 %}
|
||||
<div class="c100 p{{ percents['mem'] }} green">
|
||||
{% elif percents['mem'] <= 75 %}
|
||||
<div class="c100 p{{ percents['mem'] }} blue">
|
||||
{% else %}
|
||||
{% elif percents['mem'] <= 80 %}
|
||||
<div class="c100 p{{ percents['mem'] }} orange">
|
||||
{% else %}
|
||||
<div class="c100 p{{ percents['mem'] }} red">
|
||||
{% endif %}
|
||||
<span>{{ usage['mem'] }}/{{ limits['mem'] }}</span>
|
||||
<div class="slice">
|
||||
|
|
@ -116,14 +118,14 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-12 col-sm-4">
|
||||
Disk (GB)
|
||||
{% if percents['disk'] <= 50 %}
|
||||
<div class="col-md-12 text-center">
|
||||
<p>Disk (GB)</p>
|
||||
{% if percents['disk'] <= 60 %}
|
||||
<div class="c100 p{{ percents['disk'] }} green">
|
||||
{% elif percents['disk'] <= 75 %}
|
||||
<div class="c100 p{{ percents['disk'] }} blue">
|
||||
{% else %}
|
||||
{% elif percents['disk'] <= 80 %}
|
||||
<div class="c100 p{{ percents['disk'] }} orange">
|
||||
{% else %}
|
||||
<div class="c100 p{{ percents['disk'] }} red">
|
||||
{% endif %}
|
||||
<span>{{ usage['disk'] }}/{{ limits['disk'] }}</span>
|
||||
<div class="slice">
|
||||
|
|
|
|||
|
|
@ -5,9 +5,9 @@
|
|||
<div class="row">
|
||||
{% if user['rtp'] and rtp_view != True %}
|
||||
<div class="col-md-12 col-sm-12">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<p>{{ rtp_view }}</p>
|
||||
<div class="card bg-light mb-3">
|
||||
<div class="card-header text-center">
|
||||
<h5 class="card-title">{{ rtp_view }}</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -15,24 +15,24 @@
|
|||
{% if not vms %}
|
||||
<div class="col-md-12 col-sm-12">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-body">
|
||||
<div class="panel-body text-center">
|
||||
<p>It looks like you don't have any VMs! If you want to create a VM, click <a href="/vm/create">here</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% elif vms == 'INACTIVE' %}
|
||||
<div class="col-md-12 col-sm-12">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-body">
|
||||
<div class="card bg-light mb-3">
|
||||
<div class="card-body text-center">
|
||||
<p>Only active members have access to create Proxmox VMs. If you believe this is an error, please contact an RTP.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% elif rtp_view != True %}
|
||||
{% for vm in vms %}
|
||||
<div class="col-md-3 col-sm-4 col-xs-6">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-body">
|
||||
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
|
||||
<div class="card bg-light mb-3">
|
||||
<div class="card-body text-center">
|
||||
{% if not vm.get('pending', False) %}
|
||||
<a href="/vm/{{ vm['vmid'] }}">
|
||||
<p>{{ vm['name'] }}</p>
|
||||
|
|
@ -47,54 +47,55 @@
|
|||
{% endfor %}
|
||||
{% else %}
|
||||
{% for pool in vms %}
|
||||
<div class="col-md-3 col-sm-4 col-xs-12">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<img class="user-img pull-left" src="https://profiles.csh.rit.edu/image/{{ pool['user'] }}" title="{{ pool['user'] }}">
|
||||
<h3 class="panel-title user-title">
|
||||
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
|
||||
<div class="card bg-light mb-3">
|
||||
<div class="card-header text-center">
|
||||
<img class="user-img float-left" src="https://profiles.csh.rit.edu/image/{{ pool['user'] }}" title="{{ pool['user'] }}">
|
||||
<h5 class="card-title user-title">
|
||||
<a href="/user/{{ pool['user'] }}">
|
||||
{{ pool['user'] }}
|
||||
</a>
|
||||
</h3>
|
||||
<span class="pull-right">{{ pool['num_vms'] }}</span>
|
||||
</h5>
|
||||
<span class="float-right">{{ pool['num_vms'] }}</span>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<div class="card-body">
|
||||
<div class="resource-bar">
|
||||
<span class="pull-left">CPU</span>
|
||||
<span class="float-left">CPU</span>
|
||||
<div class="progress" data-toggle="tooltip" title="{{ pool['usage']['cpu'] }}/{{ pool['limits']['cpu'] }}">
|
||||
{% if pool['percents']['cpu'] <= 50 %}
|
||||
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="{{ pool['percents']['cpu'] }}" aria-valuemin="0" aria-valuemax="100" style="width:{{ pool['percents']['cpu'] }}%"></div>
|
||||
{% elif pool['percents']['cpu'] <= 75 %}
|
||||
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="{{ pool['percents']['cpu'] }}" aria-valuemin="0" aria-valuemax="100" style="width:{{ pool['percents']['cpu'] }}%"></div>
|
||||
{% if pool['percents']['cpu'] <= 60 %}
|
||||
<div class="progress-bar bg-success" role="progressbar" aria-valuenow="{{ pool['percents']['cpu'] }}" aria-valuemin="0" aria-valuemax="100" style="width:{{ pool['percents']['cpu'] }}%"></div>
|
||||
{% elif pool['percents']['cpu'] <= 80 %}
|
||||
<div class="progress-bar bg-warning" role="progressbar" aria-valuenow="{{ pool['percents']['cpu'] }}" aria-valuemin="0" aria-valuemax="100" style="width:{{ pool['percents']['cpu'] }}%"></div>
|
||||
{% else %}
|
||||
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="{{ pool['percents']['cpu'] }}" aria-valuemin="0" aria-valuemax="100" style="width:{{ pool['percents']['cpu'] }}%"></div>
|
||||
<div class="progress-bar bg-danger" role="progressbar" aria-valuenow="{{ pool['percents']['cpu'] }}" aria-valuemin="0" aria-valuemax="100" style="width:{{ pool['percents']['cpu'] }}%"></div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="resource-bar">
|
||||
<span class="pull-left">MEM</span>
|
||||
<span class="float-left">MEM</span>
|
||||
<div class="progress" data-toggle="tooltip" title="{{ pool['usage']['mem'] }}GB/{{ pool['limits']['mem'] }}.0GB">
|
||||
{% if pool['percents']['mem'] <= 50 %}
|
||||
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="{{ pool['percents']['mem'] }}" aria-valuemin="0" aria-valuemax="100" style="width:{{ pool['percents']['mem'] }}%"></div>
|
||||
{% elif pool['percents']['mem'] <= 75 %}
|
||||
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="{{ pool['percents']['mem'] }}" aria-valuemin="0" aria-valuemax="100" style="width:{{ pool['percents']['mem'] }}%"></div>
|
||||
{% if pool['percents']['mem'] <= 60 %}
|
||||
<div class="progress-bar bg-success" role="progressbar" aria-valuenow="{{ pool['percents']['mem'] }}" aria-valuemin="0" aria-valuemax="100" style="width:{{ pool['percents']['mem'] }}%"></div>
|
||||
{% elif pool['percents']['mem'] <= 80 %}
|
||||
<div class="progress-bar bg-warning" role="progressbar" aria-valuenow="{{ pool['percents']['mem'] }}" aria-valuemin="0" aria-valuemax="100" style="width:{{ pool['percents']['mem'] }}%"></div>
|
||||
{% else %}
|
||||
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="{{ pool['percents']['mem'] }}" aria-valuemin="0" aria-valuemax="100" style="width:{{ pool['percents']['mem'] }}%"></div>
|
||||
<div class="progress-bar bg-danger" role="progressbar" aria-valuenow="{{ pool['percents']['mem'] }}" aria-valuemin="0" aria-valuemax="100" style="width:{{ pool['percents']['mem'] }}%"></div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="resource-bar">
|
||||
<span class="pull-left">DISK</span>
|
||||
<span class="float-left">DISK</span>
|
||||
<div class="progress" data-toggle="tooltip" title="{{ pool['usage']['disk'] }}GB/{{ pool['limits']['disk'] }}GB">
|
||||
{% if pool['percents']['disk'] <= 50 %}
|
||||
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="{{ pool['percents']['disk'] }}" aria-valuemin="0" aria-valuemax="100" style="width:{{ pool['percents']['disk'] }}%"></div>
|
||||
{% elif pool['percents']['disk'] <= 75 %}
|
||||
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="{{ pool['percents']['disk'] }}" aria-valuemin="0" aria-valuemax="100" style="width:{{ pool['percents']['disk'] }}%"></div>
|
||||
{% if pool['percents']['disk'] <= 60 %}
|
||||
<div class="progress-bar bg-success" role="progressbar" aria-valuenow="{{ pool['percents']['disk'] }}" aria-valuemin="0" aria-valuemax="100" style="width:{{ pool['percents']['disk'] }}%"></div>
|
||||
{% elif pool['percents']['disk'] <= 80 %}
|
||||
<div class="progress-bar bg-warning" role="progressbar" aria-valuenow="{{ pool['percents']['disk'] }}" aria-valuemin="0" aria-valuemax="100" style="width:{{ pool['percents']['disk'] }}%"></div>
|
||||
{% else %}
|
||||
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="{{ pool['percents']['disk'] }}" aria-valuemin="0" aria-valuemax="100" style="width:{{ pool['percents']['disk'] }}%"></div>
|
||||
<div class="progress-bar bg-danger" role="progressbar" aria-valuenow="{{ pool['percents']['disk'] }}" aria-valuemin="0" aria-valuemax="100" style="width:{{ pool['percents']['disk'] }}%"></div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<button class="btn btn-info proxstar-poolbtn edit-limit" data-user="{{ pool['user'] }}" data-cpu="{{ pool['limits']['cpu'] }}" data-mem="{{ pool['limits']['mem'] }}" data-disk="{{ pool['limits']['disk'] }}">EDIT</button>
|
||||
{% if not pool['vms'] %}
|
||||
<button class="btn btn-danger proxstar-poolbtn delete-user" data-user="{{ pool['user'] }}">DELETE</button>
|
||||
|
|
@ -102,6 +103,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -28,10 +28,10 @@
|
|||
<td>{{ template['disk'] }}</td>
|
||||
<td>
|
||||
<button class="btn btn-sm btn-info edit-template" data-template_id="{{ template['id'] }}" data-template_name="{{ template['name'] }}" data-template_username="{{ template['username'] }}" data-template_disk="{{ template['disk'] }}">
|
||||
<span class="glyphicon glyphicon-pencil"></span>
|
||||
<i class="fas fa-edit"></i>
|
||||
</button>
|
||||
<button class="btn btn-sm btn-danger delete-template" data-template_id="{{ template['id'] }}">
|
||||
<span class="glyphicon glyphicon-remove"></span>
|
||||
<i class="fas fa-trash-alt"></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
|
|
@ -60,20 +60,20 @@
|
|||
<td class="col-md-9">{{ pool }}</td>
|
||||
<td class="col-md-3">
|
||||
<button class="btn btn-sm btn-danger delete-ignored-pool" data-pool="{{ pool }}">
|
||||
<span class="glyphicon glyphicon-remove"></span>
|
||||
<i class="fas fa-trash-alt"></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="col-md-9 col-xs-9">
|
||||
<input type="text" id="pool" class="form-control">
|
||||
</div>
|
||||
<div class="col-md-3 col-xs-3">
|
||||
<button class="btn btn-sm btn-success add-ignored-pool">
|
||||
<span class="glyphicon glyphicon-plus"></span>
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control" id="pool">
|
||||
<span class="input-group-btn">
|
||||
<button class="btn btn-sm btn-success add-ignored-pool" type="button">
|
||||
<i class="fas fa-plus"></i>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -97,20 +97,20 @@
|
|||
<td class="col-md-9">{{ username }}</td>
|
||||
<td class="col-md-3">
|
||||
<button class="btn btn-sm btn-danger delete-allowed-user" data-user="{{ username }}">
|
||||
<span class="glyphicon glyphicon-remove"></span>
|
||||
<i class="fas fa-trash-alt"></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="col-md-9 col-xs-9">
|
||||
<input type="text" id="user" class="form-control">
|
||||
</div>
|
||||
<div class="col-md-3 col-xs-3">
|
||||
<button class="btn btn-sm btn-success add-allowed-user">
|
||||
<span class="glyphicon glyphicon-plus"></span>
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control" id="user">
|
||||
<span class="input-group-btn">
|
||||
<button class="btn btn-sm btn-success add-allowed-user" type="button">
|
||||
<i class="fas fa-plus"></i>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,12 +3,113 @@
|
|||
|
||||
<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 class="col-md-3 col-md-pull-3 col-sm-12">
|
||||
<div class="card bg-light mb-3">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Resources</h3>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<div class="card-body">
|
||||
<ul class="nav nav-list">
|
||||
<li class="nav-header">Boot Order</li>
|
||||
<li>
|
||||
{{ vm.boot_order|join(', ') }}
|
||||
<button class="btn btn-default proxstar-vmbtn" id="edit-boot-order" data-vmid="{{ vm.id }}" data-vmname="{{ vm.name }}" data-boot_order="{{ vm.boot_order_json }}">
|
||||
<i class="fas fa-cog"></i>
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-header">Interfaces</li>
|
||||
{% for interface in vm.interfaces %}
|
||||
<li>{{ interface[0] }}: {{ interface[2] }}</li>
|
||||
{% endfor %}
|
||||
<li class="nav-header">Disks</li>
|
||||
{% for disk in vm.disks %}
|
||||
<li>
|
||||
{{ disk[0] }}: {{ disk[1] }}GB
|
||||
<button class="btn btn-default proxstar-vmbtn resize-disk" id="resize-disk" name="resize" data-vmid="{{ vm.id }}" data-disk="{{ disk[0] }}" data-usage="{{ usage['disk'] }}" data-limit="{{ limits['disk'] }}">
|
||||
<i class="fas fa-cog"></i>
|
||||
</button>
|
||||
</li>
|
||||
{% endfor %}
|
||||
<li class="nav-header">ISO</li>
|
||||
<li>
|
||||
{{ vm.iso }}
|
||||
{% if vm.iso != 'None' %}
|
||||
<button class="btn btn-danger proxstar-vmbtn" id="eject-iso" name="eject" data-vmid="{{ vm.id }}" data-iso="{{ vm.iso }}">
|
||||
<i class="fas fa-eject"></i>
|
||||
</button>
|
||||
{% endif %}
|
||||
<button class="btn btn-default proxstar-vmbtn" id="change-iso" name="change" data-vmid="{{ vm.id }}" data-iso="{{ vm.iso }}">
|
||||
<i class="fas fa-cog"></i>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-md-pull-3 col-sm-12">
|
||||
<div class="card bg-light mb-3">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">VM Details</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<dl class="dl-horizontal">
|
||||
<dt>Name</dt>
|
||||
<dd>{{ vm.name }}</dd>
|
||||
<dt>DNS Name</dt>
|
||||
<dd>{{ vm.name }}.csh.rit.edu</dd>
|
||||
<dt>ID</dt>
|
||||
<dd>{{ vm.id }}</dd>
|
||||
<dt>Status</dt>
|
||||
<dd>{{ vm.qmpstatus }}</dd>
|
||||
<dt>Node</dt>
|
||||
<dd>{{ vm.node }}</dd>
|
||||
<dt>Cores</dt>
|
||||
<dd>
|
||||
{{ vm.cpu }}
|
||||
{% if vm.qmpstatus == 'running' or vm.qmpstatus == 'suspended' or vm.qmpstatus == 'paused' %}
|
||||
<button class="btn btn-default proxstar-vmbtn" id="change-cores" data-vmid="{{ vm.id }}" data-usage="{{ usage['cpu'] - vm.cpu }}" data-limit="{{ limits['cpu'] }}">
|
||||
<i class="fas fa-cog"></i>
|
||||
</button>
|
||||
{% else %}
|
||||
<button class="btn btn-default proxstar-vmbtn" id="change-cores" data-vmid="{{ vm.id }}" data-usage=0 data-limit="{{ limits['cpu'] }}">
|
||||
<i class="fas fa-cog"></i>
|
||||
</button>
|
||||
{% endif %}
|
||||
</dd>
|
||||
<dt>Memory</dt>
|
||||
<dd>
|
||||
{% if vm.mem < 1024 %}
|
||||
{{ vm.mem }}MB
|
||||
{% else %}
|
||||
{{ vm.mem // 1024 }}GB
|
||||
{% endif %}
|
||||
{% if vm.qmpstatus == 'running' or vm.qmpstatus == 'suspended' or vm.qmpstatus == 'paused' %}
|
||||
<button class="btn btn-default proxstar-vmbtn" id="change-mem" data-vmid="{{ vm.id }}" data-usage="{{ usage['mem'] - vm.config['memory'] // 1024 }}" data-limit="{{ limits['mem'] }}">
|
||||
<i class="fas fa-cog"></i>
|
||||
</button>
|
||||
{% else %}
|
||||
<button class="btn btn-default proxstar-vmbtn" id="change-mem" data-vmid="{{ vm.id }}" data-usage=0 data-limit="{{ limits['mem'] }}">
|
||||
<i class="fas fa-cog"></i>
|
||||
</button>
|
||||
{% endif %}
|
||||
</dd>
|
||||
<dt>Expiration</dt>
|
||||
<dd>
|
||||
{{ vm.expire.strftime('%m/%d/%Y') }}
|
||||
<button class="btn btn-success proxstar-vmbtn" id="renew-vm" name="renew" data-vmid="{{ vm.id }}" data-vmname="{{ vm.name }}">
|
||||
<i class="fas fa-plus"></i>
|
||||
</button>
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 col-md-push-9 col-sm-12">
|
||||
<div class="card bg-light mb-3">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Actions</h3>
|
||||
</div>
|
||||
<div class="card-body text-center">
|
||||
{% if vm.qmpstatus == 'stopped' %}
|
||||
{% if not usage_check %}
|
||||
<button class="btn btn-success proxstar-actionbtn" id="start-vm" name="start" data-vmid="{{ vm.id }}" data-vmname="{{ vm.name }}">START</button>
|
||||
|
|
@ -36,107 +137,6 @@
|
|||
</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">Boot Order</li>
|
||||
<li>
|
||||
{{ vm.boot_order|join(', ') }}
|
||||
<button class="btn btn-default proxstar-changebtn" id="edit-boot-order" data-vmid="{{ vm.id }}" data-vmname="{{ vm.name }}" data-boot_order="{{ vm.boot_order_json }}">
|
||||
<span class="glyphicon glyphicon-cog"></span>
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-header">Interfaces</li>
|
||||
{% for interface in vm.interfaces %}
|
||||
<li>{{ interface[0] }}: {{ interface[2] }}</li>
|
||||
{% endfor %}
|
||||
<li class="nav-header">Disks</li>
|
||||
{% for disk in vm.disks %}
|
||||
<li>
|
||||
{{ disk[0] }}: {{ disk[1] }}GB
|
||||
<button class="btn btn-default proxstar-changebtn resize-disk" id="resize-disk" name="resize" data-vmid="{{ vm.id }}" data-disk="{{ disk[0] }}" data-usage="{{ usage['disk'] }}" data-limit="{{ limits['disk'] }}">
|
||||
<span class="glyphicon glyphicon-cog"></span>
|
||||
</button>
|
||||
</li>
|
||||
{% endfor %}
|
||||
<li class="nav-header">ISO</li>
|
||||
<li>
|
||||
{{ vm.iso }}
|
||||
{% if vm.iso != 'None' %}
|
||||
<button class="btn btn-danger proxstar-ejectbtn" id="eject-iso" name="eject" data-vmid="{{ vm.id }}" data-iso="{{ vm.iso }}">
|
||||
<span class="glyphicon glyphicon-eject"></span>
|
||||
</button>
|
||||
{% endif %}
|
||||
<button class="btn btn-default proxstar-changebtn" id="change-iso" name="change" data-vmid="{{ vm.id }}" data-iso="{{ vm.iso }}">
|
||||
<span class="glyphicon glyphicon-cog"></span>
|
||||
</button>
|
||||
</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>DNS Name</dt>
|
||||
<dd>{{ vm.name }}.csh.rit.edu</dd>
|
||||
<dt>ID</dt>
|
||||
<dd>{{ vm.id }}</dd>
|
||||
<dt>Status</dt>
|
||||
<dd>{{ vm.qmpstatus }}</dd>
|
||||
<dt>Node</dt>
|
||||
<dd>{{ vm.node }}</dd>
|
||||
<dt>Cores</dt>
|
||||
<dd>
|
||||
{{ vm.cpu }}
|
||||
{% if vm.qmpstatus == 'running' or vm.qmpstatus == 'suspended' or vm.qmpstatus == 'paused' %}
|
||||
<button class="btn btn-default proxstar-changebtn" id="change-cores" data-vmid="{{ vm.id }}" data-usage="{{ usage['cpu'] - vm.cpu }}" data-limit="{{ limits['cpu'] }}">
|
||||
<span class="glyphicon glyphicon-cog"></span>
|
||||
</button>
|
||||
{% else %}
|
||||
<button class="btn btn-default proxstar-changebtn" id="change-cores" data-vmid="{{ vm.id }}" data-usage=0 data-limit="{{ limits['cpu'] }}">
|
||||
<span class="glyphicon glyphicon-cog"></span>
|
||||
</button>
|
||||
{% endif %}
|
||||
</dd>
|
||||
<dt>Memory</dt>
|
||||
<dd>
|
||||
{% if vm.mem < 1024 %}
|
||||
{{ vm.mem }}MB
|
||||
{% else %}
|
||||
{{ vm.mem // 1024 }}GB
|
||||
{% endif %}
|
||||
{% if vm.qmpstatus == 'running' or vm.qmpstatus == 'suspended' or vm.qmpstatus == 'paused' %}
|
||||
<button class="btn btn-default proxstar-changebtn" id="change-mem" data-vmid="{{ vm.id }}" data-usage="{{ usage['mem'] - vm.config['memory'] // 1024 }}" data-limit="{{ limits['mem'] }}">
|
||||
<span class="glyphicon glyphicon-cog"></span>
|
||||
</button>
|
||||
{% else %}
|
||||
<button class="btn btn-default proxstar-changebtn" id="change-mem" data-vmid="{{ vm.id }}" data-usage=0 data-limit="{{ limits['mem'] }}">
|
||||
<span class="glyphicon glyphicon-cog"></span>
|
||||
</button>
|
||||
{% endif %}
|
||||
</dd>
|
||||
<dt>Expiration</dt>
|
||||
<dd>
|
||||
{{ vm.expire.strftime('%m/%d/%Y') }}
|
||||
<button class="btn btn-success proxstar-renewbtn" id="renew-vm" name="renew" data-vmid="{{ vm.id }}" data-vmname="{{ vm.name }}">
|
||||
<span class="glyphicon glyphicon-plus"></span>
|
||||
</button>
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue