feat： 添加promethods 联想输入

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

@@ -120,15 +120,15 @@ export const baseTheme = EditorView.theme({
     lineHeight: '1',
     marginRight: '10px',
     verticalAlign: 'top',
-    '&:after': { content: "'\\ea88'" },
+    '&:after': { content: "'\\e76f'" },
-    fontFamily: 'codicon',
+    fontFamily: 'nz-icon',
     paddingRight: '0',
     opacity: '1',
     color: '#007acc',
   },
 
   '.cm-completionIcon-function, .cm-completionIcon-method': {
-    '&:after': { content: "'\\ea8c'" },
+    '&:after': { content: "'\\e76f'" },
     color: '#652d90',
   },
   '.cm-completionIcon-class': {
@@ -141,7 +141,7 @@ export const baseTheme = EditorView.theme({
     '&:after': { content: "'𝑥'" },
   },
   '.cm-completionIcon-constant': {
-    '&:after': { content: "'\\eb5f'" },
+    '&:after': { content: "'\\e76f'" },
     color: '#007acc',
   },
   '.cm-completionIcon-type': {
@@ -154,14 +154,14 @@ export const baseTheme = EditorView.theme({
     '&:after': { content: "'□'" },
   },
   '.cm-completionIcon-keyword': {
-    '&:after': { content: "'\\eb62'" },
+    '&:after': { content: "'\\e76f'" },
     color: '#616161',
   },
   '.cm-completionIcon-namespace': {
     '&:after': { content: "'▢'" },
   },
   '.cm-completionIcon-text': {
-    '&:after': { content: "'\\ea95'" },
+    '&:after': { content: "'\\e76f'" },
     color: '#ee9d28',
   },
 });

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

@@ -420,6 +420,7 @@ import { lintKeymap } from '@codemirror/lint'
 import { baseTheme, promqlHighlighter } from './CMTheme.tsx'
 import { closeBrackets, closeBracketsKeymap } from '@codemirror/closebrackets'
 import { autocompletion, completionKeymap, CompletionContext, CompletionResult } from '@codemirror/autocomplete'
+import { newCompleteStrategy } from 'codemirror-promql/dist/esm/complete'
 
 export default {
   name: 'promqlInput',
@@ -459,7 +460,7 @@ export default {
   },
   data () {
     return {
-      oldcCodeLength:'',
+      oldcCodeLength: '',
       newView: null,
       codeMirrorValue: [],
       dropDownVisible: false,
@@ -537,22 +538,49 @@ export default {
       const self = this
       const promQL = new PromQLExtension().setComplete(
         {
-          remote: {
+          completeStrategy: query(newCompleteStrategy({
-            url: 'http://192.168.40.42:8080/prom',
+            remote: {
-            fetchFn: this.fetchFn,
+              url: 'http://192.168.40.42:8080/prom',
-            cache: {
+              fetchFn: this.fetchFn
-              initialMetricList: [
-                'ALERTS',
-                'ALERTS_FOR_STATE',
-                'alertmanager_alerts',
-                'alertmanager_alerts_invalid_total',
-                'alertmanager_alerts_received_total',
-                'nz-agent'
-              ]
             }
-          }
+          }))
         }
       )
+      function query (CompleteStrategy) {
+        const obj = {}
+        obj.complete = CompleteStrategy
+        obj.queryHistory = []
+        obj.promQL = function (context) {
+          return Promise.resolve(this.complete.promQL(context)).then((res) => {
+            console.log(res)
+            const { state, pos } = context
+            const tree = syntaxTree(state).resolve(pos, -1)
+            const start = res != null ? res.from : tree.from
+
+            if (start !== 0) {
+              return res
+            }
+
+            const historyItems = {
+              from: start,
+              to: pos,
+              options: this.queryHistory.map((q) => ({
+                label: q.length < 80 ? q : q.slice(0, 76).concat('...'),
+                detail: 'past query',
+                apply: q,
+                info: q.length < 80 ? undefined : q
+              })),
+              span: /^[a-zA-Z0-9_:]+$/
+            }
+            if (res !== null) {
+              historyItems.options = historyItems.options.concat(res.options)
+            }
+            // console.log(historyItems)
+            return historyItems
+          })
+        }
+        return obj
+      }
       const dynamicConfigCompartment = new Compartment()
       const dynamicConfig = [
         promqlHighlighter,
@@ -622,92 +650,64 @@ export default {
         const view = new EditorView({
           state: EditorViewstate,
           // parent: document.getElementById('editor')
-          parent: document.getElementById('editor'+self.index)
+          parent: document.getElementById('editor' + self.index)
         })
         self.newView = view
       } else {
-        console.log('viewIsOk')
+        // console.log('viewIsOk')
         // const { from} = self.newView.state.selection.ranges[0]
         // const to = self.codeMirrorValue.length
         const to = self.oldcCodeLength
         const from = self.oldcCodeLength
-        console.log(from,to);
+        // console.log(from, to)
         self.newView.dispatch(
           self.newView.state.update({
             effects: dynamicConfigCompartment.reconfigure(dynamicConfig),
-            changes:{from,to,insert:self.codeMirrorValue[self.index]}
+            changes: { from, to, insert: self.codeMirrorValue[self.index] }
           })
         )
       }
     },
     newChange (val) {
-      console.log('newchange', val)
+      // console.log('newchange', val)
-      if(val){
+      if (val) {
         this.oldcCodeLength = val.length
-        console.log(this.oldcCodeLength);
+        // console.log(this.oldcCodeLength)
         this.codeMirrorValue[this.index] = val
         this.expressionList[this.index] = val
-        console.log(this.codeMirrorValue);
+        // console.log(this.codeMirrorValue)
         this.metricKeyDown(val)
-      }else{
+      } else {
-        this.oldcCodeLength = 0;
+        this.oldcCodeLength = 0
         this.codeMirrorValue[this.index] = ''
       }
     },
     newDoc (val) {
-      console.log('doc', val)
+      // console.log('doc', val)
-    },
-    getHint (val, params, b, c, d) {
-      if (params) {
-        console.log(val, params, b, c, d, 123123123)
-        console.log(JSON.stringify(params.body))
-        return this.sendAjax('', params)
-      } else {
-        return this.sendAjax('http://192.168.44.61:10091/api/v1/series', {})
-      }
-
-      // this.$post('api/v1/series')
     },
     fetchFn (a, b) {
+      const params = {}
+      console.log(b)
       if (b) {
-        const form = new FormData()
+        params['match[]'] = b.body.get('match[]')
-        console.log(b.body)
+        params.start = b.body.get('start')
-        form.append('match[]', b.body.getAll('match[]'))
+        params.end = b.body.get('end')
-        return this.$post(a, form)
+        a += '?match[]=' + b.body.get('match[]')
-      } else {
+        return fetch(a, {
-        return this.$get(a)
+          ...b,
-      }
+          // body: JSON.stringify(params),
-    },
+          redirect: 'follow',
-    sendAjax (url, body) {
+          headers: {
-      // 构造表单数据
+            Authorization: localStorage.getItem('nz-token'),
-      return new Promise(resolve => {
+            'content-type':'application/x-www-form-urlencoded'
-        const nowUrl = url
-        const formData = new FormData()
-        formData.append('username', 'johndoe')
-        formData.append('id', 123456)
-        // 创建xhr对象
-        const xhr = {
-          ...new XMLHttpRequest(),
-          ...body
-        }
-
-        // 设置xhr请求的超时时间
-        xhr.timeout = 3000
-        // 设置响应返回的数据格式
-        xhr.responseType = ''
-        // 创建一个 post 请求，采用异步
-        xhr.open('post', nowUrl, true)
-        xhr.setRequestHeader('Authorization', localStorage.getItem('nz-token'))
-        // 注册相关事件回调处理函数
-        xhr.onload = function (e) {
-          if (this.status == 200 || this.status == 304) {
-            // alert(this.responseText)
-            resolve(JSON.parse(this.responseText))
           }
+        })
+      }
+      return fetch(a, {
+        ...b,
+        headers: {
+          Authorization: localStorage.getItem('nz-token')
         }
-        xhr.onerror = function (e) { console.log(e) }
-        // 发送数据
-        xhr.send()
       })
     },
     closeDropdown () {
@@ -792,7 +792,7 @@ export default {
       this.cascaderValue = ''
     },
     metricChangeNew (value) {
-      console.log(value);
+      // console.log(value)
       if (!value) return
       this.insertText(value)
       this.dropDownVisible = false
@@ -1088,15 +1088,14 @@ export default {
         }
       }
     },
-    expressionList:{
+    expressionList: {
       deep: true,
       immediate: true,
       handler (n, o) {
-        console.log(n,n[this.index]);
+        // console.log(n, n[this.index])
-        this.codeMirrorValue[this.index] = n[this.index];
+        this.codeMirrorValue[this.index] = n[this.index]
-        
       }
-    },
+    }
 
     // codeMirrorValue:{
     //   deep:true,