..F....... [ZBXNEXT-114,ZBXNEXT-6572] added mappings table

7 files changed, 114 insertions, 23 deletions

diff --git a/ui/app/partials/js/configuration.valuemap.js.php b/ui/app/partials/js/configuration.valuemap.js.php
index 2c2e526cf89..5bba6ffa2c5 100644
--- a/ui/app/partials/js/configuration.valuemap.js.php
+++ b/ui/app/partials/js/configuration.valuemap.js.php
@@ -105,28 +105,61 @@ var AddValueMap = class {
 
 	createMappingCell() {
 		let i = 0;
-		const cell = document.createElement('td');
-		const hellip = document.createElement('span');
-		hellip.innerHTML = '…';
+		let cell = document.createElement('td');
+		let hellip = document.createElement('span');
+		let arrow_cell = document.createElement('div');
+		let mappings_table = document.createElement('div');
+		let value_cell, newvalue_cell;
 
+		hellip.innerHTML = '…';
+		arrow_cell.textContent = '⇒';
+		mappings_table.classList.add('mappings-table');
 		cell.classList.add('wordwrap');
-		for (let value of this.data.mappings) {
-			value = {value: '', ...value};
-
-			if (i <= this.MAX_MAPPINGS) {
-				cell.append((i < this.MAX_MAPPINGS)
-					? `${value.value} ⇒ ${value.newvalue}`
-					: hellip,
-					document.createElement('br')
-				);
-			}
 
-			cell.appendChild(this.createHiddenInput(`[mappings][${i}][type]`, value.type));
-			cell.appendChild(this.createHiddenInput(`[mappings][${i}][value]`, value.value));
-			cell.appendChild(this.createHiddenInput(`[mappings][${i}][newvalue]`, value.newvalue));
+		for (let mapping of this.data.mappings) {
+			mapping = {value: '', ...mapping};
+
+			cell.appendChild(this.createHiddenInput(`[mappings][${i}][type]`, mapping.type));
+			cell.appendChild(this.createHiddenInput(`[mappings][${i}][value]`, mapping.value));
+			cell.appendChild(this.createHiddenInput(`[mappings][${i}][newvalue]`, mapping.newvalue));
 			i++;
 		}
 
+		for (let mapping of this.data.mappings.slice(0, this.MAX_MAPPINGS)) {
+			value_cell = document.createElement('div');
+			newvalue_cell = document.createElement('div');
+			newvalue_cell.textContent = mapping.newvalue;
+
+			switch (parseInt(mapping.type, 10)) {
+				case <?= VALUEMAP_MAPPING_TYPE_EQUAL ?>:
+					value_cell.textContent = `=${mapping.value}`;
+					break;
+
+				case <?= VALUEMAP_MAPPING_TYPE_GREATER_EQUAL ?>:
+					value_cell.textContent = `>=${mapping.value}`;
+					break;
+
+				case <?= VALUEMAP_MAPPING_TYPE_LESS_EQUAL ?>:
+					value_cell.textContent = `<=${mapping.value}`;
+					break;
+
+				case <?= VALUEMAP_MAPPING_TYPE_DEFAULT ?>:
+					value_cell = document.createElement('em');
+					value_cell.textContent = <?= json_encode(_('default')) ?>;
+					break;
+			}
+
+			mappings_table.append(value_cell);
+			mappings_table.append(arrow_cell.cloneNode(true));
+			mappings_table.append(newvalue_cell);
+		}
+
+		cell.append(mappings_table);
+
+		if (this.data.mappings.length > this.MAX_MAPPINGS) {
+			cell.append(hellip);
+		}
+
 		return cell;
 	}
 
diff --git a/ui/app/views/popup.generic.php b/ui/app/views/popup.generic.php
index 7d308691736..e3205cd6cc9 100644
--- a/ui/app/views/popup.generic.php
+++ b/ui/app/views/popup.generic.php
@@ -594,18 +594,39 @@ switch ($data['popup_type']) {
 					->onClick(sprintf($inline_js, $valuemap['id'], $js_action_onclick));
 			}
 
-			$span = [];
+			$mappings_table = [];
 
 			foreach (array_slice($valuemap['mappings'], 0, 3) as $mapping) {
-				$span[] = $mapping['value'].' ⇒ '.$mapping['newvalue'];
-				$span[] = BR();
-			}
+				switch ($mapping['type']) {
+					case VALUEMAP_MAPPING_TYPE_EQUAL:
+						$value = '='.$mapping['value'];
+						break;
+
+					case VALUEMAP_MAPPING_TYPE_GREATER_EQUAL:
+						$value = '>='.$mapping['value'];
+						break;
+
+					case VALUEMAP_MAPPING_TYPE_LESS_EQUAL:
+						$value = '<='.$mapping['value'];
+
+					case VALUEMAP_MAPPING_TYPE_DEFAULT:
+						$value = new CTag('em', true, _('default'));
+						break;
+
+					default:
+						$value = $mapping['value'];
+						break;
+				}
 
-			if (count($valuemap['mappings']) > 3) {
-				$span[] = '&hellip;';
+				$mappings_table[] = new CDiv($value);
+				$mappings_table[] = new CDiv('⇒');
+				$mappings_table[] = new CDiv($mapping['newvalue']);
 			}
 
-			$table->addRow([$check_box, $name, $span]);
+			$hellip = (count($valuemap['mappings']) > 3) ? '&hellip;' : null;
+			$table->addRow([$check_box, $name, [
+				(new CDiv($mappings_table))->addClass(ZBX_STYLE_VALUEMAP_MAPPINGS_TABLE), $hellip
+			]]);
 		}
 		break;
 }
