From 73a29a96ac35e0acd26b8466c78254800947afe8 Mon Sep 17 00:00:00 2001
From: liangling <lingliang1100@gmail.com>
Date: Thu, 6 Jun 2024 19:25:42 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=8E=BB=E9=99=A4mixed=E9=85=8D?=
 =?UTF-8?q?=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/alert/src/sass/query.scss      | 608 +++++++++++++++++++----------
 src/event/src/sass/query.scss      |   4 +-
 src/timeseries/src/plugin.json     |   1 -
 src/timeseries/src/sass/query.scss | 608 +++++++++++++++++++----------
 4 files changed, 808 insertions(+), 413 deletions(-)

diff --git a/src/alert/src/sass/query.scss b/src/alert/src/sass/query.scss
index c500cb1..c5e40d9 100644
--- a/src/alert/src/sass/query.scss
+++ b/src/alert/src/sass/query.scss
@@ -4,14 +4,16 @@
   justify-content: center;
   width: 32px;
   height: 32px;
-  border: 1px solid #dcdee5;
-  color: #979ba5;
   margin-left: -1px;
+  color: #979ba5;
+  border: 1px solid #dcdee5;
+
   &:hover {
     z-index: 99;
     cursor: pointer;
     border-color: #75afff;
   }
+
   .add-icon {
     font-size: 16px;
   }
@@ -21,93 +23,105 @@
     display: flex;
     width: 100%;
     margin: 0;
+
     &-label {
-      flex: 0 0 32px;
-      width: 32px;
-      height: 32px;
       display: flex;
+      flex: 0 0 32px;
       align-items: center;
       justify-content: center;
-      border-radius: 2px;
-      background-color: #6395e7;
+      width: 32px;
+      height: 32px;
       margin-right: 2px;
       color: white;
       cursor: pointer;
+      background-color: #6395e7;
+      border-radius: 2px;
+
       &.is-unchecked {
-        background-color: #f5f6fa;
         color: #979ba5;
+        background-color: #f5f6fa;
       }
     }
+
     &-content {
-      flex: 1;
       display: flex;
+      flex: 1;
+      flex-wrap: wrap;
       height: 100%;
       min-height: 32px;
-      flex-wrap: wrap;
     }
+
     &-tools {
+      display: flex;
       flex: 0 0 24px;
       flex-direction: column;
-      justify-content: space-around;
       align-items: center;
-      background-color: #f5f6fa;
-      border-radius: 2px;
+      justify-content: space-around;
       margin-left: 12px;
       font-size: 12px;
       color: #63656e;
-      display: flex;
       visibility: hidden;
+      background-color: #f5f6fa;
+      border-radius: 2px;
+
       &.multipe-metric {
+        z-index: 999;
         display: flex;
-        width: 48px;
         flex: 0 0 48px;
+        flex-direction: row;
         flex-wrap: wrap;
         justify-content: center;
-        flex-direction: row;
-        z-index: 999;
+        width: 48px;
       }
+
       .source-icon {
         &:hover {
-          cursor: pointer;
           color: #3a84ff;
+          cursor: pointer;
         }
       }
+
       .delete-icon {
         &:hover {
-          cursor: pointer;
           color: #ff5656;
+          cursor: pointer;
         }
       }
     }
+
     &:hover {
       .query-editor-tools {
         visibility: visible;
       }
     }
+
     .svg-icon {
-      margin: 0 4px;
       width: 1em;
       height: 1em;
+      margin: 0 4px;
+      overflow: hidden;
       vertical-align: middle;
       fill: currentColor;
-      overflow: hidden;
     }
   }
+
   .editor-form {
     display: flex;
     margin-bottom: 4px;
+
     &-label {
-      min-width: 56px;
-      padding: 0 16px;
-      height: 32px;
       display: flex;
+      flex-wrap: nowrap;
       align-items: center;
-      background-color: #e7e9ef;
-      color: #313238;
+      min-width: 56px;
+      height: 32px;
+      padding: 0 16px;
       overflow: hidden;
+      color: #313238;
       text-overflow: ellipsis;
       white-space: nowrap;
-      flex-wrap: nowrap;
+      background-color: #e7e9ef;
+
       .label-tip {
         margin-right: -8px;
         margin-left: 8px;
@@ -115,52 +129,59 @@
         cursor: pointer;
       }
     }
+
     &-content {
+      display: flex;
       flex: 1;
       min-height: 32px;
-      display: flex;
     }
   }
+
   .mitric-input {
+    position: relative;
     display: flex;
-    min-width: 350px;
-    background-color: #fffae4;
     width: 100%;
-    position: relative;
+    min-width: 350px;
     height: 32px;
+    background-color: #fffae4;
+
     &.copy-mode {
-      background: white;
       width: 88px;
       min-width: 88px;
+      background: white;
+
       .copy-mode-input {
         display: flex;
         align-items: center;
-        background-color: #f0f1f5;
-        border-radius: 2px;
         width: 88px;
         height: 26px;
         padding-left: 8px;
         color: #63656e;
         cursor: pointer;
+        background-color: #f0f1f5;
+        border-radius: 2px;
+
         .fa-angle-down {
-          margin-left: auto;
-          color: #979ba5;
-          font-size: 12px;
-          width: 12px;
-          height: 12px;
           display: flex;
           align-items: center;
           justify-content: center;
-          overflow: hidden;
+          width: 12px;
+          height: 12px;
           margin-right: 12px;
+          margin-left: auto;
+          overflow: hidden;
+          font-size: 12px;
+          color: #979ba5;
         }
       }
     }
+
     &:hover {
       .ant-cascader-picker-clear {
         opacity: 1;
       }
     }
+
     .ant-cascader-picker-clear {
       position: absolute;
       top: 50%;
@@ -169,116 +190,134 @@
       width: 12px;
       height: 12px;
       margin-top: -6px;
-      color: rgba(0, 0, 0, 0.25);
       font-size: 12px;
       line-height: 12px;
-      background: #fff;
+      color: rgba(0, 0, 0, 0.25);
       cursor: pointer;
+      background: #fff;
       opacity: 0;
       transition:
         color 0.3s ease,
         opacity 0.15s ease;
     }
+
     .metric-label {
       color: #63656e;
+
       &-desc {
         color: #a2a4b3;
       }
     }
+
     &-search {
       position: absolute;
       top: 0;
-      left: 0;
       right: 0;
       bottom: 0;
+      left: 0;
+      z-index: 2;
       display: flex;
+      align-items: center;
       width: 100%;
       height: 32px;
-      align-items: center;
-      z-index: 2;
       background: transparent;
     }
+
     &-name {
-      width: 100%;
+      z-index: 1;
       display: flex;
       align-items: center;
+      width: 100%;
       height: 32px;
-      z-index: 1;
       padding: 4px 11px;
       overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
       color: #bfbfbf;
+      text-overflow: ellipsis;
+      white-space: nowrap;
       border: 1px solid #dcdee5;
     }
   }
+
   .query-formula {
     min-width: 88px;
   }
+
   .interval-input {
     display: flex;
+
     .interval-select {
-      width: 70px;
       flex: 0 0 70px;
+      width: 70px;
+
       &:hover {
         z-index: 99;
       }
     }
+
     .interval-unit {
-      width: 38px;
-      flex: 0 0 38px;
       display: flex;
+      flex: 0 0 38px;
       align-items: center;
       justify-content: center;
-      margin-left: -1px;
+      width: 38px;
       height: 32px;
+      margin-left: -1px;
+
       .ant-select-selector,
       .ant-select-selection-item {
-        padding: 0;
         display: flex;
         align-items: center;
         justify-content: center;
+        padding: 0;
       }
     }
   }
+
   .dimension-input {
     min-width: 150px;
   }
+
   .condition-input {
     display: flex;
     flex: 1;
     flex-wrap: wrap;
+
     &-key {
       min-width: 100px;
-      margin-left: -1px;
       margin-bottom: 4px;
+      margin-left: -1px;
     }
+
     &-method {
       min-width: 32px;
-      color: #3a84ff;
-      font-weight: 700;
-      margin-left: -1px;
       margin-bottom: 4px;
+      margin-left: -1px;
+      font-weight: 700;
+      color: #3a84ff;
     }
+
     &-value {
       min-width: 120px;
       max-width: 100%;
-      margin-left: -1px;
       margin-bottom: 4px;
+      margin-left: -1px;
+
       .ant-select-selector {
         display: flex;
         flex-wrap: nowrap;
         min-height: 32px;
       }
     }
+
     &-condition {
       min-width: 50px;
       max-width: 50px;
       height: 32px;
-      color: #ff9c01;
-      font-weight: 700;
-      margin-left: -1px;
       margin-bottom: 4px;
+      margin-left: -1px;
+      font-weight: 700;
+      color: #ff9c01;
+
       .ant-select-selector,
       .ant-select-selection-item {
         display: flex;
@@ -287,76 +326,90 @@
         padding: 0;
       }
     }
+
     &-add {
-      @include add-icon();
       margin-bottom: 4px;
       background-color: white;
+      @include add-icon();
     }
   }
