Problems count mode (#1493)

* Problems count mode

* Use tooltip from grafana ui

* Add editors for new modes

* Fix macro mode

* Fix bugs

* Unify editors to use one Triggers editor for all count queries

* Use time range toggle for triggers query, #918

* Add item tags suport for triggers count mode

* Fix triggers count by items

* Use data frames for triggers data, #1441

* Return empty result if no items found

* Add migration for problems count mode

* bump version to 4.3.0-pre

* Add zip task to makefile

* Add schema to query model

* Minor refactor

* Refactor: move components to separate files

* Minor refactor

* Support url in event tags

* Add tooltip with link url

* Update grafana packages

* Fix adding new problems panel

* ProblemDetails: rewrite as a functional component

* minor refactor

src/styles/_panel-problems.scss

@@ -237,9 +237,9 @@
       transition-property: opacity, max-height;
 
       &.show {
-        max-height: 32rem;
+        max-height: 40rem;
         opacity: 1;
-        box-shadow: inset -3px 3px 10px $problem-container-shadow;
+        box-shadow: inset -3px 3px 5px #33b5ec4f;
       }
 
       .problem-details-row {
@@ -268,6 +268,7 @@
         padding: 0.5rem 1rem 0.5rem 1.2rem;
         display: flex;
         flex-direction: column;
+        white-space: pre-line;
       }
 
       .problem-description-row {
@@ -281,7 +282,7 @@
           &:after {
             content: "";
             text-align: right;
-            position: absolute;
+            position: inherit;
             bottom: 0;
             right: 0;
             width: 70%;
@@ -292,10 +293,19 @@
 
         .description-label {
           font-weight: 500;
-          font-style: italic;
+          // font-style: italic;
           color: $text-muted;
           cursor: pointer;
         }
+
+        .description-delimiter {
+          border-bottom: solid 2px #f9f9f91c;
+          margin-top: 10px;
+        }
+
+        .description-expression {
+          white-space: normal;
+        }
       }
 
       .problem-age {
@@ -306,11 +316,11 @@
         padding-top: 0.8rem;
         padding-bottom: 0.8rem;
         margin-top: auto;
+        position: relative;
       }
 
       .problem-items-row {
-        position: relative;
-        height: 1.5rem;
+        position: inherit;
         overflow: hidden;
 
         &:after {
@@ -326,7 +336,7 @@
       }
 
       .problem-item {
-        display: flex;
+        display: inherit;
 
         .problem-item-name {
           color: $text-muted;
@@ -334,6 +344,9 @@
 
         .problem-item-value {
           font-weight: 500;
+	  overflow: auto;
+	  display: -webkit-box;
+	  max-height: 60px;
         }
       }
 
@@ -412,6 +425,7 @@
       .problem-ack-list {
         display: flex;
         overflow: auto;
+        white-space: pre-line;
 
         .problem-ack-col {
           display: flex;

src/styles/_variables.dark.scss

@@ -9,7 +9,7 @@ $zbx-card-background-stop: rgba(38, 38, 40, 0.8);
 $action-button-color: $blue-dark;
 $action-button-text-color: $gray-4;
 
-$problems-border-color: #353535;
+$problems-border-color: #33b5e554;
 $problems-table-stripe: $dark-3;
 $problems-table-row-hovered: lighten($problems-table-stripe, 4%);
 $problems-table-row-hovered-shadow-color: rgba($blue, 0.5);