Skip to content

Commit

Permalink
PullRequest: 89 pref: codemirror sql search
Browse files Browse the repository at this point in the history 
Merge branch dev-th-20240318 of [email protected]:multi-cluster/karbour.git into sprint-20240312
https://code.alipay.com/multi-cluster/karbour/pull_requests/89

Signed-off-by: 向野 <[email protected]>


* PullRequest: 86 feat: sql搜索框替换成codemirror,  insight静态页面

Merge branch dev-th-20240313 of [email protected]:multi-cluster/karbour.git into sprint-20240312
https://code.alipay.com/multi-cluster/karbour/pull_requests/86

Signed-off-by: 向野 <[email protected]>


* feat: sql搜索框替换成codemirror,  insight静态页面

* feat: sql搜索框替换成codemirror,  insight静态页面

* feat: sql搜索框替换成codemirror,  insight静态页面

* feat: sql搜索框替换成codemirror,  insight静态页面

* feat: sql搜索框替换成codemirror,  insight静态页面

* pref

* PullRequest: 88 feat: sql搜索框替换成codemirror,  insight静态页面

Merge branch dev-th-20240313 of [email protected]:multi-cluster/karbour.git into sprint-20240312
https://code.alipay.com/multi-cluster/karbour/pull_requests/88

Signed-off-by: 向野 <[email protected]>


* feat: sql搜索框替换成codemirror,  insight静态页面

* feat: sql搜索框替换成codemirror,  insight静态页面

* feat: sql搜索框替换成codemirror,  insight静态页面

* feat: sql搜索框替换成codemirror,  insight静态页面

* feat: sql搜索框替换成codemirror,  insight静态页面

* pref

* pref

* pref: codemirror sql search
  • Loading branch information
