[pve-devel] [PATCH v9 pve-manager 18/18] sdn: add pending state column with hover tip

[Alexandre Derumier]

Signed-off-by: Alexandre Derumier <aderumier at odiso.com>
---
 www/manager6/Utils.js              | 71 +++++++++++++++++++-----------
 www/manager6/sdn/ControllerView.js | 17 +++----
 www/manager6/sdn/SubnetView.js     | 12 ++++-
 www/manager6/sdn/VnetView.js       |  8 ++++
 www/manager6/sdn/ZoneView.js       | 27 +++---------
 5 files changed, 75 insertions(+), 60 deletions(-)

diff --git a/www/manager6/Utils.js b/www/manager6/Utils.js
index 89706c32..5a6267fe 100644
--- a/www/manager6/Utils.js
+++ b/www/manager6/Utils.js
@@ -176,32 +176,51 @@ Ext.define('PVE.Utils', { utilities: {
     },
 
     render_sdn_pending: function(rec,value,key, index) {
-        if (rec.data.state === 'deleted') {
-            if (value === undefined) {
-                return ' ';
-            } else {
-                return '<div style="text-decoration: line-through;">'+ value +'</div>';
-            }
-
-        } else if (rec.data.state === 'new') {
-            if(index === undefined) {
-                value = rec.data.pending[key];
-            }
-            if (value === undefined || value === null) {
-                value = ' ';
-            }
-            return '<div style="color:green">' + value + '</div>';
-        } else if (rec.data.state === 'changed') {
-            if (value === undefined || value === null) {
-                value = '<br>';
-            }
-            if (rec.data.pending[key] === undefined || rec.data.pending[key] === null) {
-                rec.data.pending[key] = value;
-            }
-           return '<div style="text-decoration: line-through;">'+ value +'</div>' + '<div style="color:orange">' + rec.data.pending[key] + '</div>';
-        } else {
-            return value;
-        }
+	if (rec.data.state === undefined || rec.data.state === null) {
+	    return value;
+	}
+
+	if (rec.data.state === 'deleted') {
+	    if (value === undefined) {
+		return ' ';
+	    } else {
+		return '<div style="text-decoration: line-through;">'+ value +'</div>';
+	    }
+	} else {
+
+	    if (rec.data.pending[key] !== undefined && rec.data.pending[key] !== null) {
+		if (rec.data.pending[key] === 'deleted') {
+		    return ' ';
+		} else {
+		    return rec.data.pending[key];
+		}
+	    } else {
+		return value;
+	    }
+	}
+	return value;
+    },
+
+    render_sdn_pending_state: function(rec,value) {
+
+	if (value === undefined || value === null) {
+	    return ' ';
+	}
+
+	let icon = `<i class="fa fa-fw fa-refresh warning"></i>`;
+
+	if (value === 'deleted') {
+	    return '<span>' + icon + value + '</span>';
+	}
+
+	let tip = 'Pending apply: <br>';
+
+	for (const [key, keyvalue] of Object.entries(rec.data.pending)) {
+	    if (((rec.data[key] !== undefined && rec.data.pending[key] !== rec.data[key]) || rec.data[key] === undefined)) {
+		tip = tip + `${key}: ${keyvalue} <br>`;
+	    }
+	}
+	return '<span data-qtip="' + tip + '">'+ icon + value + '</span>';
     },
 
     render_ceph_health: function(healthObj) {
diff --git a/www/manager6/sdn/ControllerView.js b/www/manager6/sdn/ControllerView.js
index 10c9c446..7981eba9 100644
--- a/www/manager6/sdn/ControllerView.js
+++ b/www/manager6/sdn/ControllerView.js
@@ -143,19 +143,12 @@ Ext.define('PVE.sdn.ControllerView', {
                     }
 		},
                 {
-                    header: gettext('Pending'),
-                    flex: 3,
-                    dataIndex: 'pending',
+                    header: gettext('State'),
+		    width: 100,
+                    dataIndex: 'state',
                     renderer: function(value, metaData, rec) {
-                        if(value !== undefined ) {
-                                delete value.controller;
-                                delete value.type;
-				if(!Ext.Object.isEmpty(value)){
-				    return JSON.stringify(value);
-				}
-                        }
-                        return '';
-                    }
+                        return PVE.Utils.render_sdn_pending_state(rec, value);
+		    }
                 }
 	    ],
 	    listeners: {
diff --git a/www/manager6/sdn/SubnetView.js b/www/manager6/sdn/SubnetView.js
index bff047fb..9a85bbbc 100644
--- a/www/manager6/sdn/SubnetView.js
+++ b/www/manager6/sdn/SubnetView.js
@@ -129,8 +129,16 @@ Ext.define('PVE.sdn.SubnetView', {
 		    dataIndex: 'dnszoneprefix',
                     renderer: function(value, metaData, rec) {
                         return PVE.Utils.render_sdn_pending(rec, value, 'dnszoneprefix');
-                    }
-		},
+		    }
+                },
+		{
+		    header: gettext('State'),
+		    width: 100,
+		    dataIndex: 'state',
+		    renderer: function(value, metaData, rec) {
+			return PVE.Utils.render_sdn_pending_state(rec, value);
+		    }
+		}
 
 	    ],
 	    listeners: {
diff --git a/www/manager6/sdn/VnetView.js b/www/manager6/sdn/VnetView.js
index da0234dd..a38a9c9a 100644
--- a/www/manager6/sdn/VnetView.js
+++ b/www/manager6/sdn/VnetView.js
@@ -124,6 +124,14 @@ Ext.define('PVE.sdn.VnetView', {
                     renderer: function(value, metaData, rec) {
 			return PVE.Utils.render_sdn_pending(rec, value, 'vlanaware');
 		    }
+		},
+		{
+		    header: gettext('State'),
+		    width: 100,
+		    dataIndex: 'state',
+                    renderer: function(value, metaData, rec) {
+			return PVE.Utils.render_sdn_pending_state(rec, value);
+		    }
 		}
 	    ],
 	    listeners: {
diff --git a/www/manager6/sdn/ZoneView.js b/www/manager6/sdn/ZoneView.js
index ae44f95f..0d4ce9ac 100644
--- a/www/manager6/sdn/ZoneView.js
+++ b/www/manager6/sdn/ZoneView.js
@@ -179,27 +179,14 @@ Ext.define('PVE.sdn.ZoneView', {
                         return PVE.Utils.render_sdn_pending(rec, value, 'reversedns');
                     }
 		},
-		{
-		    header: gettext('Pending'),
-		    flex: 3,
-		    dataIndex: 'pending',
+                {
+                    header: gettext('State'),
+		    width: 100,
+                    dataIndex: 'state',
                     renderer: function(value, metaData, rec) {
-			if(value !== undefined ) {
-				delete value.nodes;
-				delete value.zone;
-				delete value.type;
-				delete value.mtu;
-				delete value.ipam;
-				delete value.dns;
-				delete value.reversedns;
-				delete value.dnszone;
-				if(!Ext.Object.isEmpty(value)){
-				    return JSON.stringify(value);
- 				}
-			}
-			return '';
-                    }
-		},
+                        return PVE.Utils.render_sdn_pending_state(rec, value);
+		    }
+                }
 	    ],
 	    listeners: {
 		activate: reload,
-- 
2.20.1