diff options
-rw-r--r-- | sass/stylesheets/sass/screen.scss | 15 | ||||
-rw-r--r-- | ui/app/partials/js/configuration.valuemap.js.php | 65 | ||||
-rw-r--r-- | ui/app/views/popup.generic.php | 35 | ||||
-rw-r--r-- | ui/assets/styles/blue-theme.css | 9 | ||||
-rw-r--r-- | ui/assets/styles/dark-theme.css | 9 | ||||
-rw-r--r-- | ui/assets/styles/hc-dark.css | 9 | ||||
-rw-r--r-- | ui/assets/styles/hc-light.css | 9 | ||||
-rw-r--r-- | ui/include/defines.inc.php | 1 |
8 files changed, 129 insertions, 23 deletions
diff --git a/sass/stylesheets/sass/screen.scss b/sass/stylesheets/sass/screen.scss index 9b5fec4f362..0949b6eb364 100644 --- a/sass/stylesheets/sass/screen.scss +++ b/sass/stylesheets/sass/screen.scss @@ -6489,6 +6489,21 @@ z-select, } } +.mappings-table { + display: grid; + grid-template-columns: auto auto minmax(auto, 100%); + + & > div { + text-align: left; + } + + // For every 3th starting from 2nd child. + & > div:nth-child(3n + 2) { + text-align: center; + padding: 0 10px; + } +} + .valuemap-checkbox { margin-top: 10px; } 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[] = '…'; + $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) ? '…' : 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'); |