gfwleak/nezha-nezha-fronted
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat： 添加promethods 联想输入

Browse Source
This commit is contained in:
zhangyu
2022-04-22 18:55:50 +08:00
parent 4674054048
commit aebe62f3b9
2 changed files with 85 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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',
},
});

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

@@ -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,15 +1088,14 @@ 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,