From ae57653e4dd3ddb82d827ed530aad1a455fca5be Mon Sep 17 00:00:00 2001
From: zhangyu <zhangyu@geedgenetworks.com>
Date: Mon, 21 Feb 2022 10:40:12 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=20cahrt=20system=20=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=20filter=EF=BC=8810%=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../rightBox/chartRightBox/chartRightBox.scss |  2 +-
 .../common/filterSearch/filterSearch.vue      | 15 ++++++++++++++
 .../rightBox/chart/systemChartConfig.vue      | 20 ++++++++++++++++++-
 .../page/dashboard/explore/promqlInput.vue    |  4 ++--
 4 files changed, 37 insertions(+), 4 deletions(-)
 create mode 100644 nezha-fronted/src/components/common/filterSearch/filterSearch.vue

diff --git a/nezha-fronted/src/assets/css/components/common/rightBox/chartRightBox/chartRightBox.scss b/nezha-fronted/src/assets/css/components/common/rightBox/chartRightBox/chartRightBox.scss
index 6dda37943..be12cf7ae 100644
--- a/nezha-fronted/src/assets/css/components/common/rightBox/chartRightBox/chartRightBox.scss
+++ b/nezha-fronted/src/assets/css/components/common/rightBox/chartRightBox/chartRightBox.scss
@@ -177,7 +177,7 @@
     }
     .system-chart-config {
       display: flex;
-      height: 150px;
+      height: 206px;
       align-items: center;
       margin-bottom: 10px;
     }
diff --git a/nezha-fronted/src/components/common/filterSearch/filterSearch.vue b/nezha-fronted/src/components/common/filterSearch/filterSearch.vue
new file mode 100644
index 000000000..0740f0f82
--- /dev/null
+++ b/nezha-fronted/src/components/common/filterSearch/filterSearch.vue
@@ -0,0 +1,15 @@
+<template>
+  <div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'filterSearch'
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/nezha-fronted/src/components/common/rightBox/chart/systemChartConfig.vue b/nezha-fronted/src/components/common/rightBox/chart/systemChartConfig.vue
index 354f730ad..abbc6c8ca 100644
--- a/nezha-fronted/src/components/common/rightBox/chart/systemChartConfig.vue
+++ b/nezha-fronted/src/components/common/rightBox/chart/systemChartConfig.vue
@@ -92,6 +92,20 @@
                     <el-input-number :controls="false" v-model.number="item.limit" :placeholder="$t('placeholder.system.limit')"  size="small" @change="change"/>
                   </el-form-item>
                 </div>
+                <div class="form-items--half-width-group">
+                  <el-form-item
+                    :label="$t('dashboard.panel.chartForm.filter')"
+                    class="form-item"
+                    style="width: 100%"
+                    prop="param.filter"
+                  >
+                  <filterSearch
+                    v-model="item.filter"
+                    :keyList="keyList"
+                    :compareList="compareList"
+                  />
+                  </el-form-item>
+                </div>
               </div>
             </div>
             <el-row style="display: flex">
@@ -575,6 +589,7 @@
 import publicConfig from '@/components/common/rightBox/chart/publicConfig'
 import chartTypeShow from '@/components/common/rightBox/chart/chartTypeShow'
 import nezhaColor from '@/components/common/nezhaColor'
+import filterSearch from '@/components/common/filterSearch/filterSearch'
 import VueTagsInput from '@johmun/vue-tags-input'
 import { isGauge } from '@/components/chart/chart/tools'
 
@@ -583,6 +598,7 @@ export default {
   mixins: [publicConfig, chartTypeShow],
   components: {
     nezhaColor,
+    filterSearch,
     VueTagsInput
   },
   data () {
@@ -629,7 +645,9 @@ export default {
           id: 'table',
           name: this.$t('dashboard.panel.chartForm.typeVal.table.label')
         }
-      ]
+      ],
+      keyList: [],
+      compareList: []
     }
   },
   watch: {
diff --git a/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue b/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
index b206feff3..ae8ad6164 100644
--- a/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
+++ b/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
@@ -7,7 +7,7 @@
           <el-dropdown class="metric-selector">
             <el-dropdown-menu style="display: none"></el-dropdown-menu>
             <button class="top-tool-btn top-tool-btn--text" type="button" @click="toggleDropdown">{{type === 'log' ? $t("overall.logLabels") : $t("overall.metric") }}
-              &nbsp;<i class="nz-icon nz-icon-arrow-down" style="font-size: 12px"></i></button>
+              <i class="nz-icon nz-icon-arrow-down" style="font-size: 12px"></i></button>
             <el-cascader-panel v-show="dropDownVisible" ref="metricSelector" slot="dropdown" v-model="cascaderValue"
                                v-clickoutside="closeDropdown" v-loading="tempBoxShowLoading" :loading="loading" :options="metricOptions"
                                v-if="type !== 'log'" :props="cascaderProps" @change="metricChangeNew" style="margin-top: 5px">
@@ -55,7 +55,7 @@
               :class="[plugins.indexOf('metric-selector') > -1 ?'metric-selector-title':'metric-null-title']">
               <el-dropdown class="metric-selector" v-if="plugins.indexOf('metric-selector') > -1">
                 <el-dropdown-menu style="display: none"></el-dropdown-menu>
-                <span :class="{'expr-title':projectRightBox}" style="cursor: pointer;" @click="toggleDropdown">{{type === 'log' ? $t("overall.logLabels") : $t("overall.metric") }}&nbsp;<i
+                <span :class="{'expr-title':projectRightBox}" style="cursor: pointer;" @click="toggleDropdown">{{type === 'log' ? $t("overall.logLabels") : $t("overall.metric") }}<i
                   class="nz-icon nz-icon-arrow-down"
                   style="font-size: 14px; -webkit-transform:scale(0.75);display:inline-block;"></i></span>
                 <el-cascader-panel v-loading="tempBoxShowLoading" v-show="dropDownVisible" v-clickoutside="closeDropdown" v-model="cascaderValue"