+
   .ant-select-selection-search-input {
     min-width: 10px !important;
   }
+
   .function-menu {
     display: flex;
+
     &-anchor {
-      width: 100px;
-      height: 32px;
-      background: #fff;
-      border: 1px solid #dcdee5;
       display: flex;
       align-items: center;
+      width: 100px;
+      height: 32px;
       padding: 0 6px;
       color: #c4c6cc;
+      background: #fff;
+      border: 1px solid #dcdee5;
+
       &:hover {
         cursor: pointer;
         border-color: #75afff;
       }
     }
+
     .menu-add {
-      @include add-icon();
       border-left: 1px solid #dcdee5;
+      @include add-icon();
     }
   }
+
   .funtion-input {
     display: flex;
     align-items: center;
-    height: 32px;
     min-width: 50px;
+    height: 32px;
     padding: 0 10px;
-    border: 1px solid #dcdee5;
     margin-left: -1px;
+    border: 1px solid #dcdee5;
+
     &:hover {
+      z-index: 99;
       color: #3a84ff;
       border-color: #75afff;
-      z-index: 99;
     }
+
     &-name {
       &:hover {
         cursor: pointer;
       }
     }
+
     &-param {
       &:hover {
         cursor: pointer;
       }
     }
+
     .param-input {
-      padding: 2px;
-      max-width: 100%;
       width: 60px;
-      border-left: 0;
-      border-right: 0;
+      max-width: 100%;
+      padding: 2px;
       border-top: 0;
+      border-right: 0;
+      border-left: 0;
       box-shadow: none !important;
     }
+
     &-label {
       color: #63656e;
     }
   }
+
   .target-input {
     .ant-select:not(.ant-select-disabled):hover .ant-select-selector {
       z-index: 99;
     }
+
     &-module,
     &-host,
     &-cluster {
@@ -364,33 +417,40 @@
       margin-left: -1px;
     }
   }
+
   .add-metric {
     width: 120px;
     margin-left: 34px;
     border-radius: 2px;
   }
+
   .ant-spin-nested-loading {
     width: 100%;
     height: 100%;
   }
+
   .ant-input-focused,
   .ant-input:focus {
     box-shadow: none !important;
   }
+
   .ant-input-number-handler-wrap {
     display: none;
   }
+
   .ant-input-number-focused,
   .ant-input-number:focus {
     z-index: 99;
     box-shadow: none !important;
   }
+
   .ant-select.ant-select-focused,
   .ant-select:not(.ant-select-disabled):hover {
     .ant-select-selector {
       z-index: 99;
       box-shadow: none !important;
     }
+
     .ant-select-arrow {
       z-index: 100;
     }
@@ -401,34 +461,40 @@
   .ant-dropdown-menu-item,
   .ant-dropdown-menu-submenu-title {
     padding: 0;
+
     .funciton-menu-item {
       display: flex;
       align-items: center;
-      padding: 5px 12px;
       width: 100%;
+      padding: 5px 12px;
     }
   }
 }
+
 .promql-editor {
   display: flex;
   width: 100%;
   height: 100%;
   margin-bottom: 4px;
+
   &-instance {
+    display: flex;
+    flex: 1;
     width: 100%;
     height: 100%;
     min-height: 30px;
-    display: flex;
-    flex: 1;
     border: 1px solid #dcdee5;
+
     .cm-editor {
       flex: 1;
     }
   }
 }
+
 .ant-cascader-menu {
   height: 296px;
 }
+
 .monitor-grafana {
   display: flex;
   width: 100%;
@@ -437,273 +503,315 @@
   color: #63656e;
 
   @include query-editor();
+
   .transform-mode {
     display: flex;
-    width: 100%;
     align-items: center;
-    color: #3a84ff;
+    width: 100%;
     margin: 12px 0;
+    color: #3a84ff;
+
     .search-play {
       display: flex;
       align-items: center;
       justify-content: center;
-      height: 26px;
       width: 26px;
-      border: 1px solid #c4c6cc;
-      border-radius: 2px;
-      background-color: white;
-      color: #979ba5;
+      height: 26px;
       margin-left: auto;
-      cursor: pointer;
       font-size: 12px;
+      color: #979ba5;
+      cursor: pointer;
+      background-color: white;
+      border: 1px solid #c4c6cc;
+      border-radius: 2px;
+
       .fa-play {
         display: flex;
         align-items: center;
         justify-content: center;
-        font-size: 12px;
-        overflow: hidden;
         width: 12px;
         height: 12px;
+        overflow: hidden;
+        font-size: 12px;
       }
     }
+
     .search-auto {
       min-width: 72px;
       height: 26px;
       margin-left: 2px;
       cursor: pointer;
+
       &.is-loading {
-        background: #a3c5fd;
         color: white;
         cursor: not-allowed;
+        background: #a3c5fd;
         border: none;
       }
     }
+
     .icon-wrap {
       display: flex;
-      margin-left: 24px;
       align-items: center;
+      margin-left: 24px;
       cursor: pointer;
+
       .fa-exchange {
         display: flex;
         margin-right: 3px;
       }
+
       &.is-loading {
         color: #c4c6cc;
         cursor: not-allowed;
       }
     }
   }
+
   .addvance-setting {
     display: flex;
     flex-direction: column;
+
     &-title {
       display: flex;
-      align-items: center;
       flex: 0 0 16px;
+      align-items: center;
       height: 16px;
       margin: 12px 0;
+
       .fa-angle-down {
-        margin-right: 6px;
-        font-size: 16px;
         display: flex;
         align-items: center;
         justify-content: center;
-        transform: rotate(-90deg);
+        margin-right: 6px;
+        font-size: 16px;
         transition: all ease-in-out 0.3s;
+        transform: rotate(-90deg);
+
         &.is-open {
           transform: rotate(0deg);
         }
       }
+
       .header-content {
         display: flex;
         align-items: center;
         color: #979ba5;
+
         &-item {
           margin-left: 24px;
         }
       }
+
       &:hover {
         cursor: pointer;
       }
     }
+
     &-content {
       flex: 1;
+
       &.is-hidden {
         display: none;
       }
     }
   }
 }
+
 .key-del {
   display: flex;
   align-items: center;
-  padding: 0 15px;
   height: 32px;
+  padding: 0 15px;
   margin-bottom: -4px;
+
   &:hover {
-    cursor: pointer;
     color: #1890ff;
+    cursor: pointer;
   }
 }
+
 .function-menu {
-  display: flex;
   position: relative;
+  display: flex;
+
   &-anchor {
     display: flex;
     flex: 1;
     cursor: pointer;
+
     .menu-icon {
-      width: 32px;
-      height: 32px;
       display: flex;
       align-items: center;
       justify-content: center;
+      width: 32px;
+      height: 32px;
       font-size: 24px;
+      color: #979ba5;
       border: 1px solid #dcdee5;
       border-radius: 0;
-      color: #979ba5;
+
       &:hover {
+        z-index: 9;
         color: #3a84ff;
-        border-color: #75afff;
         background-color: white;
-        z-index: 9;
+        border-color: #75afff;
       }
     }
+
     .bk-form-input {
       /* stylelint-disable-next-line declaration-no-important */
-      border-color: #dcdee5 !important;
-      border-radius: 0;
+      background-color: white !important;
 
       /* stylelint-disable-next-line declaration-no-important */
-      background-color: white !important;
+      border-color: #dcdee5 !important;
+      border-radius: 0;
     }
   }
 }
