CN-1479 fix: 搜索组件添加showHint自动完成提示
This commit is contained in:
刘洪洪
@@ -180,6 +180,9 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #a22;}
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
}
|
||||
.CodeMirror-scroll::-webkit-scrollbar {
|
||||
width: 0;
|
||||
}
|
||||
.CodeMirror-sizer {
|
||||
position: relative;
|
||||
border-right: 50px solid transparent;
|
||||
@@ -356,3 +359,77 @@ div.CodeMirror-dragcursors {
|
||||
|
||||
/* Help users use markselection to safely style text background */
|
||||
span.CodeMirror-selectedtext { background: none; }
|
||||
|
||||
.CodeMirror-hint-active {
|
||||
background-color: #eaf1f5;
|
||||
color: #5a90b0;
|
||||
}
|
||||
|
||||
.el-dropdown-menu__item.CodeMirror-hint {
|
||||
line-height: 20px;
|
||||
/*font-family: NotoSansSC-Regular;*/
|
||||
}
|
||||
|
||||
.hint-clear {
|
||||
color: #31739C !important;
|
||||
}
|
||||
|
||||
.hint-title {
|
||||
margin: 10px 10px 10px 4px;
|
||||
line-height: 20px;
|
||||
font-weight: bold;
|
||||
/* 禁止选中 样式 */
|
||||
background: #fff !important;
|
||||
color: #000 !important;
|
||||
}
|
||||
|
||||
.cm-s-eclipse span.cm-string-2 {
|
||||
//color: #D85512;
|
||||
}
|
||||
|
||||
.CodeMirror-lines {
|
||||
/*height: 20px;*/
|
||||
//padding: 3px 0;
|
||||
}
|
||||
|
||||
.in-coder-panel {
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
.in-coder-panel pre {
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
.in-coder-panel .CodeMirror {
|
||||
/*height: inherit;*/
|
||||
}
|
||||
|
||||
.in-coder-panel input {
|
||||
font-size: 12px !important;
|
||||
display: block;
|
||||
border-color: transparent !important;
|
||||
padding: 0 0 0 8px !important;
|
||||
}
|
||||
|
||||
.CodeMirror-hints {
|
||||
font-family: NotoSansSC-Regular !important;
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
.CodeMirror-line {
|
||||
//font-family: Arial !important;
|
||||
}
|
||||
|
||||
.CodeMirror-hint {
|
||||
margin: 0;
|
||||
padding: 0 4px !important;
|
||||
line-height: 20px !important;
|
||||
border-radius: 2px;
|
||||
white-space: pre;
|
||||
color: black;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.cm-variable-2{
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@@ -10,6 +10,7 @@
|
||||
:column-list="columnList"
|
||||
:str="str"
|
||||
:show-list="showList"
|
||||
:is-show-hint="showHint"
|
||||
@changeMode="changeMode"
|
||||
@search="search"
|
||||
:show-close-icon="showCloseIcon"
|
||||
@@ -64,7 +65,11 @@ export default {
|
||||
required: true
|
||||
},
|
||||
// 连接符列表
|
||||
connectionList: Array
|
||||
connectionList: Array,
|
||||
showHint: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
emits: ['search'],
|
||||
methods: {
|
||||
|
||||
@@ -642,7 +642,7 @@ export default {
|
||||
q = decodeURI(q)
|
||||
} else {
|
||||
const str1 = q.substring(q.indexOf('%'), q.indexOf('%') + 3)
|
||||
if (q.indexOf('%') > 0 && (str1 !== '%20' || str1 === '%25')) {
|
||||
if (q.indexOf('%') > 0 && (str1 === '%20' || str1 === '%25')) {
|
||||
q = decodeURI(q)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,37 +1,52 @@
|
||||
<template>
|
||||
<textarea
|
||||
style="text-indent: 65px;"
|
||||
cols="40"
|
||||
ref="textSearch"
|
||||
></textarea>
|
||||
<div class="search__suffixes search__suffixes--text-mode" :class="showList ? '' : 'entity-explorer-home'" style="padding-left: 1px">
|
||||
<span class="search__suffix">
|
||||
<el-popover
|
||||
popper-class="my-popper-class"
|
||||
placement="top"
|
||||
trigger="hover"
|
||||
:content="$t('entity.switchToAdvancedSearch')"
|
||||
>
|
||||
<template #reference>
|
||||
<i class="cn-icon cn-icon-filter" @click="changeMode"></i>
|
||||
</template>
|
||||
</el-popover>
|
||||
</span>
|
||||
<span v-show="isCloseIcon" class="search__suffix search__suffix-close" @click="cleanParams">
|
||||
<i class="el-icon-error"></i>
|
||||
</span>
|
||||
<span class="search__suffix" @click="search">
|
||||
<i class="el-icon-search"></i>
|
||||
</span>
|
||||
<div @click="handleClick" v-ele-click-outside="handleBlur">
|
||||
<textarea
|
||||
style="text-indent: 65px;"
|
||||
cols="40"
|
||||
ref="textSearch"
|
||||
></textarea>
|
||||
<div class="search__suffixes search__suffixes--text-mode" :class="showList ? '' : 'entity-explorer-home'" style="padding-left: 1px">
|
||||
<span class="search__suffix">
|
||||
<el-popover
|
||||
popper-class="my-popper-class"
|
||||
placement="top"
|
||||
trigger="hover"
|
||||
:content="$t('entity.switchToAdvancedSearch')"
|
||||
>
|
||||
<template #reference>
|
||||
<i class="cn-icon cn-icon-filter" @click="changeMode"></i>
|
||||
</template>
|
||||
</el-popover>
|
||||
</span>
|
||||
<span v-show="isCloseIcon" class="search__suffix search__suffix-close" @click="cleanParams">
|
||||
<i class="el-icon-error"></i>
|
||||
</span>
|
||||
<span class="search__suffix" @click.stop="search">
|
||||
<i class="el-icon-search"></i>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<el-popover
|
||||
placement="bottom"
|
||||
width="100%"
|
||||
ref="popoverRef"
|
||||
:visible="hintVisible"
|
||||
popper-class="search-show-hint-popover"
|
||||
trigger="click">
|
||||
<template #reference>
|
||||
<div>
|
||||
<hint v-if="hintVisible" :hintList="hintList"
|
||||
@load="handleHintLoad"
|
||||
@select="handleSelect"
|
||||
:hintParams="hintParams"
|
||||
:hintSearch="searchStr"></hint>
|
||||
</div>
|
||||
</template>
|
||||
</el-popover>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import 'codemirror/theme/ambiance.css'
|
||||
import 'codemirror/addon/hint/show-hint'
|
||||
import 'codemirror/addon/hint/show-hint.css'
|
||||
import 'codemirror/addon/display/placeholder'
|
||||
import 'codemirror/mode/sql/sql'
|
||||
import Parser, { stringInQuot, handleOperatorSpace } from '@/components/advancedSearch/meta/parser'
|
||||
import CodeMirror from 'codemirror'
|
||||
import { toRaw } from 'vue'
|
||||
@@ -39,23 +54,62 @@ import _ from 'lodash'
|
||||
import { columnType } from '@/components/advancedSearch/meta/meta'
|
||||
import { handleErrorTip } from '@/components/advancedSearch/meta/error'
|
||||
import { overwriteUrl, urlParamsHandler } from '@/utils/tools'
|
||||
import Hint from '@/components/advancedSearch/showhint/Hint/Hint'
|
||||
import { getDataset } from '@/components/advancedSearch/showhint/packages/getDataset'
|
||||
import codeMirrorMixins from '@/components/advancedSearch/showhint/myCodeMirror.js'
|
||||
|
||||
export default {
|
||||
name: 'TextMode',
|
||||
mixins: [codeMirrorMixins],
|
||||
props: {
|
||||
columnList: Array,
|
||||
str: String,
|
||||
showList: Boolean,
|
||||
showCloseIcon: Boolean
|
||||
showCloseIcon: Boolean,
|
||||
isShowHint: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
codeMirror: null,
|
||||
isCloseIcon: this.showCloseIcon,
|
||||
isEdit: false
|
||||
isEdit: false,
|
||||
hintVisible: false,
|
||||
dataset: null,
|
||||
CodeMirror
|
||||
}
|
||||
},
|
||||
emits: ['changeMode', 'search'],
|
||||
created () {
|
||||
if (this.isShowHint) {
|
||||
this._initComponent()
|
||||
}
|
||||
},
|
||||
provide () {
|
||||
return {
|
||||
getDataset: () => {
|
||||
// provide() 写成方法之后,保证this的指向
|
||||
return this.dataset || null
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
Hint
|
||||
},
|
||||
computed: {
|
||||
searchStr () {
|
||||
const { wholeTokenStr } = this.getWholeToken() || ''
|
||||
if (['not in', 'not like', 'order by', 'group by'].includes(wholeTokenStr?.toLowerCase())) {
|
||||
return wholeTokenStr
|
||||
}
|
||||
if (['operator', 'keyword', 'builtin'].includes(this.hintParams?.token?.type)) {
|
||||
return this.hintParams?.token?.string
|
||||
}
|
||||
return this.hintParams.leftpart || this.hintSearch || ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
cleanParams () {
|
||||
toRaw(this.codeMirror).setValue('')
|
||||
@@ -66,35 +120,50 @@ export default {
|
||||
this.reloadUrl(routeQuery, 'cleanOldParams')
|
||||
},
|
||||
initCodeMirror () {
|
||||
this.codeMirror = CodeMirror.fromTextArea(this.$refs.textSearch, {
|
||||
mode: {
|
||||
name: 'sql'
|
||||
},
|
||||
let option = {
|
||||
mode: 'sql',
|
||||
placeholder: '',
|
||||
lineNumbers: false
|
||||
})
|
||||
}
|
||||
if (this.isShowHint) {
|
||||
option = {
|
||||
keyMap: 'sublime',
|
||||
tabSize: 2, // 缩进格式
|
||||
theme: 'eclipse', // 主题，对应主题库 JS 需要提前引入
|
||||
line: true,
|
||||
lineNumbers: false, // 显示行数
|
||||
indentUnit: 4, // 缩进单位为4
|
||||
styleActiveLine: true, // 当前行背景高亮
|
||||
mode: 'text/x-filter', // HMTL混合模式
|
||||
foldGutter: true,
|
||||
lint: true,
|
||||
auto: 'auto', // 自动换行
|
||||
autoCloseBrackets: true, // 自动闭合符号
|
||||
matchBrackets: true, // 是否添加匹配括号高亮
|
||||
spellcheck: true, // 启用拼写检查
|
||||
autocorrect: true, // 启用自动更正
|
||||
lineWrapping: true, // 滚动或换行以显示长行
|
||||
// 提示配置
|
||||
hintOptions: {
|
||||
completeSingle: false, // 自动匹配唯一值
|
||||
// 匹配 t_test_login.col_a 用. 来连接的
|
||||
tables: {
|
||||
filter_table: ['recv_time']
|
||||
},
|
||||
alignWithWord: false
|
||||
}
|
||||
}
|
||||
}
|
||||
this.codeMirror = CodeMirror.fromTextArea(this.$refs.textSearch, option)
|
||||
this.codeMirror.setOption('extraKeys', {
|
||||
Enter: (cm) => {}
|
||||
})
|
||||
this.codeMirror.on('focus', () => {
|
||||
if (this.codeMirror.getValue().trim() !== '') {
|
||||
this.isEdit = true
|
||||
this.isCloseIcon = true
|
||||
}
|
||||
})
|
||||
this.codeMirror.on('blur', () => {
|
||||
const timer = setTimeout(() => {
|
||||
this.isEdit = false
|
||||
this.isCloseIcon = false
|
||||
clearTimeout(timer)
|
||||
}, 200)
|
||||
})
|
||||
this.codeMirror.on('update', () => {
|
||||
this.isEdit = true
|
||||
this.isCloseIcon = true
|
||||
})
|
||||
this.setCodemirrorValue()
|
||||
this.initEvent()
|
||||
this.initHint()
|
||||
},
|
||||
search () {
|
||||
this.handleBlur()
|
||||
const str = this.codeMirror.getValue().trim()
|
||||
if (str) {
|
||||
const parser = new Parser(this.columnList)
|
||||
@@ -204,6 +273,174 @@ export default {
|
||||
newUrl = urlParamsHandler(window.location.href, query, newParam, clean)
|
||||
}
|
||||
overwriteUrl(newUrl)
|
||||
},
|
||||
initEvent () {
|
||||
this.codeMirror.on('focus', (coder) => {
|
||||
if (this.codeMirror.getValue().trim() !== '') {
|
||||
this.isEdit = true
|
||||
this.isCloseIcon = true
|
||||
}
|
||||
if (this.isShowHint && this.$emit) {
|
||||
this.$emit('focus', coder.getValue())
|
||||
}
|
||||
})
|
||||
this.codeMirror.on('blur', (coder) => {
|
||||
const timer = setTimeout(() => {
|
||||
this.isEdit = false
|
||||
this.isCloseIcon = false
|
||||
if (this.isShowHint && this.$emit) {
|
||||
this.$emit('blur', coder.getValue())
|
||||
}
|
||||
clearTimeout(timer)
|
||||
}, 200)
|
||||
})
|
||||
this.codeMirror.on('update', () => {
|
||||
this.isEdit = true
|
||||
this.isCloseIcon = true
|
||||
})
|
||||
|
||||
if (this.isShowHint) {
|
||||
// 支持双向绑定
|
||||
this.codeMirror.on('change', (coder) => {
|
||||
if (this.$emit) {
|
||||
this.$emit('input', coder.getValue())
|
||||
}
|
||||
})
|
||||
|
||||
this.codeMirror.on('startCompletion', () => {
|
||||
// 展开自动提示的 事件回调
|
||||
this.hintVisible = true
|
||||
this.hintVm?.hintDeactive()
|
||||
})
|
||||
this.codeMirror.on('endCompletion', () => {
|
||||
// 自动提示关闭
|
||||
this.hintVisible = false
|
||||
this.hintParams = {}
|
||||
this.hintList = []
|
||||
})
|
||||
this.$emit('load', this.codeMirror)
|
||||
}
|
||||
},
|
||||
_initComponent () {
|
||||
getDataset(this, this.queryParams || {}).then((dataset, dataDisposeFun) => {
|
||||
this.dataset = Object.freeze(dataset)
|
||||
}).catch(err => {
|
||||
console.error(err)
|
||||
})
|
||||
},
|
||||
initHint () {
|
||||
this.codeMirror.on('inputRead', () => {
|
||||
setTimeout(() => {
|
||||
this.codeMirror.showHint()
|
||||
})
|
||||
})
|
||||
},
|
||||
handleBlur () {
|
||||
if (this.isShowHint) {
|
||||
this.hintVisible = false
|
||||
this.hintParams = {}
|
||||
this.hintList = []
|
||||
}
|
||||
},
|
||||
handleClick () {
|
||||
if (this.isShowHint) {
|
||||
this.hintVisible = true
|
||||
this.codeMirror.showHint()
|
||||
}
|
||||
},
|
||||
getWholeToken () {
|
||||
// 获取 前一个token
|
||||
const editor = this.hintParams.editor
|
||||
const Pos = this.CodeMirror.Pos
|
||||
const cur = this.hintParams.cur
|
||||
const token = this.hintParams.token
|
||||
if (!editor) {
|
||||
return
|
||||
}
|
||||
const spaceToken = editor.getTokenAt(Pos(cur.line, token.start))
|
||||
let preToken = ''
|
||||
if (spaceToken && spaceToken?.string === ' ') {
|
||||
preToken = editor.getTokenAt(Pos(cur.line, spaceToken.start))
|
||||
}
|
||||
const searchKey = `${preToken?.string} ${token?.string}`
|
||||
|
||||
return {
|
||||
wholeTokenStr: searchKey,
|
||||
spaceToken,
|
||||
preToken,
|
||||
token
|
||||
}
|
||||
},
|
||||
handleHintLoad ({ vm }) {
|
||||
this.hintVm = vm
|
||||
},
|
||||
handleSelect (item, index, hintList) {
|
||||
if (index === 0) {
|
||||
// 不可能选中0 第0项是标题, 选中0 说明没选中
|
||||
this.hintParams?.editor?.closeHint()
|
||||
this.$emit('query', CodeMirror)
|
||||
return
|
||||
}
|
||||
|
||||
const data = {
|
||||
from: this.hintParams.from,
|
||||
to: this.hintParams.to,
|
||||
list: hintList
|
||||
}
|
||||
|
||||
const { wholeTokenStr, preToken, token } = this.getWholeToken() || ''
|
||||
let cur = null
|
||||
cur = this.hintParams?.cur
|
||||
|
||||
// 上一个字段 是存在空格的关键字,整体删除上一个关键字
|
||||
if (['not in', 'not like', 'order by', 'group by'].includes(wholeTokenStr?.toLowerCase())) {
|
||||
this.hintParams?.editor?.replaceRange('', { line: cur.line, ch: preToken.start }, {
|
||||
line: cur.line,
|
||||
ch: token.end
|
||||
})
|
||||
}
|
||||
|
||||
this.completion && this.completion.pick(data, index)
|
||||
},
|
||||
setCodemirrorValue () {
|
||||
// 如果地址栏包含参数q，则将参数q回显到搜索栏内
|
||||
let { q } = this.$route.query
|
||||
|
||||
if (this.str) {
|
||||
toRaw(this.codeMirror).setValue(this.str)
|
||||
}
|
||||
if (q) {
|
||||
if (q.indexOf('+') > -1) {
|
||||
q = q.replace('+', ' ')
|
||||
}
|
||||
if (q.indexOf('%') === 0 || q.indexOf('%20') > -1 || q.indexOf('%25') > -1) {
|
||||
q = decodeURI(q)
|
||||
} else {
|
||||
const str1 = q.substring(q.indexOf('%'), q.indexOf('%') + 3)
|
||||
if (q.indexOf('%') > 0 && (str1 === '%20' || str1 === '%25')) {
|
||||
q = decodeURI(q)
|
||||
}
|
||||
}
|
||||
// 为避免地址栏任意输入导致全查询的q带QUERY，解析时不识别导致的语法错误
|
||||
// 如地址栏输入116.178.222.171，此时的q很长，刷新界面时需要把q里的116.178.222.171拿出来进行搜索
|
||||
if (q.indexOf('QUERY') > -1) {
|
||||
const strList = q.split(' ')
|
||||
if (strList.length > 0) {
|
||||
// 此时strList[1]为ip_addr:116.178.222.171，获取116.178.222.171
|
||||
q = strList[1].slice(8)
|
||||
}
|
||||
}
|
||||
if (this.codeMirror) {
|
||||
toRaw(this.codeMirror).setValue(q)
|
||||
}
|
||||
} else {
|
||||
this.isCloseIcon = false
|
||||
}
|
||||
|
||||
const vm = this
|
||||
this.emitter.on('advanced-search', function () {
|
||||
vm.search()
|
||||
})
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
@@ -227,42 +464,23 @@ export default {
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
// 如果地址栏包含参数q，则将参数q回显到搜索栏内
|
||||
let { q } = this.$route.query
|
||||
this.initCodeMirror()
|
||||
if (this.str) {
|
||||
toRaw(this.codeMirror).setValue(this.str)
|
||||
}
|
||||
if (q) {
|
||||
if (q.indexOf('+') > -1) {
|
||||
q = q.replace('+', '')
|
||||
}
|
||||
if (q.indexOf('%') === 0 || q.indexOf('%20') > -1 || q.indexOf('%25') > -1) {
|
||||
q = decodeURI(q)
|
||||
} else {
|
||||
const str1 = q.substring(q.indexOf('%'), q.indexOf('%') + 3)
|
||||
if (q.indexOf('%') > 0 && (str1 !== '%20' || str1 === '%25')) {
|
||||
q = decodeURI(q)
|
||||
if (this.isShowHint) {
|
||||
this.$nextTick(() => {
|
||||
// dataset是避免数据未初始化完成注册失败，ref是因为组件加载2次，避免第二次时dom丢失导致数据挂载失败
|
||||
if (this.dataset && this.$refs.textSearch) {
|
||||
this.initShowHint()
|
||||
this.initCodeMirror()
|
||||
}
|
||||
}
|
||||
// 为避免地址栏任意输入导致全查询的q带QUERY，解析时不识别导致的语法错误
|
||||
// 如地址栏输入116.178.222.171，此时的q很长，刷新界面时需要把q里的116.178.222.171拿出来进行搜索
|
||||
if (q.indexOf('QUERY') > -1) {
|
||||
const strList = q.split(' ')
|
||||
if (strList.length > 0) {
|
||||
// 此时strList[1]为ip_addr:116.178.222.171，获取116.178.222.171
|
||||
q = strList[1].slice(8)
|
||||
}
|
||||
}
|
||||
toRaw(this.codeMirror).setValue(q)
|
||||
})
|
||||
} else {
|
||||
this.isCloseIcon = false
|
||||
this.initCodeMirror()
|
||||
}
|
||||
|
||||
const vm = this
|
||||
this.emitter.on('advanced-search', function () {
|
||||
vm.search()
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-popper.search-show-hint-popover {
|
||||
visibility: hidden !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
165
src/components/advancedSearch/showhint/Hint/HelperInfo.vue
Normal file
165
src/components/advancedSearch/showhint/Hint/HelperInfo.vue
Normal file
@@ -0,0 +1,165 @@
|
||||
<template>
|
||||
<div class="HelperInfo">
|
||||
<div class="tips-container">
|
||||
<Renderer ref="renderVm" :renderProps="renderProps" :renderFun="helperDataFun"></Renderer>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import operatorTips from '@/components/advancedSearch/showhint/const/operatorTips'
|
||||
import defaultTips from '@/components/advancedSearch/showhint/const/defaultTips.js'
|
||||
import sqlTips from '@/components/advancedSearch/showhint/const/sqlTips.js'
|
||||
import functionTips from '@/components/advancedSearch/showhint/const/functionTips.js'
|
||||
import filterTips from '@/components/advancedSearch/showhint/const/filterTips.js'
|
||||
import varTips from '@/components/advancedSearch/showhint/const/varTips.js'
|
||||
|
||||
import { fieldRender } from '@/components/advancedSearch/showhint/const/fieldTips.js'
|
||||
|
||||
export default {
|
||||
name: 'HelperInfo',
|
||||
inject: ['getDataset'],
|
||||
props: {
|
||||
hintSearch: {},
|
||||
hintParams: {}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
operatorTips,
|
||||
sqlTips,
|
||||
functionTips,
|
||||
renderProps: {},
|
||||
isShow: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
refreshRender () {
|
||||
this.$refs?.renderVm.$forceUpdate()
|
||||
},
|
||||
matchFields (searchKey) {
|
||||
const dataset = this.getDataset()
|
||||
const fieldInfo = dataset.getFieldInfo(searchKey)
|
||||
if (!fieldInfo) {
|
||||
return false
|
||||
}
|
||||
let operates = dataset.getOperates(fieldInfo.type, fieldInfo._matchItem)
|
||||
operates = operates.map(item => item.text.toUpperCase())
|
||||
let funs = dataset.getFunctions(fieldInfo.type, fieldInfo._matchItem)
|
||||
funs = funs.map(item => item.text.toUpperCase())
|
||||
|
||||
let operatorReference = dataset.sourceData.operatorReference
|
||||
let funcReference = dataset.sourceData.funcReference
|
||||
|
||||
operatorReference = operatorReference.filter(item => {
|
||||
return operates.includes(item.label)
|
||||
})
|
||||
funcReference = funcReference.filter(item => {
|
||||
return funs.includes(item.name)
|
||||
})
|
||||
|
||||
this.renderProps = {
|
||||
fieldInfo,
|
||||
funcReference,
|
||||
operatorReference,
|
||||
funs,
|
||||
operates
|
||||
}
|
||||
return fieldRender
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
helperDataFun () {
|
||||
let hintSearch = ''
|
||||
if (this.hintSearch) {
|
||||
hintSearch = JSON.parse(JSON.stringify(this.hintSearch))
|
||||
const fields = this.getDataset().sourceData.fields
|
||||
const obj = fields.find(d => d.label === hintSearch)
|
||||
if (obj) {
|
||||
hintSearch = obj.name
|
||||
}
|
||||
}
|
||||
|
||||
let searchKey = hintSearch.toUpperCase() || ''
|
||||
searchKey = searchKey.trim()
|
||||
if (functionTips[searchKey]) {
|
||||
return functionTips[searchKey].description
|
||||
}
|
||||
if (operatorTips[searchKey]) {
|
||||
return operatorTips[searchKey].description
|
||||
}
|
||||
if (sqlTips[searchKey]) {
|
||||
return sqlTips[searchKey].description
|
||||
}
|
||||
if (filterTips[searchKey]) {
|
||||
return filterTips[searchKey].description
|
||||
}
|
||||
if (varTips[searchKey]) {
|
||||
return varTips[searchKey].description
|
||||
}
|
||||
|
||||
// 完整的匹配关键字
|
||||
if (this.getDataset()) {
|
||||
const fieldRender = this.matchFields(searchKey)
|
||||
if (fieldRender) {
|
||||
return fieldRender
|
||||
}
|
||||
}
|
||||
|
||||
return defaultTips.default.description
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.HelperInfo {
|
||||
min-width: 450px;
|
||||
background-color: #fff;
|
||||
height: 302px;
|
||||
box-sizing: border-box;
|
||||
overflow: auto;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.tips-container {
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
/deep/ ul li {
|
||||
list-style: inside;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
/deep/ h3 {
|
||||
margin: 8px 0;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
/deep/ p {
|
||||
line-height: 22px;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
/deep/ code,
|
||||
.code {
|
||||
background: initial;
|
||||
|
||||
border: 1px solid #ccc;
|
||||
padding: 4px 12px;
|
||||
margin: 6px 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/deep/ .sub-url {
|
||||
padding-left: 18px;
|
||||
}
|
||||
|
||||
/deep/ .sub-url li {
|
||||
list-style: inside circle;
|
||||
}
|
||||
|
||||
/deep/ i.ref-txt {
|
||||
line-height: 20px;
|
||||
color: #aaa;
|
||||
}
|
||||
</style>
|
||||
47
src/components/advancedSearch/showhint/Hint/Hint.vue
Normal file
47
src/components/advancedSearch/showhint/Hint/Hint.vue
Normal file
@@ -0,0 +1,47 @@
|
||||
<!-- 提示信息 -->
|
||||
<template>
|
||||
<div class="Hint" style="padding: 0;z-index: 2;" @click.stop>
|
||||
<!-- <el-row style="padding: 0;display: flex;flex-direction: row">-->
|
||||
<!-- <el-col style="width: 300px;min-height: 302px;z-index: 2;">-->
|
||||
<!-- <hint-info v-on="$listeners" :hintList="hintList"></hint-info>-->
|
||||
<!-- </el-col>-->
|
||||
<!-- <el-col style="width: calc(100% - 300px);min-height: 302px">-->
|
||||
<!-- <helper-info :hintSearch="hintSearch"></helper-info>-->
|
||||
<!-- </el-col>-->
|
||||
<!-- </el-row>-->
|
||||
<div style="display: flex;flex-direction: row;width: calc(100% - 41px);box-shadow: 0 2px 12px 0 rgba(0,0,0,.2);margin-top: 6px;">
|
||||
<div style="width: 324px;min-height: 302px;z-index: 2;border: 1px solid #DEDEDE;">
|
||||
<hint-info v-on="$listeners" :hintList="hintList" @select="onSelect"></hint-info>
|
||||
</div>
|
||||
<div style="width: calc(100% - 324px);min-height: 302px;z-index:2">
|
||||
<helper-info :hintSearch="hintSearch"></helper-info>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import HelperInfo from './HelperInfo.vue'
|
||||
import HintInfo from './HintInfo.vue'
|
||||
|
||||
export default {
|
||||
name: 'Hint',
|
||||
props: {
|
||||
hintList: [],
|
||||
hintSearch: {}
|
||||
},
|
||||
components: {
|
||||
HintInfo,
|
||||
HelperInfo
|
||||
},
|
||||
methods: {
|
||||
onSelect (item, index, hintList) {
|
||||
this.$emit('select', item, index, hintList)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="" scoped>
|
||||
|
||||
</style>
|
||||
127
src/components/advancedSearch/showhint/Hint/HintInfo.vue
Normal file
127
src/components/advancedSearch/showhint/Hint/HintInfo.vue
Normal file
@@ -0,0 +1,127 @@
|
||||
<template>
|
||||
<div class="HintInfo">
|
||||
<ul class="CodeMirror-hints-manual eclipse" style="padding-left: 0">
|
||||
<template v-for="(item,index) in hintList" :key="index">
|
||||
<li :ref="'hint_'+index" class="relative-item CodeMirror-hint"
|
||||
@click="handleSelect(item,index,hintList)"
|
||||
:class="{'CodeMirror-hint-active':index === activeIndex,[item.className]:true}"
|
||||
>{{ item.displayText }}</li>
|
||||
</template>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'HintInfo',
|
||||
props: {
|
||||
hintList: {
|
||||
type: Array,
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
active: true,
|
||||
activeIndex: null
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
// this.handleFocus()
|
||||
this.$emit('load', {
|
||||
name: this.name,
|
||||
label: this.name,
|
||||
vm: this
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
scrollToView (index = 0) {
|
||||
// 移动到可视区域
|
||||
const li = this.$refs['hint_' + index][0]
|
||||
li && li.scrollIntoView(false)
|
||||
},
|
||||
handleDown () {
|
||||
if (!this.active) {
|
||||
this.hintActive()
|
||||
return
|
||||
}
|
||||
let nextIndex = this.activeIndex + 1
|
||||
let nextItem = this.hintList[nextIndex]
|
||||
|
||||
if (nextItem?.type === 'abstract') {
|
||||
nextIndex++
|
||||
nextItem = this.hintList[nextIndex]
|
||||
}
|
||||
|
||||
if (nextItem?.type === 'abstract') {
|
||||
nextIndex++
|
||||
}
|
||||
nextIndex >= this.hintList.length ? this.activeIndex = 1 : this.activeIndex = nextIndex
|
||||
this.scrollToView(this.activeIndex)
|
||||
},
|
||||
handleUp () {
|
||||
if (!this.active) {
|
||||
this.hintActive()
|
||||
return
|
||||
}
|
||||
let preIndex = this.activeIndex - 1
|
||||
let preItem = this.hintList[preIndex]
|
||||
|
||||
if (preItem?.type === 'abstract') {
|
||||
preIndex--
|
||||
preItem = this.hintList[preIndex]
|
||||
}
|
||||
if (preItem?.type === 'abstract') {
|
||||
preIndex--
|
||||
}
|
||||
preIndex > 0 ? this.activeIndex = preIndex : this.activeIndex = this.hintList.length - 1
|
||||
this.scrollToView(this.activeIndex)
|
||||
},
|
||||
hintActive () {
|
||||
this.active = true
|
||||
this.activeIndex = 1
|
||||
this.scrollToView(this.activeIndex)
|
||||
},
|
||||
hintDeactive () {
|
||||
this.active = false
|
||||
this.activeIndex = null
|
||||
},
|
||||
handleSelect (item, index) {
|
||||
this.$emit('select', item, index, this.hintList)
|
||||
},
|
||||
triggerSelect () {
|
||||
const index = this.activeIndex || 0
|
||||
const item = this.hintList[index]
|
||||
this.$emit('select', item, index, this.hintList)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.HintInfo {
|
||||
height: 302px;
|
||||
overflow: auto;
|
||||
background: #fff;
|
||||
}
|
||||
ul {
|
||||
min-width: 300px;
|
||||
height:auto;
|
||||
width: fit-content;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
.hint-title{
|
||||
margin: 10px !important;
|
||||
margin-left: 4px !important;
|
||||
font-size: 14px;
|
||||
}
|
||||
.el-dropdown-menu__item{
|
||||
text-indent: 1em;
|
||||
}
|
||||
.hint-clear{
|
||||
text-indent: 1em;
|
||||
}
|
||||
</style>
|
||||
16
src/components/advancedSearch/showhint/Hint/Renderer.vue
Normal file
16
src/components/advancedSearch/showhint/Hint/Renderer.vue
Normal file
@@ -0,0 +1,16 @@
|
||||
<script>
|
||||
export default {
|
||||
name: 'Renderer',
|
||||
// abstract: true,
|
||||
props: {
|
||||
renderFun: {
|
||||
type: Function,
|
||||
require: true
|
||||
},
|
||||
renderProps: {}
|
||||
},
|
||||
render (h) {
|
||||
return this.renderFun(h, this.renderProps)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,73 @@
|
||||
.CodeMirror-hint-active {
|
||||
background-color: #eaf1f5;
|
||||
color: #5a90b0;
|
||||
}
|
||||
|
||||
.el-dropdown-menu__item.CodeMirror-hint {
|
||||
line-height: 20px;
|
||||
/*font-family: NotoSansSC-Regular;*/
|
||||
}
|
||||
|
||||
.hint-clear {
|
||||
color: #31739C !important;
|
||||
}
|
||||
|
||||
.hint-title {
|
||||
margin: 10px 10px 10px 4px;
|
||||
line-height: 20px;
|
||||
font-weight: bold;
|
||||
/* 禁止选中 样式 */
|
||||
background: #fff !important;
|
||||
color: #000 !important;
|
||||
}
|
||||
|
||||
.cm-s-eclipse span.cm-string-2 {
|
||||
color: #D85512;
|
||||
}
|
||||
|
||||
.CodeMirror-lines {
|
||||
/*height: 20px;*/
|
||||
padding: 3px 0;
|
||||
}
|
||||
|
||||
.in-coder-panel {
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
.in-coder-panel pre {
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
.in-coder-panel .CodeMirror {
|
||||
/*height: inherit;*/
|
||||
}
|
||||
|
||||
.in-coder-panel input {
|
||||
font-size: 12px !important;
|
||||
display: block;
|
||||
border-color: transparent !important;
|
||||
padding: 0 0 0 8px !important;
|
||||
}
|
||||
|
||||
.CodeMirror-hints {
|
||||
font-family: NotoSansSC-Regular !important;
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
.CodeMirror-line {
|
||||
font-family: Arial !important;
|
||||
}
|
||||
|
||||
.CodeMirror-hint {
|
||||
margin: 0;
|
||||
padding: 0 4px !important;
|
||||
line-height: 20px !important;
|
||||
border-radius: 2px;
|
||||
white-space: pre;
|
||||
color: black;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.cm-variable-2{
|
||||
font-weight: bold;
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
import sqlHint from './sql-hint.js'
|
||||
import showHint from './show-hint.js'
|
||||
import manualShowHint from './manual-show-hint'
|
||||
import 'codemirror/addon/hint/show-hint.css'
|
||||
|
||||
export default function createHint (hitType = 'default', CodeMirror, {
|
||||
dataset,
|
||||
hinthook,
|
||||
keywordshook,
|
||||
callback,
|
||||
keyboardUp,
|
||||
keyboardDown,
|
||||
keyboardEnter
|
||||
}) {
|
||||
hitType === 'default' ? showHint(CodeMirror) : manualShowHint(CodeMirror, {
|
||||
cb: callback,
|
||||
keyboardUp,
|
||||
keyboardDown,
|
||||
keyboardEnter
|
||||
})
|
||||
sqlHint(CodeMirror, { dataset, hinthook, keywordshook })
|
||||
}
|
||||
@@ -0,0 +1,596 @@
|
||||
export default function (CodeMirror,{
|
||||
cb,
|
||||
keyboardUp,
|
||||
keyboardDown,
|
||||
keyboardEnter
|
||||
}) {
|
||||
|
||||
var HINT_ELEMENT_CLASS = "CodeMirror-hint";
|
||||
var ACTIVE_HINT_ELEMENT_CLASS = "CodeMirror-hint-active";
|
||||
|
||||
// This is the old interface, kept around for now to stay
|
||||
// backwards-compatible.
|
||||
CodeMirror.showHint = function (cm, getHints, options) {
|
||||
if (!getHints) return cm.showHint(options);
|
||||
if (options && options.async) getHints.async = true;
|
||||
var newOpts = {hint: getHints};
|
||||
if (options) for (var prop in options) newOpts[prop] = options[prop];
|
||||
return cm.showHint(newOpts);
|
||||
};
|
||||
|
||||
CodeMirror.defineExtension("showHint", function (options) {
|
||||
options = parseOptions(this, this.getCursor("start"), options);
|
||||
var selections = this.listSelections()
|
||||
if (selections.length > 1) return;
|
||||
// By default, don't allow completion when something is selected.
|
||||
// A hint function can have a `supportsSelection` property to
|
||||
// indicate that it can handle selections.
|
||||
if (this.somethingSelected()) {
|
||||
if (!options.hint.supportsSelection) return;
|
||||
// Don't try with cross-line selections
|
||||
for (var i = 0; i < selections.length; i++)
|
||||
if (selections[i].head.line != selections[i].anchor.line) return;
|
||||
}
|
||||
if (this.state.completionActive) this.state.completionActive.close();
|
||||
var completion = this.state.completionActive = new Completion(this, options);
|
||||
if (!completion.options.hint) return;
|
||||
|
||||
CodeMirror.signal(this, "startCompletion", this);
|
||||
completion.update(true);
|
||||
|
||||
cb && cb({completion})
|
||||
});
|
||||
|
||||
CodeMirror.defineExtension("closeHint", function () {
|
||||
if (this.state.completionActive) this.state.completionActive.close()
|
||||
})
|
||||
|
||||
function Completion(cm, options) {
|
||||
this.cm = cm;
|
||||
this.options = options;
|
||||
this.widget = null;
|
||||
this.debounce = 0;
|
||||
this.tick = 0;
|
||||
this.startPos = this.cm.getCursor("start");
|
||||
this.startLen = this.cm.getLine(this.startPos.line).length - this.cm.getSelection().length;
|
||||
|
||||
if (this.options.updateOnCursorActivity) {
|
||||
var self = this;
|
||||
cm.on("cursorActivity", this.activityFunc = function () {
|
||||
self.cursorActivity();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
var requestAnimationFrame = window.requestAnimationFrame || function (fn) {
|
||||
return setTimeout(fn, 1000 / 60);
|
||||
};
|
||||
var cancelAnimationFrame = window.cancelAnimationFrame || clearTimeout;
|
||||
|
||||
Completion.prototype = {
|
||||
close: function () {
|
||||
if (!this.active()) return;
|
||||
this.cm.state.completionActive = null;
|
||||
this.tick = null;
|
||||
if (this.options.updateOnCursorActivity) {
|
||||
this.cm.off("cursorActivity", this.activityFunc);
|
||||
}
|
||||
|
||||
if (this.widget && this.data) CodeMirror.signal(this.data, "close");
|
||||
if (this.widget) this.widget.close();
|
||||
CodeMirror.signal(this.cm, "endCompletion", this.cm);
|
||||
},
|
||||
|
||||
active: function () {
|
||||
return this.cm.state.completionActive == this;
|
||||
},
|
||||
|
||||
pick: function (data, i) {
|
||||
var completion = data.list[i], self = this;
|
||||
this.cm.operation(function () {
|
||||
if (completion.hint)
|
||||
completion.hint(self.cm, data, completion);
|
||||
else
|
||||
self.cm.replaceRange(getText(completion), completion.from || data.from,
|
||||
completion.to || data.to, "complete");
|
||||
CodeMirror.signal(data, "pick", completion);
|
||||
self.cm.scrollIntoView();
|
||||
});
|
||||
if (this.options.closeOnPick) {
|
||||
this.close();
|
||||
}
|
||||
},
|
||||
|
||||
cursorActivity: function () {
|
||||
if (this.debounce) {
|
||||
cancelAnimationFrame(this.debounce);
|
||||
this.debounce = 0;
|
||||
}
|
||||
|
||||
var identStart = this.startPos;
|
||||
if (this.data) {
|
||||
identStart = this.data.from;
|
||||
}
|
||||
|
||||
var pos = this.cm.getCursor(), line = this.cm.getLine(pos.line);
|
||||
if (pos.line != this.startPos.line || line.length - pos.ch != this.startLen - this.startPos.ch ||
|
||||
pos.ch < identStart.ch || this.cm.somethingSelected() ||
|
||||
(!pos.ch || this.options.closeCharacters.test(line.charAt(pos.ch - 1)))) {
|
||||
this.close();
|
||||
} else {
|
||||
var self = this;
|
||||
this.debounce = requestAnimationFrame(function () {
|
||||
self.update();
|
||||
});
|
||||
if (this.widget) this.widget.disable();
|
||||
}
|
||||
},
|
||||
|
||||
update: function (first) {
|
||||
if (this.tick == null) return
|
||||
var self = this, myTick = ++this.tick
|
||||
fetchHints(this.options.hint, this.cm, this.options, function (data) {
|
||||
if (self.tick == myTick) self.finishUpdate(data, first)
|
||||
})
|
||||
},
|
||||
|
||||
finishUpdate: function (data, first) {
|
||||
if (this.data) CodeMirror.signal(this.data, "update");
|
||||
|
||||
var picked = (this.widget && this.widget.picked) || (first && this.options.completeSingle);
|
||||
if (this.widget) this.widget.close();
|
||||
|
||||
this.data = data;
|
||||
|
||||
if (data && data.list.length) {
|
||||
if (picked && data.list.length == 1) {
|
||||
this.pick(data, 0);
|
||||
} else {
|
||||
this.widget = new Widget(this, data);
|
||||
CodeMirror.signal(data, "shown");
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
function parseOptions(cm, pos, options) {
|
||||
var editor = cm.options.hintOptions;
|
||||
var out = {};
|
||||
for (var prop in defaultOptions) out[prop] = defaultOptions[prop];
|
||||
if (editor) for (var prop in editor)
|
||||
if (editor[prop] !== undefined) out[prop] = editor[prop];
|
||||
if (options) for (var prop in options)
|
||||
if (options[prop] !== undefined) out[prop] = options[prop];
|
||||
if (out.hint.resolve) out.hint = out.hint.resolve(cm, pos)
|
||||
return out;
|
||||
}
|
||||
|
||||
function getText(completion) {
|
||||
if (typeof completion == "string") return completion;
|
||||
else return completion.text;
|
||||
}
|
||||
|
||||
function buildKeyMap(completion, handle) {
|
||||
var baseMap = {
|
||||
Up: function () {
|
||||
handle.moveFocus(-1);
|
||||
},
|
||||
Down: function () {
|
||||
handle.moveFocus(1);
|
||||
},
|
||||
PageUp: function () {
|
||||
handle.moveFocus(-handle.menuSize() + 1, true);
|
||||
},
|
||||
PageDown: function () {
|
||||
handle.moveFocus(handle.menuSize() - 1, true);
|
||||
},
|
||||
Home: function () {
|
||||
handle.setFocus(0);
|
||||
},
|
||||
End: function () {
|
||||
handle.setFocus(handle.length - 1);
|
||||
},
|
||||
// Enter: handle.pick,
|
||||
// Tab: handle.pick,
|
||||
Tab: keyboardEnter,
|
||||
Enter: keyboardEnter,
|
||||
Esc: handle.close
|
||||
};
|
||||
|
||||
var mac = /Mac/.test(navigator.platform);
|
||||
|
||||
if (mac) {
|
||||
baseMap["Ctrl-P"] = function () {
|
||||
handle.moveFocus(-1);
|
||||
};
|
||||
baseMap["Ctrl-N"] = function () {
|
||||
handle.moveFocus(1);
|
||||
};
|
||||
}
|
||||
|
||||
var custom = completion.options.customKeys;
|
||||
var ourMap = custom ? {} : baseMap;
|
||||
|
||||
function addBinding(key, val) {
|
||||
var bound;
|
||||
if (typeof val != "string")
|
||||
bound = function (cm) {
|
||||
return val(cm, handle);
|
||||
};
|
||||
// This mechanism is deprecated
|
||||
else if (baseMap.hasOwnProperty(val))
|
||||
bound = baseMap[val];
|
||||
else
|
||||
bound = val;
|
||||
ourMap[key] = bound;
|
||||
}
|
||||
|
||||
if (custom)
|
||||
for (var key in custom) if (custom.hasOwnProperty(key))
|
||||
addBinding(key, custom[key]);
|
||||
var extra = completion.options.extraKeys;
|
||||
if (extra)
|
||||
for (var key in extra) if (extra.hasOwnProperty(key))
|
||||
addBinding(key, extra[key]);
|
||||
return ourMap;
|
||||
}
|
||||
|
||||
function getHintElement(hintsElement, el) {
|
||||
while (el && el != hintsElement) {
|
||||
if (el.nodeName.toUpperCase() === "LI" && el.parentNode == hintsElement) return el;
|
||||
el = el.parentNode;
|
||||
}
|
||||
}
|
||||
|
||||
function Widget(completion, data) {
|
||||
this.id = "cm-complete-" + Math.floor(Math.random(1e6))
|
||||
this.completion = completion;
|
||||
this.data = data;
|
||||
this.picked = false;
|
||||
var widget = this, cm = completion.cm;
|
||||
var ownerDocument = cm.getInputField().ownerDocument;
|
||||
var parentWindow = ownerDocument.defaultView || ownerDocument.parentWindow;
|
||||
|
||||
var hints = this.hints = ownerDocument.createElement("ul");
|
||||
// $(hints).append(`
|
||||
// <h1>lalallalla</h1>
|
||||
// `)
|
||||
hints.setAttribute("role", "listbox")
|
||||
hints.setAttribute("aria-expanded", "true")
|
||||
hints.id = this.id
|
||||
var theme = completion.cm.options.theme;
|
||||
hints.className = "CodeMirror-hints " + theme;
|
||||
this.selectedHint = data.selectedHint || 0;
|
||||
|
||||
var completions = data.list;
|
||||
for (var i = 0; i < completions.length; ++i) {
|
||||
var elt = hints.appendChild(ownerDocument.createElement("li")), cur = completions[i];
|
||||
var className = HINT_ELEMENT_CLASS + (i != this.selectedHint ? "" : " " + ACTIVE_HINT_ELEMENT_CLASS);
|
||||
if (cur.className != null) className = cur.className + " " + className;
|
||||
elt.className = className;
|
||||
if (i == this.selectedHint) elt.setAttribute("aria-selected", "true")
|
||||
elt.id = this.id + "-" + i
|
||||
elt.setAttribute("role", "option")
|
||||
if (cur.render) cur.render(elt, data, cur);
|
||||
else elt.appendChild(ownerDocument.createTextNode(cur.displayText || getText(cur)));
|
||||
elt.hintId = i;
|
||||
}
|
||||
|
||||
var container = completion.options.container || ownerDocument.body;
|
||||
var pos = cm.cursorCoords(completion.options.alignWithWord ? data.from : null);
|
||||
var left = pos.left, top = pos.bottom, below = true;
|
||||
var offsetLeft = 0, offsetTop = 0;
|
||||
if (container !== ownerDocument.body) {
|
||||
// We offset the cursor position because left and top are relative to the offsetParent's top left corner.
|
||||
var isContainerPositioned = ['absolute', 'relative', 'fixed'].indexOf(parentWindow.getComputedStyle(container).position) !== -1;
|
||||
var offsetParent = isContainerPositioned ? container : container.offsetParent;
|
||||
var offsetParentPosition = offsetParent.getBoundingClientRect();
|
||||
var bodyPosition = ownerDocument.body.getBoundingClientRect();
|
||||
offsetLeft = (offsetParentPosition.left - bodyPosition.left - offsetParent.scrollLeft);
|
||||
offsetTop = (offsetParentPosition.top - bodyPosition.top - offsetParent.scrollTop);
|
||||
}
|
||||
hints.style.left = (left - offsetLeft) + "px";
|
||||
hints.style.top = (top - offsetTop) + "px";
|
||||
// todo 隐藏codemirror自带的提示
|
||||
hints.style.display = 'none'
|
||||
|
||||
// If we're at the edge of the screen, then we want the menu to appear on the left of the cursor.
|
||||
var winW = parentWindow.innerWidth || Math.max(ownerDocument.body.offsetWidth, ownerDocument.documentElement.offsetWidth);
|
||||
var winH = parentWindow.innerHeight || Math.max(ownerDocument.body.offsetHeight, ownerDocument.documentElement.offsetHeight);
|
||||
|
||||
//不用默认的DOM 下拉提示
|
||||
// container.appendChild(hints);
|
||||
hints.remove()
|
||||
|
||||
cm.getInputField().setAttribute("aria-autocomplete", "list")
|
||||
cm.getInputField().setAttribute("aria-owns", this.id)
|
||||
cm.getInputField().setAttribute("aria-activedescendant", this.id + "-" + this.selectedHint)
|
||||
|
||||
var box = completion.options.moveOnOverlap ? hints.getBoundingClientRect() : new DOMRect();
|
||||
var scrolls = completion.options.paddingForScrollbar ? hints.scrollHeight > hints.clientHeight + 1 : false;
|
||||
|
||||
// Compute in the timeout to avoid reflow on init
|
||||
var startScroll;
|
||||
setTimeout(function () {
|
||||
startScroll = cm.getScrollInfo();
|
||||
});
|
||||
|
||||
var overlapY = box.bottom - winH;
|
||||
if (overlapY > 0) {
|
||||
var height = box.bottom - box.top, curTop = pos.top - (pos.bottom - box.top);
|
||||
if (curTop - height > 0) { // Fits above cursor
|
||||
hints.style.top = (top = pos.top - height - offsetTop) + "px";
|
||||
below = false;
|
||||
} else if (height > winH) {
|
||||
hints.style.height = (winH - 5) + "px";
|
||||
hints.style.top = (top = pos.bottom - box.top - offsetTop) + "px";
|
||||
var cursor = cm.getCursor();
|
||||
if (data.from.ch != cursor.ch) {
|
||||
pos = cm.cursorCoords(cursor);
|
||||
hints.style.left = (left = pos.left - offsetLeft) + "px";
|
||||
box = hints.getBoundingClientRect();
|
||||
}
|
||||
}
|
||||
}
|
||||
var overlapX = box.right - winW;
|
||||
if (scrolls) overlapX += cm.display.nativeBarWidth;
|
||||
if (overlapX > 0) {
|
||||
if (box.right - box.left > winW) {
|
||||
hints.style.width = (winW - 5) + "px";
|
||||
overlapX -= (box.right - box.left) - winW;
|
||||
}
|
||||
hints.style.left = (left = Math.max(pos.left - overlapX - offsetLeft, 0)) + "px";
|
||||
}
|
||||
if (scrolls) for (var node = hints.firstChild; node; node = node.nextSibling)
|
||||
node.style.paddingRight = cm.display.nativeBarWidth + "px"
|
||||
|
||||
// debugger
|
||||
cm.addKeyMap(this.keyMap = buildKeyMap(completion, {
|
||||
moveFocus: function (n, avoidWrap) {
|
||||
n === -1 ? keyboardUp && keyboardUp() : keyboardDown && keyboardDown()
|
||||
widget.changeActive(widget.selectedHint + n, avoidWrap);
|
||||
},
|
||||
setFocus: function (n) {
|
||||
widget.changeActive(n);
|
||||
},
|
||||
menuSize: function () {
|
||||
return widget.screenAmount();
|
||||
},
|
||||
length: completions.length,
|
||||
close: function () {
|
||||
completion.close();
|
||||
},
|
||||
pick: function () {
|
||||
widget.pick();
|
||||
},
|
||||
data: data
|
||||
}));
|
||||
|
||||
if (completion.options.closeOnUnfocus) {
|
||||
var closingOnBlur;
|
||||
cm.on("blur", this.onBlur = function () {
|
||||
closingOnBlur = setTimeout(function () {
|
||||
completion.close();
|
||||
}, 100);
|
||||
});
|
||||
cm.on("focus", this.onFocus = function () {
|
||||
clearTimeout(closingOnBlur);
|
||||
});
|
||||
}
|
||||
|
||||
cm.on("scroll", this.onScroll = function () {
|
||||
var curScroll = cm.getScrollInfo(), editor = cm.getWrapperElement().getBoundingClientRect();
|
||||
if (!startScroll) startScroll = cm.getScrollInfo();
|
||||
var newTop = top + startScroll.top - curScroll.top;
|
||||
var point = newTop - (parentWindow.pageYOffset || (ownerDocument.documentElement || ownerDocument.body).scrollTop);
|
||||
if (!below) point += hints.offsetHeight;
|
||||
if (point <= editor.top || point >= editor.bottom) return completion.close();
|
||||
hints.style.top = newTop + "px";
|
||||
hints.style.left = (left + startScroll.left - curScroll.left) + "px";
|
||||
});
|
||||
|
||||
CodeMirror.on(hints, "dblclick", function (e) {
|
||||
var t = getHintElement(hints, e.target || e.srcElement);
|
||||
if (t && t.hintId != null) {
|
||||
widget.changeActive(t.hintId);
|
||||
widget.pick();
|
||||
}
|
||||
});
|
||||
|
||||
CodeMirror.on(hints, "click", function (e) {
|
||||
var t = getHintElement(hints, e.target || e.srcElement);
|
||||
if (t && t.hintId != null) {
|
||||
widget.changeActive(t.hintId);
|
||||
if (completion.options.completeOnSingleClick) widget.pick();
|
||||
}
|
||||
});
|
||||
|
||||
CodeMirror.on(hints, "mousedown", function () {
|
||||
setTimeout(function () {
|
||||
cm.focus();
|
||||
}, 20);
|
||||
});
|
||||
|
||||
// The first hint doesn't need to be scrolled to on init
|
||||
var selectedHintRange = this.getSelectedHintRange();
|
||||
if (selectedHintRange.from !== 0 || selectedHintRange.to !== 0) {
|
||||
this.scrollToActive();
|
||||
}
|
||||
|
||||
CodeMirror.signal(data, "select", completions[this.selectedHint], hints.childNodes[this.selectedHint]);
|
||||
return true;
|
||||
}
|
||||
|
||||
Widget.prototype = {
|
||||
close: function () {
|
||||
if (this.completion.widget != this) return;
|
||||
this.completion.widget = null;
|
||||
if (this.hints.parentNode) this.hints.parentNode.removeChild(this.hints);
|
||||
this.completion.cm.removeKeyMap(this.keyMap);
|
||||
var input = this.completion.cm.getInputField()
|
||||
input.removeAttribute("aria-activedescendant")
|
||||
input.removeAttribute("aria-owns")
|
||||
|
||||
var cm = this.completion.cm;
|
||||
if (this.completion.options.closeOnUnfocus) {
|
||||
cm.off("blur", this.onBlur);
|
||||
cm.off("focus", this.onFocus);
|
||||
}
|
||||
cm.off("scroll", this.onScroll);
|
||||
},
|
||||
|
||||
disable: function () {
|
||||
this.completion.cm.removeKeyMap(this.keyMap);
|
||||
var widget = this;
|
||||
this.keyMap = {
|
||||
Enter: function () {
|
||||
widget.picked = true;
|
||||
}
|
||||
};
|
||||
this.completion.cm.addKeyMap(this.keyMap);
|
||||
},
|
||||
|
||||
pick: function () {
|
||||
this.completion.pick(this.data, this.selectedHint);
|
||||
},
|
||||
|
||||
changeActive: function (i, avoidWrap) {
|
||||
if (i >= this.data.list.length)
|
||||
i = avoidWrap ? this.data.list.length - 1 : 0;
|
||||
else if (i < 0)
|
||||
i = avoidWrap ? 0 : this.data.list.length - 1;
|
||||
if (this.selectedHint == i) return;
|
||||
var node = this.hints.childNodes[this.selectedHint];
|
||||
if (node) {
|
||||
node.className = node.className.replace(" " + ACTIVE_HINT_ELEMENT_CLASS, "");
|
||||
node.removeAttribute("aria-selected")
|
||||
}
|
||||
node = this.hints.childNodes[this.selectedHint = i];
|
||||
node.className += " " + ACTIVE_HINT_ELEMENT_CLASS;
|
||||
node.setAttribute("aria-selected", "true")
|
||||
this.completion.cm.getInputField().setAttribute("aria-activedescendant", node.id)
|
||||
this.scrollToActive()
|
||||
CodeMirror.signal(this.data, "select", this.data.list[this.selectedHint], node);
|
||||
},
|
||||
|
||||
scrollToActive: function () {
|
||||
var selectedHintRange = this.getSelectedHintRange();
|
||||
var node1 = this.hints.childNodes[selectedHintRange.from];
|
||||
var node2 = this.hints.childNodes[selectedHintRange.to];
|
||||
var firstNode = this.hints.firstChild;
|
||||
if (node1.offsetTop < this.hints.scrollTop)
|
||||
this.hints.scrollTop = node1.offsetTop - firstNode.offsetTop;
|
||||
else if (node2.offsetTop + node2.offsetHeight > this.hints.scrollTop + this.hints.clientHeight)
|
||||
this.hints.scrollTop = node2.offsetTop + node2.offsetHeight - this.hints.clientHeight + firstNode.offsetTop;
|
||||
},
|
||||
|
||||
screenAmount: function () {
|
||||
return Math.floor(this.hints.clientHeight / this.hints.firstChild.offsetHeight) || 1;
|
||||
},
|
||||
|
||||
getSelectedHintRange: function () {
|
||||
var margin = this.completion.options.scrollMargin || 0;
|
||||
return {
|
||||
from: Math.max(0, this.selectedHint - margin),
|
||||
to: Math.min(this.data.list.length - 1, this.selectedHint + margin),
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
function applicableHelpers(cm, helpers) {
|
||||
if (!cm.somethingSelected()) return helpers
|
||||
var result = []
|
||||
for (var i = 0; i < helpers.length; i++)
|
||||
if (helpers[i].supportsSelection) result.push(helpers[i])
|
||||
return result
|
||||
}
|
||||
|
||||
function fetchHints(hint, cm, options, callback) {
|
||||
if (hint.async) {
|
||||
hint(cm, callback, options)
|
||||
} else {
|
||||
var result = hint(cm, options)
|
||||
if (result && result.then) result.then(callback)
|
||||
else callback(result)
|
||||
}
|
||||
}
|
||||
|
||||
function resolveAutoHints(cm, pos) {
|
||||
var helpers = cm.getHelpers(pos, "hint"), words
|
||||
if (helpers.length) {
|
||||
var resolved = function (cm, callback, options) {
|
||||
var app = applicableHelpers(cm, helpers);
|
||||
|
||||
function run(i) {
|
||||
if (i == app.length) return callback(null)
|
||||
fetchHints(app[i], cm, options, function (result) {
|
||||
if (result && result.list.length > 0) callback(result)
|
||||
else run(i + 1)
|
||||
})
|
||||
}
|
||||
|
||||
run(0)
|
||||
}
|
||||
resolved.async = true
|
||||
resolved.supportsSelection = true
|
||||
return resolved
|
||||
} else if (words = cm.getHelper(cm.getCursor(), "hintWords")) {
|
||||
return function (cm) {
|
||||
return CodeMirror.hint.fromList(cm, {words: words})
|
||||
}
|
||||
} else if (CodeMirror.hint.anyword) {
|
||||
return function (cm, options) {
|
||||
return CodeMirror.hint.anyword(cm, options)
|
||||
}
|
||||
} else {
|
||||
return function () {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
CodeMirror.registerHelper("hint", "auto", {
|
||||
resolve: resolveAutoHints
|
||||
});
|
||||
|
||||
CodeMirror.registerHelper("hint", "fromList", function (cm, options) {
|
||||
var cur = cm.getCursor(), token = cm.getTokenAt(cur)
|
||||
var term, from = CodeMirror.Pos(cur.line, token.start), to = cur
|
||||
if (token.start < cur.ch && /\w/.test(token.string.charAt(cur.ch - token.start - 1))) {
|
||||
term = token.string.substr(0, cur.ch - token.start)
|
||||
} else {
|
||||
term = ""
|
||||
from = cur
|
||||
}
|
||||
var found = [];
|
||||
for (var i = 0; i < options.words.length; i++) {
|
||||
var word = options.words[i];
|
||||
if (word.slice(0, term.length) == term)
|
||||
found.push(word);
|
||||
}
|
||||
|
||||
if (found.length) return {list: found, from: from, to: to};
|
||||
});
|
||||
|
||||
CodeMirror.commands.autocomplete = CodeMirror.showHint;
|
||||
|
||||
var defaultOptions = {
|
||||
hint: CodeMirror.hint.auto,
|
||||
completeSingle: true,
|
||||
alignWithWord: true,
|
||||
closeCharacters: /[\s()\[\]{};:>,]/,
|
||||
|
||||
closeOnPick: false,
|
||||
closeOnUnfocus: false, //阻止提示信息 失焦关闭
|
||||
// closeOnUnfocus: false,
|
||||
|
||||
updateOnCursorActivity: true,
|
||||
completeOnSingleClick: true,
|
||||
container: null,
|
||||
customKeys: null,
|
||||
extraKeys: null,
|
||||
paddingForScrollbar: true,
|
||||
moveOnOverlap: true,
|
||||
};
|
||||
CodeMirror.defineOption("hintOptions", null);
|
||||
|
||||
}
|
||||
@@ -0,0 +1,227 @@
|
||||
//正则 向前去找关键字
|
||||
/* 用于匹配关系数据 */
|
||||
function matchOperator(CodeMirror, hintParams = {}) {
|
||||
var editor = hintParams.editor;
|
||||
var Pos = CodeMirror.Pos
|
||||
var cur = hintParams.cur;
|
||||
var token = hintParams.token;
|
||||
if (!editor) {
|
||||
return
|
||||
}
|
||||
|
||||
|
||||
var start = token.start;
|
||||
var cont = true;
|
||||
var leftTokenGroup = [];
|
||||
while (cont) {
|
||||
start = token.start;
|
||||
leftTokenGroup.unshift(token);
|
||||
token = editor.getTokenAt(Pos(cur.line, token.start));
|
||||
cont = !(token.string.match(/^[ ]*$/) || start === 0); //只用空格做终止条件
|
||||
}
|
||||
|
||||
var cursorLeftString = editor.getRange(Pos(cur.line, leftTokenGroup[0].start), Pos(cur.line, leftTokenGroup[leftTokenGroup.length - 1].end))
|
||||
|
||||
//判断是不是满足 运算符 表达式的正则
|
||||
//test 如果是ig 会改变正则指针: https://my.oschina.net/jamesview/blog/5460753
|
||||
var reg = /^(.*?)(=|!=|>|<|>=|<=)([^ ]*?)$/;
|
||||
if (reg.test(cursorLeftString)) {
|
||||
var execArr = reg.exec(cursorLeftString) || []
|
||||
return {
|
||||
leftTokenGroup,
|
||||
cursorLeftString,
|
||||
label: execArr[1],
|
||||
sign: execArr[2],
|
||||
value: execArr[3],
|
||||
}
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
function matchCommon(CodeMirror, hintParams = {}) {
|
||||
//通用情况 QUANTILE(expr,level) 左括号右侧第一个就是 关键字
|
||||
var editor = hintParams.editor;
|
||||
var Pos = CodeMirror.Pos
|
||||
var cur = hintParams.cur;
|
||||
var token = hintParams.token;
|
||||
if (!editor) {
|
||||
return
|
||||
}
|
||||
|
||||
|
||||
var start = token.start;
|
||||
var cont = true;
|
||||
var leftTokenGroup = [];
|
||||
while (cont) {
|
||||
start = token.start;
|
||||
leftTokenGroup.unshift(token);
|
||||
token = editor.getTokenAt(Pos(cur.line, token.start));
|
||||
cont = !(token.string.match(/^[ (]*$/) || start === 0); //括号或者空格为终止条件
|
||||
|
||||
//括号补上
|
||||
if (token.string === '(') {
|
||||
leftTokenGroup.unshift(token);
|
||||
}
|
||||
}
|
||||
|
||||
var cursorLeftString = editor.getRange(Pos(cur.line, leftTokenGroup[0].start), Pos(cur.line, leftTokenGroup[leftTokenGroup.length - 1].end))
|
||||
|
||||
//判断是不是满足 运算符 表达式的正则
|
||||
var reg = /^\((.*?),([^ ]*)$/;
|
||||
if (reg.test(cursorLeftString)) {
|
||||
var execArr = reg.exec(cursorLeftString) || []
|
||||
return {
|
||||
leftTokenGroup,
|
||||
cursorLeftString,
|
||||
label: execArr[1],
|
||||
sign: 'unknown', //没必要判断
|
||||
value: execArr[2],
|
||||
}
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
function matchIn(CodeMirror, hintParams = {}) {
|
||||
//in 的情况比较特殊
|
||||
//通用情况 expr not in (values) expr in (values)
|
||||
var editor = hintParams.editor;
|
||||
var Pos = CodeMirror.Pos
|
||||
var cur = hintParams.cur;
|
||||
var token = hintParams.token;
|
||||
if (!editor) {
|
||||
return
|
||||
}
|
||||
|
||||
|
||||
var start = token.start;
|
||||
var cont = true;
|
||||
var leftTokenGroup = [];
|
||||
|
||||
//找到左括号
|
||||
while (cont) {
|
||||
start = token.start;
|
||||
leftTokenGroup.unshift(token);
|
||||
token = editor.getTokenAt(Pos(cur.line, token.start));
|
||||
cont = !(token.string.match(/^[ (]*$/) || start === 0); //括号或者空格为终止条件
|
||||
//左括号补上
|
||||
if (token.string === '(') {
|
||||
leftTokenGroup.unshift(token);
|
||||
}
|
||||
}
|
||||
|
||||
//左括号继续向右找
|
||||
cont = true
|
||||
while (cont) {
|
||||
start = token.start;
|
||||
leftTokenGroup.unshift(token);
|
||||
token = editor.getTokenAt(Pos(cur.line, token.start));
|
||||
cont = !(!token.string.match(/^(in|not| )/g) || start === 0); //括号或者空格为终止条件
|
||||
|
||||
//string-2
|
||||
if (token.type === 'string-2') {
|
||||
leftTokenGroup.unshift(token);
|
||||
}
|
||||
}
|
||||
var cursorLeftString = editor.getRange(Pos(cur.line, leftTokenGroup[0].start), Pos(cur.line, leftTokenGroup[leftTokenGroup.length - 1].end))
|
||||
|
||||
//判断是不是满足 运算符 表达式的正则
|
||||
var reg = /^(.*?)[ ]+((?:not[ ]+)?in)[ ]*\(([^ ]*?)$/i;
|
||||
if (reg.test(cursorLeftString)) {
|
||||
var execArr = reg.exec(cursorLeftString) || []
|
||||
return {
|
||||
leftTokenGroup,
|
||||
cursorLeftString,
|
||||
label: execArr[1],
|
||||
sign: execArr[2],
|
||||
value: execArr[3],
|
||||
}
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
function matchLike(CodeMirror, hintParams = {}) {
|
||||
//like 的情况比较特殊 expr like value , expr not like value
|
||||
var editor = hintParams.editor;
|
||||
var Pos = CodeMirror.Pos
|
||||
var cur = hintParams.cur;
|
||||
var token = hintParams.token;
|
||||
if (!editor) {
|
||||
return
|
||||
}
|
||||
|
||||
|
||||
var start = token.start;
|
||||
var cont = true;
|
||||
var leftTokenGroup = [];
|
||||
|
||||
//找到左括号
|
||||
while (cont) {
|
||||
start = token.start;
|
||||
leftTokenGroup.unshift(token);
|
||||
token = editor.getTokenAt(Pos(cur.line, token.start));
|
||||
cont = !(token.string.match(/^[ ]*$/) || start === 0); //括号或者空格为终止条件
|
||||
}
|
||||
|
||||
//左括号继续向右找
|
||||
cont = true
|
||||
while (cont) {
|
||||
start = token.start;
|
||||
leftTokenGroup.unshift(token);
|
||||
token = editor.getTokenAt(Pos(cur.line, token.start));
|
||||
cont = !(!token.string.match(/^(like|not| )/g) || start === 0); //括号或者空格为终止条件
|
||||
|
||||
//string-2
|
||||
if (token.type === 'string-2') {
|
||||
leftTokenGroup.unshift(token);
|
||||
}
|
||||
}
|
||||
var cursorLeftString = editor.getRange(Pos(cur.line, leftTokenGroup[0].start), Pos(cur.line, leftTokenGroup[leftTokenGroup.length - 1].end))
|
||||
|
||||
//判断是不是满足 运算符 表达式的正则
|
||||
var reg = /^(.*?)[ ]+((?:not[ ]+)?like)[ ]*([^ ]*?)$/i;
|
||||
if (reg.test(cursorLeftString)) {
|
||||
var execArr = reg.exec(cursorLeftString) || []
|
||||
return {
|
||||
leftTokenGroup,
|
||||
cursorLeftString,
|
||||
label: execArr[1],
|
||||
sign: execArr[2],
|
||||
value: execArr[3],
|
||||
}
|
||||
}
|
||||
return null
|
||||
|
||||
}
|
||||
|
||||
export const matchMain = (CodeMirror, params, manualParams = {}) => {
|
||||
var matchRes = null
|
||||
//匹配 运算符表达式
|
||||
matchRes = matchOperator(CodeMirror, manualParams)
|
||||
if (matchRes) {
|
||||
return matchRes
|
||||
}
|
||||
|
||||
//匹配 in表达式
|
||||
matchRes = matchIn(CodeMirror, manualParams)
|
||||
if (matchRes) {
|
||||
return matchRes
|
||||
}
|
||||
|
||||
//匹配 like表达式
|
||||
matchRes = matchLike(CodeMirror, manualParams)
|
||||
if (matchRes) {
|
||||
return matchRes
|
||||
}
|
||||
|
||||
//这里缺少一个对 count(distinct expr) 模式的匹配, 感觉大数据涉及存在缺陷, 先暂时不写
|
||||
|
||||
|
||||
//匹配 其他表达式 (expr,value1,value2....) 模式的匹配
|
||||
matchRes = matchCommon(CodeMirror, manualParams)
|
||||
if (matchRes) {
|
||||
// 说明这是一个 运算符表达式
|
||||
return matchRes
|
||||
}
|
||||
|
||||
return matchRes
|
||||
}
|
||||
591
src/components/advancedSearch/showhint/TextSearch/show-hint.js
Normal file
591
src/components/advancedSearch/showhint/TextSearch/show-hint.js
Normal file
@@ -0,0 +1,591 @@
|
||||
export default function showHint(CodeMirror) {
|
||||
"use strict";
|
||||
|
||||
var HINT_ELEMENT_CLASS = "CodeMirror-hint";
|
||||
var ACTIVE_HINT_ELEMENT_CLASS = "CodeMirror-hint-active";
|
||||
|
||||
// This is the old interface, kept around for now to stay
|
||||
// backwards-compatible.
|
||||
CodeMirror.showHint = function (cm, getHints, options) {
|
||||
if (!getHints) return cm.showHint(options);
|
||||
if (options && options.async) getHints.async = true;
|
||||
var newOpts = {hint: getHints};
|
||||
if (options) for (var prop in options) newOpts[prop] = options[prop];
|
||||
return cm.showHint(newOpts);
|
||||
};
|
||||
|
||||
CodeMirror.defineExtension("showHint", function (options) {
|
||||
options = parseOptions(this, this.getCursor("start"), options);
|
||||
var selections = this.listSelections()
|
||||
if (selections.length > 1) return;
|
||||
// By default, don't allow completion when something is selected.
|
||||
// A hint function can have a `supportsSelection` property to
|
||||
// indicate that it can handle selections.
|
||||
if (this.somethingSelected()) {
|
||||
if (!options.hint.supportsSelection) return;
|
||||
// Don't try with cross-line selections
|
||||
for (var i = 0; i < selections.length; i++)
|
||||
if (selections[i].head.line != selections[i].anchor.line) return;
|
||||
}
|
||||
|
||||
if (this.state.completionActive) this.state.completionActive.close();
|
||||
var completion = this.state.completionActive = new Completion(this, options);
|
||||
if (!completion.options.hint) return;
|
||||
|
||||
CodeMirror.signal(this, "startCompletion", this);
|
||||
completion.update(true);
|
||||
});
|
||||
|
||||
CodeMirror.defineExtension("closeHint", function () {
|
||||
if (this.state.completionActive) this.state.completionActive.close()
|
||||
})
|
||||
|
||||
function Completion(cm, options) {
|
||||
this.cm = cm;
|
||||
this.options = options;
|
||||
this.widget = null;
|
||||
this.debounce = 0;
|
||||
this.tick = 0;
|
||||
this.startPos = this.cm.getCursor("start");
|
||||
this.startLen = this.cm.getLine(this.startPos.line).length - this.cm.getSelection().length;
|
||||
|
||||
if (this.options.updateOnCursorActivity) {
|
||||
var self = this;
|
||||
cm.on("cursorActivity", this.activityFunc = function () {
|
||||
self.cursorActivity();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
var requestAnimationFrame = window.requestAnimationFrame || function (fn) {
|
||||
return setTimeout(fn, 1000 / 60);
|
||||
};
|
||||
var cancelAnimationFrame = window.cancelAnimationFrame || clearTimeout;
|
||||
|
||||
Completion.prototype = {
|
||||
close: function () {
|
||||
if (!this.active()) return;
|
||||
this.cm.state.completionActive = null;
|
||||
this.tick = null;
|
||||
if (this.options.updateOnCursorActivity) {
|
||||
this.cm.off("cursorActivity", this.activityFunc);
|
||||
}
|
||||
|
||||
if (this.widget && this.data) CodeMirror.signal(this.data, "close");
|
||||
if (this.widget) this.widget.close();
|
||||
CodeMirror.signal(this.cm, "endCompletion", this.cm);
|
||||
},
|
||||
|
||||
active: function () {
|
||||
return this.cm.state.completionActive == this;
|
||||
},
|
||||
|
||||
pick: function (data, i) {
|
||||
var completion = data.list[i], self = this;
|
||||
this.cm.operation(function () {
|
||||
if (completion.hint)
|
||||
completion.hint(self.cm, data, completion);
|
||||
else
|
||||
self.cm.replaceRange(getText(completion), completion.from || data.from,
|
||||
completion.to || data.to, "complete");
|
||||
CodeMirror.signal(data, "pick", completion);
|
||||
self.cm.scrollIntoView();
|
||||
});
|
||||
if (this.options.closeOnPick) {
|
||||
this.close();
|
||||
}
|
||||
},
|
||||
|
||||
cursorActivity: function () {
|
||||
if (this.debounce) {
|
||||
cancelAnimationFrame(this.debounce);
|
||||
this.debounce = 0;
|
||||
}
|
||||
|
||||
var identStart = this.startPos;
|
||||
if (this.data) {
|
||||
identStart = this.data.from;
|
||||
}
|
||||
|
||||
var pos = this.cm.getCursor(), line = this.cm.getLine(pos.line);
|
||||
if (pos.line != this.startPos.line || line.length - pos.ch != this.startLen - this.startPos.ch ||
|
||||
pos.ch < identStart.ch || this.cm.somethingSelected() ||
|
||||
(!pos.ch || this.options.closeCharacters.test(line.charAt(pos.ch - 1)))) {
|
||||
this.close();
|
||||
} else {
|
||||
var self = this;
|
||||
this.debounce = requestAnimationFrame(function () {
|
||||
self.update();
|
||||
});
|
||||
if (this.widget) this.widget.disable();
|
||||
}
|
||||
},
|
||||
|
||||
update: function (first) {
|
||||
if (this.tick == null) return
|
||||
var self = this, myTick = ++this.tick
|
||||
fetchHints(this.options.hint, this.cm, this.options, function (data) {
|
||||
if (self.tick == myTick) self.finishUpdate(data, first)
|
||||
})
|
||||
},
|
||||
|
||||
finishUpdate: function (data, first) {
|
||||
if (this.data) CodeMirror.signal(this.data, "update");
|
||||
|
||||
var picked = (this.widget && this.widget.picked) || (first && this.options.completeSingle);
|
||||
if (this.widget) this.widget.close();
|
||||
|
||||
this.data = data;
|
||||
|
||||
if (data && data.list.length) {
|
||||
if (picked && data.list.length == 1) {
|
||||
this.pick(data, 0);
|
||||
} else {
|
||||
this.widget = new Widget(this, data);
|
||||
CodeMirror.signal(data, "shown");
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
function parseOptions(cm, pos, options) {
|
||||
var editor = cm.options.hintOptions;
|
||||
var out = {};
|
||||
for (var prop in defaultOptions) out[prop] = defaultOptions[prop];
|
||||
if (editor) for (var prop in editor)
|
||||
if (editor[prop] !== undefined) out[prop] = editor[prop];
|
||||
if (options) for (var prop in options)
|
||||
if (options[prop] !== undefined) out[prop] = options[prop];
|
||||
if (out.hint.resolve) out.hint = out.hint.resolve(cm, pos)
|
||||
return out;
|
||||
}
|
||||
|
||||
function getText(completion) {
|
||||
if (typeof completion == "string") return completion;
|
||||
else return completion.text;
|
||||
}
|
||||
|
||||
function buildKeyMap(completion, handle) {
|
||||
var baseMap = {
|
||||
Up: function () {
|
||||
handle.moveFocus(-1);
|
||||
},
|
||||
Down: function () {
|
||||
handle.moveFocus(1);
|
||||
},
|
||||
PageUp: function () {
|
||||
handle.moveFocus(-handle.menuSize() + 1, true);
|
||||
},
|
||||
PageDown: function () {
|
||||
handle.moveFocus(handle.menuSize() - 1, true);
|
||||
},
|
||||
Home: function () {
|
||||
handle.setFocus(0);
|
||||
},
|
||||
End: function () {
|
||||
handle.setFocus(handle.length - 1);
|
||||
},
|
||||
Enter: handle.pick,
|
||||
Tab: handle.pick,
|
||||
Esc: handle.close
|
||||
};
|
||||
|
||||
var mac = /Mac/.test(navigator.platform);
|
||||
|
||||
if (mac) {
|
||||
baseMap["Ctrl-P"] = function () {
|
||||
handle.moveFocus(-1);
|
||||
};
|
||||
baseMap["Ctrl-N"] = function () {
|
||||
handle.moveFocus(1);
|
||||
};
|
||||
}
|
||||
|
||||
var custom = completion.options.customKeys;
|
||||
var ourMap = custom ? {} : baseMap;
|
||||
|
||||
function addBinding(key, val) {
|
||||
var bound;
|
||||
if (typeof val != "string")
|
||||
bound = function (cm) {
|
||||
return val(cm, handle);
|
||||
};
|
||||
// This mechanism is deprecated
|
||||
else if (baseMap.hasOwnProperty(val))
|
||||
bound = baseMap[val];
|
||||
else
|
||||
bound = val;
|
||||
ourMap[key] = bound;
|
||||
}
|
||||
|
||||
if (custom)
|
||||
for (var key in custom) if (custom.hasOwnProperty(key))
|
||||
addBinding(key, custom[key]);
|
||||
var extra = completion.options.extraKeys;
|
||||
if (extra)
|
||||
for (var key in extra) if (extra.hasOwnProperty(key))
|
||||
addBinding(key, extra[key]);
|
||||
return ourMap;
|
||||
}
|
||||
|
||||
function getHintElement(hintsElement, el) {
|
||||
while (el && el != hintsElement) {
|
||||
if (el.nodeName.toUpperCase() === "LI" && el.parentNode == hintsElement) return el;
|
||||
el = el.parentNode;
|
||||
}
|
||||
}
|
||||
|
||||
function Widget(completion, data) {
|
||||
this.id = "cm-complete-" + Math.floor(Math.random(1e6))
|
||||
this.completion = completion;
|
||||
this.data = data;
|
||||
this.picked = false;
|
||||
var widget = this, cm = completion.cm;
|
||||
var ownerDocument = cm.getInputField().ownerDocument;
|
||||
var parentWindow = ownerDocument.defaultView || ownerDocument.parentWindow;
|
||||
|
||||
var hints = this.hints = ownerDocument.createElement("ul");
|
||||
// $(hints).append(`
|
||||
// <h1>lalallalla</h1>
|
||||
// `)
|
||||
hints.setAttribute("role", "listbox")
|
||||
hints.setAttribute("aria-expanded", "true")
|
||||
hints.id = this.id
|
||||
var theme = completion.cm.options.theme;
|
||||
hints.className = "CodeMirror-hints " + theme;
|
||||
this.selectedHint = data.selectedHint || 0;
|
||||
|
||||
var completions = data.list;
|
||||
for (var i = 0; i < completions.length; ++i) {
|
||||
var elt = hints.appendChild(ownerDocument.createElement("li")), cur = completions[i];
|
||||
var className = HINT_ELEMENT_CLASS + (i != this.selectedHint ? "" : " " + ACTIVE_HINT_ELEMENT_CLASS);
|
||||
if (cur.className != null) className = cur.className + " " + className;
|
||||
elt.className = className;
|
||||
if (i == this.selectedHint) elt.setAttribute("aria-selected", "true")
|
||||
elt.id = this.id + "-" + i
|
||||
elt.setAttribute("role", "option")
|
||||
if (cur.render) cur.render(elt, data, cur);
|
||||
else elt.appendChild(ownerDocument.createTextNode(cur.displayText || getText(cur)));
|
||||
elt.hintId = i;
|
||||
}
|
||||
|
||||
var container = completion.options.container || ownerDocument.body;
|
||||
var pos = cm.cursorCoords(completion.options.alignWithWord ? data.from : null);
|
||||
var left = pos.left, top = pos.bottom, below = true;
|
||||
var offsetLeft = 0, offsetTop = 0;
|
||||
if (container !== ownerDocument.body) {
|
||||
// We offset the cursor position because left and top are relative to the offsetParent's top left corner.
|
||||
var isContainerPositioned = ['absolute', 'relative', 'fixed'].indexOf(parentWindow.getComputedStyle(container).position) !== -1;
|
||||
var offsetParent = isContainerPositioned ? container : container.offsetParent;
|
||||
var offsetParentPosition = offsetParent.getBoundingClientRect();
|
||||
var bodyPosition = ownerDocument.body.getBoundingClientRect();
|
||||
offsetLeft = (offsetParentPosition.left - bodyPosition.left - offsetParent.scrollLeft);
|
||||
offsetTop = (offsetParentPosition.top - bodyPosition.top - offsetParent.scrollTop);
|
||||
}
|
||||
hints.style.left = (left - offsetLeft) + "px";
|
||||
hints.style.top = (top - offsetTop) + "px";
|
||||
// todo 隐藏codemirror自带的提示
|
||||
hints.style.display = 'none'
|
||||
|
||||
// If we're at the edge of the screen, then we want the menu to appear on the left of the cursor.
|
||||
var winW = parentWindow.innerWidth || Math.max(ownerDocument.body.offsetWidth, ownerDocument.documentElement.offsetWidth);
|
||||
var winH = parentWindow.innerHeight || Math.max(ownerDocument.body.offsetHeight, ownerDocument.documentElement.offsetHeight);
|
||||
//在这里 添加的DOM 元素 -- 该方案 实现复杂算了吧
|
||||
container.appendChild(hints);
|
||||
// debugger
|
||||
// $(container).append(
|
||||
// `
|
||||
// <div>
|
||||
// <h1>hahah</h1>
|
||||
// ${ hints }
|
||||
// </div>
|
||||
// `
|
||||
// )
|
||||
cm.getInputField().setAttribute("aria-autocomplete", "list")
|
||||
cm.getInputField().setAttribute("aria-owns", this.id)
|
||||
cm.getInputField().setAttribute("aria-activedescendant", this.id + "-" + this.selectedHint)
|
||||
|
||||
var box = completion.options.moveOnOverlap ? hints.getBoundingClientRect() : new DOMRect();
|
||||
var scrolls = completion.options.paddingForScrollbar ? hints.scrollHeight > hints.clientHeight + 1 : false;
|
||||
|
||||
// Compute in the timeout to avoid reflow on init
|
||||
var startScroll;
|
||||
setTimeout(function () {
|
||||
startScroll = cm.getScrollInfo();
|
||||
});
|
||||
|
||||
var overlapY = box.bottom - winH;
|
||||
if (overlapY > 0) {
|
||||
var height = box.bottom - box.top, curTop = pos.top - (pos.bottom - box.top);
|
||||
if (curTop - height > 0) { // Fits above cursor
|
||||
hints.style.top = (top = pos.top - height - offsetTop) + "px";
|
||||
below = false;
|
||||
} else if (height > winH) {
|
||||
hints.style.height = (winH - 5) + "px";
|
||||
hints.style.top = (top = pos.bottom - box.top - offsetTop) + "px";
|
||||
var cursor = cm.getCursor();
|
||||
if (data.from.ch != cursor.ch) {
|
||||
pos = cm.cursorCoords(cursor);
|
||||
hints.style.left = (left = pos.left - offsetLeft) + "px";
|
||||
box = hints.getBoundingClientRect();
|
||||
}
|
||||
}
|
||||
}
|
||||
var overlapX = box.right - winW;
|
||||
if (scrolls) overlapX += cm.display.nativeBarWidth;
|
||||
if (overlapX > 0) {
|
||||
if (box.right - box.left > winW) {
|
||||
hints.style.width = (winW - 5) + "px";
|
||||
overlapX -= (box.right - box.left) - winW;
|
||||
}
|
||||
hints.style.left = (left = Math.max(pos.left - overlapX - offsetLeft, 0)) + "px";
|
||||
}
|
||||
if (scrolls) for (var node = hints.firstChild; node; node = node.nextSibling)
|
||||
node.style.paddingRight = cm.display.nativeBarWidth + "px"
|
||||
|
||||
// debugger
|
||||
cm.addKeyMap(this.keyMap = buildKeyMap(completion, {
|
||||
moveFocus: function (n, avoidWrap) {
|
||||
widget.changeActive(widget.selectedHint + n, avoidWrap);
|
||||
},
|
||||
setFocus: function (n) {
|
||||
widget.changeActive(n);
|
||||
},
|
||||
menuSize: function () {
|
||||
return widget.screenAmount();
|
||||
},
|
||||
length: completions.length,
|
||||
close: function () {
|
||||
completion.close();
|
||||
},
|
||||
pick: function () {
|
||||
widget.pick();
|
||||
},
|
||||
data: data
|
||||
}));
|
||||
|
||||
if (completion.options.closeOnUnfocus) {
|
||||
var closingOnBlur;
|
||||
cm.on("blur", this.onBlur = function () {
|
||||
closingOnBlur = setTimeout(function () {
|
||||
completion.close();
|
||||
}, 100);
|
||||
});
|
||||
cm.on("focus", this.onFocus = function () {
|
||||
clearTimeout(closingOnBlur);
|
||||
});
|
||||
}
|
||||
|
||||
cm.on("scroll", this.onScroll = function () {
|
||||
var curScroll = cm.getScrollInfo(), editor = cm.getWrapperElement().getBoundingClientRect();
|
||||
if (!startScroll) startScroll = cm.getScrollInfo();
|
||||
var newTop = top + startScroll.top - curScroll.top;
|
||||
var point = newTop - (parentWindow.pageYOffset || (ownerDocument.documentElement || ownerDocument.body).scrollTop);
|
||||
if (!below) point += hints.offsetHeight;
|
||||
if (point <= editor.top || point >= editor.bottom) return completion.close();
|
||||
hints.style.top = newTop + "px";
|
||||
hints.style.left = (left + startScroll.left - curScroll.left) + "px";
|
||||
});
|
||||
|
||||
CodeMirror.on(hints, "dblclick", function (e) {
|
||||
var t = getHintElement(hints, e.target || e.srcElement);
|
||||
if (t && t.hintId != null) {
|
||||
widget.changeActive(t.hintId);
|
||||
widget.pick();
|
||||
}
|
||||
});
|
||||
|
||||
CodeMirror.on(hints, "click", function (e) {
|
||||
var t = getHintElement(hints, e.target || e.srcElement);
|
||||
if (t && t.hintId != null) {
|
||||
widget.changeActive(t.hintId);
|
||||
if (completion.options.completeOnSingleClick) widget.pick();
|
||||
}
|
||||
});
|
||||
|
||||
CodeMirror.on(hints, "mousedown", function () {
|
||||
setTimeout(function () {
|
||||
cm.focus();
|
||||
}, 20);
|
||||
});
|
||||
|
||||
// The first hint doesn't need to be scrolled to on init
|
||||
var selectedHintRange = this.getSelectedHintRange();
|
||||
if (selectedHintRange.from !== 0 || selectedHintRange.to !== 0) {
|
||||
this.scrollToActive();
|
||||
}
|
||||
|
||||
CodeMirror.signal(data, "select", completions[this.selectedHint], hints.childNodes[this.selectedHint]);
|
||||
return true;
|
||||
}
|
||||
|
||||
Widget.prototype = {
|
||||
close: function () {
|
||||
if (this.completion.widget != this) return;
|
||||
this.completion.widget = null;
|
||||
if (this.hints.parentNode) this.hints.parentNode.removeChild(this.hints);
|
||||
this.completion.cm.removeKeyMap(this.keyMap);
|
||||
var input = this.completion.cm.getInputField()
|
||||
input.removeAttribute("aria-activedescendant")
|
||||
input.removeAttribute("aria-owns")
|
||||
|
||||
var cm = this.completion.cm;
|
||||
if (this.completion.options.closeOnUnfocus) {
|
||||
cm.off("blur", this.onBlur);
|
||||
cm.off("focus", this.onFocus);
|
||||
}
|
||||
cm.off("scroll", this.onScroll);
|
||||
},
|
||||
|
||||
disable: function () {
|
||||
this.completion.cm.removeKeyMap(this.keyMap);
|
||||
var widget = this;
|
||||
this.keyMap = {
|
||||
Enter: function () {
|
||||
widget.picked = true;
|
||||
}
|
||||
};
|
||||
this.completion.cm.addKeyMap(this.keyMap);
|
||||
},
|
||||
|
||||
pick: function () {
|
||||
this.completion.pick(this.data, this.selectedHint);
|
||||
},
|
||||
|
||||
changeActive: function (i, avoidWrap) {
|
||||
if (i >= this.data.list.length)
|
||||
i = avoidWrap ? this.data.list.length - 1 : 0;
|
||||
else if (i < 0)
|
||||
i = avoidWrap ? 0 : this.data.list.length - 1;
|
||||
if (this.selectedHint == i) return;
|
||||
var node = this.hints.childNodes[this.selectedHint];
|
||||
if (node) {
|
||||
node.className = node.className.replace(" " + ACTIVE_HINT_ELEMENT_CLASS, "");
|
||||
node.removeAttribute("aria-selected")
|
||||
}
|
||||
node = this.hints.childNodes[this.selectedHint = i];
|
||||
node.className += " " + ACTIVE_HINT_ELEMENT_CLASS;
|
||||
node.setAttribute("aria-selected", "true")
|
||||
this.completion.cm.getInputField().setAttribute("aria-activedescendant", node.id)
|
||||
this.scrollToActive()
|
||||
CodeMirror.signal(this.data, "select", this.data.list[this.selectedHint], node);
|
||||
},
|
||||
|
||||
scrollToActive: function () {
|
||||
var selectedHintRange = this.getSelectedHintRange();
|
||||
var node1 = this.hints.childNodes[selectedHintRange.from];
|
||||
var node2 = this.hints.childNodes[selectedHintRange.to];
|
||||
var firstNode = this.hints.firstChild;
|
||||
if (node1.offsetTop < this.hints.scrollTop)
|
||||
this.hints.scrollTop = node1.offsetTop - firstNode.offsetTop;
|
||||
else if (node2.offsetTop + node2.offsetHeight > this.hints.scrollTop + this.hints.clientHeight)
|
||||
this.hints.scrollTop = node2.offsetTop + node2.offsetHeight - this.hints.clientHeight + firstNode.offsetTop;
|
||||
},
|
||||
|
||||
screenAmount: function () {
|
||||
return Math.floor(this.hints.clientHeight / this.hints.firstChild.offsetHeight) || 1;
|
||||
},
|
||||
|
||||
getSelectedHintRange: function () {
|
||||
var margin = this.completion.options.scrollMargin || 0;
|
||||
return {
|
||||
from: Math.max(0, this.selectedHint - margin),
|
||||
to: Math.min(this.data.list.length - 1, this.selectedHint + margin),
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
function applicableHelpers(cm, helpers) {
|
||||
if (!cm.somethingSelected()) return helpers
|
||||
var result = []
|
||||
for (var i = 0; i < helpers.length; i++)
|
||||
if (helpers[i].supportsSelection) result.push(helpers[i])
|
||||
return result
|
||||
}
|
||||
|
||||
function fetchHints(hint, cm, options, callback) {
|
||||
if (hint.async) {
|
||||
hint(cm, callback, options)
|
||||
} else {
|
||||
var result = hint(cm, options)
|
||||
if (result && result.then) result.then(callback)
|
||||
else callback(result)
|
||||
}
|
||||
}
|
||||
|
||||
function resolveAutoHints(cm, pos) {
|
||||
var helpers = cm.getHelpers(pos, "hint"), words
|
||||
if (helpers.length) {
|
||||
var resolved = function (cm, callback, options) {
|
||||
var app = applicableHelpers(cm, helpers);
|
||||
|
||||
function run(i) {
|
||||
if (i == app.length) return callback(null)
|
||||
fetchHints(app[i], cm, options, function (result) {
|
||||
if (result && result.list.length > 0) callback(result)
|
||||
else run(i + 1)
|
||||
})
|
||||
}
|
||||
|
||||
run(0)
|
||||
}
|
||||
resolved.async = true
|
||||
resolved.supportsSelection = true
|
||||
return resolved
|
||||
} else if (words = cm.getHelper(cm.getCursor(), "hintWords")) {
|
||||
return function (cm) {
|
||||
return CodeMirror.hint.fromList(cm, {words: words})
|
||||
}
|
||||
} else if (CodeMirror.hint.anyword) {
|
||||
return function (cm, options) {
|
||||
return CodeMirror.hint.anyword(cm, options)
|
||||
}
|
||||
} else {
|
||||
return function () {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
CodeMirror.registerHelper("hint", "auto", {
|
||||
resolve: resolveAutoHints
|
||||
});
|
||||
|
||||
CodeMirror.registerHelper("hint", "fromList", function (cm, options) {
|
||||
var cur = cm.getCursor(), token = cm.getTokenAt(cur)
|
||||
var term, from = CodeMirror.Pos(cur.line, token.start), to = cur
|
||||
if (token.start < cur.ch && /\w/.test(token.string.charAt(cur.ch - token.start - 1))) {
|
||||
term = token.string.substr(0, cur.ch - token.start)
|
||||
} else {
|
||||
term = ""
|
||||
from = cur
|
||||
}
|
||||
var found = [];
|
||||
for (var i = 0; i < options.words.length; i++) {
|
||||
var word = options.words[i];
|
||||
if (word.slice(0, term.length) == term)
|
||||
found.push(word);
|
||||
}
|
||||
|
||||
if (found.length) return {list: found, from: from, to: to};
|
||||
});
|
||||
|
||||
CodeMirror.commands.autocomplete = CodeMirror.showHint;
|
||||
|
||||
var defaultOptions = {
|
||||
hint: CodeMirror.hint.auto,
|
||||
completeSingle: true,
|
||||
alignWithWord: true,
|
||||
closeCharacters: /[\s()\[\]{};:>,]/,
|
||||
closeOnPick: true,
|
||||
closeOnUnfocus: true,
|
||||
updateOnCursorActivity: true,
|
||||
completeOnSingleClick: true,
|
||||
container: null,
|
||||
customKeys: null,
|
||||
extraKeys: null,
|
||||
paddingForScrollbar: true,
|
||||
moveOnOverlap: true,
|
||||
};
|
||||
|
||||
CodeMirror.defineOption("hintOptions", null);
|
||||
}
|
||||
372
src/components/advancedSearch/showhint/TextSearch/sql-hint.js
Normal file
372
src/components/advancedSearch/showhint/TextSearch/sql-hint.js
Normal file
@@ -0,0 +1,372 @@
|
||||
import {cloneDeep} from 'lodash'
|
||||
import {matchMain} from './matchRelatedInfo'
|
||||
|
||||
export default function (CodeMirror,
|
||||
{
|
||||
dataset,
|
||||
hinthook, //生成提示的hook 拦截
|
||||
keywordshook //关键字hook 在关键字里面
|
||||
}
|
||||
) {
|
||||
// "use strict";
|
||||
|
||||
var tables;
|
||||
var defaultTable;
|
||||
var keywords;
|
||||
var identifierQuote;
|
||||
var CONS = {
|
||||
QUERY_DIV: ";",
|
||||
ALIAS_KEYWORD: "AS"
|
||||
};
|
||||
var Pos = CodeMirror.Pos, cmpPos = CodeMirror.cmpPos;
|
||||
|
||||
function isArray(val) {
|
||||
return Object.prototype.toString.call(val) == "[object Array]"
|
||||
}
|
||||
|
||||
function getKeywords(editor) {
|
||||
var mode = editor.doc.modeOption;
|
||||
if (mode === "sql") mode = "text/x-sql";
|
||||
keywords = CodeMirror.resolveMode(mode).keywords;
|
||||
if (keywordshook) {
|
||||
keywords = keywordshook(keywords, CodeMirror.resolveMode(mode)) || keywords
|
||||
}
|
||||
return keywords
|
||||
}
|
||||
|
||||
function getIdentifierQuote(editor) {
|
||||
var mode = editor.doc.modeOption;
|
||||
if (mode === "sql") mode = "text/x-sql";
|
||||
return CodeMirror.resolveMode(mode).identifierQuote || "`";
|
||||
}
|
||||
|
||||
function getText(item) {
|
||||
return typeof item == "string" ? item : item.text;
|
||||
}
|
||||
|
||||
function wrapTable(name, value) {
|
||||
if (isArray(value)) value = {columns: value}
|
||||
if (!value.text) value.text = name
|
||||
return value
|
||||
}
|
||||
|
||||
function parseTables(input) {
|
||||
//table 名称变大写 统一变成对象格式 columns text
|
||||
var result = {}
|
||||
if (isArray(input)) {
|
||||
for (var i = input.length - 1; i >= 0; i--) {
|
||||
var item = input[i]
|
||||
result[getText(item).toUpperCase()] = wrapTable(getText(item), item)
|
||||
}
|
||||
} else if (input) {
|
||||
for (var name in input)
|
||||
result[name.toUpperCase()] = wrapTable(name, input[name])
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
function getTable(name) {
|
||||
return tables[name.toUpperCase()]
|
||||
}
|
||||
|
||||
function shallowClone(object) {
|
||||
var result = {};
|
||||
for (var key in object) if (object.hasOwnProperty(key))
|
||||
result[key] = object[key];
|
||||
return result;
|
||||
}
|
||||
|
||||
function match(string, word) {
|
||||
var len = string.length;
|
||||
var sub = getText(word).substr(0, len);
|
||||
return string.toUpperCase() === sub.toUpperCase();
|
||||
}
|
||||
|
||||
function addMatches(result, search, wordlist, formatter) {
|
||||
if (isArray(wordlist)) {
|
||||
for (var i = 0; i < wordlist.length; i++)
|
||||
if (match(search, wordlist[i])) result.push(formatter(wordlist[i]))
|
||||
} else {
|
||||
for (var word in wordlist) if (wordlist.hasOwnProperty(word)) {
|
||||
var val = wordlist[word]
|
||||
if (!val || val === true)
|
||||
val = word
|
||||
else
|
||||
val = val.displayText ? {text: val.text, displayText: val.displayText} : val.text
|
||||
if (match(search, val)) result.push(formatter(val))
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function cleanName(name) {
|
||||
// Get rid name from identifierQuote and preceding dot(.)
|
||||
if (name.charAt(0) == ".") {
|
||||
name = name.substr(1);
|
||||
}
|
||||
// replace duplicated identifierQuotes with single identifierQuotes
|
||||
// and remove single identifierQuotes
|
||||
var nameParts = name.split(identifierQuote + identifierQuote);
|
||||
for (var i = 0; i < nameParts.length; i++)
|
||||
nameParts[i] = nameParts[i].replace(new RegExp(identifierQuote, "g"), "");
|
||||
return nameParts.join(identifierQuote);
|
||||
}
|
||||
|
||||
function insertIdentifierQuotes(name) {
|
||||
var nameParts = getText(name).split(".");
|
||||
for (var i = 0; i < nameParts.length; i++)
|
||||
nameParts[i] = identifierQuote +
|
||||
// duplicate identifierQuotes
|
||||
nameParts[i].replace(new RegExp(identifierQuote, "g"), identifierQuote + identifierQuote) +
|
||||
identifierQuote;
|
||||
var escaped = nameParts.join(".");
|
||||
if (typeof name == "string") return escaped;
|
||||
name = shallowClone(name);
|
||||
name.text = escaped;
|
||||
return name;
|
||||
}
|
||||
|
||||
function getLeftpart(cur, token, result, editor) {
|
||||
var nameParts = [];
|
||||
var start = token.start;
|
||||
var cont = true;
|
||||
while (cont) {
|
||||
//全是空格 或者 是操作符 就接着往前找
|
||||
cont = ((token.type === 'operator' || token.string.match(/^[ ]*$/)) && start !== 0);
|
||||
start = token.start;
|
||||
nameParts.unshift(token.string);
|
||||
token = editor.getTokenAt(Pos(cur.line, token.start));
|
||||
if (token.type === 'operator') {
|
||||
cont = true;
|
||||
token = editor.getTokenAt(Pos(cur.line, token.start));
|
||||
}
|
||||
}
|
||||
|
||||
return nameParts[0]
|
||||
}
|
||||
|
||||
function isRightpart(cur, token, result, editor) {
|
||||
token = editor.getTokenAt(Pos(cur.line, token.start));
|
||||
return token.type === 'operator'
|
||||
}
|
||||
|
||||
function nameCompletion(cur, token, result, editor) {
|
||||
// Try to complete table, column names and return start position of completion
|
||||
var useIdentifierQuotes = false;
|
||||
var nameParts = [];
|
||||
var start = token.start;
|
||||
var cont = true;
|
||||
while (cont) {
|
||||
cont = (token.string.charAt(0) == ".");
|
||||
useIdentifierQuotes = useIdentifierQuotes || (token.string.charAt(0) == identifierQuote);
|
||||
|
||||
start = token.start;
|
||||
nameParts.unshift(cleanName(token.string));
|
||||
|
||||
token = editor.getTokenAt(Pos(cur.line, token.start));
|
||||
if (token.string == ".") {
|
||||
cont = true;
|
||||
token = editor.getTokenAt(Pos(cur.line, token.start));
|
||||
}
|
||||
}
|
||||
|
||||
// Try to complete table names
|
||||
var string = nameParts.join(".");
|
||||
addMatches(result, string, tables, function (w) {
|
||||
return useIdentifierQuotes ? insertIdentifierQuotes(w) : w;
|
||||
});
|
||||
|
||||
// Try to complete columns from defaultTable
|
||||
addMatches(result, string, defaultTable, function (w) {
|
||||
return useIdentifierQuotes ? insertIdentifierQuotes(w) : w;
|
||||
});
|
||||
|
||||
// Try to complete columns
|
||||
string = nameParts.pop();
|
||||
var table = nameParts.join(".");
|
||||
|
||||
var alias = false;
|
||||
var aliasTable = table;
|
||||
// Check if table is available. If not, find table by Alias
|
||||
if (!getTable(table)) {
|
||||
var oldTable = table;
|
||||
table = findTableByAlias(table, editor);
|
||||
if (table !== oldTable) alias = true;
|
||||
}
|
||||
|
||||
var columns = getTable(table);
|
||||
if (columns && columns.columns)
|
||||
columns = columns.columns;
|
||||
|
||||
if (columns) {
|
||||
addMatches(result, string, columns, function (w) {
|
||||
var tableInsert = table;
|
||||
if (alias == true) tableInsert = aliasTable;
|
||||
if (typeof w == "string") {
|
||||
w = tableInsert + "." + w;
|
||||
} else {
|
||||
w = shallowClone(w);
|
||||
w.text = tableInsert + "." + w.text;
|
||||
}
|
||||
return useIdentifierQuotes ? insertIdentifierQuotes(w) : w;
|
||||
});
|
||||
}
|
||||
return start;
|
||||
}
|
||||
|
||||
function eachWord(lineText, f) {
|
||||
var words = lineText.split(/\s+/)
|
||||
for (var i = 0; i < words.length; i++)
|
||||
if (words[i]) f(words[i].replace(/[`,;]/g, ''))
|
||||
}
|
||||
|
||||
function findTableByAlias(alias, editor) {
|
||||
var doc = editor.doc;
|
||||
var fullQuery = doc.getValue();
|
||||
var aliasUpperCase = alias.toUpperCase();
|
||||
var previousWord = "";
|
||||
var table = "";
|
||||
var separator = [];
|
||||
var validRange = {
|
||||
start: Pos(0, 0),
|
||||
end: Pos(editor.lastLine(), editor.getLineHandle(editor.lastLine()).length)
|
||||
};
|
||||
|
||||
//add separator
|
||||
var indexOfSeparator = fullQuery.indexOf(CONS.QUERY_DIV);
|
||||
while (indexOfSeparator != -1) {
|
||||
separator.push(doc.posFromIndex(indexOfSeparator));
|
||||
indexOfSeparator = fullQuery.indexOf(CONS.QUERY_DIV, indexOfSeparator + 1);
|
||||
}
|
||||
separator.unshift(Pos(0, 0));
|
||||
separator.push(Pos(editor.lastLine(), editor.getLineHandle(editor.lastLine()).text.length));
|
||||
|
||||
//find valid range
|
||||
var prevItem = null;
|
||||
var current = editor.getCursor()
|
||||
for (var i = 0; i < separator.length; i++) {
|
||||
if ((prevItem == null || cmpPos(current, prevItem) > 0) && cmpPos(current, separator[i]) <= 0) {
|
||||
validRange = {start: prevItem, end: separator[i]};
|
||||
break;
|
||||
}
|
||||
prevItem = separator[i];
|
||||
}
|
||||
|
||||
if (validRange.start) {
|
||||
var query = doc.getRange(validRange.start, validRange.end, false);
|
||||
|
||||
for (var i = 0; i < query.length; i++) {
|
||||
var lineText = query[i];
|
||||
eachWord(lineText, function (word) {
|
||||
var wordUpperCase = word.toUpperCase();
|
||||
if (wordUpperCase === aliasUpperCase && getTable(previousWord))
|
||||
table = previousWord;
|
||||
if (wordUpperCase !== CONS.ALIAS_KEYWORD)
|
||||
previousWord = word;
|
||||
});
|
||||
if (table) break;
|
||||
}
|
||||
}
|
||||
return table;
|
||||
}
|
||||
|
||||
CodeMirror.registerHelper("hint", "sql", function (editor, options) {
|
||||
tables = parseTables(options && options.tables);
|
||||
var defaultTableName = options && options.defaultTable; //默认table 名称
|
||||
var disableKeywords = options && options.disableKeywords; //禁用的keyword
|
||||
defaultTable = defaultTableName && getTable(defaultTableName);
|
||||
keywords = getKeywords(editor); //获取 定义defineMIME 时候的关键字参数
|
||||
identifierQuote = getIdentifierQuote(editor); //获取 引用标识符
|
||||
|
||||
if (defaultTableName && !defaultTable)
|
||||
defaultTable = findTableByAlias(defaultTableName, editor);
|
||||
|
||||
defaultTable = defaultTable || [];
|
||||
|
||||
if (defaultTable.columns)
|
||||
defaultTable = defaultTable.columns;
|
||||
|
||||
var cur = editor.getCursor(); //line 当前行 ch 索引 sticky ??
|
||||
var result = [];
|
||||
var token = editor.getTokenAt(cur), start, end, search;
|
||||
if (token.end > cur.ch) {
|
||||
token.end = cur.ch;
|
||||
token.string = token.string.slice(0, cur.ch - token.start);
|
||||
}
|
||||
|
||||
//start end search 赋值
|
||||
// todo 此处允许字符串包含 .
|
||||
// if (token.string.match(/^[.`"'\w@][\w$#]*/g)) {
|
||||
if (token.string.match(/^[.`"'\w@][\w#]*/g)) {
|
||||
search = token.string;
|
||||
start = token.start;
|
||||
end = token.end;
|
||||
} else {
|
||||
start = end = cur.ch;
|
||||
search = "";
|
||||
}
|
||||
|
||||
//对引用标识符 . 的使用,关联table 列
|
||||
if (search.charAt(0) == "." || search.charAt(0) == identifierQuote) {
|
||||
start = nameCompletion(cur, token, result, editor);
|
||||
} else {
|
||||
var objectOrClass = function (w, className) {
|
||||
if (typeof w === "object") {
|
||||
w.className = className;
|
||||
} else {
|
||||
w = {text: w, className: className};
|
||||
}
|
||||
return w;
|
||||
};
|
||||
addMatches(result, search, defaultTable, function (w) {
|
||||
return objectOrClass(w, "CodeMirror-hint-table CodeMirror-hint-default-table");
|
||||
});
|
||||
addMatches(
|
||||
result,
|
||||
search,
|
||||
tables, function (w) {
|
||||
return objectOrClass(w, "CodeMirror-hint-table");
|
||||
}
|
||||
);
|
||||
if (!disableKeywords)
|
||||
addMatches(result, search, keywords, function (w) {
|
||||
return objectOrClass(w.toUpperCase(), "CodeMirror-hint-keyword");
|
||||
});
|
||||
}
|
||||
//写入一个 钩子,在这里决定提示的内容
|
||||
if (hinthook) {
|
||||
var params = {
|
||||
search, //搜索 关键字
|
||||
keywords, //关键字列表
|
||||
};
|
||||
if (token.type === 'operator') {
|
||||
params.leftpart = getLeftpart(cur, token, result, editor) || ''
|
||||
}
|
||||
if (isRightpart(cur, token, result, editor)) {
|
||||
params.rightpart = token.string
|
||||
}
|
||||
|
||||
/* 之后的参数 是为manualHinthook 预备的 */
|
||||
|
||||
var manualParams = {
|
||||
search, //搜索 关键字
|
||||
// keywords, //关键字列表 没啥用
|
||||
from: Pos(cur.line, start),
|
||||
to: Pos(cur.line, end),
|
||||
leftpart: getLeftpart(cur, token, result, editor) || '',
|
||||
rightpart: params.rightpart,
|
||||
list: cloneDeep(result),
|
||||
editor,
|
||||
token,
|
||||
cur
|
||||
}
|
||||
|
||||
var refField = matchMain(CodeMirror, params, manualParams);
|
||||
manualParams.refField = refField
|
||||
manualParams.leftpart = refField?.label || manualParams.leftpart;
|
||||
params.leftpart = refField?.label || params.leftpart;
|
||||
|
||||
result = hinthook(result, params, manualParams) || result
|
||||
}
|
||||
return {list: result, from: Pos(cur.line, start), to: Pos(cur.line, end)};
|
||||
});
|
||||
}
|
||||
480
src/components/advancedSearch/showhint/TextSearch/sql.js
Normal file
480
src/components/advancedSearch/showhint/TextSearch/sql.js
Normal file
File diff suppressed because one or more lines are too long
57
src/components/advancedSearch/showhint/const/defaultTips.js
Normal file
57
src/components/advancedSearch/showhint/const/defaultTips.js
Normal file
@@ -0,0 +1,57 @@
|
||||
export default {
|
||||
|
||||
default: {
|
||||
description () {
|
||||
const code = `SELECT aggregate_function(field) [as field] … (5)
|
||||
FROM [db.]table|$log_type(1)
|
||||
WHERE $filter [and <expression-list> ](2)
|
||||
GROUP BY <field-list>(3)
|
||||
[HAVING <expression-list>](4)
|
||||
[ORDER BY <sort-field> [ASC|DESC]](6)
|
||||
[LIMIT [n, ]m ](7)`
|
||||
return (<div className='default-tips'>
|
||||
<h2>How To Search</h2>
|
||||
<p> You can write a query to retieve logs from an log type, use group by aggregation keywords to calculate
|
||||
metrics
|
||||
and generate statistical results , search for specific conditions within a rolling time window, predict future
|
||||
trends, and so on. </p>
|
||||
|
||||
<h3> 1. Filter Mode</h3>
|
||||
<p> A query in SQL ( also known as a "Where clause") has three basic parts: fields, operators, and values. Where
|
||||
clause can be combined with AND , OR and NOT keywords. </p>
|
||||
<code>[Field + operator + value] keyword [operator(Field)]</code>
|
||||
|
||||
<ul>
|
||||
<li>Field - Fields are different types of traffic attributes int the system. Fields include server_ip,
|
||||
server_port, ssl_sni , and so on.
|
||||
</li>
|
||||
<li>Operator - Operators are the foundation of the query. They relate the field to the value and build a query
|
||||
condition. Common operators include equals(=), IN, Like, etc.
|
||||
</li>
|
||||
<li>
|
||||
<span>Value - Values are the actual data in the query.</span>
|
||||
<ul class="sub-url">
|
||||
<li>Use the percent (%) wildcard substitutes for one or more characters in a string. Such as ssl_sni like
|
||||
'%google.com' .
|
||||
</li>
|
||||
<li>Use underscore (_) wildcard substitutes for exactly one character in a string. Such as
|
||||
client_ip like '192.168.10.1_'.
|
||||
</li>
|
||||
<li>String requires single quotes (') around text values. Such as client_ip='192.168.10.53'.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Keyword - Keywords are specific words in the SQL. You can specify the AND and OR in the WHERE clause to
|
||||
create more complex query conditions.
|
||||
</li>
|
||||
</ul>
|
||||
<h3> 2. Statistics Mode </h3>
|
||||
<p>More advanced searches use the SQL keywords WHERE, GROUP BY to build aggregated query and return aggregated
|
||||
results.</p>
|
||||
<i class='ref-txt'>All clauses are optional , except for the required list of expressions after SELECT, WHERE and GROUP BY .</i>
|
||||
<pre class="code">
|
||||
{code}
|
||||
</pre>
|
||||
</div>)
|
||||
}
|
||||
}
|
||||
}
|
||||
36
src/components/advancedSearch/showhint/const/fieldTips.js
Normal file
36
src/components/advancedSearch/showhint/const/fieldTips.js
Normal file
@@ -0,0 +1,36 @@
|
||||
export function fieldRender(h, {fieldInfo = {}, funcReference = [], operatorReference = [], operates = [], funs = []}) {
|
||||
return (<div className='field-tips'>
|
||||
<h2>{fieldInfo.label}</h2>
|
||||
<p> Name: {fieldInfo.name}</p>
|
||||
<p> Type:{fieldInfo.type} </p>
|
||||
<p> Operator: {operates.join(',')} </p>
|
||||
<p> Function: {funs.join(',')} </p>
|
||||
<p> {fieldInfo.options && (
|
||||
'Options: ' + fieldInfo.options.map(item => {
|
||||
return `${item.displayText}(${item.text})`
|
||||
}).join(',')
|
||||
)} </p>
|
||||
|
||||
<h3>Enable Operators</h3>
|
||||
{/* 提示超过一屏幕 明显不合理 --- 换成简单形式 */}
|
||||
<ul style="padding-left: 20px;">
|
||||
{operatorReference.map(item => {
|
||||
return <li>
|
||||
<span>{item.name}</span>
|
||||
<code> {item.function} </code>
|
||||
</li>
|
||||
})}
|
||||
</ul>
|
||||
|
||||
|
||||
<h3>Enable Functions</h3>
|
||||
<ul style="padding-left: 20px;">
|
||||
{funcReference.map(item => {
|
||||
return <li>
|
||||
<span>{item.name}</span>
|
||||
<code> {item.function} </code>
|
||||
</li>
|
||||
})}
|
||||
</ul>
|
||||
</div>)
|
||||
}
|
||||
110
src/components/advancedSearch/showhint/const/filterTips.js
Normal file
110
src/components/advancedSearch/showhint/const/filterTips.js
Normal file
@@ -0,0 +1,110 @@
|
||||
export const helpInfo=[
|
||||
{
|
||||
operator: "AND",
|
||||
describe: `Search logs that contain all the search fields. You can use parentheses "()" to control the order in which clauses are executed. `,
|
||||
example: [
|
||||
"Client IP = '192.168.10.53' AND Server IP = '8.8.8.8'",
|
||||
"Client IP = '192.168.10.53' AND SSL.SNI='google.com'",
|
||||
]
|
||||
},
|
||||
// {
|
||||
// operator: "OR",
|
||||
// describe: `Search logs that contain any of the search fields. You can use parentheses "()" to control the order in which clauses are executed. `,
|
||||
// example: [
|
||||
// "Client IP = '192.168.10.53' OR Server IP = '8.8.8.8'",
|
||||
// "Client IP = '192.168.10.53' OR Client IP = '192.168.10.54'",
|
||||
// ]
|
||||
// },
|
||||
{
|
||||
operator: "= , !=",
|
||||
describe: `Search logs that do EQUALS or NOT EQUALS the search value. `,
|
||||
example: [
|
||||
"Client IP != '192.168.10.53' ",
|
||||
"Server Port != 443",
|
||||
]
|
||||
},
|
||||
{
|
||||
operator: "> , < , >= , <=",
|
||||
describe: `Search logs greater than and equal or less than and equal a value , or whtin a range. This operator can‘t be used with string fields. `,
|
||||
example: [
|
||||
"Bytes Sent >= 751",
|
||||
"Bytes Sent >= 751 and Bytes Sent <= 1024",
|
||||
]
|
||||
},
|
||||
{
|
||||
operator: "LIKE , NOT LIKE",
|
||||
describe: `You can use wildcard searches for value that contain or not contain search fields. Using percent (%) wildcard substitutes for one or more characters in a string. Using underscore (_) wildcard substitutes for exactly one character in a string. `,
|
||||
example: [
|
||||
"SSL.SNI LIKE '%google.com' ",
|
||||
"Client IP LIKE '192.168.10.1_'",
|
||||
"SSL.SNI NOT LIKE '%google.com'",
|
||||
"Client IP NOT LIKE '192.168%'",
|
||||
]
|
||||
},
|
||||
{
|
||||
operator: "IN , NOT IN",
|
||||
describe: `Specify or exclude multiple values for search fields. IN/NOT IN condition you can use when you need to use multiple OR condition. `,
|
||||
example: [
|
||||
"l7 Protocol IN ('HTTP', 'HTTPS')",
|
||||
"Server Port NOT IN (443,80)"
|
||||
]
|
||||
},
|
||||
{
|
||||
operator: "EMPTY , NOT EMPTY",
|
||||
describe: `Specify or exclude empty value for search fields. A string or array is considered non-empty if it contains at least one byte, even if this is a space or a null byte. `,
|
||||
example: [
|
||||
"NOT EMPTY(SSL.SNI)",
|
||||
"EMPTY(Application Label)"
|
||||
]
|
||||
},
|
||||
{
|
||||
operator: "HAS",
|
||||
describe: `Search logs that has element value for array type. Example:`,
|
||||
example: [
|
||||
"HAS(FQDN Category, music)"
|
||||
]
|
||||
},
|
||||
{
|
||||
operator: "bitAnd",
|
||||
describe: `A bitwise And(&) is a binary operation that compares each bit of the first operand to the corresponding bit of the second operand. Both expressions must have integral types. Examples:`,
|
||||
example: [
|
||||
"bitAnd(Flags, Asymmetric|Download) = Asymmetric|Download",
|
||||
"bitAnd(Flags, Asymmetric|Download) >0"
|
||||
]
|
||||
},
|
||||
]
|
||||
var renderData=[
|
||||
helpInfo[0],
|
||||
helpInfo[1],
|
||||
];
|
||||
export const filterList=renderData
|
||||
function main(){
|
||||
var sqlTips={}
|
||||
renderData.forEach((item,index)=>{
|
||||
var data=item // 这是个闭包
|
||||
sqlTips[item.operator]={
|
||||
name: item.operator,
|
||||
// syntax: item.syntax,
|
||||
type: "filter",
|
||||
description() {
|
||||
return (<div className='filter-tips'>
|
||||
<h2>{data.operator}</h2>
|
||||
<h3> Description: </h3>
|
||||
<p> {data.describe}</p>
|
||||
<h3>Examples:</h3>
|
||||
<ul>
|
||||
{item.example.map(v => {
|
||||
return <li>
|
||||
<span>{v}</span>
|
||||
</li>
|
||||
})}
|
||||
</ul>
|
||||
</div>)
|
||||
}
|
||||
};
|
||||
})
|
||||
return sqlTips
|
||||
}
|
||||
|
||||
var filterTips=main();
|
||||
export default filterTips
|
||||
329
src/components/advancedSearch/showhint/const/functionTips.js
Normal file
329
src/components/advancedSearch/showhint/const/functionTips.js
Normal file
@@ -0,0 +1,329 @@
|
||||
var renderData = [
|
||||
{
|
||||
name: "COUNT",
|
||||
syntax: "count(expr)",
|
||||
description: "Aggregate function is used to count the number of rows",
|
||||
example: [
|
||||
{
|
||||
purpose: "Total count of all logs :",
|
||||
code: "count(*)"
|
||||
},
|
||||
{
|
||||
purpose: "Counts the occurrences of a Client IP :",
|
||||
code: "count(client_ip)"
|
||||
},
|
||||
],
|
||||
details() {
|
||||
//支持jsx 嵌套写法,万一测试要关键字加重呢
|
||||
return <div>
|
||||
You can use COUNT function by count(*), count(1) or count(field). But there are something difference:
|
||||
<ul>
|
||||
<li>count(*) and count(1) will count all the rows in the table, including NULL values.</li>
|
||||
<li>count(field) will count all the rows in the specified field while excluding NULL values.</li>
|
||||
</ul>
|
||||
</div>
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "COUNT_DISTINCT",
|
||||
syntax: "count(distinct expr)",
|
||||
description: "Aggregate function is used to count only distinct(unique) rows in the specified field",
|
||||
example: [
|
||||
{
|
||||
purpose: "Counts the number of different Client IP :",
|
||||
code: "count(distinct client_ip)"
|
||||
},
|
||||
{
|
||||
purpose: `Counts the number of different "Server IP" and "Server port" :`,
|
||||
code: "count(distinct server_ip, server_port)"
|
||||
},
|
||||
],
|
||||
details() {
|
||||
//支持jsx 嵌套写法,万一测试要关键字加重呢
|
||||
return <div>The COUNT DISTINCT function returns the number of unique values in the field or multiple fields.
|
||||
System will uses an adaptive sampling algorithm to perform fast count distinct operations.</div>
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "AVG",
|
||||
syntax: "avg(expr)",
|
||||
description: "Aggregate function is used to calculate the arithmetic mean in the specified field. EXPR must be Integer,Float or Decimal and returned value as Float.",
|
||||
example: [
|
||||
{
|
||||
purpose: `Calculates the average(mean) "Byte sent (sent_bytes)" field:`,
|
||||
code: "avg(sent_bytes)"
|
||||
},
|
||||
{
|
||||
purpose: `Calculates the average(mean) "Bytes" , rounded to 2 decimal points:`,
|
||||
code: "round(avg(sent_bytes+received_bytes),2)"
|
||||
},
|
||||
],
|
||||
details() {
|
||||
//支持jsx 嵌套写法,万一测试要关键字加重呢
|
||||
return <div>You can use ROUND(expr[,decimal_places]) or FLOOR(expr[,decimal_places]) function that rounds or floors a value to a specified number of decimal places.</div>
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "SUM",
|
||||
syntax: "sum(expr)",
|
||||
description: "Aggregate function is used to sum of the values of the specified field. EXPR must be Integer,Float or Decimal.",
|
||||
example: [
|
||||
{
|
||||
purpose: `The sum of the "Byte sent (sent_bytes)" field:`,
|
||||
code: "sum(sent_bytes)"
|
||||
},
|
||||
{
|
||||
purpose: `The sum of the "sent_bytes" and "received_bytes" fields , and rename as "Bytes ":`,
|
||||
code: "sum(sent_bytes+received_bytes) as Bytes"
|
||||
},
|
||||
],
|
||||
details() {
|
||||
//支持jsx 嵌套写法,万一测试要关键字加重呢
|
||||
return <div>You can rename the field using the AS keyword.</div>
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "MAX",
|
||||
syntax: "max(expr)",
|
||||
description: "Aggregate function is used to return the maximum value of the specified field.",
|
||||
example: [
|
||||
{
|
||||
purpose: `Returns the maximum value of the "Byte sent (sent_bytes)" field:`,
|
||||
code: "max(sent_bytes)"
|
||||
}
|
||||
],
|
||||
details() {
|
||||
//支持jsx 嵌套写法,万一测试要关键字加重呢
|
||||
return <div>The <b>MAX</b> aggregate function can also be used with the DateTime data type, where it will sort the DateTime values and return the last value from the sorted logs.</div>
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "MIN",
|
||||
syntax: "min(expr)",
|
||||
description: "Aggregate function is used to return the minimum value of the specified field.",
|
||||
example: [
|
||||
{
|
||||
purpose: `Returns the minimum value of the "Byte sent (sent_bytes)" field:`,
|
||||
code: "min(sent_bytes)"
|
||||
}
|
||||
],
|
||||
details() {
|
||||
//支持jsx 嵌套写法,万一测试要关键字加重呢
|
||||
return <div>The MIN aggregate function can also be used with the DateTime data type, where it will sort the DateTime values and return the minimum value from the sorted logs.</div>
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "TIME_FLOOR_WITH_FILL",
|
||||
syntax: "TIME_FLOOR_WITH_FILL(<timestamp_expr>, <period>[,<fill>])",
|
||||
description: "Rounds down a timestamp, returning it as a new timestamp,optionally from some reference fill, and fills time gaps and impute missing values.",
|
||||
example: [
|
||||
{
|
||||
purpose: `Round the recv_time down to a 5 minutes increment and fill time gaps and impute zero value.`,
|
||||
code: "TIME_FLOOR_WITH_FILL(recv_time,'PT5M','zero')"
|
||||
}
|
||||
],
|
||||
details() {
|
||||
//支持jsx 嵌套写法,万一测试要关键字加重呢
|
||||
return <div>
|
||||
<p>The TIME_FLOOR_WITH_FILL function as Timeseries granularity is used for time-based grouping.</p>
|
||||
<ul>
|
||||
<li> timestamp_expr - Unix Timestamp field</li>
|
||||
<li>period - can be any ISO8601 period, like P3M (quarters) or PT12H (half-days) </li>
|
||||
<li>
|
||||
<span>fill - optionnal. Includes none, null, zero, previous, next value.</span>
|
||||
<ul class="sub-url">
|
||||
<li>none: empty string ""</li>
|
||||
<li>null："NULL" expression</li>
|
||||
<li>zero：zero "0"</li>
|
||||
<li>previous：previous value</li>
|
||||
<li>next：next value</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "UNIX_TIMESTAMP",
|
||||
syntax: `UNIX_TIMESTAMP(date)`,
|
||||
description: `Returns a Unix timestamp the value of the argument as seconds since '1970-01-01 00:00:00' UTC.`,
|
||||
example: [
|
||||
{
|
||||
purpose: `Specify a datetime string "2019-06-06 19:11:12", calculate the Unix timestamp:`,
|
||||
code: "UNIX_TIMESTAMP('2019-06-06 19:11:12')"
|
||||
},
|
||||
{
|
||||
purpose: `Specify a ISO8601 datetime string with time zone information "2019-10-12T14:20:50+08:00", calculate the Unix timestamp:`,
|
||||
code: "UNIX_TIMESTAMP('2019-10-12T14:20:50+08:00')"
|
||||
},
|
||||
{
|
||||
purpose: `Specify a ISO8601 datetime string with UTC+0 time zone information "2019-10-12T14:20:50Z", calculate the Unix timestamp:`,
|
||||
code: "UNIX_TIMESTAMP('2019-10-12T14:20:50Z')"
|
||||
},
|
||||
],
|
||||
details() {
|
||||
//支持jsx 嵌套写法,万一测试要关键字加重呢
|
||||
return <div>
|
||||
<p>The date argument may be a DATE, DATETIME or TIMESTAMP string, or a number in YYMMDD, YYMMDDhhmmss, YYYYMMDD, or YYYYMMDDhhmmss format.</p>
|
||||
<ul>
|
||||
<li> Standard datetime string(UTC+0) : UNIX_TIMESTAMP('2019-06-06 19:11:12')</li>
|
||||
<li>ISO8601 datetime string：UNIX_TIMESTAMP('2019-10-12T14:20:50Z') or UNIX_TIMESTAMP('2019-10-12T14:20:50+08:00')</li>
|
||||
<li>Date: UNIX_TIMESTAMP(DATE('2019-06-06 19:11:12')) </li>
|
||||
</ul>
|
||||
</div>
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "FROM_UNIXTIME",
|
||||
syntax: `FROM_UNIXTIME(unix_timestamp)`,
|
||||
description: `Returns a representation of unix_timestamp as a datetime or character string value. The value returned is expressed using the UTC+0 time zone.`,
|
||||
example: [
|
||||
{
|
||||
purpose: `Specify a Unix Timestamp "1570881546", calculate the datetime string:`,
|
||||
code: "FROM_UNIXTIME(1570881546)"
|
||||
},
|
||||
],
|
||||
details() {
|
||||
//支持jsx 嵌套写法,万一测试要关键字加重呢
|
||||
return <div>The unix_timestamp is an internal timestamp value representing seconds since '1970-01-01 00:00:00' UTC.</div>
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "DATE_FORMAT",
|
||||
syntax: "DATE_FORMAT(date, format)",
|
||||
description: `Formats the date value according to the format string.`,
|
||||
example: [
|
||||
{
|
||||
purpose: `Specify a Unix Timestamp "1570881546", calculate the datetime string with format "%Y-%m-%d %H:%i:%s":`,
|
||||
code: "DATE_FORMAT(FROM_UNIXTIME(1570881546), '%Y-%m-%d %H:%i:%s')"
|
||||
}
|
||||
],
|
||||
details() {
|
||||
//支持jsx 嵌套写法,万一测试要关键字加重呢
|
||||
return <div>
|
||||
<p>The DATE_FORMAT function accepts two parameters as given below :</p>
|
||||
<ul>
|
||||
<li>date – Specified date to be formatted.</li>
|
||||
<li>
|
||||
<span>format – Specified format. This list of formats used in this function are listed below:</span>
|
||||
<ul class="sub-url">
|
||||
<li>%Y - Year, numeric, four digits</li>
|
||||
<li>%y - Year, numeric (two digits)</li>
|
||||
<li>%M - Month name (January..December)</li>
|
||||
<li>%m - Month, numeric (00..12)</li>
|
||||
<li>%D - Day of the month with English suffix (0th, 1st, 2nd, 3rd, …)</li>
|
||||
<li>%d - Day of the month, numeric (00..31)</li>
|
||||
<li>%H - Hour (00..23)</li>
|
||||
<li>%h - Hour (01..12)</li>
|
||||
<li>%i - Minutes, numeric (00..59)</li>
|
||||
<li>%s - Seconds (00..59)</li>
|
||||
<li>%w - Day of the week (0=Sunday..6=Saturday)</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "CONVERT_TZ",
|
||||
syntax:`CONVERT_TZ(dt, from_tz, to_tz)`,
|
||||
description: `Converts a datetime value dt from the time zone given by from_tz to the time zone given by to_tz and returns the resulting value.`,
|
||||
example: [
|
||||
{
|
||||
purpose: `Specify a datetime string "2021-11-11 00:00:00", converted from GMT(Greenwich Mean Time) to Asia/Shanghai time zone:`,
|
||||
code: "CONVERT_TZ('2021-11-11 00:00:00','GMT','Asia/Shanghai')"
|
||||
},
|
||||
{
|
||||
purpose: `Specify a Unix timestamp "1636588800", converted from GMT(Greenwich Mean Time) to Asia/Shanghai time zone:`,
|
||||
code: "CONVERT_TZ(FROM_UNIXTIME(1636588800),'GMT','Asia/Shanghai')"
|
||||
},
|
||||
{
|
||||
purpose: `Specify a Unix timestamp "1636588800", converted from Europe/London to America/New_York time zone:`,
|
||||
code: "CONVERT_TZ(DATE_FORMAT(FROM_UNIXTIME(1636588800), '%Y-%m-%d %H:%i:%s'),'Europe/London','America/New_York')"
|
||||
},
|
||||
],
|
||||
details() {
|
||||
//支持jsx 嵌套写法,万一测试要关键字加重呢
|
||||
return <div>
|
||||
<p>The CONVERT_TZ function accepts a three-parameter:</p>
|
||||
<ul>
|
||||
<li>dt - The given DateTime which we want to convert.</li>
|
||||
<li>from_tz - The time zone from which we want to convert DateTime.</li>
|
||||
<li>to_tz - The time zone in which we want to convert DateTime.</li>
|
||||
</ul>
|
||||
</div>
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "MEDIAN",
|
||||
syntax:`MEDIAN(<expr>)`,
|
||||
description: `Aggregate function is used to calculate median value. expr must be Integer, Float or Decimal.`,
|
||||
example: [
|
||||
{
|
||||
purpose: `Calculates the median "TCP Handshake Latency (tcp_handshake_latency_ms)" field:`,
|
||||
code: "MEDIAN(tcp_handshake_latency_ms)"
|
||||
}
|
||||
],
|
||||
details() {
|
||||
//支持jsx 嵌套写法,万一测试要关键字加重呢
|
||||
return <div>In Traffic logs analysis, the function can be useful in calculating the median of certain numbers, e.g. median SSL Handshake Latency or TCP Handshake Latency.</div>
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "QUANTILE",
|
||||
syntax:`QUANTILE(<expr>[, <level>])`,
|
||||
description: `Aggregate function is used to calculate an approximate quantile of a numeric data sequence.`,
|
||||
example: [
|
||||
{
|
||||
purpose: `Calculates the 90th percentile "TCP Handshake Latency (tcp_handshake_latency_ms)" field:`,
|
||||
code: "QUANTILE(tcp_handshake_latency_ms, 0.9)"
|
||||
}
|
||||
],
|
||||
details() {
|
||||
//支持jsx 嵌套写法,万一测试要关键字加重呢
|
||||
return <div>
|
||||
<p>The QUANTILE function accepts a two-parameter:</p>
|
||||
<ul>
|
||||
<li>expr - The column values resulting in integer, Flot or Decimal.</li>
|
||||
<li>level - Level of quantile. Optional parameter. Constant floating-point number from 0 to 1. We recommend using a level value in the range of [0.01, 0.99]. Default value is 0.5. At level=0.5 the function calculates MEDIAN.</li>
|
||||
</ul>
|
||||
</div>
|
||||
}
|
||||
},
|
||||
];
|
||||
|
||||
function main() {
|
||||
var functionTips = {}
|
||||
renderData.forEach((item, index) => {
|
||||
var data=item // 这是个闭包
|
||||
functionTips[item.name] = {
|
||||
name: item.name,
|
||||
syntax: item.syntax,
|
||||
type: "Function",
|
||||
description() {
|
||||
return (<div className='function-tips'>
|
||||
<h2>{data.name}</h2>
|
||||
<h3>Syntax:<span>{data.syntax}</span></h3>
|
||||
<h3> Description: </h3>
|
||||
<p> {data.description}</p>
|
||||
<h3>Examples:</h3>
|
||||
<ul>
|
||||
{item.example.map(v => {
|
||||
return <li>
|
||||
<span>{v.purpose}</span>
|
||||
<code>{v.code}</code>
|
||||
</li>
|
||||
})}
|
||||
</ul>
|
||||
<h3> Details: </h3>
|
||||
{Object.prototype.toString.call(data.details) === '[object Function]' ?
|
||||
<renderer renderFun={data.details}></renderer> : <p>{data.details} </p>}
|
||||
</div>)
|
||||
}
|
||||
};
|
||||
})
|
||||
return functionTips
|
||||
}
|
||||
export const functionList=renderData
|
||||
var functionTips = main();
|
||||
export default functionTips
|
||||
274
src/components/advancedSearch/showhint/const/operatorTips.js
Normal file
274
src/components/advancedSearch/showhint/const/operatorTips.js
Normal file
@@ -0,0 +1,274 @@
|
||||
var renderData=[
|
||||
{
|
||||
name:"EQUALS",
|
||||
syntax:"=",
|
||||
primaryKey:"=",
|
||||
description:"Search for logs where the value of a specified field exactly matches a specified value.",
|
||||
example:[
|
||||
{
|
||||
purpose:"Search all logs that are sent by 192.168.10.53:",
|
||||
code:"client_ip='192.168.10.53'"
|
||||
},
|
||||
{
|
||||
purpose:"Search all logs that are communication destination port by 443：",
|
||||
code:"server_port=443"
|
||||
},
|
||||
],
|
||||
details(){
|
||||
//支持jsx 嵌套写法,万一测试要关键字加重呢
|
||||
return <div>If you want search for logs where the value of a specified field is one of multiple specified values. Use multiple <b>EQUALS(=)</b> statements with the OR keyword, or use IN operator.</div>
|
||||
}
|
||||
},
|
||||
{
|
||||
name:"NOT EQUALS",
|
||||
syntax:"!=",
|
||||
primaryKey:"!=",
|
||||
description:"Search for logs where the value of a specified field doesn't match a specified value.",
|
||||
example:[
|
||||
{
|
||||
purpose:"Search all logs that are sent to any Client IP except 192.168.10.53:",
|
||||
code:"client_ip!='192.168.10.53'"
|
||||
},
|
||||
{
|
||||
purpose:"Search all logs that are not communication port to 443：",
|
||||
code:"server_port!=443"
|
||||
},
|
||||
],
|
||||
details:`If you want search for logs where the value of a specified field is one of multiple specified values. Use multiple NOT EQUALS(!=) statements with the AND keyword, or use NOT IN operator.`
|
||||
},
|
||||
{
|
||||
name:"GREATER THAN",
|
||||
syntax:">",
|
||||
primaryKey:">",
|
||||
description:"Search logs greater than a value . This operator can't be used with string fields. ",
|
||||
example:[
|
||||
{
|
||||
purpose:"Search all logs more than 751 Bytes ",
|
||||
code:"sent_bytes > 751"
|
||||
},
|
||||
{
|
||||
purpose:"Search all logs where bandwidth is higher than 751 Bytes:",
|
||||
code:"received_bytes + sent_bytes > 751"
|
||||
},
|
||||
],
|
||||
details:`The GREATER THAN(>) condition is usally used with LESS THAN(<) as a range query. `
|
||||
},
|
||||
{
|
||||
name:"GREATER THAN EQUALS",
|
||||
syntax:">=",
|
||||
primaryKey:">=",
|
||||
description:"Search logs greater than and equal a value. This operator can't be used with string fields. ",
|
||||
example:[
|
||||
{
|
||||
purpose:"Search all logs with 751 or more Bytes",
|
||||
code:"sent_bytes >= 751"
|
||||
},
|
||||
{
|
||||
purpose:"Search all logs where bandwidth is equal or higher than 751 Bytes:",
|
||||
code:"received_bytes + sent_bytes >= 751"
|
||||
},
|
||||
],
|
||||
details:`The GREATER THAN EQUALS(>=) condition is usally used with LESS THAN EQUALS(<=) as a range query.`
|
||||
},
|
||||
{
|
||||
name:"LESS THAN",
|
||||
syntax:"<",
|
||||
primaryKey:"<",
|
||||
description:"Search logs less than a value. This operator can't be used with string fields.",
|
||||
example:[
|
||||
{
|
||||
purpose:"Search all logs less than 751 Bytes :",
|
||||
code:"sent_bytes < 751"
|
||||
},
|
||||
{
|
||||
purpose:"Search all logs where bandwidth is less than 751 Bytes:",
|
||||
code:"received_bytes + sent_bytes < 751"
|
||||
},
|
||||
],
|
||||
details:`The LESS THAN(<) condition is usally used with GREATER THAN(>) as a range query.`
|
||||
},
|
||||
{
|
||||
name:"LESS THAN EQUALS",
|
||||
syntax:"<=",
|
||||
primaryKey:"<=",
|
||||
description:"Search logs less than and equal a value. This operator can't be used with string fields. ",
|
||||
example:[
|
||||
{
|
||||
purpose:"Search all logs with 751 or fewer Bytes",
|
||||
code:"sent_bytes <= 751"
|
||||
},
|
||||
{
|
||||
purpose:"Search all logs where bandwidth is equal or fewer than 751 Bytes:",
|
||||
code:"received_bytes + sent_bytes <= 751"
|
||||
},
|
||||
],
|
||||
details:`LESS THAN EQUALS(<=) condition is usally used with GREATER THAN EQUALS(>=) as a range query. `
|
||||
},
|
||||
{
|
||||
name:"IN",
|
||||
syntax:"in",
|
||||
primaryKey:"IN",
|
||||
description:"Search for logs where the value of a specified field is one of multiple specified values.",
|
||||
example:[
|
||||
{
|
||||
purpose:"Search all logs in communication destination port 443 or 80：",
|
||||
code:"server_port in (443, 80)"
|
||||
},
|
||||
{
|
||||
purpose:"Search all logs where the Server IP or Client IP is either 8.8.8.8 or 192.168.10.53:",
|
||||
code:"client_ip in ('8.8.8.8', '192.168.50.53') or server_ip in ('8.8.8.8', '192.168.10.53')"
|
||||
},
|
||||
],
|
||||
details:`The IN condition you can use when you need to use multiple OR condition. The values are specified as a comma-separated(,) list,surrouded by parentheses. Using IN is equivalent to using multiple EQUALS(=)statements with OR expression. That is server_port in (443,80) is the same as (server_port=443 OR server_port=80).`
|
||||
},
|
||||
{
|
||||
name:"NOT IN",
|
||||
syntax:"not in",
|
||||
primaryKey:"NOT IN",
|
||||
description:"Search for logs where the value of a specified field isn't one of multiple specified values.",
|
||||
example:[
|
||||
{
|
||||
purpose:"Search all logs not in communication destination port 443 or 80：",
|
||||
code:"server_port not in (443, 80)"
|
||||
},
|
||||
{
|
||||
purpose:"Search all logs where the Server IP and Client IP isn't 8.8.8.8 or 192.168.10.53:",
|
||||
code:"client_ip not in ('8.8.8.8', '192.168.10.53') and server_ip not in ('8.8.8.8', '192.168.10.53')"
|
||||
},
|
||||
],
|
||||
details:`The NOT IN condition you can use when you need to use multiple OR condition. The values are specified as a comma-separated(,) list,surrouded by parentheses. Using NOT IN is equivalent to using multiple NOT EQUALS(!=)statements with AND expression. That is , server_port not in (443,80) is the same as (server_port !=443 AND server_port !=80).`
|
||||
},
|
||||
{
|
||||
name:"LIKE",
|
||||
syntax:"like",
|
||||
primaryKey:"LIKE",
|
||||
description:"Search for logs where use wildcard searches for value that contain search fields. This operator can be used with string fields. ",
|
||||
example:[
|
||||
{
|
||||
purpose:`Search all logs where the SSL SNI end with( suffix match) "google.com":`,
|
||||
code:"ssl_sni like '%google.com'"
|
||||
},
|
||||
{
|
||||
purpose:"Search all logs where the Client IP start with(prefix match) '192.168':",
|
||||
code:"client_ip like '192.168%'"
|
||||
},
|
||||
{
|
||||
purpose:`Search all logs where the Client IP contains "192.168.1" , between 192.168.10.10 and 192.168.10.19：`,
|
||||
code:"client_ip like '192.168.10.1_'"
|
||||
},
|
||||
],
|
||||
details:`The LIKE condition supports single and multiple character searches.Using percent (%) wildcard substitutes for one or more characters in a string. Using underscore (_) wildcard substitutes for exactly one character in a string. This operator can be used for searval purposes : checking a substring , checking the start or end of a string.`
|
||||
},
|
||||
{
|
||||
name:"NOT LIKE",
|
||||
syntax:"not like",
|
||||
primaryKey:"NOT LIKE",
|
||||
description:"Search for logs where use wildcard searches for value that not contain search fields. This operator can be used with string fields.",
|
||||
example:[
|
||||
{
|
||||
purpose:`Search all logs where the SSL SNI not contain end with( suffix match) "google.com":`,
|
||||
code:"ssl_sni not like '%google.com'"
|
||||
},
|
||||
{
|
||||
purpose:"Search all logs where the Client IP not contain start with(prefix match) '192.168':",
|
||||
code:"client_ip not like '192.168%'"
|
||||
},
|
||||
{
|
||||
purpose:`Search all logs where the Client IP not contains "192.168.1" , between 192.168.10.10 and 192.168.10.19：`,
|
||||
code:"client_ip not like '192.168.10.1_'"
|
||||
},
|
||||
],
|
||||
details:`The NOT LIKE condition supports single and multiple character searches. Using percent (%) wildcard substitutes for one or more characters in a string. Using underscore (_) wildcard substitutes for exactly one character in a string. This operator can be used for searval purposes : checking a substring , checking the start or end of a string.`
|
||||
},
|
||||
{
|
||||
name:"HAS",
|
||||
syntax:"has",
|
||||
primaryKey:"HAS",
|
||||
description:"Search for logs where the values of a specified field is one of specified value.This operator can be used with array fields.",
|
||||
example:[
|
||||
{
|
||||
purpose:`Search all logs where the FQDN Category has the music(60):`,
|
||||
code:"has(service_category,60)"
|
||||
}
|
||||
],
|
||||
details:`The HAS condition checks whether the "expr" array has the "value" element. The syntax has(expr, value).`
|
||||
},
|
||||
{
|
||||
name:"EMPTY",
|
||||
syntax:"empty",
|
||||
primaryKey:"EMPTY",
|
||||
description:"Search for logs where the specified field has empty value. This operator can be used with string and array fields.",
|
||||
example:[
|
||||
{
|
||||
purpose:`Search all logs where Application is not identified.`,
|
||||
code:"empty(common_app_label)"
|
||||
}
|
||||
],
|
||||
details:`An empty string is a string of zero length. However , a NULL has no value at all. An empty string is useful when the data comes from multiple resources. NULL is used when some fields are optional, and the data is unknown.`
|
||||
},
|
||||
{
|
||||
name:"NOT EMPTY",
|
||||
syntax:"notEmpty",
|
||||
primaryKey:"NOTEMPTY",
|
||||
description:"Search for logs where the specified field has a value. This operator can be used with string and array fields.",
|
||||
example:[
|
||||
{
|
||||
purpose:`Search all logs that have one or more SNIs.`,
|
||||
code:"notEmpty(ssl_sni)"
|
||||
}
|
||||
],
|
||||
details:`A not empty string is considered at least one byte, even if this a space.`
|
||||
},
|
||||
{
|
||||
name:"Bitwise AND",
|
||||
syntax:"bitAnd",
|
||||
primaryKey:"BITAND",
|
||||
description:`A bitwise And(&) is a binary operation that compares each bit of the first operand to the corresponding bit of the second operand. Both expressions must have integral types.`,
|
||||
example:[
|
||||
{
|
||||
purpose:`Search all logs where the Flags has the Asymmetric(524288) and Download(134217728):`,
|
||||
code:"bitAnd(Flags, 134742016) = 134742016"
|
||||
},
|
||||
{
|
||||
purpose:`Search all logs where the flags has either Asymmetric(524288) or Download(134217728):`,
|
||||
code:"bitAnd(Flags, 134742016)>0"
|
||||
}
|
||||
],
|
||||
details:`The operands are converted to 64-bit integers and expressed by a series of bits (zeroes and ones). Sets each bit to 1 if both bits are 1.`
|
||||
},
|
||||
]
|
||||
export const operatorList=renderData
|
||||
function main(){
|
||||
var operatorTips={}
|
||||
renderData.forEach((item,index)=>{
|
||||
var data=item // 这是个闭包
|
||||
operatorTips[item.primaryKey]={
|
||||
name: item.name,
|
||||
syntax: item.syntax,
|
||||
type: "Operators",
|
||||
description() {
|
||||
return (<div className='operator-tips'>
|
||||
<h2>{data.name}</h2>
|
||||
<h3>Syntax:<span>{data.syntax}</span></h3>
|
||||
<h3> Description: </h3>
|
||||
<p> {data.description}</p>
|
||||
<h3>Examples:</h3>
|
||||
<ul>
|
||||
{item.example.map(v=>{
|
||||
return <li>
|
||||
<span>{v.purpose}</span>
|
||||
<code>{v.code}</code>
|
||||
</li>
|
||||
})}
|
||||
</ul>
|
||||
<h3> Details: </h3>
|
||||
{Object.prototype.toString.call(data.details) === '[object Function]' ? <renderer renderFun={data.details}></renderer> : <p>{data.details} </p>}
|
||||
</div>)
|
||||
}
|
||||
};
|
||||
})
|
||||
return operatorTips
|
||||
}
|
||||
|
||||
var operatorTips=main();
|
||||
export default operatorTips
|
||||
96
src/components/advancedSearch/showhint/const/sqlTips.js
Normal file
96
src/components/advancedSearch/showhint/const/sqlTips.js
Normal file
@@ -0,0 +1,96 @@
|
||||
var renderData=[
|
||||
{
|
||||
name: "FROM",
|
||||
syntax: `FROM [db.]table |$log_type`,
|
||||
description: {
|
||||
title:`The table name of logs. If you type $log_type, the variable value is the current table name of logs.`
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "SELECT",
|
||||
syntax: `Optional. The selected columns(also known as dimensions and metrics).`,
|
||||
description: {
|
||||
title:'可选，获取列',
|
||||
list:[
|
||||
`aggregate_function(field) - Aggregate functions, default is count.`,
|
||||
`as field - Use as to specify a aliases for a field or expression.`
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "GROUP BY",
|
||||
syntax: `GROUP BY <field-list>`,
|
||||
description: {
|
||||
title:'Aggregate data. GROUP BY clause switches the SELECT query into an aggregation mode：',
|
||||
list:[
|
||||
`The list of fields known as "grouping key", while each individual expression be referred to as a "key expression".`,
|
||||
`All the expressions in the SELECT, HAVING and ORDER BY , must be "key expression" or on aggregate functions.`,
|
||||
`The result of aggregating SELECT query will return unique values of "grouping key" in log type.`
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "HAVING",
|
||||
syntax: `HAVING <expression-list>`,
|
||||
description: {
|
||||
title:`Optional. HAVING clause filtering the aggregation results retrieved by GROUP BY. It is difference is that WHERE is performed before aggregation, while HAVING is performed after it.
|
||||
Note: HAVING can't be performed if GROUP BY is not performed.`
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "LIMIT",
|
||||
syntax: `LIMIT [n, ]m`,
|
||||
description: {
|
||||
title:`Select the m rows from the aggregate results after skipping the first n rows. Default is 10 rows.`
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "ORDER BY",
|
||||
syntax: `ORDER BY <sort-field> [ASC|DESC]`,
|
||||
description: {
|
||||
title:`Sort all of the results by the specified fields.`
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "WHERE",
|
||||
syntax: `where $filter [and <expression-list>]`,
|
||||
description: {
|
||||
title:`Filter the data.`,
|
||||
list:[
|
||||
`$filter - Default global filter clause. Include Time period, Vsys ID, and other expressions, etc`,
|
||||
`and <expression-list> - filter clauses`
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
export const sqlList=renderData
|
||||
function main(){
|
||||
var sqlTips={}
|
||||
renderData.forEach((item,index)=>{
|
||||
var data=item // 这是个闭包
|
||||
sqlTips[item.name]={
|
||||
name: item.name,
|
||||
syntax: item.syntax,
|
||||
type: "sql",
|
||||
description() {
|
||||
return (<div className='sql-tips'>
|
||||
<h2>{data.name}</h2>
|
||||
<h3>Syntax: <span>{data.syntax}</span></h3>
|
||||
<h3> Description: </h3>
|
||||
<p> {data.description.title}</p>
|
||||
{
|
||||
data.description.list && <ul>
|
||||
{data.description.list.map(v=>{
|
||||
return <li>{v} </li>
|
||||
})}
|
||||
</ul>
|
||||
}
|
||||
</div>)
|
||||
}
|
||||
};
|
||||
})
|
||||
return sqlTips
|
||||
}
|
||||
|
||||
var sqlTips=main();
|
||||
export default sqlTips
|
||||
48
src/components/advancedSearch/showhint/const/varTips.js
Normal file
48
src/components/advancedSearch/showhint/const/varTips.js
Normal file
@@ -0,0 +1,48 @@
|
||||
var renderData = [
|
||||
{
|
||||
name: '$LOG_TYPE',
|
||||
description: 'A variable is a symbolic representation of data that enables you to access a value without having to enter it manually wherever you need it. You can use $ to reference variables throughout Advanced Search. ',
|
||||
details() {
|
||||
//支持jsx 嵌套写法,万一测试要关键字加重呢
|
||||
return <div>
|
||||
$log_type: The table name of logs.
|
||||
</div>
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '$FILTER',
|
||||
description: 'A variable is a symbolic representation of data that enables you to access a value without having to enter it manually wherever you need it. You can use $ to reference variables throughout Advanced Search. ',
|
||||
details() {
|
||||
//支持jsx 嵌套写法,万一测试要关键字加重呢
|
||||
return <div>
|
||||
$filter: The default filter clauses. such as time period, Vsys ID, and other default expressions, etc.
|
||||
</div>
|
||||
}
|
||||
},
|
||||
];
|
||||
|
||||
function main() {
|
||||
const varTips = {}
|
||||
renderData.forEach((item, index) => {
|
||||
const data = item // 这是个闭包
|
||||
varTips[item.name] = {
|
||||
name: item.name,
|
||||
type: 'Variables',
|
||||
description() {
|
||||
return (<div className='var-tips'>
|
||||
<h2>{data.name}</h2>
|
||||
<h3> Description: </h3>
|
||||
<p> {data.description}</p>
|
||||
<h3> Details: </h3>
|
||||
{Object.prototype.toString.call(data.details) === '[object Function]' ?
|
||||
<renderer renderFun={data.details}></renderer> : <p>{data.details} </p>}
|
||||
</div>)
|
||||
}
|
||||
};
|
||||
})
|
||||
return varTips
|
||||
}
|
||||
|
||||
export const varList = renderData
|
||||
const varTips = main()
|
||||
export default varTips
|
||||
129
src/components/advancedSearch/showhint/myCodeMirror.js
Normal file
129
src/components/advancedSearch/showhint/myCodeMirror.js
Normal file
@@ -0,0 +1,129 @@
|
||||
import 'codemirror/lib/codemirror.css'
|
||||
import 'codemirror/theme/eclipse.css'
|
||||
import 'codemirror/mode/sql/sql'
|
||||
|
||||
import 'codemirror/theme/ambiance.css'
|
||||
import 'codemirror/addon/hint/show-hint'
|
||||
import 'codemirror/addon/hint/show-hint.css'
|
||||
import 'codemirror/addon/display/placeholder'
|
||||
|
||||
import 'codemirror/addon/hint/anyword-hint' // 关键字
|
||||
import 'codemirror/addon/comment/comment'
|
||||
import 'codemirror/keymap/sublime'
|
||||
import 'codemirror/addon/edit/closebrackets'
|
||||
import CodeMirror from 'codemirror'
|
||||
import createMode from '@/components/advancedSearch/showhint/TextSearch/sql'
|
||||
import createHint from '@/components/advancedSearch/showhint/TextSearch/createHint'
|
||||
import { functionList } from '@/components/advancedSearch/showhint/const/functionTips'
|
||||
import { cloneDeep } from 'lodash'
|
||||
|
||||
const codeMirrorMixins = {
|
||||
data () {
|
||||
return {
|
||||
CodeMirror,
|
||||
initData: {},
|
||||
hintSearch: '',
|
||||
hintList: [],
|
||||
hintParams: {},
|
||||
completion: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initShowHint () {
|
||||
const dataset = this.dataset
|
||||
createMode(CodeMirror, {
|
||||
dataset,
|
||||
modehook: this.modehook
|
||||
})
|
||||
|
||||
const hintHook = this.manualHinthook
|
||||
const vm = this
|
||||
createHint('manual', CodeMirror, {
|
||||
dataset,
|
||||
hinthook: hintHook,
|
||||
callback (completion, defaultOptions) {
|
||||
vm.completion = completion.completion
|
||||
},
|
||||
keyboardUp () {
|
||||
// 键盘向上
|
||||
vm.hintVm?.handleUp()
|
||||
},
|
||||
keyboardDown () {
|
||||
// 键盘向下
|
||||
vm.hintVm?.handleDown()
|
||||
},
|
||||
keyboardEnter () {
|
||||
if (!vm.hintVisible) {
|
||||
return
|
||||
}
|
||||
// 回车 选中值
|
||||
vm.hintVm?.triggerSelect()
|
||||
}
|
||||
})
|
||||
},
|
||||
manualHinthook (result, params, manualParams) {
|
||||
this.hintParams = manualParams
|
||||
this.hintSearch = manualParams.search
|
||||
|
||||
this.hintList = []
|
||||
const list = this.hinthook(result, params)
|
||||
this.hintList = cloneDeep(list)
|
||||
return list
|
||||
},
|
||||
hinthook (result, { search, keywords, leftpart, rightpart }) {
|
||||
if (leftpart) {
|
||||
const options = this.matchOptions(leftpart)
|
||||
if (options) {
|
||||
return options
|
||||
}
|
||||
}
|
||||
result = this.dataset.getHintList(search, null, null, this.value)
|
||||
return result
|
||||
},
|
||||
matchOptions (leftpart) {
|
||||
// 用于匹配下拉选
|
||||
|
||||
const fieldInfo = this.dataset.getFieldInfo(leftpart)
|
||||
if (fieldInfo && fieldInfo.options) {
|
||||
const options = []
|
||||
options.push(
|
||||
{
|
||||
type: 'abstract',
|
||||
text: '',
|
||||
displayText: 'Options',
|
||||
className: 'divider hint-title'
|
||||
}
|
||||
)
|
||||
const fieldOptions = cloneDeep(fieldInfo.options)
|
||||
// eslint-disable-next-line no-return-assign
|
||||
fieldOptions.forEach(item => item.displayText = `${item.displayText}(${item.text})`)
|
||||
options.push(...fieldOptions)
|
||||
return options
|
||||
}
|
||||
return null
|
||||
},
|
||||
modehook (CodeMirror, set, { client, keywords, builtin, hookVar }) {
|
||||
// 自定义 过滤器类型
|
||||
const clientWords = this.dataset.getClientwords()
|
||||
let clientWordsStr = ''
|
||||
clientWordsStr = clientWords.join(' ')
|
||||
const dateFuns = functionList.map(v => v.name.toLowerCase())
|
||||
CodeMirror.defineMIME('text/x-filter', {
|
||||
name: 'sql',
|
||||
client: set(clientWordsStr + ' ' + client), // 客户端解析指令
|
||||
builtin: set(builtin + ' like in not empty notempty has bitand'),
|
||||
keywords: set(keywords + ' and or ' + dateFuns.join(' ')),
|
||||
|
||||
atoms: set('false true null unknown'),
|
||||
operatorChars: /^[*+\-%<>!=&|^]/,
|
||||
dateSQL: set('date time timestamp '),
|
||||
support: set('ODBCdotTable doubleQuote binaryNumber hexNumber'), // 支持的数据编码 ODBC double 二进制 16进制
|
||||
hooks: {
|
||||
$: hookVar
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default codeMirrorMixins
|
||||
290
src/components/advancedSearch/showhint/packages/getDataset.js
Normal file
290
src/components/advancedSearch/showhint/packages/getDataset.js
Normal file
@@ -0,0 +1,290 @@
|
||||
// 改js 用户获取初始化的 SchemaData
|
||||
import { Scheme } from './service/Scheme'
|
||||
|
||||
export class Dataset {
|
||||
constructor ({ operatesList, filtersList, operatesDic, funcDic, operatorManual, fields, doc }) {
|
||||
this.sourceData = {}
|
||||
this.sourceData = this.keepSourcedata(operatesList, funcDic, filtersList, operatesDic, operatorManual, fields, doc)
|
||||
// 存储格式化的数据
|
||||
this.hintData = {}
|
||||
this.hintData.operatesList = this.formatOperates(operatesList)
|
||||
this.hintData.filtersList = this.formatFilters(filtersList)
|
||||
}
|
||||
|
||||
getHintList (keyword, sqlKeywordsOptions = null, callback, completeFilter) {
|
||||
// 获取提示列表
|
||||
const operatesList = this.matchFilter(sqlKeywordsOptions || this.hintData.operatesList || [], keyword)
|
||||
const filtersList = this.matchFilter(this.hintData.filtersList || [], keyword)
|
||||
|
||||
const hintList = [...operatesList, ...filtersList]
|
||||
callback && callback(operatesList, filtersList, hintList)
|
||||
return hintList
|
||||
}
|
||||
|
||||
getClientwords () {
|
||||
// 获取高亮的 可查询的 字段
|
||||
const filtersList = this.sourceData.filtersList || []
|
||||
const clientwords = []
|
||||
filtersList.forEach((item) => {
|
||||
// 可以在这里增加 过滤逻辑
|
||||
// todo client由name改为label
|
||||
// clientwords.push(item.name)
|
||||
clientwords.push(item.label)
|
||||
})
|
||||
return clientwords
|
||||
}
|
||||
|
||||
matchFilter (list, keyword) {
|
||||
// 用于 匹配过滤器
|
||||
const results = list.filter((item) => {
|
||||
if (item.type === 'abstract') {
|
||||
return true
|
||||
}
|
||||
let displayTextLow = item.displayText + '' ? (item.displayText + '').toLowerCase() : item.displayText
|
||||
let keywordLow = keyword + '' ? (keyword + '').toLowerCase() : keyword
|
||||
|
||||
const reg = /[ '"]/ig
|
||||
displayTextLow = (displayTextLow + '').replace(reg, '').toLowerCase()
|
||||
keywordLow = (keywordLow + '').replace(reg, '').toLowerCase()
|
||||
|
||||
return displayTextLow && displayTextLow.indexOf(keywordLow) !== -1
|
||||
})
|
||||
const hasEnable = results.some((item) => {
|
||||
return item.type !== 'abstract'
|
||||
})
|
||||
return hasEnable ? results : []
|
||||
}
|
||||
|
||||
formatFilters (list) {
|
||||
// 格式化 过滤器
|
||||
if (!(list && list.length > 0)) {
|
||||
return
|
||||
}
|
||||
let tempTitle
|
||||
let results
|
||||
tempTitle = {
|
||||
type: 'abstract',
|
||||
text: '',
|
||||
// displayText: "Filter",
|
||||
displayText: 'filter',
|
||||
className: 'divider hint-title',
|
||||
hint (cm, callback, options) {
|
||||
}
|
||||
}
|
||||
|
||||
results = list.map((item) => {
|
||||
return {
|
||||
// text: item.name,
|
||||
// displayText: `${item.label}(${item.name})`,
|
||||
text: item.label,
|
||||
displayText: `${item.name}(${item.label})`,
|
||||
className: 'filter-item el-dropdown-menu__item relative-item'
|
||||
}
|
||||
})
|
||||
results.unshift(tempTitle)
|
||||
return results
|
||||
}
|
||||
|
||||
formatOperates (list) {
|
||||
// 格式化 操作符
|
||||
if (!(list && list.length > 0)) {
|
||||
return
|
||||
}
|
||||
let tempTitle = {}
|
||||
let results = []
|
||||
tempTitle = {
|
||||
type: 'abstract',
|
||||
text: '',
|
||||
// displayText: "Operator",
|
||||
displayText: 'operator',
|
||||
className: 'divider hint-title'
|
||||
// hint(cm, callback, options) {}
|
||||
}
|
||||
|
||||
results = list.map((item) => {
|
||||
return {
|
||||
text: item.name,
|
||||
displayText: item.name,
|
||||
className: 'operates-item el-dropdown-menu__item relative-item'
|
||||
// hint(cm, callback, options) {}
|
||||
}
|
||||
})
|
||||
results.unshift(tempTitle)
|
||||
return results
|
||||
}
|
||||
|
||||
keepSourcedata (operatesList, funcDic, filtersList, operatesDic, operatorManual, fields, doc) {
|
||||
// 初始化原始数据 方法(存放的是 全量原始数据)
|
||||
const sourceData = {}
|
||||
// 支持的逻辑运算符
|
||||
sourceData.operatesList = operatesList || []
|
||||
// 过滤器列表
|
||||
sourceData.filtersList = filtersList || []
|
||||
sourceData.operatesDic = operatesDic || []
|
||||
sourceData.operatorReference = doc?.functions?.operator || []
|
||||
sourceData.operatorManual = operatorManual || []
|
||||
|
||||
// 添加全量数据
|
||||
sourceData.fields = fields || []
|
||||
sourceData.doc = doc || {}
|
||||
|
||||
// 存储function 的原始变量
|
||||
sourceData.funcDic = funcDic || []
|
||||
const aggregation = doc?.functions?.aggregation || []
|
||||
const dateFuns = doc?.functions?.date || []
|
||||
sourceData.funcReference = [...dateFuns, ...aggregation]
|
||||
|
||||
return sourceData
|
||||
}
|
||||
|
||||
matchHightlight (keyWord) {
|
||||
// 匹配高亮
|
||||
// var reg = new RegExp(keyWord, 'i')
|
||||
let matchFlag = false
|
||||
// reg.test(val)
|
||||
matchFlag = this.sourceData.operatesList.some((item) => {
|
||||
return keyWord === item.name
|
||||
})
|
||||
if (matchFlag) {
|
||||
return 'keyword'
|
||||
}
|
||||
if (matchFlag) {
|
||||
return 'variable-2'
|
||||
}
|
||||
matchFlag = this.sourceData.filtersList.some((item) => {
|
||||
return keyWord === item.name
|
||||
})
|
||||
if (matchFlag) {
|
||||
return 'comment'
|
||||
}
|
||||
matchFlag = this.sourceData.specialCharacters.some((item) => {
|
||||
return keyWord === item.name
|
||||
})
|
||||
if (matchFlag) {
|
||||
return 'atom'
|
||||
}
|
||||
}
|
||||
|
||||
getOperates (type, item) {
|
||||
// 获取 当前类型支持的操作符
|
||||
let operator_functions = ''
|
||||
if (item && item.doc && item.doc.constraints && item.doc.constraints.operator_functions) {
|
||||
operator_functions = item.doc.constraints.operator_functions
|
||||
} else {
|
||||
const functions = this.sourceData.operatesDic.find(item => {
|
||||
return item.type === type
|
||||
})
|
||||
operator_functions = functions && functions.functions || ''
|
||||
}
|
||||
const funList = operator_functions.split(',')
|
||||
let result = []
|
||||
result = funList.map((item) => {
|
||||
return {
|
||||
text: item,
|
||||
displayText: item,
|
||||
className: 'filter-item el-dropdown-menu__item relative-item'
|
||||
}
|
||||
})
|
||||
return result
|
||||
}
|
||||
|
||||
getFunctions (type, item) {
|
||||
// 获取 当前类型支持的操作符
|
||||
let functionsInfo = ''
|
||||
// 这里肯定有问题
|
||||
if (item && item.doc && item.doc.constraints && item.doc.constraints.aggregation_functions) {
|
||||
functionsInfo = item.doc.constraints.aggregation_functions
|
||||
} else {
|
||||
const functions = this.sourceData.funcDic.find(item => {
|
||||
return item.type === type
|
||||
})
|
||||
functionsInfo = functions && functions.functions || ''
|
||||
}
|
||||
|
||||
const funList = functionsInfo.split(',')
|
||||
let result = []
|
||||
result = funList.map((item) => {
|
||||
return {
|
||||
text: item,
|
||||
displayText: item,
|
||||
className: 'filter-item el-dropdown-menu__item relative-item'
|
||||
}
|
||||
})
|
||||
return result
|
||||
}
|
||||
|
||||
getFieldInfo (keywords) {
|
||||
// 获取字段的相关信息 1.下拉数据是需要获取的 2.支持的运算符 是不是需要呢 ???
|
||||
if (!keywords || !keywords.toLowerCase) {
|
||||
return
|
||||
}
|
||||
keywords = (keywords.trim && keywords.trim()) || keywords
|
||||
const fieldInfo = {}
|
||||
const matchItem = this.sourceData.filtersList.find((item) => {
|
||||
const itemName = item.name && item.name.toLowerCase()
|
||||
return keywords.toLowerCase() === itemName
|
||||
})
|
||||
if (!matchItem) {
|
||||
return null
|
||||
}
|
||||
// 存在下拉值 候选项
|
||||
if (matchItem && matchItem.doc && matchItem.doc.data) {
|
||||
fieldInfo.options = matchItem.doc.data.map(item => {
|
||||
return {
|
||||
text: matchItem.type === 'string' ? `'${item.code}'` : item.code,
|
||||
displayText: item.value,
|
||||
className: 'filter-item el-dropdown-menu__item relative-item'
|
||||
}
|
||||
})
|
||||
fieldInfo.operateType = 'select'
|
||||
}
|
||||
// 这是一个 远程下拉值
|
||||
if (matchItem && matchItem.doc && matchItem.doc.dict_location) {
|
||||
fieldInfo.operateType = 'remoteSelect'
|
||||
}
|
||||
|
||||
fieldInfo._matchItem = matchItem
|
||||
fieldInfo.name = matchItem.name
|
||||
fieldInfo.type = matchItem.type
|
||||
fieldInfo.label = matchItem.label
|
||||
return fieldInfo
|
||||
}
|
||||
|
||||
getFieldList () {
|
||||
// 获取字段列表
|
||||
const fieldList = (this.sourceData && this.sourceData.filtersList) || []
|
||||
return fieldList
|
||||
}
|
||||
|
||||
getOperatorItem (code) {
|
||||
const operators = this.sourceData.operatorManual || []
|
||||
const matchItem = operators.find(item => {
|
||||
return item.name === code.trim()
|
||||
})
|
||||
if (matchItem && !matchItem.label) {
|
||||
matchItem.label = matchItem.name
|
||||
}
|
||||
return matchItem || null
|
||||
}
|
||||
|
||||
dispose () {
|
||||
this.sourceData = null
|
||||
this.hintData.operatesList = null
|
||||
this.hintData.filtersList = null
|
||||
this.hintData = null
|
||||
}
|
||||
}
|
||||
|
||||
// 获取数据集
|
||||
export function getDataset (component, params) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const schemeInstance = new Scheme(component, params)
|
||||
schemeInstance.getFormatedData((schemeData) => {
|
||||
const dataset = new Dataset(schemeData)
|
||||
resolve(dataset, () => {
|
||||
schemeInstance.dispose()
|
||||
dataset.dispose()
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
@@ -0,0 +1,94 @@
|
||||
import {dataTemplate, fieldTemplate} from './template'
|
||||
|
||||
export class DeviceTag {
|
||||
constructor(context, params) {
|
||||
//先从缓存获取数据
|
||||
this.queryparams = params
|
||||
this.context = context
|
||||
}
|
||||
|
||||
filterQueryData(list) {
|
||||
return list
|
||||
}
|
||||
|
||||
getDataFromRemote() {
|
||||
//从 远程,也就是请求接口获取数据
|
||||
return this.context.$get('/deviceTag', this.queryparams).then((res) => {
|
||||
this.context.initDataReadyCb && this.context.initDataReadyCb(res.data || null); //组件 请求 文件成功回调
|
||||
if (res.code === 200) {
|
||||
var data = res.data && res.data.list;
|
||||
return data
|
||||
} else {
|
||||
// this.context.$message({
|
||||
// message: '请求 DeviceTag数据失败',
|
||||
// type: 'error',
|
||||
// showClose: true
|
||||
// });
|
||||
}
|
||||
return null
|
||||
}).catch((err) => {
|
||||
console.error(err)
|
||||
})
|
||||
}
|
||||
|
||||
formatData(data) {
|
||||
//格式化 获取的数据
|
||||
const resultData = {
|
||||
operatesList: [
|
||||
{
|
||||
"name": "AND",
|
||||
"function": "A AND B",
|
||||
type: "abstract",
|
||||
label: "AND"
|
||||
}
|
||||
],
|
||||
filtersList: data ? this.filterQueryData(data.fields || []) : [],
|
||||
//操作符仓库 用于记录 类型 和 操作符之间的映射关系
|
||||
operatesDic: data ? data.doc.schema_query.references.operator || [] : [],
|
||||
//operator 记录运算符的label 和 value 映射 以及操作符的使用方法
|
||||
operatorManual: data ? data.doc.functions.operator || [] : []
|
||||
}
|
||||
return resultData
|
||||
}
|
||||
|
||||
organizeData(data=[]) {
|
||||
var fields = []
|
||||
var res = JSON.parse(JSON.stringify(dataTemplate));
|
||||
if (!data ) {
|
||||
return
|
||||
}
|
||||
data.forEach((item, index) => {
|
||||
var fieldItem = JSON.parse(JSON.stringify(fieldTemplate));
|
||||
fieldItem.name = item.tagValue
|
||||
fieldItem.type = "Array"
|
||||
fieldItem.label = item.tagName
|
||||
fieldItem.doc.data = (item.subTags || []).map(tagItem => {
|
||||
return {
|
||||
code: `'${tagItem.tagValue}'`, //匹配SQL 的时候,这个Code 要加 ''
|
||||
value: tagItem.tagName,
|
||||
type: tagItem.tagType
|
||||
}
|
||||
})
|
||||
fields.push(fieldItem)
|
||||
})
|
||||
res.fields = fields
|
||||
return res
|
||||
}
|
||||
|
||||
getFormatedData(callback) {
|
||||
this.getDataFromRemote().then(data => {
|
||||
//组织数据 模拟scama
|
||||
var organizedData = this.organizeData(data);
|
||||
//格式化数据
|
||||
this.data = this.formatData(organizedData)
|
||||
//获取scameData的时候 查询映射字段
|
||||
callback && callback(this.data)
|
||||
})
|
||||
}
|
||||
|
||||
dispose(){
|
||||
this.context=null
|
||||
this.queryparams=null
|
||||
this.data=null
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,133 @@
|
||||
// import vm from '@/main.js'
|
||||
import { getSchemaInfo } from '@/utils/timeQueryApi'
|
||||
import { cacheData } from '@/components/advancedSearch/showhint/packages/service/mockData'
|
||||
// import {cacheData} from "@/components/common/search/packages/service/oldMockData";
|
||||
|
||||
export class Scheme {
|
||||
constructor (context, params) {
|
||||
// 先从缓存获取数据
|
||||
this.queryparams = params
|
||||
this.context = context
|
||||
this.schemeData = null
|
||||
}
|
||||
|
||||
filterQueryData (list) {
|
||||
// 仅仅过滤掉 无用的数据 allow_query 为false 的数据 visibility==hidden/disabled DoS日志补充 start_time
|
||||
const denyList = ['recv_time', 'start_time']
|
||||
let result
|
||||
result = list.filter((item, index) => {
|
||||
// return (item.doc && item.doc.allow_query === 'true') && !denyList.includes(item.name)
|
||||
// 在前端禁止搜索字段中 或者 接口不允许搜索得字段 过滤掉
|
||||
return !(item.doc && item.doc.allow_query === 'false') && !denyList.includes(item.name) && !(item.doc && (item.doc.visibility == 'disabled' || item.doc.visibility == 'hidden'))
|
||||
})
|
||||
return result || []
|
||||
}
|
||||
|
||||
async getSchemaDataFromRemote () {
|
||||
const schemaData = await getSchemaInfo(this.queryparams?.logType)
|
||||
this.context.initDataReadyCb && this.context.initDataReadyCb(schemaData || null)
|
||||
return schemaData
|
||||
}
|
||||
|
||||
formatSchemaData (data) {
|
||||
// 格式化 获取的数据
|
||||
const formatedData = {
|
||||
operatesList: [
|
||||
{
|
||||
name: 'AND',
|
||||
function: 'A AND B',
|
||||
type: 'abstract',
|
||||
label: 'AND'
|
||||
}
|
||||
// {
|
||||
// name: 'OR',
|
||||
// function: 'A OR B',
|
||||
// type: 'abstract',
|
||||
// label: 'OR'
|
||||
// }
|
||||
],
|
||||
filtersList: data ? this.filterQueryData(data.fields || []) : [],
|
||||
// 操作符仓库 用于记录 类型 和 操作符之间的映射关系
|
||||
operatesDic: data ? (data.doc.schema_query && data.doc.schema_query.references.operator) || [] : [],
|
||||
|
||||
// 操作符仓库 用于记录 类型 和 聚合函数之间的映射关系
|
||||
funcDic: data ? (data.doc.schema_query && data.doc.schema_query.references.aggregation) || [] : [],
|
||||
|
||||
// operator 记录运算符的label 和 value 映射 以及操作符的使用方法
|
||||
operatorManual: data ? data.doc.functions.operator || [] : [],
|
||||
|
||||
// 全部附属信息 这些是需要的
|
||||
doc: data.doc,
|
||||
|
||||
// 全部字段信息 fields
|
||||
fields: data.fields
|
||||
}
|
||||
|
||||
// date 和 timestamp 支持的方法 需要特殊处理 ,补充事件函数处理
|
||||
const dateFuns = (data?.doc?.functions?.date || []).map(item => {
|
||||
return item.name
|
||||
})
|
||||
formatedData.funcDic.forEach(item => {
|
||||
if (['date', 'timestamp'].includes(item.type)) {
|
||||
// eslint-disable-next-line no-unused-expressions
|
||||
dateFuns.length > 0 ? item.functions = item.functions + ',' + dateFuns.join(',') : ''
|
||||
}
|
||||
})
|
||||
return formatedData
|
||||
}
|
||||
|
||||
getRemoteOptions () {
|
||||
// query 查询地址 key 关键字(唯一标识) value 值就是label 用于展示
|
||||
this.schemeData.filtersList.forEach((item) => {
|
||||
if (item.doc && item.doc.data) {
|
||||
return
|
||||
}
|
||||
if (item.doc && item.doc.dict_location) {
|
||||
const { path, key, value } = item.doc.dict_location
|
||||
return vm.$get(path, { pageSize: 500, pageNo: 1 }).then((res) => {
|
||||
if (res.code === 200) {
|
||||
const dataList = res.data.list
|
||||
if (res.data.total > 500) {
|
||||
// 超出500条 直接不处理了 ,没缓存
|
||||
return
|
||||
}
|
||||
localStorage.setItem(`${this.context.$route.path}_${item.name}`, JSON.stringify(res.data.list))
|
||||
const data = dataList.map(item => {
|
||||
return {
|
||||
code: item[key],
|
||||
value: item[value]
|
||||
}
|
||||
})
|
||||
item.doc.data = data
|
||||
}
|
||||
}).catch((err) => {
|
||||
console.error(err)
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
async getFormatedData (callback) {
|
||||
const cacheDat = cacheData
|
||||
if (cacheDat) {
|
||||
this.schemeData = this.formatSchemaData(cacheDat)
|
||||
// this.getRemoteOptions()
|
||||
callback && callback(this.schemeData)
|
||||
return
|
||||
}
|
||||
this.getSchemaDataFromRemote().then(data => {
|
||||
this.schemeData = this.formatSchemaData(data)
|
||||
// 获取schemaData的时候 查询映射字段
|
||||
// this.getRemoteOptions()
|
||||
callback && callback(this.schemeData)
|
||||
})
|
||||
callback && callback(this.schemeData)
|
||||
return this.schemeData
|
||||
}
|
||||
|
||||
dispose () {
|
||||
this.context = null
|
||||
this.schemeData = null
|
||||
this.queryparams = null
|
||||
}
|
||||
}
|
||||
1062
src/components/advancedSearch/showhint/packages/service/mockData.js
Normal file
1062
src/components/advancedSearch/showhint/packages/service/mockData.js
Normal file
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,156 @@
|
||||
export const dataTemplate = {
|
||||
"doc": {
|
||||
"functions": {
|
||||
"aggregation": [
|
||||
{
|
||||
"name": "COUNT",
|
||||
"function": "count(expr)",
|
||||
"label": "COUNT"
|
||||
}, {
|
||||
"name": "COUNT_DISTINCT",
|
||||
"function": "count(distinct expr)",
|
||||
"label": "COUNT_DISTINCT"
|
||||
}, {
|
||||
"name": "AVG",
|
||||
"function": "avg(expr)",
|
||||
"label": "AVG"
|
||||
}, {
|
||||
"name": "SUM",
|
||||
"function": "sum(expr)",
|
||||
"label": "SUM"
|
||||
}, {
|
||||
"name": "MAX",
|
||||
"function": "max(expr)",
|
||||
"label": "MAX"
|
||||
}, {
|
||||
"name": "MIN",
|
||||
"function": "min(expr)",
|
||||
"label": "MIN"
|
||||
}],
|
||||
"operator": [
|
||||
{
|
||||
"name": "=",
|
||||
"function": "expr = value",
|
||||
"label": "="
|
||||
}, {
|
||||
"name": "!=",
|
||||
"function": "expr != value",
|
||||
"label": "!="
|
||||
}, {
|
||||
"name": ">",
|
||||
"function": "expr > value",
|
||||
"label": ">"
|
||||
}, {
|
||||
"name": "<",
|
||||
"function": "expr < value",
|
||||
"label": "<"
|
||||
}, {
|
||||
"name": ">=",
|
||||
"function": "expr >= value",
|
||||
"label": ">="
|
||||
}, {
|
||||
"name": "<=",
|
||||
"function": "expr <= value",
|
||||
"label": "<="
|
||||
}, {
|
||||
"name": "has",
|
||||
"function": "has(expr, value)",
|
||||
"label": "HAS"
|
||||
}, {
|
||||
"name": "in",
|
||||
"function": "expr in (values)",
|
||||
"label": "IN"
|
||||
}, {
|
||||
"name": "not in",
|
||||
"function": "expr not in (values)",
|
||||
"label": "NOT IN"
|
||||
}, {
|
||||
"name": "like",
|
||||
"function": "expr like value",
|
||||
"label": "LIKE"
|
||||
}, {
|
||||
"name": "not like",
|
||||
"function": "expr not like value",
|
||||
"label": "NOT LIKE"
|
||||
}, {
|
||||
"name": "notEmpty",
|
||||
"function": "notEmpty(expr)",
|
||||
"label": "NOT EMPTY"
|
||||
}, {
|
||||
"name": "empty",
|
||||
"function": "empty(expr)",
|
||||
"label": "EMPTY"
|
||||
}]
|
||||
},
|
||||
"schema_query": {
|
||||
"references": {
|
||||
"aggregation": [
|
||||
{
|
||||
"type": "int",
|
||||
"functions": "COUNT,COUNT_DISTINCT,AVG,SUM,MAX,MIN"
|
||||
}, {
|
||||
"type": "long",
|
||||
"functions": "COUNT,COUNT_DISTINCT,AVG,SUM,MAX,MIN"
|
||||
}, {
|
||||
"type": "float",
|
||||
"functions": "COUNT,COUNT_DISTINCT,AVG,SUM,MAX,MIN"
|
||||
}, {
|
||||
"type": "double",
|
||||
"functions": "COUNT,COUNT_DISTINCT,AVG,SUM,MAX,MIN"
|
||||
}, {
|
||||
"type": "string",
|
||||
"functions": "COUNT,COUNT_DISTINCT"
|
||||
}, {
|
||||
"type": "date",
|
||||
"functions": "COUNT,COUNT_DISTINCT,MAX,MIN"
|
||||
}, {
|
||||
"type": "timestamp",
|
||||
"functions": "COUNT,COUNT_DISTINCT,MAX,MIN"
|
||||
}
|
||||
],
|
||||
"operator": [
|
||||
{
|
||||
"type": "int",
|
||||
"functions": "=,!=,>,<,>=,<=,in,not in"
|
||||
}, {
|
||||
"type": "long",
|
||||
"functions": "=,!=,>,<,>=,<=,in,not in"
|
||||
}, {
|
||||
"type": "float",
|
||||
"functions": "=,!=,>,<,>=,<="
|
||||
}, {
|
||||
"type": "double",
|
||||
"functions": "=,!=,>,<,>=,<="
|
||||
}, {
|
||||
"type": "string",
|
||||
"functions": "=,!=,in,not in,like,not like,notEmpty,empty"
|
||||
}, {
|
||||
"type": "date",
|
||||
"functions": "=,!=,>,<,>=,<="
|
||||
}, {
|
||||
"type": "timestamp",
|
||||
"functions": "=,!=,>,<,>=,<="
|
||||
}, {
|
||||
"type": "array",
|
||||
"functions": "has"
|
||||
}]
|
||||
}
|
||||
}
|
||||
},
|
||||
"fields": []
|
||||
}
|
||||
|
||||
export const fieldTemplate = {
|
||||
"name": "",
|
||||
"label": "",
|
||||
"doc": {
|
||||
"allow_query": "true",
|
||||
"visibility": null,
|
||||
"constraints": {
|
||||
"type": "tag",
|
||||
"operator_functions": "in,not in"
|
||||
},
|
||||
"data": []
|
||||
},
|
||||
"type": "Array"
|
||||
}
|
||||
@@ -21,6 +21,7 @@ import DateTimeRange from '@/components/common/TimeRange/DateTimeRange'
|
||||
import TimeRefresh from '@/components/common/TimeRange/TimeRefresh'
|
||||
import PanelChartList from '@/views/charts/PanelChartList'
|
||||
import Error from '@/components/common/Error'
|
||||
import Renderer from '@/components/advancedSearch/showhint/Hint/Renderer'
|
||||
import 'lib-flexible'
|
||||
|
||||
const emitter = new bus()
|
||||
@@ -48,6 +49,7 @@ app.component('date-time-range', DateTimeRange)
|
||||
app.component('time-refresh', TimeRefresh)
|
||||
app.component('panel-chart-list', PanelChartList)
|
||||
app.component('chart-error', Error)
|
||||
app.component('Renderer', Renderer)
|
||||
|
||||
app.mount('#app')
|
||||
|
||||
|
||||
151
src/utils/timeQueryApi.js
Normal file
151
src/utils/timeQueryApi.js
Normal file
@@ -0,0 +1,151 @@
|
||||
import vue from '@/main.js'
|
||||
// import Moment from "moment/moment";
|
||||
// import {transformToUTCTime} from './TimeZone.js'
|
||||
|
||||
//默认Schema 延时15s ,时间粒度 1s
|
||||
const defaultSchema = {
|
||||
"doc": {
|
||||
"measurements": {
|
||||
"granularity": 1,
|
||||
"ingestion_delay": 15
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
let schemaDict=null;
|
||||
function getSchemaFromLocal(schemaType) {
|
||||
let schemaData=null
|
||||
// if(schemaDict?.[schemaType]){
|
||||
// schemaData=schemaDict
|
||||
// }else{
|
||||
schemaData = localStorage.getItem('TSGSchema')
|
||||
// }
|
||||
if (!schemaData) {
|
||||
return null;
|
||||
}
|
||||
const storeData = JSON.parse(schemaData)[schemaType];
|
||||
// 如果根据key没有找到数据，直接返回空
|
||||
if (!storeData) {
|
||||
return null;
|
||||
}
|
||||
const parsedData = storeData;
|
||||
const currentTimestamp = new Date().getTime();
|
||||
|
||||
// 将当前的时间戳和保存在storage中的timestamp进行比较
|
||||
// 如果时间差小于等于过期时间说明没有过期，直接返回数据
|
||||
// 否则，说明数据已经过期，将storage中的key清除
|
||||
if (currentTimestamp - parsedData.timestamp <= parsedData.expire) {
|
||||
return parsedData.value ? JSON.parse(parsedData.value) : parsedData.value
|
||||
} else {
|
||||
setDashboardSchema(schemaType,'')
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
/**
|
||||
* 向localStorage中添加字段
|
||||
* @param {*} schemaType 保存数据的key
|
||||
* @param {*} value 保存的数据
|
||||
* @param {*} expire 过期时间，默认为1分钟
|
||||
*/
|
||||
function setDashboardSchema(schemaType, value, expire = 60000) {
|
||||
let schemaData = localStorage.getItem('TSGSchema');
|
||||
if (!schemaData) {
|
||||
localStorage.setItem('TSGSchema', '{}')
|
||||
}
|
||||
let TSGSchema = JSON.parse(localStorage.getItem('TSGSchema'))
|
||||
TSGSchema[schemaType] = {
|
||||
value: value,
|
||||
expire: expire,
|
||||
timestamp: new Date().getTime()
|
||||
}
|
||||
const stringfiedData = JSON.stringify(TSGSchema);
|
||||
localStorage.setItem('TSGSchema', stringfiedData);
|
||||
schemaDict=TSGSchema;
|
||||
}
|
||||
|
||||
// 获取过期时间毫秒数
|
||||
function getExpireTime(data){
|
||||
let expireDate=data.expireDate
|
||||
if(!expireDate){
|
||||
return 24 * 60 * 60 * 1000
|
||||
}
|
||||
let expireTime=new Date().getTime()-expireDate
|
||||
return expireTime
|
||||
}
|
||||
|
||||
|
||||
function getSchemaFromRemote(schemaType) {
|
||||
return vue.$get(`/interface/gateway/api/galaxy/v1/metadata/schema/${schemaType}`).then(res => {
|
||||
if (res.status === 200) {
|
||||
let expireTime=getExpireTime(res.data)
|
||||
setDashboardSchema(schemaType, JSON.stringify(res.data), expireTime)
|
||||
return res.data
|
||||
}
|
||||
return defaultSchema
|
||||
}).catch(err => {
|
||||
console.error(err)
|
||||
return defaultSchema
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
// async 延时时间
|
||||
// 转换时间 start end schmaType 相对时间 绝对时间
|
||||
// 时间粒度
|
||||
|
||||
//获取Schema数据,存在于local 直接取,不存在 直接请求,存本地
|
||||
async function getSchemaInfo(schemaType = '') {
|
||||
var schemaInfo = getSchemaFromLocal(schemaType)
|
||||
if (!schemaInfo) {
|
||||
schemaInfo = await getSchemaFromRemote(schemaType)
|
||||
}
|
||||
return schemaInfo
|
||||
}
|
||||
|
||||
/*
|
||||
* 这里对 时间的延时
|
||||
* 时间范围做处理
|
||||
* 默认 不做 UTC 转换处理
|
||||
*
|
||||
* granularity 单位必须是S 秒
|
||||
* */
|
||||
async function getTimeQueryParams({start, end, schemaType = '', granularity = 1, toUtc = false, delay = false}) {
|
||||
let schemaData = await getSchemaInfo(schemaType);
|
||||
|
||||
const schema_ingestion_delay = schemaData?.doc?.measurements?.ingestion_delay || 0;
|
||||
const schema_granularity = schemaData?.doc?.measurements?.granularity || 1;
|
||||
|
||||
//这里需要考虑 传入的是UTC 时间,Moment 可以正常处理吗
|
||||
var delayTime = delay ? schema_ingestion_delay : 0;
|
||||
// let startDate = Moment(start).subtract(delayTime, 'seconds')
|
||||
// let endDate = Moment(end).subtract(delayTime, 'seconds')
|
||||
let startDate = '1'
|
||||
let endDate = '2'
|
||||
|
||||
var startStr = startDate.format('YYYY-MM-DD HH:mm:ss')
|
||||
var endStr = endDate.format('YYYY-MM-DD HH:mm:ss')
|
||||
|
||||
//前端计算时间粒度,不能比Schema 支持的最小时间粒度 小
|
||||
var alignmentPeriod = schema_granularity > granularity ? schema_granularity : granularity
|
||||
|
||||
//UTC 转换
|
||||
if (toUtc) {
|
||||
// startStr = transformToUTCTime(startStr)
|
||||
// endStr = transformToUTCTime(endStr)
|
||||
startStr = 'transformToUTCTime(startStr)'
|
||||
endStr = 'transformToUTCTime(endStr)'
|
||||
}
|
||||
return {
|
||||
start: startStr,
|
||||
end: endStr,
|
||||
granularity: 'PT'+schema_granularity+'S',
|
||||
alignmentPeriod: 'PT'+alignmentPeriod+'S',
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
getTimeQueryParams,
|
||||
getSchemaInfo
|
||||
}
|
||||
export {getSchemaFromLocal, getSchemaInfo, setDashboardSchema, getSchemaFromRemote, getTimeQueryParams};
|
||||
@@ -824,7 +824,7 @@ export default {
|
||||
if (q && q.indexOf('+') > -1) {
|
||||
q = q.replace('+', '')
|
||||
}
|
||||
if (q && q.indexOf('%') > 0 && (str1 !== '%20' || str1 === '%25')) {
|
||||
if (q && q.indexOf('%') > 0 && (str1 === '%20' || str1 === '%25')) {
|
||||
q = decodeURI(q)
|
||||
}
|
||||
this.initSearch(q)
|
||||
|
||||
@@ -10,6 +10,7 @@
|
||||
:default-mode="defaultMode"
|
||||
:full-text="true"
|
||||
:show-list="showList"
|
||||
showHint
|
||||
:class="{'advanced-search--show-list': showList}"
|
||||
@search="search"
|
||||
></advanced-search>
|
||||
|
||||
Reference in New Issue
Block a user