From 6f08f43c55a72721bf04f5432f6fa15413570edd Mon Sep 17 00:00:00 2001
From: bergware <ronald.vd.berg62@gmail.com>
Date: Fri, 11 Jan 2019 09:44:43 +0100
Subject: [PATCH] Docker and VM list updates

---
 .../DockerContainers.page                     | 13 ++-----
 .../include/DockerContainers.php              |  3 +-
 plugins/dynamix.vm.manager/VMMachines.page    | 15 +++-----
 .../dynamix.vm.manager/include/VMMachines.php | 30 ++++++++++++---
 .../include/libvirt_helpers.php               | 38 -------------------
 .../javascript/vmmanager.js                   |  2 +-
 plugins/dynamix/styles/default-azure.css      |  7 ++++
 plugins/dynamix/styles/default-black.css      |  7 ++++
 plugins/dynamix/styles/default-gray.css       |  7 ++++
 plugins/dynamix/styles/default-white.css      |  7 ++++
 10 files changed, 64 insertions(+), 65 deletions(-)

diff --git a/plugins/dynamix.docker.manager/DockerContainers.page b/plugins/dynamix.docker.manager/DockerContainers.page
index abdf9b36f..e5005fe13 100644
--- a/plugins/dynamix.docker.manager/DockerContainers.page
+++ b/plugins/dynamix.docker.manager/DockerContainers.page
@@ -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>');
diff --git a/plugins/dynamix.docker.manager/include/DockerContainers.php b/plugins/dynamix.docker.manager/include/DockerContainers.php
index 7ae31cfcd..0fe4868a1 100644
--- a/plugins/dynamix.docker.manager/include/DockerContainers.php
+++ b/plugins/dynamix.docker.manager/include/DockerContainers.php
@@ -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: ";
diff --git a/plugins/dynamix.vm.manager/VMMachines.page b/plugins/dynamix.vm.manager/VMMachines.page
index b9009c9fe..720685a85 100644
--- a/plugins/dynamix.vm.manager/VMMachines.page
+++ b/plugins/dynamix.vm.manager/VMMachines.page
@@ -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>');
diff --git a/plugins/dynamix.vm.manager/include/VMMachines.php b/plugins/dynamix.vm.manager/include/VMMachines.php
index d4344b3a3..7bc76dc22 100644
--- a/plugins/dynamix.vm.manager/include/VMMachines.php
+++ b/plugins/dynamix.vm.manager/include/VMMachines.php
@@ -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 &nbsp;</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 */
diff --git a/plugins/dynamix.vm.manager/include/libvirt_helpers.php b/plugins/dynamix.vm.manager/include/libvirt_helpers.php
index 12127a37d..346186bef 100644
--- a/plugins/dynamix.vm.manager/include/libvirt_helpers.php
+++ b/plugins/dynamix.vm.manager/include/libvirt_helpers.php
@@ -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.
diff --git a/plugins/dynamix.vm.manager/javascript/vmmanager.js b/plugins/dynamix.vm.manager/javascript/vmmanager.js
index 3cefc7daf..a0cad9d2e 100644
--- a/plugins/dynamix.vm.manager/javascript/vmmanager.js
+++ b/plugins/dynamix.vm.manager/javascript/vmmanager.js
@@ -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({
diff --git a/plugins/dynamix/styles/default-azure.css b/plugins/dynamix/styles/default-azure.css
index 962f79f26..2241c292d 100644
--- a/plugins/dynamix/styles/default-azure.css
+++ b/plugins/dynamix/styles/default-azure.css
@@ -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}
diff --git a/plugins/dynamix/styles/default-black.css b/plugins/dynamix/styles/default-black.css
index f91bdc18e..83d08b449 100644
--- a/plugins/dynamix/styles/default-black.css
+++ b/plugins/dynamix/styles/default-black.css
@@ -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}
diff --git a/plugins/dynamix/styles/default-gray.css b/plugins/dynamix/styles/default-gray.css
index a94dbfe7c..cb3f94e01 100644
--- a/plugins/dynamix/styles/default-gray.css
+++ b/plugins/dynamix/styles/default-gray.css
@@ -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}
diff --git a/plugins/dynamix/styles/default-white.css b/plugins/dynamix/styles/default-white.css
index 6f3770159..6a536aab3 100644
--- a/plugins/dynamix/styles/default-white.css
+++ b/plugins/dynamix/styles/default-white.css
@@ -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}