diff --git a/nezha-fronted/.gitignore b/nezha-fronted/.gitignore
index ce84da4cf..722b02965 100644
--- a/nezha-fronted/.gitignore
+++ b/nezha-fronted/.gitignore
@@ -1,7 +1,7 @@
 .DS_Store
 node_modules/
 /dist/
-static/Tiles/
+/static/
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
diff --git a/nezha-fronted/src/components/page/dashboard/chartBox.vue b/nezha-fronted/src/components/page/dashboard/chartBox.vue
index dff0c28c5..1b22e1f85 100644
--- a/nezha-fronted/src/components/page/dashboard/chartBox.vue
+++ b/nezha-fronted/src/components/page/dashboard/chartBox.vue
@@ -188,6 +188,19 @@
         </el-row>
 
         <el-row v-if="!isUrl &&!isAlert && editChart.type != 'text'" class="element-item form-row-item" style="" v-for="index of promqlKeys.length" :key="'ele' + index">
+          <promql-input
+            :ref="'promql-'+(index-1)"
+            :id="promqlKeys[index-1]"
+            :key="promqlKeys[index-1]"
+            :expression-list="expressions"
+            :index="index-1"
+            :styleType="2"
+            :plugins="['metric-selector', 'metric-input', 'remove']"
+            @change="expressionChange"
+            @removeExpression="removeExpression"
+            :showRemove="false"
+          ></promql-input>
+<!--
           <promql-input
             :ref="'promql-'+(index-1)"
             :id="promqlKeys[index-1]"
@@ -202,6 +215,7 @@
             @removeExpression="removeExpression"
             :showRemove="false"
           ></promql-input>
+-->
           <el-row>
             <template v-if="editChart.type != 'singleStat'">
               <el-col style="width: 120px; padding-right: 20px; text-align: right; color: #666">
@@ -447,7 +461,7 @@
         sortedOptionKeys:[{key:'min',label:'Min'},{key:'max',label:'Max'},{key:'avg',label:'Avg'},{key:'last',label:'Last'},{key:'total',label:'Total'}],
         textShow:false,
         metricOptions: [],
-        metricStore: []
+        //metricStore: []
       }
     },
     components:{
@@ -1394,13 +1408,13 @@
                 let values=[{label:item,value:item}];
                 metricMap.set(key,values);
               }
-              this.metricStore.push({label:item,value:item,insertText:item})
+              //this.metricStore.push({label:item,value:item,insertText:item})
             });
             for(let key of metricMap.keys()){
               let option={
                 label:key,
                 value:key,
-              }
+              };
               if(metricMap.get(key) && metricMap.get(key).length>1){
                 option.children=metricMap.get(key);
               }
@@ -1409,6 +1423,9 @@
           }
         })
       },
+      getMetricOptions() {
+        return this.metricOptions;
+      }
     },
     created() {
       this.getSuggestMetric();
diff --git a/nezha-fronted/src/components/page/dashboard/explore/explore.vue b/nezha-fronted/src/components/page/dashboard/explore/explore.vue
index ea6318a35..4ef3c2583 100644
--- a/nezha-fronted/src/components/page/dashboard/explore/explore.vue
+++ b/nezha-fronted/src/components/page/dashboard/explore/explore.vue
@@ -16,8 +16,22 @@
         </div>
         <div style="height: calc(100% - 50px);width: 100%;" >
           <el-scrollbar style="height: 100%" class="el-scrollbar-large">
-          <div class="expression-room right-margin" style="padding-top: 5px">
-            <!--坑，这个index居然是从1开始-->
+            <div class="expression-room right-margin" style="padding-top: 5px">
+              <!--坑，这个index居然是从1开始-->
+              <promql-input
+                v-for="index of promqlKeys.length"
+                :ref="'promql-'+(index-1)"
+                :id="promqlKeys[index-1]"
+                :key="promqlKeys[index-1]"
+                :expression-list="expressions"
+                :index="index-1"
+                :styleType="1"
+                :plugins="['metric-selector', 'metric-input', 'add', 'remove']"
+                @change="expressionChange"
+                @addExpression="addExpression"
+                @removeExpression="removeExpression"
+              ></promql-input>
+<!--
             <promql-input
               v-for="index of promqlKeys.length"
               :ref="'promql-'+(index-1)"
@@ -32,16 +46,7 @@
               @addExpression="addExpression"
               @removeExpression="removeExpression"
             ></promql-input>
-<!--                <promql-input-plus-->
-<!--                  v-for="index of promqlKeys.length"-->
-<!--                  :ref="'promql-plus'+(index-1)"-->
-<!--                  :id="promqlKeys[index-1]"-->
-<!--                  :key="promqlKeys[index-1]"-->
-<!--                  :index="index-1"-->
-<!--                  @change="expressionChange"-->
-<!--                  @addExpression="addExpression"-->
-<!--                  @removeExpression="removeExpression"-->
-<!--                ></promql-input-plus>-->
+-->
           </div>
           <div class="chart-view right-margin" v-show="!showIntroduce"
                :class="{'shrink-view':!chartVisible || !defaultChartVisible}" style="position:relative;">
@@ -254,10 +259,12 @@ instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="c
         chartUnit:0,
         historyParam:{useHistory:true,key:'expore-history'},
         chart: {},
+        metricOptions: []
       }
     },
     created() {
       this.getPanelData();
+      this.queryMetrics();
       this.promqlKeys.push(getUUID());
     },
     methods: {
@@ -607,6 +614,46 @@ instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="c
           }
         });
       },
