mirror/webgui
1
0
Fork 0
mirror of https://github.com/unraid/webgui.git synced 2026-04-25 20:01:38 -05:00
Code Issues Packages Projects Releases Wiki Activity

Docker containers list update

Browse Source
This commit is contained in:
bergware
2019-01-11 01:29:58 +01:00
parent 0c35364128
commit a8efed8f96
2 changed files with 26 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
plugins/dynamix.docker.manager/DockerContainers.page
+14 -14
View File
@@ -29,27 +29,25 @@ $cpus = cpu_list();
table#docker_containers{text-align:left}
.basic{display:block}
.advanced{display:none;white-space:nowrap}
body{-webkit-overflow-scrolling:touch}
img.started{opacity:1.0}
img.stopped{opacity:0.3}
img.paused{opacity:0.6}
.log{cursor:zoom-in}
.exec{cursor:pointer}
.iconstatus{position:absolute;z-index:2;bottom:-4px;right:-4px;font-size:1.4rem;text-shadow:0 0 2px #FFF}
.started{color:#009900}
.stopped{color:#EF3D47}
.paused{color:#F0DD33}
.switch-button-label.off{color:inherit}
th.five{width:5%}
th.eight{width:8%}
th.nine{width:9%}
th.load{width:100px}
tbody > tr.sortable:hover{cursor:move}
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>
<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="load advanced">CPU load</th><th class="load advanced">Memory load</th><th class="eight">Autostart</th><th class="five">Log</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>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="load advanced">CPU load</th><th class="load advanced">Memory load</th><th class="nine">Autostart</th><th class="five">Log</th></tr></thead>
<tbody id="docker_list"><tr><td class="advanced"></td><td colspan='8'><div class="spinner"></div></td><td class="advanced"></td></tr></tbody>
</table>
<input type="button" onclick="addContainer()" value="Add Container" style="display:none">
@@ -154,8 +152,10 @@ watchDocker.on('message', function(data){
var id = row.split(' ');
var w1 = Math.round(Math.min(id[1].slice(0,-1)/<?=count($cpus)*count(preg_split('/[,-]/',$cpus[0]))?>,100)*100)/100+'%';
var w2 = Math.round(Math.min(id[2].slice(0,-1),100)*100)/100+'%';
$('#cpu-'+id[0]).css('width',w1).text(w1.replace('.','<?=$display['number'][0]?>'));
$('#mem-'+id[0]).css('width',w2).text(w2.replace('.','<?=$display['number'][0]?>'));
$('.cpu-'+id[0]).text(w1.replace('.','<?=$display['number'][0]?>'));
$('.mem-'+id[0]).text(w2.replace('.','<?=$display['number'][0]?>'));
$('#cpu-'+id[0]).css('width',w1);
$('#mem-'+id[0]).css('width',w2);
}
});
$(function() {
plugins/dynamix.docker.manager/include/DockerContainers.php
+12 -13
View File
@@ -61,7 +61,9 @@ foreach ($containers as $ct) {
$docker[] = "docker.push({name:'$name',id:'$id',state:$running,pause:$paused,update:'$updateStatus'});";
$shape = $running ? ($paused ? 'pause' : 'play') : 'square';
$status = $running ? ($paused ? 'paused' : 'started') : 'stopped';
$color = $status=='started' ? 'green-text' : ($status=='paused' ? 'orange-text' : 'red-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);
$ports = [];
foreach ($ct['Ports'] as $port) {
@@ -75,19 +77,16 @@ 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 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 id='load-$id' class='fa iconstatus fa-$shape $status' title='$status'></i></div></div>";
echo "</td><td class='ct-name'>";
echo "<tr class='sortable'><td class='ct-name' style='width:220px;padding:8px'>";
if ($template) {
echo "<a class='exec' onclick=\"editContainer('".addslashes(htmlspecialchars($name))."','".addslashes(htmlspecialchars($template))."')\">".htmlspecialchars($name)."</a>";
$appname = "<a class='exec' onclick=\"editContainer('".addslashes(htmlspecialchars($name))."','".addslashes(htmlspecialchars($template))."')\">".htmlspecialchars($name)."</a>";
} else {
echo htmlspecialchars($name);
$appname = htmlspecialchars($name);
}
echo "<div class='advanced' style='width:160px'>Container ID: $id</div>";
if ($ct['BaseImage']) echo "<div class='advanced' style='width:160px;'><i class='fa fa-cubes' style='margin-right:5px'></i>".htmlspecialchars(${ct['BaseImage']})."</div>";
echo "<div class='advanced'>By: ";
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 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: ";
$registry = $info['registry'];
list($author,$version) = explode(':',$ct['Image']);
if ($registry) {
@@ -95,7 +94,7 @@ foreach ($containers as $ct) {
} else {
echo htmlspecialchars($author);
}
echo "</div></td><td class='updatecolumn'>";
echo "</span></td><td class='updatecolumn'>";
if ($updateStatus=='false') {
echo "<a class='exec' onclick=\"updateContainer('".addslashes(htmlspecialchars($name))."');\"><span style='white-space:nowrap;'><i class='fa fa-cloud-download fa-fw'></i> update ready</span></a>";
} elseif ($updateStatus=='true') {
@@ -109,8 +108,8 @@ foreach ($containers as $ct) {
echo "<td>{$ct['NetworkMode']}</td>";
echo "<td style='white-space:nowrap'><span class='docker_readmore'>".implode('<br>',$ports)."</span></td>";
echo "<td style='word-break:break-all'><span class='docker_readmore'>".implode('<br>',$paths)."</span></td>";
echo "<td class='advanced'><div class='usage-disk sys load-$id'><span id='cpu-$id' style='width:0'></span></div></td>";
echo "<td class='advanced'><div class='usage-disk sys load-$id'><span id='mem-$id' style='width:0'></span></div></td>";
echo "<td class='advanced'><span class='cpu-$id'>0%</span><div class='usage-disk mm'><span id='cpu-$id' style='width:0'></span></div></td>";
echo "<td class='advanced'><span class='mem-$id'>0%</span><div class='usage-disk mm'><span id='mem-$id' style='width:0'></span></div></td>";
echo "<td><input type='checkbox' id='$id-auto' class='autostart' container='".htmlspecialchars($name)."'".($info['autostart'] ? ' checked':'').">";
echo "<span id='$id-wait' style='float:right;display:none'>wait<input class='wait' container='".htmlspecialchars($name)."' type='number' value='$wait' placeholder='0' title='seconds'></span></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'>";