+
 .function-menu-panel {
-  color: #63656e;
   display: flex;
   flex-direction: column;
   width: 578px;
   height: 274px;
-  opacity: 1;
-  background: #fff;
   margin: -12px -16px;
+  color: #63656e;
+  background: #fff;
+  opacity: 1;
+
   .panel-search {
-    width: calc(100% - 24px);
     flex: 0 0 32px;
+    width: calc(100% - 24px);
     margin: 0 12px;
     border-top: 0;
-    border-left: 0;
     border-right: 0;
+    border-left: 0;
     box-shadow: none !important;
   }
+
   .panel-list {
-    flex: 1;
-    max-height: 242px;
     display: flex;
+    flex: 1;
     width: 100%;
+    max-height: 242px;
     padding-top: 6px;
+
     .panel-item {
-      flex: 0 0 128px;
-      width: 128px;
-      overflow: auto;
       display: flex;
+      flex: 0 0 128px;
       flex-direction: column;
+      width: 128px;
       padding: 6px 0;
+      overflow: auto;
       border-right: 1px solid #dcdee5;
+
       .list-item {
         display: flex;
+        align-items: center;
         width: 100%;
         height: 32px;
         min-height: 32px;
-        align-items: center;
         padding-left: 12px;
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
+
         .arrow-icon {
-          font-size: 24px;
           display: flex;
-          width: 24px;
-          height: 24px;
           align-items: center;
           justify-content: center;
+          width: 24px;
+          height: 24px;
           margin-left: auto;
+          font-size: 24px;
         }
+
         &.item-active,
         &:hover {
-          background-color: #f4f6fa;
           color: #3a84ff;
           cursor: pointer;
+          background-color: #f4f6fa;
         }
       }
     }
+
     .panel-desc {
       display: flex;
       flex: 1;
-      height: 100%;
-      color: #c4c6cc;
       flex-direction: column;
+      height: 100%;
       padding: 12px 10px;
+      color: #c4c6cc;
+
       .desc-title {
-        flex: 0 0 32px;
         display: flex;
+        flex: 0 0 32px;
         align-items: center;
         color: #63656e;
       }
+
       .desc-content {
-        flex: 1;
         display: flex;
+        flex: 1;
         color: #c4c6cc;
       }
     }
   }
 }
+
 .target-select-all {
-  height: 32px;
-  padding: 5px 12px;
   display: flex;
   align-items: center;
+  height: 32px;
+  padding: 5px 12px;
+
   &:hover {
     cursor: pointer;
     background: #f0f8ff;
   }
 }
+
 .select-list {
   display: flex;
   flex-direction: column;
   max-height: 256px;
   overflow-y: auto;
   overflow-anchor: none;
+
   &-item {
     display: flex;
     flex: 0 0 32px;
-    height: 32px;
-    color: rgba(0, 0, 0, 0.65);
     align-items: center;
+    height: 32px;
     padding: 0 12px;
+    color: rgba(0, 0, 0, 0.65);
+
     &:hover {
       cursor: pointer;
       background-color: #f5f5f5;
     }
+
     &.active {
-      color: rgba(0, 0, 0, 0.65);
       font-weight: 600;
+      color: rgba(0, 0, 0, 0.65);
       background-color: #f0f8ff;
     }
+
     .anticon-check {
-      margin-left: auto;
       width: 12px;
       height: 12px;
+      margin-left: auto;
       color: #4c90ff;
       user-select: none;
     }
   }
 }
+
 .monitor-tooltip {
-  color: #e9edf2;
   padding: 8px;
   font-weight: 500;
+  color: #e9edf2;
   // .ant-tooltip-inner {
   //   background: #3274d9;
   // }
@@ -716,20 +824,25 @@
   //   }
   // }
 }
+
 .ant-tooltip {
   max-width: 600px !important;
 }
+
 .inite-wrapper {
   display: flex;
   width: 100%;
   height: 150px;
 }
+
 .rc-virtual-list-scrollbar {
   width: 4px !important;
+
   .rc-virtual-list-scrollbar-thumb {
     background-color: rgb(165, 165, 165) !important;
   }
 }
