feat： 添加promethods 联想输入
This commit is contained in:
zhangyu
@@ -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',
|
||||
},
|
||||
});
|
||||
|
||||
@@ -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',
|
||||
@@ -537,22 +538,49 @@ export default {
|
||||
const self = this
|
||||
const promQL = new PromQLExtension().setComplete(
|
||||
{
|
||||
completeStrategy: query(newCompleteStrategy({
|
||||
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'
|
||||
]
|
||||
}
|
||||
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,
|
||||
@@ -626,12 +654,12 @@ export default {
|
||||
})
|
||||
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),
|
||||
@@ -641,73 +669,45 @@ export default {
|
||||
}
|
||||
},
|
||||
newChange (val) {
|
||||
console.log('newchange', 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;
|
||||
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)
|
||||
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'
|
||||
}
|
||||
},
|
||||
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))
|
||||
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
|
||||
@@ -1092,11 +1092,10 @@ export default {
|
||||
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,
|
||||
|
||||
Reference in New Issue
Block a user