mirror/webgui
1
0
Fork 0
mirror of https://github.com/unraid/webgui.git synced 2026-01-13 21:20:01 -06:00
Code Issues Packages Projects Releases Wiki Activity

Make sorting of Docker and VM list draggable

Browse Source
This commit is contained in:
bergware
2018-05-01 22:28:14 +02:00
parent 69b4c6a494
commit d27883494e
4 changed files with 48 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
plugins/dynamix.docker.manager/DockerContainers.page
View File

@@ -17,8 +17,8 @@ Markdown="false"
* all copies or substantial portions of the Software.
*/
?>
<link type="text/css" rel="stylesheet" href="/webGui/styles/jquery.ui.css">
<link type="text/css" rel="stylesheet" href="/webGui/styles/jquery.switchbutton.css">
<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>
.basic{display:block}
.advanced{display:none;white-space:nowrap}
@@ -37,14 +37,15 @@ img.stopped{opacity:0.3}
.switch-button-label.off{color:inherit}
th.five{width:5%}
th.eight{width:8%}
tbody > tr.sortable:hover{cursor:move}
</style>
<div id="dialog-confirm" style="display:none;" title="Dialog Title"></div>
<div id="iframe-popup" style="display:none;-webkit-overflow-scrolling:touch;"></div>
<span class="status" style="margin-top:-44px"><span><input type="checkbox" class="advancedview"></span></span>
<div class="spinner fixed"></div>
<table class="tablesorter shift" id="docker_containers">
<thead><tr><th></th><th>Application</th><th>Version</th><th>Network</th><th>Port Mappings <small>(App to Host)</small></th><th>Volume Mappings <small>(App to Host)</small></th><th class="eight">Autostart</th><th class="five">Log</th><th class="five" style="text-align:right;padding-right:24px"><a href="#" style="cursor:hand" onclick="resetSorting()" title="Reset sorting"><i class="fa fa-sort"></i></a></th></tr></thead>
<tbody id="docker_list"><tr><td colspan='8'><div class="spinner"></div></td></tr></tbody>
<table id="docker_containers" class="tablesorter 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>Application</th><th>Version</th><th>Network</th><th>Port Mappings <small>(App to Host)</small></th><th>Volume Mappings <small>(App to Host)</small></th><th class="eight">Autostart</th><th class="five">Log</th></tr></thead>
<tbody id="docker_list"><tr><td colspan='7'><div class="spinner"></div></td></tr></tbody>
</table>
<input type="button" onclick="addContainer()" value="Add Container" style="display:none">
<input type="button" onclick="startAll()" value="Start all Containers" style="display:none">
@@ -81,11 +82,22 @@ function listview() {
$('.docker_readmore').readmore({maxHeight:32,moreLink:"<a href='#' style='text-align:center'><i class='fa fa-chevron-down'></i></a>",lessLink:"<a href='#' style='text-align:center'><i class='fa fa-chevron-up'></i></a>"});
}
}
var sortableHelper = function(e,i){
i.children().each(function(){
$(this).width($(this).width());
});
return i;
};
function loadlist(update) {
$.get('/plugins/dynamix.docker.manager/include/DockerContainers.php',function(d) {
var data = d.split(/\0/);
$('div.spinner').hide('slow');
$('#docker_list').html(data[0]);
$('#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())+';';});
$.post('/plugins/dynamix.docker.manager/include/UserPrefs.php',{names:names,index:index});
}});
$('head').append('<script>'+data[1]+'<\/script>');
<?if ($display['resize']):?>
resize();
@@ -100,24 +112,6 @@ function loadlist(update) {
context.init({preventDoubleContext:false});
$('input[type=button]').prop('disabled',false).show('slow');
if (!update) $('input#updateAll').hide();
$('i.up,i.down').click(function() {
var row = $(this).parents('tr:first');
var color1 = row.css('background-color');
if ($(this).is('.up')) {
var color2 = row.prev().css('background-color');
row.prev().css('background-color',color1);
row.css('background-color',color2);
row.insertBefore(row.prev());
} else {
var color2 = row.next().css('background-color');
row.next().css('background-color',color1);
row.css('background-color',color2);
row.insertAfter(row.next());
}
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())+';';});
$.post('/plugins/dynamix.docker.manager/include/UserPrefs.php',{names:names,index:index});
});
});
}
$(function() {

7
plugins/dynamix.docker.manager/include/DockerContainers.php
View File

@@ -68,7 +68,7 @@ foreach ($containers as $ct) {
list($host_path,$container_path,$access_mode) = explode(':',$mount);
$paths[] = sprintf('%s<i class="fa fa-%s" style="margin:0 6px"></i>%s', htmlspecialchars($container_path), $access_mode=='ro'?'long-arrow-left':'arrows-h', htmlspecialchars($host_path));
}
echo "<tr><td style='width:48px;padding:4px'>";
echo "<tr class='sortable'><td style='width:48px;padding:4px'>";
echo "<div id='$id' style='display:block; cursor:pointer'><div style='position:relative;width:48px;height:48px;margin:0px auto'>";
echo "<img src='".htmlspecialchars($icon)."' class='$status' style='position:absolute;top:0;bottom:0;left:0;right:0;width:48px;height:48px'>";
echo "<i class='fa iconstatus fa-$shape $status' title='$status'></i></div></div>";
@@ -102,8 +102,7 @@ foreach ($containers as $ct) {
echo "<td style='word-break:break-all'><span class='docker_readmore'>".implode('<br>',$paths)."</span></td>";
echo "<td><input type='checkbox' class='autostart' container='".htmlspecialchars($name)."'".($info['autostart'] ? ' checked':'')."></td>";
echo "<td><a class='log' onclick=\"containerLogs('".addslashes(htmlspecialchars($name))."','$id',false,false)\"><img class='basic' src='/plugins/dynamix/icons/log.png'><div class='advanced'>";
echo htmlspecialchars(str_replace('Up','Uptime',$ct['Status']))."</div><div class='advanced' style='margin-top:4px'>Created ".htmlspecialchars($ct['Created'])."</div></a></td>";
echo "<td style='text-align:right;padding-right:12px'><a href='#' title='Move row up'><i class='fa fa-arrow-up up'></i></a>&nbsp;<a href='#' title='Move row down'><i class='fa fa-arrow-down down'></i></a></td></tr>";
echo htmlspecialchars(str_replace('Up','Uptime',$ct['Status']))."</div><div class='advanced' style='margin-top:4px'>Created ".htmlspecialchars($ct['Created'])."</div></a></td></tr>";
}
foreach ($images as $image) {
if (count($image['usedBy'])) continue;
@@ -116,7 +115,7 @@ foreach ($images as $image) {
echo "</div></div></td>";
echo "<td><i>(orphan image)</i><div style='width:160px;'>Image ID: $id</div>";
echo "<div style='width:160px'>".implode('<br>',array_map('htmlspecialchars',$image['Tags']))."</div></td>";
echo "<td colspan=4'>&nbsp;</td>";
echo "<td colspan=3'>&nbsp;</td>";
echo "<td><div class='advanced' style='width:124px'>Created ".htmlspecialchars($image['Created'])."</div></td></tr>";
}
echo "\0".implode($menu).implode($docker);

45
plugins/dynamix.vm.manager/VMMachines.page
View File

@@ -95,6 +95,7 @@ if (empty($vms)) {
}
?>
<link type="text/css" rel="stylesheet" href="<?autov('/plugins/dynamix.vm.manager/styles/dynamix.vm.manager.css')?>">
<link type="text/css" rel="stylesheet" href="<?autov('/webGui/styles/jquery.ui.css')?>">
<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">
@@ -109,11 +110,12 @@ div.Panel{float:unset;margin:4px;height:inherit;border:none;}
div.Panel:hover{background-color:unset;}
div.PanelText{display:none;}
th.five{width:5%}
tbody > tr.sortable:hover{cursor:move}
</style>
<div class="spinner fixed"></div>
<table id="kvm_table" class="tablesorter shift">
<thead><tr><th><i class="fa fa-th-list"></i></th><th>Name</th><th>Description</th><th>CPUs</th><th>Memory</th><th>vDisks</th><th>Graphics</th><th class="five">Autostart</th><th class="five" style="text-align:right;padding-right:24px"><a href="#" style="cursor:hand" onclick="resetSorting()" title="Reset sorting"><i class="fa fa-sort"></i></a></th></tr></thead>
<tbody id="kvm_list"><tr><td colspan='9'><div class="spinner"></div></td></tr></tbody>
<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>
<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">
<input type="button" onclick="startAll()" value="Start all VMs" style="display:none">
@@ -141,11 +143,27 @@ function resetSorting() {
$('input[type=button]').prop('disabled',true);
$.post('/plugins/dynamix.vm.manager/include/UserPrefs.php',{reset:true},function(){loadlist();});
}
var sortableHelper = function(e,i){
i.children().each(function(){
$(this).width($(this).width());
});
return i;
};
function loadlist() {
$.get('/plugins/dynamix.vm.manager/include/VMMachines.php',{show:$.cookie('vmshow')},function(d) {
var data = d.split(/\0/);
$('div.spinner').hide('slow');
$('#kvm_list').html(data[0]);
$('#kvm_list').html(data[0]).sortable({helper:sortableHelper,items:'tr.sortable',opacity:0.4,update:function(e,i){
$('#kvm_list').find('tr.sortable').each(function(){
var parent = $(this).attr('parent-id');
var child = $('tr[child-id="'+parent+'"]');
child.detach().insertAfter($(this));
});
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())+';';});
$.post('/plugins/dynamix.vm.manager/include/UserPrefs.php',{names:names,index:index});
}});
$('head').append('<script>'+data[1]+'<\/script>');
<?if ($display['resize']):?>
resize();
@@ -175,27 +193,6 @@ function loadlist() {
$('input[type=button]').prop('disabled',false).show('slow');
$('.text').click(showInput);
$('.input').blur(hideInput);
$('i.up,i.down').click(function() {
var row1 = $(this).parents('tr:first');
var row2 = row1.next();
var color1 = row1.css('background-color');
if ($(this).is('.up')) {
var color2 = row1.prev().prev().css('background-color');
row1.prev().prev().css('background-color',color1);
row1.css('background-color',color2);
row1.insertBefore(row1.prev().prev());
row2.insertBefore(row2.prev().prev());
} else {
var color2 = row1.next().next().css('background-color');
row1.next().next().css('background-color',color1);
row1.css('background-color',color2);
row2.insertAfter(row2.next().next());
row1.insertAfter(row1.next().next());
}
var names = ''; var index = '';
row1.parent().children().find('td.vm-name').each(function(){names+=$(this).text()+';';index+=$(this).parent().parent().children().index($(this).parent())+';';});
$.post('/plugins/dynamix.vm.manager/include/UserPrefs.php',{names:names,index:index});
});
});
}
$(function() {

14
plugins/dynamix.vm.manager/include/VMMachines.php
View File

@@ -81,21 +81,21 @@ 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'});";
/* VM information */
echo "<tr style='background-color:".bcolor($i)."'>";
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 "<td class='vm-name'><a href='#' onclick='return toggle_id(\"name-$i\")' title='click for more VM info'>$vm</a></td>";
echo "<td>$desc</td>";
echo "<td><a class='vcpu-$uuid' style='cursor:pointer'>$vcpu</a></td>";
echo "<td>$mem</td>";
echo "<td title='$diskdesc'>$disks</td>";
echo "<td>$graphics</td>";
echo "<td><input class='autostart' type='checkbox' name='auto_{$vm}' title='Toggle VM auostart' uuid='$uuid' $auto></td>";
echo "<td style='text-align:right;padding-right:12px'><a href='#' title='Move row up'><i class='fa fa-arrow-up up'></i></a>&nbsp;<a href='#' title='Move row down'><i class='fa fa-arrow-down down'></i></a></td></tr>";
echo "<td><input class='autostart' type='checkbox' name='auto_{$vm}' title='Toggle VM auostart' uuid='$uuid' $auto></td></tr>";
/* Disk device information */
echo "<tr id='name{$i}".(in_array('name'.$i++,$show) ? "'>" : "' style='display:none'>");
echo "<td colspan='7' style='overflow:hidden'>";
echo "<tr child-id='$i' id='name-$i".(in_array('name-'.$i++,$show) ? "'>" : "' style='display:none'>");
echo "<td colspan='8' 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 &nbsp;</b></th><th>Bus</th><th>Capacity</th><th>Allocation</th></tr></thead>";
echo "<tbody id='domdisk_list'>";
@@ -124,7 +124,6 @@ foreach ($vms as $vm) {
}
echo "<td>$allocation</td></tr>";
}
/* end Display VM disks */
/* Display VM cdroms */
foreach ($lv->get_cdrom_stats($res) as $arrCD) {
@@ -136,7 +135,6 @@ foreach ($vms as $vm) {
echo "<tr><td>$disk</td><td>$bus</td><td>$capacity</td><td>$allocation</td></tr>";
}
/* end Display VM cdroms */
echo "</tbody></table>";
echo "</td></tr>";
}