fix: better display of ip & ports to avoid beginner confusion - from suggestions by @ich777

This commit is contained in:
mtongnz
2024-07-20 12:04:30 +12:00
parent ffabb996fc
commit 54a6e3dd13
2 changed files with 11 additions and 5 deletions
@@ -31,8 +31,8 @@ $cpus = cpu_list();
<link type="text/css" rel="stylesheet" href="<?autov("/plugins/dynamix.docker.manager/styles/style-$theme.css")?>">
<table id="docker_containers" class="tablesorter shift">
<thead><tr><th><a id="resetsort" class="nohand" onclick="resetSorting()" title="_(Reset sorting)_"><i class="fa fa-th-list"></i></a>_(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 & Memory load)_</th><th class="nine">_(Autostart)_</th><th class="five">_(Uptime)_</th></tr></thead>
<tbody id="docker_list"><tr><td colspan='8'></td></tr></tbody>
<thead><tr><th><a id="resetsort" class="nohand" onclick="resetSorting()" title="_(Reset sorting)_"><i class="fa fa-th-list"></i></a>_(Application)_</th><th>_(Version)_</th><th>_(Network)_</th><th>_(IP)_</th><th>_(Port Mappings)_</th><th>_(Volume Mappings)_ <small>(_(App to Host)_)</small></th><th class="load advanced">_(CPU & Memory load)_</th><th class="nine">_(Autostart)_</th><th class="five">_(Uptime)_</th></tr></thead>
<tbody id="docker_list"><tr><td colspan='9'></td></tr></tbody>
</table>
<input type="button" onclick="addContainer()" value="_(Add Container)_" style="display:none">
<input type="button" onclick="startAll()" value="_(Start All)_" style="display:none">
@@ -88,13 +88,18 @@ foreach ($containers as $ct) {
$image = substr($icon,-4)=='.png' ? "<img src='$icon?".filemtime("$docroot{$info['icon']}")."' class='img' onerror=this.src='/plugins/dynamix.docker.manager/images/question.png';>" : (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);
$networks = [];
$network_ips = [];
foreach($ct['Networks'] as $netName => $netVals) {
$networks[] = "<span>{$netName}</span><span>{$netVals['IPAddress']}</span>";
$networks[] = $netName;
$network_ips[] = $netVals['IPAddress'];
}
$ports = [];
foreach ($ct['Ports'] as $port) {
$arrow_style = _var($port,'PublicPort') ? "\"fa fa-arrows-h\"" : "";
$ports[] = sprintf('%s:%s<i class=%s style="margin:0 6px"></i>%s', _var($port,'PrivatePort'), strtoupper(_var($port,'Type')),$arrow_style , _var($port,'PublicPort'));
if (_var($port,'PublicPort'))
$ports[] = sprintf('%s:%s<i class=%s style="margin:0 6px"></i>%s', _var($port,'PrivatePort'), strtoupper(_var($port,'Type')),$arrow_style , _var($port,'PublicPort'));
else
$ports[] = sprintf('<span class="advanced">%s:%s<i class=%s style="margin:0 6px"></i>%s</span>', _var($port,'PrivatePort'), strtoupper(_var($port,'Type')),$arrow_style , " &nbsp; <small style='text-align:right;'>(internal)</small>");
}
$paths = [];
@@ -140,7 +145,8 @@ foreach ($containers as $ct) {
break;
}
echo "<div class='advanced'><i class='fa fa-info-circle fa-fw'></i> ".compress(_($version),12,0)."</div></td>";
echo "<td style='white-space:nowrap'><span class='docker_readmore' style='display: grid; grid-template-columns: repeat(2, 1fr);'> ".implode(' ',$networks)."</span></td>";
echo "<td style='white-space:nowrap'><span class='docker_readmore'> ".implode('<br>',$networks)."</span></td>";
echo "<td style='white-space:nowrap'><span class='docker_readmore'> ".implode('<br>',$network_ips)."</span></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'><span class='cpu-$id'>0%</span><div class='usage-disk mm'><span id='cpu-$id' style='width:0'></span><span></span></div>";