@hai-tian @elliotxx
hai-tian authored and elliotxx committed Mar 19, 2024
1 parent aaaf965 commit c2e185d
Show file tree
Hide file tree
Showing 7 changed files with 122 additions and 204 deletions.
3 changes: 2 additions & 1 deletion ui/src/components/layout/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -204,7 +204,8 @@ const LayoutPage = () => {
<span
style={{
fontSize: 14,
marginLeft: 12,
marginLeft: 7,
marginRight: 4,
color: '#646566',
textAlign: 'right',
}}
Expand Down
4 changes: 2 additions & 2 deletions ui/src/components/searchInput/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react'
import { AutoComplete, Input, Space } from 'antd'
import { searchPrefix } from '@/utils/constants'
import { searchSqlPrefix } from '@/utils/constants'
import arrowRight from '@/assets/arrow-right.png'

import styles from './styles.module.less'
Expand All @@ -25,7 +25,7 @@ const SearchInput = (props: IProps) => {
<Space.Compact>
<Input
disabled
value={searchPrefix}
value={searchSqlPrefix}
style={{
width: 200,
fontSize: 16,
Expand Down
238 changes: 61 additions & 177 deletions ui/src/components/sqlSearch/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,13 +25,14 @@ import {
import { useTranslation } from 'react-i18next'
import { css } from '@emotion/css'
import axios from 'axios'
import { message } from 'antd'
import { Divider, message } from 'antd'
import arrowRight from '@/assets/arrow-right.png'
import {
defaultKeywords,
whereKeywords,
kindCompletions,
operatorKeywords,
searchSqlPrefix,
} from '@/utils/constants'
// import '@codemirror/view/dist'

Expand Down Expand Up @@ -77,7 +78,6 @@ const placeholderStyle = EditorView.baseTheme({
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
padding: '0 20px',
},
})

Expand Down Expand Up @@ -167,6 +167,29 @@ const SqlEditor = ({ sqlEditorValue, handleSearch }: SqlEditorIProps) => {
// // 这里适当地更新你的编辑器或组件状态
// }

function getCustomCompletions(regMatch, cusCompletions, pos) {
const filterTerm = regMatch[2]
const customCompletions = cusCompletions
.filter(completion =>
completion.toLowerCase().includes(filterTerm.toLowerCase()),
)
.map(completion => ({
label: completion,
type: 'custom', // 根据需要调整类型
apply: completion, // 确保apply属性与label保持一致，以便正确插入补全
boost: 0, // 可以根据需要设置优先级
}))

// 计算补全开始的位置（从 "kind=" 或 "kind = " 后开始）
const from = pos - filterTerm?.length

if (customCompletions?.length > 0) {
return { from, options: customCompletions }
}
// 如果没有匹配项，返回 null 允许其他补全源处理
return null
}

useEffect(() => {
if (editorRef.current) {
// 添加CSS样式去除虚线框
Expand Down Expand Up @@ -209,23 +232,26 @@ const SqlEditor = ({ sqlEditorValue, handleSearch }: SqlEditorIProps) => {
apply: record,
// info: () => {
// const detailDiv = document.createElement('div')
// detailDiv.className = 'custom-completion'
// detailDiv.className = 'custom-completion-info'
// // 创建删除按钮
// const deleteButton = document.createElement('button')
// deleteButton.textContent = 'x'
// deleteButton.style.border = 'none'
// deleteButton.style.background = 'none'
// deleteButton.className = 'delete-history-button'
// deleteButton.textContent = 'Delete'
// deleteButton.onclick = event => {
// event.preventDefault()
// event.stopPropagation()
// historyCompletions = historyCompletions.filter(
// h => h !== record,
// // 删除逻辑
// historyCompletionsRef.current =
// historyCompletionsRef.current?.filter(
// item => item === record,
// )
// // 刷新补全
// context.state.update(
// (completionStatus as any)
// .of(context.state)
// .startCompletion(),
// )
// // 这里你可能需要处理编辑器状态的更新，以确保变化反映到UI上
// }
// detailDiv.appendChild(deleteButton)
// detailDiv.style.border = 'none'
// return detailDiv
// },
}),
Expand All @@ -239,137 +265,18 @@ const SqlEditor = ({ sqlEditorValue, handleSearch }: SqlEditorIProps) => {
// const whereMatch = /(where\s*=\s*)(\S*)$/i.exec(beforeCursor)
const whereMatch = /\b(where|or|and) (\S*)$/.exec(beforeCursor)
if (whereMatch) {
const filterTerm = whereMatch[2]
const customCompletions = whereKeywords
.filter(completion =>
completion.toLowerCase().includes(filterTerm.toLowerCase()),
)
.map(completion => ({
label: completion,
type: 'constant', // 根据需要调整类型
apply: completion, // 确保apply属性与label保持一致，以便正确插入补全
boost: 0, // 可以根据需要设置优先级
}))

// 计算补全开始的位置（从 "cluster=" 或 "cluster = " 后开始）
const from = pos - filterTerm?.length

if (customCompletions?.length > 0) {
return { from, options: customCompletions }
}
// 如果没有匹配项，返回 null 允许其他补全源处理
return null
return getCustomCompletions(whereMatch, whereKeywords, pos)
}
// 当输入 "where" 时提供自定义补全
// if (/(where )|(WHERE )$/.test(beforeCursor)) {
// // 提供特定的补全列表
// const customCompletions = whereKeywords.map(completion => ({
// label: completion,
// type: 'constant', // 根据需要调整类型
// validFor: () => false,
// }))
// return { from: pos, options: customCompletions }
// }

const kindMatch = /(kind=\s*|kind\s*=\s*)(\S*)$/i.exec(beforeCursor)

const kindMatch = /(kind\s*=\s*)(\S*)$/i.exec(beforeCursor)
if (kindMatch) {
// kindMatch[1] 包含 "kind=" 或 "kind = "
// kindMatch[2] 包含 "=" 右侧用户输入的文本，用于补全列表的过滤
const filterTerm = kindMatch[2]
const customCompletions = kindCompletions
.filter(completion =>
completion.toLowerCase().includes(filterTerm.toLowerCase()),
)
.map(completion => ({
label: completion,
type: 'constant', // 根据需要调整类型
apply: completion, // 确保apply属性与label保持一致，以便正确插入补全
boost: 0, // 可以根据需要设置优先级
}))

// 计算补全开始的位置（从 "kind=" 或 "kind = " 后开始）
const from = pos - filterTerm?.length

if (customCompletions?.length > 0) {
return { from, options: customCompletions }
}
// 如果没有匹配项，返回 null 允许其他补全源处理
return null
return getCustomCompletions(kindMatch, kindCompletions, pos)
}
// 检查是否满足特定条件 "KIND="
// if (/(KIND=)|(kind=)|(kind = )$/.test(beforeCursor)) {
// // 提供特定的补全列表
// const customCompletions = kindCompletions.map(completion => ({
// label: completion,
// type: 'constant', // 根据需要调整类型
// validFor: () => false,
// }))
// return { from: pos, options: customCompletions }
// // return { from: pos, options: customCompletions, filter: false }
// }

// 检查是否满足特定条件 以whereKeywords关键词结尾的
// 对关键字中的特殊字符进行转义
// const escapedKeywords = whereKeywords.map(kw =>
// kw.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'),
// )

// // 使用管道符 '|' 将转义后的关键字连接成一个字符串，并在每个关键字后加上空格
// const keywordsPattern = escapedKeywords.join('\\s|') + '\\s'
// // console.log(keywordsPattern, '====keywordsPattern====')

// // 创建正则表达式，匹配以这些关键字之一加空格结尾的字符串
// // 注意：这里我们假设关键字前面可能存在非关键字字符
// const regex = new RegExp(`(${keywordsPattern})$`, 'i')
// const operatorMatch = regex?.exec(beforeCursor)
// if (operatorMatch) {
// const filterTerm = operatorMatch?.[2]
// console.log(operatorMatch, filterTerm, '====operatorMatch====')
// const customCompletions = operatorKeywords
// .filter(completion =>
// completion?.toLowerCase().includes(filterTerm?.toLowerCase()),
// )
// .map(completion => ({
// label: completion,
// type: 'constant', // 根据需要调整类型
// apply: completion, // 确保apply属性与label保持一致，以便正确插入补全
// boost: 0, // 可以根据需要设置优先级
// }))

// // 计算补全开始的位置（从 "cluster=" 或 "cluster = " 后开始）
// const from = pos - filterTerm?.length

// if (customCompletions.length > 0) {
// return { from, options: customCompletions }
// }
// // 如果没有匹配项，返回 null 允许其他补全源处理
// return null
// }

if (whereKeywords?.some(item => beforeCursor?.endsWith(`${item} `))) {
// 提供特定的补全列表
// const word = context.matchBefore(/\w*/)
// const customCompletions = operatorKeywords
// .filter(completion =>
// completion.toLowerCase().includes(word?.text?.toLowerCase()),
// )
// .map(completion => ({
// label: completion,
// type: 'constant', // 根据需要调整类型
// apply: completion, // 确保apply属性与label保持一致，以便正确插入补全
// boost: 0, // 可以根据需要设置优先级
// }))

// // 计算补全开始的位置（从 "cluster=" 或 "cluster = " 后开始）
// const from = pos - word?.text?.length

// if (customCompletions.length > 0) {
// return { from, options: customCompletions }
// }
// // 如果没有匹配项，返回 null 允许其他补全源处理
// return null
const customCompletions = operatorKeywords.map(completion => ({
label: completion,
type: 'constant', // 根据需要调整类型
type: 'custom', // 根据需要调整类型
validFor: () => false,
}))
return { from: pos, options: customCompletions }
Expand All @@ -380,30 +287,10 @@ const SqlEditor = ({ sqlEditorValue, handleSearch }: SqlEditorIProps) => {
if (clusterMatch) {
// clusterMatch[1] 包含 "cluster=" 或 "cluster = "
// clusterMatch[2] 包含 "=" 右侧用户输入的文本，用于补全列表的过滤
const filterTerm = clusterMatch[2]
const clusterNameList = clusterListRef.current?.map(
item => item?.metadata?.name,
)

const customCompletions = clusterNameList
?.filter(completion =>
completion.toLowerCase().includes(filterTerm.toLowerCase()),
)
.map(completion => ({
label: completion,
type: 'constant', // 根据需要调整类型
apply: completion, // 确保apply属性与label保持一致，以便正确插入补全
boost: 0, // 可以根据需要设置优先级
}))

// 计算补全开始的位置（从 "cluster=" 或 "cluster = " 后开始）
const from = pos - filterTerm?.length

if (customCompletions?.length > 0) {
return { from, options: customCompletions }
}
// 如果没有匹配项，返回 null 允许其他补全源处理
return null
return getCustomCompletions(clusterMatch, clusterNameList, pos)
}

const word = context?.matchBefore(/\w*/)
Expand Down Expand Up @@ -527,19 +414,24 @@ const SqlEditor = ({ sqlEditorValue, handleSearch }: SqlEditorIProps) => {

return (
<div className={styles.karbour_editor}>
<div className={styles.karbour_editor_prefix}>{searchSqlPrefix}</div>
<div className={styles.karbour_editor_divider}>
<Divider type="vertical" />
</div>
<div
style={{ width: '100%' }}
// style={{ width: 300, height: 50, border: '1px solid red' }}
ref={editorRef}
className={css`
.cm-editor .cm-content {
border: 1px solid #d8d8d8;
border-right: none;
border-left: none;
height: 42px;
width: 1000px;
border-radius: 16px;
line-height: 42px;
font-size: 16px;
padding: 0 10px;
padding: 0;
overflow-x: auto; // 允许水平滚动
white-space: pre; // 禁止自动换行
background-color: #fff !important;
Expand All @@ -548,7 +440,7 @@ const SqlEditor = ({ sqlEditorValue, handleSearch }: SqlEditorIProps) => {
outline: none !important;
}
.cm-line {
width: 100%;
padding: 0;
overflow-x: auto; // 允许水平滚动
white-space: pre; // 禁止自动换行
}
Expand All @@ -566,33 +458,19 @@ const SqlEditor = ({ sqlEditorValue, handleSearch }: SqlEditorIProps) => {
}
.cm-tooltip-autocomplete .cm-completionLabel {
padding: 10px !important;
// font-weight: bold !important;
font-size: 18px !important;
}
.cm-tooltip-autocomplete .cm-completion[aria-selected='true'],
.cm-tooltip-autocomplete .cm-completion:hover {
background-color: #f5f5f5 !important;
color: white !important;
}
.cm-tooltip-autocomplete .cm-completionDetail {
font-size: 0.8em !important;
margin-left: 10px !important;
color: #666 !important;
}
.cm-tooltip-autocomplete .cm-completionLabel .cm-completionText {
padding: 20px !important;
}
.cm-tooltip-autocomplete .cm-completionLabel .cm-completionDetail {
padding: 20px !important;
}
.cm-tooltip.cm-tooltip-autocomplete {
border-radius: 6px !important;
border: none;
padding: 10px !important;
}
.cm-tooltip.cm-tooltip-autocomplete > ul {
padding: 10px !important;
height: auto !important;
max-height: 500px !important;
overflow-y: auto !important;
Expand All @@ -602,17 +480,23 @@ const SqlEditor = ({ sqlEditorValue, handleSearch }: SqlEditorIProps) => {
margin: 5px 0 !important;
padding: 10px 0 !important;
border-radius: 6px !important;
width: auto !important;
}
.cm-tooltip.cm-tooltip-autocomplete > ul > li[aria-selected='true'],
.cm-tooltip.cm-tooltip-autocomplete > ul > li:hover {
background-color: #2f54eb !important;
background-color: #97a9f5 !important;
color: white !important;
}
`}
/>
<div onClick={handleClick} className={styles.karbour_editor_btn}>
<img src={arrowRight} />
<div className={styles.karbour_editor_divider}>
<Divider type="vertical" />
</div>
<div className={styles.karbour_editor_btn_container}>
<div onClick={handleClick} className={styles.karbour_editor_btn}>
<img src={arrowRight} />
</div>
</div>
</div>
)
Expand Down
Loading

0 comments on commit c2e185d

Please sign in to comment.