If a page contains multiple tables, a larger table can cause small on…

…es to lose columns (#4295) Closes #4295
Cacti · Jun 9, 2021 · 1c3c4bf · 1c3c4bf
1 parent 5a53ffc
commit 1c3c4bf
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 44 deletions.
diff --git a/CHANGELOG b/CHANGELOG
@@ -14,6 +14,7 @@ Cacti CHANGELOG
 -issue#4271: Continued timeout of registered processes
 -issue#4272:  dns_get_record(): A temporary server error occurred
 -issue#4284: Database upgrade can fail - Uncaught argument count error
+-issue#4295: If a page contains multiple tables, a larger table can cause smaller ones to lose columns.
 -feature#4258: Update phpseclib to version 2.0.31
 
 1.2.17

diff --git a/include/global_settings.php b/include/global_settings.php
@@ -1865,7 +1865,7 @@
 				17 => __('%d Processes', 17),
 				18 => __('%d Processes', 18),
 				19 => __('%d Processes', 19),
-				20 => __('%d Processes', 20)
+				20 => __('%d Processes', 20),
 			)
 		),
 		'boost_rrd_update_max_records' => array(

diff --git a/include/layout.js b/include/layout.js
@@ -1498,57 +1498,47 @@ function tuneTable(object, width) {
 		$('#main, .cactiConsoleContentArea').css({ 'overflow-x': 'hidden' });
 	}
 
-	if (tableWidth > width) {
-		var column = totalCols;
-		var hasCheckbox = $(object).find('th.tableSubHeaderCheckbox').length;
-
-		if (hasCheckbox) {
-			var minColumns = 2;
-		} else {
-			var minColumns = 2;
+	var calculatedColumns = [];
+	var calculatedWidth   = 0;
+	var calculatedPadding = 15;
+
+	var tableHeaders = $(object).find('th');
+	var tableCheckBox = $(tableHeaders).each(function() {
+		if ($(this).index() == tableHeaders.length) {
+			calculatedColumns.addClass('noHide');
 		}
+	});
 
-		$($(object).find('th').not('.noHide').get().reverse()).each(function() {
-			if (!$(this).hasClass('tableSubHeaderCheckbox') && $(this).is(':visible')) {
-				reducedWidth += $(this).width();
-				$('#'+id+' th:nth-child('+column+')').hide();
-				$('#'+id+' td:nth-child('+column+')').hide();
-				columnsHidden++;
-			}
-
-			visibleColumns = totalCols - columnsHidden;
-
-			if (tableWidth-reducedWidth < width || visibleColumns <= minColumns) {
-				lastColumnsHidden[id] = columnsHidden;
-				lastWidth[id] = $(object).width();
-				return false;
-			}
-
-			column--;
-		});
+	$($(object).find('th').get()).each(function() {
+		var isLastCheckBox = $(this).hasClass('tableSubHeaderCheckbox') && $(this).index() == tableHeaders.length - 1;
 
-		lastWidth[id] = $(object).width();
-	} else if ($(object).width() > lastWidth[id]+40 && columnsHidden > 0) {
-		var column = 1;
-		var id     = $(object).attr('id');
+		if ($(this).hasClass('noHide') || isLastCheckBox) {
+			var columnWidth = $.textMetrics(this).width;
 
-		$($(object).find('th').get()).each(function() {
-			if (!$(this).hasClass('tableSubHeaderCheckbox') && $(this).is(':hidden')) {
-				if (lastWidth[id]+$(this).width() < width) {
-					$('#'+id+' td:nth-child('+column+')').show();
-					$('#'+id+' th:nth-child('+column+')').show();
-				}
-			}
+			calculatedColumns.push($(this).index());
+			calculatedWidth += columnWidth + calculatedPadding;
+		}
+	});
 
-			if ($(object).width() >= width) {
-				lastColumnsHidden[id] = columnsHidden = $(object).find('th:hidden').length;
+	$($(object).find('th').get()).each(function() {
+		if (!calculatedColumns.includes($(this).index())) {
+			var columnWidth = $.textMetrics(this).width;
+			if (width < calculatedWidth) {
+				$(this).hide();
+			} else {
+				calculatedColumns.push($(this).index());
+				calculatedWidth += columnWidth + calculatedPadding;
 			}
 
-			column++;
-		});
+			console.log($(this).parent().id + ' - ' + $(this).index() + ' - ' + width);
+		}
+	});
 
-		lastWidth[id] = $(object).width();
-	}
+	$($(object).find('td').each(function() {
+		if (!calculatedColumns.includes($(this).index())) {
+			$(this).hide();
+		}
+	}));
 }
 
 function tuneFilter(object, width) {
@@ -4362,3 +4352,39 @@ function checkSNMPPassphraseConfirm(type) {
 }
 
 
+(function($) {
+
+ $.textMetrics = function(el) {
+
+  var h = 0, w = 0;
+
+  var div = document.createElement('div');
+  document.body.appendChild(div);
+  $(div).css({
+   position: 'absolute',
+   left: -1000,
+   top: -1000,
+   display: 'none'
+  });
+
+  $(div).html($(el).html());
+  var styles = ['font-size','font-style', 'font-weight', 'font-family','line-height', 'text-transform', 'letter-spacing'];
+  $(styles).each(function() {
+   var s = this.toString();
+   $(div).css(s, $(el).css(s));
+  });
+
+  h = $(div).outerHeight();
+  w = $(div).outerWidth();
+
+  $(div).remove();
+
+  var ret = {
+   height: h,
+   width: w
+  };
+
+  return ret;
+ }
+
+})(jQuery);