mirror of
https://github.com/unraid/webgui.git
synced 2026-03-10 04:49:14 -05:00
Docker and VM list updates
This commit is contained in:
bergware
@@ -26,23 +26,16 @@ $cpus = cpu_list();
|
||||
<link type="text/css" rel="stylesheet" href="<?autov('/webGui/styles/jquery.ui.css')?>">
|
||||
<link type="text/css" rel="stylesheet" href="<?autov('/webGui/styles/jquery.switchbutton.css')?>">
|
||||
<style>
|
||||
table#docker_containers{text-align:left}
|
||||
.basic{display:block}
|
||||
.advanced{display:none;white-space:nowrap}
|
||||
.log{cursor:zoom-in}
|
||||
.exec{cursor:pointer}
|
||||
tbody>tr.sortable:hover{cursor:move}
|
||||
table#docker_containers{text-align:left}
|
||||
th.five{width:5%}
|
||||
th.nine{width:9%}
|
||||
th.load{width:100px}
|
||||
tbody>tr.sortable:hover{cursor:move}
|
||||
input.wait{width:24px;margin:0 4px;padding:0 5px;border:none;box-shadow:none;background-color:transparent}
|
||||
img.img,i.img{width:32px;height:32px;margin-right:10px}
|
||||
span.outer{float:left;margin-bottom:20px;margin-right:20px;cursor:pointer}
|
||||
span.outer.started>img,span.outer.started>i.img{opacity:1.0}
|
||||
span.outer.stopped>img,span.outer.stopped>i.img{opacity:0.3}
|
||||
span.outer.paused>img,span.outer.paused>i.img{opacity:0.6}
|
||||
span.inner{display:inline-block;vertical-align:top}
|
||||
span.state{font-size:1.1rem;margin-left:7px}
|
||||
</style>
|
||||
<div id="iframe-popup" style="display:none;-webkit-overflow-scrolling:touch;"></div>
|
||||
<span class="status" style="margin-top:<?=$width?>px"><span><input type="checkbox" class="advancedview"></span></span>
|
||||
@@ -112,7 +105,7 @@ function loadlist() {
|
||||
$('#docker_list').html(data[0]).sortable({helper:sortableHelper,items:'tr.sortable',opacity:0.4,update:function(e,i){
|
||||
var row = $('#docker_list').find('tr:first');
|
||||
var names = ''; var index = '';
|
||||
row.parent().children().find('td.ct-name').each(function(){names+=$(this).text().replace(/Container ID.*$/,'')+';';index+=$(this).parent().parent().children().index($(this).parent())+';';});
|
||||
row.parent().children().find('td.ct-name').each(function(){names+=$(this).find('.appname').text()+';';index+=$(this).parent().parent().children().index($(this).parent())+';';});
|
||||
$.post('/plugins/dynamix.docker.manager/include/UserPrefs.php',{names:names,index:index});
|
||||
}});
|
||||
$('head').append('<script>'+data[1]+'<\/script>');
|
||||
|
||||
@@ -62,6 +62,7 @@ foreach ($containers as $ct) {
|
||||
$shape = $running ? ($paused ? 'pause' : 'play') : 'square';
|
||||
$status = $running ? ($paused ? 'paused' : 'started') : 'stopped';
|
||||
$color = $status=='started' ? 'green-text' : ($status=='paused' ? 'orange-text' : 'red-text');
|
||||
$update = $updateStatus=='false' ? 'blue-text' : '';
|
||||
$icon = $info['icon'] ?: '/plugins/dynamix.docker.manager/images/question.png';
|
||||
$image = substr($icon,-4)=='.png' ? "<img src='$icon' class='img'>" : (substr($icon,0,5)=='icon-' ? "<i class='$icon img'></i>" : "<i class='fa fa-$icon img'></i>");
|
||||
$wait = var_split($autostart[array_search($name,$names)],1);
|
||||
@@ -83,7 +84,7 @@ foreach ($containers as $ct) {
|
||||
} else {
|
||||
$appname = htmlspecialchars($name);
|
||||
}
|
||||
echo "<span id='$id' class='outer apps $status'>$image<span class='inner'><span class='$update'>$appname</span><br><i id='load-$id' class='fa fa-$shape $status $color'></i><span class='state'>$status</span></span></span>";
|
||||
echo "<span id='$id' class='outer'>$image<span class='inner'><span class='appname $update'>$appname</span><br><i id='load-$id' class='fa fa-$shape $status $color'></i><span class='state'>$status</span></span></span>";
|
||||
echo "<span class='advanced'>Container ID: $id<br>";
|
||||
if ($ct['BaseImage']) echo "<i class='fa fa-cubes' style='margin-right:5px'></i>".htmlspecialchars(${ct['BaseImage']})."<br>";
|
||||
echo "By: ";
|
||||
|
||||
@@ -98,21 +98,18 @@ if (empty($vms)) {
|
||||
<link type="text/css" rel="stylesheet" href="<?autov('/webGui/styles/jquery.filetree.css')?>">
|
||||
<link type="text/css" rel="stylesheet" href="<?autov('/webGui/styles/jquery.switchbutton.css')?>">
|
||||
<style type="text/css">
|
||||
body{-webkit-overflow-scrolling:touch;}
|
||||
.fileTree{width:300px;max-height:150px;overflow-y:scroll;position:absolute;z-index:100;display:none;}
|
||||
.fileTree{width:300px;max-height:150px;overflow-y:scroll;position:absolute;z-index:100;display:none}
|
||||
div.four{font-size:1.1rem;width:300px}
|
||||
div.four label{float:left;display:table-cell;width:25%}
|
||||
div.four label:nth-child(4n+4){float:none;clear:both}
|
||||
div.four label.cpu1{width:32%}
|
||||
div.four label.cpu2{width:26%}
|
||||
div.Panel{float:unset;margin:4px;height:inherit;border:none;}
|
||||
div.Panel:hover{background-color:unset;}
|
||||
div.PanelText{display:none;}
|
||||
th.five{width:6%}
|
||||
tbody > tr.sortable:hover{cursor:move}
|
||||
th.six{width:6%}
|
||||
tbody>tr.sortable:hover{cursor:move}
|
||||
table.domdisk tbody tr:nth-child(even){background-color:transparent}
|
||||
</style>
|
||||
<table id="kvm_table" class="tablesorter four shift">
|
||||
<thead><tr><th><a href="#" style="cursor:hand;margin-left:12px" onclick="resetSorting()" title="Reset sorting"><i class="fa fa-th-list"></i></a></th><th>Name</th><th>Description</th><th>CPUs</th><th>Memory</th><th>vDisks</th><th>Graphics</th><th class="five">Autostart</th></tr></thead>
|
||||
<thead><tr><th><a href="#" style="cursor:hand;margin-left:12px" onclick="resetSorting()" title="Reset sorting"><i class="fa fa-th-list"></i></a></th><th>Description</th><th>CPUs</th><th>Memory</th><th>vDisks</th><th>Graphics</th><th class="six">Autostart</th></tr></thead>
|
||||
<tbody id="kvm_list"><tr><td colspan='8'><div class="spinner"></div></td></tr></tbody>
|
||||
</table>
|
||||
<input type="button" onclick="addVM()" id="btnAddVM" value="Add VM" style="display:none">
|
||||
@@ -158,7 +155,7 @@ function loadlist() {
|
||||
});
|
||||
var row = $('#kvm_list').find('tr:first');
|
||||
var names = ''; var index = '';
|
||||
row.parent().children().find('td.vm-name').each(function(){names+=$(this).text()+';';index+=$(this).parent().parent().children().index($(this).parent())+';';});
|
||||
row.parent().children().find('td.vm-name').each(function(){names+=$(this).find('a').text()+';';index+=$(this).parent().parent().children().index($(this).parent())+';';});
|
||||
$.post('/plugins/dynamix.vm.manager/include/UserPrefs.php',{names:names,index:index});
|
||||
}});
|
||||
$('head').append('<script>'+data[1]+'<\/script>');
|
||||
|
||||
@@ -42,7 +42,8 @@ foreach ($vms as $vm) {
|
||||
$id = $lv->domain_get_id($res) ?: '-';
|
||||
$is_autostart = $lv->domain_get_autostart($res);
|
||||
$state = $lv->domain_state_translate($dom['state']);
|
||||
$vmicon = $lv->domain_get_icon_url($res);
|
||||
$icon = $lv->domain_get_icon_url($res);
|
||||
$image = substr($icon,-4)=='.png' ? "<img src='$icon' class='img'>" : (substr($icon,0,5)=='icon-' ? "<i class='$icon img'></i>" : "<i class='fa fa-$icon img'></i>");
|
||||
$arrConfig = domain_to_config($uuid);
|
||||
if ($state == 'running') {
|
||||
$mem = $dom['memory'] / 1024;
|
||||
@@ -81,11 +82,28 @@ foreach ($vms as $vm) {
|
||||
unset($dom);
|
||||
$menu[] = sprintf("addVMContext('%s','%s','%s','%s','%s','%s');", addslashes($vm),addslashes($uuid),addslashes($template),$state,addslashes($vnc),addslashes($log));
|
||||
$kvm[] = "kvm.push({id:'$uuid',state:'$state'});";
|
||||
switch ($state) {
|
||||
case 'running':
|
||||
$shape = 'play';
|
||||
$status = 'started';
|
||||
$color = 'green-text';
|
||||
break;
|
||||
case 'paused':
|
||||
case 'pmsuspended':
|
||||
$shape = 'pause';
|
||||
$status = 'paused';
|
||||
$color = 'orange-text';
|
||||
break;
|
||||
default:
|
||||
$shape = 'square';
|
||||
$status = 'stopped';
|
||||
$color = 'red-text';
|
||||
break;
|
||||
}
|
||||
|
||||
/* VM information */
|
||||
echo "<tr parent-id='$i' class='sortable'>";
|
||||
echo "<td style='width:48px;padding:4px'>".renderVMContentIcon($uuid, $vm, $vmicon, $state)."</td>";
|
||||
echo "<td class='vm-name'><a href='#' onclick='return toggle_id(\"name-$i\")' title='click for more VM info'>$vm</a></td>";
|
||||
echo "<tr parent-id='$i' class='sortable'><td class='vm-name' style='width:220px;padding:8px'>";
|
||||
echo "<span class='outer'><span id='vm-$uuid'>$image</span><span class='inner'><a href='#' onclick='return toggle_id(\"name-$i\")' title='click for more VM info'>$vm</a><br><i class='fa fa-$shape $status $color'></i><span class='state'>$status</span></span></span></td>";
|
||||
echo "<td>$desc</td>";
|
||||
echo "<td><a class='vcpu-$uuid' style='cursor:pointer'>$vcpu</a></td>";
|
||||
echo "<td>$mem</td>";
|
||||
@@ -95,9 +113,9 @@ foreach ($vms as $vm) {
|
||||
|
||||
/* Disk device information */
|
||||
echo "<tr child-id='$i' id='name-$i".(in_array('name-'.$i++,$show) ? "'>" : "' style='display:none'>");
|
||||
echo "<td colspan='8' style='overflow:hidden'>";
|
||||
echo "<td colspan='7' style='overflow:hidden'>";
|
||||
echo "<table class='tablesorter domdisk' id='domdisk_table'>";
|
||||
echo "<thead><tr><th><i class='fa fa-hdd-o'></i><b> Disk devices </b></th><th>Bus</th><th>Capacity</th><th>Allocation</th></tr></thead>";
|
||||
echo "<thead><tr><th><i class='fa fa-hdd-o'></i> <b>Disk devices</b></th><th>Bus</th><th>Capacity</th><th>Allocation</th></tr></thead>";
|
||||
echo "<tbody id='domdisk_list'>";
|
||||
|
||||
/* Display VM disks */
|
||||
|
||||
@@ -487,20 +487,6 @@
|
||||
$maxmem = number_format(($arrHostInfo['memory'] / 1048576), 1, '.', ' ');
|
||||
}
|
||||
|
||||
//set color on even rows for white or black theme
|
||||
function bcolor($row) {
|
||||
global $display;
|
||||
|
||||
if ($display['theme']=='gray')
|
||||
return "transparent";
|
||||
elseif ($display['theme']=='azure')
|
||||
return "transparent";
|
||||
elseif ($display['theme']=='black')
|
||||
return ($row % 2 == 0) ? "transparent":"#212121";
|
||||
else
|
||||
return ($row % 2 == 0) ? "transparent":"#ededed";
|
||||
}
|
||||
|
||||
function mk_dropdown_options($arrOptions, $strSelected) {
|
||||
foreach ($arrOptions as $key => $label) {
|
||||
echo mk_option($strSelected, $key, $label);
|
||||
@@ -519,30 +505,6 @@
|
||||
return $abbreviation;
|
||||
}
|
||||
|
||||
function renderVMContentIcon($uuid, $name, $icon, $state, $text=false) {
|
||||
switch ($state) {
|
||||
case 'running':
|
||||
$shape = 'play';
|
||||
$status = 'started';
|
||||
break;
|
||||
case 'paused': //no break on purpose
|
||||
case 'pmsuspended':
|
||||
$shape = 'pause';
|
||||
$status = 'paused';
|
||||
break;
|
||||
default:
|
||||
$shape = 'square';
|
||||
$status = 'stopped';
|
||||
break;
|
||||
}
|
||||
|
||||
return "<div id=\"vm-".htmlspecialchars($uuid)."\" class=\"Panel $status\" style=\"cursor:pointer\">
|
||||
<div style=\"display:block\"><div style=\"position:relative; width:48px; height:48px; margin:0px auto;\">
|
||||
<img src=\"$icon\" class=\"$status\" style=\"position:absolute; z-index:1; top:0; bottom:0; left:0; right:0; width:48px; height:48px;\"/>
|
||||
<i class=\"fa iconstatus fa-$shape $status\" title=\"$status\"></i>
|
||||
</div></div>".($text?"<div class=\"PanelText\"><span class=\"PanelText $status\">$name</span></div>":"")."</div>";
|
||||
}
|
||||
|
||||
function sanitizeVendor($strVendor) {
|
||||
// Specialized vendor name cleanup
|
||||
// e.g.: Advanced Micro Devices, Inc. [AMD/ATI] --> Advanced Micro Devices, Inc.
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
function ajaxVMDispatch(params, spin){
|
||||
if (spin) $('#vm-'+params['uuid']).find('i').removeClass('fa-play fa-square fa-pause').addClass('fa-refresh fa-spin');
|
||||
if (spin) $('#vm-'+params['uuid']).parent().find('i').removeClass('fa-play fa-square fa-pause').addClass('fa-refresh fa-spin');
|
||||
$.post("/plugins/dynamix.vm.manager/include/VMajax.php", params, function(data) {
|
||||
if (data.error) {
|
||||
swal({
|
||||
|
||||
@@ -256,10 +256,17 @@ span.three{margin-left:-23px}
|
||||
span.tub{margin-right:8px;font-size:2.4rem;cursor:pointer}
|
||||
span.score{font-size:1.1rem;color:#ffffff;position:absolute}
|
||||
span#dropbox{background:none;line-height:6rem;margin-right:20px}
|
||||
span.outer{float:left;margin-bottom:20px;margin-right:20px;cursor:pointer}
|
||||
span.outer.started>img,span.outer.started>i.img{opacity:1.0}
|
||||
span.outer.stopped>img,span.outer.stopped>i.img{opacity:0.3}
|
||||
span.outer.paused>img,span.outer.paused>i.img{opacity:0.6}
|
||||
span.inner{display:inline-block;vertical-align:top}
|
||||
span.state{font-size:1.1rem;margin-left:7px}
|
||||
i.padlock{margin-right:8px;cursor:default;vertical-align:middle}
|
||||
i.nolock{visibility:hidden;margin-right:8px;vertical-align:middle}
|
||||
i.lock{margin-left:8px;cursor:default;vertical-align:middle}
|
||||
i.orb{font-size:1.1rem;margin:0 8px 0 3px}
|
||||
img.img,i.img{width:32px;height:32px;margin-right:10px}
|
||||
img.icon{margin:-3px 4px 0 0}
|
||||
img.list{width:auto;max-width:48px;height:48px}
|
||||
i.list{font-size:4rem;color:#606e7f}
|
||||
|
||||
@@ -241,10 +241,17 @@ span.two{margin-left:-20px}
|
||||
span.three{margin-left:-23px}
|
||||
span.tub{margin-right:8px;font-size:2.4rem;cursor:pointer}
|
||||
span.score{font-size:1.2rem;color:#1c1b1b;position:absolute}
|
||||
span.outer{float:left;margin-bottom:20px;margin-right:20px;cursor:pointer}
|
||||
span.outer.started>img,span.outer.started>i.img{opacity:1.0}
|
||||
span.outer.stopped>img,span.outer.stopped>i.img{opacity:0.3}
|
||||
span.outer.paused>img,span.outer.paused>i.img{opacity:0.6}
|
||||
span.inner{display:inline-block;vertical-align:top}
|
||||
span.state{font-size:1.1rem;margin-left:7px}
|
||||
i.padlock{margin-right:8px;cursor:default;vertical-align:middle}
|
||||
i.nolock{visibility:hidden;margin-right:8px;vertical-align:middle}
|
||||
i.lock{margin-left:8px;cursor:default;vertical-align:middle}
|
||||
i.orb{font-size:1.1rem;margin:0 8px 0 3px}
|
||||
img.img,i.img{width:32px;height:32px;margin-right:10px}
|
||||
img.icon{margin:-3px 4px 0 0}
|
||||
img.list{width:auto;max-width:48px;height:48px}
|
||||
i.list{font-size:4rem;color:#f2f2f2}
|
||||
|
||||
@@ -256,10 +256,17 @@ span.three{margin-left:-23px}
|
||||
span.tub{margin-right:8px;font-size:2.4rem;cursor:pointer}
|
||||
span.score{font-size:1.1rem;color:#ffffff;position:absolute}
|
||||
span#dropbox{background:none;line-height:6rem;margin-right:20px}
|
||||
span.outer{float:left;margin-bottom:20px;margin-right:20px;cursor:pointer}
|
||||
span.outer.started>img,span.outer.started>i.img{opacity:1.0}
|
||||
span.outer.stopped>img,span.outer.stopped>i.img{opacity:0.3}
|
||||
span.outer.paused>img,span.outer.paused>i.img{opacity:0.6}
|
||||
span.inner{display:inline-block;vertical-align:top}
|
||||
span.state{font-size:1.1rem;margin-left:7px}
|
||||
i.padlock{margin-right:8px;cursor:default;vertical-align:middle}
|
||||
i.nolock{visibility:hidden;margin-right:8px;vertical-align:middle}
|
||||
i.lock{margin-left:8px;cursor:default;vertical-align:middle}
|
||||
i.orb{font-size:1.1rem;margin:0 8px 0 3px}
|
||||
img.img,i.img{width:32px;height:32px;margin-right:10px}
|
||||
img.icon{margin:-3px 4px 0 0}
|
||||
img.list{width:auto;max-width:48px;height:48px}
|
||||
i.list{font-size:4rem;color:#606e7f}
|
||||
|
||||
@@ -241,10 +241,17 @@ span.two{margin-left:-20px}
|
||||
span.three{margin-left:-23px}
|
||||
span.tub{margin-right:8px;font-size:2.4rem;cursor:pointer}
|
||||
span.score{font-size:1.2rem;color:#1c1b1b;position:absolute}
|
||||
span.outer{float:left;margin-bottom:20px;margin-right:20px;cursor:pointer}
|
||||
span.outer.started>img,span.outer.started>i.img{opacity:1.0}
|
||||
span.outer.stopped>img,span.outer.stopped>i.img{opacity:0.3}
|
||||
span.outer.paused>img,span.outer.paused>i.img{opacity:0.6}
|
||||
span.inner{display:inline-block;vertical-align:top}
|
||||
span.state{font-size:1.1rem;margin-left:7px}
|
||||
i.padlock{margin-right:8px;cursor:default;vertical-align:middle}
|
||||
i.nolock{visibility:hidden;margin-right:8px;vertical-align:middle}
|
||||
i.lock{margin-left:8px;cursor:default;vertical-align:middle}
|
||||
i.orb{font-size:1.1rem;margin:0 8px 0 3px}
|
||||
img.img,i.img{width:32px;height:32px;margin-right:10px}
|
||||
img.icon{margin:-3px 4px 0 0}
|
||||
img.list{width:auto;max-width:48px;height:48px}
|
||||
i.list{font-size:4rem;color:#1c1b1b}
|
||||
|
||||
Reference in New Issue
Block a user