+
 .target-input-cluster-dropdown {
   width: auto !important;
   min-width: 100px !important;
@@ -746,161 +859,188 @@
 .popover-metric-title {
   display: flex;
   align-items: center;
+  margin-bottom: 6px;
   font-size: 14px;
   font-weight: 600;
   color: white;
-  margin-bottom: 6px;
 }
+
 .popover-metric-item {
   display: flex;
   align-items: center;
   font-size: 12px;
-  color: white;
   line-height: 20px;
+  color: white;
 }
+
 .ant-cascader-menu {
   height: 296px !important;
 }
+
 .metric-dropdown {
   display: flex;
   flex-direction: column;
   width: 640px;
   height: 452px;
   font-size: 12px;
+
   &-input {
-    padding: 12px 16px 0px;
     display: flex;
     align-items: center;
+    padding: 12px 16px 0px;
+    @keyframes rowup {
+      0% {
+        transform: rotate(0deg);
+      }
+
+      50% {
+        transform: rotate(180deg);
+      }
+
+      100% {
+        transform: rotate(360deg);
+      }
+    }
+
     .reflesh-icon {
       display: flex;
-      color: #3a84ff;
       align-items: center;
       justify-content: center;
       margin-left: 10px;
       font-size: 14px;
+      color: #3a84ff;
       transition: all 0.3s;
+
       &.reflesh-pendding {
         animation: 1s rowup linear infinite normal;
       }
+
       &:hover {
-        cursor: pointer;
         color: #699df4;
-      }
-    }
-    @keyframes rowup {
-      0% {
-        transform: rotate(0deg);
-      }
-      50% {
-        transform: rotate(180deg);
-      }
-      100% {
-        transform: rotate(360deg);
+        cursor: pointer;
       }
     }
   }
+
   &-tag {
     &.tab-empty {
       min-height: 42px;
       border-bottom: 1px solid #dcdee5;
     }
+
     .tab-tag {
       display: flex;
       align-items: center;
       justify-content: center;
-      border-radius: 2px;
-      background: #f0f1f5;
+      height: 22px;
       padding: 0 10px;
-      border: 1px solid transparent;
       color: #63656e;
-      height: 22px;
+      background: #f0f1f5;
+      border: 1px solid transparent;
+      border-radius: 2px;
+
       &:hover {
-        border-color: rgba(58, 132, 255, 0.3);
-        background-color: #edf4ff;
         color: #3a84ff;
         cursor: pointer;
+        background-color: #edf4ff;
+        border-color: rgba(58, 132, 255, 0.3);
       }
     }
+
     .ant-tabs-top {
       height: auto !important;
     }
+
     .ant-tabs-tab {
       padding: 8px 0 12px 0;
     }
+
     .ant-tabs-tab + .ant-tabs-tab {
       margin: 0 0 0 6px;
     }
+
     .ant-tabs-tab.ant-tabs-tab-active .tab-tag {
-      border-color: rgba(58, 132, 255, 0.3);
-      background-color: #edf4ff;
       color: #3a84ff;
+      background-color: #edf4ff;
+      border-color: rgba(58, 132, 255, 0.3);
     }
+
     .ant-tabs-nav {
-      margin-bottom: 0;
       padding-left: 16px;
+      margin-bottom: 0;
     }
+
     .ant-tabs-content-holder {
       display: none;
     }
+
     .ant-tabs-ink-bar {
       display: none;
     }
   }
+
   &-content {
     display: flex;
-    width: 100%;
     flex: 1;
+    width: 100%;
     height: 100%;
+
     .content-list {
       flex: 1;
       max-height: 366px;
+      margin: 0;
       overflow: auto;
       background-color: white;
-      margin: 0;
+
       .metric-item {
         display: flex;
         flex-direction: column;
-        height: 52px;
         justify-content: center;
-        line-height: 22px;
+        height: 52px;
         padding: 0 16px;
+        line-height: 22px;
+
         &-title {
+          position: relative;
           display: flex;
-          height: 22px;
-          line-height: 22px;
           align-items: center;
           max-width: 100%;
-          font-size: 12px;
           height: 22px;
-          position: relative;
+          height: 22px;
+          font-size: 12px;
+          line-height: 22px;
+
           .title-wrap {
+            flex: 1;
             height: 22px;
-            line-height: 22px;
             overflow: hidden;
+            line-height: 22px;
             text-overflow: ellipsis;
             white-space: nowrap;
-            flex: 1;
+
             .title-name {
-              margin-right: 8px;
               // display: inline-flex;
               align-items: center;
+              height: 22px;
+              margin-right: 8px;
               font-size: 14px;
               font-weight: bold;
-              height: 22px;
             }
           }
+
           .copy-icon {
             display: inline-flex;
-            width: 16px;
-            height: 16px;
+            flex: 0 0 16px;
             align-items: center;
             justify-content: center;
+            width: 16px;
+            height: 16px;
             margin-right: auto;
-            flex: 0 0 16px;
+
             svg {
-              fill: #3a84ff;
               width: 16px;
               height: 16px;
+              fill: #3a84ff;
             }
           }
           // .title-alias {
@@ -911,30 +1051,36 @@
           //   height: 22px;
           // }
         }
+
         &-subtitle {
-          height: 20px;
           display: flex;
           align-items: center;
-          color: #979ba5;
+          height: 20px;
           font-size: 12px;
+          color: #979ba5;
         }
+
         &.focus-item {
-          background-color: #f5f7fa;
           cursor: none;
+          background-color: #f5f7fa;
         }
+
         &.is-checked {
           background-color: #e1ecff !important;
         }
+
         &:not(.is-arrow) {
           &:hover {
-            background-color: #e1ecff;
             cursor: pointer;
+            background-color: #e1ecff;
           }
         }
+
         &.is-arrow {
           cursor: none;
         }
       }
+
       .more-loading {
         display: flex;
         flex-direction: column;
@@ -942,59 +1088,68 @@
         justify-content: center;
         margin: 6px 0;
       }
+
       .all-data {
         display: flex;
         align-items: center;
         justify-content: center;
-        color: #979ba5;
         height: 44px;
+        color: #979ba5;
       }
     }
+
     .content-tag {
-      flex: 0 0 160px;
-      width: 160px;
       display: flex;
+      flex: 0 0 160px;
       flex-direction: column;
-      background: #fafbfd;
-      border-left: 1px solid #dcdee5;
+      width: 160px;
       max-height: 366px;
-      overflow: auto;
       padding-top: 8px;
+      overflow: auto;
+      background: #fafbfd;
+      border-left: 1px solid #dcdee5;
+
       &-title {
         display: flex;
-        margin: 0 8px 16px 16px;
-        height: 20px;
         align-items: center;
+        height: 20px;
+        margin: 0 8px 16px 16px;
       }
+
       &-list {
         display: flex;
         flex-direction: column;
+
         .list-item {
+          position: relative;
           display: flex;
           align-items: center;
           margin: 0 12px 12px 16px !important;
           color: #979ba5;
-          position: relative;
+
           &-count {
-            color: #c4c6cc;
-            display: inline-flex;
-            margin-left: auto;
             position: absolute;
             right: 0;
+            display: inline-flex;
+            margin-left: auto;
+            color: #c4c6cc;
           }
         }
+
         .ant-checkbox-input,
         .ant-checkbox-inner {
           top: -3px !important;
         }
       }
     }
+
     .empty-content {
-      width: 100%;
       display: flex;
       flex-direction: column;
-      justify-content: center;
       align-items: center;
+      justify-content: center;
+      width: 100%;
+
       &-icon {
         display: flex;
         align-items: center;
@@ -1002,23 +1157,26 @@
         width: 100%;
         margin-top: 80px;
       }
+
       &-title {
         display: flex;
         margin-top: 14px;
         font-size: 16px;
-        color: #63656e;
         line-height: 22px;
+        color: #63656e;
       }
+
       &-subtitle {
         display: flex;
-        font-size: 12px;
-        line-height: 22px;
         flex-direction: column;
         align-items: center;
-        color: #979ba5;
-        font-size: 12px;
         margin: 8px 0;
+        font-size: 12px;
+        font-size: 12px;
+        line-height: 22px;
+        color: #979ba5;
       }
+
       .text-btn {
         display: inline-flex;
         margin-left: 6px;
@@ -1026,39 +1184,48 @@
         cursor: pointer;
       }
     }
+
     .is-keyword {
       display: inline-flex;
       color: #3a84ff;
     }
+
     .ant-checkbox-checked:after {
       border: 0 !important;
     }
   }
+
   .content-spin {
     flex: 1;
     height: 100%;
+
     .ant-spin-container {
       height: 100%;
     }
   }
+
   .ant-spin-nested-loading {
     width: 100%;
     height: 100%;
+
     .ant-spin-container {
       width: 100%;
       height: 100%;
     }
   }
 }
+
 .mitric-input-popover {
   .ant-popover-inner-content {
     padding: 0;
     background-color: #fafbfd;
   }
 }
+
 .ant-message {
   z-index: 99999 !important;
 }
+
 body {
   &.theme-dark {
     $monitor-font-color: #ccccdc;
@@ -1066,14 +1233,17 @@ body {
     $monitor-border-color: #2c2d36;
     $monitor-label-bg-color: #22252b;
     $monitor-metric-bg-color: #282b31;
+
     .variable-editor,
     .monitor-grafana {
       color: $monitor-font-color !important;
       background-color: $monitor-bg-color !important;
+
       .variable-line-label {
         color: $monitor-font-color !important;
         background: $monitor-label-bg-color !important;
       }
+
       .function-menu-anchor,
       .condition-input-add,
       .search-play {
@@ -1081,105 +1251,131 @@ body {
         background: #191b1f !important;
         border-color: $monitor-border-color !important;
       }
+
       .query-editor-label {
         background-color: #1d417e !important;
       }
+
       .editor-form-label {
-        background-color: $monitor-label-bg-color !important;
         color: $monitor-font-color !important;
+        background-color: $monitor-label-bg-color !important;
       }
+
       .mitric-input {
         background-color: $monitor-bg-color !important;
+
         &-name {
           border-color: $monitor-border-color !important;
         }
+
         .metric-label {
           color: $monitor-font-color !important;
         }
       }
+
       .promql-editor-instance {
-        border-color: $monitor-border-color !important;
         background-color: $monitor-bg-color !important;
+        border-color: $monitor-border-color !important;
       }
+
       .copy-mode-input {
-        background-color: $monitor-bg-color !important;
         color: #eaebf0;
+        background-color: $monitor-bg-color !important;
         border: 1px solid $monitor-border-color !important;
       }
+
       .query-editor-tools {
-        background-color: #35383d !important;
         color: #eaebf0 !important;
+        background-color: #35383d !important;
         border: 1px solid $monitor-border-color !important;
       }
+
       .mitric-input .ant-cascader-picker-clear {
-        background-color: transparent !important;
         color: #63656e !important;
+        background-color: transparent !important;
       }
+
       .menu-add,
       .funtion-input {
         border-color: $monitor-border-color !important;
       }
     }
+
     .metric-dropdown-tag .tab-tag {
-      background-color: $monitor-metric-bg-color !important;
       color: #eaebf0 !important;
+      background-color: $monitor-metric-bg-color !important;
       border: 1px solid $monitor-metric-bg-color !important;
     }
+
     .ant-popover-inner-content {
-      border: 1px solid $monitor-border-color !important;
       background-color: $monitor-bg-color !important;
+      border: 1px solid $monitor-border-color !important;
+
       .content-list {
         background-color: $monitor-bg-color !important;
       }
+
       .focus-item {
         background-color: $monitor-metric-bg-color !important;
       }
+
       .content-tag {
         background-color: $monitor-bg-color !important;
         border-left: 1px solid $monitor-metric-bg-color !important;
       }
     }
+
     .function-menu-panel {
-      background-color: $monitor-bg-color !important;
       color: #eaebf0 !important;
+      background-color: $monitor-bg-color !important;
       border: 1px solid $monitor-border-color !important;
+
       .list-item {
         &.item-active,
         &:hover {
-          background-color: $monitor-metric-bg-color !important;
           color: #3a84ff !important;
           cursor: pointer !important;
+          background-color: $monitor-metric-bg-color !important;
         }
       }
+
       .panel-item {
         border-right-color: $monitor-border-color !important;
       }
     }
+
     .ant-tabs-nav::before {
       border-bottom-color: $monitor-border-color;
     }
+
     .ant-tooltip-inner {
       border: 1px solid $monitor-metric-bg-color !important;
     }
+
     .ant-select-dropdown {
       border: 1px solid $monitor-metric-bg-color !important;
     }
+
     .ant-select-disabled.ant-select:not(.ant-select-customize-input) .ant-select-selector {
+      color: #eaebf0 !important;
       background-color: $monitor-bg-color !important;
       border: 1px solid $monitor-border-color !important;
-      color: #eaebf0 !important;
     }
+
     .metric-dropdown-content .content-list .metric-item:not(.is-arrow):hover,
     .metric-dropdown-content .content-list .metric-item.is-checked {
       background-color: $monitor-metric-bg-color !important;
     }
+
     .cm-content {
       caret-color: white !important;
     }
   }
+
   &.theme-light {
     background-color: #f4f5f5 !important;
   }
+
   a {
     color: inherit;
     text-decoration: none;
@@ -1189,9 +1385,11 @@ body {
     transition: color 0.3s;
     text-decoration-skip: objects;
   }
+
   a:hover {
     color: inherit;
   }
+
   a:active {
     color: #366fd9;
   }
diff --git a/src/event/src/sass/query.scss b/src/event/src/sass/query.scss
index ed7f532..ff3d79d 100644
--- a/src/event/src/sass/query.scss
+++ b/src/event/src/sass/query.scss
@@ -330,7 +330,7 @@
   margin-bottom: 6px;
   font-size: 14px;
   font-weight: 600;
-  color: #313238;
+  color: white;
 }
 
 .popover-metric-item {
@@ -338,7 +338,7 @@
   align-items: center;
   font-size: 12px;
   line-height: 20px;
-  color: #63656e;
+  color: white;
 }
 
 body {
diff --git a/src/timeseries/src/plugin.json b/src/timeseries/src/plugin.json
index 96f3b82..3548514 100644
--- a/src/timeseries/src/plugin.json
+++ b/src/timeseries/src/plugin.json
@@ -5,7 +5,6 @@
   "metrics": true,
   "annotations": false,
   "alerting": true,
-  "mixed": true,
   "queryOptions": {
     "maxDataPoints": true
   },
diff --git a/src/timeseries/src/sass/query.scss b/src/timeseries/src/sass/query.scss
index e185ced..0dfedcd 100644
--- a/src/timeseries/src/sass/query.scss
+++ b/src/timeseries/src/sass/query.scss
@@ -4,14 +4,16 @@
   justify-content: center;
   width: 32px;
   height: 32px;
-  border: 1px solid #dcdee5;
-  color: #979ba5;
   margin-left: -1px;
+  color: #979ba5;
+  border: 1px solid #dcdee5;
+
   &:hover {
     z-index: 99;
     cursor: pointer;
     border-color: #75afff;
   }
+
   .add-icon {
     font-size: 16px;
   }
@@ -21,93 +23,105 @@
     display: flex;
     width: 100%;
     margin: 0;
+
     &-label {
-      flex: 0 0 32px;
-      width: 32px;
-      height: 32px;
       display: flex;
+      flex: 0 0 32px;
       align-items: center;
       justify-content: center;
-      border-radius: 2px;
-      background-color: #6395e7;
+      width: 32px;
+      height: 32px;
       margin-right: 2px;
       color: white;
       cursor: pointer;
+      background-color: #6395e7;
+      border-radius: 2px;
+
       &.is-unchecked {
-        background-color: #f5f6fa;
         color: #979ba5;
+        background-color: #f5f6fa;
       }
     }
+
     &-content {
-      flex: 1;
       display: flex;
+      flex: 1;
+      flex-wrap: wrap;
       height: 100%;
       min-height: 32px;
-      flex-wrap: wrap;
     }
+
     &-tools {
+      display: flex;
       flex: 0 0 24px;
       flex-direction: column;
-      justify-content: space-around;
       align-items: center;
-      background-color: #f5f6fa;
-      border-radius: 2px;
+      justify-content: space-around;
       margin-left: 12px;
       font-size: 12px;
       color: #63656e;
-      display: flex;
       visibility: hidden;
+      background-color: #f5f6fa;
+      border-radius: 2px;
+
       &.multipe-metric {
+        z-index: 999;
         display: flex;
-        width: 48px;
         flex: 0 0 48px;
+        flex-direction: row;
         flex-wrap: wrap;
         justify-content: center;
-        flex-direction: row;
-        z-index: 999;
+        width: 48px;
       }
+
       .source-icon {
         &:hover {
-          cursor: pointer;
           color: #3a84ff;
+          cursor: pointer;
         }
       }
+
       .delete-icon {
         &:hover {
-          cursor: pointer;
           color: #ff5656;
+          cursor: pointer;
         }
       }
     }
+
     &:hover {
       .query-editor-tools {
         visibility: visible;
       }
     }
+
     .svg-icon {
-      margin: 0 4px;
       width: 1em;
       height: 1em;
+      margin: 0 4px;
+      overflow: hidden;
       vertical-align: middle;
       fill: currentColor;
-      overflow: hidden;
     }
   }
+
   .editor-form {
     display: flex;
     margin-bottom: 4px;
+
     &-label {
-      min-width: 56px;
-      padding: 0 16px;
-      height: 32px;
       display: flex;
+      flex-wrap: nowrap;
       align-items: center;
-      background-color: #e7e9ef;
-      color: #313238;
+      min-width: 56px;
+      height: 32px;
+      padding: 0 16px;
       overflow: hidden;
+      color: #313238;
       text-overflow: ellipsis;
       white-space: nowrap;
-      flex-wrap: nowrap;
+      background-color: #e7e9ef;
+
       .label-tip {
         margin-right: -8px;
         margin-left: 8px;
@@ -115,52 +129,59 @@
         cursor: pointer;
       }
     }
+
     &-content {
+      display: flex;
       flex: 1;
       min-height: 32px;
-      display: flex;
     }
   }
+
   .mitric-input {
+    position: relative;
     display: flex;
-    min-width: 350px;
-    background-color: #fffae4;
     width: 100%;
-    position: relative;
+    min-width: 350px;
     height: 32px;
+    background-color: #fffae4;
+
     &.copy-mode {
-      background: white;
       width: 88px;
       min-width: 88px;
+      background: white;
+
       .copy-mode-input {
         display: flex;
         align-items: center;
-        background-color: #f0f1f5;
-        border-radius: 2px;
         width: 88px;
         height: 26px;
         padding-left: 8px;
         color: #63656e;
         cursor: pointer;
+        background-color: #f0f1f5;
+        border-radius: 2px;
+
         .fa-angle-down {
-          margin-left: auto;
-          color: #979ba5;
-          font-size: 12px;
-          width: 12px;
-          height: 12px;
           display: flex;
           align-items: center;
           justify-content: center;
-          overflow: hidden;
+          width: 12px;
+          height: 12px;
           margin-right: 12px;
+          margin-left: auto;
+          overflow: hidden;
+          font-size: 12px;
+          color: #979ba5;
         }
       }
     }
+
     &:hover {
       .ant-cascader-picker-clear {
         opacity: 1;
       }
     }
+
     .ant-cascader-picker-clear {
       position: absolute;
       top: 50%;
@@ -169,116 +190,134 @@
       width: 12px;
       height: 12px;
       margin-top: -6px;
-      color: rgba(0, 0, 0, 0.25);
       font-size: 12px;
       line-height: 12px;
-      background: #fff;
+      color: rgba(0, 0, 0, 0.25);
       cursor: pointer;
+      background: #fff;
       opacity: 0;
       transition:
         color 0.3s ease,
         opacity 0.15s ease;
     }
+
     .metric-label {
       color: #63656e;
+
       &-desc {
         color: #a2a4b3;
       }
     }
+
     &-search {
       position: absolute;
       top: 0;
-      left: 0;
       right: 0;
       bottom: 0;
+      left: 0;
+      z-index: 2;
       display: flex;
+      align-items: center;
       width: 100%;
       height: 32px;
-      align-items: center;
-      z-index: 2;
       background: transparent;
     }
+
     &-name {
-      width: 100%;
+      z-index: 1;
       display: flex;
       align-items: center;
+      width: 100%;
       height: 32px;
-      z-index: 1;
       padding: 4px 11px;
       overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
       color: #bfbfbf;
+      text-overflow: ellipsis;
+      white-space: nowrap;
       border: 1px solid #dcdee5;
     }
   }
+
   .query-formula {
     min-width: 88px;
   }
+
   .interval-input {
     display: flex;
+
     .interval-select {
-      width: 70px;
       flex: 0 0 70px;
+      width: 70px;
+
       &:hover {
         z-index: 99;
       }
     }
+
     .interval-unit {
-      width: 38px;
-      flex: 0 0 38px;
       display: flex;
+      flex: 0 0 38px;
       align-items: center;
       justify-content: center;
-      margin-left: -1px;
+      width: 38px;
       height: 32px;
+      margin-left: -1px;
+
       .ant-select-selector,
       .ant-select-selection-item {
-        padding: 0;
         display: flex;
         align-items: center;
         justify-content: center;
+        padding: 0;
       }
     }
   }
+
   .dimension-input {
     min-width: 150px;
   }
+
   .condition-input {
     display: flex;
     flex: 1;
     flex-wrap: wrap;
+
     &-key {
       min-width: 100px;
-      margin-left: -1px;
       margin-bottom: 4px;
+      margin-left: -1px;
     }
+
     &-method {
       min-width: 32px;
-      color: #3a84ff;
-      font-weight: 700;
-      margin-left: -1px;
       margin-bottom: 4px;
+      margin-left: -1px;
+      font-weight: 700;
+      color: #3a84ff;
     }
+
     &-value {
       min-width: 120px;
       max-width: 100%;
-      margin-left: -1px;
       margin-bottom: 4px;
+      margin-left: -1px;
+
       .ant-select-selector {
         display: flex;
         flex-wrap: nowrap;
         min-height: 32px;
       }
     }
+
     &-condition {
       min-width: 50px;
       max-width: 50px;
       height: 32px;
-      color: #ff9c01;
-      font-weight: 700;
-      margin-left: -1px;
       margin-bottom: 4px;
+      margin-left: -1px;
+      font-weight: 700;
+      color: #ff9c01;
+
       .ant-select-selector,
       .ant-select-selection-item {
         display: flex;
@@ -287,76 +326,90 @@
         padding: 0;
       }
     }
+
     &-add {
-      @include add-icon();
       margin-bottom: 4px;
       background-color: white;
+      @include add-icon();
     }
   }
+
   .ant-select-selection-search-input {
     min-width: 10px !important;
   }
+
   .function-menu {
     display: flex;
+
     &-anchor {
-      width: 100px;
-      height: 32px;
-      background: #fff;
-      border: 1px solid #dcdee5;
       display: flex;
       align-items: center;
+      width: 100px;
+      height: 32px;
       padding: 0 6px;
       color: #c4c6cc;
+      background: #fff;
+      border: 1px solid #dcdee5;
+
       &:hover {
         cursor: pointer;
         border-color: #75afff;
       }
     }
+
     .menu-add {
-      @include add-icon();
       border-left: 1px solid #dcdee5;
+      @include add-icon();
     }
   }
+
   .funtion-input {
     display: flex;
     align-items: center;
-    height: 32px;
     min-width: 50px;
+    height: 32px;
     padding: 0 10px;
-    border: 1px solid #dcdee5;
     margin-left: -1px;
+    border: 1px solid #dcdee5;
+
     &:hover {
+      z-index: 99;
       color: #3a84ff;
       border-color: #75afff;
-      z-index: 99;
     }
+
     &-name {
       &:hover {
         cursor: pointer;
       }
     }
+
     &-param {
       &:hover {
         cursor: pointer;
       }
     }
+
     .param-input {
-      padding: 2px;
-      max-width: 100%;
       width: 60px;
-      border-left: 0;
-      border-right: 0;
+      max-width: 100%;
+      padding: 2px;
       border-top: 0;
+      border-right: 0;
+      border-left: 0;
       box-shadow: none !important;
     }
+
     &-label {
       color: #63656e;
     }
   }
+
   .target-input {
     .ant-select:not(.ant-select-disabled):hover .ant-select-selector {
       z-index: 99;
     }
+
     &-module,
     &-host,
     &-cluster {
@@ -364,33 +417,40 @@
       margin-left: -1px;
     }
   }
+
   .add-metric {
     width: 120px;
     margin-left: 34px;
     border-radius: 2px;
   }
+
   .ant-spin-nested-loading {
     width: 100%;
     height: 100%;
   }
+
   .ant-input-focused,
   .ant-input:focus {
     box-shadow: none !important;
   }
+
   .ant-input-number-handler-wrap {
     display: none;
   }
+
   .ant-input-number-focused,
   .ant-input-number:focus {
     z-index: 99;
     box-shadow: none !important;
   }
+
   .ant-select.ant-select-focused,
   .ant-select:not(.ant-select-disabled):hover {
     .ant-select-selector {
       z-index: 99;
       box-shadow: none !important;
     }
+
     .ant-select-arrow {
       z-index: 100;
     }
@@ -401,34 +461,40 @@
   .ant-dropdown-menu-item,
   .ant-dropdown-menu-submenu-title {
     padding: 0;
+
     .funciton-menu-item {
       display: flex;
       align-items: center;
-      padding: 5px 12px;
       width: 100%;
+      padding: 5px 12px;
     }
   }
 }
+
 .promql-editor {
   display: flex;
   width: 100%;
   height: 100%;
   margin-bottom: 4px;
+
   &-instance {
+    display: flex;
+    flex: 1;
     width: 100%;
     height: 100%;
     min-height: 30px;
-    display: flex;
-    flex: 1;
     border: 1px solid #dcdee5;
+
     .cm-editor {
       flex: 1;
     }
   }
 }
+
 .ant-cascader-menu {
   height: 296px;
 }
+
 .monitor-grafana {
   display: flex;
   width: 100%;
@@ -437,273 +503,315 @@
   color: #63656e;
 
   @include query-editor();
+
   .transform-mode {
     display: flex;
-    width: 100%;
     align-items: center;
-    color: #3a84ff;
+    width: 100%;
     margin: 12px 0;
+    color: #3a84ff;
+
     .search-play {
       display: flex;
       align-items: center;
       justify-content: center;
-      height: 26px;
       width: 26px;
-      border: 1px solid #c4c6cc;
-      border-radius: 2px;
-      background-color: white;
-      color: #979ba5;
+      height: 26px;
       margin-left: auto;
-      cursor: pointer;
       font-size: 12px;
+      color: #979ba5;
+      cursor: pointer;
+      background-color: white;
+      border: 1px solid #c4c6cc;
+      border-radius: 2px;
+
       .fa-play {
         display: flex;
         align-items: center;
         justify-content: center;
-        font-size: 12px;
-        overflow: hidden;
         width: 12px;
         height: 12px;
+        overflow: hidden;
+        font-size: 12px;
       }
     }
+
     .search-auto {
       min-width: 72px;
       height: 26px;
       margin-left: 2px;
       cursor: pointer;
+
       &.is-loading {
-        background: #a3c5fd;
         color: white;
         cursor: not-allowed;
+        background: #a3c5fd;
         border: none;
       }
     }
+
     .icon-wrap {
       display: flex;
-      margin-left: 24px;
       align-items: center;
+      margin-left: 24px;
       cursor: pointer;
+
       .fa-exchange {
         display: flex;
         margin-right: 3px;
       }
+
       &.is-loading {
         color: #c4c6cc;
         cursor: not-allowed;
       }
     }
   }
+
   .addvance-setting {
     display: flex;
     flex-direction: column;
+
     &-title {
       display: flex;
-      align-items: center;
       flex: 0 0 16px;
+      align-items: center;
       height: 16px;
       margin: 12px 0;
+
       .fa-angle-down {
-        margin-right: 6px;
-        font-size: 16px;
         display: flex;
         align-items: center;
         justify-content: center;
-        transform: rotate(-90deg);
+        margin-right: 6px;
+        font-size: 16px;
         transition: all ease-in-out 0.3s;
+        transform: rotate(-90deg);
+
         &.is-open {
           transform: rotate(0deg);
         }
       }
+
       .header-content {
         display: flex;
         align-items: center;
         color: #979ba5;
+
         &-item {
           margin-left: 24px;
         }
       }
+
       &:hover {
         cursor: pointer;
       }
     }
+
     &-content {
       flex: 1;
+
       &.is-hidden {
         display: none;
       }
     }
   }
 }
+
 .key-del {
   display: flex;
   align-items: center;
-  padding: 0 15px;
   height: 32px;
+  padding: 0 15px;
   margin-bottom: -4px;
+
   &:hover {
-    cursor: pointer;
     color: #1890ff;
+    cursor: pointer;
   }
 }
+
 .function-menu {
-  display: flex;
   position: relative;
+  display: flex;
+
   &-anchor {
     display: flex;
     flex: 1;
     cursor: pointer;
+
     .menu-icon {
-      width: 32px;
-      height: 32px;
       display: flex;
       align-items: center;
       justify-content: center;
+      width: 32px;
+      height: 32px;
       font-size: 24px;
+      color: #979ba5;
       border: 1px solid #dcdee5;
       border-radius: 0;
-      color: #979ba5;
+
       &:hover {
+        z-index: 9;
         color: #3a84ff;
-        border-color: #75afff;
         background-color: white;
-        z-index: 9;
+        border-color: #75afff;
       }
     }
+
     .bk-form-input {
       /* stylelint-disable-next-line declaration-no-important */
-      border-color: #dcdee5 !important;
-      border-radius: 0;
+      background-color: white !important;
 
       /* stylelint-disable-next-line declaration-no-important */
-      background-color: white !important;
+      border-color: #dcdee5 !important;
+      border-radius: 0;
     }
   }
 }
+
 .function-menu-panel {
-  color: #63656e;
   display: flex;
   flex-direction: column;
   width: 578px;
   height: 274px;
-  opacity: 1;
-  background: #fff;
   margin: -12px -16px;
+  color: #63656e;
+  background: #fff;
+  opacity: 1;
+
   .panel-search {
-    width: calc(100% - 24px);
     flex: 0 0 32px;
+    width: calc(100% - 24px);
     margin: 0 12px;
     border-top: 0;
-    border-left: 0;
     border-right: 0;
+    border-left: 0;
     box-shadow: none !important;
   }
+
   .panel-list {
-    flex: 1;
-    max-height: 242px;
     display: flex;
+    flex: 1;
     width: 100%;
+    max-height: 242px;
     padding-top: 6px;
+
     .panel-item {
-      flex: 0 0 128px;
-      width: 128px;
-      overflow: auto;
       display: flex;
+      flex: 0 0 128px;
       flex-direction: column;
+      width: 128px;
       padding: 6px 0;
+      overflow: auto;
       border-right: 1px solid #dcdee5;
+
       .list-item {
         display: flex;
+        align-items: center;
         width: 100%;
         height: 32px;
         min-height: 32px;
-        align-items: center;
         padding-left: 12px;
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
+
         .arrow-icon {
-          font-size: 24px;
           display: flex;
-          width: 24px;
-          height: 24px;
           align-items: center;
           justify-content: center;
+          width: 24px;
+          height: 24px;
           margin-left: auto;
+          font-size: 24px;
         }
+
         &.item-active,
         &:hover {
-          background-color: #f4f6fa;
           color: #3a84ff;
           cursor: pointer;
+          background-color: #f4f6fa;
         }
       }
     }
+
     .panel-desc {
       display: flex;
       flex: 1;
-      height: 100%;
-      color: #c4c6cc;
       flex-direction: column;
+      height: 100%;
       padding: 12px 10px;
+      color: #c4c6cc;
+
       .desc-title {
-        flex: 0 0 32px;
         display: flex;
+        flex: 0 0 32px;
         align-items: center;
         color: #63656e;
       }
+
       .desc-content {
-        flex: 1;
         display: flex;
+        flex: 1;
         color: #c4c6cc;
       }
     }
   }
 }
-.target-select-all {
-  height: 32px;
-  padding: 5px 12px;
+
+.target-select-all {
   display: flex;
   align-items: center;
+  height: 32px;
+  padding: 5px 12px;
+
   &:hover {
     cursor: pointer;
     background: #f0f8ff;
   }
 }
+
 .select-list {
   display: flex;
   flex-direction: column;
   max-height: 256px;
   overflow-y: auto;
   overflow-anchor: none;
+
   &-item {
     display: flex;
     flex: 0 0 32px;
-    height: 32px;
-    color: rgba(0, 0, 0, 0.65);
     align-items: center;
+    height: 32px;
     padding: 0 12px;
+    color: rgba(0, 0, 0, 0.65);
+
     &:hover {
       cursor: pointer;
       background-color: #f5f5f5;
     }
+
     &.active {
-      color: rgba(0, 0, 0, 0.65);
       font-weight: 600;
+      color: rgba(0, 0, 0, 0.65);
       background-color: #f0f8ff;
     }
+
     .anticon-check {
-      margin-left: auto;
       width: 12px;
       height: 12px;
+      margin-left: auto;
       color: #4c90ff;
       user-select: none;
     }
   }
 }
+
 .monitor-tooltip {
-  color: #e9edf2;
   padding: 8px;
   font-weight: 500;
+  color: #e9edf2;
   // .ant-tooltip-inner {
   //   background: #3274d9;
   // }
@@ -716,20 +824,25 @@
   //   }
   // }
 }
+
 .ant-tooltip {
   max-width: 600px !important;
 }
+
 .inite-wrapper {
   display: flex;
   width: 100%;
   height: 150px;
 }
+
 .rc-virtual-list-scrollbar {
   width: 4px !important;
+
   .rc-virtual-list-scrollbar-thumb {
     background-color: rgb(165, 165, 165) !important;
   }
 }
+
 .target-input-cluster-dropdown {
   width: auto !important;
   min-width: 100px !important;
@@ -746,160 +859,187 @@
 .popover-metric-title {
   display: flex;
   align-items: center;
+  margin-bottom: 6px;
   font-size: 14px;
   font-weight: 600;
   color: white;
-  margin-bottom: 6px;
 }
+
 .popover-metric-item {
   display: flex;
   align-items: center;
   font-size: 12px;
-  color: white;
   line-height: 20px;
+  color: white;
 }
+
 .ant-cascader-menu {
   height: 296px !important;
 }
+
 .metric-dropdown {
   display: flex;
   flex-direction: column;
   width: 640px;
   height: 452px;
   font-size: 12px;
+
   &-input {
-    padding: 12px 16px 0px;
     display: flex;
     align-items: center;
+    padding: 12px 16px 0px;
+    @keyframes rowup {
+      0% {
+        transform: rotate(0deg);
+      }
+
+      50% {
+        transform: rotate(180deg);
+      }
+
+      100% {
+        transform: rotate(360deg);
+      }
+    }
+
     .reflesh-icon {
       display: flex;
-      color: #3a84ff;
       align-items: center;
       justify-content: center;
       margin-left: 10px;
       font-size: 14px;
+      color: #3a84ff;
       transition: all 0.3s;
+
       &.reflesh-pendding {
         animation: 1s rowup linear infinite normal;
       }
+
       &:hover {
-        cursor: pointer;
         color: #699df4;
-      }
-    }
-    @keyframes rowup {
-      0% {
-        transform: rotate(0deg);
-      }
-      50% {
-        transform: rotate(180deg);
-      }
-      100% {
-        transform: rotate(360deg);
+        cursor: pointer;
       }
     }
   }
+
   &-tag {
     &.tab-empty {
       min-height: 42px;
       border-bottom: 1px solid #dcdee5;
     }
+
     .tab-tag {
       display: flex;
       align-items: center;
       justify-content: center;
-      border-radius: 2px;
-      background: #f0f1f5;
+      height: 22px;
       padding: 0 10px;
-      border: 1px solid transparent;
       color: #63656e;
-      height: 22px;
+      background: #f0f1f5;
+      border: 1px solid transparent;
+      border-radius: 2px;
+
       &:hover {
-        border-color: rgba(58, 132, 255, 0.3);
-        background-color: #edf4ff;
         color: #3a84ff;
         cursor: pointer;
+        background-color: #edf4ff;
+        border-color: rgba(58, 132, 255, 0.3);
       }
     }
+
     .ant-tabs-top {
       height: auto !important;
     }
+
     .ant-tabs-tab {
       padding: 8px 0 12px 0;
     }
+
     .ant-tabs-tab + .ant-tabs-tab {
       margin: 0 0 0 6px;
     }
+
     .ant-tabs-tab.ant-tabs-tab-active .tab-tag {
-      border-color: rgba(58, 132, 255, 0.3);
-      background-color: #edf4ff;
       color: #3a84ff;
+      background-color: #edf4ff;
+      border-color: rgba(58, 132, 255, 0.3);
     }
+
     .ant-tabs-nav {
-      margin-bottom: 0;
       padding-left: 16px;
+      margin-bottom: 0;
     }
+
     .ant-tabs-content-holder {
       display: none;
     }
+
     .ant-tabs-ink-bar {
       display: none;
     }
   }
+
   &-content {
     display: flex;
-    width: 100%;
     flex: 1;
+    width: 100%;
     height: 100%;
+
     .content-list {
       flex: 1;
       max-height: 366px;
+      margin: 0;
       overflow: auto;
       background-color: white;
-      margin: 0;
+
       .metric-item {
         display: flex;
         flex-direction: column;
-        height: 52px;
         justify-content: center;
-        line-height: 22px;
+        height: 52px;
         padding: 0 16px;
+        line-height: 22px;
+
         &-title {
+          position: relative;
           display: flex;
-          height: 22px;
-          line-height: 22px;
           align-items: center;
           max-width: 100%;
+          height: 22px;
           font-size: 12px;
-          position: relative;
+          line-height: 22px;
+
           .title-wrap {
+            flex: 1;
             height: 22px;
-            line-height: 22px;
             overflow: hidden;
+            line-height: 22px;
             text-overflow: ellipsis;
             white-space: nowrap;
-            flex: 1;
+
             .title-name {
-              margin-right: 8px;
               // display: inline-flex;
               align-items: center;
+              height: 22px;
+              margin-right: 8px;
               font-size: 14px;
               font-weight: bold;
-              height: 22px;
             }
           }
+
           .copy-icon {
             display: inline-flex;
-            width: 16px;
-            height: 16px;
+            flex: 0 0 16px;
             align-items: center;
             justify-content: center;
+            width: 16px;
+            height: 16px;
             margin-right: auto;
-            flex: 0 0 16px;
+
             svg {
-              fill: #3a84ff;
               width: 16px;
               height: 16px;
+              fill: #3a84ff;
             }
           }
           // .title-alias {
@@ -910,30 +1050,36 @@
           //   height: 22px;
           // }
         }
+
         &-subtitle {
-          height: 20px;
           display: flex;
           align-items: center;
-          color: #979ba5;
+          height: 20px;
           font-size: 12px;
+          color: #979ba5;
         }
+
         &.focus-item {
-          background-color: #f5f7fa;
           cursor: none;
+          background-color: #f5f7fa;
         }
+
         &.is-checked {
           background-color: #e1ecff !important;
         }
+
         &:not(.is-arrow) {
           &:hover {
-            background-color: #e1ecff;
             cursor: pointer;
+            background-color: #e1ecff;
           }
         }
+
         &.is-arrow {
           cursor: none;
         }
       }
+
       .more-loading {
         display: flex;
         flex-direction: column;
@@ -941,59 +1087,68 @@
         justify-content: center;
         margin: 6px 0;
       }
+
       .all-data {
         display: flex;
         align-items: center;
         justify-content: center;
-        color: #979ba5;
         height: 44px;
+        color: #979ba5;
       }
     }
+
     .content-tag {
-      flex: 0 0 160px;
-      width: 160px;
       display: flex;
+      flex: 0 0 160px;
       flex-direction: column;
-      background: #fafbfd;
-      border-left: 1px solid #dcdee5;
+      width: 160px;
       max-height: 366px;
-      overflow: auto;
       padding-top: 8px;
+      overflow: auto;
+      background: #fafbfd;
+      border-left: 1px solid #dcdee5;
+
       &-title {
         display: flex;
-        margin: 0 8px 16px 16px;
-        height: 20px;
         align-items: center;
+        height: 20px;
+        margin: 0 8px 16px 16px;
       }
+
       &-list {
         display: flex;
         flex-direction: column;
+
         .list-item {
+          position: relative;
           display: flex;
           align-items: center;
           margin: 0 12px 12px 16px !important;
           color: #979ba5;
-          position: relative;
+
           &-count {
-            color: #c4c6cc;
-            display: inline-flex;
-            margin-left: auto;
             position: absolute;
             right: 0;
+            display: inline-flex;
+            margin-left: auto;
+            color: #c4c6cc;
           }
         }
+
         .ant-checkbox-input,
         .ant-checkbox-inner {
           top: -3px !important;
         }
       }
     }
+
     .empty-content {
-      width: 100%;
       display: flex;
       flex-direction: column;
-      justify-content: center;
       align-items: center;
+      justify-content: center;
+      width: 100%;
+
       &-icon {
         display: flex;
         align-items: center;
@@ -1001,23 +1156,26 @@
         width: 100%;
         margin-top: 80px;
       }
+
       &-title {
         display: flex;
         margin-top: 14px;
         font-size: 16px;
-        color: #63656e;
         line-height: 22px;
+        color: #63656e;
       }
+
       &-subtitle {
         display: flex;
-        font-size: 12px;
-        line-height: 22px;
         flex-direction: column;
         align-items: center;
-        color: #979ba5;
-        font-size: 12px;
         margin: 8px 0;
+        font-size: 12px;
+        font-size: 12px;
+        line-height: 22px;
+        color: #979ba5;
       }
+
       .text-btn {
         display: inline-flex;
         margin-left: 6px;
@@ -1025,39 +1183,48 @@
         cursor: pointer;
       }
     }
+
     .is-keyword {
       display: inline-flex;
       color: #3a84ff;
     }
+
     .ant-checkbox-checked:after {
       border: 0 !important;
     }
   }
+
   .content-spin {
     flex: 1;
     height: 100%;
+
     .ant-spin-container {
       height: 100%;
     }
   }
+
   .ant-spin-nested-loading {
     width: 100%;
     height: 100%;
+
     .ant-spin-container {
       width: 100%;
       height: 100%;
     }
   }
 }
+
 .mitric-input-popover {
   .ant-popover-inner-content {
     padding: 0;
     background-color: #fafbfd;
   }
 }
+
 .ant-message {
   z-index: 99999 !important;
 }
+
 body {
   &.theme-dark {
     $monitor-font-color: #ccccdc;
@@ -1065,14 +1232,17 @@ body {
     $monitor-border-color: #2c2d36;
     $monitor-label-bg-color: #22252b;
     $monitor-metric-bg-color: #282b31;
+
     .variable-editor,
     .monitor-grafana {
       color: $monitor-font-color !important;
       background-color: $monitor-bg-color !important;
+
       .variable-line-label {
         color: $monitor-font-color !important;
         background: $monitor-label-bg-color !important;
       }
+
       .function-menu-anchor,
       .condition-input-add,
       .search-play {
@@ -1080,105 +1250,131 @@ body {
         background: #191b1f !important;
         border-color: $monitor-border-color !important;
       }
+
       .query-editor-label {
         background-color: #1d417e !important;
       }
+
       .editor-form-label {
-        background-color: $monitor-label-bg-color !important;
         color: $monitor-font-color !important;
+        background-color: $monitor-label-bg-color !important;
       }
+
       .mitric-input {
         background-color: $monitor-bg-color !important;
+
         &-name {
           border-color: $monitor-border-color !important;
         }
+
         .metric-label {
           color: $monitor-font-color !important;
         }
       }
+
       .promql-editor-instance {
-        border-color: $monitor-border-color !important;
         background-color: $monitor-bg-color !important;
+        border-color: $monitor-border-color !important;
       }
+
       .copy-mode-input {
-        background-color: $monitor-bg-color !important;
         color: #eaebf0;
+        background-color: $monitor-bg-color !important;
         border: 1px solid $monitor-border-color !important;
       }
+
       .query-editor-tools {
-        background-color: #35383d !important;
         color: #eaebf0 !important;
+        background-color: #35383d !important;
         border: 1px solid $monitor-border-color !important;
       }
+
       .mitric-input .ant-cascader-picker-clear {
-        background-color: transparent !important;
         color: #63656e !important;
+        background-color: transparent !important;
       }
+
       .menu-add,
       .funtion-input {
         border-color: $monitor-border-color !important;
       }
     }
+
     .metric-dropdown-tag .tab-tag {
-      background-color: $monitor-metric-bg-color !important;
       color: #eaebf0 !important;
+      background-color: $monitor-metric-bg-color !important;
       border: 1px solid $monitor-metric-bg-color !important;
     }
+
     .ant-popover-inner-content {
-      border: 1px solid $monitor-border-color !important;
       background-color: $monitor-bg-color !important;
+      border: 1px solid $monitor-border-color !important;
+
       .content-list {
         background-color: $monitor-bg-color !important;
       }
+
       .focus-item {
         background-color: $monitor-metric-bg-color !important;
       }
+
       .content-tag {
         background-color: $monitor-bg-color !important;
         border-left: 1px solid $monitor-metric-bg-color !important;
       }
     }
+
     .function-menu-panel {
-      background-color: $monitor-bg-color !important;
       color: #eaebf0 !important;
+      background-color: $monitor-bg-color !important;
       border: 1px solid $monitor-border-color !important;
+
       .list-item {
         &.item-active,
         &:hover {
-          background-color: $monitor-metric-bg-color !important;
           color: #3a84ff !important;
           cursor: pointer !important;
+          background-color: $monitor-metric-bg-color !important;
         }
       }
+
       .panel-item {
         border-right-color: $monitor-border-color !important;
       }
     }
+
     .ant-tabs-nav::before {
       border-bottom-color: $monitor-border-color;
     }
+
     .ant-tooltip-inner {
       border: 1px solid $monitor-metric-bg-color !important;
     }
+
     .ant-select-dropdown {
       border: 1px solid $monitor-metric-bg-color !important;
     }
+
     .ant-select-disabled.ant-select:not(.ant-select-customize-input) .ant-select-selector {
+      color: #eaebf0 !important;
       background-color: $monitor-bg-color !important;
       border: 1px solid $monitor-border-color !important;
-      color: #eaebf0 !important;
     }
+
     .metric-dropdown-content .content-list .metric-item:not(.is-arrow):hover,
     .metric-dropdown-content .content-list .metric-item.is-checked {
       background-color: $monitor-metric-bg-color !important;
     }
+
     .cm-content {
       caret-color: white !important;
     }
   }
+
   &.theme-light {
     background-color: #f4f5f5 !important;
   }
+
   a {
     color: inherit;
     text-decoration: none;
@@ -1188,9 +1384,11 @@ body {
     transition: color 0.3s;
     text-decoration-skip: objects;
   }
+
   a:hover {
     color: inherit;
   }
+
   a:active {
     color: #366fd9;
   }