+      queryMetrics() {
+        this.metricOptions = [];
+        this.$get('prom/api/v1/label/__name__/values').then(response=>{
+          if(response.status == 'success'){
+            let metrics = response.data.sort();
+            let metricMap=new Map();
+            metrics.forEach((item)=>{
+              let key='';
+              if(/^[a-zA-Z]+?_[a-zA-Z]*/.test(item)){
+                key=item.split('_')[0];
+              }else if(/^_\w*/.test(item)){
+                key='      ';
+              }else{
+                key=item;
+              }
+              if(metricMap.get(key)){
+                let values=metricMap.get(key);
+                values.push({label:item,value:item});
+              }else{
+                let values=[{label:item,value:item}];
+                metricMap.set(key,values);
+              }
+              //this.metricStore.push({label:item,value:item,insertText:item})
+            });
+            for(let key of metricMap.keys()){
+              let option={
+                label:key,
+                value:key,
+              }
+              if(metricMap.get(key) && metricMap.get(key).length>1){
+                option.children=metricMap.get(key);
+              }
+              this.metricOptions.push(option);
+            }
+          }
+        })
+      },
+      getMetricOptions() {
+        return this.metricOptions;
+      }
     },
     watch: {
       promqlCount: function (n, o) {
diff --git a/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue b/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
index 2be0e740c..c8aedcc2f 100644
--- a/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
+++ b/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
@@ -13,7 +13,8 @@
             </div>
             <div class="input-box" @click="dropDownVisible=false" v-if="plugins.indexOf('metric-input') > -1">
               <!--            <el-autocomplete :placeholder="$t('dashboard.metricPreview.inputTip')" :fetch-suggestions="filterInput" clearable @clear="clearExpression" :trigger-on-focus="false" v-model="expressionList[index]" @blur="expressionChange" style="width: 100%;height:36px"></el-autocomplete>-->
-              <editor :styleType="styleType" :metric-list="metricStore" :history-param="historyParam" v-model="expressionList[index]" ref="editor" @on-enter="expressionChange" @on-blur="expressionChange" ></editor>
+              <!--<editor :styleType="styleType" :metric-list="metricStore" :history-param="historyParam" v-model="expressionList[index]" ref="editor" @on-enter="expressionChange" @on-blur="expressionChange" ></editor>?-->
+              <el-input v-model="expressionList[index]"></el-input>
               <div class="append-msg error" v-if="errorMsg"><span>{{errorMsg}}</span></div>
               <div class="append-msg error" v-if="appendMsg"><span>{{appendMsg}}</span></div>
             </div>
@@ -25,13 +26,14 @@
                 <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">Metric&nbsp;<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-show="dropDownVisible" v-clickoutside="closeDropdown" v-model="cascaderValue" style="text-align: left;" slot="dropdown" ref="metricSelector" :props="{emitPath:false}" :options="metricOptions"  @change="metricChange"></el-cascader-panel>
+                  <el-cascader-panel v-if="dropDownVisible" v-clickoutside="closeDropdown" v-model="cascaderValue" style="text-align: left;" slot="dropdown" ref="metricSelector" :props="{emitPath:false}" :options="metricOptions"  @change="metricChange"></el-cascader-panel>
                 </el-dropdown>
                 <label style="line-height: 30px;" v-else>{{$t("alert.config.expr")}}</label>
               </el-col>
               <el-col style="width: calc(100% - 120px); height: 100%;">
                 <div class="input-box" @click="dropDownVisible=false" v-if="plugins.indexOf('metric-input') > -1">
-                  <editor :styleType="styleType" :metric-list="metricStore" :historyParam="historyParam" v-model="expressionList[index]" ref="editor" @on-enter="expressionChange" @on-blur="expressionChange" ></editor>
+                  <!--<editor :styleType="styleType" :metric-list="metricStore" :historyParam="historyParam" v-model="expressionList[index]" ref="editor" @on-enter="expressionChange" @on-blur="expressionChange" ></editor>-->
+                  <el-input v-model="expressionList[index]"></el-input>
                   <div class="append-msg error" v-if="errorMsg"><span>{{errorMsg}}</span></div>
                   <div class="append-msg error" v-if="appendMsg"><span>{{appendMsg}}</span></div>
                 </div>
@@ -68,14 +70,14 @@
         historyParam:{type:Object},
         showRemove:{type:Boolean,default:true},
         projectRightBox:{type:Boolean,default:false},
-        metricOptions: {type: Array},
-        metricStore: {type: Array}
+        //metricOptions: {type: Array},
+        //metricStore: {type: Array}
       },
       data(){
         return {
           dropDownVisible:false,
           //metricStore:[],
-          //metricOptions:[],
+          metricOptions: [],
           cascaderValue:'',
           errorMsg:null,
           appendMsg:null,
@@ -132,7 +134,7 @@
         },
         metricChange:function(value){
           this.expressionList[this.index]=value;
-          this.$refs.editor.setContent(value)
+          //this.$refs.editor.setContent(value)
           this.dropDownVisible=false;
           this.$emit('change')
         },
@@ -140,15 +142,28 @@
           this.$emit('change')
         },
         setError:function(errMsg){
-          console.log(errMsg)
+          //console.log(errMsg)
           this.errorMsg=errMsg;
         },
-        setMsg:function(){
+        /*setMsg:function(){
           this.appendMsg
-        }
+        }*/
       },
       watch:{
         dropDownVisible:function(n,o){
+          if (this.styleType == 1) {
+            if (n) {
+              this.metricOptions = this.$parent.$parent.getMetricOptions();
+            } else {
+              this.metricOptions = [];
+            }
+          } else if (this.styleType == 2) {
+            if (n) {
+              this.metricOptions = this.$parent.$parent.$parent.$parent.getMetricOptions();
+            } else {
+              this.metricOptions = [];
+            }
+          }
           if(this.$refs.metricSelector){
             this.$refs.metricSelector.dropDownVisible=n;
             if(!this.expressionList[this.index]||this.expressionList[this.index] == ''){