feat：添加promethods 联想输入

2022-04-22 18:55:50 +08:00
parent 4674054048
commit aebe62f3b9
2 changed files with 85 additions and 86 deletions
--- a/nezha-fronted/src/components/page/dashboard/explore/CMTheme.tsx
+++ b/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'" },
-    fontFamily: 'codicon',
+    '&:after': { content: "'\\e76f'" },
+    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',
  },
 });
@@ -180,4 +180,4 @@ export const promqlHighlighter = HighlightStyle.define([
  { tag: tags.brace },
  { tag: tags.invalid, color: 'red' },
  { tag: tags.comment, color: '#888', fontStyle: 'italic' },
-]);
+]);
--- a/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
+++ b/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: {
-            url: 'http://192.168.40.42:8080/prom',
-            fetchFn: this.fetchFn,
-            cache: {
-              initialMetricList: [
-                'ALERTS',
-                'ALERTS_FOR_STATE',
-                'alertmanager_alerts',
-                'alertmanager_alerts_invalid_total',
-                'alertmanager_alerts_received_total',
-                'nz-agent'
-              ]
+          completeStrategy: query(newCompleteStrategy({
+            remote: {
+              url: 'http://192.168.40.42:8080/prom',
+              fetchFn: this.fetchFn
            }
-          }
+          }))
        }
      )
+      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)
-      if(val){
+      // console.log('newchange', 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{
-        this.oldcCodeLength = 0;
+      } else {
+        this.oldcCodeLength = 0
        this.codeMirrorValue[this.index] = ''
      }
    },
    newDoc (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')
+      // console.log('doc', val)
    },
    fetchFn (a, b) {
+      const params = {}
+      console.log(b)
      if (b) {
-        const form = new FormData()
-        console.log(b.body)
-        form.append('match[]', b.body.getAll('match[]'))
-        return this.$post(a, form)
-      } else {
-        return this.$get(a)
-      }
-    },
-    sendAjax (url, body) {
-      // 构造表单数据
-      return new Promise(resolve => {
-        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))
+        params['match[]'] = b.body.get('match[]')
+        params.start = b.body.get('start')
+        params.end = b.body.get('end')
+        a += '?match[]=' + b.body.get('match[]')
+        return fetch(a, {
+          ...b,
+          // body: JSON.stringify(params),
+          redirect: 'follow',
+          headers: {
+            Authorization: localStorage.getItem('nz-token'),
+            'content-type':'application/x-www-form-urlencoded'
          }
+        })
+      }
+      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,16 +1088,15 @@ export default {
        }
      }
    },
-    expressionList:{
+    expressionList: {
      deep: true,
      immediate: true,
      handler (n, o) {
-        console.log(n,n[this.index]);
-        this.codeMirrorValue[this.index] = n[this.index];
-        
+        // console.log(n, n[this.index])
+        this.codeMirrorValue[this.index] = n[this.index]
      }
-    },
-    
+    }
+
    // codeMirrorValue:{
    //   deep:true,
    //   imediate:true,