.......... [ZBX-20049] updated to latest master; no conflicts

9 files changed, 284 insertions, 169 deletions

diff --git a/sass/stylesheets/sass/components/_color-picker.scss b/sass/stylesheets/sass/components/_color-picker.scss
new file mode 100755
index 00000000000..668c08977a8
--- /dev/null
+++ b/sass/stylesheets/sass/components/_color-picker.scss
@@ -0,0 +1,94 @@
+.color-picker,
+.color-picker-dialogue {
+	.color-picker-preview {
+		position: relative;
+		background: url($sprite-path) no-repeat -323px -411px;
+		border: 1px solid $form-border-color;
+		color: $font-color;
+	}
+
+	.use-default {
+		background: none;
+
+		&::after {
+			content: attr(data-use-default);
+			position: absolute;
+			top: 0;
+			right: 0;
+			left: 0;
+			text-align: center;
+			line-height: 22px;
+		}
+	}
+}
+
+.color-picker {
+	display: inline-block;
+	line-height: 24px;
+
+	.color-picker-preview {
+		padding: 0;
+		background-position: -321px -409px;
+		width: 24px;
+		vertical-align: top;
+	}
+
+	input:disabled + button {
+		pointer-events: none;
+		background: $form-disabled-font-color !important;
+		border-color: $form-disabled-font-color;
+	}
+}
+
+.color-picker-dialogue {
+	> div {
+		&:first-of-type {
+			margin-bottom: 5px;
+		}
+
+		&:not(:first-of-type) {
+			button {
+				padding: 0;
+				width: 20px;
+				min-height: 20px;
+				border: 1px solid $ui-bg-color;
+				border-radius: 0;
+				vertical-align: middle;
+				transition: none;
+
+				&:hover,
+				&:focus {
+					border-color: $form-border-focus-color;
+					box-shadow: inset 0 0 0 1px $ui-bg-color;
+				}
+
+				&:active {
+					box-shadow: inset 0 0 0 2px $ui-bg-color;
+				}
+			}
+		}
+	}
+
+	.color-picker-input {
+		position: relative;
+		display: inline-block;
+		margin-right: 3px;
+
+		.color-picker-preview {
+			position: absolute;
+			top: 2px;
+			left: 2px;
+			width: 18px;
+			height: 18px;
+
+			&:after {
+				line-height: 18px;
+			}
+		}
+
+		input {
+			padding-left: 25px;
+		}
+	}
+}
+
diff --git a/sass/stylesheets/sass/components/_subfilter.scss b/sass/stylesheets/sass/components/_subfilter.scss
new file mode 100755
index 00000000000..52ffa81361f
--- /dev/null
+++ b/sass/stylesheets/sass/components/_subfilter.scss
@@ -0,0 +1,47 @@
+.subfilter-option-grid {
+	grid-template-columns: minmax(75px, max-content) auto;
+	display: grid;
+	margin: 5px 0;
+
+	.subfilter-options {
+		grid-column: 2 / -1;
+	}
+}
+
+.subfilter,
+.subfilter-enabled {
+	display: inline-block;
+	height: 18px;
+	position: relative;
+}
+
+.subfilter {
+	margin-right: 10px;
+	white-space: nowrap;
+}
+
+.subfilter-enabled {
+	background-color: $ui-bg-selected-color;
+	border-radius: 2px;
+	color: $font-selected-color;
+	padding: 0 4px;
+
+	.link-action {
+		color: $font-selected-color;
+		text-decoration: none;
+
+		&:focus {
+			color: $font-selected-color;
+			border-bottom: 2px solid rgba($font-selected-color, .7);
+		}
+
+		&:hover {
+			color: $font-selected-color;
+			border-bottom: 1px solid rgba($font-selected-color, .7);
+		}
+	}
+
+	sup {
+		color: lighten($ui-bg-selected-color, 25%);
+	}
+}
diff --git a/sass/stylesheets/sass/components/_tabfilter.scss b/sass/stylesheets/sass/components/_tabfilter.scss
index f4c9abf47c3..7736a75ff4c 100644
--- a/sass/stylesheets/sass/components/_tabfilter.scss
+++ b/sass/stylesheets/sass/components/_tabfilter.scss
@@ -31,6 +31,13 @@ $tab-label-counter-bg-color: $form-disabled-bg-color;
 		background-color: $ui-bg-color;
 		padding: 10px 0;
 		margin-bottom: 6px;
