..F....... [ZBXNEXT-6376] replaced tag filter radio buttons with z-selects, added new options tag filters, fixed z-select in filter, added onchange scripts and added miscellaneous typo fixes

14 files changed, 363 insertions, 94 deletions

diff --git a/ui/app/controllers/CControllerHost.php b/ui/app/controllers/CControllerHost.php
index a3b1658a578..3eeb7cf8c86 100644
--- a/ui/app/controllers/CControllerHost.php
+++ b/ui/app/controllers/CControllerHost.php
@@ -280,7 +280,7 @@ abstract class CControllerHost extends CController {
 		$data = [];
 
 		if ($filter['groupids']) {
-			$groups= API::HostGroup()->get([
+			$groups = API::HostGroup()->get([
 				'output' => ['groupid', 'name'],
 				'groupids' => $filter['groupids']
 			]);
diff --git a/ui/app/partials/monitoring.host.filter.php b/ui/app/partials/monitoring.host.filter.php
index d03dd449855..8690b6f44c2 100644
--- a/ui/app/partials/monitoring.host.filter.php
+++ b/ui/app/partials/monitoring.host.filter.php
@@ -41,15 +41,22 @@ foreach (array_values($data['tags']) as $i => $tag) {
 			->setAttribute('placeholder', _('tag'))
 			->setWidth(ZBX_TEXTAREA_FILTER_SMALL_WIDTH)
 			->removeId(),
-		(new CRadioButtonList('tags['.$i.'][operator]', (int) $tag['operator']))
-			->addValue(_('Contains'), TAG_OPERATOR_LIKE, 'tags_0'.$i.'_#{uniqid}')
-			->addValue(_('Equals'), TAG_OPERATOR_EQUAL, 'tags_1'.$i.'_#{uniqid}')
-			->setId('tags_'.$i.'_#{uniqid}')
-			->setModern(true),
+		(new CSelect('tags['.$i.'][operator]'))
+			->addOptions(CSelect::createOptionsFromArray([
+				TAG_OPERATOR_EXISTS => _('Exists'),
+				TAG_OPERATOR_EQUAL => _('Equals'),
+				TAG_OPERATOR_LIKE => _('Contains'),
+				TAG_OPERATOR_NOT_EXISTS => _('Does not exist'),
+				TAG_OPERATOR_NOT_EQUAL => _('Does not equal'),
+				TAG_OPERATOR_NOT_LIKE => _('Does not contain')
+			]))
+			->setValue($tag['operator'])
+			->setFocusableElementId('tags-'.$i.'#{uniqid}-operator-select')
+			->setId('tags_'.$i.'#{uniqid}_operator'),
 		(new CTextBox('tags['.$i.'][value]', $tag['value']))
 			->setAttribute('placeholder', _('value'))
 			->setWidth(ZBX_TEXTAREA_FILTER_SMALL_WIDTH)
-			->removeId(),
+			->setId('tags_'.$i.'#{uniqid}_value'),
 		(new CCol(
 			(new CButton('tags['.$i.'][remove]', _('Remove')))
 				->addClass(ZBX_STYLE_BTN_LINK)
@@ -183,14 +190,21 @@ if (array_key_exists('render_html', $data)) {
 				->setAttribute('placeholder', _('tag'))
 				->removeId()
 				->setWidth(ZBX_TEXTAREA_FILTER_SMALL_WIDTH),
-			(new CRadioButtonList('tags[#{rowNum}][operator]', TAG_OPERATOR_LIKE))
-				->addValue(_('Contains'), TAG_OPERATOR_LIKE, 'tags_0#{rowNum}#{uniqid}')
-				->addValue(_('Equals'), TAG_OPERATOR_EQUAL, 'tags_1#{rowNum}#{uniqid}')
-				->setModern(true)
-				->setId('tags_#{rowNum}#{uniqid}'),
+			(new CSelect('tags[#{rowNum}][operator]'))
+				->addOptions(CSelect::createOptionsFromArray([
+					TAG_OPERATOR_EXISTS => _('Exists'),
+					TAG_OPERATOR_EQUAL => _('Equals'),
+					TAG_OPERATOR_LIKE => _('Contains'),
+					TAG_OPERATOR_NOT_EXISTS => _('Does not exist'),
+					TAG_OPERATOR_NOT_EQUAL => _('Does not equal'),
+					TAG_OPERATOR_NOT_LIKE => _('Does not contain')
+				]))
+				->setValue(TAG_OPERATOR_LIKE)
+				->setFocusableElementId('tags-#{rowNum}#{uniqid}-operator-select')
+				->setId('tags_#{rowNum}#{uniqid}_operator'),
 			(new CTextBox('tags[#{rowNum}][value]', '#{value}'))
 				->setAttribute('placeholder', _('value'))
-				->removeId()
+				->setId('tags_#{rowNum}#{uniqid}_value')
 				->setWidth(ZBX_TEXTAREA_FILTER_SMALL_WIDTH),
 			(new CCol(
 				(new CButton('tags[#{rowNum}][remove]', _('Remove')))
@@ -249,15 +263,30 @@ if (array_key_exists('render_html', $data)) {
 			data.tags.push({'tag': '', 'value': '', 'operator': <?= TAG_OPERATOR_LIKE ?>, uniqid: data.uniqid});
 		}
 
-		$('#tags_' + data.uniqid, container).dynamicRows({
-			template: '#filter-tag-row-tmpl',
-			rows: data.tags,
-			counter: 0,
-			dataCallback: (tag) => {
-				tag.uniqid = data.uniqid;
-				return tag;
-			}
-		});
+		$('#tags_' + data.uniqid, container)
+			.dynamicRows({
+				template: '#filter-tag-row-tmpl',
+				rows: data.tags,
+				counter: 0,
+				dataCallback: (tag) => {
+					tag.uniqid = data.uniqid;
+					return tag;
+				}
+			})
+			.on('afteradd.dynamicRows', function() {
+				// Hide tag value field if operator is "Exists" or "Does not exist". Show tag value field otherwise.
+				$(this)
+					.find('z-select')
+					.on('change', function() {
+						var num = this.id.match(/tags_(\d+)_operator/);
+
+						if (num !== null) {
+							$('#tags_' + num[1] + '_value').toggle($(this).val() != <?= TAG_OPERATOR_EXISTS ?>
+									&& $(this).val() != <?= TAG_OPERATOR_NOT_EXISTS ?>
+							);
+						}
+					});
+			});
 
 		// Input, radio and single checkboxes.
 		['name', 'ip', 'dns', 'port', 'status', 'evaltype', 'show_suppressed'].forEach((key) => {
@@ -276,6 +305,17 @@ if (array_key_exists('render_html', $data)) {
 			$('[name="severities[' + value + ']"]', container).attr('checked', true);
 		}
 
+		// Hide tag value field if operator is "Exists" or "Does not exist". Show tag value field otherwise.
+		$('#tags_' + data.uniqid + ' z-select').on('change', function() {
+			var num = this.id.match(/tags_(\d+)_operator/);
+
+			if (num !== null) {
+				$('#tags_' + num[1] + '_value').toggle($(this).val() != <?= TAG_OPERATOR_EXISTS ?>
+						&& $(this).val() != <?= TAG_OPERATOR_NOT_EXISTS ?>
+				);
+			}
+		}).trigger('change');
+
 		// Initialize src_url.
 		this.resetUnsavedState();
 		this.on(TABFILTERITEM_EVENT_ACTION, update.bind(this));
diff --git a/ui/app/partials/monitoring.problem.filter.php b/ui/app/partials/monitoring.problem.filter.php
index 14517d5912e..12b4832364b 100644
--- a/ui/app/partials/monitoring.problem.filter.php
+++ b/ui/app/partials/monitoring.problem.filter.php
@@ -178,13 +178,22 @@ foreach ($data['tags'] as $tag) {
 		(new CTextBox('tags['.$i.'][tag]', $tag['tag']))
 			->setAttribute('placeholder', _('tag'))
 			->setWidth(ZBX_TEXTAREA_FILTER_SMALL_WIDTH),
-		(new CRadioButtonList('tags['.$i.'][operator]', (int) $tag['operator']))
-			->addValue(_('Contains'), TAG_OPERATOR_LIKE)
-			->addValue(_('Equals'), TAG_OPERATOR_EQUAL)
-			->setModern(true),
+		(new CSelect('tags['.$i.'][operator]'))
+			->addOptions(CSelect::createOptionsFromArray([
+				TAG_OPERATOR_EXISTS => _('Exists'),
+				TAG_OPERATOR_EQUAL => _('Equals'),
+				TAG_OPERATOR_LIKE => _('Contains'),
+				TAG_OPERATOR_NOT_EXISTS => _('Does not exist'),
+				TAG_OPERATOR_NOT_EQUAL => _('Does not equal'),
+				TAG_OPERATOR_NOT_LIKE => _('Does not contain')
+			]))
+			->setValue($tag['operator'])
+			->setFocusableElementId('tags-'.$i.'#{uniqid}-operator-select')
+			->setId('tags_'.$i.'#{uniqid}_operator'),
 		(new CTextBox('tags['.$i.'][value]', $tag['value']))
 			->setAttribute('placeholder', _('value'))
-			->setWidth(ZBX_TEXTAREA_FILTER_SMALL_WIDTH),
+			->setWidth(ZBX_TEXTAREA_FILTER_SMALL_WIDTH)
+			->setId('tags_'.$i.'#{uniqid}_value'),
 		(new CCol(
 			(new CButton('tags['.$i.'][remove]', _('Remove')))
 				->addClass(ZBX_STYLE_BTN_LINK)
@@ -350,14 +359,21 @@ if (array_key_exists('render_html', $data)) {
 				->setAttribute('placeholder', _('tag'))
 				->removeId()
 				->setWidth(ZBX_TEXTAREA_FILTER_SMALL_WIDTH),
-			(new CRadioButtonList('tags[#{rowNum}][operator]', TAG_OPERATOR_LIKE))
-				->addValue(_('Contains'), TAG_OPERATOR_LIKE, 'tags_0#{rowNum}#{uniqid}')
-				->addValue(_('Equals'), TAG_OPERATOR_EQUAL, 'tags_1#{rowNum}#{uniqid}')
-				->setModern(true)
-				->setId('tags_#{rowNum}#{uniqid}'),
+			(new CSelect('tags[#{rowNum}][operator]'))
+				->addOptions(CSelect::createOptionsFromArray([
+					TAG_OPERATOR_EXISTS => _('Exists'),
+					TAG_OPERATOR_EQUAL => _('Equals'),
+					TAG_OPERATOR_LIKE => _('Contains'),
+					TAG_OPERATOR_NOT_EXISTS => _('Does not exist'),
+					TAG_OPERATOR_NOT_EQUAL => _('Does not equal'),
+					TAG_OPERATOR_NOT_LIKE => _('Does not contain')
+				]))
+				->setValue(TAG_OPERATOR_LIKE)
+				->setFocusableElementId('tags-#{rowNum}#{uniqid}-operator-select')
+				->setId('tags_#{rowNum}#{uniqid}_operator'),
 			(new CTextBox('tags[#{rowNum}][value]', '#{value}'))
 				->setAttribute('placeholder', _('value'))
-				->removeId()
+				->setId('tags_#{rowNum}#{uniqid}_value')
 				->setWidth(ZBX_TEXTAREA_FILTER_SMALL_WIDTH),
 			(new CCol(
 				(new CButton('tags[#{rowNum}][remove]', _('Remove')))
@@ -464,15 +480,40 @@ if (array_key_exists('render_html', $data)) {
 			data.tags.push({'tag': '', 'value': '', 'operator': <?= TAG_OPERATOR_LIKE ?>});
 		}
 
-		$('#filter-tags_' + data.uniqid, container).dynamicRows({
-			template: '#filter-tag-row-tmpl',
-			rows: data.tags,
-			counter: 0,
-			dataCallback: (tag) => {
-				tag.uniqid = data.uniqid
-				return tag;
+		$('#filter-tags_' + data.uniqid, container)
+			.dynamicRows({
+				template: '#filter-tag-row-tmpl',
+				rows: data.tags,
+				counter: 0,
+				dataCallback: (tag) => {
+					tag.uniqid = data.uniqid
+					return tag;
+				}
+			})
+			.on('afteradd.dynamicRows', function() {
+				// Hide tag value field if operator is "Exists" or "Does not exist". Show tag value field otherwise.
+				$(this)
+					.find('z-select')
+					.on('change', function() {
+						var num = this.id.match(/tags_(\d+)_operator/);
+
+						if (num !== null) {
+							$('#tags_' + num[1] + '_value').toggle($(this).val() != <?= TAG_OPERATOR_EXISTS ?>
+									&& $(this).val() != <?= TAG_OPERATOR_NOT_EXISTS ?>
+							);
+						}
+					});
+			});
+
+		$('#filter-tags_' + data.uniqid + ' z-select').on('change', function() {
+			var num = this.id.match(/tags_(\d+)_operator/);
+
+			if (num !== null) {
+				$('#tags_' + num[1] + '_value').toggle($(this).val() != <?= TAG_OPERATOR_EXISTS ?>
+						&& $(this).val() != <?= TAG_OPERATOR_NOT_EXISTS ?>
+				);
 			}
-		});
+		}).trigger('change');
 
 		// Host groups multiselect.
 		$('#groupids_' + data.uniqid, container).multiSelectHelper({
diff --git a/ui/include/classes/widgets/CWidgetHelper.php b/ui/include/classes/widgets/CWidgetHelper.php
index 329fb1f6985..83fac2138b5 100644
--- a/ui/include/classes/widgets/CWidgetHelper.php
+++ b/ui/include/classes/widgets/CWidgetHelper.php
@@ -452,21 +452,35 @@ class CWidgetHelper {
 		$i = 0;
 
 		foreach ($tags as $tag) {
+			$zselect_operator = (new CSelect($field->getName().'['.$i.'][operator]'))
+				->addOptions(CSelect::createOptionsFromArray([
+					TAG_OPERATOR_EXISTS => _('Exists'),
+					TAG_OPERATOR_EQUAL => _('Equals'),
+					TAG_OPERATOR_LIKE => _('Contains'),
+					TAG_OPERATOR_NOT_EXISTS => _('Does not exist'),
+					TAG_OPERATOR_NOT_EQUAL => _('Does not equal'),
+					TAG_OPERATOR_NOT_LIKE => _('Does not contain')
+				]))
+				->setValue($tag['operator'])
+				->setFocusableElementId($field->getName().'-'.$i.'-operator-select')
+				->setId($field->getName().'_'.$i.'_operator');
+
+			if (!$enabled) {
+				$zselect_operator->setDisabled();
+			}
+
 			$tags_table->addRow([
 				(new CTextBox($field->getName().'['.$i.'][tag]', $tag['tag']))
 					->setAttribute('placeholder', _('tag'))
 					->setWidth(ZBX_TEXTAREA_FILTER_SMALL_WIDTH)
 					->setAriaRequired(self::isAriaRequired($field))
 					->setEnabled($enabled),
-				(new CRadioButtonList($field->getName().'['.$i.'][operator]', (int) $tag['operator']))
-					->addValue(_('Contains'), TAG_OPERATOR_LIKE)
-					->addValue(_('Equals'), TAG_OPERATOR_EQUAL)
-					->setModern(true)
-					->setEnabled($enabled),
+				$zselect_operator,
 				(new CTextBox($field->getName().'['.$i.'][value]', $tag['value']))
 					->setAttribute('placeholder', _('value'))
 					->setWidth(ZBX_TEXTAREA_FILTER_SMALL_WIDTH)
 					->setAriaRequired(self::isAriaRequired($field))
+					->setId($field->getName().'_'.$i.'_value')
 					->setEnabled($enabled),
 				(new CCol(
 					(new CButton($field->getName().'['.$i.'][remove]', _('Remove')))
@@ -504,14 +518,23 @@ class CWidgetHelper {
 				->setAttribute('placeholder', _('tag'))
 				->setWidth(ZBX_TEXTAREA_FILTER_SMALL_WIDTH)
 				->setAriaRequired(self::isAriaRequired($field)),
-			(new CRadioButtonList($field->getName().'[#{rowNum}][operator]', TAG_OPERATOR_LIKE))
-				->addValue(_('Contains'), TAG_OPERATOR_LIKE)
-				->addValue(_('Equals'), TAG_OPERATOR_EQUAL)
-				->setModern(true),
+			(new CSelect($field->getName().'[#{rowNum}][operator]'))
+				->addOptions(CSelect::createOptionsFromArray([
+					TAG_OPERATOR_EXISTS => _('Exists'),
+					TAG_OPERATOR_EQUAL => _('Equals'),
+					TAG_OPERATOR_LIKE => _('Contains'),
+					TAG_OPERATOR_NOT_EXISTS => _('Does not exist'),
+					TAG_OPERATOR_NOT_EQUAL => _('Does not equal'),
+					TAG_OPERATOR_NOT_LIKE => _('Does not contain')
+				]))
+				->setValue(TAG_OPERATOR_LIKE)
+				->setFocusableElementId($field->getName().'-#{rowNum}-operator-select')
+				->setId($field->getName().'_#{rowNum}_operator'),
 			(new CTextBox($field->getName().'[#{rowNum}][value]'))
 				->setAttribute('placeholder', _('value'))
 				->setWidth(ZBX_TEXTAREA_FILTER_SMALL_WIDTH)
-				->setAriaRequired(self::isAriaRequired($field)),
+				->setAriaRequired(self::isAriaRequired($field))
+				->setId($field->getName().'_#{rowNum}_value'),
 			(new CCol(
 				(new CButton($field->getName().'[#{rowNum}][remove]', _('Remove')))
 					->addClass(ZBX_STYLE_BTN_LINK)
diff --git a/ui/include/classes/widgets/fields/CWidgetFieldTags.php b/ui/include/classes/widgets/fields/CWidgetFieldTags.php
index c57e5a474e4..8bab1e635d9 100644
--- a/ui/include/classes/widgets/fields/CWidgetFieldTags.php
+++ b/ui/include/classes/widgets/fields/CWidgetFieldTags.php
@@ -33,7 +33,7 @@ class CWidgetFieldTags extends CWidgetField {
 		$this->setSaveType(ZBX_WIDGET_FIELD_TYPE_STR);
 		$this->setValidationRules(['type' => API_OBJECTS, 'fields' => [
 			'tag'		=> ['type' => API_STRING_UTF8, 'flags' => API_REQUIRED, 'length' => 255],
-			'operator'	=> ['type' => API_INT32, 'flags' => API_REQUIRED, 'in' => implode(',', [TAG_OPERATOR_LIKE, TAG_OPERATOR_EQUAL])],
+			'operator'	=> ['type' => API_INT32, 'flags' => API_REQUIRED, 'in' => implode(',', [TAG_OPERATOR_LIKE, TAG_OPERATOR_EQUAL, TAG_OPERATOR_NOT_LIKE, TAG_OPERATOR_NOT_EQUAL, TAG_OPERATOR_EXISTS, TAG_OPERATOR_NOT_EXISTS])],
 			'value'		=> ['type' => API_STRING_UTF8, 'flags' => API_REQUIRED, 'length' => 255]
 		]]);
 		$this->setDefault([]);
@@ -69,8 +69,37 @@ class CWidgetFieldTags extends CWidgetField {
 	 */
 	public function getJavascript() {
 		return 'var tags_table = jQuery("#tags_table_'.$this->getName().'");'.
-			'tags_table.dynamicRows({template: "#tag-row-tmpl"});'.
-			'tags_table.parent().addClass("has-before");';
+
+			'tags_table'.
+				'.dynamicRows({template: "#tag-row-tmpl"})'.
+				'.on("afteradd.dynamicRows", function() {'.
+					// Hide tag value field if operator is "Exists" or "Does not exist". Show tag value field otherwise.
+					'jQuery(this)'.
+						'.find("z-select")'.
+						'.on("change", function() {'.
+							'var num = this.id.match(/'.$this->getName().'_(\d+)_operator/);'.
+
+							'if (num !== null) {'.
+								'jQuery("#'.$this->getName().'_" + num[1] + "_value")'.
+									'.toggle($(this).val() != '.TAG_OPERATOR_EXISTS.
+											'&& $(this).val() != '.TAG_OPERATOR_NOT_EXISTS.
+								');'.
+							'}'.
+						'});'.
+				'});'.
+
+			'tags_table.parent().addClass("has-before");'.
+
+			// Hide tag value field if operator is "Exists" or "Does not exist". Show tag value field otherwise.
+			'$("z-select", tags_table).on("change", function() {'.
+				'var num = this.id.match(/'.$this->getName().'_(\d+)_operator/);'.
+
+				'if (num !== null) {'.
+					'$("#'.$this->getName().'_" + num[1] + "_value").toggle($(this).val() != '.TAG_OPERATOR_EXISTS.
+							'&& $(this).val() != '.TAG_OPERATOR_NOT_EXISTS.
+					');'.
+				'}'.
+			'}).trigger("change");';
 	}
 
 	/**
diff --git a/ui/include/defines.inc.php b/ui/include/defines.inc.php
index 49fe737f61c..a6c5f2fff98 100644
--- a/ui/include/defines.inc.php
+++ b/ui/include/defines.inc.php
@@ -997,10 +997,14 @@ define('EVENT_OBJECT_ITEM',				4);
 define('EVENT_OBJECT_LLDRULE',			5);
 
 // Problem and event tag constants.
-define('TAG_EVAL_TYPE_AND_OR',	0);
-define('TAG_EVAL_TYPE_OR',		2);
-define('TAG_OPERATOR_LIKE',		0);
-define('TAG_OPERATOR_EQUAL',	1);
+define('TAG_EVAL_TYPE_AND_OR',		0);
+define('TAG_EVAL_TYPE_OR',			2);
+define('TAG_OPERATOR_LIKE',			0);
+define('TAG_OPERATOR_EQUAL',		1);
+define('TAG_OPERATOR_NOT_LIKE',		2);
+define('TAG_OPERATOR_NOT_EQUAL',	3);
+define('TAG_OPERATOR_EXISTS',		4);
+define('TAG_OPERATOR_NOT_EXISTS',	5);
 
 define('GRAPH_AGGREGATE_DEFAULT_INTERVAL',	'1h');
 
diff --git a/ui/include/views/configuration.host.list.php b/ui/include/views/configuration.host.list.php
index 6e5fab0233f..fb3066407b4 100644
--- a/ui/include/views/configuration.host.list.php
+++ b/ui/include/views/configuration.host.list.php
@@ -64,13 +64,22 @@ foreach ($filter_tags as $tag) {
 		(new CTextBox('filter_tags['.$i.'][tag]', $tag['tag']))
 			->setAttribute('placeholder', _('tag'))
 			->setWidth(ZBX_TEXTAREA_FILTER_SMALL_WIDTH),
-		(new CRadioButtonList('filter_tags['.$i.'][operator]', (int) $tag['operator']))
-			->addValue(_('Contains'), TAG_OPERATOR_LIKE)
-			->addValue(_('Equals'), TAG_OPERATOR_EQUAL)
-			->setModern(true),
+		(new CSelect('filter_tags['.$i.'][operator]'))
+			->addOptions(CSelect::createOptionsFromArray([
+				TAG_OPERATOR_EXISTS => _('Exists'),
+				TAG_OPERATOR_EQUAL => _('Equals'),
+				TAG_OPERATOR_LIKE => _('Contains'),
+				TAG_OPERATOR_NOT_EXISTS => _('Does not exist'),
+				TAG_OPERATOR_NOT_EQUAL => _('Does not equal'),
+				TAG_OPERATOR_NOT_LIKE => _('Does not contain')
+			]))
+			->setValue($tag['operator'])
+			->setFocusableElementId('filter-tags-'.$i.'-operator-select')
+			->setId('filter_tags_'.$i.'_operator'),
 		(new CTextBox('filter_tags['.$i.'][value]', $tag['value']))
 			->setAttribute('placeholder', _('value'))
-			->setWidth(ZBX_TEXTAREA_FILTER_SMALL_WIDTH),
+			->setWidth(ZBX_TEXTAREA_FILTER_SMALL_WIDTH)
+			->setId('filter_tags_'.$i.'_value'),
 		(new CCol(
 			(new CButton('filter_tags['.$i.'][remove]', _('Remove')))
 				->addClass(ZBX_STYLE_BTN_LINK)
diff --git a/ui/include/views/configuration.template.list.php b/ui/include/views/configuration.template.list.php
index f99c2fded4d..fe81dfa24b6 100644
--- a/ui/include/views/configuration.template.list.php
+++ b/ui/include/views/configuration.template.list.php
@@ -46,13 +46,22 @@ foreach ($filter_tags as $tag) {
 		(new CTextBox('filter_tags['.$i.'][tag]', $tag['tag']))
 			->setAttribute('placeholder', _('tag'))
 			->setWidth(ZBX_TEXTAREA_FILTER_SMALL_WIDTH),
-		(new CRadioButtonList('filter_tags['.$i.'][operator]', (int) $tag['operator']))
-			->addValue(_('Contains'), TAG_OPERATOR_LIKE)
-			->addValue(_('Equals'), TAG_OPERATOR_EQUAL)
-			->setModern(true),
+		(new CSelect('filter_tags['.$i.'][operator]'))
+			->addOptions(CSelect::createOptionsFromArray([
+				TAG_OPERATOR_EXISTS => _('Exists'),
+				TAG_OPERATOR_EQUAL => _('Equals'),
+				TAG_OPERATOR_LIKE => _('Contains'),
+				TAG_OPERATOR_NOT_EXISTS => _('Does not exist'),
+				TAG_OPERATOR_NOT_EQUAL => _('Does not equal'),
+				TAG_OPERATOR_NOT_LIKE => _('Does not contain')
+			]))
+			->setValue($tag['operator'])
+			->setFocusableElementId('filter-tags-'.$i.'-operator-select')
+			->setId('filter_tags_'.$i.'_operator'),
 		(new CTextBox('filter_tags['.$i.'][value]', $tag['value']))
 			->setAttribute('placeholder', _('value'))
-			->setWidth(ZBX_TEXTAREA_FILTER_SMALL_WIDTH),
+			->setWidth(ZBX_TEXTAREA_FILTER_SMALL_WIDTH)
+			->setId('filter_tags_'.$i.'_value'),
 		(new CCol(
 			(new CButton('filter_tags['.$i.'][remove]', _('Remove')))
 				->addClass(ZBX_STYLE_BTN_LINK)
diff --git a/ui/include/views/configuration.triggers.list.php b/ui/include/views/configuration.triggers.list.php
index 660b2efb3a5..7858eee011f 100644
--- a/ui/include/views/configuration.triggers.list.php
+++ b/ui/include/views/configuration.triggers.list.php
@@ -108,13 +108,22 @@ foreach ($filter_tags as $tag) {
 		(new CTextBox('filter_tags['.$i.'][tag]', $tag['tag']))
 			->setAttribute('placeholder', _('tag'))
 			->setWidth(ZBX_TEXTAREA_FILTER_SMALL_WIDTH),
-		(new CRadioButtonList('filter_tags['.$i.'][operator]', (int) $tag['operator']))
-			->addValue(_('Contains'), TAG_OPERATOR_LIKE)
-			->addValue(_('Equals'), TAG_OPERATOR_EQUAL)
-			->setModern(true),
+		(new CSelect('filter_tags['.$i.'][operator]'))
+			->addOptions(CSelect::createOptionsFromArray([
+				TAG_OPERATOR_EXISTS => _('Exists'),
+				TAG_OPERATOR_EQUAL => _('Equals'),
+				TAG_OPERATOR_LIKE => _('Contains'),
+				TAG_OPERATOR_NOT_EXISTS => _('Does not exist'),
+				TAG_OPERATOR_NOT_EQUAL => _('Does not equal'),
+				TAG_OPERATOR_NOT_LIKE => _('Does not contain')
+			]))
+			->setValue($tag['operator'])
+			->setFocusableElementId('filter-tags-'.$i.'-operator-select')
+			->setId('filter_tags_'.$i.'_operator'),
 		(new CTextBox('filter_tags['.$i.'][value]', $tag['value']))
 			->setAttribute('placeholder', _('value'))
-			->setWidth(ZBX_TEXTAREA_FILTER_SMALL_WIDTH),
+			->setWidth(ZBX_TEXTAREA_FILTER_SMALL_WIDTH)
+			->setId('filter_tags_'.$i.'_value'),
 		(new CCol(
 			(new CButton('filter_tags['.$i.'][remove]', _('Remove')))
 				->addClass(ZBX_STYLE_BTN_LINK)
diff --git a/ui/include/views/js/configuration.host.list.js.php b/ui/include/views/js/configuration.host.list.js.php
index 18fa277af32..40f30995761 100644
--- a/ui/include/views/js/configuration.host.list.js.php
+++ b/ui/include/views/js/configuration.host.list.js.php
@@ -29,13 +29,22 @@
 			(new CTextBox('filter_tags[#{rowNum}][tag]'))
 				->setAttribute('placeholder', _('tag'))
 				->setWidth(ZBX_TEXTAREA_FILTER_SMALL_WIDTH),
-			(new CRadioButtonList('filter_tags[#{rowNum}][operator]', TAG_OPERATOR_LIKE))
-				->addValue(_('Contains'), TAG_OPERATOR_LIKE)
-				->addValue(_('Equals'), TAG_OPERATOR_EQUAL)
-				->setModern(true),
+			(new CSelect('filter_tags[#{rowNum}][operator]'))
+				->addOptions(CSelect::createOptionsFromArray([
+					TAG_OPERATOR_EXISTS => _('Exists'),
+					TAG_OPERATOR_EQUAL => _('Equals'),
+					TAG_OPERATOR_LIKE => _('Contains'),
+					TAG_OPERATOR_NOT_EXISTS => _('Does not exist'),
+					TAG_OPERATOR_NOT_EQUAL => _('Does not equal'),
+					TAG_OPERATOR_NOT_LIKE => _('Does not contain')
+				]))
+				->setValue(TAG_OPERATOR_LIKE)
+				->setFocusableElementId('filter-tags-#{rowNum}-operator-select')
+				->setId('filter_tags_#{rowNum}_operator'),
 			(new CTextBox('filter_tags[#{rowNum}][value]'))
 				->setAttribute('placeholder', _('value'))
-				->setWidth(ZBX_TEXTAREA_FILTER_SMALL_WIDTH),
+				->setWidth(ZBX_TEXTAREA_FILTER_SMALL_WIDTH)
+				->setId('filter_tags_#{rowNum}_value'),
 			(new CCol(
 				(new CButton('filter_tags[#{rowNum}][remove]', _('Remove')))
 					->addClass(ZBX_STYLE_BTN_LINK)
@@ -49,7 +58,22 @@
 
 <script type="text/javascript">
 	jQuery(function($) {
-		$('#filter-tags').dynamicRows({template: '#filter-tag-row-tmpl'});
+		$('#filter-tags')
+			.dynamicRows({template: '#filter-tag-row-tmpl'})
+			.on('afteradd.dynamicRows', function() {
+				// Hide tag value field if operator is "Exists" or "Does not exist". Show tag value field otherwise.
+				$(this)
+					.find('z-select')
+					.on('change', function() {
+						var num = this.id.match(/filter_tags_(\d+)_operator/);
+
+						if (num !== null) {
+							$('#filter_tags_' + num[1] + '_value').toggle($(this).val() != <?= TAG_OPERATOR_EXISTS ?>
+									&& $(this).val() != <?= TAG_OPERATOR_NOT_EXISTS ?>
+							);
+						}
+					});
+			});
 
 		$('#filter_monitored_by').on('change', function() {
 			var filter_monitored_by = $('input[name=filter_monitored_by]:checked').val();
@@ -61,5 +85,16 @@
 				$('#filter_proxyids_').multiSelect('disable');
 			}
 		});
+
+		// Hide tag value field if operator is "Exists" or "Does not exist". Show tag value field otherwise.
+		$('#filter-tags z-select').on('change', function() {
+			var num = this.id.match(/filter_tags_(\d+)_operator/);
+
+			if (num !== null) {
+				$('#filter_tags_' + num[1] + '_value').toggle($(this).val() != <?= TAG_OPERATOR_EXISTS ?>
+						&& $(this).val() != <?= TAG_OPERATOR_NOT_EXISTS ?>
+				);
+			}
+		}).trigger('change');
 	});
 </script>
diff --git a/ui/include/views/js/configuration.template.list.js.php b/ui/include/views/js/configuration.template.list.js.php
index bb4f7112dde..61acd6ec28f 100644
--- a/ui/include/views/js/configuration.template.list.js.php
+++ b/ui/include/views/js/configuration.template.list.js.php
@@ -29,13 +29,22 @@
 			(new CTextBox('filter_tags[#{rowNum}][tag]'))
 				->setAttribute('placeholder', _('tag'))
 				->setWidth(ZBX_TEXTAREA_FILTER_SMALL_WIDTH),
-			(new CRadioButtonList('filter_tags[#{rowNum}][operator]', TAG_OPERATOR_LIKE))
-				->addValue(_('Contains'), TAG_OPERATOR_LIKE)
-				->addValue(_('Equals'), TAG_OPERATOR_EQUAL)
-				->setModern(true),
+			(new CSelect('filter_tags[#{rowNum}][operator]'))
+				->addOptions(CSelect::createOptionsFromArray([
+					TAG_OPERATOR_EXISTS => _('Exists'),
+					TAG_OPERATOR_EQUAL => _('Equals'),
+					TAG_OPERATOR_LIKE => _('Contains'),
+					TAG_OPERATOR_NOT_EXISTS => _('Does not exist'),
+					TAG_OPERATOR_NOT_EQUAL => _('Does not equal'),
+					TAG_OPERATOR_NOT_LIKE => _('Does not contain')
+				]))
+				->setValue(TAG_OPERATOR_LIKE)
+				->setFocusableElementId('filter-tags-#{rowNum}-operator-select')
+				->setId('filter_tags_#{rowNum}_operator'),
 			(new CTextBox('filter_tags[#{rowNum}][value]'))
 				->setAttribute('placeholder', _('value'))
-				->setWidth(ZBX_TEXTAREA_FILTER_SMALL_WIDTH),
+				->setWidth(ZBX_TEXTAREA_FILTER_SMALL_WIDTH)
+				->setId('filter_tags_#{rowNum}_value'),
 			(new CCol(
 				(new CButton('filter_tags[#{rowNum}][remove]', _('Remove')))
 					->addClass(ZBX_STYLE_BTN_LINK)
@@ -49,6 +58,32 @@
 
 <script type="text/javascript">
 	jQuery(function($) {
-		$('#filter-tags').dynamicRows({template: '#filter-tag-row-tmpl'});
+		$('#filter-tags')
+			.dynamicRows({template: '#filter-tag-row-tmpl'})
+			.on('afteradd.dynamicRows', function() {
+				// Hide tag value field if operator is "Exists" or "Does not exist". Show tag value field otherwise.
+				$(this)
+					.find('z-select')
+					.on('change', function() {
+						var num = this.id.match(/filter_tags_(\d+)_operator/);
+
+						if (num !== null) {
+							$('#filter_tags_' + num[1] + '_value').toggle($(this).val() != <?= TAG_OPERATOR_EXISTS ?>
+									&& $(this).val() != <?= TAG_OPERATOR_NOT_EXISTS ?>
+							);
+						}
+					});
+			});
+
+		// Hide tag value field if operator is "Exists" or "Does not exist". Show tag value field otherwise.
+		$('#filter-tags z-select').on('change', function() {
+			var num = this.id.match(/filter_tags_(\d+)_operator/);
+
+			if (num !== null) {
+				$('#filter_tags_' + num[1] + '_value').toggle($(this).val() != <?= TAG_OPERATOR_EXISTS ?>
+						&& $(this).val() != <?= TAG_OPERATOR_NOT_EXISTS ?>
+				);
+			}
+		}).trigger('change');
 	});
 </script>
diff --git a/ui/include/views/js/configuration.triggers.list.js.php b/ui/include/views/js/configuration.triggers.list.js.php
index 11fe3f89748..99bb7bb233c 100644
--- a/ui/include/views/js/configuration.triggers.list.js.php
+++ b/ui/include/views/js/configuration.triggers.list.js.php
@@ -29,13 +29,22 @@
 			(new CTextBox('filter_tags[#{rowNum}][tag]'))
 				->setAttribute('placeholder', _('tag'))
 				->setWidth(ZBX_TEXTAREA_FILTER_SMALL_WIDTH),
-			(new CRadioButtonList('filter_tags[#{rowNum}][operator]', TAG_OPERATOR_LIKE))
-				->addValue(_('Contains'), TAG_OPERATOR_LIKE)
-				->addValue(_('Equals'), TAG_OPERATOR_EQUAL)
-				->setModern(true),
+			(new CSelect('filter_tags[#{rowNum}][operator]'))
+				->addOptions(CSelect::createOptionsFromArray([
+					TAG_OPERATOR_EXISTS => _('Exists'),
+					TAG_OPERATOR_EQUAL => _('Equals'),
+					TAG_OPERATOR_LIKE => _('Contains'),
+					TAG_OPERATOR_NOT_EXISTS => _('Does not exist'),
+					TAG_OPERATOR_NOT_EQUAL => _('Does not equal'),
+					TAG_OPERATOR_NOT_LIKE => _('Does not contain')
+				]))
+				->setValue(TAG_OPERATOR_LIKE)
+				->setFocusableElementId('filter-tags-#{rowNum}-operator-select')
+				->setId('filter_tags_#{rowNum}_operator'),
 			(new CTextBox('filter_tags[#{rowNum}][value]'))
 				->setAttribute('placeholder', _('value'))
-				->setWidth(ZBX_TEXTAREA_FILTER_SMALL_WIDTH),
+				->setWidth(ZBX_TEXTAREA_FILTER_SMALL_WIDTH)
+				->setId('filter_tags_#{rowNum}_value'),
 			(new CCol(
 				(new CButton('filter_tags[#{rowNum}][remove]', _('Remove')))
 					->addClass(ZBX_STYLE_BTN_LINK)
@@ -49,7 +58,33 @@
 
 <script type="text/javascript">
 	jQuery(function($) {
-		$('#filter-tags').dynamicRows({template: '#filter-tag-row-tmpl'});
+		$('#filter-tags')
+			.dynamicRows({template: '#filter-tag-row-tmpl'})
+			.on('afteradd.dynamicRows', function() {
+				// Hide tag value field if operator is "Exists" or "Does not exist". Show tag value field otherwise.
+				$(this)
+					.find('z-select')
+					.on('change', function() {
+						var num = this.id.match(/filter_tags_(\d+)_operator/);
+
+						if (num !== null) {
+							$('#filter_tags_' + num[1] + '_value').toggle($(this).val() != <?= TAG_OPERATOR_EXISTS ?>
+									&& $(this).val() != <?= TAG_OPERATOR_NOT_EXISTS ?>
+							);
+						}
+					});
+			});
+
+		// Hide tag value field if operator is "Exists" or "Does not exist". Show tag value field otherwise.
+		$('#filter-tags z-select').on('change', function() {
+			var num = this.id.match(/filter_tags_(\d+)_operator/);
+
+			if (num !== null) {
+				$('#filter_tags_' + num[1] + '_value').toggle($(this).val() != <?= TAG_OPERATOR_EXISTS ?>
+						&& $(this).val() != <?= TAG_OPERATOR_NOT_EXISTS ?>
+				);
+			}
+		}).trigger('change');
 
 		$('#filter_state')
 			.on('change', function() {
diff --git a/ui/js/class.tabfilter.js b/ui/js/class.tabfilter.js
index f7b75f58017..9de4f8555c4 100644
--- a/ui/js/class.tabfilter.js
+++ b/ui/js/class.tabfilter.js
@@ -77,7 +77,7 @@ class CTabFilter extends CBaseComponent {
 	}
 
 	/**
-	 * Ensures item label is visible in tab filter navgation.
+	 * Ensures item label is visible in tab filter navigation.
 	 *
 	 * @param {CTabfilterItem} item    Filter item object.
 	 */
diff --git a/ui/js/main.js b/ui/js/main.js
index 27db6061c1a..b251a4aaeca 100644
--- a/ui/js/main.js
+++ b/ui/js/main.js
@@ -793,8 +793,8 @@ function getConditionFormula(conditions, evalType) {
 			$row = $(template.evaluate($.extend(data, options.dataCallback(data))));
 
 			for (const name in data) {
-				// Set 'select' value.
-				$row.find('[name$="[' + counter + '][' + name + ']"] option[value="' + data[name] + '"]')
+				// Set 'z-select' value.
+				$row.find('z-select[name$="[' + counter + '][' + name + ']"]').val(data[name])
 					.attr('selected', 'selected');
 
 				// Set 'radio' value.