SLS lsp-editor

基本信息

新版查询输入框

使用

安装

安装@aliyun-sls/lsp-editor、@aliyun-sls/lsp-core

引入

import { SlsEditor } from '@aliyun-sls/lsp-editor'
import { SLSLanguageMode } from '@aliyun-sls/lsp-core'

属性配置

1. 必需属性

<SlsEditor
  project={projectName}
  logstore={logStoreName}
  startTime={startTime} // 查询起始时间
  endTime={endTime} // 查询结束时间
  languageMode={SLSLanguageMode.Index_SQL} // 选择您需要的语言模式
  onConfirm={() => {}} // 确认事件，空函数亦可
/>

• languageMode: NONE, IndexQuery, Index_SQL, Index_SPL, Index_SQL_SPL

2. 可选属性

• 索引
  • indexMap: 索引字段

类型定义：
indexMap?: Record<string, IIndexKey>
interface IIndexKey {
  type: 'text' | 'json' | 'long' | 'double'
  json_keys?: Record<string, IIndexKey> // json类型下形成树形结构
}

• 控制editor大小
  • defaultLineNumber: 默认行数
  • minLineNumber: 最小高度（以行为单位）
  • maxLineNumber: 最大高度（以行为单位）

defaultLineNumber={1}
minLineNumber={1}
maxLineNumber={7}

• 提示面板显示方式
  • mode: 显示模式。默认不需要设置，设置为 tooltip 将提示面板变成跟随光标的弹框

mode="tooltip"

• 只读
  • readonly: 输入框只读性。默认为 false ，设置为 true 将输入框置为只读

readonly={true}

• 传入查询语句
  • queryString: 设置语句

queryString="your query"

• 留下查询记录
  • historyFlag: 历史记录藉由浏览器 localStorage 实现，设置使用的 key

historyFlag="history_key"

• 自定义请求方式
  • easyFetch: 至少实现 post 方法的对象

class C{
    constructor(){}
    async post(api, ...) : Promise<any> {
        // your request method
    }
}
const easyFetch = new C()
<SlsEditor
...
easyFetch={easyFetch}
/>

• 隐藏语法帮助
  • hiddenGrammarHelp: 默认为 false ，设置为 true 可以隐藏语法帮助栏

hiddenGrammarHelp={true}

• 隐藏保留字段
  • sealReservedField: 默认为 false ，设置为 true 可以关闭保留字段的提示

sealReservedField={true}