diff --git a/ui/assets/styles/blue-theme.css b/ui/assets/styles/blue-theme.css
index b58fe949ffa..b3418b0158a 100644
--- a/ui/assets/styles/blue-theme.css
+++ b/ui/assets/styles/blue-theme.css
@@ -6308,6 +6308,15 @@ z-select.z-select-host-interface li[disabled] .description:not(:empty),
 .valuemap-list-table tbody tr:first-child td {
   border-top: 1px solid #ebeef0; }
 
+.mappings-table {
+  display: grid;
+  grid-template-columns: auto auto minmax(auto, 100%); }
+  .mappings-table > div {
+    text-align: left; }
+  .mappings-table > div:nth-child(3n + 2) {
+    text-align: center;
+    padding: 0 10px; }
+
 .valuemap-checkbox {
   margin-top: 10px; }
 
diff --git a/ui/assets/styles/dark-theme.css b/ui/assets/styles/dark-theme.css
index d0ca5a28457..8ae9e3fb0f9 100644
--- a/ui/assets/styles/dark-theme.css
+++ b/ui/assets/styles/dark-theme.css
@@ -6319,6 +6319,15 @@ z-select.z-select-host-interface li[disabled] .description:not(:empty),
 .valuemap-list-table tbody tr:first-child td {
   border-top: 1px solid #383838; }
 
+.mappings-table {
+  display: grid;
+  grid-template-columns: auto auto minmax(auto, 100%); }
+  .mappings-table > div {
+    text-align: left; }
+  .mappings-table > div:nth-child(3n + 2) {
+    text-align: center;
+    padding: 0 10px; }
+
 .valuemap-checkbox {
   margin-top: 10px; }
 
diff --git a/ui/assets/styles/hc-dark.css b/ui/assets/styles/hc-dark.css
index af757b7b33f..59f8fc7ddb1 100644
--- a/ui/assets/styles/hc-dark.css
+++ b/ui/assets/styles/hc-dark.css
@@ -6263,6 +6263,15 @@ z-select.z-select-host-interface li[disabled] .description:not(:empty),
 .valuemap-list-table tbody tr:first-child td {
   border-top: 1px solid #333333; }
 
+.mappings-table {
+  display: grid;
+  grid-template-columns: auto auto minmax(auto, 100%); }
+  .mappings-table > div {
+    text-align: left; }
+  .mappings-table > div:nth-child(3n + 2) {
+    text-align: center;
+    padding: 0 10px; }
+
 .valuemap-checkbox {
   margin-top: 10px; }
 
diff --git a/ui/assets/styles/hc-light.css b/ui/assets/styles/hc-light.css
index 58452963a6d..ef813916ae1 100644
--- a/ui/assets/styles/hc-light.css
+++ b/ui/assets/styles/hc-light.css
@@ -6263,6 +6263,15 @@ z-select.z-select-host-interface li[disabled] .description:not(:empty),
 .valuemap-list-table tbody tr:first-child td {
   border-top: 1px solid #888888; }
 
+.mappings-table {
+  display: grid;
+  grid-template-columns: auto auto minmax(auto, 100%); }
+  .mappings-table > div {
+    text-align: left; }
+  .mappings-table > div:nth-child(3n + 2) {
+    text-align: center;
+    padding: 0 10px; }
+
 .valuemap-checkbox {
   margin-top: 10px; }
 
diff --git a/ui/include/defines.inc.php b/ui/include/defines.inc.php
index 152e7243b05..4083da9d29b 100644
--- a/ui/include/defines.inc.php
+++ b/ui/include/defines.inc.php
@@ -1863,6 +1863,7 @@ define('ZBX_STYLE_ROW', 'row');
 define('ZBX_STYLE_INLINE_SR_ONLY', 'inline-sr-only');
 define('ZBX_STYLE_VALUEMAP_LIST_TABLE', 'valuemap-list-table');
 define('ZBX_STYLE_VALUEMAP_CHECKBOX', 'valuemap-checkbox');
+define('ZBX_STYLE_VALUEMAP_MAPPINGS_TABLE', 'mappings-table');
 define('ZBX_STYLE_SEARCH', 'search');
 define('ZBX_STYLE_FORM_SEARCH', 'form-search');
 define('ZBX_STYLE_SECOND_COLUMN_LABEL', 'second-column-label');