+
+		&.tabfilter-collapsed {
+			.tabfilter-tabs-container,
+			.form-buttons {
+				display: none;
+			}
+		}
 	}
 
 	/* Top navigation labels */
@@ -162,7 +169,7 @@ $tab-label-counter-bg-color: $form-disabled-bg-color;
 			pointer-events: none;
 		}
 
-		.icon-home.tabfilter-item-link[data-counter]::after {
+		.icon-filter.tabfilter-item-link[data-counter]::after {
 			display: none;
 		}
 	}
@@ -226,16 +233,16 @@ $tab-label-counter-bg-color: $form-disabled-bg-color;
 	}
 }
 
-.icon-home::before {
+.icon-filter::before {
 	display: block;
-	width: 22px;
+	width: 24px;
 	height: 24px;
 	content: '';
 	// white icon
-	background: url($sprite-path) no-repeat -433px -510px;
+	background: url($sprite-path) no-repeat -87px -547px;
 }
 
-.selected.expanded .icon-home::before {
+.selected.expanded .icon-filter::before {
 	// grey icon
-	background: url($sprite-path) no-repeat -121px -510px;
+	background-position: -246px -547px;
 }
diff --git a/sass/stylesheets/sass/components/_z-bar-gauge.scss b/sass/stylesheets/sass/components/_z-bar-gauge.scss
new file mode 100755
index 00000000000..2baf0c85ab3
--- /dev/null
+++ b/sass/stylesheets/sass/components/_z-bar-gauge.scss
@@ -0,0 +1,13 @@
+z-bar-gauge {
+	position: relative;
+	display: block;
+	height: 24px;
+
+	&::part(bar) {
+		position: absolute;
+		top: 0;
+		left: 0;
+		border: 1px solid $form-border-color;
+		border-radius: 3px;
+	}
+}
diff --git a/sass/stylesheets/sass/components/dashboard/_widget-svggraph.scss b/sass/stylesheets/sass/components/dashboard/_widget-svggraph.scss
new file mode 100755
index 00000000000..8f570c1a4f8
--- /dev/null
+++ b/sass/stylesheets/sass/components/dashboard/_widget-svggraph.scss
@@ -0,0 +1,10 @@
+// Widget configuration.
+
+.overlay-dialogue.modal-popup {
+	.dashboard-grid-widget-svggraph {
+		.table-forms-container {
+			border: 1px solid $ui-border-color;
+		}
+	}
+}
+
diff --git a/sass/stylesheets/sass/components/dashboard/_widget-tophosts.scss b/sass/stylesheets/sass/components/dashboard/_widget-tophosts.scss
new file mode 100644
index 00000000000..7595adc7fc9
--- /dev/null
+++ b/sass/stylesheets/sass/components/dashboard/_widget-tophosts.scss
@@ -0,0 +1,37 @@
+// Widget configuration.
+
+form.dashboard-grid-widget-tophosts {
+	$width-small: 150px;
+
+	#list_columns .text {
+		@extend %overflow-ellipsis;
+		max-width: $width-small;
+	}
+
+	#column {
+		max-width: $width-small;
+	}
+}
+
+// Widget view.
+
+div.dashboard-grid-widget-tophosts {
+	$bar-gauge-height: 20px;
+
+	.list-table th.center {
+		text-align: center;
+	}
+
+	td {
+		line-height: $bar-gauge-height;
+	}
+
+	.link-action {
+		white-space: nowrap;
+	}
+
+	z-bar-gauge {
+		min-width: 64px;
+		height: $bar-gauge-height;
+	}
+}
diff --git a/sass/stylesheets/sass/dark-theme.scss b/sass/stylesheets/sass/dark-theme.scss
index fa41e6d02f7..f8170f785ba 100644
--- a/sass/stylesheets/sass/dark-theme.scss
+++ b/sass/stylesheets/sass/dark-theme.scss
@@ -442,3 +442,8 @@ $toc-title-bg-color: #4f4f4f;
 		content: "";
 	}
 }
