feat : codemirror

nezha-fronted/package.json

@@ -12,6 +12,13 @@
     "unit": "jest --config test/unit/jest.conf.js --coverage"
   },
   "dependencies": {
+    "@codemirror/autocomplete": "^0.19.15",
+    "@codemirror/basic-setup": "^0.19.3",
+    "@codemirror/highlight": "^0.19.8",
+    "@codemirror/language": "^0.19.10",
+    "@codemirror/lint": "^0.19.6",
+    "@codemirror/state": "^0.19.9",
+    "@codemirror/view": "^0.19.48",
     "@johmun/vue-tags-input": "^2.1.0",
     "@riophae/vue-treeselect": "^0.4.0",
     "@svgdotjs/svg.js": "^3.0.16",
@@ -24,6 +31,7 @@
     "@topology/layout": "^0.3.0",
     "@topology/sequence-diagram": "^0.3.0",
     "axios": "^0.19.0",
+    "codemirror-promql": "^0.19.0",
     "cytoscape": "^3.15.2",
     "d3": "^6.7.0",
     "d3-hexbin": "^0.2.2",

nezha-fronted/src/assets/css/components/page/dashboard/explore/promqlInput.scss

@@ -2,6 +2,9 @@
   position: relative;
   width: 100%;
   display: flex;
+  #editor{
+    width: 100%;
+  }
   .no-resize{
     background: rgba(255,255,255,0);
     .el-textarea__inner {

nezha-fronted/src/components/chart/chartMixin.js

@@ -145,7 +145,6 @@ export default {
       }
     },
     handleLegendAlias (legend, aliasExpression) {
-      console.log(legend, aliasExpression)
       if (/\{\{.+\}\}/.test(aliasExpression)) {
         const labelValue = aliasExpression.replace(/(\{\{.+?\}\})/g, function (i) {
           const label = i.substr(i.indexOf('{{') + 2, i.indexOf('}}') - i.indexOf('{{') - 2)

nezha-fronted/src/components/common/rightBox/alertRuleBox.vue

@@ -348,6 +348,7 @@ import { noSpecialChar, nzNumber } from '../js/validate'
 import editRigthBox from '../mixin/editRigthBox'
 import richTextEditor from '@/components/chart/richTextEditor'
 import promqlInputMixin from '@/components/common/mixin/promqlInput'
+
 export default {
   name: 'alertRuleBox',
   props: {

nezha-fronted/src/components/page/dashboard/explore/CMTheme.tsx

@@ -0,0 +1,183 @@
+import { HighlightStyle, tags } from '@codemirror/highlight';
+import { EditorView } from '@codemirror/view';
+
+export const baseTheme = EditorView.theme({
+  '&': {
+    '&.cm-focused': {
+      outline: 'none',
+      outline_fallback: 'none',
+    },
+  },
+  '.cm-scroller': {
+    overflow: 'hidden',
+    fontFamily: '"DejaVu Sans Mono", monospace',
+  },
+  '.cm-placeholder': {
+    fontFamily:
+      '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"',
+  },
+
+  '.cm-matchingBracket': {
+    color: '#000',
+    backgroundColor: '#dedede',
+    fontWeight: 'bold',
+    outline: '1px dashed transparent',
+  },
+  '.cm-nonmatchingBracket': { borderColor: 'red' },
+
+  '.cm-tooltip': {
+    backgroundColor: '#f8f8f8',
+    borderColor: 'rgba(52, 79, 113, 0.2)',
+  },
+
+  '.cm-tooltip.cm-tooltip-autocomplete': {
+    '& > ul': {
+      maxHeight: '350px',
+      fontFamily: '"DejaVu Sans Mono", monospace',
+      maxWidth: 'unset',
+    },
+    '& > ul > li': {
+      padding: '2px 1em 2px 3px',
+    },
+    '& li:hover': {
+      backgroundColor: '#ddd',
+    },
+    '& > ul > li[aria-selected]': {
+      backgroundColor: '#d6ebff',
+      color: 'unset',
+    },
+    minWidth: '30%',
+  },
+
+  '.cm-completionDetail': {
+    float: 'right',
+    color: '#999',
+  },
+
+  '.cm-tooltip.cm-completionInfo': {
+    marginTop: '-11px',
+    padding: '10px',
+    fontFamily: "'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;",
+    border: 'none',
+    backgroundColor: '#d6ebff',
+    minWidth: '250px',
+    maxWidth: 'min-content',
+  },
+
+  '.cm-completionInfo.cm-completionInfo-right': {
+    '&:before': {
+      content: "' '",
+      height: '0',
+      position: 'absolute',
+      width: '0',
+      left: '-20px',
+      border: '10px solid transparent',
+      borderRightColor: '#d6ebff',
+    },
+    marginLeft: '12px',
+  },
+  '.cm-completionInfo.cm-completionInfo-left': {
+    '&:before': {
+      content: "' '",
+      height: '0',
+      position: 'absolute',
+      width: '0',
+      right: '-20px',
+      border: '10px solid transparent',
+      borderLeftColor: '#d6ebff',
+    },
+    marginRight: '12px',
+  },
+
+  '.cm-completionMatchedText': {
+    textDecoration: 'none',
+    fontWeight: 'bold',
+    color: '#0066bf',
+  },
+
+  '.cm-line': {
+    '&::selection': {
+      backgroundColor: '#add6ff',
+    },
+    '& > span::selection': {
+      backgroundColor: '#add6ff',
+    },
+  },
+
+  '.cm-selectionMatch': {
+    backgroundColor: '#e6f3ff',
+  },
+
+  '.cm-diagnostic': {
+    '&.cm-diagnostic-error': {
+      borderLeft: '3px solid #e65013',
+    },
+  },
+
+  '.cm-completionIcon': {
+    boxSizing: 'content-box',
+    fontSize: '16px',
+    lineHeight: '1',
+    marginRight: '10px',
+    verticalAlign: 'top',
+    '&:after': { content: "'\\ea88'" },
+    fontFamily: 'codicon',
+    paddingRight: '0',
+    opacity: '1',
+    color: '#007acc',
+  },
+
+  '.cm-completionIcon-function, .cm-completionIcon-method': {
+    '&:after': { content: "'\\ea8c'" },
+    color: '#652d90',
+  },
+  '.cm-completionIcon-class': {
+    '&:after': { content: "'○'" },
+  },
+  '.cm-completionIcon-interface': {
+    '&:after': { content: "'◌'" },
+  },
+  '.cm-completionIcon-variable': {
+    '&:after': { content: "'𝑥'" },
+  },
+  '.cm-completionIcon-constant': {
+    '&:after': { content: "'\\eb5f'" },
+    color: '#007acc',
+  },
+  '.cm-completionIcon-type': {
+    '&:after': { content: "'𝑡'" },
+  },
+  '.cm-completionIcon-enum': {
+    '&:after': { content: "'∪'" },
+  },
+  '.cm-completionIcon-property': {
+    '&:after': { content: "'□'" },
+  },
+  '.cm-completionIcon-keyword': {
+    '&:after': { content: "'\\eb62'" },
+    color: '#616161',
+  },
+  '.cm-completionIcon-namespace': {
+    '&:after': { content: "'▢'" },
+  },
+  '.cm-completionIcon-text': {
+    '&:after': { content: "'\\ea95'" },
+    color: '#ee9d28',
+  },
+});
+
+export const promqlHighlighter = HighlightStyle.define([
+  { tag: tags.name, color: '#000' },
+  { tag: tags.number, color: '#09885a' },
+  { tag: tags.string, color: '#a31515' },
+  { tag: tags.keyword, color: '#008080' },
+  { tag: tags.function(tags.variableName), color: '#008080' },
+  { tag: tags.labelName, color: '#800000' },
+  { tag: tags.operator },
+  { tag: tags.modifier, color: '#008080' },
+  { tag: tags.paren },
+  { tag: tags.squareBracket },
+  { tag: tags.brace },
+  { tag: tags.invalid, color: 'red' },
+  { tag: tags.comment, color: '#888', fontStyle: 'italic' },
+]);

nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue

@@ -6,100 +6,268 @@
         <div v-if="plugins.indexOf('metric-selector') > -1">
           <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") }}
+            <button
-              <i class="nz-icon nz-icon-arrow-down" style="font-size: 12px"></i></button>
+              class="top-tool-btn top-tool-btn--text"
-            <el-cascader-panel v-show="dropDownVisible" ref="metricSelector" slot="dropdown" v-model="cascaderValue"
+              type="button"
-                               v-clickoutside="closeDropdown" v-my-loading="tempBoxShowLoading" :loading="loading" :options="metricOptions"
+              @click="toggleDropdown"
-                               v-if="type !== 'log'" :props="cascaderProps" @change="metricChangeNew" style="margin-top: 5px">
+            >
-
+              {{
+                type === "log" ? $t("overall.logLabels") : $t("overall.metric")
+              }}
+              <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-my-loading="tempBoxShowLoading"
+              :loading="loading"
+              :options="metricOptions"
+              v-if="type !== 'log'"
+              :props="cascaderProps"
+              @change="metricChangeNew"
+              style="margin-top: 5px"
+            >
               <template slot-scope="{ node, data }">
-                <div :class="['nz-cascade',data.temp&&!data.child?'nz-cascade-temp':'',data.more?'cascader-panel-more':'']" @click="()=>{lazyLoad(node,data)}" :title="data.label">
+                <div
+                  :class="[
+                    'nz-cascade',
+                    data.temp && !data.child ? 'nz-cascade-temp' : '',
+                    data.more ? 'cascader-panel-more' : '',
+                  ]"
+                  @click="
+                    () => {
+                      lazyLoad(node, data);
+                    }
+                  "
+                  :title="data.label"
+                >
                   <i class="nz-icon nz-icon-template2"></i>
-                  {{data.label}}
+                  {{ data.label }}
                   <i v-if="data.more" class="nz-icon nz-icon-arrow-down"></i>
                 </div>
               </template>
             </el-cascader-panel>
-            <el-cascader-panel v-else v-show="dropDownVisible" ref="metricSelector" slot="dropdown"
+            <el-cascader-panel
-                               v-model="cascaderValue" v-clickoutside="closeDropdown" v-my-loading="tempBoxShowLoading"
+              v-else
-                               :loading="loading" :props="cascaderProps" @change="logLabelChange" style="margin-top: 5px;">
+              v-show="dropDownVisible"
+              ref="metricSelector"
+              slot="dropdown"
+              v-model="cascaderValue"
+              v-clickoutside="closeDropdown"
+              v-my-loading="tempBoxShowLoading"
+              :loading="loading"
+              :props="cascaderProps"
+              @change="logLabelChange"
+              style="margin-top: 5px"
+            >
               <template slot-scope="{ node, data }">
                 <div :title="data.label" class="nz-cascade">
-                  {{data.label}}
+                  {{ data.label }}
                 </div>
               </template>
             </el-cascader-panel>
           </el-dropdown>
         </div>
-        <div v-if="plugins.indexOf('metric-input') > -1" class="input-box" @click="dropDownVisible=false">
+        <div
-          <el-input :id="inputId" v-model="expressionList[index]" :autosize="{ minRows: 1, maxRows: 6}"
+          v-if="plugins.indexOf('metric-input') > -1"
-                    class="not-fixed-height no-resize" type="textarea"
+          class="input-box"
-                    @input="metricKeyDown" @keyup.enter.native="expressionChange" ref="elInput"></el-input>
+          @click="dropDownVisible = false"
-          <div v-if="errorMsg" class="append-msg error"><span>{{errorMsg}}</span></div>
+        >
-          <div v-if="appendMsg" class="append-msg error"><span>{{appendMsg}}</span></div>
+        <div id="editor"
+        >
+        </div>
+          <!-- <el-input
+            :id="inputId"
+            v-model="expressionList[index]"
+            :autosize="{ minRows: 1, maxRows: 6 }"
+            class="not-fixed-height no-resize"
+            type="textarea"
+            @input="metricKeyDown"
+            @keyup.enter.native="expressionChange"
+            ref="elInput"
+          ></el-input> -->
+
+          <div v-if="errorMsg" class="append-msg error">
+            <span>{{ errorMsg }}</span>
+          </div>
+          <div v-if="appendMsg" class="append-msg error">
+            <span>{{ appendMsg }}</span>
+          </div>
         </div>
         <div class="top-tool-btn-group">
-          <button v-if="plugins.indexOf('add') > -1" class="top-tool-btn"
+          <button
-               @click="addExpression"><i class="nz-icon nz-icon-plus"></i></button>
+            v-if="plugins.indexOf('add') > -1"
-          <button v-if="plugins.indexOf('copy') > -1" class="top-tool-btn"
+            class="top-tool-btn"
-               @click="copyExpression"><i class="nz-icon nz-icon-override"></i></button>
+            @click="addExpression"
-          <button v-if="plugins.indexOf('remove') > -1" class="top-tool-btn"
+          >
-               @click="removeExpression"><i class="nz-icon nz-icon-minus"></i></button>
+            <i class="nz-icon nz-icon-plus"></i>
+          </button>
+          <button
+            v-if="plugins.indexOf('copy') > -1"
+            class="top-tool-btn"
+            @click="copyExpression"
+          >
+            <i class="nz-icon nz-icon-override"></i>
+          </button>
+          <button
+            v-if="plugins.indexOf('remove') > -1"
+            class="top-tool-btn"
+            @click="removeExpression"
+          >
+            <i class="nz-icon nz-icon-minus"></i>
+          </button>
         </div>
       </template>
       <!--right-box里的样式-->
       <template v-if="styleType === 2 || styleType === 3">
-          <el-row v-if="plugins.indexOf('metric-input') > -1 || plugins.indexOf('metric-selector') > -1"
+        <el-row
-                  style="width: 100%;">
+          v-if="
+            plugins.indexOf('metric-input') > -1 ||
+            plugins.indexOf('metric-selector') > -1
+          "
+          style="width: 100%"
+        >
           <el-col
-              :class="[plugins.indexOf('metric-selector') > -1 ?'metric-selector-title':'metric-null-title']">
+            :class="[
-              <el-dropdown class="metric-selector" v-if="plugins.indexOf('metric-selector') > -1">
+              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") }}<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>
+                  style="
-                <el-cascader-panel v-my-loading="tempBoxShowLoading" v-show="dropDownVisible" v-clickoutside="closeDropdown" v-model="cascaderValue"
+                    font-size: 14px;
-                                   style="text-align: left;margin-top: 5px" slot="dropdown" ref="metricSelector"
+                    -webkit-transform: scale(0.75);
-                                   v-if="type !== 'log'"  :props="{emitPath:false}" :options="metricOptions" @change="metricChangeNew">
+                    display: inline-block;
-
+                  "
+                ></i
+              ></span>
+              <el-cascader-panel
+                v-my-loading="tempBoxShowLoading"
+                v-show="dropDownVisible"
+                v-clickoutside="closeDropdown"
+                v-model="cascaderValue"
+                style="text-align: left; margin-top: 5px"
+                slot="dropdown"
+                ref="metricSelector"
+                v-if="type !== 'log'"
+                :props="{ emitPath: false }"
+                :options="metricOptions"
+                @change="metricChangeNew"
+              >
                 <template slot-scope="{ node, data }">
-                    <div :class="['nz-cascade',data.temp&&!data.child?'nz-cascade-temp':'',data.more?'cascader-panel-more':'']" @click="()=>{lazyLoad(node,data)}" :title="data.label">
+                  <div
+                    :class="[
+                      'nz-cascade',
+                      data.temp && !data.child ? 'nz-cascade-temp' : '',
+                      data.more ? 'cascader-panel-more' : '',
+                    ]"
+                    @click="
+                      () => {
+                        lazyLoad(node, data);
+                      }
+                    "
+                    :title="data.label"
+                  >
                     <i class="nz-icon nz-icon-template2"></i>
-                      {{data.label}}
+                    {{ data.label }}
                     <i v-if="data.more" class="nz-icon nz-icon-arrow-down"></i>
                   </div>
                 </template>
-
               </el-cascader-panel>
-                <el-cascader-panel v-else v-show="dropDownVisible" ref="metricSelector" slot="dropdown"
+              <el-cascader-panel
-                                   v-model="cascaderValue" v-clickoutside="closeDropdown" v-my-loading="tempBoxShowLoading"
+                v-else
-                                   :loading="loading" :props="cascaderProps" @change="logLabelChange">
+                v-show="dropDownVisible"
+                ref="metricSelector"
+                slot="dropdown"
+                v-model="cascaderValue"
+                v-clickoutside="closeDropdown"
+                v-my-loading="tempBoxShowLoading"
+                :loading="loading"
+                :props="cascaderProps"
+                @change="logLabelChange"
+              >
                 <template slot-scope="{ node, data }">
                   <div :title="data.label" class="nz-cascade">
-                      {{data.label}}
+                    {{ data.label }}
                   </div>
                 </template>
               </el-cascader-panel>
             </el-dropdown>
           </el-col>
           <el-col
-              :class="plugins.indexOf('metric-selector') > -1 ?'metric-selector-input-box':'metric-null-input-box'"
+            :class="
-              :style="{height: '100%'}">
+              plugins.indexOf('metric-selector') > -1
-              <div class="input-box" @click="dropDownVisible=false" v-if="plugins.indexOf('metric-input') > -1">
+                ? 'metric-selector-input-box'
-                <el-input v-model="expressionList[index]" @input="metricKeyDown" type="textarea" :maxlength="styleType === 3 ? 512 : 4096" show-word-limit
+                : 'metric-null-input-box'
-                          :autosize="{ minRows: 1, maxRows: 6}" class="not-fixed-height no-resize" ref="elInput"></el-input>
+            "
-                <div class="append-msg error" v-if="errorMsg"><span>{{errorMsg}}</span></div>
+            :style="{ height: '100%' }"
-                <div class="append-msg error" v-if="appendMsg"><span>{{appendMsg}}</span></div>
+          >
+
+            <div
+              class="input-box"
+              @click="dropDownVisible = false"
+              v-if="plugins.indexOf('metric-input') > -1"
+            >
+            <div id="editor"
+            class="not-fixed-height no-resize"
+                ref="elInput"
+
+            ></div>
+              <!-- <el-input
+                v-model="expressionList[index]"
+                @input="metricKeyDown"
+                type="textarea"
+                :maxlength="styleType === 3 ? 512 : 4096"
+                show-word-limit
+                :autosize="{ minRows: 1, maxRows: 6 }"
+                class="not-fixed-height no-resize"
+                ref="elInput"
+              ></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>
           </el-col>
         </el-row>
       </template>
     </div>
-    <div v-if="styleType == 2&&showRemove">
+    <div v-if="styleType == 2 && showRemove">
-      <div class="option" @click="addExpression" v-if="plugins.indexOf('add') > -1"><i class="nz-icon nz-icon-plus"></i>
+      <div
+        class="option"
+        @click="addExpression"
+        v-if="plugins.indexOf('add') > -1"
+      >
+        <i class="nz-icon nz-icon-plus"></i>
+      </div>
+      <div
+        class="option"
+        style="margin-left: 5px; line-height: 32px"
+        @click="removeExpression"
+        v-if="plugins.indexOf('remove') > -1"
+      >
+        <i class="nz-icon nz-icon-minus"></i>
       </div>
-      <div class="option" style="margin-left: 5px; line-height: 32px;" @click="removeExpression"
-           v-if="plugins.indexOf('remove') > -1"><i class="nz-icon nz-icon-minus"></i></div>
     </div>
 
     <el-dialog
@@ -109,56 +277,141 @@
       :custom-class="'nz-temp-box'"
       :destroy-on-close="true"
       @closed="tempBoxClose"
-      center>
+      center
-      <el-form v-model="tempBox" class="temp-form-box" ref="tempFormBox" v-if="tempBoxShow">
+    >
+      <el-form
+        v-model="tempBox"
+        class="temp-form-box"
+        ref="tempFormBox"
+        v-if="tempBoxShow"
+      >
         <span class="temp-form-box-title">Expression</span>
         <el-form-item prop="expression">
-          <el-input class="temp-form-box-input" v-model="tempBox.expression" size="small" disabled></el-input>
+          <el-input
+            class="temp-form-box-input"
+            v-model="tempBox.expression"
+            size="small"
+            disabled
+          ></el-input>
         </el-form-item>
-        <span class="temp-form-box-title" v-if="tempBox.vars.length">Variable</span>
+        <span class="temp-form-box-title" v-if="tempBox.vars.length"
-        <el-form-item v-for="(item,index) in tempBox.vars"  :prop="item" :key="index">
+          >Variable</span
+        >
+        <el-form-item
+          v-for="(item, index) in tempBox.vars"
+          :prop="item"
+          :key="index"
+        >
           <el-row>
             <el-col :span="7" class="temp-form-box-col">
-              <el-input class="temp-form-box-input" v-model="tempBox.vars[index]" :id="'tempBox'+index" size="small" :disabled="true"></el-input>
+              <el-input
+                class="temp-form-box-input"
+                v-model="tempBox.vars[index]"
+                :id="'tempBox' + index"
+                size="small"
+                :disabled="true"
+              ></el-input>
             </el-col>
             <el-col :span="16" v-if="format(item).key">
-              <select-alert-silence :filter-silence="filterSilence" :silence-data="format(item).arr" :panel-lock="false" :placement="'bottom-start'" :typeContentLoading="typeContentLoading"
+              <select-alert-silence
-                                    @selectSilence="(val)=>{silenceChange(val,item)}" ref="selectPanel" style="width: 240px;">
+                :filter-silence="filterSilence"
+                :silence-data="format(item).arr"
+                :panel-lock="false"
+                :placement="'bottom-start'"
+                :typeContentLoading="typeContentLoading"
+                @selectSilence="
+                  (val) => {
+                    silenceChange(val, item);
+                  }
+                "
+                ref="selectPanel"
+                style="width: 240px"
+              >
                 <template v-slot:header>
                   <div class="explore-select-header">
-                    <el-input :placeholder="$t('overall.search')" clearable size="mini" style="width: 300px;padding: 0 10px;" v-model="filterSilence" id="panel-list-search"></el-input>
+                    <el-input
+                      :placeholder="$t('overall.search')"
+                      clearable
+                      size="mini"
+                      style="width: 300px; padding: 0 10px"
+                      v-model="filterSilence"
+                      id="panel-list-search"
+                    ></el-input>
                   </div>
                 </template>
 
                 <template v-slot:trigger>
-                  <el-input class="panel-name" placeholder="" readonly="readonly" v-model="tempBox[item]" size="small">
+                  <el-input
-                    <span slot="suffix" class="el-input__icon el-icon-circle-close el-input__clear" @click.stop="clearValue(item)"></span>
+                    class="panel-name"
+                    placeholder=""
+                    readonly="readonly"
+                    v-model="tempBox[item]"
+                    size="small"
+                  >
+                    <span
+                      slot="suffix"
+                      class="
+                        el-input__icon
+                        el-icon-circle-close
+                        el-input__clear
+                      "
+                      @click.stop="clearValue(item)"
+                    ></span>
                   </el-input>
                 </template>
               </select-alert-silence>
             </el-col>
             <el-col :span="17" v-else>
-              <el-input v-model="tempBox[item]" :id="'tempBox'+item"  size="small"></el-input>
+              <el-input
+                v-model="tempBox[item]"
+                :id="'tempBox' + item"
+                size="small"
+              ></el-input>
             </el-col>
           </el-row>
         </el-form-item>
       </el-form>
       <span slot="footer">
-        <button id="temp-box-esc" class="nz-btn nz-btn-size-normal nz-btn-style-light" @click="tempBoxShowChange(false)">
+        <button
-          <span>{{$t('overall.cancel')}}</span>
+          id="temp-box-esc"
+          class="nz-btn nz-btn-size-normal nz-btn-style-light"
+          @click="tempBoxShowChange(false)"
+        >
+          <span>{{ $t("overall.cancel") }}</span>
         </button>
-      <button id="chart-box-save" v-has="`expressionTemplate_add`" :disabled="prevent_opt.save" class="nz-btn nz-btn-size-normal nz-btn-style-normal" @click="tempBoxShowChange(true)" >
+        <button
-        <span>{{$t('overall.save')}}</span>
+          id="chart-box-save"
+          v-has="`expressionTemplate_add`"
+          :disabled="prevent_opt.save"
+          class="nz-btn nz-btn-size-normal nz-btn-style-normal"
+          @click="tempBoxShowChange(true)"
+        >
+          <span>{{ $t("overall.save") }}</span>
         </button>
       </span>
     </el-dialog>
-
   </div>
 </template>
 
 <script>
-import selectAlertSilence from '../../../common/alert/selectAlertSilence'
+import selectAlertSilence from '../../../common/alert/selectAlertSilence';
-import { get } from '@/http'
+        import { get } from '@/http';
+import { PromQLExtension } from 'codemirror-promql';
+import { basicSetup } from '@codemirror/basic-setup';
+// import { EditorState } from '@codemirror/state';
+import { highlightSelectionMatches } from '@codemirror/search';
+import { EditorState, Prec, Compartment } from '@codemirror/state';
+import { indentOnInput, syntaxTree } from '@codemirror/language';
+import { EditorView , highlightSpecialChars, keymap, ViewUpdate, placeholder} from '@codemirror/view';
+import { history, historyKeymap } from '@codemirror/history';
+import { bracketMatching } from '@codemirror/matchbrackets';
+import { defaultKeymap, insertNewlineAndIndent } from '@codemirror/commands';
+import { commentKeymap } from '@codemirror/comment';
+import { lintKeymap } from '@codemirror/lint';
+import { baseTheme, lightTheme, darkTheme, promqlHighlighter } from './CMTheme.tsx';
+import { closeBrackets, closeBracketsKeymap } from '@codemirror/closebrackets';
+import { autocompletion, completionKeymap, CompletionContext, CompletionResult } from '@codemirror/autocomplete';
+      
 export default {
   name: 'promqlInput',
   components: {
@@ -262,6 +515,38 @@ export default {
     }
   },
   mounted () {
+    
+    let promQL = new PromQLExtension().setComplete(
+      // { 
+      //   remote: { url: 'https://prometheus.land' } 
+      //   }
+        )
+// const dynamicConfigCompartment = new Compartment();
+
+      new EditorView({
+      state: EditorState.create({
+          extensions: [
+            baseTheme,
+          highlightSpecialChars(),
+          history(),
+          indentOnInput(),
+          bracketMatching(),
+          closeBrackets(),
+          autocompletion(),
+          highlightSelectionMatches(),
+            keymap.of([
+            ...closeBracketsKeymap,
+            ...defaultKeymap,
+            ...historyKeymap,
+            ...commentKeymap,
+            ...completionKeymap,
+            ...lintKeymap,
+          ]),
+          placeholder('Expression (press Shift+Enter for newlines)'),
+            basicSetup, promQL.asExtension()],
+      }),
+      parent: document.getElementById('editor')
+  });
     if (!this.fromFatherData && this.type !== 'logs') {
       this.queryMetrics()
     }
@@ -363,11 +648,13 @@ export default {
       this.cascaderValue = ''
     },
     metricKeyDown (val) {
+      console.log(val);
       if (this.required) {
         this.metricChange(val)
       }
     },
     expressionChange: function () {
+      console.log('expressionChange');
       this.$emit('change')
     },
     setError: function (errMsg) {
@@ -642,19 +929,19 @@ export default {
 }
 </script>
 <style>
-  .input-box .el-input__inner {
+.input-box .el-input__inner {
   height: 30px;
-  }
+}
-  .nz-temp-box /deep/ .el-dialog__body{
+.nz-temp-box /deep/ .el-dialog__body {
   padding: 10px 20px 0 20px;
-  }
+}
-  .nz-temp-box /deep/ .el-dialog__footer{
+.nz-temp-box /deep/ .el-dialog__footer {
   margin-top: 0;
-  }
+}
-  .nz-temp-box .nz-btn-style-light{
+.nz-temp-box .nz-btn-style-light {
   margin-right: 10px;
-  }
+}
-  .nz-temp-box .nz-btn-style-normal{
+.nz-temp-box .nz-btn-style-normal {
   margin-left: 10px;
-  }
+}
 </style>