# SLS lsp-editor

## 集成请使用稳定版本 0.1.28

## 基本信息

新版查询输入框

## 使用

### 安装

安装@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"
```

- 自定义获取补全项的请求方式（查询）

  - getValueCandidatesFunc: (
    keyName: string,
    keyType: 'text' | 'json' | 'long' | 'double',
    prefix: string
    ) => Promise<CompletionItem[]>

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

```
hiddenGrammarHelp={true}
```

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

```
sealReservedField={true}
```

- 无确认事件时默认回车换行
  - noDefaultConfirm: 默认为 false ，设置为 true 则认为无确认事件，默认回车换行，同时隐藏配置面板内快捷键设置

```
noDefaultConfirm={true}
```

- 去掉配置面板
  - onlyFormatOption: 默认为 false ，设置为 true 可以去掉配置面板，将右侧按钮行为变成格式化

```
onlyFormatOption={true}
```

- 监控内容变化
  - onContentChange: 内容变化时的回调函数

```
onContentChange={
  (curStr) => {
    console.log(curStr)
  }
}
```

- 失焦事件
  - onBlur: 失焦时的回调函数

```
onBlur={
  () => {
    // do something
  }
}
```

## 使用 TraceEditor

### 安装

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

### 引入

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

### 属性配置

1. 必需属性

```
<TraceEditor
  project={projectName}
  logstore={logStoreName}
  startTime={startTime} // 查询起始时间
  endTime={endTime} // 查询结束时间
  languageMode={SLSLanguageMode.IndexQuery} // 请设置为此项
  onConfirm={() => {}} // 确认事件，空函数亦可
/>
```

2. 可选属性

- 索引(可用于 key 列表提示)
  - indexMap: 索引字段

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

- 模版
  - jsonStencil: json 格式的模版 <br>
    每个模版过滤器参数说明：<br>
    keyName: 索引名（只有此参数为必填）。注意此值不能重复！！！<br>
    type: 类型（不指定会尝试从全部索引中获取）<br>
    op: 预设的符号 <br>
    opCandidates: 预设的符号集 <br>
    category: 分类（common 为常用，senior 为高级）<br>
    description: 说明 <br>
    value: 值 <br>
    disabled: 是否禁止下拉修改 <br>
    noValueCandidates: 仅输入框模式
    - op: 预设符号包括：:,=,!=,<,>,<=,>=,in,not in,oneOf,not oneOf, 其中 in 表示数值范围, oneOf 表示多选

```
jsonStencil={{
  'attribute.t': {
    keyName: 'attribute.t',
    type: 'text',
    category: 'common',
    description: '行为类型',
  },
  'duration': {
    keyName: 'duration',
    type: 'long',
    op: 'in',
    category: 'common',
    description: '延迟',
  },
  'resource.os.name': {
    keyName: 'resource.os.name',
    type: 'text',
    category: 'senior',
    description: '操作系统',
  },
}}
```

- 可勾选的固定过滤器
  - constantFilters: json 数组格式 <br>
    每个固定过滤器参数说明（四个参数均需填写）：<br>
    keyName: 索引名<br>
    op: 符号<br>
    value: 值<br>
    explaination: 对这个固定过滤器的说明

```
constantFilters={[
  {
    keyName: 'attribute.log.spm_type',
    op: ':',
    value: 'table',
    explaination: '用户切换到表格模式的行为',
  },
  {
    keyName: 'size',
    op: '>=',
    value: '1024',
    explaination: '筛选size大于1k的日志',
  },
]}
```

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

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

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

```
queryString="your query"
```

- 自定义获取待选项的请求方式

  - getCandidatesFunc: (keyName: string) => Promise<string[]>

- 修改待选项/勾选固定过滤条件时的回调
  - onQueryChangedByAction: (val: string) => {}

```
onQueryChangedByAction={(val) => {
  console.log('currentQuery: ', val)
}}
```

- 修改类别文字
  - categoryTitles: Record<string, string>
```
// 请使用 common, senior, other 这三个键
categoryTitles={{ common: '第一个类别', senior: '第二个类别', other: '其他条件' }}
```

- 模糊查询模式的状态获取
  - onFuzzyChanged: (val: boolean) => {}
```
onFuzzyChanged={(val) => {
  console.log('isFuzzyAllowed: ', val)
}}
```