+
+.selected.expanded .icon-filter::before {
+	// grey icon
+	background-position: -87px -547px;
+}
diff --git a/sass/stylesheets/sass/hc-dark.scss b/sass/stylesheets/sass/hc-dark.scss
index 08689d0e2f6..0fb08f173f4 100644
--- a/sass/stylesheets/sass/hc-dark.scss
+++ b/sass/stylesheets/sass/hc-dark.scss
@@ -1521,14 +1521,14 @@ td.inactive-bg {
 
 .filter-container.tabfilter-container {
 
-	.selected.expanded .icon-home::before {
+	.selected.expanded .icon-filter::before {
 		// white icon
-		background: url($sprite-path) no-repeat -433px -510px;
+		background: url($sprite-path) no-repeat -87px -547px;
 	}
 
-	.icon-home::before {
+	.icon-filter::before {
 		// black icon
-		background: url($sprite-path) no-repeat -281px -510px;
+		background: url($sprite-path) no-repeat -246px -547px;
 	}
 
 	.tabfilter-item-label {
diff --git a/sass/stylesheets/sass/screen.scss b/sass/stylesheets/sass/screen.scss
index c7aef8359e2..b86c5785287 100644
--- a/sass/stylesheets/sass/screen.scss
+++ b/sass/stylesheets/sass/screen.scss
@@ -28,8 +28,10 @@ $browser-sprite-path: '../img/browser-sprite.png?20211222';
 @import "layout/form-grid";
 
 @import "components/buttons";
+@import "components/color-picker";
 @import "components/dashboard/dashboard";
 @import "components/dashboard/widget-item";
+@import "components/dashboard/widget-tophosts";
 @import "components/diff";
 @import "components/form-search";
 @import "components/inline-filter";
@@ -38,11 +40,14 @@ $browser-sprite-path: '../img/browser-sprite.png?20211222';
 @import "components/message-box";
 @import "components/radio-list-control";
 @import "components/service/info";
+@import "components/subfilter";
 @import "components/tabfilter";
 @import "components/toc";
+@import "components/z-bar-gauge";
 @import "components/z-select";
 
 @import "components/dashboard/widget-slareport";
+@import "components/dashboard/widget-svggraph";
 
 .link-action {
 	border-bottom: 1px dotted;
@@ -296,17 +301,26 @@ form {
 	.action-container {
 		display: flex;
 		width: 100%;
+		height: 18px;
+		line-height: 18px;
 
-		.label {
+		.link-action {
+			height: 16px;
+			min-width: 1em;
 			@extend %overflow-ellipsis;
 		}
 
-		.separator {
-			margin-right: 4px;
+		[class*='icon-'] {
+			flex-shrink: 0;
 		}
 
-		[class*='icon-'] {
+		.rel-container {
+			display: flex;
+		}
+
+		.separator {
 			flex-shrink: 0;
+			margin-right: 4px;
 		}
 	}
 
@@ -494,25 +508,6 @@ form {
 				margin-left: 2px;
 			}
 		}
-
-		.action-container {
-			height: 18px;
-			line-height: 18px;
-
-			.rel-container {
-				display: flex;
-			}
-
-			.link-action {
-				height: 16px;
-				min-width: 1em;
-				@extend %overflow-ellipsis;
-			}
-
-			.separator {
-				flex-shrink: 0;
-			}
-		}
 	}
 
 	thead th {
@@ -1085,43 +1080,6 @@ form {
 	}
 }
 
-.subfilter,
-.subfilter-enabled {
-	display: inline-block;
-	height: 18px;
-	position: relative;
-}
-
-.subfilter {
-	margin-right: 10px;
-}
-
-.subfilter-enabled {
-	background-color: $ui-bg-selected-color;
-	border-radius: 2px;
-	color: $font-selected-color;
-	padding: 0 4px;
-
-	.link-action {
-		color: $font-selected-color;
-		text-decoration: none;
-
-		&:focus {
-			color: $font-selected-color;
-			border-bottom: 2px solid rgba($font-selected-color, .7);
-		}
-
-		&:hover {
-			color: $font-selected-color;
-			border-bottom: 1px solid rgba($font-selected-color, .7);
-		}
-	}
-
-	sup {
-		color: lighten($ui-bg-selected-color, 25%);
-	}
-}
-
 .filter-forms {
 	margin: 0 auto;
 	text-align: center;
@@ -3049,10 +3007,10 @@ $form-icon-btn: (
 			overflow: auto;
 			overflow-x: hidden;
 			width: 100%;
-			max-height: calc(100vh - 190px);
+			max-height: calc(100vh - 220px);
 			max-width: inherit;
-			margin: 0 -10px 8px;
-			padding: 2px 10px;
+			margin: 0 -10px 10px;
+			padding: 0 10px;
 			position: relative;
 			@extend %webkit-scrollbar;
 
@@ -3115,22 +3073,27 @@ $form-icon-btn: (
 		}
 	}
 
-	&.sticked-to-top {
-		top: 50px;
-	}
-
 	&.modal-popup {
+		top: 50px;
 		max-width: 1024px;
 
+		&.modal-popup-small {
+			max-width: 450px;
+			width: 100%;
+		}
+
 		&.modal-popup-medium {
 			min-width: 450px;
 		}
 
-		&.modal-popup-small {
-			max-width: 450px;
+		&.modal-popup-large {
 			width: 100%;
 		}
 
+		&.modal-popup-generic {
+			min-width: 650px;
+		}
+
 		&.modal-popup-static {
 			max-width: 700px;
 			width: 100%;
@@ -3141,10 +3104,6 @@ $form-icon-btn: (
 			width: 100%;
 		}
 
-		&.modal-popup-generic {
-			min-width: 650px;
-		}
-
 		&.modal-popup-fullscreen {
 			width: calc(100vw - 40px);
 			max-width: calc(100vw - 40px);
@@ -3211,7 +3170,7 @@ $form-icon-btn: (
 	}
 
 	.dashboard-widget-head {
-		margin: -10px -10px 4px;
+		margin: -10px -10px 6px;
 	}
 
 	.maps-container {
@@ -4143,6 +4102,16 @@ a.link-action {
 	@extend %overflow-ellipsis;
 	border-radius: 2px;
 
+	a.link-action {
+		color: inherit !important;
+		border-bottom: none;
+
+		&:hover {
+			text-decoration: underline;
+			border-bottom: none;
+		}
+	}
+
 	&:last-child {
 		margin: 0;
 	}
@@ -4322,91 +4291,6 @@ td.inactive-bg {
 	}
 }
 
-// Color picker.
-.color-picker {
-	height: 20px;
-	white-space: nowrap;
-
-	div {
-		display: inline-block;
-		width: 18px;
-		height: 18px;
-		border: 1px solid $ui-bg-color;
-
-		&:hover {
-			border-color: $alt-dark-blue;
-			box-shadow: inset 0 0 0 1px $ui-bg-color;
-			cursor: pointer;
-		}
-
-		&:active {
-			box-shadow: inset 0 0 0 2px $ui-bg-color;
-			cursor: pointer;
-		}
-	}
-}
-
-.input-color-picker {
-	display: inline-block;
-	vertical-align: middle;
-
-	div {
-		width: 18px;
-		height: 18px;
-		background: url($sprite-path) no-repeat -323px -411px;
-		border: 1px solid $form-border-color;
-		margin: 1px;
-		cursor: pointer;
-
-		&:focus {
-			border-color: $form-border-focus-color;
-			outline: none;
-		}
-	}
-
-	div.use-default {
-		background: none;
-		position: relative;
-
-		&::after {
-			content: attr(data-use-default);
-			position: absolute;
-			text-align: center;
-			line-height: 18px;
-			right: 0;
-			left: 0;
-		}
-	}
-
-	input:disabled + div {
-		cursor: default;
-		background: $form-disabled-font-color !important;
-		border-color: $form-disabled-font-color;
-	}
-
-	input[type="text"] {
-		padding-left: 25px;
-	}
-}
-
-.color-picker-controls {
-	margin-bottom: 5px;
-
-	.input-color-picker {
-		position: relative;
-		cursor: default;
-		margin-top: -2px;
-
-		div {
-			position: absolute;
-			border-width: 1px;
-			margin: 0px;
-			left: 2px;
-			top: 2px;
-		}
-	}
-}
-
 // Preloader.
 @keyframes is-loading-kf {
 	to {
@@ -4843,6 +4727,7 @@ svg {
 		display: inline-block;
 		margin: 2px 7px 2px 0;
 		white-space: nowrap;
+		vertical-align: middle;
 
 		> div {
 			position: relative;
@@ -4871,6 +4756,15 @@ svg {
 			}
 		}
 	}
+
+	.color-picker {
+		.color-picker-preview {
+			margin: 1px;
+			width: 20px;
+			min-height: 20px;
+			background-position: -323px -411px;
+		}
+	}
 }
 
 .list-accordion-foot {
@@ -5782,6 +5676,13 @@ $range-input-width: 31px;
 		margin-right: 0;
 		margin-left: 0;
 	}
+
+	.ui-tabs-nav {
+		position: sticky;
+		top: 0;
+		background: $header-bg-color;
+		z-index: 3;
+	}
 }
 
 // Screen reader.
@@ -6405,6 +6306,7 @@ z-select,
 }
 
 .modal-popup-medium,
+.modal-popup-large,
 .modal-popup-static,
 .modal-popup-preprocessing {
 	.table-forms-container {