first commit
This commit is contained in:
root
32
web/arch/old-lxc.html
Normal file
32
web/arch/old-lxc.html
Normal file
@@ -0,0 +1,32 @@
|
||||
{% extends 'index.html' %}
|
||||
{% block second %}
|
||||
<div class="miniform">
|
||||
<h3>Create Container</h3>
|
||||
<form action="/creation" method="post">
|
||||
<input type="text" name="nom" placeholder="Name" required>
|
||||
Optionnal static IP:
|
||||
<input type="text" name="ip" placeholder="192.168.XX.XX/YY">
|
||||
<select id="oslist" name="os">
|
||||
{%for dist in listdistrib %}
|
||||
<option value={{ dist[1] }}>{{ dist[0] }}</option>
|
||||
{%endfor%}
|
||||
</select>
|
||||
<button name="creation" type="submit"><span class="fas fa-cube" onclick="loading();"></span></button>
|
||||
</form>
|
||||
</div>
|
||||
<div class="miniform">
|
||||
<h3>Rename Container</h3>
|
||||
<form action="/renamect" method="post">
|
||||
<input type="text" name="newname" placeholder="New Name" required>
|
||||
<select id="ctlist" name="nom">
|
||||
{%for lxc in listlxc%}
|
||||
<option value={{ lxc }}>{{ lxc }}</option>
|
||||
{%endfor%}
|
||||
</select>
|
||||
<button name="renamect" type="submit" onclick="loading();"><span class="fas fa-play"></span></button>
|
||||
</form>
|
||||
<p>Be carefull, the container will be stop in order to rename it !</p>
|
||||
</div>
|
||||
|
||||
{% endblock %}
|
||||
|
||||
82
web/arch/old-upload.html
Normal file
82
web/arch/old-upload.html
Normal file
@@ -0,0 +1,82 @@
|
||||
{% include 'base.html' %}
|
||||
{% block main %}
|
||||
|
||||
<div class="miniform">
|
||||
<h3>Upload ISO</h3>
|
||||
{{ dropzone.create(action='upload') }}
|
||||
</div>
|
||||
|
||||
|
||||
<div class="miniform">
|
||||
<h3>ISOSSSSS</h3>
|
||||
<table id="affiche">
|
||||
<tr><th>ISO list</th><th>Delete</th></tr>
|
||||
{%for iso in list_iso %}
|
||||
<tr><td>{{ iso[0] }} ( {{ iso[1] }} )
|
||||
|
||||
</td><td><form action="/deliso" method="post"><button type="submit" value="{{ iso[0] }}" name="fichier" onclick="loading();" class="deliso"><span class="fas fa-trash"></span></button></form>
|
||||
</td></tr>
|
||||
|
||||
{%endfor%}
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h3>Create VM</h3>
|
||||
<form action="/creationvm" method="post">
|
||||
<input type="text" name="nom" placeholder="Name" required>
|
||||
<input type="text" name="ram" placeholder="Memory (MiB)" required>
|
||||
<input type="text" name="cpu" placeholder="vCPU" required><br>
|
||||
<select id="profilelist" name="os" placeholder="Profile" required>
|
||||
{%for profile in list_profiles %}
|
||||
<option value={{ profile }}>{{ profile }}</option>
|
||||
{%endfor%}
|
||||
</select>
|
||||
<select id="isolist" name="iso" required>
|
||||
{%for iso in list_iso %}
|
||||
<option value={{ iso[0] }}>{{ iso [0] }}</option>
|
||||
{%endfor%}
|
||||
</select>
|
||||
<select id="netlist" name="net" required>
|
||||
{%for net in list_net %}
|
||||
<option value={{ net }}>{{ net }}</option>
|
||||
{%endfor%}
|
||||
</select>
|
||||
<input type="text" name="disk" placeholder="Disk (GB)" required>
|
||||
<br>
|
||||
<button name="creation" type="submit"><span class="fas fa-cube"></span></button>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="miniform">
|
||||
<h3>Create Container</h3>
|
||||
<form action="/creation" method="post">
|
||||
<input type="text" name="nom" placeholder="Name" required>
|
||||
Optionnal static IP:
|
||||
<input type="text" name="ip" placeholder="192.168.XX.XX/YY">
|
||||
<select id="oslist" name="os">
|
||||
{%for dist in listdistrib %}
|
||||
<option value={{ dist[1] }}>{{ dist[0] }}</option>
|
||||
{%endfor%}
|
||||
</select>
|
||||
<button name="creation" type="submit"><span class="fas fa-cube" onclick="loading();"></span></button>
|
||||
</form>
|
||||
</div>
|
||||
<div class="miniform">
|
||||
<h3>Rename Container</h3>
|
||||
<form action="/renamect" method="post">
|
||||
<input type="text" name="newname" placeholder="New Name" required>
|
||||
<select id="ctlist" name="nom">
|
||||
{%for lxc in listlxc%}
|
||||
<option value={{ lxc }}>{{ lxc }}</option>
|
||||
{%endfor%}
|
||||
</select>
|
||||
<button name="renamect" type="submit" onclick="loading();"><span class="fas fa-play"></span></button>
|
||||
</form>
|
||||
<p>Be carefull, the container will be stop in order to rename it !</p>
|
||||
</div>
|
||||
|
||||
{% endblock %}
|
||||
|
||||
{% include 'foot.html' %}
|
||||
16
web/static/Chart.bundle.min.js
vendored
Normal file
16
web/static/Chart.bundle.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
BIN
web/static/logo.gif
Normal file
BIN
web/static/logo.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 254 KiB |
223
web/static/style.css
Normal file
223
web/static/style.css
Normal file
@@ -0,0 +1,223 @@
|
||||
body {
|
||||
font-size: 13px;
|
||||
font-weight: 300;
|
||||
font-family: helvetica, arial, verdana, sans-serif;
|
||||
text-align:center;
|
||||
min-height: 100% !important;
|
||||
}
|
||||
|
||||
.not-underline{
|
||||
text-decoration:none;
|
||||
}
|
||||
|
||||
|
||||
.tacts {
|
||||
border:none;
|
||||
}
|
||||
.qard {
|
||||
text-align:center;
|
||||
width:100%;
|
||||
padding:20px;
|
||||
border:none;
|
||||
}
|
||||
.miniform {
|
||||
width:50%;
|
||||
text-align:center;
|
||||
float:left;
|
||||
padding:20px;
|
||||
}
|
||||
.dashform {
|
||||
width:25%;
|
||||
text-align:center;
|
||||
float:left;
|
||||
padding:20px;
|
||||
}
|
||||
#affiche, #pool{
|
||||
vertical-align: middle;
|
||||
text-align:center;
|
||||
width:90%;
|
||||
margin: 0 auto;
|
||||
border-collapse: separate;
|
||||
border-spacing: 0px;
|
||||
border:none;
|
||||
}
|
||||
#affiche td, #affiche th {
|
||||
border: none;
|
||||
padding: 2px;
|
||||
}
|
||||
#affiche tr:nth-child(even){
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
#affiche tr:hover {
|
||||
background-color: #ddd;
|
||||
}
|
||||
#affiche th {
|
||||
padding-top: 12px;
|
||||
padding-bottom: 12px;
|
||||
text-align: center;
|
||||
background-color: #336676;
|
||||
color: white;
|
||||
}
|
||||
.login {
|
||||
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
|
||||
width:300px;
|
||||
height:400px;
|
||||
padding:50px;
|
||||
text-align:center;
|
||||
margin:auto;
|
||||
background-color:white;
|
||||
}
|
||||
|
||||
#alert {
|
||||
width:50%;
|
||||
padding:10px;
|
||||
margin:auto;
|
||||
text-align:center;
|
||||
box-shadow: 0px 0.5px 1px rgba(0, 0, 0, 0.1), inset 0px 0.5px 0.5px rgba(255, 255, 255, 0.5), 0px 0px 0px 0.5px rgba(0, 0, 0, 0.12);
|
||||
border:solid 1px;
|
||||
background-color:white;
|
||||
border-radius: 6px;
|
||||
letter-spacing:2px;
|
||||
font-size:14px;
|
||||
}
|
||||
|
||||
#consolemessage {
|
||||
width:50%;
|
||||
padding:10px;
|
||||
margin:auto;
|
||||
text-align:center;
|
||||
box-shadow: 0px 0.5px 1px rgba(0, 0, 0, 0.1), inset 0px 0.5px 0.5px rgba(255, 255, 255, 0.5)>
|
||||
border:solid 1px;
|
||||
background-color:white;
|
||||
border-radius: 6px;
|
||||
letter-spacing:2px;
|
||||
font-size:14px;
|
||||
}
|
||||
|
||||
button {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
border-radius: 6px;
|
||||
border: none;
|
||||
width:100px;
|
||||
background: Transparent;
|
||||
box-shadow: 0px 0.5px 1px rgba(0, 0, 0, 0.1), inset 0px 0.5px 0.5px rgba(255, 255, 255, 0.5), 0px 0px 0px 0.5px rgba(0, 0, 0, 0.12);
|
||||
cursor: pointer;
|
||||
margin:auto;
|
||||
padding: 5px 5px;
|
||||
}
|
||||
.space {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
padding: 20px 0;
|
||||
}
|
||||
span {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
padding: 5px 0;
|
||||
}
|
||||
.deliso{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
float:right;
|
||||
padding: 5px 0;
|
||||
}
|
||||
select, option {
|
||||
width: 243px;
|
||||
padding: 12px 20px;
|
||||
margin: 8px 0;
|
||||
}
|
||||
div#loading {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
left: 0;
|
||||
top: 0;
|
||||
text-align:center;
|
||||
margin:auto;
|
||||
display: none;
|
||||
cursor: wait;
|
||||
top:300px;
|
||||
}
|
||||
.logout {
|
||||
text-align: right;
|
||||
width:100%;
|
||||
text-decoration:none;
|
||||
height:33px;
|
||||
}
|
||||
.logout a {
|
||||
text-decoration: none;
|
||||
}
|
||||
.logout ul {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
background-color: #333;
|
||||
position: -webkit-sticky; /* Safari */
|
||||
position: sticky;
|
||||
top: 0;
|
||||
|
||||
}
|
||||
.logout li {
|
||||
float: left;
|
||||
}
|
||||
|
||||
|
||||
.logout li a {
|
||||
display: block;
|
||||
color: white;
|
||||
text-align: center;
|
||||
padding: 14px 16px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.logout li a:hover {
|
||||
background-color: #111;
|
||||
}
|
||||
|
||||
.logout .active {
|
||||
background-color: #BB8FCE;
|
||||
}
|
||||
.modal {
|
||||
margin:auto;
|
||||
display: none;
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
background-color: rgb(0,0,0);
|
||||
background-color: rgba(0,0,0,0.4);
|
||||
}
|
||||
.modal-content {
|
||||
background-color: #fefefe;
|
||||
margin:40px auto;
|
||||
padding: 20px;
|
||||
border: 1px solid #888;
|
||||
width: 90%;
|
||||
}
|
||||
.close {
|
||||
color: #aaa;
|
||||
float: right;
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.close:hover, .close:focus {
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.snaplist{
|
||||
}
|
||||
|
||||
225
web/static/style.css.black
Normal file
225
web/static/style.css.black
Normal file
@@ -0,0 +1,225 @@
|
||||
body {
|
||||
font-size: 13px;
|
||||
font-weight: 300;
|
||||
font-family: helvetica, arial, verdana, sans-serif;
|
||||
text-align:center;
|
||||
min-height: 100% !important;
|
||||
background-color:black;
|
||||
color:white;
|
||||
}
|
||||
|
||||
.not-underline{
|
||||
text-decoration:none;
|
||||
}
|
||||
|
||||
|
||||
.tacts {
|
||||
border:none;
|
||||
}
|
||||
.qard {
|
||||
text-align:center;
|
||||
width:100%;
|
||||
padding:20px;
|
||||
border:none;
|
||||
}
|
||||
.miniform {
|
||||
width:50%;
|
||||
text-align:center;
|
||||
float:left;
|
||||
padding:20px;
|
||||
}
|
||||
.dashform {
|
||||
width:25%;
|
||||
text-align:center;
|
||||
float:left;
|
||||
padding:20px;
|
||||
}
|
||||
#affiche, #pool{
|
||||
vertical-align: middle;
|
||||
text-align:center;
|
||||
width:90%;
|
||||
margin: 0 auto;
|
||||
border-collapse: separate;
|
||||
border-spacing: 0px;
|
||||
border:none;
|
||||
}
|
||||
#affiche td, #affiche th {
|
||||
border: none;
|
||||
padding: 2px;
|
||||
}
|
||||
#affiche tr:nth-child(even){
|
||||
background-color: black;
|
||||
}
|
||||
#affiche tr:hover {
|
||||
background-color: #ddd;
|
||||
}
|
||||
#affiche th {
|
||||
padding-top: 12px;
|
||||
padding-bottom: 12px;
|
||||
text-align: center;
|
||||
background-color: black;
|
||||
color: white;
|
||||
}
|
||||
.login {
|
||||
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
|
||||
width:300px;
|
||||
height:400px;
|
||||
padding:50px;
|
||||
text-align:center;
|
||||
margin:auto;
|
||||
background-color:white;
|
||||
}
|
||||
|
||||
#alert {
|
||||
width:50%;
|
||||
padding:10px;
|
||||
margin:auto;
|
||||
text-align:center;
|
||||
box-shadow: 0px 0.5px 1px rgba(0, 0, 0, 0.1), inset 0px 0.5px 0.5px rgba(255, 255, 255, 0.5), 0px 0px 0px 0.5px rgba(0, 0, 0, 0.12);
|
||||
border:solid 1px;
|
||||
background-color:white;
|
||||
border-radius: 6px;
|
||||
letter-spacing:2px;
|
||||
font-size:14px;
|
||||
}
|
||||
|
||||
#consolemessage {
|
||||
width:50%;
|
||||
padding:10px;
|
||||
margin:auto;
|
||||
text-align:center;
|
||||
box-shadow: 0px 0.5px 1px rgba(0, 0, 0, 0.1), inset 0px 0.5px 0.5px rgba(255, 255, 255, 0.5)>
|
||||
border:solid 1px;
|
||||
background-color:white;
|
||||
border-radius: 6px;
|
||||
letter-spacing:2px;
|
||||
font-size:14px;
|
||||
}
|
||||
|
||||
button {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
border-radius: 6px;
|
||||
border: none;
|
||||
width:100px;
|
||||
background: Transparent;
|
||||
box-shadow: 0px 0.5px 1px rgba(0, 0, 0, 0.1), inset 0px 0.5px 0.5px rgba(255, 255, 255, 0.5), 0px 0px 0px 0.5px rgba(0, 0, 0, 0.12);
|
||||
cursor: pointer;
|
||||
margin:auto;
|
||||
padding: 5px 5px;
|
||||
}
|
||||
.space {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
padding: 20px 0;
|
||||
}
|
||||
span {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
padding: 5px 0;
|
||||
}
|
||||
.deliso{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
float:right;
|
||||
padding: 5px 0;
|
||||
}
|
||||
select, option {
|
||||
width: 243px;
|
||||
padding: 12px 20px;
|
||||
margin: 8px 0;
|
||||
}
|
||||
div#loading {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
left: 0;
|
||||
top: 0;
|
||||
text-align:center;
|
||||
margin:auto;
|
||||
display: none;
|
||||
cursor: wait;
|
||||
top:300px;
|
||||
}
|
||||
.logout {
|
||||
text-align: right;
|
||||
width:100%;
|
||||
text-decoration:none;
|
||||
height:33px;
|
||||
}
|
||||
.logout a {
|
||||
text-decoration: none;
|
||||
}
|
||||
.logout ul {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
background-color: white;
|
||||
position: -webkit-sticky; /* Safari */
|
||||
position: sticky;
|
||||
top: 0;
|
||||
|
||||
}
|
||||
.logout li {
|
||||
float: left;
|
||||
}
|
||||
|
||||
|
||||
.logout li a {
|
||||
display: block;
|
||||
color: black;
|
||||
text-align: center;
|
||||
padding: 14px 16px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.logout li a:hover {
|
||||
background-color: #ddd;
|
||||
}
|
||||
|
||||
.logout .active {
|
||||
background-color: #BB8FCE;
|
||||
}
|
||||
.modal {
|
||||
margin:auto;
|
||||
display: none;
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
background-color: rgb(0,0,0);
|
||||
background-color: rgba(0,0,0,0.4);
|
||||
}
|
||||
.modal-content {
|
||||
background-color: #fefefe;
|
||||
margin:40px auto;
|
||||
padding: 20px;
|
||||
border: 1px solid #888;
|
||||
width: 90%;
|
||||
}
|
||||
.close {
|
||||
color: #aaa;
|
||||
float: right;
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.close:hover, .close:focus {
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.snaplist{
|
||||
}
|
||||
|
||||
223
web/static/style.css.white
Normal file
223
web/static/style.css.white
Normal file
@@ -0,0 +1,223 @@
|
||||
body {
|
||||
font-size: 13px;
|
||||
font-weight: 300;
|
||||
font-family: helvetica, arial, verdana, sans-serif;
|
||||
text-align:center;
|
||||
min-height: 100% !important;
|
||||
}
|
||||
|
||||
.not-underline{
|
||||
text-decoration:none;
|
||||
}
|
||||
|
||||
|
||||
.tacts {
|
||||
border:none;
|
||||
}
|
||||
.qard {
|
||||
text-align:center;
|
||||
width:100%;
|
||||
padding:20px;
|
||||
border:none;
|
||||
}
|
||||
.miniform {
|
||||
width:50%;
|
||||
text-align:center;
|
||||
float:left;
|
||||
padding:20px;
|
||||
}
|
||||
.dashform {
|
||||
width:25%;
|
||||
text-align:center;
|
||||
float:left;
|
||||
padding:20px;
|
||||
}
|
||||
#affiche, #pool{
|
||||
vertical-align: middle;
|
||||
text-align:center;
|
||||
width:90%;
|
||||
margin: 0 auto;
|
||||
border-collapse: separate;
|
||||
border-spacing: 0px;
|
||||
border:none;
|
||||
}
|
||||
#affiche td, #affiche th {
|
||||
border: none;
|
||||
padding: 2px;
|
||||
}
|
||||
#affiche tr:nth-child(even){
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
#affiche tr:hover {
|
||||
background-color: #ddd;
|
||||
}
|
||||
#affiche th {
|
||||
padding-top: 12px;
|
||||
padding-bottom: 12px;
|
||||
text-align: center;
|
||||
background-color: #336676;
|
||||
color: white;
|
||||
}
|
||||
.login {
|
||||
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
|
||||
width:300px;
|
||||
height:400px;
|
||||
padding:50px;
|
||||
text-align:center;
|
||||
margin:auto;
|
||||
background-color:white;
|
||||
}
|
||||
|
||||
#alert {
|
||||
width:50%;
|
||||
padding:10px;
|
||||
margin:auto;
|
||||
text-align:center;
|
||||
box-shadow: 0px 0.5px 1px rgba(0, 0, 0, 0.1), inset 0px 0.5px 0.5px rgba(255, 255, 255, 0.5), 0px 0px 0px 0.5px rgba(0, 0, 0, 0.12);
|
||||
border:solid 1px;
|
||||
background-color:white;
|
||||
border-radius: 6px;
|
||||
letter-spacing:2px;
|
||||
font-size:14px;
|
||||
}
|
||||
|
||||
#consolemessage {
|
||||
width:50%;
|
||||
padding:10px;
|
||||
margin:auto;
|
||||
text-align:center;
|
||||
box-shadow: 0px 0.5px 1px rgba(0, 0, 0, 0.1), inset 0px 0.5px 0.5px rgba(255, 255, 255, 0.5)>
|
||||
border:solid 1px;
|
||||
background-color:white;
|
||||
border-radius: 6px;
|
||||
letter-spacing:2px;
|
||||
font-size:14px;
|
||||
}
|
||||
|
||||
button {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
border-radius: 6px;
|
||||
border: none;
|
||||
width:100px;
|
||||
background: Transparent;
|
||||
box-shadow: 0px 0.5px 1px rgba(0, 0, 0, 0.1), inset 0px 0.5px 0.5px rgba(255, 255, 255, 0.5), 0px 0px 0px 0.5px rgba(0, 0, 0, 0.12);
|
||||
cursor: pointer;
|
||||
margin:auto;
|
||||
padding: 5px 5px;
|
||||
}
|
||||
.space {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
padding: 20px 0;
|
||||
}
|
||||
span {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
padding: 5px 0;
|
||||
}
|
||||
.deliso{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
float:right;
|
||||
padding: 5px 0;
|
||||
}
|
||||
select, option {
|
||||
width: 243px;
|
||||
padding: 12px 20px;
|
||||
margin: 8px 0;
|
||||
}
|
||||
div#loading {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
left: 0;
|
||||
top: 0;
|
||||
text-align:center;
|
||||
margin:auto;
|
||||
display: none;
|
||||
cursor: wait;
|
||||
top:300px;
|
||||
}
|
||||
.logout {
|
||||
text-align: right;
|
||||
width:100%;
|
||||
text-decoration:none;
|
||||
height:33px;
|
||||
}
|
||||
.logout a {
|
||||
text-decoration: none;
|
||||
}
|
||||
.logout ul {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
background-color: #333;
|
||||
position: -webkit-sticky; /* Safari */
|
||||
position: sticky;
|
||||
top: 0;
|
||||
|
||||
}
|
||||
.logout li {
|
||||
float: left;
|
||||
}
|
||||
|
||||
|
||||
.logout li a {
|
||||
display: block;
|
||||
color: white;
|
||||
text-align: center;
|
||||
padding: 14px 16px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.logout li a:hover {
|
||||
background-color: #111;
|
||||
}
|
||||
|
||||
.logout .active {
|
||||
background-color: #BB8FCE;
|
||||
}
|
||||
.modal {
|
||||
margin:auto;
|
||||
display: none;
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
background-color: rgb(0,0,0);
|
||||
background-color: rgba(0,0,0,0.4);
|
||||
}
|
||||
.modal-content {
|
||||
background-color: #fefefe;
|
||||
margin:40px auto;
|
||||
padding: 20px;
|
||||
border: 1px solid #888;
|
||||
width: 90%;
|
||||
}
|
||||
.close {
|
||||
color: #aaa;
|
||||
float: right;
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.close:hover, .close:focus {
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.snaplist{
|
||||
}
|
||||
|
||||
77
web/templates/backup.html
Normal file
77
web/templates/backup.html
Normal file
@@ -0,0 +1,77 @@
|
||||
{% include 'base.html' %}
|
||||
{% block main %}
|
||||
<div class="qard">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Containers
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<table class="table table-responsive table-hover table-condensed align-middle mb-0 bg-white">
|
||||
<tr><th>Name</th><th>Snapshot list</th><th>Create Snapshot</th></tr>
|
||||
{%for lxc in listlxc %}
|
||||
<tr><td>{{ lxc[0] | safe }}</td><td><div class="snaplist">
|
||||
{%for lxc_snap in lxc[1] %}
|
||||
<table><tr><td>
|
||||
{{ lxc_snap | safe }}
|
||||
</td><td>
|
||||
<form action="/del_snap_lxc" method="post">
|
||||
<input type="hidden" name="cont" value="{{ lxc[0] | safe }}">
|
||||
<button type="submit" name="delete" value="{{ lxc_snap | safe }}"><span class="fas fa-trash"></span></button>
|
||||
</form>
|
||||
</td><td>
|
||||
<form action="/rest_snap_lxc" method="post">
|
||||
<input type="hidden" name="cont" value="{{ lxc[0] | safe }}">
|
||||
<button type="submit" name="restore" value="{{ lxc_snap | safe }}"><span class="fas fa-arrow-circle-down"></span></button>
|
||||
</form>
|
||||
</td></tr></table>
|
||||
{%endfor%}
|
||||
</div>
|
||||
|
||||
</td><td><form action="/snap_lxc" method="post"><button type="submit" value="{{ lxc[0] }}" name="nom" onclick="loading();" class="deliso"><span class="fas fa-play"> Save</button></form>
|
||||
</td></tr>
|
||||
{%endfor%}
|
||||
</table>
|
||||
</div></div></div>
|
||||
|
||||
<div class="qard">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Virtual Servers
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
||||
|
||||
<table class="table table-responsive table-hover table-condensed align-middle mb-0 bg-white">
|
||||
<tr><th>Name</th><th>Snapshot list</th><th>Create Snapshot</th></tr>
|
||||
{%for vm in listvm %}
|
||||
<tr><td>{{ vm[0] | safe }}</td><td><div class="snaplist">
|
||||
{%for vm_snap in vm[1] %}
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
{{ vm_snap | safe }}
|
||||
</td>
|
||||
<td>
|
||||
<form action="/del_snap_vm" method="post">
|
||||
<input type="hidden" name="cont" value="{{ vm[0] | safe }}">
|
||||
<button type="submit" name="delete" value="{{ vm_snap | safe }}"><span class="fas fa-trash"></span></button>
|
||||
</form>
|
||||
</td>
|
||||
<td>
|
||||
<form action="/rest_snap_vm" method="post">
|
||||
<input type="hidden" name="cont" value="{{ vm[0] | safe }}">
|
||||
<button type="submit" name="restore" value="{{ vm_snap | safe }}"><span class="fas fa-arrow-circle-down"></span></button>
|
||||
</form>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
{%endfor%}
|
||||
|
||||
</td><td><form action="/snap_vm" method="post"><button type="submit" value="{{ vm[0] }}" name="nom" onclick="loading();" class="deliso"><span class="fas fa-play"> Save</button></form>
|
||||
</td></tr>
|
||||
{%endfor%}
|
||||
</table>
|
||||
|
||||
</div></div></div>
|
||||
{% endblock %}
|
||||
{% include 'foot.html' %}
|
||||
46
web/templates/base.html
Normal file
46
web/templates/base.html
Normal file
@@ -0,0 +1,46 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<!-- -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
|
||||
<!-- -->
|
||||
<link href="{{url_for('static', filename = 'style.css')}}" rel="stylesheet">
|
||||
|
||||
{{ fontawesome_css() }}
|
||||
{{ dropzone.load_css() }}
|
||||
{{ dropzone.style('border: 2px dashed #000; min-height: 200px;text-align:center;') }}
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
</head>
|
||||
<title>{{ title }}</title>
|
||||
<br>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet" type="text/css">
|
||||
|
||||
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
<div class="logout">
|
||||
<ul>
|
||||
{% for item in nav.top %}
|
||||
<li class="{{ 'active' if item.is_active else '' }}">
|
||||
<a href="{{ item.url }}">{{ item.label }}</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
<li style="float:right;">
|
||||
<a href="logout"><span class="fas fa-user" style="display: inline;"></span> Logout</a>
|
||||
</li>
|
||||
<li style="float:right;">
|
||||
<a href="javascript:window.location.href=window.location.href"><span class="fas fa-sync" style="display: inline;"></span></a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
<!-- <div id="titre">{{ title }}</div> -->
|
||||
<div class="space"></div>
|
||||
{{ alertmessage | safe }}
|
||||
<div id="loading"><center><img src="{{url_for('static', filename = 'logo.gif')}}"></center></div>
|
||||
<div id="content">
|
||||
<center>
|
||||
152
web/templates/build.html
Normal file
152
web/templates/build.html
Normal file
@@ -0,0 +1,152 @@
|
||||
{% include 'base.html' %}
|
||||
{% block main %}
|
||||
<div class="miniform">
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
ISO
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<table class="table table-responsive table-hover table-condensed align-middle mb-0 bg-white">
|
||||
<tr><th>ISO list</th><th>Delete</th></tr>
|
||||
{%for iso in listvm_iso %}
|
||||
<tr><td>{{ iso[0] }} ( {{ iso[1] }} )
|
||||
</td><td><form action="/deliso" method="post"><button type="submit" value="{{ iso[0] }}" name="fichier" onclick="loading();" class="deliso"><span class="fas fa-trash"></span></button></form>
|
||||
</td></tr>
|
||||
{%endfor%}
|
||||
</table>
|
||||
</div></div>
|
||||
</div>
|
||||
|
||||
<div class="miniform">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Upload ISO
|
||||
</div>
|
||||
<div class="card-body">
|
||||
{{ dropzone.create(action='upload') }}
|
||||
</div>
|
||||
</div></div><br>
|
||||
<div><hr></div>
|
||||
|
||||
<!-- Avoid a Misalignment -->
|
||||
<div style="clear: both;"></div>
|
||||
<!-- -->
|
||||
<div class="quard">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Mount ISO on Virtual Server
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form action="/mountiso" method="post">
|
||||
<table class="table table-responsive table-hover table-condensed align-middle mb-0 bg-white">
|
||||
<tr><td>ISO</td><td>Virtual Server</td><td></td></tr>
|
||||
<tr><td>
|
||||
<select id="isolist" class="form-control" name="iso" required>
|
||||
{%for iso in list_iso_mount %}
|
||||
<option value={{ iso[0] }}>{{ iso[0] }}</option>
|
||||
{%endfor%}
|
||||
</select>
|
||||
</td><td>
|
||||
<select id="vmlist" class="form-control" name="vm" required>
|
||||
{%for vm in listvm %}
|
||||
<option value={{ vm }}>{{ vm }}</option>
|
||||
{%endfor%}
|
||||
</select>
|
||||
</td><td>
|
||||
<button name="mountiso" type="submit"><span class="fas fa-compact-disc"></span></button>
|
||||
</td></tr></table>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Avoid a Misalignment -->
|
||||
<div style="clear: both;"></div>
|
||||
<!-- -->
|
||||
<div class="miniform">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Create Virtual Server
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form action="/creationvm" method="post">
|
||||
<label for="nom">Name</label>
|
||||
<input type="text" name="nom" class="form-control" placeholder="Server" required><br>
|
||||
<label for="ram">Memory (in MiB)</label>
|
||||
<input type="text" name="ram" class="form-control" placeholder="1024" required><br>
|
||||
<label for="cpu">vCPU</label>
|
||||
<input type="text" name="cpu" class="form-control" placeholder="1" required><br>
|
||||
<label for="disk">Disk (in GB)</label>
|
||||
<input type="text" class="form-control" name="disk" placeholder="10" required><br>
|
||||
<label for="os">OS</label>
|
||||
<select id="profilelist" class="form-control" name="os" placeholder="Profile" required>
|
||||
{%for profile in list_profiles %}
|
||||
<option value={{ profile }}>{{ profile }}</option>
|
||||
{%endfor%}
|
||||
</select><br>
|
||||
<label for="iso">ISO</label>
|
||||
<select id="isolist" class="form-control" name="iso" required>
|
||||
{%for iso in list_iso %}
|
||||
<option value={{ iso[0] }}>{{ iso[0] }}</option>
|
||||
{%endfor%}
|
||||
</select><br>
|
||||
<label for="net">Network</label>
|
||||
<select id="netlist" class="form-control" name="net" required>
|
||||
{%for net in list_net %}
|
||||
<option value={{ net }}>{{ net }}</option>
|
||||
{%endfor%}
|
||||
</select><br>
|
||||
<button name="creation" type="submit"><span class="fas fa-cube"></span></button>
|
||||
</form>
|
||||
</div>
|
||||
</div></div>
|
||||
|
||||
<div class="miniform">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Create Container
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form action="/creation" method="post">
|
||||
<label for="cnom">Name</label>
|
||||
<input type="text" id="cnom" name="nom" class="form-control" placeholder="Container" required><br>
|
||||
<label for="cip">Optional static IP</label>
|
||||
<input type="text" id="cip" name="ip" class="form-control" placeholder="192.168.XX.XX/YY"><br>
|
||||
<label for="oslist">OS</label>
|
||||
<select id="oslist" name="os" class="form-control">
|
||||
{%for dist in listdistrib %}
|
||||
<option value={{ dist[1] }}>{{ dist[0] }}</option>
|
||||
{%endfor%}
|
||||
</select><br>
|
||||
<button name="creation" type="submit"><span class="fas fa-cube" onclick="loading();"></span></button>
|
||||
</form>
|
||||
</div>
|
||||
</div></div>
|
||||
|
||||
<div class="miniform">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Rename Container
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
||||
<form action="/renamect" method="post">
|
||||
<p>Be carefull, the container will be stop in order to rename it !</p>
|
||||
|
||||
|
||||
<label for="ctlist">Container</label>
|
||||
<select id="ctlist" name="nom" class="form-control">
|
||||
{%for lxc in listlxc%}
|
||||
<option value={{ lxc }}>{{ lxc }}</option>
|
||||
{%endfor%}
|
||||
</select><br>
|
||||
|
||||
<label for="fnom">New name</label>
|
||||
<input class="form-control" id="fnom" type="text" name="newname" placeholder="New Name" required><br>
|
||||
<button name="renamect" type="submit" onclick="loading();"><span class="fas fa-sort"></span></button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{% endblock %}
|
||||
|
||||
{% include 'foot.html' %}
|
||||
26
web/templates/devices.html
Normal file
26
web/templates/devices.html
Normal file
@@ -0,0 +1,26 @@
|
||||
{% include 'base.html' %}
|
||||
{% block main %}
|
||||
<div class="qard">
|
||||
<h5>ISO</h5>
|
||||
<table id="affiche">
|
||||
<tr><th>ISO list</th><th>Delete</th></tr>
|
||||
{%for iso in list_iso %}
|
||||
<tr><td style="height:60px;">{{ iso[0] }} ( {{ iso[1] }} )
|
||||
|
||||
</td><td><form action="/deliso" method="post"><button type="submit" value="{{ iso[0] }}" name="fichier" onclick="loading();" class="deliso"><span class="fas fa-trash"></span></button></form>
|
||||
</td></tr>
|
||||
|
||||
{%endfor%}
|
||||
</table>
|
||||
</div>
|
||||
<div class="space"></div>
|
||||
<div class="qard">
|
||||
<h5>Upload ISO</h5>
|
||||
{{ dropzone.create(action='upload') }}
|
||||
</body>
|
||||
</div>
|
||||
<div class="space"></div>
|
||||
</div>
|
||||
|
||||
{% endblock %}
|
||||
{% include 'foot.html' %}
|
||||
81
web/templates/foot.html
Normal file
81
web/templates/foot.html
Normal file
@@ -0,0 +1,81 @@
|
||||
|
||||
</div>
|
||||
|
||||
<div id="Modal" class="modal">
|
||||
<div class="modal-content">
|
||||
<span class="close">×</span>
|
||||
<center>
|
||||
<script language="JavaScript">
|
||||
document.write('<iframe src="' + window.location.protocol + '//' + window.location.hostname + '/console/" title="Console" width="1024" height="768" style="border:none;"></iframe>' );
|
||||
</script>
|
||||
</center>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
{{ fontawesome_js() }}
|
||||
<script type="text/javascript">// <![CDATA[
|
||||
function loading(){
|
||||
$("#loading").show();
|
||||
$("#content").hide();
|
||||
}
|
||||
// ]]></script>
|
||||
|
||||
<script
|
||||
src="https://code.jquery.com/jquery-3.6.1.slim.min.js"
|
||||
integrity="sha256-w8CvhFs7iHNVUtnSP0YKEg00p9Ih13rlL9zGqvLdePA="
|
||||
crossorigin="anonymous"></script>
|
||||
|
||||
</div>
|
||||
|
||||
<div style="position:fixed;bottom:0;right:0">Version Beta 2.7</div>
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
var modal = document.getElementById("Modal");
|
||||
var btn = document.getElementById("ModalBtn");
|
||||
var span = document.getElementsByClassName("close")[0];
|
||||
btn.onclick = function() {
|
||||
modal.style.display = "block";
|
||||
}
|
||||
span.onclick = function() {
|
||||
modal.style.display = "none";
|
||||
}
|
||||
window.onclick = function(event) {
|
||||
if (event.target == modal) {
|
||||
modal.style.display = "none";
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
<script>
|
||||
var opacity=0;
|
||||
var intervalID=0;
|
||||
// window.onload=fadeout;
|
||||
function fadeout(){
|
||||
setInterval(hide, 100);
|
||||
}
|
||||
|
||||
setTimeout(function(){
|
||||
fadeout();
|
||||
}, 3000);
|
||||
function hide(){
|
||||
var body=document.getElementById("alert");
|
||||
opacity =
|
||||
Number(window.getComputedStyle(body).getPropertyValue("opacity"))
|
||||
|
||||
if(opacity>0){
|
||||
opacity=opacity-0.1;
|
||||
body.style.opacity=opacity
|
||||
}
|
||||
else{
|
||||
clearInterval(intervalID);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
{{ dropzone.load_js() }}
|
||||
{{ dropzone.config() }}
|
||||
</body>
|
||||
</html>
|
||||
10
web/templates/host.html
Normal file
10
web/templates/host.html
Normal file
@@ -0,0 +1,10 @@
|
||||
{% include 'base.html' %}
|
||||
{% block main %}
|
||||
<div class="qard">
|
||||
<h5>{{ hostname | safe }}</h5>
|
||||
<div class="space"></div>
|
||||
{{ hostlist | safe }}
|
||||
</div>
|
||||
|
||||
{% endblock %}
|
||||
{% include 'foot.html' %}
|
||||
190
web/templates/index.html
Normal file
190
web/templates/index.html
Normal file
@@ -0,0 +1,190 @@
|
||||
{% include 'base.html' %}
|
||||
{% block main %}
|
||||
|
||||
<div class="dashform">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Hostname
|
||||
</div>
|
||||
<div class="card-body">
|
||||
{{ hostname | safe }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dashform">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
User
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
||||
{{ loguser | safe }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dashform">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Containers
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
||||
<span style="color:green;">{{ activ_ct | safe }} up</span>
|
||||
<span style="color:red;">{{ inactiv_ct | safe }} down</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dashform">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Virtual Servers
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
||||
<span style="color:green;">{{ activ_vm | safe}} up</span>
|
||||
<span style="color:red;">{{ inactiv_vm | safe}} down</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Avoid a Misalignment -->
|
||||
<div style="clear: both;"></div>
|
||||
<!-- -->
|
||||
|
||||
<div class="dashform">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
CPU
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div style="width:200px;height:200px;margin:auto;">
|
||||
<canvas id="cpuChart" width="50" height="50"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dashform">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
RAM
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div style="width:200px;height:200px;margin:auto;">
|
||||
<canvas id="ramChart" width="50" height="50"></canvas>
|
||||
</div>
|
||||
|
||||
Buffers:{{ memory_buffers | safe }} Cached:{{ memory_cached | safe }}<br>Free :{{ memory_free | safe }} Total :{{ memory_total | safe }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dashform">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Disk
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div style="width:200px;height:200px;margin:auto;">
|
||||
<canvas id="diskChart" width="50" height="50"></canvas>
|
||||
</div>
|
||||
|
||||
Used :{{ host_disk_used | safe }}GB / Total :{{ host_disk_total | safe }}GB
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.bundle.min.js"></script>
|
||||
<script>
|
||||
var datadisk = {
|
||||
labels: [
|
||||
"Use ({{ host_disk_percent | safe}}%)",
|
||||
"Free"
|
||||
],
|
||||
datasets: [
|
||||
{
|
||||
data: [{{ host_disk_percent | safe}}, {{ host_disk_free_percent | safe}}],
|
||||
backgroundColor: [
|
||||
"#008000",
|
||||
"#C0C0C0"
|
||||
],
|
||||
hoverBackgroundColor: [
|
||||
"#008000",
|
||||
"#C0C0C0"
|
||||
]
|
||||
}]
|
||||
};
|
||||
|
||||
var ctx3 = document.getElementById("diskChart");
|
||||
|
||||
var myDoughnutChart = new Chart(ctx3, {
|
||||
type: 'doughnut',
|
||||
data: datadisk,
|
||||
options: {
|
||||
rotation: 1 * Math.PI,
|
||||
circumference: 1 * Math.PI
|
||||
}
|
||||
});
|
||||
|
||||
var datacpu = {
|
||||
labels: [
|
||||
"Use ({{ cpu_percent_used | safe}}%)",
|
||||
"Free"
|
||||
],
|
||||
datasets: [
|
||||
{
|
||||
data: [{{ cpu_percent_used | safe}}, {{ cpu_percent_free | safe}}],
|
||||
backgroundColor: [
|
||||
"#008000",
|
||||
"#C0C0C0"
|
||||
],
|
||||
hoverBackgroundColor: [
|
||||
"#008000",
|
||||
"#C0C0C0"
|
||||
]
|
||||
}]
|
||||
};
|
||||
|
||||
var ctx = document.getElementById("cpuChart");
|
||||
|
||||
var myDoughnutChart = new Chart(ctx, {
|
||||
type: 'doughnut',
|
||||
data: datacpu,
|
||||
options: {
|
||||
rotation: 1 * Math.PI,
|
||||
circumference: 1 * Math.PI
|
||||
}
|
||||
});
|
||||
var dataram = {
|
||||
labels: [
|
||||
"Use ({{ mem_percent_used | safe}}%)",
|
||||
"Free"
|
||||
],
|
||||
datasets: [
|
||||
{
|
||||
data: [{{ mem_percent_used | safe}}, {{ mem_percent_free | safe}}],
|
||||
backgroundColor: [
|
||||
"#008000",
|
||||
"#C0C0C0"
|
||||
],
|
||||
hoverBackgroundColor: [
|
||||
"#008000",
|
||||
"#C0C0C0"
|
||||
]
|
||||
}]
|
||||
};
|
||||
|
||||
var ctx2 = document.getElementById("ramChart");
|
||||
|
||||
// And for a doughnut chart
|
||||
var myDoughnutChart2 = new Chart(ctx2, {
|
||||
type: 'doughnut',
|
||||
data: dataram,
|
||||
options: {
|
||||
rotation: 1 * Math.PI,
|
||||
circumference: 1 * Math.PI
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
{% endblock %}
|
||||
{% include 'foot.html' %}
|
||||
32
web/templates/login.html
Normal file
32
web/templates/login.html
Normal file
@@ -0,0 +1,32 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link href="{{url_for('static', filename = 'style.css')}}" rel="stylesheet">
|
||||
{{ fontawesome_css() }}
|
||||
|
||||
<div id="titre">{{ title }}</div>
|
||||
<div class="space"></div>
|
||||
{{ alertmessage | safe }}
|
||||
<br>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet" type="text/c>
|
||||
<link href='https://fonts.googleapis.com/css?family=Dosis' rel='stylesheet' type='text/css'>
|
||||
<link href='https://fonts.googleapis.com/css?family=Nunito' rel='stylesheet' type='text/css'>
|
||||
|
||||
<body>
|
||||
<center>
|
||||
<div class="space"></div>
|
||||
<center>
|
||||
<div class="login">
|
||||
<h3>Login</h3>
|
||||
<form action="/login" method="post">
|
||||
<input type="text" name="username" placeholder="Username" required>
|
||||
<input type="password" name="password" placeholder="Password" required>
|
||||
<button name="Login" type="submit"><span class="fas fa-user" onclick="loading();"></span></button>
|
||||
</form>
|
||||
</div>
|
||||
</center>
|
||||
|
||||
{% include 'foot.html' %}
|
||||
21
web/templates/logs.html
Normal file
21
web/templates/logs.html
Normal file
@@ -0,0 +1,21 @@
|
||||
{% include 'base.html' %}
|
||||
{% block main %}
|
||||
<div class="qard">
|
||||
<h3>Logs</h3>
|
||||
|
||||
<pre id="output" style="text-align:left"></pre>
|
||||
<script>
|
||||
var output = document.getElementById('output');
|
||||
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.open('GET', '{{ url_for('stream') }}');
|
||||
xhr.send();
|
||||
|
||||
setInterval(function() {
|
||||
output.textContent = xhr.responseText;
|
||||
}, 1000);
|
||||
</script>
|
||||
|
||||
|
||||
{% endblock %}
|
||||
{% include 'foot.html' %}
|
||||
117
web/templates/monit.html
Normal file
117
web/templates/monit.html
Normal file
@@ -0,0 +1,117 @@
|
||||
{% include 'base.html' %}
|
||||
{% block main %}
|
||||
<div class="qard">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Global Monitoring
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<table class="table table-responsive table-condensed align-middle">
|
||||
<tr><th><span class="fas fa-microchip"></span></th><th><span class="fas fa-memory"></span></th></tr>
|
||||
<tr><td>
|
||||
<div style="width:240px;height:240px;margin:auto;">
|
||||
<canvas id="cpuChart" width="50" height="50"></canvas>
|
||||
</div>
|
||||
</td><td>
|
||||
<div style="width:240px;height:240px;margin:auto;">
|
||||
<canvas id="ramChart" width="50" height="50"></canvas>
|
||||
</div>
|
||||
</td></tr><tr><td>
|
||||
{{ global_cpu | safe}}
|
||||
</td><td>
|
||||
{{ global_memory | safe}}
|
||||
</td></tr></table>
|
||||
</div>
|
||||
</div></div>
|
||||
|
||||
|
||||
<div class="qard">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Containers
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
||||
{{ lxc_monit | safe}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="qard">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Virtual Servers
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
||||
{{ vm_monit | safe}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.bundle.min.js"></script> -->
|
||||
<script src="{{url_for('static', filename = 'Chart.bundle.min.js')}}" ></script>
|
||||
<script>
|
||||
var datacpu = {
|
||||
labels: [
|
||||
"Use ({{ cpu_percent_used | safe}}%)",
|
||||
"Free"
|
||||
],
|
||||
datasets: [
|
||||
{
|
||||
data: [{{ cpu_percent_used | safe}}, {{ cpu_percent_free | safe}}],
|
||||
backgroundColor: [
|
||||
"#008000",
|
||||
"#C0C0C0"
|
||||
],
|
||||
hoverBackgroundColor: [
|
||||
"#008000",
|
||||
"#C0C0C0"
|
||||
]
|
||||
}]
|
||||
};
|
||||
|
||||
var ctx = document.getElementById("cpuChart");
|
||||
|
||||
var myDoughnutChart = new Chart(ctx, {
|
||||
type: 'doughnut',
|
||||
data: datacpu,
|
||||
options: {
|
||||
rotation: 1 * Math.PI,
|
||||
circumference: 1 * Math.PI
|
||||
}
|
||||
});
|
||||
var dataram = {
|
||||
labels: [
|
||||
"Use ({{ mem_percent_used | safe}}%)",
|
||||
"Free"
|
||||
],
|
||||
datasets: [
|
||||
{
|
||||
data: [{{ mem_percent_used | safe}}, {{ mem_percent_free | safe}}],
|
||||
backgroundColor: [
|
||||
"#008000",
|
||||
"#C0C0C0"
|
||||
],
|
||||
hoverBackgroundColor: [
|
||||
"#008000",
|
||||
"#C0C0C0"
|
||||
]
|
||||
}]
|
||||
};
|
||||
|
||||
var ctx2 = document.getElementById("ramChart");
|
||||
|
||||
// And for a doughnut chart
|
||||
var myDoughnutChart2 = new Chart(ctx2, {
|
||||
type: 'doughnut',
|
||||
data: dataram,
|
||||
options: {
|
||||
rotation: 1 * Math.PI,
|
||||
circumference: 1 * Math.PI
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
{% endblock %}
|
||||
{% include 'foot.html' %}
|
||||
21
web/templates/pool.html
Normal file
21
web/templates/pool.html
Normal file
@@ -0,0 +1,21 @@
|
||||
{% include 'base.html' %}
|
||||
{% block main %}
|
||||
<div class="qard">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Pool
|
||||
</div>
|
||||
<div class="card-body">
|
||||
{{ pool_det | safe}}
|
||||
</div></div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Volumes
|
||||
</div>
|
||||
<div class="card-body">
|
||||
{{ volumes_det | safe}}
|
||||
</div>
|
||||
</div></div>
|
||||
</body>
|
||||
{% endblock %}
|
||||
{% include 'foot.html' %}
|
||||
21
web/templates/pool.html.pygal
Normal file
21
web/templates/pool.html.pygal
Normal file
@@ -0,0 +1,21 @@
|
||||
{% include 'base.html' %}
|
||||
{% block main %}
|
||||
<div class="qard">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Pool
|
||||
</div>
|
||||
<div class="card-body">
|
||||
{{ pool_det | safe}}
|
||||
</div></div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Volumes
|
||||
</div>
|
||||
<div class="card-body">
|
||||
{{ volumes_det | safe}}
|
||||
</div>
|
||||
</div></div>
|
||||
</body>
|
||||
{% endblock %}
|
||||
{% include 'foot.html' %}
|
||||
11
web/templates/state.html
Normal file
11
web/templates/state.html
Normal file
@@ -0,0 +1,11 @@
|
||||
{% include 'base.html' %}
|
||||
{% block main %}
|
||||
<div class="qard">
|
||||
{{ state_all | safe }}
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block second %}
|
||||
{% endblock %}
|
||||
|
||||
{% include 'foot.html' %}
|
||||
Reference in New Issue
Block a user